/* ========================================================================== House of Esse — Storefront Elegant Luxury: black & gold, refined hairlines, editorial serif display Themeable via [data-theme="dark"] on (toggled from Admin > Settings) Type: 'Playfair Display' (display) + 'Inter' (body/UI) ========================================================================== */ :root{ --bg:#FFFFFF; --surface:#FFFFFF; --surface-alt:#F6F4EE; --text:#0A0A0A; --text-muted:#6B6558; --text-faint:#A69F8E; --border:#E7E2D3; --initial-tint:rgba(10,10,10,.13); --ink:#0A0A0A; --on-ink:#F5F1E6; --on-gold:#0A0A0A; --gold:#B7912B; --gold-light:#E3C567; --gold-dark:#8C6C1E; --accent:var(--gold); --accent-dark:var(--gold-dark); --on-accent:var(--on-gold); --gold-foil:linear-gradient(120deg,#8C6C1E 0%,#E3C567 45%,#B7912B 75%,#F3DA92 100%); --display:'Playfair Display', serif; --sans:'Inter', sans-serif; } :root[data-theme="dark"]{ --bg:#0A0A0A; --surface:#141210; --surface-alt:#1C1914; --text:#F3EFE4; --text-muted:#A69F8E; --text-faint:#5C574A; --border:#2A2620; --initial-tint:rgba(243,239,228,.14); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; font-family:var(--sans); background:var(--bg); color:var(--text); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; transition:background .2s ease,color .2s ease; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} ul{margin:0;padding:0;list-style:none;} button{font-family:inherit;cursor:pointer;} input,select,textarea{font-family:inherit;} ::selection{background:var(--gold);color:var(--on-gold);} .container{max-width:1280px;margin:0 auto;padding:0 32px;} h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;letter-spacing:0;} .eyebrow{ font-family:var(--sans); text-transform:uppercase; letter-spacing:.22em; font-size:11px; color:var(--text-muted); font-weight:600; } main{counter-reset:section;} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:var(--bg); border-bottom:1px solid var(--border); } .header-row{ display:flex;align-items:center;justify-content:space-between; padding:18px 0; } .logo{display:inline-flex;align-items:center;} .logo-img{height:56px;width:auto;display:block;} .main-nav{display:flex;align-items:center;gap:22px;} .main-nav a{ font-weight:600;white-space:nowrap; font-size:11.5px;text-transform:uppercase;letter-spacing:.08em; position:relative;padding-bottom:4px; } .main-nav a::after{ content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold); transition:width .2s ease; } .main-nav a:hover::after{width:100%;} .nav-more{position:relative;} .nav-more summary{ font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em; cursor:pointer;list-style:none;white-space:nowrap; display:flex;align-items:center;gap:4px; } .nav-more summary::-webkit-details-marker{display:none;} .nav-more summary::after{content:'▾';font-size:9px;margin-left:2px;} .nav-more-panel{ position:absolute;top:calc(100% + 14px);left:0;min-width:190px; background:var(--surface);border:1px solid var(--border);box-shadow:0 16px 32px rgba(0,0,0,.1); padding:8px;z-index:60; } .nav-more-panel a{display:block;padding:10px 12px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;} .nav-more-panel a:hover{background:var(--surface-alt);color:var(--gold-dark);} .nav-more-panel form{margin:0;} .nav-more-panel button[type="submit"]{ display:block;width:100%;text-align:left;padding:10px 12px; font-family:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:600; background:none;border:none;color:inherit;cursor:pointer; } .nav-more-panel button[type="submit"]:hover{background:var(--surface-alt);color:var(--gold-dark);} /* Account dropdown sits at the far right of the header — anchor its panel to the right edge instead of the left, so it can't spill past the viewport the way a left-anchored panel would this close to the edge. */ .account-more .nav-more-panel{left:auto;right:0;} .header-search{display:flex;} .header-search input{ width:150px;padding:8px 12px;border:1px solid var(--border);background:var(--surface-alt);color:var(--text); font-size:12.5px;border-radius:2px; } .header-search input:focus{outline:none;border-color:var(--gold);background:var(--surface);} .header-actions{display:flex;align-items:center;gap:16px;} .header-actions a{font-weight:600;white-space:nowrap;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;display:flex;align-items:center;gap:6px;} .header-actions a:hover{color:var(--gold-dark);} .theme-toggle{ font-family:inherit;font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em; background:none;border:1px solid var(--border);color:var(--text);padding:6px 12px;border-radius:2px; transition:all .2s ease; } .theme-toggle:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold);} .currency-switcher{ font-family:inherit;font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em; background:var(--surface);color:var(--text);border:1px solid var(--border);padding:6px 8px;border-radius:2px; } .bag-count{ background:var(--gold);color:var(--on-gold); border-radius:50%;width:18px;height:18px; font-weight:700;font-size:11px;display:inline-flex;align-items:center;justify-content:center; } .burger{display:none;background:none;border:none;font-size:22px;color:var(--text);} .nav-close{ display:none;background:none;border:none;color:var(--text); font-family:inherit;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em; padding:0 0 24px;align-self:flex-end; } /* Nav variant: slim — condensed header, smaller logo/type. */ .nav-variant-slim .header-row{padding:10px 0;} .nav-variant-slim .logo-img{height:36px;} .nav-variant-slim .main-nav a{font-size:10.5px;letter-spacing:.05em;} .nav-variant-slim .header-actions a, .nav-variant-slim .header-actions summary{font-size:10.5px;} /* Nav variant: centered — logo + nav cluster centered as a group rather than spread edge-to-edge (search/actions follow, reordered via flex). */ .nav-variant-centered .header-row{justify-content:center;gap:32px;} .nav-variant-centered .logo{order:2;margin:0 4px;} .nav-variant-centered .main-nav{order:1;} .nav-variant-centered .header-search{order:3;} .nav-variant-centered .header-actions{order:4;} .nav-variant-centered .logo-img{height:44px;} @media (max-width:960px){ .nav-variant-centered .header-row{justify-content:space-between;} } @media (max-width:960px){ .main-nav{display:none;} .header-search{display:none;} .burger{display:block;} } @media (max-width:480px){ .header-actions{gap:8px;} .header-actions a,.header-actions summary,.header-actions .theme-toggle,.header-actions .currency-switcher{font-size:10px;} .currency-switcher{padding:5px 6px;} } /* ---------- Mobile nav drawer ---------- */ @media (max-width:960px){ .main-nav.mobile-open{ display:flex;flex-direction:column;align-items:flex-start;gap:0; position:fixed;inset:0 20% 0 0;top:0; background:var(--bg);padding:28px 28px;z-index:70; box-shadow:24px 0 48px rgba(0,0,0,.25); overflow-y:auto; } .main-nav.mobile-open .nav-close{display:block;width:100%;} .main-nav.mobile-open a{padding:14px 0;font-size:14px;width:100%;border-bottom:1px solid var(--border);} .main-nav.mobile-open .nav-more{width:100%;} .main-nav.mobile-open .nav-more-panel{position:static;box-shadow:none;border:none;padding:0;background:none;} .main-nav.mobile-open .nav-more-panel a{padding-left:16px;} } /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:15px 32px; font-weight:600; font-size:11.5px;text-transform:uppercase;letter-spacing:.12em; border:1px solid var(--text); background:var(--text);color:var(--bg); border-radius:2px; transition:all .2s ease; } .btn:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold);} .btn-outline{background:transparent;color:var(--text);} .btn-outline:hover{background:var(--text);color:var(--bg);} .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--on-gold);} .btn-gold:hover{background:var(--text);border-color:var(--text);color:var(--bg);} .btn-block{width:100%;} .btn-sm{padding:10px 18px;font-size:10.5px;} /* ---------- Hero ---------- */ .hero{ position:relative; padding:96px 0 84px; border-bottom:1px solid var(--border); overflow:hidden; } .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;} .hero-copy .eyebrow{margin-bottom:20px;display:block;color:var(--gold-dark);} .hero-copy h1{font-size:64px;line-height:1.05;letter-spacing:0;margin-bottom:26px;} .hero-copy p{max-width:420px;color:var(--text-muted);margin-bottom:36px;font-size:16px;} .hero-visual{ aspect-ratio:4/5; border-radius:2px; background:linear-gradient(150deg,var(--ink) 0%,#221c10 55%,var(--gold-dark) 145%); position:relative; display:flex;align-items:flex-end; padding:30px; } .hero-visual::before{ content:'NEW COLLECTION — SS26'; position:absolute;top:30px;left:30px; font-weight:600;font-size:11px;letter-spacing:.24em;color:rgba(227,197,103,.85);text-transform:uppercase; } .hero-visual .tag{ background:var(--on-ink);color:var(--ink);padding:16px 22px;font-family:var(--display);font-weight:600;font-size:18px; } @media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} .hero-copy h1{font-size:40px;} } /* Full-bleed hero variant: dramatic full-width background, centered copy. */ .hero-full-bleed{padding:0;height:560px;display:flex;align-items:center;justify-content:center;border-bottom:none;} .hero-full-bleed-bg{ position:absolute;inset:0; background:linear-gradient(150deg,var(--ink) 0%,#221c10 55%,var(--gold-dark) 145%); } .hero-full-bleed-inner{position:relative;z-index:1;text-align:center;max-width:640px;} .hero-full-bleed-inner .eyebrow{color:var(--gold-light);margin-bottom:20px;display:block;} .hero-full-bleed-inner h1{font-size:56px;line-height:1.08;color:var(--on-ink);margin-bottom:22px;} .hero-full-bleed-inner p{color:rgba(245,241,230,.8);margin:0 auto 32px;font-size:16px;} @media (max-width:900px){ .hero-full-bleed{height:auto;padding:80px 0;} .hero-full-bleed-inner h1{font-size:36px;} } /* Minimal hero variant: text-only, no visual, quiet and understated. */ .hero-minimal{padding:96px 0 76px;text-align:center;} .hero-minimal-inner{max-width:560px;margin:0 auto;} .hero-minimal-inner .eyebrow{margin-bottom:18px;display:block;} .hero-minimal-inner h1{font-size:44px;line-height:1.15;margin-bottom:22px;} .hero-minimal-inner p{color:var(--text-muted);margin:0 auto 32px;font-size:15.5px;} @media (max-width:900px){ .hero-minimal-inner h1{font-size:32px;} } /* ---------- Section headers ---------- */ .section{padding:84px 0;} .section-head{ display:flex;justify-content:space-between;align-items:flex-end; margin-bottom:44px;border-bottom:1px solid var(--text);padding-bottom:22px; } .section-head h2{font-size:32px;} .section-head h2::before{ counter-increment:section; content:counter(section,decimal-leading-zero)' — '; color:var(--gold); } .section-head a{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--text);padding-bottom:3px;} .section-head a:hover{border-color:var(--gold);color:var(--gold-dark);} /* ---------- Cookie consent banner ---------- */ .cookie-banner{ position:fixed;left:0;right:0;bottom:0;z-index:500; background:var(--ink);color:var(--on-ink); padding:18px 24px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap; box-shadow:0 -2px 12px rgba(0,0,0,.15); } .cookie-banner p{margin:0;font-size:13px;max-width:640px;line-height:1.5;} .cookie-banner .btn-sm{flex-shrink:0;} @media(max-width:600px){ .cookie-banner{flex-direction:column;text-align:center;gap:12px;} } /* ---------- Blog (Journal) ---------- */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 24px;} @media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:560px){.blog-grid{grid-template-columns:1fr;}} .blog-card{display:block;color:inherit;} .blog-card-thumb{ aspect-ratio:4/3;border-radius:2px;overflow:hidden; display:flex;align-items:center;justify-content:center; background:var(--surface-alt);margin-bottom:16px; } .blog-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;} .blog-card:hover .blog-card-thumb img{transform:scale(1.04);} .blog-card-thumb .initial{font-family:var(--display);font-weight:600;font-size:32px;color:var(--text-faint);} .blog-card-body .meta{display:block;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--gold-dark);margin-bottom:8px;} .blog-card-body h3{font-size:19px;margin-bottom:8px;} .blog-card-body p{color:var(--text-muted);font-size:14px;line-height:1.6;} /* ---------- CMS page content (WYSIWYG output) ---------- */ .page-content{color:var(--text-muted);line-height:1.7;font-size:15px;} .page-content h3{color:var(--text);margin-top:36px;margin-bottom:10px;} .page-content h3:first-child{margin-top:8px;} .page-content p{margin-bottom:14px;} .page-content a{color:var(--text);text-decoration:underline;} .page-content ul,.page-content ol{margin:14px 0;padding-left:22px;} .page-content li{margin-bottom:6px;} .page-content blockquote{border-left:3px solid var(--border);padding-left:16px;margin:20px 0;color:var(--text-faint);} /* ---------- Category strip ---------- */ .cat-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;} .cat-card{ aspect-ratio:3/4;position:relative;overflow:hidden; display:flex;align-items:flex-end;padding:18px; background:var(--ink); transition:background .25s ease; } .cat-card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;} .cat-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.05) 55%);} .cat-card:nth-child(6n+2){background:#221f19;} .cat-card:nth-child(6n+3){background:#2E2A21;} .cat-card:nth-child(6n+4){background:var(--gold-dark);} .cat-card:nth-child(6n+5){background:#181510;} .cat-card:nth-child(6n+6){background:#3A3527;} .cat-card span{position:relative;z-index:2;font-family:var(--display);font-weight:600;font-size:18px;color:var(--on-ink);} .cat-card:hover{background:var(--gold);} .cat-card:hover span{color:var(--on-gold);} @media (max-width:900px){.cat-strip{grid-template-columns:repeat(3,1fr);}} @media (max-width:600px){.cat-strip{grid-template-columns:repeat(2,1fr);}} /* ---------- Product grid ---------- */ .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 24px;} @media (max-width:1080px){.product-grid{grid-template-columns:repeat(3,1fr);}} @media (max-width:760px){.product-grid{grid-template-columns:repeat(2,1fr);gap:28px 14px;}} @media (max-width:460px){.product-grid{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto;}} /* ---------- Sold-by badge ---------- */ .sold-by{ display:block;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.05em; color:var(--text-faint);margin-top:6px; } .sold-by a{color:var(--gold-dark);} .sold-by a:hover{text-decoration:underline;} .pdp-sold-by{ font-weight:600;font-size:12.5px;color:var(--text-muted);margin-bottom:20px; } .pdp-sold-by a{color:var(--gold-dark);} /* ---------- Vendor storefront ---------- */ .vendor-banner{ background:var(--ink);color:var(--on-ink);background-size:cover;background-position:center; padding:56px 0; } .vendor-banner-inner{display:flex;align-items:center;gap:24px;} .vendor-logo{width:84px;height:84px;object-fit:cover;border-radius:50%;border:2px solid var(--gold);background:var(--surface);} .vendor-banner-inner h1{font-family:var(--display);font-size:30px;margin-bottom:8px;} .vendor-banner-inner p{color:rgba(245,241,230,.75);max-width:520px;font-size:14px;} /* Vendor banner variant: minimal — plain surface background, no image dependency, more compact. */ .vendor-banner-minimal{background:var(--surface-alt);color:var(--text);padding:36px 0;} .vendor-banner-minimal .vendor-banner-inner h1{color:var(--text);} .vendor-banner-minimal .vendor-banner-inner p{color:var(--text-muted);} .vendor-banner-minimal .vendor-logo{border-color:var(--border);} .vendor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;} @media (max-width:1080px){.vendor-grid{grid-template-columns:repeat(3,1fr);}} @media (max-width:760px){.vendor-grid{grid-template-columns:repeat(2,1fr);}} @media (max-width:460px){.vendor-grid{grid-template-columns:1fr;}} .vendor-card{ display:flex;flex-direction:column;align-items:center;text-align:center; padding:32px 20px;border:1px solid var(--border);background:var(--surface);border-radius:2px; transition:border-color .2s ease; } .vendor-card:hover{border-color:var(--gold);} .vendor-card-logo{ width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--surface-alt); display:flex;align-items:center;justify-content:center;margin-bottom:16px; } .vendor-card-logo img{width:100%;height:100%;object-fit:cover;} .vendor-card-logo .initial{font-family:var(--display);font-weight:600;font-size:26px;color:var(--gold-dark);} .vendor-card h3{font-size:16px;margin-bottom:6px;} .vendor-card p{color:var(--text-faint);font-size:12.5px;font-weight:600;} .product-card{position:relative;} .product-thumb{ display:block; aspect-ratio:3/4;position:relative;overflow:hidden;margin-bottom:16px; background:var(--surface-alt); } .product-thumb .swatch, .product-thumb-img{ position:absolute;inset:0; display:flex;align-items:center;justify-content:center; transition:transform .5s cubic-bezier(.2,.8,.2,1); } .product-thumb-img{width:100%;height:100%;object-fit:cover;} .product-card:hover .swatch, .product-card:hover .product-thumb-img{transform:scale(1.04);} .product-thumb .initial{font-family:var(--display);font-weight:600;font-size:52px;color:rgba(227,197,103,.75);} .swatch-0{background:#141110;} .swatch-1{background:#221f19;} .swatch-2{background:#2E2A21;} .swatch-3{background:linear-gradient(135deg,#141110,var(--gold-dark));} .swatch-4{background:#181510;} .swatch-5{background:#3A3527;} .product-thumb .ribbon{ position:absolute;top:0;left:0; writing-mode:vertical-rl;text-orientation:mixed; font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase; background:var(--ink);color:var(--on-ink); padding:12px 7px; } .product-thumb .sale-flag{ position:absolute;top:12px;right:12px; background:var(--gold);color:var(--on-gold); font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase; padding:6px 10px;border-radius:2px; } .product-thumb .sold-out-flag{background:var(--ink);color:var(--on-ink);} .low-stock-tag{display:block;font-weight:600;font-size:11px;color:var(--gold-dark);margin-top:6px;} .quick-add{ position:absolute;left:0;right:0;bottom:0; display:flex;gap:2px; opacity:0;transform:translateY(8px); transition:all .25s ease; } .product-card:hover .quick-add{opacity:1;transform:translateY(0);} .quick-add form{flex:0 0 auto;} .quick-add .js-add-to-cart, .quick-add .select-options-link{flex:1;} .quick-add button, .quick-add .select-options-link{ background:var(--ink);color:var(--on-ink);border:none; padding:13px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.12em; text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center; } .quick-add button:hover, .quick-add .select-options-link:hover{background:var(--gold);color:var(--on-gold);} .quick-add button:disabled{background:var(--text-faint);color:var(--surface);cursor:not-allowed;} .quick-add button:disabled:hover{background:var(--text-faint);color:var(--surface);} .wishlist-btn{width:44px;font-size:16px;padding:13px 0;} .wishlist-btn.active{background:var(--gold);color:var(--on-gold);} .product-info .cat-label{font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);margin-bottom:6px;} .product-info h3{font-size:16.5px;font-weight:600;margin-bottom:8px;} .price-row{display:flex;gap:10px;align-items:baseline;font-weight:600;font-size:14.5px;} .price-sale{color:var(--gold-dark);} .price-was{text-decoration:line-through;color:var(--text-faint);font-size:12.5px;font-weight:400;} /* Card style variant: overlay — name/price captioned directly on the image behind a gradient scrim, instead of in a block below it. */ .product-card-overlay .product-thumb{margin-bottom:0;} .product-card-overlay .product-info{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:16px 14px; background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 100%); } .product-card-overlay .product-info .cat-label{color:rgba(245,241,230,.75);} .product-card-overlay .product-info h3 a{color:var(--on-ink);} .product-card-overlay .price-row{color:var(--on-ink);} .product-card-overlay .price-was{color:rgba(245,241,230,.6);} .product-card-overlay .sold-by{color:rgba(245,241,230,.65);} .product-card-overlay .sold-by a{color:var(--gold-light);} /* Card style variant: minimal — borderless, understated, no ribbon/hover chrome. */ .product-card-minimal .product-thumb .ribbon{display:none;} .product-card-minimal .quick-add{position:static;opacity:1;transform:none;margin-top:10px;} .product-card-minimal .quick-add button, .product-card-minimal .quick-add .select-options-link{background:transparent;color:var(--text);border:1px solid var(--border);} .product-card-minimal .quick-add button:hover, .product-card-minimal .quick-add .select-options-link:hover{background:var(--text);color:var(--bg);} .product-card-minimal .quick-add button:disabled{background:transparent;border-color:var(--text-faint);} .product-card-minimal .product-info h3{font-weight:500;} /* ---------- Shop layout: filter sidebar + results ---------- */ .shop-layout{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start;padding-top:8px;} .filter-toggle-btn{ display:none;align-items:center;gap:8px; padding:9px 18px;border:1px solid var(--text);background:transparent;color:var(--text); font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;border-radius:20px; } .filter-toggle-btn:hover{background:var(--text);color:var(--bg);} .filter-toggle-btn .count{ background:var(--gold);color:var(--on-gold);border-radius:50%;width:18px;height:18px; display:inline-flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700; } .filter-backdrop{display:none;} .filter-sidebar{position:sticky;top:96px;} .filter-section{border-bottom:1px solid var(--border);padding:18px 0;} .filter-section:first-child{padding-top:0;} .filter-section summary{ display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none; font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.1em; } .filter-section summary::-webkit-details-marker{display:none;} .filter-section summary::after{content:'+';font-size:15px;color:var(--text-muted);font-weight:400;} .filter-section[open] summary::after{content:'−';} .filter-section-body{padding-top:16px;} .filter-cat-list a{display:flex;justify-content:space-between;padding:7px 0;font-size:13.5px;color:var(--text-muted);} .filter-cat-list a:hover{color:var(--text);} .filter-cat-list a.active{color:var(--gold-dark);font-weight:600;} .filter-check-list{display:flex;flex-direction:column;gap:10px;max-height:220px;overflow-y:auto;} .filter-check{display:flex;align-items:center;gap:9px;font-size:13.5px;cursor:pointer;} .filter-check input{width:15px;height:15px;accent-color:var(--gold);} .filter-price-row{display:flex;align-items:center;gap:8px;} .filter-price-row input{ width:100%;padding:9px 10px;border:1px solid var(--border);background:var(--surface);color:var(--text); font-size:13px;border-radius:2px; } .filter-price-row input:focus{outline:none;border-color:var(--gold);} .filter-price-row span{color:var(--text-faint);font-size:12px;} .filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;} .filter-chip{ display:inline-flex;align-items:center;gap:8px; padding:7px 8px 7px 14px;border:1px solid var(--text);border-radius:20px; font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em; } .filter-chip span{font-size:14px;line-height:1;} .filter-chip.clear-all{border-color:var(--gold);color:var(--gold-dark);} @media (max-width:960px){ .shop-layout{grid-template-columns:1fr;} .filter-toggle-btn{display:inline-flex;} .filter-sidebar{ position:fixed;top:0;right:-100%;bottom:0;width:min(340px,86vw);z-index:90; background:var(--bg);padding:28px;overflow-y:auto; transition:right .3s ease;box-shadow:-24px 0 48px rgba(0,0,0,.2); } .filter-sidebar.open{right:0;} .filter-sidebar-close{display:block;margin-bottom:20px;background:none;border:none;font-size:22px;color:var(--text);} .filter-backdrop.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:85;} } .filter-sidebar-close{display:none;} /* ---------- Filters bar ---------- */ .filters-bar{ display:flex;justify-content:space-between;align-items:center; padding:20px 0;border-bottom:1px solid var(--border);margin-bottom:36px; } .filter-pills{display:flex;gap:8px;flex-wrap:wrap;} .filter-pills a{ padding:9px 18px;border:1px solid var(--border);font-weight:600;font-size:11.5px; text-transform:uppercase;letter-spacing:.06em;border-radius:20px; } .filter-pills a.active,.filter-pills a:hover{background:var(--text);color:var(--bg);border-color:var(--text);} .sort-select{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:10px 16px;font-weight:600;font-size:13px;border-radius:2px;} /* ---------- Product detail ---------- */ .pdp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;padding:56px 0;} .pdp-gallery-main{ aspect-ratio:4/5;background:var(--surface-alt); display:flex;align-items:center;justify-content:center;position:relative; overflow:hidden; } .pdp-gallery-main .initial{font-family:var(--display);font-weight:600;font-size:120px;color:var(--initial-tint);} .pdp-gallery-img{width:100%;height:100%;object-fit:cover;} .pdp-thumbs{display:flex;gap:10px;margin-top:14px;} .pdp-thumb{ width:64px;height:80px;padding:0;overflow:hidden; background:var(--surface-alt);border:2px solid transparent;cursor:pointer;border-radius:2px; } .pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .pdp-thumb.active{border-color:var(--gold);} .pdp-info .cat-label{font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-dark);margin-bottom:12px;} .pdp-info h1{font-size:34px;margin-bottom:16px;} .pdp-price{font-family:var(--display);font-weight:600;font-size:24px;margin-bottom:26px;display:flex;gap:12px;align-items:baseline;} .pdp-desc{color:var(--text-muted);margin-bottom:28px;max-width:480px;font-size:15px;} .pdp-meta{display:flex;gap:28px;margin-bottom:28px;font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;} .size-select-group{margin-bottom:28px;} .size-select-group label{display:block;font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px;} .size-options{display:flex;gap:8px;flex-wrap:wrap;} .size-options button{ width:48px;height:42px;border:1px solid var(--text);background:transparent;color:var(--text);font-weight:600;font-size:13px;border-radius:2px; } .size-options button.selected{background:var(--text);color:var(--bg);} .qty-row{display:flex;gap:16px;align-items:center;margin-bottom:28px;} .qty-control{display:flex;border:1px solid var(--text);border-radius:2px;} .qty-control button{width:40px;background:transparent;color:var(--text);border:none;font-size:17px;font-weight:600;} .qty-control button:hover{background:var(--surface-alt);} .qty-control input{width:44px;text-align:center;border:none;background:transparent;color:var(--text);font-weight:600;font-size:14px;} .stock-note{font-weight:600;font-size:12px;color:var(--gold-dark);margin-top:14px;text-transform:uppercase;letter-spacing:.04em;} .pdp-add-msg{margin-top:16px;font-weight:600;font-size:13px;color:var(--gold-dark);display:none;} /* ---------- Cart ---------- */ .cart-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:64px;padding:56px 0;align-items:flex-start;} .cart-line{ display:grid;grid-template-columns:96px 1fr auto auto;gap:22px;align-items:center; padding:26px 0;border-bottom:1px solid var(--border); } .cart-thumb{aspect-ratio:3/4;background:var(--surface-alt);display:flex;align-items:center;justify-content:center;overflow:hidden;} .cart-thumb .initial{font-family:var(--display);font-weight:600;font-size:24px;color:var(--initial-tint);} .cart-thumb img{width:100%;height:100%;object-fit:cover;} .cart-line h4{font-size:16px;margin-bottom:8px;} .cart-line .meta{font-weight:600;font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;} .cart-remove{font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-dark);border-bottom:1px solid transparent;margin-top:10px;display:inline-block;} .cart-remove:hover{border-color:var(--gold-dark);} .order-row{grid-template-columns:1fr auto auto auto;gap:16px;} .summary-box{background:var(--ink);color:var(--on-ink);padding:36px;border-radius:2px;} .summary-row{display:flex;justify-content:space-between;padding:11px 0;font-size:14px;} .summary-row.total{border-top:1px solid rgba(227,197,103,.3);margin-top:10px;padding-top:18px;font-family:var(--display);font-weight:600;font-size:20px;color:var(--gold-light);} .empty-state{text-align:center;padding:110px 0;} .empty-state h2{margin-bottom:16px;} .empty-state p{color:var(--text-muted);margin-bottom:32px;} /* ---------- Checkout / Auth forms ---------- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;} .field{margin-bottom:22px;} .field.full{grid-column:1/-1;} .field label{display:block;font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;color:var(--text);} .field input,.field select,.field textarea{ width:100%;padding:14px 16px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px;border-radius:2px; } .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);} .field-check{display:flex;align-items:center;gap:10px;margin-bottom:20px;} .field-check input{width:auto;accent-color:var(--gold);} .error-text{color:#B0402C;font-weight:600;font-size:12px;margin-top:8px;display:block;} .help-text{color:var(--text-muted);font-size:12px;margin-top:8px;display:block;} .payment-methods{display:flex;flex-direction:column;gap:10px;} .payment-method-option{ display:flex;align-items:center;gap:10px; padding:14px 16px;border:1px solid var(--border);border-radius:2px; font-size:14px;font-weight:600;cursor:pointer; } .payment-method-option:has(input:checked){border-color:var(--gold);background:var(--surface-alt);} .payment-method-option input{width:auto;accent-color:var(--gold);} .auth-card{max-width:460px;margin:76px auto;padding:56px;background:var(--surface);border:1px solid var(--border);border-radius:2px;} .auth-card h1{font-size:28px;margin-bottom:10px;text-align:center;} .auth-card p.sub{text-align:center;color:var(--text-muted);margin-bottom:34px;font-size:14px;} .auth-switch{text-align:center;margin-top:24px;font-size:13px;} .auth-switch a{text-decoration:underline;font-weight:600;color:var(--gold-dark);} .alert{padding:16px 20px;font-weight:600;font-size:13px;margin-bottom:24px;border-left:3px solid var(--gold);background:var(--surface-alt);} .alert-error{border-color:#B0402C;background:rgba(176,64,44,.08);} /* ---------- Confirmation ---------- */ .confirm-box{max-width:640px;margin:76px auto;text-align:center;padding:20px 0;} .confirm-box .icon{ width:68px;height:68px;border-radius:50%;background:var(--gold);color:var(--on-gold); display:flex;align-items:center;justify-content:center;margin:0 auto 28px;font-size:28px;font-weight:700; } .order-number{font-family:var(--display);font-weight:600;font-size:24px;margin:12px 0 32px;letter-spacing:.02em;} /* ---------- Footer ---------- */ .site-footer{background:var(--ink);color:#B8B2A0;padding:72px 0 30px;margin-top:60px;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;} .footer-grid h4{font-family:var(--sans);text-transform:uppercase;font-weight:600;font-size:11.5px;letter-spacing:.16em;color:var(--gold);margin-bottom:20px;} .footer-grid .logo{margin-bottom:16px;} .footer-grid ul li{margin-bottom:12px;font-size:14px;font-weight:500;} .footer-grid ul li a:hover{color:var(--gold-light);} .footer-bottom{border-top:1px solid #2A2620;padding-top:24px;font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;display:flex;justify-content:space-between;color:#6B6558;flex-wrap:wrap;gap:8px;} @media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr;}} /* ---------- Toast ---------- */ #toast{ position:fixed;bottom:28px;right:28px;left:28px;z-index:200; max-width:360px;margin-left:auto; background:var(--ink);color:var(--on-ink); padding:18px 24px;font-weight:600;font-size:13px; border-left:3px solid var(--gold);border-radius:2px; transform:translateY(120%);opacity:0;transition:all .3s ease; } #toast.show{transform:translateY(0);opacity:1;} /* ---------- Chat widget ---------- */ .chat-widget{position:fixed;bottom:24px;right:24px;z-index:150;} .chat-bubble{ position:relative;width:56px;height:56px;border-radius:50%; background:var(--ink);color:var(--gold);border:none;cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:24px; box-shadow:0 12px 28px rgba(0,0,0,.25);transition:transform .15s ease; } .chat-bubble:hover{transform:scale(1.06);} .chat-bubble-badge{ position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%; background:var(--gold);border:2px solid var(--bg); } .chat-panel{ display:none;flex-direction:column;position:absolute;bottom:72px;right:0; width:340px;max-height:480px;background:var(--surface);border:1px solid var(--border); border-radius:4px;box-shadow:0 24px 48px rgba(0,0,0,.2);overflow:hidden; } .chat-panel.open{display:flex;} .chat-panel-header{ background:var(--ink);color:var(--on-ink);padding:16px 18px; display:flex;align-items:center;justify-content:space-between; font-family:var(--display);font-weight:600;font-size:15px; } .chat-panel-close{background:none;border:none;color:var(--on-ink);font-size:20px;cursor:pointer;line-height:1;} .chat-messages{flex:1 1 auto;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;max-height:280px;} .chat-empty{color:var(--text-faint);font-size:13px;text-align:center;margin:auto;} .chat-message{max-width:80%;padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.4;} .chat-message p{margin:0;} .chat-message-time{display:block;font-size:10px;color:inherit;opacity:.6;margin-top:4px;} .chat-message-customer{align-self:flex-end;background:var(--gold);color:var(--on-gold);border-bottom-right-radius:2px;} .chat-message-admin{align-self:flex-start;background:var(--surface-alt);color:var(--text);border-bottom-left-radius:2px;} .chat-start-form,.chat-reply-form{padding:14px 16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;} .chat-start-form input,.chat-start-form textarea,.chat-reply-form textarea{ padding:10px 12px;border:1px solid var(--border);background:var(--bg);color:var(--text); font-family:inherit;font-size:13px;border-radius:2px;resize:none; } .chat-start-form input:focus,.chat-start-form textarea:focus,.chat-reply-form textarea:focus{outline:none;border-color:var(--gold);} @media (max-width:480px){ .chat-widget{bottom:16px;right:16px;} .chat-panel{width:calc(100vw - 32px);right:-8px;} } /* ---------- Pagination ---------- */ .pagination{display:flex;gap:8px;justify-content:center;margin-top:52px;flex-wrap:wrap;} .pagination a,.pagination span{padding:10px 16px;border:1px solid var(--border);color:var(--text);font-weight:600;font-size:13px;border-radius:2px;} .pagination .active{background:var(--text);color:var(--bg);border-color:var(--text);} .pagination a:hover{border-color:var(--gold);color:var(--gold-dark);} /* ---------- Small screens: general tightening ---------- */ @media (max-width:640px){ .container{padding:0 20px;} .section{padding:56px 0;} .section-head h2{font-size:26px;} .pdp-grid,.cart-layout{grid-template-columns:1fr;gap:36px;padding:32px 0;} .form-grid{grid-template-columns:1fr;gap:16px;} .cart-line{grid-template-columns:72px 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:12px;} .cart-line .cart-thumb{grid-row:1/3;} .cart-line .qty-control,.cart-line .line-total{grid-column:2;} .order-row{grid-template-columns:1fr;row-gap:8px;justify-items:start;} .hero{padding:56px 0 48px;} .footer-bottom{flex-direction:column;align-items:flex-start;} }