/* ==========================================================
	AGRAZ Stylesheet (compacted)
	Notes:
	- Styles are unchanged; formatting/comments were re-added
	- Keep selectors as-is to avoid changing the look
	========================================================== */
/* --- Image Loading / Fade-in Helpers --- */
@keyframes pulse-grey{
   0%{ background-color:#f0f0f0;}
   50%{ background-color:#e0e0e0;}
   100%{ background-color:#f0f0f0;}

}
.curated-image-wrapper{ background-color:#f0f0f0; animation:pulse-grey 1.5s infinite ease-in-out;}
.img-fade{ opacity:0; transition:opacity 0.8s ease-in-out; will-change:opacity;}
.img-fade.loaded{ opacity:1;}

/* --- Fonts (local) --- */
@font-face{
    font-family:'Jost'; src:url("fonts/Jost-300-Light.2d7286e1a1bb.ttf") format('truetype'); font-weight:300; font-style:normal;
}

@font-face{
    font-family:'Jost'; src:url("fonts/Jost-400-Book.a69dce7811e6.ttf") format('truetype'); font-weight:400; font-style:normal;
}

@font-face{
    font-family:'Jost'; src:url("fonts/Jost-500-Medium.c61fcfcf0ffd.ttf") format('truetype'); font-weight:500; font-style:normal;
}

/* --- Global variables + reset --- */
:root{ --footer-bg:#1e1e1e; --footer-text:#ffffff; --border-color:#e5e5e5; --bg-white:#ffffff; --text-black:#000000; --font-logo:'League Spartan', sans-serif; --font-main:'Jost', sans-serif;}
*{ margin:0; padding:0; box-sizing:border-box;}
body{ font-family:var(--font-main); color:var(--text-black); font-weight:300; letter-spacing:0.5px; display:flex; flex-direction:column; min-height:100vh; padding-top:63px;}
#nav-menu{ font-family:'Jost', sans-serif; font-weight:500; font-style:normal;}
a{ text-decoration:none; color:inherit;}
ul{ list-style:none;}

/* --- Header / Navigation --- */
.site-header{ position:fixed; top:0; left:0; width:100%; z-index:1000; display:flex; justify-content:space-between; align-items:center; padding:0 30px; height:63px; background-color:var(--bg-white); border-bottom:1px solid var(--border-color); transition:transform 0.3s ease-in-out;}
.header-center .nav-link{ position:relative; padding-bottom:4px;}
.header-center .nav-link::after{ content:''; position:absolute; width:0; height:1px; bottom:0; left:0; background-color:var(--text-black); transition:width 0.3s ease;}
.header-center .nav-link:hover::after{ width:100%;}
.header-hidden{ transform:translateY(-100%);}
.header-left .logo{ display:flex; align-items:center; gap:10px; font-size:24px; letter-spacing:1px; font-weight:300;}
.header-left .logo-icon{ width:49px; height:51px; aspect-ratio:49/51;}
.header-center{ display:flex; gap:40px; margin-top:auto; margin-bottom:5px;}
.header-center .nav-link{ font-size:16px; text-transform:capitalize; color:var(--text-black);}
main{ flex:1;}

/* --- Footer --- */
.site-footer{ background-color:var(--footer-bg); color:var(--footer-text); padding:80px 40px 40px 40px;}
.footer-content{ display:flex; justify-content:center; align-items:flex-start; gap:300px; margin-bottom:60px; max-width:1200px; margin-left:auto; margin-right:auto;}
.footer-col{ flex:0 0 auto; text-align:left;}
.footer-col h3{ font-size:28px; font-weight:700; margin-bottom:25px; font-family:var(--font-main);}
.footer-col ul li{ margin-bottom:12px;}
.footer-col ul li a{ font-size:16px; font-weight:300; opacity:0.8; display:inline-block; padding:2px 0; border-radius:2px; background-color:transparent; transition:opacity 0.2s ease, background-color 0.2s ease;}
.footer-col ul li a:hover{ opacity:1; background-color:rgba(255, 255, 255, 0.12);}
.footer-bottom{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:40px;}
.footer-bottom .line{ height:1px; background-color:rgba(255, 255, 255, 0.2); flex-grow:1;}
.footer-logo img{ width:161px; height:169px; aspect-ratio:161/169;}

@media(max-width:1024px){
    .site-footer{ width:100%; padding:40px 20px 25px 20px;}
    .footer-content{ width:100%; flex-direction:column; align-items:flex-start; gap:24px; margin-bottom:28px;}
    .footer-col h3{ font-size:18px; margin-bottom:12px;}
    .footer-col ul li{ margin-bottom:8px;}
    .footer-col ul li a{ font-size:14px;}
    .footer-bottom{ gap:12px; margin-top:20px;}
    .footer-logo img{ width:105px; height:auto;}
}

@media(max-width:768px){
    .site-footer{ padding:40px 20px 25px 20px;}
    .footer-content{ flex-direction:column; align-items:flex-start; gap:24px; margin-bottom:28px;}
    .footer-col h3{ font-size:18px; margin-bottom:12px;}
    .footer-col ul li{ margin-bottom:8px;}
    .footer-col ul li a{ font-size:14px;}
    .footer-bottom{ gap:12px; margin-top:20px;}
    .footer-logo img{ width:105px; height:auto;}
}

/* --- Home: Hero Slider / Banner --- */
.hero-slider-container{ position:relative; width:100%; height:calc(100vh - 80px); overflow:hidden; background-color:#000;}
.hero-slider{ width:100%; height:100%; position:relative;}
.slide{ position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:opacity 0.8s ease-in-out; visibility:hidden;}
.slide.active{ opacity:1; visibility:visible; z-index:1;}
.slide-media, .banner-img, .banner-video{ width:100%; height:100%; object-fit:cover;}
.slide-content{ position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; z-index:2; padding:0 80px;}
.slide-content.position-left{ justify-content:flex-start;}
.slide-content.position-left .content-wrapper{ align-items:flex-start; text-align:left;}
.slide-content.position-right{ justify-content:flex-end;}
.slide-content.position-right .content-wrapper{ align-items:flex-end; text-align:right;}
.slide-content.color-white{ color:#fff;}
.slide-content.color-black{ color:#000;}
.content-wrapper{ max-width:600px; display:flex; flex-direction:column;}
.slide-caption{ font-family:'Anton', sans-serif; font-size:60px; text-transform:uppercase; line-height:1; margin-bottom:15px; letter-spacing:2px;}
.slide-title{ font-family:var(--font-main); font-weight:300; font-size:50px; text-transform:uppercase; letter-spacing:1px; line-height:1.1; margin-bottom:0;}
.explore-btn{ font-family:var(--font-logo); font-size:14px; font-weight:700; text-transform:uppercase; text-decoration:none; padding:12px 30px; border:1px solid currentColor; border-radius:30px; display:inline-block; margin-bottom:25px; transition:all 0.3s ease;}
.explore-btn{ border-radius:0; background:transparent; padding:10px 18px; letter-spacing:2px;}
.explore-btn:hover{ opacity:0.75; background:transparent; mix-blend-mode:normal;}
.color-white .explore-btn:hover{ color:#fff;}
.color-black .explore-btn:hover{ color:#000;}
.nav-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:10; background:transparent; border:none; font-size:40px; font-weight:100; color:#fff; cursor:pointer; padding:20px; opacity:0.6; transition:all 0.3s ease;}
.nav-arrow:hover{ opacity:1; transform:translateY(-50%) scale(1.1);}
.prev-btn{ left:20px;}
.next-btn{ right:20px;}
.slider-controls{ position:absolute; bottom:30px; left:0; width:100%; display:flex; justify-content:center; z-index:10; color:#fff;}
.slide-indicators{ display:flex; align-items:center; gap:15px; font-family:'Anton', sans-serif; font-size:16px;}
.dots-container{ display:flex; gap:8px;}
.dot{ width:40px; height:2px; background-color:rgba(255, 255, 255, 0.4); cursor:pointer; transition:background-color 0.3s;}
.dot.active{ background-color:#fff;}

@media(max-width:768px){
    /* Make the hero slide feel like a square card on phones */
    .hero-slider-container{ height:100vw; min-height:420px; max-height:560px;}
    .slide-content{ padding:0 18px 22px 18px; align-items:flex-end;}
    .slide-content::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:55%; background:linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0)); pointer-events:none;}
    .slide-content.color-black::before{ background:linear-gradient(to top, rgba(255,255,255,0.7), rgba(255,255,255,0));}
    .content-wrapper{ max-width:100%; position:relative; z-index:1;}
    .slide-caption{ font-size:32px; margin-bottom:10px; letter-spacing:1px;}
    .slide-title{ font-size:22px; line-height:1.15;}
    .explore-btn{ font-size:12px; padding:10px 22px; margin-bottom:14px;}
    .nav-arrow{ font-size:28px; padding:10px;}
    .prev-btn{ left:5px;}
    .next-btn{ right:5px;}
    .slider-controls{ bottom:16px;}
    .dot{ width:26px;}
}

/* --- Shared: Section headers --- */
.section-header{ width:95%; margin:0 auto; padding-top:40px; padding-bottom:10px;}
.section-header h2{ font-family:'Anton', sans-serif; font-size:40px; text-transform:uppercase; color:#000; margin:0; letter-spacing:1px; text-align:left;}

/* --- Catalogue / Filters / Grid --- */
.catalogue-container{ display:flex; height:calc(100vh - 80px); overflow:hidden; margin-top:20px; padding:0 15px;}
.catalogue-sidebar{ width:280px; background:#fff; padding:30px; border-right:1px solid #eee; overflow-y:auto; flex-shrink:0; transition:transform 0.3s ease;}
.sidebar-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
.sidebar-header h2{ font-family:'League Spartan', sans-serif; font-weight:700; text-transform:uppercase; font-size:32px; margin:0;}
.catalogue-topbar{ display:none;}
.catalogue-title{ display:none;}
.accordion-btn{ background-color:transparent; border:none; border-bottom:1px solid #eee; width:100%; text-align:left; padding:15px 0; font-family:'League Spartan', sans-serif; font-size:18px; font-weight:400; cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
.accordion-btn:after{ content:'+'; font-weight:400; font-size:20px;}
.accordion-btn.active:after{ content:'-';}
.filter-content{ max-height:0; overflow:hidden; transition:max-height 0.3s ease-out, padding 0.3s ease; padding-top:0; padding-bottom:0;}
.filter-content.open{ max-height:300px; padding-top:10px; padding-bottom:10px;}
.filter-content label{ display:flex; align-items:center; gap:10px; margin:10px 0; cursor:pointer; font-size:14px; color:#555; margin-left:5px;}
.filter-content input[type="radio"]{ appearance:none; -webkit-appearance:none; width:16px; height:16px; border:1px solid #ccc; border-radius:50%; margin-right:10px; cursor:pointer; position:relative; transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display:grid; place-content:center;}
.filter-content input[type="radio"]:hover{ border-color:#666;}
.filter-content input[type="radio"]:checked{ background-color:#000; border-color:#000; transform:scale(1.1);}
.filter-content input[type="radio"]::before{ content:""; width:8px; height:8px; border-radius:50%; transform:scale(0); background-color:white; transition:0.2s transform ease-in-out;}
.filter-content input[type="radio"]:checked::before{ transform:scale(1);}
.filter-actions{ display:flex; gap:10px; margin-top:30px;}
.apply-btn, .clear-btn{ flex:1; padding:12px 0; border:1px solid #000; text-transform:uppercase; font-size:12px; font-weight:bold; cursor:pointer; text-align:center; text-decoration:none; transition:all 0.2s;}
.apply-btn{ background:#000; color:#fff;}
.apply-btn:hover{ opacity:0.8;}
.clear-btn{ background:transparent; color:#000;}
.clear-btn:hover{ background:#f4f4f4;}
.catalogue-grid-wrapper{ flex:1; display:flex; flex-direction:column; overflow-y:auto; padding:30px;}
.catalogue-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:30px;}
.product-card{ text-decoration:none; color:inherit; display:block;}
.product-image{ width:100%; aspect-ratio:3/4; background:#f4f4f4; overflow:hidden; margin-bottom:15px;}
.product-image img{ width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease;}
.product-card:hover .product-image img{ transform:scale(1.05);}
.product-info h4{ font-size:18px; margin:0 0 5px 0; font-weight:bold;}
.product-info .desc{ font-size:14px; color:#666; margin:0 0 5px 0;}
.product-info .price{ font-weight:bold; font-size:16px;}
.pagination{ margin-top:40px; text-align:center; padding:20px;}
.step-links a{ text-decoration:none; color:#000; padding:8px 15px; border:1px solid #ddd; margin:0 2px; font-size:14px; transition:0.2s;}
.step-links a:hover{ background-color:#000; color:#fff; border-color:#000;}
.step-links .current{ font-weight:bold; margin:0 10px;}
#filter-toggle-btn{ display:none; position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#000; color:#fff; padding:12px 30px; border-radius:30px; z-index:100; font-family:'Anton', sans-serif; border:none; box-shadow:0 4px 15px rgba(0, 0, 0, 0.3);}
.close-btn{ display:none; background:none; border:none; font-size:30px; cursor:pointer;}

.catalogue-filter-overlay{ position:fixed; inset:0; background:rgba(0,0,0,0.35); opacity:0; pointer-events:none; transition:opacity 0.2s ease; z-index:98;}
.catalogue-filter-overlay.active{ opacity:1; pointer-events:auto;}
body.catalogue-filter-open{ overflow:hidden;}

@media(max-width:900px){
    .catalogue-container{ display:block; padding:0 15px; height:auto; overflow:visible;}
    .catalogue-grid-wrapper{ padding:0 0 30px 0;}

    .catalogue-topbar{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:10px 0 12px 0; margin:0 0 18px 0; border-bottom:1px solid #eee;}
    .catalogue-title{ display:block; margin:0; font-family:'League Spartan', sans-serif; font-weight:700; font-size:38px; line-height:0.95; letter-spacing:1px; text-transform:uppercase; color:#000;}

    .catalogue-grid{ grid-template-columns:repeat(2, 1fr); gap:18px;}
    .product-image{ aspect-ratio:1/1; margin-bottom:10px;}

   .catalogue-sidebar{ position:fixed; top:0; left:0; bottom:0; z-index:99; transform:translateX(-100%); width:85%; max-width:320px; box-shadow:5px 0 20px rgba(0, 0, 0, 0.1);}
   .catalogue-sidebar.active{ transform:translateX(0);}
    #filter-toggle-btn{ display:inline-flex; align-items:center; justify-content:center; position:static; bottom:auto; left:auto; transform:none; background:transparent; color:#000; padding:10px 16px; border-radius:0; z-index:1; border:1px solid #000; font-family:'League Spartan', sans-serif; font-weight:700; letter-spacing:1px; text-transform:uppercase; font-size:12px; cursor:pointer; box-shadow:none;}
    #filter-toggle-btn:hover{ background:#000; color:#fff;}
   .close-btn{ display:block; margin-left:auto; border:none; background:none; font-size:24px;}

}

/* --- Product Detail + Recommendations + Lightbox --- */
.detail-container{ display:flex; align-items:flex-start; max-width:1400px; margin:40px auto; padding:0 20px;}
.detail-left{ width:60%; padding-right:60px;}
.product-mobile-info{ display:none; }
.image-grid{ display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-bottom:80px;}
.img-box{ position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; cursor:zoom-in; background:#f8f8f8;}
.zoom-media{ width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease-out; transform-origin:center center;}
.video-badge{ position:absolute; bottom:10px; right:10px; background:rgba(0, 0, 0, 0.6); color:white; padding:4px 8px; font-size:10px; font-weight:bold; border-radius:4px; pointer-events:none;}
.recommendation-section{ margin-bottom:60px; padding-top:20px; border-top:1px solid #eee;}
.recommendation-section h3{ font-family:'League Spartan', sans-serif; font-size:20px; margin-bottom:25px; text-transform:uppercase; letter-spacing:1px;}
.horizontal-scroll-wrapper{ display:flex; overflow-x:auto; gap:20px; padding-bottom:20px; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#333 #f0f0f0;}
.horizontal-scroll-wrapper::-webkit-scrollbar{ height:6px;}
.horizontal-scroll-wrapper::-webkit-scrollbar-track{ background:#f4f4f4; border-radius:4px;}
.horizontal-scroll-wrapper::-webkit-scrollbar-thumb{ background:#333; border-radius:4px;}
.horizontal-scroll-wrapper::-webkit-scrollbar-thumb:hover{ background:#000;}
.rec-card{ flex:0 0 200px; scroll-snap-align:start; text-decoration:none; color:inherit;}
.rec-img-wrapper{ width:100%; aspect-ratio:3/4; background:#f4f4f4; overflow:hidden; margin-bottom:10px;}
.rec-img-wrapper img{ width:100%; height:100%; object-fit:cover; transition:transform 0.4s;}
.rec-card:hover img{ transform:scale(1.05);}
.rec-name{ font-size:14px; margin:0; font-weight:500;}
.rec-price{ font-size:14px; color:#666; margin:5px 0 0 0;}
.detail-right{ width:40%; position:sticky; top:40px; height:fit-content;}
.sticky-wrapper{ padding-left:20px;}
.back-link{ display:block; color:#999; text-decoration:none; font-size:11px; margin-bottom:40px; font-family:'League Spartan', sans-serif; letter-spacing:1px; transition:color 0.2s;}
.back-link:hover{ color:#000;}
.product-header h1{ font-family:'Anton', sans-serif; font-size:56px; margin:0 0 15px 0; line-height:0.9; text-transform:uppercase;}
.price{ font-size:22px; font-weight:600; margin-bottom:40px; font-family:'League Spartan', sans-serif;}
.product-desc{ margin-bottom:40px; font-family:'League Spartan', sans-serif; line-height:1.7; font-size:15px; color:#555;}
.size-selector{ display:flex; gap:12px; margin-bottom:50px;}
.size-btn{ width:50px; height:50px; border:1px solid #e0e0e0; background:transparent; font-family:'League Spartan', sans-serif; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.2s; position:relative;}
.size-btn:hover:not(.unavailable){ border-color:#000; background:#000; color:#fff;}
.size-btn.unavailable{ opacity:0.5; cursor:not-allowed; border-color:#ddd; color:#bbb; z-index:1;}
.size-btn.unavailable::before, .size-btn.unavailable::after{ content:''; position:absolute; top:50%; left:50%; width:80%; height:1px; background:#888; z-index:2;}
.size-btn.unavailable::before{ transform:translate(-50%, -50%) rotate(45deg);}
.size-btn.unavailable::after{ transform:translate(-50%, -50%) rotate(-45deg);}
.fav-btn{ width:100%; padding:20px; background:#000; color:#fff; border:none; font-family:'Anton', sans-serif; font-size:16px; cursor:pointer; text-transform:uppercase; letter-spacing:1px; margin-bottom:40px; transition:opacity 0.2s;}
.fav-btn:hover{ opacity:0.8;}
.contact-card{ border:1px solid #eee; padding:15px; display:flex; align-items:center; gap:15px; border-radius:8px; background:#fafafa;}
.icon-circle{ width:40px; height:40px; background:#000; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.icon-circle svg{ width:20px; height:20px;}
.contact-text{ display:flex; flex-direction:column;}
.contact-text .label{ font-size:11px; color:#888; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;}
.contact-link{ text-decoration:none; color:#000; font-family:'League Spartan', sans-serif; font-weight:700; font-size:14px; border-bottom:1px solid transparent; transition:border 0.2s;}
.contact-link:hover{ border-bottom-color:#000;}
.lightbox{ display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; background-color:rgba(255, 255, 255, 0.98); justify-content:center; align-items:center;}
.lightbox-inner{ width:90%; height:90%; display:flex; justify-content:center; align-items:center;}
.lightbox-content{ max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 10px 40px rgba(0, 0, 0, 0.1); display:block; margin:auto;}

@media(max-width:900px){
    .detail-container{ flex-direction:column; align-items:stretch; margin:18px auto; padding:0 14px;}
    .detail-left{ width:100%; padding-right:0;}

    /* Show product info directly under image grid on mobile */
    .product-mobile-info{ display:block; }
    .detail-right{ display:none; }

    .image-grid{ gap:8px; margin-bottom:18px; }
    .img-box{ aspect-ratio:1/1; }

    .product-mobile-info .back-link{ margin-bottom:14px; }
    .product-mobile-info .product-header h1{ font-family:'League Spartan', sans-serif; font-weight:700; font-size:34px; margin:0 0 10px 0; line-height:1.05; letter-spacing:1px; text-transform:uppercase;}
    .product-mobile-info .price{ margin-bottom:18px; }
    .product-mobile-info .product-desc{ margin-bottom:22px; }
    .product-mobile-info .size-selector{ margin-bottom:26px; }
    .product-mobile-info .size-btn{ width:46px; height:46px; }
    .product-mobile-info .fav-btn{ margin-bottom:22px; }

    .recommendation-section{ margin-bottom:34px; padding-top:16px; }
    .recommendation-section h3{ font-size:16px; margin-bottom:16px; }

}
.lightbox{ display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; background-color:rgba(255, 255, 255, 0.98); justify-content:center; align-items:center;}
.lightbox-inner{ width:90%; height:90%; display:flex; justify-content:center; align-items:center;}
.lightbox-zoom-container{ width:100%; height:100%; display:flex; justify-content:center; align-items:center; overflow:hidden; cursor:zoom-in;}
.lightbox-content{ max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 10px 40px rgba(0, 0, 0, 0.1); transition:transform 0.2s ease-out;}
.close-lightbox{ position:absolute; top:30px; right:50px; font-size:50px; cursor:pointer; color:#000; font-weight:100; z-index:2001;}

/* --- Auth (login/signup/password reset) --- */
.auth-container{ display:flex; justify-content:center; align-items:center; min-height:80vh; padding:20px;}
.auth-box{ width:100%; max-width:450px; text-align:center;}
.auth-box h1{ font-family:'Anton', sans-serif; font-size:42px; margin-bottom:40px; letter-spacing:1px;}
.social-actions{ display:flex; flex-direction:column; gap:15px; margin-bottom:30px;}
.social-btn{ display:block; width:100%; padding:15px; text-decoration:none; font-family:'League Spartan', sans-serif; font-weight:700; text-transform:uppercase; font-size:14px; border:1px solid #000; transition:0.3s;}
.google-btn{ background:#fff; color:#000;}
.google-btn:hover{ background:#f4f4f4;}
.divider{ position:relative; margin:30px 0; border-bottom:1px solid #ddd;}
.divider span{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); background:#fff; padding:0 10px; color:#999; font-size:12px; font-family:'League Spartan', sans-serif;}
.form-group{ margin-bottom:20px; text-align:left;}
.form-group label{ display:block; font-family:'League Spartan', sans-serif; font-size:12px; font-weight:700; margin-bottom:5px; letter-spacing:1px;}
.form-group input{ width:100%; padding:15px; border:1px solid #ccc; font-family:'League Spartan', sans-serif; font-size:16px; outline:none;}
.form-group input:focus{ border-color:#000;}
.primary-action-btn{ width:100%; padding:18px; background:#000; color:#fff; border:none; font-family:'Anton', sans-serif; font-size:18px; text-transform:uppercase; cursor:pointer; margin-top:20px;}
.primary-action-btn:hover{ opacity:0.8;}
.forgot-pass{ display:block; text-align:right; font-size:12px; color:#666; text-decoration:none; margin-top:-10px;}
.error-msg{ color:red; font-size:14px; margin-bottom:15px;}
.switch-auth{ margin-top:30px; font-size:14px;}
.switch-auth a{ color:#000; font-weight:bold;}

/* --- Home: Brand Spotlight (parallax banners) --- */
.brand-spotlight-section{ width:100%; background-color:#ffffff; padding-bottom:4rem;}
.brand-spotlight-section .section-header{ padding:60px 5% 22px 5%; text-align:left; width:100%; height:auto; margin:0; background-color:#ffffff;}
.brand-spotlight-section .section-header .spotlight-title{ font-family:'League Spartan', sans-serif; font-size:4rem; text-transform:uppercase; letter-spacing:10px; color:#000000; margin:0; font-weight:300;}
.spotlight-container{ display:flex; flex-direction:column; gap:0;}
.parallax-banner{ position:relative; width:100%; height:90vh; background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden;}
.parallax-overlay{ position:absolute; inset:0; background:rgba(0, 0, 0, 0.35); z-index:1;}
.parallax-content{ position:relative; z-index:2; max-width:800px; padding:2rem; color:#fff; animation:fadeIn 1s ease-out;}
.brand-title{ font-family:'Anton', sans-serif; font-size:4.5rem; text-transform:uppercase; margin-bottom:1rem; line-height:1;}
.brand-desc{ font-family:'Jost', sans-serif; font-size:1.25rem; font-weight:400; margin-bottom:2.5rem; line-height:1.5; opacity:0.9;}
.spotlight-btn{ display:inline-block; font-family:'League Spartan', sans-serif; font-weight:600; font-size:0.95rem; text-transform:uppercase; letter-spacing:2px; border-radius:0; background:transparent; color:#fff; padding:0.9rem 1.8rem; text-decoration:none; transition:opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease; border:1px solid rgba(255,255,255,0.9);}
.spotlight-btn:hover{ background-color:#fff; color:#000; opacity:1;}

@media(max-width:1024px){
    .brand-spotlight-section .section-header .spotlight-title{ font-size:3rem; letter-spacing:6px;}
}

@media(max-width:768px){
    .parallax-banner{ height:50vh; }
    .brand-spotlight-section .section-header{ padding:42px 5% 16px 5%; }
    .brand-spotlight-section .section-header .spotlight-title{ font-size:2.1rem; letter-spacing:4px; }
   .brand-title{ font-size:2.5rem;}

}

/* Disable fixed backgrounds on real touch devices (keeps parallax when just resizing desktop). */
@media (hover:none) and (pointer:coarse){
    .parallax-banner{ background-attachment:scroll; }
}

/* --- Home: Curated Boxes --- */
.curated-section{ padding:4rem 5%; background-color:#fff;}
.curated-header{ text-align:center; margin-bottom:3rem;}
.curated-title{ font-family:'League Spartan', sans-serif; font-size:4rem; text-transform:uppercase; letter-spacing:15px; color:#000000; margin:0; font-weight:300;}
.curated-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; width:100%;}
.curated-card{ text-decoration:none; display:flex; flex-direction:column; align-items:center;}
.curated-image-wrapper{ width:100%; aspect-ratio:3 / 4; overflow:hidden; position:relative; background-color:#f4f4f4; margin-bottom:1.5rem;}
.curated-image-wrapper img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.curated-card:hover .curated-image-wrapper img{ transform:scale(1.05);}
.curated-label{ font-family:'League Spartan', sans-serif; font-size:1.1rem; font-weight:500; color:#000; text-transform:capitalize; margin:0; position:relative;}
.curated-label::after{ content:''; position:absolute; width:0; height:1px; bottom:-5px; left:0; background-color:#000; transition:width 0.3s ease;}
.curated-card:hover .curated-label::after{ width:100%;}

@media(max-width:1024px){
   .curated-grid{ grid-template-columns:repeat(2, 1fr); gap:30px;}

}

@media(max-width:600px){
   .curated-grid{ grid-template-columns:1fr; gap:40px;}
   .curated-title{ font-size:2rem;}

}

/* --- Location page --- */
.location-hero{ position:relative; width:100%; height:70vh; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.location-bg-image{ position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:center; z-index:1; background-attachment:fixed;}
.location-overlay{ position:relative; z-index:2; text-align:center; color:#fff; background:rgba(0, 0, 0, 0.4); width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.location-title{ font-family:'Anton', sans-serif; font-size:5rem; text-transform:uppercase; letter-spacing:4px; margin:0;}
.location-subtitle{ font-family:'League Spartan', sans-serif; font-size:1.2rem; font-weight:600; letter-spacing:3px; margin-top:1rem; text-transform:uppercase;}
.location-details-container{ display:flex; flex-wrap:wrap; min-height:500px;}
.location-info{ flex:1; min-width:300px; padding:4rem 5%; background-color:#fff; display:flex; flex-direction:column; justify-content:center;}
.info-block{ margin-bottom:3rem;}
.info-label{ font-family:'League Spartan', sans-serif; font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:2px; margin-bottom:0.5rem; color:#000;}
.info-text{ font-family:'Jost', sans-serif; font-size:1.1rem; line-height:1.6; color:#333; max-width:400px;}
.map-wrapper{ flex:1; min-width:300px; position:relative; min-height:350px;}
.grayscale-map{ padding:20px; width:100%; height:100%; filter:grayscale(100%) contrast(1.2); -webkit-filter:grayscale(100%) contrast(1.2); transition:all 0.5s ease; border-radius:15px;}
.grayscale-map:hover{ filter:grayscale(0%); -webkit-filter:grayscale(0%);}

@media(max-width:768px){
   .location-details-container{ flex-direction:column;}
   .location-title{ font-size:3rem;}
   .map-wrapper{ height:300px;}

}

/* --- About page (parallax sections) --- */
.about-page-container{ width:100%; background-color:#000;}
.about-parallax-section{ position:relative; width:100%; min-height:90vh; background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover; display:flex; align-items:center; overflow:hidden;}
.about-content-wrapper{ width:50%; height:100%; position:absolute; top:0; display:flex; align-items:center; padding:0 5%;}
.about-parallax-section.align-left .about-content-wrapper{ left:0; background:linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%); text-align:left;}
.about-parallax-section.align-right{ justify-content:flex-end;}
.about-parallax-section.align-right .about-content-wrapper{ right:0; background:linear-gradient(to left, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0) 100%); text-align:right; flex-direction:column; justify-content:center;}
.about-text-box{ max-width:600px; color:#fff; z-index:2; padding:2rem;}
.about-title{ font-family:'Anton', sans-serif; font-size:4rem; text-transform:uppercase; margin-bottom:1.5rem; line-height:1; letter-spacing:2px;}
.about-body{ font-family:'Jost', sans-serif; font-size:1.25rem; line-height:1.6; font-weight:300; opacity:0.9;}

@media(max-width:768px){
   .about-parallax-section{ min-height:70vh; background-attachment:scroll;}
   .about-content-wrapper{ width:100%; background:rgba(0, 0, 0, 0.6) !important; position:relative; padding:4rem 2rem;}
   .about-title{ font-size:2.5rem;}
   .about-parallax-section.align-right .about-content-wrapper{ text-align:left;}

}

/* --- Lookbook page (video entries) --- */
.lookbook-container{ background-color:#000; min-height:100vh; color:#fff; padding-bottom:5rem;}
.lookbook-header{ padding:6rem 5% 4rem 5%; border-bottom:1px solid #333;}
.lookbook-main-title{ font-family:'Anton', sans-serif; font-size:6rem; line-height:0.9; text-transform:uppercase; margin:0; color:#fff;}
.lookbook-subtitle{ font-family:'League Spartan', sans-serif; font-size:1rem; letter-spacing:4px; margin-top:1rem; color:#888;}
.lookbook-item{ max-width:1200px; margin:0 auto; padding:6rem 5%;}
.video-wrapper{ width:100%; background:#111; margin-bottom:2rem; position:relative; border:1px solid #333;}
.styled-video{ width:100%; height:auto; display:block; max-height:80vh; object-fit:cover;}
.look-info-bar{ display:flex; justify-content:space-between; align-items:flex-start; gap:4rem; padding-top:1rem;}
.info-left{ flex:1;}
.look-index{ display:block; font-family:'Courier New', monospace; color:#555; font-size:0.9rem; margin-bottom:0.5rem;}
.look-title{ font-family:'Anton', sans-serif; font-size:3rem; text-transform:uppercase; margin:0; line-height:1;}
.info-right{ flex:1; display:flex; flex-direction:column; justify-content:space-between;}
.look-desc{ font-family:'Jost', sans-serif; font-size:1.1rem; color:#ccc; line-height:1.5; margin-bottom:2rem;}
.look-cta{ display:inline-block; font-family:'League Spartan', sans-serif; font-weight:700; color:#fff; text-decoration:none; border:1px solid #fff; padding:1rem 2rem; text-align:center; width:fit-content; transition:all 0.3s ease; text-transform:uppercase; letter-spacing:1px;}
.look-cta:hover{ background-color:#fff; color:#000;}
.look-divider{ border:0; height:1px; background:#222; margin:0;}

@media(max-width:768px){
   .lookbook-main-title{ font-size:3.5rem;}
   .look-info-bar{ flex-direction:column; gap:1.5rem;}
   .look-title{ font-size:2rem;}
   .lookbook-item{ padding:3rem 5%;}

}

/* --- HEADER RESPONSIVENESS --- */

/* Default: Desktop */
.mobile-menu-btn { display: none; }
.mobile-drawer { display: none; }
.site-overlay { display: none; }

/* Mobile View (Below 1024px) */
@media (max-width: 1024px) {

    /* Thicker header + slightly larger logo on mobile */
    .site-header{ height:65px; padding:0 18px; }
    body{ padding-top:65px; }
    .header-left .logo{ font-size:28px; }
    .header-left .logo-icon{ width:62px; height:64px; }
    
    /* Hide Desktop Nav */
    .header-center,
    #nav-menu { display: none; }

    /* Hide the top-right account button on mobile (it's in the drawer) */
    .header-right { display: none; }
    
    /* Show Hamburger Button */
    .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        min-width: 62px;
        min-height: 62px;
        margin-left: auto;
        z-index: 1001;
    }
    
    .mobile-menu-btn span {
        display: block;
        width: 38px;
        height: 4px;
        background-color: #000;
        margin-bottom: 0;
        border-radius: 2px;
    }

    /* --- THE DRAWER --- */
    .mobile-drawer {
        display: block; /* It exists, but is hidden by transform */
        position: fixed;
        top: 0;
        right: 0;
        width: 80%; /* Takes up 80% of screen width */
        max-width: 300px;
        height: 100vh;
        background-color: #fff;
        z-index: 1000;
        padding: 2rem;
        
        /* The Animation Logic */
        transform: translateX(100%); /* Hides it to the right */
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth "Nike" ease */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    /* Active State (Added by JS) */
    .mobile-drawer.open {
        transform: translateX(0); /* Slides in */
    }

    /* Drawer Content Styling */
    .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3rem;
    }

    .drawer-title {
        font-family: 'Anton', sans-serif;
        font-size: 1.5rem;
    }

    .mobile-drawer .close-btn {
        display: block;
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }

    .drawer-links a {
        display: block;
        font-family: 'League Spartan', sans-serif;
        font-size: 1.5rem;
        font-weight: 400;
        color: #000;
        text-decoration: none;
        margin-bottom: 1.5rem;
        text-transform: uppercase;
    }

    /* --- THE OVERLAY --- */
    .site-overlay {
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 999; /* Behind drawer, in front of site */
        
        opacity: 0;
        pointer-events: none; /* Let clicks pass through when invisible */
        transition: opacity 0.3s ease;
    }

    .site-overlay.active {
        opacity: 1;
        pointer-events: all;
    }
    
    /* Lock scrolling when menu is open */
    body.no-scroll {
        overflow: hidden;
    }

    .logout-btn {
        margin-top: 2rem;
        
    }
}

@media(max-width:520px){
    .catalogue-grid{ grid-template-columns:repeat(2, 1fr);}
}

/* --- Standard WhatsApp Button --- */

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 2000; /* High z-index to stay on top */
    
    width: 60px;
    height: 60px;
    
    background-color: #25D366; /* Official WhatsApp Green */
    color: #fff;
    border-radius: 50%; /* Perfect Circle */
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    
    /* Soft shadow to make it pop */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.whatsapp-icon {
    width: 55px;
    height: 55px;
    fill: #fff; /* White icon */
}

/* Hover Effect: Slight grow */
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0px 6px 14px rgba(0, 0, 0, 0.4);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
        width: 55px;
        height: 55px;
    }
    
    .whatsapp-icon {
        width: 55px;
        height: 55px;
    }
}