/* Global theme variables */
:root{
	--gold: #c28800;
	--gold-900: #b27100;
	--black: #000000;
	--white: #ffffff;
	--muted: #6b6b6b;
	--glass: rgba(255,255,255,0.06);
	--radius: 12px;
	--max-width: 1200px;
	--transition: 200ms ease;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, 'Poppins', Arial, Helvetica, sans-serif;background:var(--white);color:var(--black);-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none}

/* Container helpers */
.grid-container{max-width:var(--max-width);margin:0 auto;padding:0 18px}

/* Header / logo tweaks (page uses existing HTML structure) */
.site-header .global-header__logo{height:50px;object-fit:contain}
.header-mini__logo img{height:40px}

/* Buttons: login / register */
.n-columns-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.n-columns-2 a{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.03em}
.login{background:linear-gradient(180deg,#ff3b00 0%,#7a0101 100%);color:#fff;border:2px solid rgba(255,255,255,0.8);box-shadow:0 6px 18px rgba(122,1,1,0.18)}
.register{background:linear-gradient(180deg,#b6ff4a 0%,#6f9a2f 100%);color:#000;border:2px solid rgba(255,255,255,0.8);box-shadow:0 6px 18px rgba(0,0,0,0.08)}
.login:hover,.register:hover{transform:translateY(-2px);transition:var(--transition)}

/* Item preview image */
.item-preview img{max-width:100%;height:auto;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.12)}

/* Description / review cards */
.description-wrapper{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding:28px 14px}
.description-box{background:var(--black);border-left:6px solid var(--gold);padding:24px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.25);max-width:720px;width:100%;position:relative;transition:transform var(--transition),box-shadow var(--transition)}
.description-box p{color:var(--gold);margin:0;font-size:1rem;line-height:1.6;font-style:italic}
.description-box cite{display:block;margin-top:14px;color:var(--white);font-weight:600;text-align:right}
.description-box::before{content:"“";position:absolute;left:16px;top:6px;font-size:3rem;color:var(--gold);font-family:Georgia,serif}
.description-box:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.32)}

/* Social links */
.social-links{display:flex;gap:12px;justify-content:center;align-items:center;padding:12px 0;margin:22px 0}
.social-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;color:#fff;font-size:18px;text-decoration:none}
.social-icon.facebook{background:#1877f2}
.social-icon.twitter{background:#1da1f2}
.social-icon.instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.social-icon.youtube{background:#ff0000}
.social-icon.pinterest{background:#bd081c}
.social-icon.blog{background:#333}

/* Preview actions area */
.item-preview__actions{margin-top:14px}
.item-preview__preview-buttons{display:flex;justify-content:center;gap:12px}

/* Breadcrumb / content main improvements */
.context-header{background:var(--gold);color:var(--black);padding:14px 0}
.content-main{background:var(--white);padding:28px 0}

/* Footer tweaks */
.global-footer{background:var(--black);color:var(--gold);padding:36px 0}
.global-footer a{color:var(--gold)}

/* Responsiveness */
@media (max-width:900px){
	.n-columns-2{grid-template-columns:1fr}
	.description-box{padding:18px}
	.social-icon{width:40px;height:40px}
}

@media (max-width:480px){
	.description-box p{font-size:0.95rem}
	.brand-neue-button{padding:10px 14px}
}

/* Accessibility helpers */
.is-hidden{display:none !important}
.h-text-truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Micro-interactions */
.brand-neue-button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;background:var(--gold);color:var(--black);font-weight:600;cursor:pointer;transition:transform var(--transition)}
.brand-neue-button:hover{transform:translateY(-2px)}

/* small utility */
.t-heading{margin:0}

/* Make main content containers slightly transparent so background is visible */
.page, .content-main, .box--no-padding {
	background: transparent !important;
}

/* Add a dark overlay to improve text contrast on top of the image */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	pointer-events: none;
	z-index: 0;
}

/* Ensure page content sits above the overlay */
.page, .canvas, .content-main { position: relative; z-index: 1 }