/* --------------------------------------------------------------------------
   DewyDaze v5.3 — Luxury Editorial Storefront
   Loaded after style.css so existing routes, templates and Admin controls keep
   their original behavior while the public layer gets a premium visual polish.
   -------------------------------------------------------------------------- */

:root {
  --dd-deep: #102e21;
  --dd-forest: #183d2b;
  --dd-ivory: #fbf8f1;
  --dd-champagne: #d6b478;
  --dd-stone: #d7c7ad;
  --dd-hairline: color-mix(in srgb, var(--ink) 12%, transparent);
  --dd-shadow: 0 22px 64px rgba(24, 48, 34, .13);
  --dd-shadow-soft: 0 14px 36px rgba(24, 48, 34, .08);
}

/* Base rhythm ---------------------------------------------------------------- */
body {
  background:
    radial-gradient(circle at 84% 7%, color-mix(in srgb, var(--gold) 9%, transparent), transparent 24rem),
    var(--cream);
}
.container { width: min(1320px, calc(100% - 56px)); }
.section { padding-block: clamp(72px, 9vw, 140px); }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.eyebrow { letter-spacing: .2em; font-size: .66rem; }
.eyebrow::before { width: 30px; }

/* Header --------------------------------------------------------------------- */
.site-header {
  background: color-mix(in srgb, var(--header-bg) 92%, transparent);
  backdrop-filter: blur(17px) saturate(105%);
  transition: box-shadow .25s ease, background .25s ease, min-height .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 11px 34px rgba(14, 35, 23, .10); }
.nav-wrap { min-height: 88px; }
.brand-mark { width: 42px; height: 42px; }
.brand-copy strong { letter-spacing: -.075em; }
.main-nav { gap: clamp(16px, 2vw, 34px); }
.main-nav a { letter-spacing: .08em; font-size: .67rem; }
.main-nav a::after { bottom: 25px; height: 2px; color: var(--gold); }
.nav-icon-button, .bag-button, .nav-toggle { border-radius: 50%; transition: background .2s ease, color .2s ease; }
.nav-icon-button:hover, .bag-button:hover, .nav-toggle:hover { background: color-mix(in srgb, var(--green) 7%, transparent); }
.bag-button b { background: var(--green); box-shadow: 0 0 0 2px var(--header-bg); }
.announcement { border-bottom: 1px solid color-mix(in srgb, #fff 14%, transparent); }

/* Button system -------------------------------------------------------------- */
.btn {
  min-height: 50px;
  padding: 13px 21px;
  border-radius: 7px;
  box-shadow: none;
}
.btn-dark, .btn-primary { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 11%, transparent); }
.btn-light { box-shadow: 0 13px 30px rgba(0, 0, 0, .10); }
.btn-hero-ghost { backdrop-filter: blur(8px); }
.btn:hover { box-shadow: 0 14px 28px rgba(19, 46, 30, .15); }

/* Full-screen editorial hero ------------------------------------------------- */
.home-slider,
.home-slider-track,
.home-slide {
  min-height: min(100svh, 980px);
}
.home-slider { background: var(--dd-deep); }
.home-slide::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 28, 18, .86) 0%, rgba(11, 35, 23, .65) 31%, rgba(10, 31, 20, .14) 70%, rgba(10, 31, 20, .12) 100%),
    linear-gradient(0deg, rgba(5, 21, 13, .28), transparent 42%);
}
.home-slide-image {
  object-position: 68% center;
  filter: saturate(.94) contrast(1.03);
  transform: scale(1.015);
  transition: transform 8s ease;
}
.home-slide.is-active .home-slide-image { transform: scale(1.06); }
.home-slide-scrim { background: transparent; }
.home-slide-content {
  align-items: center;
  padding-top: clamp(92px, 14vh, 160px);
  padding-bottom: clamp(112px, 16vh, 180px);
}
.hero-copy { max-width: min(660px, 51vw); }
.hero-copy .eyebrow {
  display: inline-flex;
  width: max-content;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.30);
  color: #fff;
  background: rgba(11, 36, 23, .12);
  backdrop-filter: blur(9px);
}
.hero-copy .eyebrow::before { display: none; }
.hero-copy h1 {
  max-width: 10.5ch;
  margin-top: 16px;
  font-size: clamp(3rem, 5.65vw, 6.6rem);
  line-height: .98;
  letter-spacing: -.062em;
}
.hero-copy > p:not(.eyebrow) {
  max-width: 47ch;
  margin-top: 25px;
  font-size: clamp(1rem, 1.2vw, 1.18rem);
}
.hero-actions { margin-top: 35px; }
.hero-float-card {
  position: relative;
  overflow: hidden;
  margin-top: 39px;
  padding: 14px 17px 15px;
  border-color: color-mix(in srgb, var(--gold) 70%, #fff);
  background: rgba(16, 46, 33, .44);
  box-shadow: 0 18px 38px rgba(0,0,0,.15);
}
.hero-float-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--gold);
}
.home-slider-navigation { bottom: clamp(30px, 4vw, 54px); }
.slider-arrow {
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(7px);
}
.home-slider-controls button { height: 6px; width: 22px; border-radius: 99px; }
.home-slider-controls button.is-active { width: 42px; background: var(--gold); }

/* Trust and campaign surface ------------------------------------------------- */
.trust-rail { margin: 0; background: var(--dd-deep); color: #fff; }
.trust-rail-grid { box-shadow: none; background: transparent; }
.trust-item { min-height: 104px; padding: 22px 28px; border-color: rgba(255,255,255,.15); }
.trust-item > .icon { color: var(--gold); font-size: 1.7rem; }
.trust-item strong { color: #fff; letter-spacing: .05em; font-size: .70rem; text-transform: uppercase; }
.trust-item small { margin-top: 4px; color: rgba(255,255,255,.72); }

.promotions-section { padding-top: clamp(28px, 5vw, 72px); }
.promo-grid { gap: clamp(16px, 2.2vw, 30px); }
.promo-card {
  min-height: clamp(390px, 42vw, 550px);
  border-radius: 0;
  background: var(--dd-deep);
  box-shadow: var(--dd-shadow-soft);
}
.promo-card img { filter: saturate(.88) contrast(1.02); }
.promo-overlay {
  background: linear-gradient(90deg, rgba(10,34,21,.80), rgba(10,34,21,.20) 70%), linear-gradient(0deg, rgba(0,0,0,.25), transparent 50%);
}
.promo-card-copy { max-width: 66%; padding: clamp(25px, 4vw, 48px); }
.promo-card-copy h2 { font-size: clamp(2rem, 3.5vw, 3.65rem); line-height: 1; }
.promo-card-copy b { color: var(--gold); }

/* Collection and product cards ------------------------------------------------ */
.section-head { gap: 30px; margin-bottom: 39px; }
.section-head h2 { max-width: 12ch; }
.product-grid { gap: clamp(18px, 2vw, 30px); }
.product-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--dd-hairline);
  border-radius: 0;
  background: var(--paper);
  box-shadow: 0 2px 0 rgba(255,255,255,.85) inset;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.product-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--green) 30%, transparent);
  box-shadow: var(--dd-shadow);
}
.product-image { aspect-ratio: 4 / 4.85; background: #eee9de; }
.product-image::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(11,33,21,.16), transparent);
}
.product-image img { object-position: center 45%; }
.product-card .badge {
  top: 14px;
  left: 14px;
  padding: 7px 9px;
  border-radius: 0;
  color: var(--dd-deep);
  background: #f8edd8;
  font-size: .60rem;
  letter-spacing: .11em;
}
.product-copy { padding: 20px 19px 21px; }
.product-category { color: var(--green); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.product-copy h3 { min-height: 2.25em; margin-top: 6px; font-size: clamp(1.22rem, 1.45vw, 1.52rem); }
.price-row { margin-top: 14px; }
.product-card .add-cart { width: 100%; margin-top: 18px; border-color: var(--green); color: var(--green); }
.product-card .add-cart:hover { background: var(--green); color: var(--button-text); }

.category-grid { gap: clamp(14px, 1.7vw, 25px); }
.category-card {
  min-height: clamp(260px, 24vw, 360px);
  border-radius: 0;
  background: var(--dd-deep);
  box-shadow: var(--dd-shadow-soft);
}
.category-card img { filter: saturate(.87) contrast(1.04); }
.category-overlay { background: linear-gradient(0deg, rgba(11,35,22,.79), rgba(11,35,22,.06) 73%); }
.category-card > div { left: 21px; right: 21px; bottom: 20px; }
.category-card > div > span { color: color-mix(in srgb, #fff 80%, var(--gold)); font-size: .62rem; letter-spacing: .15em; }
.category-card h3 { font-size: clamp(1.65rem, 2.2vw, 2.55rem); }
.category-card b { color: var(--gold); }

/* Content-builder editorial modules ----------------------------------------- */
.page-hero { min-height: min(66svh, 650px); }
.builder-hero-media img { object-position: 69% center; filter: saturate(.88) contrast(1.04); }
.page-hero-scrim { background: linear-gradient(90deg, rgba(8,29,19,.77), rgba(8,29,19,.37) 45%, rgba(8,29,19,.08) 100%); }
.builder-hero-inner { min-height: min(66svh, 650px); padding-block: 108px 92px; }
.builder-hero-copy { max-width: 640px; }
.builder-hero-copy h1 { max-width: 10ch; font-size: clamp(2.8rem, 5vw, 5.7rem); }
.builder-hero-copy > p:not(.eyebrow) { max-width: 46ch; color: rgba(255,255,255,.86); }
.ritual-strip { background: var(--dd-deep); }
.builder-cta-with-image .container { min-height: 490px; }
.builder-cta-image { min-height: 490px; filter: saturate(.85); }
.builder-cta-with-image .container > div { padding: clamp(38px, 6vw, 82px); }
.builder-cta-with-image .eyebrow, .builder-cta-with-image h2 { color: #fff; }
.builder-cta-with-image p { color: rgba(255,255,255,.75); }
.routine-card { background: var(--paper); border: 1px solid var(--dd-hairline); box-shadow: var(--dd-shadow-soft); }
.routine-card img { min-height: 430px; filter: saturate(.88); }
.guide-grid article { border-radius: 0; background: var(--paper); box-shadow: 0 2px 0 rgba(255,255,255,.85) inset; }
.guide-grid article > span { color: var(--gold); }

/* Shop, product, cart, checkout, account ------------------------------------ */
.shop-intro + .shop-layout, .shop-layout { padding-top: clamp(42px, 6vw, 78px); }
.shop-filter-desktop, .cart-full-page aside, .checkout-summary, .account-layout > section, .auth-card {
  border: 1px solid var(--dd-hairline);
  box-shadow: var(--dd-shadow-soft);
}
.filter-form fieldset { border-color: var(--dd-hairline); }
.product-detail { gap: clamp(34px, 7vw, 94px); }
.product-media { background: #ece7dc; }
.product-media img { min-height: 620px; object-position: center 42%; }
.product-info { padding-block: 15px; }
.product-info h1 { font-size: clamp(2.8rem, 5vw, 5.35rem); }
.product-price { margin-top: 18px; font-size: 1.3rem; }
.product-accordions details { border-color: var(--dd-hairline); }
.quantity-picker { border-color: var(--dd-hairline); border-radius: 0; }
.quantity-picker button { color: var(--green); }
.cart-full-page, .checkout-layout { padding-top: clamp(50px, 7vw, 92px); }
.cart-line, .summary-line { border-color: var(--dd-hairline); }
.checkout-summary { top: 112px; }
.payment-option { border-radius: 0; border-color: var(--dd-hairline); }
.payment-option:has(input:checked) { box-shadow: inset 4px 0 0 var(--gold), inset 0 0 0 1px var(--green); }
.contact-info-card { border-radius: 0; box-shadow: var(--dd-shadow-soft); }
.contact-info-card > .icon { color: var(--gold); }
.auth-page { background: radial-gradient(circle at 18% 13%, rgba(214,180,120,.22), transparent 25rem), var(--cream); }
.empty-state { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--gold) 6%, transparent)); }

/* Newsletter / footer -------------------------------------------------------- */
.newsletter { position: relative; overflow: hidden; background: var(--dd-deep); }
.newsletter::before {
  content: "";
  position: absolute;
  inset: -25% auto auto 58%;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(214,180,120,.34);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(214,180,120,.05), 0 0 0 112px rgba(214,180,120,.04);
}
.newsletter-inner { position: relative; }
.newsletter h2 { max-width: 12ch; }
.newsletter-form input { border-radius: 0; }
.site-footer { background: var(--footer-bg); }
.footer-grid { padding-block: clamp(64px, 8vw, 112px); }
.footer-brand img { filter: brightness(0) invert(1); }
.footer-intro > p, .footer-assurance span, .footer-contact a, .footer-address, .footer-menu a { color: color-mix(in srgb, var(--footer-text) 78%, transparent); }
.social-links a { border-radius: 50%; }

/* Responsive finishing ------------------------------------------------------- */
@media (max-width: 1000px) {
  .container { width: min(100% - 40px, 1320px); }
  .main-nav { gap: 12px; }
  .hero-copy { max-width: min(620px, 70vw); }
  .promo-card-copy { max-width: 72%; }
  .trust-item { padding-inline: 17px; }
}

@media (max-width: 820px) {
  .nav-wrap { min-height: 72px; }
  .main-nav { top: calc(72px + 35px); }
  .home-slider, .home-slider-track, .home-slide { min-height: 100svh; }
  .home-slide-image { object-position: 63% center; }
  .home-slide::after { background: linear-gradient(0deg, rgba(6,27,17,.89) 0%, rgba(6,27,17,.46) 57%, rgba(6,27,17,.17) 100%); }
  .home-slide-content { align-items: end; padding-top: 110px; padding-bottom: 125px; }
  .hero-copy { max-width: min(620px, 92vw); }
  .trust-rail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(odd) { border-left: 0; }
  .promo-card-copy { max-width: 80%; }
  .product-image { aspect-ratio: 4 / 4.6; }
  .builder-hero-inner { min-height: 490px; }
  .builder-cta-image { min-height: 360px; }
}

@media (max-width: 520px) {
  .container { width: calc(100% - 28px); }
  .brand-mark { width: 32px; height: 32px; }
  .hero-copy h1 { max-width: 11ch; font-size: clamp(3rem, 13vw, 4.35rem); }
  .hero-copy > p:not(.eyebrow) { margin-top: 17px; }
  .hero-actions { margin-top: 25px; }
  .hero-float-card { display: none; }
  .home-slider-navigation { bottom: 24px; }
  .slider-arrow { width: 35px; height: 35px; }
  .trust-rail-grid { grid-template-columns: 1fr; }
  .trust-item { min-height: 0; padding: 16px 17px; border-left: 0; }
  .promo-card { min-height: 380px; }
  .promo-card-copy { max-width: 94%; padding: 24px; }
  .product-grid { gap: 12px; }
  .product-copy { padding: 15px 14px 16px; }
  .product-copy h3 { font-size: 1.13rem; }
  .product-card .add-cart { min-height: 43px; padding-inline: 9px; }
  .category-card { min-height: 205px; }
  .category-card > div { left: 14px; right: 14px; bottom: 13px; }
  .page-hero { min-height: 450px; }
  .builder-hero-inner { min-height: 450px; padding-block: 86px 60px; }
  .builder-hero-copy h1 { font-size: clamp(2.8rem, 12vw, 4.1rem); }
  .newsletter::before { left: 38%; width: 280px; height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-slide-image, .home-slide.is-active .home-slide-image { transform: none; }
}