/* ===== APPLE-STYLE DESIGN LAYER (loaded after style.css) ===== */
:root{--bg:#fbfbfd;--bg-alt:#f5f5f7;--ink:#1d1d1f;--ink-2:#6e6e73;--hair:#d2d2d7;--gold-ink:#8a6d1f;--r-card:18px;--ease:cubic-bezier(.2,.8,.2,1)}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:6px}

/* Nav: light translucent bar, wordmark instead of round logo */
.nav{background:rgba(251,251,253,.82);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--hair)}
.nav-inner,.home .nav .nav-inner,.home .nav.scrolled .nav-inner{height:64px}
.nav-logo,.home .nav:not(.scrolled) .nav-logo{height:50px;width:50px;padding:4px;mix-blend-mode:normal;background:#0a0a0a;border:2px solid var(--gold)}
.nav-logo.scrolled,.home .nav.scrolled .nav-logo{height:44px;width:44px}
.home .nav:not(.scrolled) .nav-logo-link{position:static;transform:none}
.home .nav:not(.scrolled) .nav-links{opacity:1;pointer-events:auto}
.nav-links{gap:28px}
.nav-links a{color:var(--ink);font-size:.8rem;font-weight:400;letter-spacing:0;opacity:.8}
.nav-links a:hover{color:var(--ink);opacity:1}
.nav-links a[style]{color:var(--gold-ink)!important;opacity:1}
.hamburger{color:var(--ink)}
.mobile-menu{background:var(--bg);border-top:.5px solid var(--hair)}
.mobile-menu a{color:var(--ink);border-bottom:.5px solid var(--hair)}

/* Buttons: pills, one gold primary */
.btn-primary,.btn-full,.btn-gold{border-radius:980px}
.btn-primary{padding:12px 26px;font-weight:500;letter-spacing:0}
.btn-primary:hover{transform:none;background:var(--gold-light)}
.btn-ghost,.btn-ghost-dark{border:0;padding:12px 6px;color:var(--gold-ink);font-weight:500}
.btn-ghost::after,.btn-ghost-dark::after{content:" \203A"}
.btn-ghost:hover,.btn-ghost-dark:hover{color:var(--ink)}

/* Hero: centered headline, photo band beneath */
.hero{min-height:0;flex-direction:column;align-items:stretch;background:var(--bg);padding-top:64px}
.hero-content{order:1;max-width:760px;margin:0 auto;text-align:center;padding:72px 24px 36px}
.hero-eyebrow{color:var(--gold-ink);font-size:.85rem;font-weight:500;letter-spacing:0;text-transform:none;margin-bottom:10px}
.hero-title{font-weight:400;color:var(--ink);font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.08;letter-spacing:-.01em}
.hero-sub{color:var(--ink-2);font-size:1.1rem;margin:0 auto 22px}
.hero-badges{justify-content:center;margin-bottom:26px}
.badge{background:var(--bg-alt);border:0;color:var(--ink-2);font-weight:500;backdrop-filter:none}
.badge svg{color:var(--gold-ink)}
.hero-cta{justify-content:center;align-items:center}
.hero-bg{order:2;position:relative;inset:auto;height:clamp(180px,34vw,380px);border-radius:var(--r-card) var(--r-card) 0 0;overflow:hidden;gap:2px;max-width:1200px;width:calc(100% - 48px);align-self:center}
.hero-img{filter:none}
.hero-overlay{display:none}

/* Sections */
.section{padding:88px 0}
.section-title{font-weight:400;letter-spacing:-.01em;font-size:clamp(2rem,4.5vw,3rem)}
.section-sub{color:var(--ink-2);font-size:1.05rem}
#products,.section:has(.product-grid){background:var(--bg-alt)}
.section-dark{background:var(--ink)}
.section-title.light{color:#f5f5f7}
.section-sub.light{color:rgba(245,245,247,.6)}

/* Cards */
.product-grid{gap:16px;background:none;border:0}
.product-card{border-radius:var(--r-card);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.product-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.product-info{border-top:0;padding:20px 22px 24px}
.product-info h3{font-family:'Playfair Display',serif;font-weight:400;font-size:1.25rem}
.product-info p{color:var(--ink-2)}
.product-order{color:var(--gold-ink);font-weight:500;text-transform:none;letter-spacing:0;font-size:.9rem}
.gallery-grid{gap:8px}
.gallery-item{border-radius:12px}
.gallery-item:hover{transform:none;opacity:.9}

/* Pay strip, contact, trust */
.pay-strip-home{background:var(--bg-alt)}
.pay-strip-home .pay-eyebrow{color:var(--ink-2);font-weight:500;letter-spacing:.04em}
.pay-chip{border-radius:10px;box-shadow:none;border:.5px solid var(--hair)}
.contact-block h3,.trust-block h3{font-weight:400;border-bottom:.5px solid var(--hair)}
.contact-item{border-radius:14px;background:var(--bg-alt)}
.contact-item:hover{background:#ececf0;transform:none}
.contact-item span{color:var(--ink-2)}
.contact-icon{display:none}
.trust-list li{border-left:0;border-radius:14px;background:var(--bg-alt);color:var(--ink)}

/* Inner-page heroes: light and centered */
.page-hero,.pay-hero{background:var(--bg);border-bottom:.5px solid var(--hair);padding:112px 24px 44px}
.page-hero h1,.pay-hero h1{color:var(--ink);font-weight:400;letter-spacing:-.01em}
.page-hero p,.pay-hero p{color:var(--ink-2)}
.qr-card{border-radius:var(--r-card);border:0;background:var(--bg-alt)}
.qr-card:hover{transform:none;box-shadow:none}
.qr-card img{border-radius:12px;border:0}
.master-qr-wrap{background:var(--bg-alt)}
.master-qr-wrap h2{font-weight:400}
.prod-media img{border-radius:var(--r-card)}
.prod-eyebrow{color:var(--gold-ink)}
.cat-filter a{border-radius:980px}
.page-intro{border-left:0;border-radius:var(--r-card);background:var(--bg-alt)}
.terms-section-header{border-bottom:.5px solid var(--hair)}
.terms-number{border-radius:50%;background:var(--bg-alt);color:var(--gold-ink)}
.terms-section-title{font-weight:400}
.terms-item{border-left:.5px solid var(--hair)}
.terms-item-label{color:var(--gold-ink)}
.terms-highlight{border-radius:12px;border-color:#e8d9a8}
.terms-limitation{border-radius:var(--r-card);background:var(--ink)}

/* Footer: light */
.footer{background:var(--bg-alt);border-top:.5px solid var(--hair)}
.footer-logo{display:none}
.footer-tagline{color:var(--ink);font-weight:400;font-size:1.2rem}
.footer-reg,.footer-womens{color:var(--ink-2)}
.footer-links a{color:var(--ink-2)}
.footer-links a:hover{color:var(--ink)}
.footer-payment-credit,.footer-image-credit,.footer-credit,.footer-copy{color:#86868b}
.footer-payment-credit a{color:var(--gold-ink)!important}

/* Messenger button: flat blue, no gradient */
.msg-fab{background:#0a84ff;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.msg-fab:hover{transform:none;box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* Phone: bottom tab bar (injected by main.js) */
.tabbar{display:none}
@media(max-width:640px){
  .hamburger,.mobile-menu{display:none!important}
  body{padding-bottom:64px}
  .hero-content{padding:44px 20px 28px}
  .hero-bg{width:calc(100% - 32px)}
  .msg-fab{bottom:76px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;height:56px;padding-bottom:env(safe-area-inset-bottom);background:rgba(251,251,253,.9);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--hair)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.65rem;color:#86868b;min-height:44px}
  .tabbar a.on{color:var(--gold-ink)}
  .tabbar svg{width:22px;height:22px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.tabbar{display:none}}