/* --------------------------------------------------------------------------
   DewyDaze v5.7 storefront stability layer
   Loaded last so one consistent, browser-safe system controls public pages.
   -------------------------------------------------------------------------- */

.site-body{
  --line:rgba(24,48,34,.13);
  --line-strong:rgba(24,48,34,.24);
  --dd-hairline:rgba(24,48,34,.13);
  --ux-line:rgba(24,48,34,.13);
  --ux-glass:var(--paper,#fffdfa);
  --ux-glass-strong:var(--paper,#fffdfa);
  --ux-focus:#e4c68f;
  background:var(--cream,#f8f4ec);
  color:var(--ink,#183022);
}

@supports (color:color-mix(in srgb,#000 50%,#fff)){
  .site-body{
    --line:color-mix(in srgb,var(--ink,#183022) 13%,transparent);
    --line-strong:color-mix(in srgb,var(--ink,#183022) 24%,transparent);
    --dd-hairline:color-mix(in srgb,var(--ink,#183022) 13%,transparent);
    --ux-line:color-mix(in srgb,var(--ux-text,var(--ink,#183022)) 13%,transparent);
    --ux-glass:color-mix(in srgb,var(--paper,#fffdfa) 78%,transparent);
    --ux-glass-strong:color-mix(in srgb,var(--paper,#fffdfa) 92%,transparent);
    --ux-focus:color-mix(in srgb,var(--gold,#d8b06c) 74%,#fff);
  }
}

/* Keep the opening screen usable even if a deferred script cannot load. */
.site-body:not(.is-page-loading) .page-preloader{opacity:0;visibility:hidden;pointer-events:none}

/* Reliable public header structure. */
.site-body .site-header{isolation:isolate;background:var(--header-bg,var(--paper,#fffdfa));color:var(--header-text,var(--ink,#183022))}
.site-body .nav-wrap{position:relative;min-width:0}
.site-body .main-nav{min-width:0}
.site-body .main-nav a{white-space:nowrap}
.site-body .nav-actions{min-width:0}

@media (min-width:961px){
  .site-body .nav-wrap{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,2vw,28px)}
  .site-body .main-nav{overflow-x:auto;scrollbar-width:none}
  .site-body .main-nav::-webkit-scrollbar{display:none}
  .site-body .main-nav a{flex:0 0 auto}
}

@media (max-width:1180px) and (min-width:961px){
  .site-body .brand-copy small,.site-body .nav-action-label,.site-body .cart-label{display:none}
  .site-body .nav-wrap{gap:12px}
  .site-body .main-nav{gap:clamp(10px,1.5vw,18px)}
}

@media (max-width:960px){
  .site-body .nav-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;min-height:72px;gap:10px}
  .site-body .brand{min-width:0}
  .site-body .brand-copy{min-width:0}
  .site-body .brand-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .site-body .brand-copy small{display:none}
  .site-body .nav-toggle{display:inline-flex;grid-column:2;align-items:center;justify-content:center;border:1px solid var(--line-strong);background:var(--paper,#fffdfa);color:var(--ink,#183022)}
  .site-body .nav-actions{grid-column:3;gap:2px}
  .site-body .nav-actions .nav-icon-button,.site-body .bag-button{min-width:39px;padding-inline:8px}
  .site-body .nav-actions .nav-action-label,.site-body .nav-actions .cart-label{display:none}
  .site-body .main-nav{
    position:absolute!important;top:100%!important;right:0;left:0;z-index:400;
    display:none;max-height:calc(100svh - 72px);overflow-y:auto;
    flex-direction:column;align-items:stretch;gap:0;
    margin:0;padding:8px 16px 16px;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line-strong);
    background:var(--header-bg,var(--paper,#fffdfa));box-shadow:0 18px 34px rgba(18,45,29,.16);
  }
  .site-body .main-nav.open{display:flex!important}
  .site-body .main-nav a{display:flex;align-items:center;min-height:46px;width:100%;padding:12px 4px;border-bottom:1px solid var(--line);white-space:normal}
  .site-body .main-nav a:last-child{border-bottom:0}
  .site-body .main-nav a::after{display:none}
}

@media (max-width:520px){
  .site-body .nav-wrap{min-height:64px;gap:6px}
  .site-body .brand-mark{width:34px;height:34px}
  .site-body .nav-toggle,.site-body .nav-actions .nav-icon-button,.site-body .bag-button{min-width:36px;min-height:36px;padding-inline:6px}
  .site-body .nav-actions{gap:0}
  .site-body .main-nav{max-height:calc(100svh - 64px);padding-inline:14px}
}

/* Public sign-in/register cards: restored surface, border hierarchy and depth. */
.site-body .auth-page{
  padding:clamp(34px,7vw,80px) 18px;
  background:radial-gradient(circle at 16% 12%,rgba(216,176,108,.18),transparent 32%),linear-gradient(135deg,var(--cream,#f8f4ec),#f3eee3);
}
.site-body .auth-card{
  position:relative;background:var(--paper,#fffdfa)!important;color:var(--ink,#183022)!important;
  border:1px solid var(--line-strong)!important;border-radius:22px;
  box-shadow:0 20px 50px rgba(18,45,29,.14)!important;
}
.site-body .auth-card input,.site-body .auth-card select,.site-body .auth-card textarea{
  background:#fff!important;color:var(--ink,#183022)!important;border:1px solid var(--line-strong)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.site-body .auth-card input:focus,.site-body .auth-card select:focus,.site-body .auth-card textarea:focus{
  border-color:var(--green,#1f412d)!important;outline:3px solid rgba(216,176,108,.24);outline-offset:1px;
}

/* Footer and newsletter remain readable without depending on color-mix(). */
.site-body .newsletter{background:var(--green,#1f412d);color:#fff}
.site-body .newsletter h2,.site-body .newsletter p,.site-body .newsletter .eyebrow{color:#fff}
.site-body .site-footer{background:var(--footer-bg,#173523);color:var(--footer-text,#f4f8f4)}
.site-body .site-footer h3,.site-body .site-footer a,.site-body .site-footer strong{color:var(--footer-text,#f4f8f4)}
.site-body .site-footer p,.site-body .site-footer small,.site-body .site-footer .footer-assurance span{color:rgba(244,248,244,.78)}
.site-body .site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.18)}
.site-body .site-footer .footer-bottom .container{color:rgba(244,248,244,.76)}
.site-body .site-footer .social-links a{border-color:rgba(255,255,255,.34)}
.site-body .site-footer .social-links a:hover{background:rgba(255,255,255,.10)}

/* Explicit dark palette makes theme changes visible across all storefront layers. */
html[data-ui-theme="dark"] body.site-body{
  color-scheme:dark;
  --cream:#101710;--paper:#17221a;--ink:#eff4f0;--muted:#b4c2b7;
  --line:rgba(239,244,240,.17);--line-strong:rgba(239,244,240,.29);--dd-hairline:rgba(239,244,240,.17);
  --header-bg:#17221a;--header-text:#eff4f0;--footer-bg:#0b110d;--footer-text:#eff4f0;
  --announcement-bg:#0b110d;--announcement-text:#eff4f0;
  --ux-line:rgba(239,244,240,.17);--ux-glass:rgba(23,34,26,.88);--ux-glass-strong:#17221a;
  background:#101710;color:#eff4f0;
}
html[data-ui-theme="dark"] body.site-body .site-header,
html[data-ui-theme="dark"] body.site-body .main-nav,
html[data-ui-theme="dark"] body.site-body .nav-toggle,
html[data-ui-theme="dark"] body.site-body .cart-drawer,
html[data-ui-theme="dark"] body.site-body .site-profile-dropdown{background:#17221a!important;color:#eff4f0!important}
html[data-ui-theme="dark"] body.site-body .auth-page{background:radial-gradient(circle at 16% 12%,rgba(216,176,108,.14),transparent 32%),#101710}
html[data-ui-theme="dark"] body.site-body .auth-card{background:#17221a!important;color:#eff4f0!important;border-color:rgba(239,244,240,.27)!important;box-shadow:0 24px 58px rgba(0,0,0,.38)!important}
html[data-ui-theme="dark"] body.site-body .auth-card input,
html[data-ui-theme="dark"] body.site-body .auth-card select,
html[data-ui-theme="dark"] body.site-body .auth-card textarea{background:#101811!important;color:#eff4f0!important;border-color:rgba(239,244,240,.25)!important;box-shadow:none}
html[data-ui-theme="dark"] body.site-body .auth-card label,
html[data-ui-theme="dark"] body.site-body .auth-card h1,
html[data-ui-theme="dark"] body.site-body .auth-card h2,
html[data-ui-theme="dark"] body.site-body .auth-card h3{color:#eff4f0!important}
html[data-ui-theme="dark"] body.site-body .auth-card p,
html[data-ui-theme="dark"] body.site-body .auth-card small{color:#b4c2b7!important}
html[data-ui-theme="dark"] body.site-body .site-footer p,
html[data-ui-theme="dark"] body.site-body .site-footer small,
html[data-ui-theme="dark"] body.site-body .site-footer .footer-assurance span{color:rgba(239,244,240,.76)}

/* v5.8 — Contact detail cards: email, phone and WhatsApp were rendered as bare links because only the address had the card class. */
.site-body .contact-page .contact-layout{display:block!important;margin-top:clamp(28px,4vw,52px)!important}
.site-body .contact-page .contact-cards{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:16px!important;align-items:stretch!important}
.site-body .contact-page .contact-info-card{display:flex!important;align-items:flex-start!important;gap:14px!important;min-width:0!important;min-height:156px!important;padding:24px!important;border:1px solid var(--line-strong)!important;background:var(--paper)!important;box-shadow:var(--shadow-soft)!important}
.site-body .contact-page a.contact-info-card{color:var(--ink)!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
.site-body .contact-page a.contact-info-card:hover{border-color:var(--gold)!important;box-shadow:0 16px 34px rgba(25,42,29,.12)!important;transform:translateY(-2px)}
.site-body .contact-page .contact-info-card>.icon{flex:0 0 auto!important;margin-top:2px!important;color:var(--gold)!important;font-size:1.5rem!important}
.site-body .contact-page .contact-info-card>span{display:grid!important;gap:4px!important;min-width:0!important}
.site-body .contact-page .contact-info-card small{font-size:.7rem!important;font-weight:800!important;letter-spacing:.1em!important;text-transform:uppercase!important}
.site-body .contact-page .contact-info-card b{overflow-wrap:anywhere!important;color:var(--ink)!important;font:500 clamp(1rem,1.35vw,1.22rem)/1.35 var(--serif)!important}
.site-body .contact-page .contact-info-empty{grid-column:1/-1!important;width:100%!important;margin:0!important}
@media(max-width:640px){.site-body .contact-page .contact-layout{margin-top:26px!important}.site-body .contact-page .contact-cards{grid-template-columns:1fr!important;gap:12px!important}.site-body .contact-page .contact-info-card{min-height:0!important;padding:20px!important}.site-body .contact-page a.contact-info-card:hover{transform:none}}