/* --------------------------------------------------------------------------
   DewyDaze v6.1 — Commerce reliability & responsive finish
   -------------------------------------------------------------------------- */
:root { --mobile-nav-offset: 72px; }

.site-body .site-header { isolation: isolate !important; overflow: visible !important; transform: translateZ(0); -webkit-transform: translateZ(0); }
.site-body .nav-wrap { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr) minmax(0, .82fr) !important; gap: clamp(12px, 2vw, 26px) !important; }
.site-body .brand,.site-body .brand-copy,.site-body .main-nav,.site-body .nav-actions { min-width: 0 !important; }
.site-body .brand-copy strong,.site-body .brand-copy small { overflow: hidden; text-overflow: ellipsis; }
.site-body .main-nav { justify-content: center; overflow: visible; }
.site-body .nav-actions { justify-content: flex-end; flex-wrap: nowrap; }
.site-body .site-header.is-scrolled { isolation: isolate !important; }

@media (max-width: 920px) {
  .site-body .nav-wrap { min-height: 72px !important; grid-template-columns: minmax(0, 1fr) auto auto !important; gap: 8px !important; }
  .site-body .brand { grid-column: 1; }
  .site-body .brand-copy small { display: none; }
  .site-body .brand-copy strong { max-width: min(44vw, 250px); }
  .site-body .nav-toggle { display: inline-flex !important; grid-column: 2; order: 2; }
  .site-body .nav-actions { grid-column: 3; }
  .site-body .main-nav { position: fixed !important; z-index: 990 !important; top: var(--mobile-nav-offset) !important; right: 0 !important; left: 0 !important; display: grid !important; align-content: start !important; gap: 0 !important; max-height: calc(100dvh - var(--mobile-nav-offset)) !important; overflow-y: auto !important; padding: 12px 16px 24px !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; background: var(--header-bg) !important; box-shadow: 0 18px 34px rgba(15, 31, 20, .14) !important; transform: translateY(-120%) !important; opacity: 0 !important; visibility: hidden !important; transition: transform .25s ease, opacity .25s ease, visibility .25s ease !important; }
  .site-body .main-nav.open { transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; }
  .site-body .main-nav a { min-height: 48px !important; padding: 14px 7px !important; border-bottom: 1px solid var(--line) !important; font-size: .74rem !important; }
  .site-body .main-nav a::after { display: none !important; }
}
@media (max-width: 520px) { .site-body .nav-wrap { min-height: 66px !important; } .site-body .brand-mark { width: 30px; height: 30px; } .site-body .brand-copy strong { max-width: 37vw; font-size: 1.42rem; } }

.product-gallery__main,.quick-view-gallery__main { display: grid; place-items: center; background: linear-gradient(145deg, #f6f2eb, #ebe2d4) !important; }
.product-gallery__main img,.quick-view-gallery__main img { object-fit: contain !important; object-position: center !important; padding: clamp(8px, 1.5vw, 16px); }
.product-gallery__thumb img,.quick-view-gallery__thumbs img { object-fit: contain !important; padding: 3px; }
.product-gallery__main,.quick-view-gallery__main { overflow: hidden; }

.product-details-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
.product-detail-card { display: grid; align-content: start; min-width: 0; padding: 17px 16px; border: 1px solid var(--line); background: var(--paper); }
.product-detail-card__label { margin-bottom: 8px; color: var(--green); font-size: .67rem; font-weight: 800; letter-spacing: .09em; line-height: 1.25; text-transform: uppercase; }
.product-detail-card > p:last-child { overflow-wrap: anywhere; font-size: .88rem; line-height: 1.66; }
.product-summary-card { border-color: var(--line-strong); }
.product-purchase-panel { box-shadow: 0 13px 28px rgba(29, 49, 35, .06); }
@media (max-width: 700px) { .product-details-grid { grid-template-columns: 1fr !important; } .product-detail-card { padding: 15px; } }
@media (max-width: 620px) { .product-gallery__main img,.quick-view-gallery__main img { padding: 8px; } }


/* --------------------------------------------------------------------------
   DewyDaze v6.2 — Direct checkout, media-safe gallery and header stability
   -------------------------------------------------------------------------- */

/* Keep the sticky header completely opaque and outside any clipping/transform
   context. The navigation panel is anchored to the header on small screens,
   so it cannot slide behind the brand while scrolling. */
.site-body .site-header{
  position:sticky!important;
  top:0!important;
  z-index:1200!important;
  overflow:visible!important;
  isolation:isolate!important;
  transform:none!important;
  -webkit-transform:none!important;
  will-change:auto!important;
  contain:none!important;
  background:var(--header-bg,var(--paper,#fffdfa))!important;
}
.site-body .site-header.is-scrolled{
  background:var(--header-bg,var(--paper,#fffdfa))!important;
  box-shadow:0 12px 30px rgba(17,40,26,.12)!important;
  backdrop-filter:none!important;
}
.site-body .nav-wrap{
  position:relative!important;
  overflow:visible!important;
  min-height:82px!important;
}
.site-body .brand,
.site-body .brand-copy,
.site-body .main-nav,
.site-body .nav-actions{min-width:0!important;overflow:visible!important}
.site-body .brand-copy strong{overflow:visible!important;text-overflow:clip!important}
@media (min-width:961px){
  .site-body .nav-wrap{grid-template-columns:auto minmax(0,1fr) auto!important}
  .site-body .main-nav{overflow:visible!important}
}
@media (max-width:960px){
  .site-body .nav-wrap{min-height:72px!important}
  .site-body .main-nav{
    position:absolute!important;
    top:100%!important;
    right:0!important;
    left:0!important;
    z-index:1300!important;
    display:none!important;
    max-height:calc(100dvh - 72px)!important;
    overflow-y:auto!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    margin:0!important;
    padding:8px 16px 16px!important;
    border-top:1px solid var(--line)!important;
    border-bottom:1px solid var(--line-strong)!important;
    background:var(--header-bg,var(--paper,#fffdfa))!important;
    box-shadow:0 18px 34px rgba(18,45,29,.16)!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
  }
  .site-body .main-nav.open{display:flex!important}
}
@media (max-width:520px){
  .site-body .nav-wrap{min-height:64px!important}
  .site-body .main-nav{max-height:calc(100dvh - 64px)!important;padding-inline:14px!important}
}

/* Product images remain fully visible in both full details and Quick View.
   These rules intentionally use contain: uploaded portrait, landscape and
   square product photos never lose edges through crop. */
.product-gallery__main,
.quick-view-gallery__main{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:linear-gradient(145deg,#f6f2eb,#ebe2d4)!important;
}
.product-gallery__main{aspect-ratio:1/1.08}
.product-gallery__main img,
.quick-view-gallery__main img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  min-height:0!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:clamp(8px,1.5vw,16px)!important;
}
.product-gallery__thumb,
.quick-view-gallery__thumbs button{aspect-ratio:1/1;min-height:0!important}
.product-gallery__thumb img,
.quick-view-gallery__thumbs img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  padding:3px!important;
}
.product-summary-card{margin-top:16px!important}
.product-purchase-panel{margin-top:16px!important}
.product-details-grid{margin-top:16px!important}

/* Clear, non-destructive direct-checkout state. */
.express-checkout-note{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:0 0 20px;
  padding:14px 15px;
  border:1px solid var(--line-strong);
  background:linear-gradient(135deg,rgba(216,176,108,.16),rgba(255,253,249,.72));
}
.express-checkout-note>.icon{flex:0 0 auto;width:19px;height:19px;margin-top:1px;color:var(--green)}
.express-checkout-note strong,.express-checkout-note small{display:block}
.express-checkout-note strong{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.express-checkout-note small{margin-top:4px;color:var(--muted);font-size:.83rem;line-height:1.45}

/* COD needs an order confirmation, not a generic “pay now” call-to-action. */
.confirmation-cod-note{
  display:flex;
  align-items:flex-start;
  gap:10px;
  max-width:580px;
  margin:18px auto 0;
  padding:15px 16px;
  border:1px solid var(--line-strong);
  background:var(--paper);
  text-align:left;
}
.confirmation-cod-note>.icon{flex:0 0 auto;width:21px;height:21px;color:var(--green)}
.confirmation-cod-note strong,.confirmation-cod-note small{display:block}
.confirmation-cod-note strong{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.confirmation-cod-note small{margin-top:4px;color:var(--muted);font-size:.87rem;line-height:1.5}
@media (max-width:620px){
  .express-checkout-note{margin-bottom:16px;padding:13px}
  .confirmation-cod-note{padding:13px}
}

/* --------------------------------------------------------------------------
   DewyDaze v6.2.1 — Product detail reading layout
   Each product-information item is deliberately presented as a full-width
   row. This keeps usage, ingredients and delivery copy readable inside the
   product information column at every viewport width.
   -------------------------------------------------------------------------- */
.product-details-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
  width:100%;
}
.product-detail-card{
  display:grid!important;
  grid-template-columns:minmax(132px,178px) minmax(0,1fr);
  align-items:start;
  column-gap:clamp(16px,2.4vw,24px);
  min-width:0;
  padding:19px 20px;
  border:1px solid var(--line-strong);
  background:linear-gradient(135deg,var(--paper),color-mix(in srgb,var(--cream) 58%,var(--paper)));
}
.product-detail-card__label{
  position:relative;
  margin:2px 0 0;
  padding-left:12px;
  color:var(--green);
  font-size:.69rem;
  font-weight:800;
  letter-spacing:.1em;
  line-height:1.35;
  text-transform:uppercase;
}
.product-detail-card__label::before{
  position:absolute;
  top:.12em;
  bottom:.12em;
  left:0;
  width:3px;
  content:"";
  border-radius:99px;
  background:var(--gold);
}
.product-detail-card > p:last-child{
  min-width:0;
  margin:0;
  color:var(--ink);
  overflow-wrap:break-word;
  word-break:normal;
  font-size:.93rem;
  line-height:1.75;
}
@media (max-width:560px){
  .product-detail-card{
    grid-template-columns:1fr;
    row-gap:9px;
    padding:16px;
  }
  .product-detail-card__label{margin:0}
  .product-detail-card > p:last-child{font-size:.91rem;line-height:1.7}
}


/* --------------------------------------------------------------------------
   DewyDaze v6.2.2 — Mobile sticky header + premium dark storefront
   Authoritative final overrides. These rules intentionally resolve the older
   header breakpoints above without changing checkout, payment or admin logic.
   -------------------------------------------------------------------------- */

/* `overflow-x:hidden` on the root can create a sticky-containing block in some
   mobile Chromium/WebView versions. `clip` prevents horizontal spill without
   breaking the viewport-sticky header. */
html{overflow-x:clip!important}
body.site-body{overflow-x:clip}

.site-body .site-header{
  position:sticky!important;
  top:0!important;
  z-index:1200!important;
  width:100%!important;
  overflow:visible!important;
  isolation:isolate!important;
  transform:none!important;
  -webkit-transform:none!important;
  contain:none!important;
  background:var(--header-bg,var(--paper,#fffdfa))!important;
  border-bottom:1px solid color-mix(in srgb,var(--header-text,var(--ink)) 13%,transparent)!important;
}
.site-body .site-header.is-scrolled{
  background:color-mix(in srgb,var(--header-bg,var(--paper,#fffdfa)) 96%,transparent)!important;
  box-shadow:0 12px 34px rgba(10,27,17,.16)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
}
.site-body .nav-wrap{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  min-height:78px!important;
  gap:clamp(12px,2vw,28px)!important;
  overflow:visible!important;
}
.site-body .brand{grid-column:1!important;grid-row:1!important;min-width:0!important}
.site-body .main-nav{grid-column:2!important;grid-row:1!important}
.site-body .nav-actions{grid-column:3!important;grid-row:1!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;min-width:0!important;overflow:visible!important;flex-wrap:nowrap!important}
.site-body .nav-toggle{grid-column:auto!important;grid-row:auto!important;order:initial!important}
.site-body .nav-more-toggle .icon{width:1.3rem;height:1.3rem}

@media (max-width:960px){
  .site-body .nav-wrap{
    grid-template-columns:minmax(0,1fr) auto!important;
    min-height:68px!important;
    gap:8px!important;
  }
  .site-body .brand{grid-column:1!important}
  .site-body .nav-actions{grid-column:2!important;gap:2px!important}
  .site-body .nav-toggle{display:inline-flex!important}
  .site-body .nav-actions .nav-icon-button,
  .site-body .nav-actions .bag-button,
  .site-body .nav-actions .nav-toggle,
  .site-body .site-profile-toggle{
    position:relative;
    flex:0 0 38px!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    padding:0!important;
    border:1px solid transparent!important;
    border-radius:999px!important;
    background:transparent!important;
    color:var(--header-text,var(--ink))!important;
  }
  .site-body .nav-actions .nav-icon-button:hover,
  .site-body .nav-actions .bag-button:hover,
  .site-body .nav-actions .nav-toggle:hover,
  .site-body .site-profile-toggle:hover,
  .site-body .nav-actions .nav-icon-button:focus-visible,
  .site-body .nav-actions .bag-button:focus-visible,
  .site-body .nav-actions .nav-toggle:focus-visible,
  .site-body .site-profile-toggle:focus-visible{
    opacity:1!important;
    border-color:var(--line-strong)!important;
    background:color-mix(in srgb,var(--header-text,var(--ink)) 8%,transparent)!important;
  }
  .site-body .nav-actions .nav-action-label,
  .site-body .nav-actions .cart-label,
  .site-body .site-profile-toggle>.icon{display:none!important}
  .site-body .site-profile-avatar{width:30px!important;height:30px!important}
  .site-body .bag-button b{
    position:absolute!important;
    top:0!important;
    right:-1px!important;
    min-width:17px!important;
    height:17px!important;
    margin:0!important;
    padding:0 4px!important;
    border:2px solid var(--header-bg,var(--paper))!important;
    font-size:.57rem!important;
  }

  .site-body .main-nav{
    position:fixed!important;
    z-index:1300!important;
    top:var(--mobile-nav-offset,68px)!important;
    right:10px!important;
    left:10px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:5px!important;
    max-height:calc(100dvh - var(--mobile-nav-offset,68px) - 12px)!important;
    margin:0!important;
    padding:10px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    border:1px solid var(--line-strong)!important;
    border-radius:18px!important;
    background:color-mix(in srgb,var(--header-bg,var(--paper,#fffdfa)) 97%,transparent)!important;
    box-shadow:0 22px 60px rgba(7,22,13,.24)!important;
    -webkit-backdrop-filter:blur(22px)!important;
    backdrop-filter:blur(22px)!important;
    transform:translateY(-10px) scale(.985)!important;
    transform-origin:top right!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .22s ease,opacity .22s ease,visibility .22s ease!important;
  }
  .site-body .main-nav.open{
    transform:translateY(0) scale(1)!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  .site-body .main-nav a{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    width:100%!important;
    min-height:48px!important;
    padding:11px 13px!important;
    border:0!important;
    border-radius:12px!important;
    color:var(--header-text,var(--ink))!important;
    font-size:.74rem!important;
    letter-spacing:.075em!important;
    white-space:normal!important;
  }
  .site-body .main-nav a:hover,
  .site-body .main-nav a:focus-visible{
    background:color-mix(in srgb,var(--header-text,var(--ink)) 7%,transparent)!important;
  }
  .site-body .main-nav .site-nav-link__icon{
    display:grid!important;
    place-items:center!important;
    flex:0 0 35px!important;
    width:35px!important;
    height:35px!important;
    border-radius:11px!important;
    background:color-mix(in srgb,var(--gold) 17%,transparent)!important;
    color:var(--green)!important;
  }
  .site-body .main-nav .site-nav-link__icon .icon{width:18px;height:18px}
  .site-body .main-nav .site-nav-link.is-active{
    background:color-mix(in srgb,var(--gold) 16%,transparent)!important;
  }
  body.site-body.nav-open{overflow-x:clip!important;overflow-y:visible!important;overscroll-behavior:none}
  body.site-body.nav-open::before{
    position:fixed;
    z-index:1190;
    inset:0;
    content:"";
    background:rgba(5,17,10,.38);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
  }
}

@media (max-width:520px){
  .site-body .container.nav-wrap{width:calc(100% - 20px)!important}
  .site-body .nav-wrap{min-height:62px!important;gap:4px!important}
  .site-body .brand{gap:7px!important}
  .site-body .brand-mark{width:29px!important;height:29px!important;flex:0 0 29px!important}
  .site-body .brand-copy strong{
    max-width:clamp(82px,28vw,128px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:clamp(1.22rem,5.3vw,1.45rem)!important;
  }
  .site-body .nav-actions .nav-icon-button,
  .site-body .nav-actions .bag-button,
  .site-body .nav-actions .nav-toggle,
  .site-body .site-profile-toggle{
    flex-basis:34px!important;
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    min-height:34px!important;
  }
  .site-body .nav-actions .icon{width:17px!important;height:17px!important}
  .site-body .site-profile-avatar{width:27px!important;height:27px!important}
  .site-body .main-nav{
    top:var(--mobile-nav-offset,62px)!important;
    right:8px!important;
    left:8px!important;
    max-height:calc(100dvh - var(--mobile-nav-offset,62px) - 10px)!important;
    border-radius:16px!important;
  }
}

@media (max-width:360px){
  .site-body .nav-actions .ui-theme-toggle{display:none!important}
  .site-body .brand-copy strong{max-width:104px!important}
}

/* Premium card surfaces and consistent mobile sizing. */
.product-card--commerce{
  grid-template-rows:auto minmax(0,1fr)!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:var(--paper)!important;
  box-shadow:0 13px 34px rgba(20,42,27,.08)!important;
}
.product-card--commerce .product-card__media-wrap{overflow:hidden}
.product-card--commerce .product-image{border-radius:0!important}
.product-card--commerce .product-copy{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
  height:100%!important;
  padding:17px 16px 16px!important;
}
.product-card--commerce .product-copy h3{min-height:2.35em!important}
.product-card--commerce .price-row{margin-top:10px!important;margin-bottom:0!important}
.product-card--commerce .product-card__commerce-actions{margin-top:auto!important;padding-top:16px!important}
.product-card--commerce .product-card__commerce-actions .btn{
  min-width:0!important;
  min-height:44px!important;
  padding:10px 9px!important;
  border-radius:10px!important;
  font-size:.61rem!important;
  line-height:1.2!important;
  letter-spacing:.065em!important;
}

/* The configured primary green is deliberately dark in the light theme. In
   dark mode it previously produced nearly invisible prices and outline buttons.
   A brighter dark-mode accent restores WCAG-friendly contrast. */
html[data-ui-theme="dark"] body.site-body{
  --green:#82c596!important;
  --green-hover:#9dd7ad!important;
  --button-text:#0b1710!important;
  --button-hover-text:#0b1710!important;
  --line:rgba(239,246,241,.16)!important;
  --line-strong:rgba(239,246,241,.28)!important;
}
html[data-ui-theme="dark"] body.site-body .site-header.is-scrolled{
  background:rgba(23,34,26,.96)!important;
  box-shadow:0 14px 38px rgba(0,0,0,.36)!important;
}
html[data-ui-theme="dark"] body.site-body .product-card--commerce{
  background:#17221a!important;
  border-color:rgba(238,246,240,.15)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.24)!important;
}
html[data-ui-theme="dark"] body.site-body .product-card--commerce h3,
html[data-ui-theme="dark"] body.site-body .product-card--commerce h3 a,
html[data-ui-theme="dark"] body.site-body .product-card--commerce .price-row strong{
  color:#f2f7f3!important;
}
html[data-ui-theme="dark"] body.site-body .product-card--commerce .product-category,
html[data-ui-theme="dark"] body.site-body .product-card--commerce .price-row del{
  color:#b5c5b8!important;
}
html[data-ui-theme="dark"] body.site-body .product-card--commerce .add-cart{
  border-color:#82c596!important;
  background:rgba(130,197,150,.09)!important;
  color:#dff3e5!important;
}
html[data-ui-theme="dark"] body.site-body .product-card--commerce .add-cart:hover{
  background:#82c596!important;
  color:#0b1710!important;
}
html[data-ui-theme="dark"] body.site-body .product-card--commerce .product-card__buy{
  background:linear-gradient(135deg,#82c596,#a3d9b1)!important;
  border-color:transparent!important;
  color:#0b1710!important;
  box-shadow:0 9px 22px rgba(130,197,150,.16)!important;
}
html[data-ui-theme="dark"] body.site-body .product-card__quick-view{
  border-color:rgba(255,255,255,.24)!important;
  background:rgba(20,31,23,.92)!important;
  color:#eef6f0!important;
}

@media (max-width:620px){
  .product-grid{gap:12px!important}
  .product-card--commerce{border-radius:13px!important}
  .product-card--commerce .product-copy{padding:14px 12px 13px!important}
  .product-card--commerce .product-copy h3{min-height:2.45em!important;font-size:1.02rem!important}
  .product-card--commerce .product-card__commerce-actions{grid-template-columns:1fr!important;gap:7px!important;padding-top:13px!important}
  .product-card--commerce .product-card__commerce-actions .btn{min-height:42px!important;font-size:.59rem!important}
}
@media (max-width:350px){
  .product-grid{grid-template-columns:1fr!important}
  .product-card--commerce .product-copy h3{min-height:0!important;font-size:1.12rem!important}
}