/* ========================================================================== DAKAR DAPPER — Complete Luxury Design System Professional E-Commerce for Premium Men's Wears & Accessories ========================================================================== */ /* Fonts are loaded from the HTML with preconnect — an @import here would block rendering until this stylesheet itself had downloaded. */ /* ── Design Tokens ────────────────────────────────────────────────── */ :root { --bg: #F8F6F2; --bg-white: #FFFFFF; --bg-dark: #111111; --bg-card: #FFFFFF; --bg-muted: #EFECEA; --gold: #B8965A; --gold-light: #D4B97C; --text: #1A1A1A; --text-sub: #6B6B6B; --text-faint: #6E6E6E; /* was #999 (2.8:1); now 4.9:1 on the page */ --gold-text: #8A6D34; /* gold used as text on light backgrounds: 4.6:1 */ --text-white: #FFFFFF; --border: #E5E2DD; --border-dark:#2A2A2A; --shadow-s: 0 1px 3px rgba(0,0,0,.04); --shadow-m: 0 4px 20px rgba(0,0,0,.07); --shadow-l: 0 12px 40px rgba(0,0,0,.12); --shadow-xl: 0 20px 60px rgba(0,0,0,.18); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Cormorant Garamond', 'Georgia', serif; --ease: cubic-bezier(.25,.46,.45,.94); --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-full:9999px; } /* ── Reset ────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;width:100%;max-width:100%} body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;width:100%;max-width:100%;position:relative} body.no-scroll{overflow:hidden} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{cursor:pointer;font-family:inherit;border:none;background:none;outline:none} ul{list-style:none} /* ── Utility Classes ──────────────────────────────────────────────── */ .container{max-width:1280px;margin:0 auto;padding:0 clamp(16px,4vw,48px)} .serif{font-family:var(--font-serif)} .gold{color:var(--gold)} /* ── Buttons ──────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; border-radius:var(--r-full);padding:13px 30px; transition:all .3s var(--ease);white-space:nowrap; } .btn-dark{background:var(--bg-dark);color:var(--text-white)} .btn-dark:hover{background:#2a2a2a;transform:translateY(-1px);box-shadow:var(--shadow-m)} .btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--text)} .btn-outline:hover{background:var(--text);color:var(--text-white)} .btn-outline-light{border:1.5px solid rgba(255,255,255,.45);color:var(--text-white);background:rgba(0,0,0,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .btn-outline-light:hover{background:var(--text-white);color:var(--bg-dark);border-color:var(--text-white)} .btn-gold{background:var(--gold);color:var(--bg-dark)} .btn-gold:hover{background:var(--gold-light)} .btn-sm{padding:9px 20px;font-size:.75rem} .btn-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;position:relative;color:var(--text);transition:all .2s var(--ease)} .btn-icon:hover{background:rgba(0,0,0,.05)} /* ── Header ───────────────────────────────────────────────────────── */ .header{ position:sticky;top:0;z-index:100; background:rgba(248,246,242,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border);transition:box-shadow .3s var(--ease); } .header.scrolled{box-shadow:var(--shadow-s)} .header-inner{ display:flex;align-items:center;justify-content:space-between; padding:14px clamp(16px,4vw,48px);max-width:1440px;margin:0 auto; } /* Logo */ .logo{display:flex;align-items:center;gap:10px;text-decoration:none} .logo-img{height:38px;width:38px;object-fit:contain;border-radius:50%;background:#fff;padding:2px} .logo-text{display:flex;flex-direction:column;line-height:1} .logo-name{font-family:var(--font-serif);font-size:1.4rem;font-weight:700;letter-spacing:.08em;color:var(--text)} .logo-tag{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-sub);font-weight:500;margin-top:1px} /* Desktop Nav */ .nav-desktop{display:flex;gap:32px;align-items:center} .nav-link{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-sub);position:relative;padding:4px 0;transition:color .2s} .nav-link:hover,.nav-link.active{color:var(--text)} .nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:1.5px;background:var(--text);transition:width .25s var(--ease)} .nav-link:hover::after,.nav-link.active::after{width:100%} /* Header Actions */ .header-actions{display:flex;gap:6px;align-items:center} .badge-count{ position:absolute;top:2px;right:2px; background:var(--bg-dark);color:#fff;font-size:.6rem;font-weight:700; min-width:16px;height:16px;border-radius:99px;display:none; align-items:center;justify-content:center;padding:0 3px; } /* Mobile hamburger */ .hamburger{display:none;flex-direction:column;gap:5px;padding:8px} .hamburger span{width:22px;height:1.5px;background:var(--text);transition:all .3s} /* ── Hero Section ─────────────────────────────────────────────────── */ .hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;background:#0c0c0c;width:100%;max-width:100vw} .hero-bg{position:absolute;inset:0;z-index:1} .hero-bg img{ width:100%;height:100%;object-fit:cover;object-position:center 25%;opacity:.55; will-change:transform;transform:scale(1);transform-origin:center center; transition:none; /* JS drives this */ } .hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,.72) 0%,rgba(0,0,0,.25) 60%,transparent 100%);z-index:2} .hero-fade-out{ position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(to top, var(--bg-white) 0%, rgba(255,255,255,0.92) 20%, rgba(248,246,242,0.65) 45%, transparent 100%); opacity:0;will-change:opacity;transform:translateZ(0); } .hero-vignette{ position:absolute;left:0;right:0;bottom:0; height:clamp(150px, 26vh, 280px); z-index:3;pointer-events:none; background:linear-gradient( to top, #ffffff 0%, rgba(255,255,255,0.97) 16%, rgba(255,255,255,0.82) 32%, rgba(255,255,255,0.55) 52%, rgba(255,255,255,0.25) 72%, rgba(255,255,255,0.06) 88%, transparent 100% ); } .hero-content{position:relative;z-index:5;max-width:620px;padding:0 clamp(24px,6vw,80px)} .hero-badge{ display:inline-flex;align-items:center;gap:8px; font-size:.7rem;letter-spacing:.2em;text-transform:uppercase; color:var(--gold);font-weight:600;margin-bottom:20px; } .hero-badge::before{content:'';width:28px;height:1px;background:var(--gold)} .hero-title{ font-family:var(--font-serif);font-size:clamp(2.6rem,6vw,4.6rem); font-weight:500;line-height:1.08;color:var(--text-white);margin-bottom:20px; } .hero-title em{font-style:italic;color:var(--gold-light)} .hero-desc{font-size:1rem;color:rgba(255,255,255,.7);max-width:420px;line-height:1.7;margin-bottom:32px} .hero-btns{display:flex;gap:14px;flex-wrap:wrap} /* ── Category Cards ───────────────────────────────────────────────── */ .categories{padding:72px 0} .categories[hidden]{display:none} .section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px} .section-title{font-family:var(--font-serif);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;line-height:1.15} .section-title span{display:block;font-size:.72rem;font-family:var(--font-sans);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-sub);margin-bottom:6px} .view-all{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-sub);transition:color .2s} .view-all:hover{color:var(--text)} .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .cat-card{ position:relative;border-radius:var(--r-md);overflow:hidden; aspect-ratio:4/5;cursor:pointer; } .cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .cat-card:hover img{transform:scale(1.06)} .cat-card-overlay{ position:absolute;inset:0; background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.1) 50%,transparent 100%); display:flex;flex-direction:column;justify-content:flex-end;padding:28px; } .cat-card h3{font-family:var(--font-serif);font-size:1.5rem;font-weight:600;color:#fff;margin-bottom:4px} .cat-card p{font-size:.8rem;color:rgba(255,255,255,.7);margin-bottom:14px} .cat-card .btn{align-self:flex-start} /* ── Product Grid ─────────────────────────────────────────────────── */ .collection{padding:0 0 80px} .filter-bar{display:flex;gap:8px;margin-bottom:36px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none} .filter-bar::-webkit-scrollbar{display:none} .filter-btn{ padding:9px 22px;border-radius:var(--r-full); font-size:.78rem;font-weight:600;letter-spacing:.04em; color:var(--text-sub);background:var(--bg-muted);border:1px solid transparent; transition:all .2s var(--ease);white-space:nowrap; } .filter-btn:hover{color:var(--text);border-color:var(--border)} .filter-btn.active{background:var(--bg-dark);color:#fff;border-color:var(--bg-dark)} .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} /* Card reveal animation */ .p-card{ opacity:0;transform:translateY(24px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .p-card.revealed{opacity:1;transform:translateY(0)} /* Product Card */ .p-card{position:relative;cursor:pointer} .p-card-media{ position:relative;border-radius:var(--r-md);overflow:hidden; background:var(--bg-muted);aspect-ratio:3/4; } .p-card-media img{ width:100%;height:100%;object-fit:cover;object-position:center 15%; transition:transform .5s var(--ease),opacity .4s; } .p-card-media .img-hover{position:absolute;inset:0;opacity:0} .p-card:hover .p-card-media .img-main{opacity:0} .p-card:hover .p-card-media .img-hover{opacity:1;transform:scale(1.03)} /* Card badges */ .p-badge{ position:absolute;top:12px;left:12px;z-index:2; display:flex;flex-direction:column;gap:4px; } .p-badge span{ padding:4px 10px;border-radius:var(--r-xs); font-size:.65rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; } .p-badge .tag-dark{background:var(--bg-dark);color:#fff} .p-badge .tag-gold{background:var(--gold);color:#1A1508} /* Heart button */ .heart-btn{ position:absolute;top:12px;right:12px;z-index:2; width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.9);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center; color:var(--text);transition:all .2s; box-shadow:0 2px 8px rgba(0,0,0,.08); } .heart-btn:hover{transform:scale(1.1)} .heart-btn.active{background:#C83232;color:#fff} .heart-btn.active svg{fill:#fff;stroke:#C83232} /* Quick actions */ .p-actions{ position:absolute;bottom:12px;left:12px;right:12px;z-index:2; display:flex;gap:6px;opacity:0;transform:translateY(8px); transition:all .3s var(--ease); } .p-card:hover .p-actions{opacity:1;transform:translateY(0)} .p-action-btn{ flex:1;padding:10px 0;border-radius:var(--r-sm); font-size:.73rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;gap:6px; transition:all .2s; } .p-action-btn.view{background:rgba(255,255,255,.92);color:var(--text)} .p-action-btn.add{background:var(--bg-dark);color:#fff} .p-action-btn:hover{transform:translateY(-1px)} /* Card info */ .p-info{padding:14px 4px 0} .p-info-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px} .p-cat{font-size:.65rem;font-weight:700;letter-spacing:.1em;color:var(--text-faint);text-transform:uppercase} .p-rating{font-size:.72rem;font-weight:700;color:var(--gold-text)} .p-name{font-size:.92rem;font-weight:600;line-height:1.35;margin-bottom:3px;cursor:pointer;transition:color .2s} .p-name:hover{color:var(--gold)} .p-sub{font-size:.75rem;color:var(--text-sub);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .p-colors{display:flex;gap:5px;margin-bottom:8px} .p-swatch{width:12px;height:12px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)} .p-prices{display:flex;align-items:baseline;gap:6px} .p-price{font-size:1.05rem;font-weight:700} .p-orig{font-size:.82rem;color:var(--text-faint);text-decoration:line-through} .p-disc{font-size:.68rem;font-weight:700;color:#2E7D32;background:#E8F5E9;padding:2px 6px;border-radius:3px} .empty-state{text-align:center;padding:80px 20px;grid-column:1/-1} .empty-state h3{font-family:var(--font-serif);font-size:1.4rem;margin-bottom:8px} .empty-state p{color:var(--text-sub);margin-bottom:20px} /* ── Editorial Banner ─────────────────────────────────────────────── */ .editorial{padding:0 0 80px} .editorial-card{ border-radius:var(--r-lg);overflow:hidden; display:grid;grid-template-columns:1fr 1.3fr; background:var(--bg-muted);min-height:440px; } .editorial-text{padding:clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:16px} .editorial-kicker{font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-sub)} .editorial-title{font-family:var(--font-serif);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:500;line-height:1.1} .editorial-desc{font-size:.95rem;color:var(--text-sub);max-width:360px;line-height:1.65} .editorial-media{position:relative;overflow:hidden} .editorial-media img{width:100%;height:100%;object-fit:cover;object-position:center 20%} /* ── Trust Strip ──────────────────────────────────────────────────── */ .trust{border-top:none;border-bottom:1px solid var(--border);padding:36px 0;background:var(--bg-white)} .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .trust-item{display:flex;align-items:center;gap:14px} .trust-icon{ width:42px;height:42px;border-radius:50%;background:var(--bg-muted);flex-shrink:0; display:flex;align-items:center;justify-content:center;color:var(--text); } .trust-item strong{font-size:.8rem;display:block} .trust-item span{font-size:.72rem;color:var(--text-sub)} /* ── Newsletter ───────────────────────────────────────────────────── */ .newsletter{background:var(--bg-dark);color:var(--text-white);padding:80px 0;text-align:center} .newsletter .gold{color:var(--gold)} .newsletter h2{font-family:var(--font-serif);font-size:clamp(1.8rem,3vw,2.8rem);font-weight:500;margin:10px 0 14px} .newsletter p{color:rgba(255,255,255,.6);max-width:440px;margin:0 auto 28px;font-size:.92rem} .newsletter form{display:flex;gap:10px;max-width:440px;margin:0 auto} .newsletter input{ flex:1;padding:13px 20px;border-radius:var(--r-full); border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06); color:#fff;font-size:.88rem;outline:none; } .newsletter input::placeholder{color:rgba(255,255,255,.62)} /* ── Footer ───────────────────────────────────────────────────────── */ .footer{background:#080808;color:#8C8C8C;padding:60px 0 40px;font-size:.82rem} .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px} .footer-brand{display:flex;align-items:center;gap:8px;margin-bottom:14px} .footer-brand .logo-name{color:#fff;font-size:1rem} .footer h4{color:#fff;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px} .footer a{display:block;padding:3px 0;transition:color .2s} .footer a:hover{color:var(--gold)} .footer-bottom{border-top:1px solid #1a1a1a;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} /* ── Overlay & Drawers ────────────────────────────────────────────── */ #overlay{ position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px); z-index:200;opacity:0;pointer-events:none;transition:opacity .3s; } #overlay.active{opacity:1;pointer-events:auto} .drawer{ position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw; background:var(--bg-white);z-index:210;box-shadow:-8px 0 30px rgba(0,0,0,.1); transform:translateX(100%);transition:transform .35s var(--ease); display:flex;flex-direction:column; visibility:hidden;pointer-events:none; } .drawer.open{transform:translateX(0);visibility:visible;pointer-events:auto} .drawer-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center} .drawer-head h3{font-family:var(--font-serif);font-size:1.2rem;font-weight:600} .drawer-close{font-size:1.6rem;line-height:1;color:var(--text-sub)} .drawer-close:hover{color:var(--text)} .drawer-body{flex:1;overflow-y:auto;padding:18px 22px} .drawer-foot{padding:18px 22px;border-top:1px solid var(--border);background:var(--bg)} /* Shipping meter */ .ship-meter{padding:12px 22px;background:var(--bg);border-bottom:1px solid var(--border);font-size:.78rem;color:var(--text-sub)} .ship-bar{height:5px;background:var(--border);border-radius:99px;margin-top:7px;overflow:hidden} .ship-fill{height:100%;background:var(--bg-dark);width:0;transition:width .4s;border-radius:99px} .ship-fill.done{background:#25D366} /* Cart item */ .cart-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)} .cart-item-img{width:72px;height:90px;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-muted);flex-shrink:0} .cart-item-img img{width:100%;height:100%;object-fit:cover} .cart-item-body{flex:1;display:flex;flex-direction:column;justify-content:space-between} .cart-item-top{display:flex;justify-content:space-between} .cart-item-top .cat{font-size:.62rem;letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase} .cart-item-del{font-size:1.2rem;color:var(--text-faint);line-height:1} .cart-item-del:hover{color:#C83232} .cart-item h4{font-size:.85rem;font-weight:600;margin:2px 0} .cart-item-meta{font-size:.72rem;color:var(--text-sub)} .cart-item-bot{display:flex;justify-content:space-between;align-items:center;margin-top:6px} .qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:var(--r-full);padding:2px 6px;gap:10px;font-size:.82rem} .qty button{font-weight:700;padding:0 3px} .cart-item-price{font-weight:700;font-size:.88rem} .subtotal-row{display:flex;justify-content:space-between;font-size:1rem;font-weight:700;margin-bottom:14px} /* Wishlist item */ .wish-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);align-items:center} .wish-item-img{width:60px;height:75px;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-muted);flex-shrink:0;cursor:pointer} .wish-item-img img{width:100%;height:100%;object-fit:cover} .wish-item-info{flex:1} .wish-item-info h4{font-size:.85rem;font-weight:600;cursor:pointer} .wish-item-price{font-weight:700;font-size:.82rem;margin:2px 0} .wish-item-actions{display:flex;gap:8px;margin-top:6px} .wish-remove{font-size:.72rem;color:var(--text-faint);text-decoration:underline} /* ── Product Modal ────────────────────────────────────────────────── */ .modal-wrap{ position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center; padding:20px;opacity:0;pointer-events:none;transition:opacity .3s; background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); } .modal-wrap.open{opacity:1;pointer-events:auto} .modal-card{ background:var(--bg-white);width:100%;max-width:1060px;max-height:92vh; border-radius:var(--r-lg);box-shadow:var(--shadow-xl);overflow-y:auto; position:relative;padding:clamp(24px,4vw,44px); transform:translateY(20px) scale(.97);opacity:0; transition:transform .35s var(--ease), opacity .35s var(--ease); } .modal-wrap.open .modal-card{transform:translateY(0) scale(1);opacity:1} .modal-x{ position:absolute;top:20px;right:20px;width:40px;height:40px; border-radius:50%;background:var(--bg-muted);display:flex;align-items:center;justify-content:center; font-size:1.4rem;color:var(--text);z-index:5;transition:all .2s; } .modal-x:hover{background:var(--bg-dark);color:#fff} /* Modal layout */ .modal-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,48px);margin-bottom:36px} .modal-gallery{display:flex;gap:14px} .modal-thumbs{display:flex;flex-direction:column;gap:10px;width:72px;flex-shrink:0} .modal-thumb{width:72px;height:88px;border-radius:var(--r-sm);overflow:hidden;border:2px solid transparent;cursor:pointer;transition:border-color .2s;background:var(--bg-muted)} .modal-thumb.active{border-color:var(--bg-dark)} .modal-thumb img{width:100%;height:100%;object-fit:cover} .modal-main{flex:1;position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--bg-muted);aspect-ratio:4/5} .modal-main img{width:100%;height:100%;object-fit:cover;object-position:center 15%} .modal-counter{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.6);color:#fff;padding:3px 10px;border-radius:var(--r-full);font-size:.7rem;font-weight:600;z-index:2} .modal-nav{ position:absolute;top:50%;transform:translateY(-50%); width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.88); display:flex;align-items:center;justify-content:center;z-index:3; box-shadow:0 2px 8px rgba(0,0,0,.08);transition:all .2s; } .modal-nav:hover{background:#fff;transform:translateY(-50%) scale(1.05)} .modal-nav.prev{left:12px} .modal-nav.next{right:12px} /* Modal info */ .modal-info{display:flex;flex-direction:column;gap:2px} .modal-tags{display:flex;gap:8px;margin-bottom:8px} .modal-tags span{padding:4px 12px;border-radius:var(--r-full);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em} .modal-tags .t-light{background:var(--bg-muted);color:var(--text)} .modal-tags .t-dark{background:var(--bg-dark);color:#fff} .modal-title{font-family:var(--font-serif);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:600;line-height:1.15;margin-bottom:2px} .modal-subtitle{font-size:.85rem;color:var(--text-sub);margin-bottom:10px} .modal-stars{display:flex;align-items:center;gap:8px;font-size:.8rem;margin-bottom:12px;flex-wrap:wrap} .modal-stars .stars{color:#D4AF37;letter-spacing:2px} .modal-stars .in-stock{color:#2E7D32;font-weight:600} .modal-price-row{display:flex;align-items:center;gap:12px;margin-bottom:14px} .modal-price{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:700} .modal-strike{font-size:1rem;color:var(--text-faint);text-decoration:line-through} .modal-desc{font-size:.88rem;color:var(--text-sub);line-height:1.65;margin-bottom:20px} /* Color & Size selectors */ .select-group{margin-bottom:18px} .select-label{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;font-weight:600;margin-bottom:8px} .size-guide-btn{font-size:.78rem;color:var(--text);text-decoration:underline;font-weight:600;display:inline-flex;align-items:center;gap:4px} .color-opts{display:flex;gap:10px} .color-opt{width:30px;height:30px;border-radius:50%;padding:2px;border:2px solid transparent;cursor:pointer;transition:all .2s} .color-opt.active{border-color:var(--text);transform:scale(1.1)} .color-dot{display:block;width:100%;height:100%;border-radius:50%;border:1px solid rgba(0,0,0,.08)} .size-opts{display:flex;flex-wrap:wrap;gap:8px} .size-opt{ min-width:44px;padding:9px 14px;border-radius:var(--r-sm); border:1.5px solid var(--border);font-size:.82rem;font-weight:600; text-align:center;transition:all .2s; } .size-opt:hover{border-color:var(--text)} .size-opt.active{background:var(--bg-dark);color:#fff;border-color:var(--bg-dark)} /* Modal actions */ .modal-actions{display:flex;gap:10px;margin-top:6px;margin-bottom:14px} .qty-lg{padding:4px 12px;font-size:.95rem} .qty-lg button{font-size:1.1rem;padding:0 6px} .modal-actions .btn{flex:1} .wish-circle{ width:48px;height:48px;border-radius:50%;border:1.5px solid var(--border); display:flex;align-items:center;justify-content:center;color:var(--text); flex-shrink:0;transition:all .2s; } .wish-circle:hover{border-color:var(--text)} .wish-circle.active{background:#C83232;color:#fff;border-color:#C83232} .buy-full{width:100%;margin-bottom:20px} /* Reassurance */ .reassure{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--bg-muted);border-radius:var(--r-md);font-size:.78rem} .reassure-row{display:flex;align-items:center;gap:10px} .reassure-row div{display:flex;flex-direction:column} .reassure-row strong{font-size:.78rem} .reassure-row span{font-size:.68rem;color:var(--text-sub)} /* Tabs */ .tabs-section{border-top:1px solid var(--border);padding-top:30px;margin-bottom:36px} .tabs-nav{display:flex;gap:28px;border-bottom:1px solid var(--border);margin-bottom:22px} .tab-btn{ padding-bottom:12px;font-size:.88rem;font-weight:600;color:var(--text-sub); position:relative;transition:color .2s; } .tab-btn::after{content:'';position:absolute;bottom:-1px;left:0;width:0;height:2px;background:var(--text);transition:width .2s} .tab-btn.active{color:var(--text)} .tab-btn.active::after{width:100%} .tab-pane{display:none} .tab-pane.active{display:block} .detail-list{display:flex;flex-direction:column;gap:10px} .detail-list li{display:flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--text-sub)} .detail-list .check{color:var(--gold-text);flex-shrink:0} /* Related products */ .related{border-top:1px solid var(--border);padding-top:30px} .related h3{font-family:var(--font-serif);font-size:1.2rem;font-weight:600;margin-bottom:18px} .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .related-item{ display:flex;gap:12px;align-items:center;padding:10px; background:var(--bg-muted);border-radius:var(--r-sm);cursor:pointer; transition:transform .2s; } .related-item:hover{transform:translateY(-2px)} .related-img{width:54px;height:68px;border-radius:4px;overflow:hidden;background:var(--bg);flex-shrink:0} .related-img img{width:100%;height:100%;object-fit:cover} .related-item h4{font-size:.8rem;font-weight:600;line-height:1.3;margin-bottom:2px} .related-item .price{font-weight:700;font-size:.78rem} /* ── Size Guide Modal ─────────────────────────────────────────────── */ .size-modal .modal-card{max-width:640px;padding:32px} .size-table{width:100%;border-collapse:collapse;font-size:.85rem;margin:20px 0} .size-table th{text-align:left;padding:10px 8px;border-bottom:2px solid var(--text);font-weight:700} .size-table td{padding:10px 8px;border-bottom:1px solid var(--border)} /* ── Checkout Modal ───────────────────────────────────────────────── */ .checkout-modal .modal-card{max-width:540px;padding:32px} .form-grid{display:flex;flex-direction:column;gap:14px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .form-grp label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;display:block} .form-grp input,.form-grp select{width:100%;padding:11px 14px;border-radius:var(--r-sm);border:1px solid var(--border);font-size:.88rem;background:var(--bg);outline:none} .order-done{text-align:center;padding:40px 16px} .order-done .check-circle{width:56px;height:56px;border-radius:50%;background:#2E7D32;color:#fff;font-size:1.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto 18px} /* ── Search Overlay ───────────────────────────────────────────────── */ .search-overlay{ position:fixed;top:0;left:0;right:0;z-index:250; background:rgba(248,246,242,.97);backdrop-filter:blur(12px); padding:28px clamp(16px,4vw,48px);box-shadow:var(--shadow-m); transform:translateY(-100%);transition:transform .35s var(--ease); visibility:hidden;pointer-events:none; } .search-overlay.open{transform:translateY(0);visibility:visible;pointer-events:auto} .search-inner{max-width:720px;margin:0 auto} .search-row{display:flex;align-items:center;border-bottom:2px solid var(--text);padding:10px 0;gap:14px} .search-row input{flex:1;border:none;background:none;font-family:var(--font-serif);font-size:1.5rem;color:var(--text);outline:none} .search-tags{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .search-tag{font-size:.78rem;color:var(--text-sub);cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:color .2s} .search-tag:hover{color:var(--text)} /* ── Mobile Nav Drawer ────────────────────────────────────────────── */ .mobile-drawer{ position:fixed;top:0;left:0;bottom:0;width:300px;max-width:80vw; background:var(--bg-white);z-index:220;box-shadow:6px 0 20px rgba(0,0,0,.08); transform:translateX(-100%);transition:transform .35s var(--ease); display:flex;flex-direction:column; visibility:hidden;pointer-events:none; } .mobile-drawer.open{transform:translateX(0);visibility:visible;pointer-events:auto} .mobile-drawer-head{padding:20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center} .mobile-drawer-links{padding:20px;display:flex;flex-direction:column;gap:14px} .mobile-drawer-links a{ font-family:var(--font-serif);font-size:1.1rem;font-weight:600; color:var(--text);padding:6px 0;border-bottom:1px solid rgba(0,0,0,.04); } .mobile-drawer-foot{margin-top:auto;padding:20px;background:var(--bg);font-size:.78rem;color:var(--text-sub)} /* ── WhatsApp Widget ──────────────────────────────────────────────── */ .wa-container{position:fixed;bottom:24px;right:24px;z-index:150} .wa-btn{ width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff; display:flex;align-items:center;justify-content:center;position:relative; box-shadow:0 6px 20px rgba(37,211,102,.35);transition:all .3s; } .wa-btn:hover{transform:scale(1.06);box-shadow:0 10px 28px rgba(37,211,102,.45)} .wa-btn svg{width:28px;height:28px;fill:#fff} .wa-pulse{ position:absolute;inset:-5px;border-radius:50%;border:2px solid #25D366; animation:pulse 2.5s ease-out infinite;pointer-events:none; } @keyframes pulse{0%{transform:scale(.95);opacity:.7}70%{transform:scale(1.3);opacity:0}100%{transform:scale(1.3);opacity:0}} .wa-dot{position:absolute;top:1px;right:1px;width:12px;height:12px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center} .wa-dot::after{content:'';width:7px;height:7px;background:#25D366;border-radius:50%} .wa-tip{ position:absolute;right:66px;top:50%;transform:translateY(-50%) translateX(6px); background:var(--bg-dark);color:#fff;padding:7px 14px;border-radius:var(--r-full); font-size:.74rem;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none; box-shadow:var(--shadow-m);transition:all .2s; } .wa-btn:hover~.wa-tip{opacity:1;transform:translateY(-50%) translateX(0)} /* WhatsApp popup */ .wa-popup{ position:absolute;bottom:68px;right:0;width:340px;max-width:88vw; background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-xl);overflow:hidden; border:1px solid var(--border); transform:translateY(12px) scale(.96);opacity:0;pointer-events:none; transition:all .25s var(--ease);transform-origin:bottom right; } .wa-popup.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto} .wa-popup-head{ background:linear-gradient(135deg,#075E54,#128C7E);color:#fff;padding:14px 18px; display:flex;align-items:center;justify-content:space-between; } .wa-profile{display:flex;align-items:center;gap:10px} .wa-avatar{width:38px;height:38px;border-radius:50%;background:#fff;overflow:hidden;padding:1px;flex-shrink:0;position:relative} .wa-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%} .wa-profile h4{font-size:.88rem;font-weight:700} .wa-profile span{font-size:.68rem;opacity:.85} .wa-popup-close{color:#fff;font-size:1.3rem;opacity:.8} .wa-popup-close:hover{opacity:1} .wa-popup-body{ background:#EFEAE2;padding:16px 14px;max-height:220px;overflow-y:auto; display:flex;flex-direction:column;gap:12px; } .wa-bubble{background:#fff;padding:10px 14px;border-radius:0 12px 12px 12px;font-size:.8rem;color:var(--text);line-height:1.45;box-shadow:0 1px 2px rgba(0,0,0,.04)} .wa-bubble-time{display:block;text-align:right;font-size:.6rem;color:#999;margin-top:3px} .wa-chips{display:flex;flex-direction:column;gap:6px} .wa-chip{ background:rgba(255,255,255,.92);border:1px solid rgba(7,94,84,.15); border-radius:var(--r-full);padding:6px 12px;font-size:.72rem;font-weight:600; color:#075E54;text-align:left;transition:all .2s; } .wa-chip:hover{background:#075E54;color:#fff;border-color:#075E54} .wa-popup-foot{background:#F0F2F5;padding:10px 12px;display:flex;gap:8px;align-items:center;border-top:1px solid #E0E3E8} .wa-input{flex:1;background:#fff;border:none;border-radius:var(--r-full);padding:9px 14px;font-size:.82rem;outline:none} .wa-send{ width:36px;height:36px;border-radius:50%;background:#075E54;color:#fff; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .wa-send:hover{background:#128C7E} .wa-send svg{width:14px;height:14px;fill:currentColor} /* ── Toast ────────────────────────────────────────────────────────── */ .toast-box{position:fixed;bottom:28px;left:28px;z-index:9999;display:flex;flex-direction:column;gap:8px} .toast{ background:var(--bg-dark);color:#fff;padding:12px 20px;border-radius:var(--r-md); box-shadow:var(--shadow-l);display:flex;align-items:center;gap:10px;font-size:.84rem; transform:translateY(14px);opacity:0;transition:all .3s;max-width:360px; } .toast.show{transform:translateY(0);opacity:1} .toast-icon{color:var(--gold);flex-shrink:0} /* ── Newsletter VIP Modal ─────────────────────────────────────────── */ .nl-modal .modal-card{ max-width:480px; background:radial-gradient(circle at 50% 0%, rgba(184,150,90,.16) 0%, #141414 70%); color:#fff; border:1px solid rgba(184,150,90,.32); padding:clamp(28px,5vw,44px); text-align:center; box-shadow:0 24px 70px rgba(0,0,0,.7), 0 0 40px rgba(184,150,90,.14); position:relative; border-radius:var(--r-lg); } .nl-modal .modal-x{ top:16px; right:16px; width:34px; height:34px; font-size:1rem; background:rgba(255,255,255,.08); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; } .nl-modal .modal-x:hover{ background:var(--gold); color:var(--bg-dark); } .nl-modal-icon{ width:52px;height:52px;margin:0 auto 14px; border-radius:50%;background:rgba(255,255,255,.06); border:1px solid rgba(184,150,90,.3); display:flex;align-items:center;justify-content:center; padding:4px; } .nl-modal-icon img{width:100%;height:100%;object-fit:contain;border-radius:50%} .nl-badge{ display:inline-block; font-size:.72rem;font-weight:700; letter-spacing:.2em;text-transform:uppercase; margin-bottom:8px; } .nl-title{ font-size:clamp(1.7rem,3vw,2.3rem); font-weight:500;line-height:1.15; margin-bottom:10px; color:#fff; } .nl-desc{ font-size:.86rem; color:rgba(255,255,255,.68); line-height:1.6; max-width:380px; margin:0 auto 22px; } .nl-form{ display:flex;flex-direction:column;gap:10px; max-width:380px;margin:0 auto; } .nl-form input{ width:100%;padding:13px 18px;border-radius:var(--r-full); border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06); color:#fff;font-size:.88rem;outline:none;text-align:center; transition:border-color .2s, background .2s; } .nl-form input:focus{ border-color:var(--gold); background:rgba(255,255,255,.1); } .nl-form input::placeholder{color:rgba(255,255,255,.4)} .nl-submit{ width:100%;padding:13px 24px;font-size:.82rem;letter-spacing:.08em; font-weight:700; } /* ── Auth Modal ───────────────────────────────────────────────────── */ .auth-modal .modal-card{ max-width:440px;padding:clamp(28px,5vw,44px); background:var(--bg-white); } .auth-header{text-align:center;margin-bottom:28px} .auth-header .logo-img{width:48px;height:48px;margin:0 auto 14px;border-radius:50%;background:#f5f3ef;padding:3px} .auth-header h2{font-family:var(--font-serif);font-size:1.6rem;font-weight:600;margin-bottom:4px} .auth-header p{font-size:.85rem;color:var(--text-sub)} .auth-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:24px} .auth-tab{ flex:1;padding:12px 0;font-size:.82rem;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--text-sub); position:relative;transition:color .2s;text-align:center; } .auth-tab::after{content:'';position:absolute;bottom:-1px;left:20%;width:60%;height:2px;background:var(--text);transform:scaleX(0);transition:transform .25s var(--ease)} .auth-tab.active{color:var(--text)} .auth-tab.active::after{transform:scaleX(1)} .auth-form{display:flex;flex-direction:column;gap:16px} .auth-field{display:flex;flex-direction:column;gap:4px} .auth-field label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-sub)} .auth-field input{ padding:13px 16px;border-radius:var(--r-sm);border:1px solid var(--border); font-size:.88rem;background:var(--bg);outline:none;transition:border-color .2s; } .auth-field input:focus{border-color:var(--text)} .auth-row{display:flex;justify-content:space-between;align-items:center;font-size:.78rem} .auth-row label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--text-sub)} .auth-row label input[type="checkbox"]{accent-color:var(--bg-dark)} .auth-row a{color:var(--text-sub);text-decoration:underline} .auth-row a:hover{color:var(--text)} .auth-divider{ display:flex;align-items:center;gap:14px; font-size:.72rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.1em; margin:4px 0; } .auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)} .auth-social{display:flex;gap:10px} .auth-social-btn{ flex:1;display:flex;align-items:center;justify-content:center;gap:8px; padding:12px 16px;border-radius:var(--r-sm);border:1px solid var(--border); font-size:.82rem;font-weight:600;color:var(--text);background:var(--bg-white); transition:all .2s var(--ease); } .auth-social-btn:hover{border-color:var(--text);background:var(--bg-muted)} .auth-social-btn svg{width:18px;height:18px} .auth-footer{text-align:center;font-size:.78rem;color:var(--text-sub);margin-top:8px} .auth-footer a{color:var(--text);font-weight:600;text-decoration:underline} /* ── Shop Page ────────────────────────────────────────────────────── */ .shop-page{padding-top:20px} .breadcrumb{ display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-sub); margin-bottom:28px;flex-wrap:wrap; } .breadcrumb a{color:var(--text-sub);transition:color .2s} .breadcrumb a:hover{color:var(--text)} .breadcrumb .sep{color:var(--text-faint)} .breadcrumb .current{color:var(--text);font-weight:600} .shop-layout{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:start} .shop-sidebar{position:sticky;top:90px} .sidebar-head{display:none;align-items:center;justify-content:space-between;padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid var(--border)} .sidebar-head h3{font-family:var(--font-serif);font-size:1.4rem;font-weight:600} .sidebar-head-close{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--bg-muted);color:var(--text);cursor:pointer} .sidebar-group{margin-bottom:24px} .sidebar-group h4{ font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--text-sub);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border); } .sidebar-link{ display:flex;justify-content:space-between;align-items:center; padding:8px 0;font-size:.88rem;color:var(--text-sub);cursor:pointer; transition:color .2s;border:none;background:none;width:100%;text-align:left; font-family:var(--font-sans); } .sidebar-link:hover,.sidebar-link.active{color:var(--text);font-weight:600} .sidebar-link .count{font-size:.72rem;background:var(--bg-muted);padding:2px 8px;border-radius:var(--r-full)} .sidebar-colors{display:flex;flex-wrap:wrap;gap:8px} .sidebar-color{ display:inline-flex;align-items:center;gap:6px;padding:6px 12px; border-radius:var(--r-full);border:1px solid var(--border);background:var(--bg-white); font-size:.76rem;font-weight:600;color:var(--text-sub);cursor:pointer;transition:all .2s; } .sidebar-color:hover,.sidebar-color.active{border-color:var(--text);color:var(--text);background:var(--bg-muted)} .sidebar-color.active{font-weight:700;border-color:var(--text)} .sidebar-color-dot{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(0,0,0,.15)} .sidebar-sizes{display:flex;flex-wrap:wrap;gap:6px} .sidebar-size{ min-width:38px;padding:7px 12px;border-radius:var(--r-xs);border:1px solid var(--border); font-size:.78rem;font-weight:600;text-align:center;cursor:pointer;transition:all .2s; background:var(--bg-white);font-family:var(--font-sans);color:var(--text-sub); } .sidebar-size:hover,.sidebar-size.active{border-color:var(--bg-dark);background:var(--bg-dark);color:#fff} .sidebar-reset-btn{ width:100%;padding:10px;font-size:.78rem;font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--text-sub);background:var(--bg-muted);border-radius:var(--r-sm); margin-top:10px;transition:all .2s; } .sidebar-reset-btn:hover{color:var(--text);background:var(--border)} .sidebar-apply-btn{display:none;width:100%;margin-top:20px} /* Shop Header & Actions */ .shop-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px} .shop-title-area h1{font-family:var(--font-serif);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;line-height:1.2} .shop-title-area .product-count{font-size:.82rem;color:var(--text-sub);margin-top:2px} .shop-actions-bar{display:flex;align-items:center;gap:12px} .btn-filter-mobile{ display:none;align-items:center;gap:8px;padding:10px 16px; background:var(--bg-white);border:1px solid var(--border);border-radius:var(--r-sm); font-size:.82rem;font-weight:600;color:var(--text);cursor:pointer;transition:all .2s;box-shadow:var(--shadow-s); } .btn-filter-mobile:hover{border-color:var(--text);background:var(--bg-muted)} .filter-badge-dot{ display:inline-flex;align-items:center;justify-content:center; min-width:18px;height:18px;padding:0 4px;background:var(--gold); color:var(--bg-dark);border-radius:var(--r-full);font-size:.68rem;font-weight:700; } .shop-sort select{ padding:10px 36px 10px 14px;border-radius:var(--r-sm);border:1px solid var(--border); font-size:.82rem;font-weight:600;color:var(--text);background:var(--bg-white); cursor:pointer;outline:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center; box-shadow:var(--shadow-s); } .shop-sort select:focus{border-color:var(--text)} /* Active Filters Pills */ .active-filters-bar{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; margin-bottom:24px;padding:10px 14px;background:var(--bg-white); border:1px solid var(--border);border-radius:var(--r-sm); } .active-filters-title{ font-size:.72rem;font-weight:700;text-transform:uppercase; letter-spacing:.1em;color:var(--text-sub);margin-right:4px; } .filter-pill{ display:inline-flex;align-items:center;gap:6px;padding:4px 12px; background:var(--bg-muted);border-radius:var(--r-full); font-size:.76rem;font-weight:600;color:var(--text); border:1px solid transparent;transition:all .2s; } .filter-pill:hover{border-color:var(--text)} .filter-pill-remove{ display:inline-flex;align-items:center;justify-content:center; width:14px;height:14px;font-size:.75rem;line-height:1; color:var(--text-sub);cursor:pointer;margin-left:2px; } .filter-pill-remove:hover{color:#e53e3e} .clear-all-btn{ margin-left:auto;font-size:.76rem;font-weight:600; color:var(--text-sub);text-decoration:underline;cursor:pointer; background:none;border:none;padding:4px 6px; } .clear-all-btn:hover{color:var(--text)} .shop-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} /* Shop Pagination */ .shop-pagination-wrap{ margin-top:48px;padding-top:28px;border-top:1px solid var(--border); display:flex;flex-direction:column;align-items:center;gap:16px; } .pagination-info{ font-size:.82rem;color:var(--text-sub);letter-spacing:.02em; } .pagination-controls{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center; } .page-btn{ display:inline-flex;align-items:center;justify-content:center; min-width:42px;height:42px;padding:0 14px;border-radius:var(--r-sm); border:1px solid var(--border);background:var(--bg-white);color:var(--text); font-size:.84rem;font-weight:600;cursor:pointer;transition:all .2s var(--ease); box-shadow:var(--shadow-s); } .page-btn:hover:not(:disabled){ border-color:var(--text);background:var(--bg-muted);transform:translateY(-1px); } .page-btn.active{ background:var(--bg-dark);color:var(--text-white);border-color:var(--bg-dark); box-shadow:var(--shadow-m); } .page-btn:disabled{ opacity:.35;cursor:not-allowed;transform:none;box-shadow:none; } .page-arrow{ display:inline-flex;align-items:center;gap:6px;font-size:.78rem; text-transform:uppercase;letter-spacing:.06em; } /* ═══════════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════════ */ @media(max-width:1024px){ .product-grid{grid-template-columns:repeat(3,1fr)} .trust-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .modal-grid{grid-template-columns:1fr;gap:24px} .related-grid{grid-template-columns:repeat(2,1fr)} .shop-layout{grid-template-columns:220px 1fr;gap:24px} .shop-product-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:768px){ .nav-desktop{display:none} .hamburger{display:flex} .product-grid{grid-template-columns:repeat(2,1fr);gap:14px} .cat-grid{grid-template-columns:1fr;gap:14px} .cat-card{aspect-ratio:16/9} .trust-grid{grid-template-columns:1fr} .editorial-card{grid-template-columns:1fr} .editorial-media{min-height:280px} .footer-grid{grid-template-columns:1fr} .section-header{flex-direction:column;align-items:flex-start;gap:8px} .modal-gallery{flex-direction:column-reverse} .modal-thumbs{flex-direction:row;width:100%;overflow-x:auto} .modal-thumb{width:56px;height:68px;flex-shrink:0} .tabs-nav{overflow-x:auto;gap:18px} .tab-btn{white-space:nowrap;font-size:.8rem} .wa-container{bottom:18px;right:18px} /* ── Mobile Logo ── */ .logo{gap:8px} .logo-img{height:34px;width:34px;padding:1px} .logo-name{font-size:1rem;letter-spacing:.06em} .logo-tag{font-size:.5rem;letter-spacing:.14em;margin-top:0} .logo-text{justify-content:center} .header-inner{padding:10px clamp(12px,3vw,24px)} /* ── Mobile Hero ── */ .hero{min-height:75vh} .hero-content{ padding:0 20px; display:flex;flex-direction:column;justify-content:center; max-width:100%; } .hero-badge{ font-size:.6rem;letter-spacing:.16em;margin-bottom:14px; display:inline-flex;align-items:center;gap:6px; } .hero-badge::before{width:20px} .hero-title{ font-size:clamp(2rem,9vw,3rem); margin-bottom:14px;line-height:1.1; } .hero-desc{ font-size:.88rem;line-height:1.65;margin-bottom:24px; max-width:100%; } .hero-btns{ display:flex;flex-direction:row;gap:10px;flex-wrap:wrap; } .hero-btns .btn{ font-size:.72rem;padding:11px 22px; } .btn-filter-mobile{display:inline-flex} .shop-layout{grid-template-columns:1fr} .shop-sidebar{ position:fixed;top:0;left:0;width:320px;max-width:86vw;height:100vh; background:var(--bg-white);z-index:200;padding:24px;overflow-y:auto; box-shadow:var(--shadow-xl);transform:translateX(-100%); transition:transform .3s cubic-bezier(.16,1,.3,1);display:block; visibility:hidden;pointer-events:none; } .shop-sidebar.open{transform:translateX(0);visibility:visible;pointer-events:auto} .sidebar-head{display:flex} .sidebar-apply-btn{display:block} .shop-product-grid{grid-template-columns:repeat(2,1fr);gap:14px} } @media(max-width:480px){ .product-grid{gap:10px} .p-name{font-size:.82rem} .p-sub{display:none} .p-actions{flex-direction:column;gap:4px} .newsletter form{flex-direction:column} .form-row{grid-template-columns:1fr} .shop-product-grid{gap:10px} /* ── Small Mobile Header ── */ .header-inner{padding:8px 10px} .logo{gap:6px} .logo-img{height:28px;width:28px} .logo-name{font-size:.84rem} .logo-tag{font-size:.42rem;letter-spacing:.1em} .header-actions{gap:2px} .header-actions .btn-icon{width:30px;height:30px} .header-actions .btn-icon svg{width:15px;height:15px} /* ── Small Mobile Hero ── */ .hero{min-height:70vh;width:100%;max-width:100vw;overflow:hidden} .hero-content{padding:0 14px;width:100%;box-sizing:border-box} .hero-badge{font-size:.55rem;margin-bottom:10px} .hero-title{font-size:clamp(1.7rem,8vw,2.4rem);margin-bottom:10px} .hero-desc{font-size:.82rem;line-height:1.6;margin-bottom:20px} .hero-btns{flex-direction:column;gap:8px} .hero-btns .btn{ font-size:.7rem;padding:12px 24px;text-align:center; width:100%;justify-content:center; } } /* ========================================================================== MOBILE, ACCESSIBILITY & CHECKOUT REFINEMENTS ========================================================================== */ /* ── Dynamic viewport units ───────────────────────────────────────────── Mobile browsers count their collapsing toolbar inside 100vh, which pushed the filter sidebar's Apply button off-screen. dvh tracks the real height. */ @supports (height: 100dvh) { .shop-sidebar { height: 100dvh; } .hero { min-height: 82dvh; } } /* ── Touch targets ────────────────────────────────────────────────────── Apple HIG and WCAG 2.5.5 both want 44px. The header icons were 30px. */ .header-actions .btn-icon, .hamburger, .drawer-close, .modal-x { min-width: 44px; min-height: 44px; } .header-actions .btn-icon { display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 480px) { .header-actions { gap: 0; } .header-actions .btn-icon { width: 42px; height: 42px; } .header-actions .btn-icon svg { width: 19px; height: 19px; } /* The badge follows the larger button */ .header-actions .btn-icon .badge-count { top: 4px; right: 4px; } } /* Keyboard users need to see where they are */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } /* ── Motion ───────────────────────────────────────────────────────────── The hero's scroll-driven zoom is decorative. Honour the OS setting. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .hero-bg img { transform: none !important; } .p-card { opacity: 1 !important; transform: none !important; } } /* ── Low stock badge ────────────────────────────────────────────────── */ .tag-low { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; padding: 4px 9px; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } /* ── Checkout form ──────────────────────────────────────────────────── */ .checkout-heading { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1.2; margin-bottom: 3px; } .checkout-sub { font-size: .85rem; color: var(--text-sub); margin-bottom: 18px; } .form-grid { display: flex; flex-direction: column; gap: 13px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-grp { display: flex; flex-direction: column; gap: 5px; } .form-grp label { font-size: .76rem; font-weight: 600; letter-spacing: .04em; color: var(--text-sub); } .form-grp label .opt { font-weight: 400; color: var(--text-faint); } .form-grp input, .form-grp select { /* 16px stops iOS Safari zooming the page when a field gains focus */ font-size: 16px; padding: 12px 14px; min-height: 46px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-white); color: var(--text); width: 100%; transition: border-color .18s, box-shadow .18s; } .form-grp input:focus, .form-grp select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,150,90,.18); } .form-grp input.invalid { border-color: #DC2626; } .field-err { font-size: .76rem; color: #DC2626; min-height: 1em; } .field-err:empty { min-height: 0; } .checkout-summary { background: var(--bg-muted); border-radius: var(--r-md); padding: 14px 16px; margin-top: 4px; } .sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; padding: 4px 0; } .sum-row.sum-total { font-size: 1.05rem; font-weight: 700; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; } .sum-note { font-size: .72rem; color: var(--text-faint); margin-top: 8px; line-height: 1.5; } .checkout-error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; padding: 11px 14px; border-radius: var(--r-sm); font-size: .84rem; line-height: 1.5; } .checkout-error[hidden] { display: none; } .checkout-trust { font-size: .74rem; color: var(--text-faint); text-align: center; margin-top: 4px; } /* Order confirmation */ .order-done { text-align: center; padding: 8px 0; } .order-ref { font-size: .82rem; color: var(--text-sub); margin: 10px 0 16px; display: flex; flex-direction: column; gap: 3px; } .order-ref strong { font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; color: var(--text); font-variant-numeric: tabular-nums; } .order-totals { background: var(--bg-muted); border-radius: var(--r-md); padding: 13px 16px; text-align: left; margin-bottom: 16px; } .order-next { font-size: .85rem; color: var(--text-sub); line-height: 1.6; margin-bottom: 16px; } /* Auth error slot */ .a-error.auth-error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; padding: 10px 13px; border-radius: var(--r-sm); font-size: .82rem; margin-bottom: 12px; } .a-error.auth-error[hidden] { display: none; } .btn-icon.signed-in::after { content: ''; position: absolute; bottom: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; border: 1.5px solid var(--bg-white); } .btn-icon { position: relative; } /* ── Catalogue loading state ───────────────────────────────────────── Avoids the flash where bundled placeholder products are replaced by the live catalogue a moment later. */ .product-grid:empty::after, .shop-product-grid:empty::after { content: ''; display: block; grid-column: 1 / -1; height: 320px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--bg-muted) 25%, var(--border) 50%, var(--bg-muted) 75%); background-size: 200% 100%; animation: ddShimmer 1.3s infinite linear; } @keyframes ddShimmer { to { background-position: -200% 0; } } /* ── Wider screens: the layout should keep improving past 1024px ────── */ @media (min-width: 1440px) { .container { max-width: 1340px; } .product-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } .shop-product-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1800px) { .container { max-width: 1520px; } } /* ── Landscape phones ───────────────────────────────────────────────── */ @media (max-height: 460px) and (orientation: landscape) { .hero { min-height: 100dvh; } .hero-title { font-size: clamp(1.4rem, 5vw, 2rem); margin-bottom: 8px; } .hero-desc { font-size: .78rem; margin-bottom: 12px; } .hero-btns { flex-direction: row; } .drawer, .modal-card { max-height: 96dvh; } } /* ── Small phones ───────────────────────────────────────────────────── */ @media (max-width: 360px) { .form-row { grid-template-columns: 1fr; } .container { padding-left: 14px; padding-right: 14px; } } /* ── Print ──────────────────────────────────────────────────────────── */ @media print { .header, .wa-container, .drawer, .modal-wrap, .newsletter, #overlay { display: none !important; } body { background: #fff; } } /* ── Filter drawer: keep Apply reachable ──────────────────────────────── The filter list is taller than a phone screen, so the Apply button used to sit below the fold behind four filter groups. Sticking it to the bottom of the scroll container keeps it in reach at all times. */ .sidebar-actions { display: contents; } @media (max-width: 768px) { .shop-sidebar { display: flex; flex-direction: column; padding-bottom: 0; } .shop-sidebar > :not(.sidebar-actions) { flex-shrink: 0; } .sidebar-actions { display: flex; flex-direction: column; gap: 8px; position: sticky; bottom: 0; margin-top: auto; padding: 12px 0 calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--bg-white); box-shadow: 0 -8px 18px -8px rgba(0,0,0,.14); } .sidebar-actions::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--border); } .sidebar-apply-btn { width: 100%; min-height: 48px; } .sidebar-reset-btn { width: 100%; min-height: 44px; } } /* Placeholder shown when a product image path is wrong */ .img-fallback { object-fit: contain !important; padding: 22%; background: var(--bg-muted); opacity: .5; } /* ── Product card: stretched link ─────────────────────────────────────── The wraps only the product name (valid markup), while its ::after covers the whole card so the entire tile is clickable. The heart and the quick-action buttons sit above that layer so they stay independently operable. */ .p-card-link { color: inherit; text-decoration: none; } .p-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; } .p-card-link:focus-visible::after { outline: 2px solid var(--gold); outline-offset: -3px; border-radius: var(--r-md); } .p-card-media .heart-btn, .p-card-media .p-actions { z-index: 3; } .p-card .p-name { margin: 0; } .p-card .p-name a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Keep the card's reveal animation from hiding content if JS never runs. */ .no-js .p-card { opacity: 1; transform: none; } /* ── Quantity stepper: real touch targets ─────────────────────────────── The +/− controls were 24×21px, well under the 44px minimum, which makes them easy to miss on a phone. */ .qty { padding: 0; gap: 0; } .qty button { width: 40px; height: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; border-radius: 50%; transition: background .18s; } .qty button:hover:not(:disabled) { background: var(--bg-muted); } .qty button:disabled { opacity: .35; cursor: not-allowed; } .qty > span { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; } .qty-lg { padding: 0; font-size: 1rem; } .qty-lg button { width: 46px; height: 46px; min-height: 46px; font-size: 1.15rem; } .qty-lg > span { min-width: 34px; } /* ── Shop: in-page search ───────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .shop-search { position: relative; margin-bottom: 14px; } .shop-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; } .shop-search input { width: 100%; font-size: 16px; /* no iOS zoom on focus */ padding: 13px 44px 13px 42px; min-height: 48px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-white); color: var(--text); transition: border-color .18s, box-shadow .18s; } .shop-search input::-webkit-search-cancel-button { display: none; } .shop-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,150,90,.18); } #shop-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; min-height: 38px; border-radius: 50%; display: none; align-items: center; justify-content: center; color: var(--text-sub); font-size: .9rem; } #shop-search-clear:hover { background: var(--bg-muted); } .shop-search input:not(:placeholder-shown) ~ #shop-search-clear { display: flex; } /* ── Shop: load more ────────────────────────────────────────────────── */ .load-more-wrap { text-align: center; margin-top: 30px; } .load-more-btn { min-height: 50px; padding: 14px 38px; border-radius: var(--r-full); border: 1px solid var(--border-dark); background: transparent; color: var(--text); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: all .2s; } .load-more-btn:hover { background: var(--bg-dark); color: #fff; } .load-more-count { display: block; margin-top: 10px; font-size: .78rem; color: var(--text-faint); } /* ── Touch devices: quick-add without hiding the product ──────────────── :hover never fires on a phone, so the quick actions would be unreachable. Rather than pin a full-width overlay over every photo, tapping the card goes to the product page and a compact pill handles quick-add. */ @media (hover: none) { .p-actions { opacity: 1; transform: none; left: auto; right: 10px; bottom: 10px; width: auto; } .p-actions .p-action-btn.view { display: none; } .p-actions .p-action-btn.add { flex: 0 0 auto; padding: 0 16px; height: 40px; min-height: 40px; border-radius: var(--r-full); font-size: .68rem; box-shadow: 0 2px 10px rgba(0,0,0,.22); } } /* ── Shop header: must wrap on narrow screens ───────────────────────── */ .shop-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; } .shop-actions-bar { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; } .shop-sort { min-width: 0; } .shop-sort select { max-width: 100%; } @media (max-width: 640px) { .shop-title-area { flex: 1 1 100%; } .shop-actions-bar { flex: 1 1 100%; } .btn-filter-mobile { flex: 0 0 auto; } .shop-sort { flex: 1 1 auto; } .shop-sort select { width: 100%; } } /* ── Active filter pills: wrap instead of clipping ──────────────────── */ .active-filters-bar { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; } .active-filters-bar[style*="none"] { display: none !important; } .filter-pill { flex: 0 0 auto; } /* ── Grid children must be allowed to shrink ──────────────────────────── A grid item defaults to min-width:auto, so .shop-main refused to go narrower than its widest child and pushed 25px past the viewport on every phone. The page did not scroll because body has overflow-x:hidden — the content was simply being clipped off the right edge. */ .shop-layout > * { min-width: 0; } .shop-main { min-width: 0; } /* Same rule for the cards themselves: without it a long product name sets an implicit minimum width and the card spills out of its column. */ .product-grid > *, .shop-product-grid > *, .related-grid > *, .p-card { min-width: 0; } .p-name, .p-sub { overflow-wrap: anywhere; } /* Price + strikethrough + discount badge must wrap on narrow cards. */ .p-prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; min-width: 0; } .p-prices > * { min-width: 0; } /* ========================================================================== REVIEWS, RESTOCK ALERTS & SIZE GUIDE ========================================================================== */ /* ── Stars ──────────────────────────────────────────────────────────── */ .stars-row { display: inline-flex; gap: 1px; letter-spacing: 0; } .stars-row .star { color: var(--text-faint); font-size: .92rem; line-height: 1; } .stars-row .star.on { color: var(--gold-text); } .stars-row.lg .star { font-size: 1.2rem; } /* ── Rating line on the product page ────────────────────────────────── */ .pdp-rating-link, .pdp-no-reviews { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; min-height: 32px; } .pdp-rating-link:hover, .pdp-no-reviews:hover { text-decoration: underline; text-underline-offset: 3px; } .pdp-rating-link .num { font-weight: 700; font-size: .84rem; } .pdp-no-reviews { font-size: .84rem; color: var(--text-sub); } /* ── Reviews section ────────────────────────────────────────────────── */ .pdp-reviews { margin-top: 52px; scroll-margin-top: 90px; } .reviews-loading { color: var(--text-faint); font-size: .88rem; padding: 20px 0; } .reviews-empty { background: var(--bg-muted); border-radius: var(--r-md); padding: 26px 22px; text-align: center; margin-bottom: 20px; } .reviews-empty p { font-size: .95rem; font-weight: 600; } .reviews-empty .sub { font-size: .85rem; color: var(--text-sub); font-weight: 400; margin-top: 4px; } .reviews-summary { display: grid; gap: 22px; padding: 22px; background: var(--bg-muted); border-radius: var(--r-md); margin-bottom: 24px; } .reviews-score { text-align: center; } .reviews-score .score { display: block; font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; } .reviews-score .stars-row { margin: 8px 0 4px; } .reviews-score .count { display: block; font-size: .8rem; color: var(--text-sub); } .reviews-bars { display: flex; flex-direction: column; gap: 6px; } .reviews-bar-row { display: flex; align-items: center; gap: 10px; font-size: .78rem; } .reviews-bar-row .lbl { width: 26px; color: var(--text-sub); flex-shrink: 0; } .reviews-bar-row .track { flex: 1; height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; min-width: 0; } .reviews-bar-row .fill { display: block; height: 100%; background: var(--gold); border-radius: 4px; } .reviews-bar-row .n { width: 22px; text-align: right; color: var(--text-faint); flex-shrink: 0; } .reviews-list { list-style: none; padding: 0; margin: 0 0 26px; } .review { padding: 20px 0; border-bottom: 1px solid var(--border); } .review:first-child { padding-top: 0; } .review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 7px; } .review-author { font-weight: 700; font-size: .92rem; } .review-verified { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: #E8F5E9; color: #1B7F32; font-size: .66rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; } .review-head time { font-size: .76rem; color: var(--text-faint); white-space: nowrap; flex-shrink: 0; } .review-title { font-size: .95rem; font-weight: 700; margin: 8px 0 4px; } .review-body { font-size: .9rem; line-height: 1.7; color: var(--text-sub); overflow-wrap: anywhere; } .review-size { display: inline-block; margin-top: 8px; font-size: .76rem; color: var(--text-faint); background: var(--bg-muted); padding: 3px 9px; border-radius: 999px; } /* ── Write a review ─────────────────────────────────────────────────── */ .review-write { padding-top: 6px; } .review-form { margin-top: 18px; padding: 22px; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-md); } .review-form[hidden] { display: none; } .review-field { margin-bottom: 15px; } .review-field label { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-sub); margin-bottom: 6px; } .review-field label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-faint); } .review-field input, .review-field textarea, .review-field select { width: 100%; font-size: 16px; /* prevents iOS zoom on focus */ font-family: inherit; padding: 12px 14px; min-height: 46px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-white); color: var(--text); transition: border-color .18s, box-shadow .18s; } .review-field textarea { line-height: 1.6; resize: vertical; min-height: 104px; } .review-field input:focus, .review-field textarea:focus, .review-field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,150,90,.18); } .review-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .star-picker { display: flex; gap: 2px; } .star-btn { width: 44px; height: 44px; min-height: 44px; font-size: 1.6rem; line-height: 1; color: var(--border-dark); opacity: .32; transition: opacity .15s, color .15s, transform .12s; } .star-btn.on, .star-btn.hover { color: var(--gold-text); opacity: 1; } .star-btn:active { transform: scale(.88); } .review-note { font-size: .78rem; color: var(--text-faint); line-height: 1.6; margin-bottom: 14px; } .review-actions { display: flex; gap: 10px; flex-wrap: wrap; } .review-actions .btn { flex: 1 1 auto; min-height: 48px; } .review-error { background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C; padding: 10px 13px; border-radius: var(--r-sm); font-size: .83rem; margin-bottom: 14px; } .review-error[hidden] { display: none; } .review-thanks { text-align: center; padding: 28px 20px; background: var(--bg-muted); border-radius: var(--r-md); } .review-thanks h3 { font-family: var(--font-serif); font-size: 1.35rem; margin: 12px 0 6px; } .review-thanks p { font-size: .88rem; color: var(--text-sub); line-height: 1.6; } .check-circle { width: 46px; height: 46px; line-height: 46px; border-radius: 50%; background: #E8F5E9; color: #1B7F32; font-size: 1.3rem; margin: 0 auto; text-align: center; } .check-circle.small { width: 34px; height: 34px; line-height: 34px; font-size: 1rem; margin: 0; flex-shrink: 0; } /* ── Back in stock ──────────────────────────────────────────────────── */ .restock-box { background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; margin-top: 4px; } .restock-box h3 { font-size: .98rem; font-weight: 700; margin-bottom: 3px; } .restock-box > p { font-size: .84rem; color: var(--text-sub); line-height: 1.6; margin-bottom: 12px; } .restock-form { display: flex; gap: 8px; flex-wrap: wrap; } .restock-form input { flex: 1 1 180px; min-width: 0; font-size: 16px; padding: 12px 14px; min-height: 48px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-white); color: var(--text); } .restock-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,150,90,.18); } .restock-form .btn { flex: 0 0 auto; min-height: 48px; } .restock-msg { display: block; font-size: .78rem; margin-top: 8px; min-height: 1em; } .restock-msg.error { color: #DC2626; } .restock-done { display: flex; align-items: center; gap: 12px; } .restock-done strong { display: block; font-size: .92rem; } .restock-done span { font-size: .82rem; color: var(--text-sub); overflow-wrap: anywhere; } /* ── Size guide modal ───────────────────────────────────────────────── */ .size-modal-title { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 3px; } .size-modal-sub { font-size: .85rem; color: var(--text-sub); margin-bottom: 16px; } .size-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; } .size-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 320px; } .size-table th, .size-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .size-table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: 700; border-bottom: 2px solid var(--text); } .size-table tbody th { font-weight: 700; } .size-table td { color: var(--text-sub); } .size-table tbody tr:hover { background: var(--bg-muted); } .size-modal-note { font-size: .82rem; color: var(--text-sub); line-height: 1.6; margin-top: 14px; padding: 12px 14px; background: var(--bg-muted); border-radius: var(--r-sm); } .size-modal-help { font-size: .84rem; color: var(--text-sub); margin-top: 14px; } .size-modal-help a { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* ══ Wider screens ══════════════════════════════════════════════════════ */ @media (min-width: 600px) { .reviews-summary { grid-template-columns: 180px 1fr; align-items: center; } .reviews-score { border-right: 1px solid var(--border); padding-right: 22px; } } @media (max-width: 520px) { .review-row { grid-template-columns: 1fr; } .review-head { flex-direction: column; gap: 4px; } .review-head time { align-self: flex-start; } .restock-form .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .star-btn, .reviews-bar-row .fill { transition: none; } } /* The WhatsApp launcher is an anchor now, not a button. */ .wa-btn { text-decoration: none; } /* ── Checkout: marketing opt-in (unticked by default, as the NDPA expects) ── */ .optin { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-white); cursor: pointer; font-size: .86rem; line-height: 1.45; } .optin input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--bg-dark); } .optin small { display: block; color: var(--text-faint); font-size: .76rem; margin-top: 2px; } /* ========================================================================== SOCIAL ICONS & CONTACT Icons sit in the site's neutral palette and take their real brand colour on hover or focus (--brand / --brand-fg come from js/socials.js). ========================================================================== */ .social-row { display: flex; flex-wrap: wrap; gap: 8px; } .social-row[hidden], .social-grid[hidden] { display: none; } .social-link { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); background: var(--bg-white); border: 1px solid var(--border); transition: background .2s, color .2s, border-color .2s, transform .15s; text-decoration: none; } .social-link:hover, .social-link:focus-visible { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); transform: translateY(-2px); } .social-link svg { flex-shrink: 0; } /* Footer: light icons on the near-black footer */ .footer .social-row { margin-bottom: 12px; } .footer .social-link { display: inline-flex; padding: 0; color: #d8d4cc; background: #151515; border-color: #262626; } .footer .social-link:hover, .footer .social-link:focus-visible { color: var(--brand-fg); background: var(--brand); border-color: var(--brand); } /* Mobile menu */ .mobile-drawer-foot .social-row { margin-bottom: 12px; } /* ── Contact section (homepage) ──────────────────────────────────────── */ .contact { padding: 72px 0; scroll-margin-top: 70px; } .contact-card { display: grid; gap: 32px; background: var(--bg-white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 36px 30px; } .contact-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); } .contact-intro h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.1; margin: 8px 0 10px; } .contact-intro > p { color: var(--text-sub); line-height: 1.7; max-width: 44ch; margin-bottom: 22px; } .contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .contact-actions .btn { min-height: 48px; display: inline-flex; align-items: center; gap: 9px; } .contact-wa { background: #0F7A40; border-color: #0F7A40; } .contact-wa:hover { background: #0B6534; } .contact-facts { list-style: none; padding: 0; display: grid; gap: 8px; font-size: .88rem; color: var(--text-sub); } .contact-facts strong { display: inline-block; min-width: 76px; color: var(--text); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } .contact-facts a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .contact-facts [hidden] { display: none; } .contact-social h3 { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; margin-bottom: 4px; } .contact-social > p { font-size: .86rem; color: var(--text-sub); margin-bottom: 16px; } .social-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .social-link.labelled { width: auto; height: auto; min-height: 52px; border-radius: var(--r-md); justify-content: flex-start; gap: 12px; padding: 12px 16px; font-size: .9rem; font-weight: 600; } .social-link.labelled svg { color: var(--brand); transition: color .2s; } .social-link.labelled:hover svg, .social-link.labelled:focus-visible svg { color: var(--brand-fg); } /* Black marks (TikTok, X, Threads) need to stay visible before hover */ .social-link.labelled[style*="#000000"] svg { color: var(--text); } .social-link.labelled[style*="#FFFC00"] svg { color: #1A1A1A; } .social-link.labelled span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 860px) { .contact-card { grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 48px; align-items: center; } } @media (max-width: 380px) { .social-grid { grid-template-columns: 1fr; } .contact-card { padding: 28px 20px; } .contact-actions .btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .social-link { transition: none; } .social-link:hover { transform: none; } } /* Footer: six icons fit on one line in the Connect column */ .footer .social-row { gap: 6px; } .footer .social-link { width: 34px; height: 34px; } .footer .social-link svg { width: 16px; height: 16px; } /* ── Legibility ─────────────────────────────────────────────────────── The discreet admin link in the footer was 45% opacity (1.8:1). */ .footer-manage { color: #8C8C8C; } .footer-manage:hover { color: var(--gold); } /* ── Header search panel ───────────────────────────────────────────────── */ .search-tags { display: block; margin-top: 14px; max-height: min(60dvh, 520px); overflow-y: auto; } .search-results { list-style: none; padding: 0; margin: 0 0 6px; } .search-hit { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; } .search-hit:hover, .search-hit:focus-visible { background: var(--bg-muted); } .search-hit img { width: 44px; height: 55px; object-fit: cover; border-radius: 6px; background: var(--bg-muted); flex-shrink: 0; } .search-hit-text { min-width: 0; display: flex; flex-direction: column; } .search-hit-text strong { font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-hit-text span { font-size: .8rem; color: var(--text-sub); } .search-all { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: .86rem; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; } .search-none { font-size: .88rem; color: var(--text-sub); padding: 8px 0 4px; } .search-block { margin-top: 14px; } .search-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-sub); } .search-clear { font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text); text-decoration: underline; text-underline-offset: 3px; min-height: 36px; } .search-chips { display: flex; flex-wrap: wrap; gap: 8px; } .search-chips .search-tag { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-white); color: var(--text); text-decoration: none; font-size: .84rem; } .search-chips .search-tag:hover { border-color: var(--text); } .cat-grid:empty { display: none; }