:root {
  color-scheme: light;
  --cream: #fbf7ed;
  --sand: #f3ead8;
  --ink: #234638;
  --forest: #1f4a3a;
  --forest-bright: #356750;
  --gold: #d7a94f;
  --card: rgba(255, 253, 248, 0.88);
  --shadow-soft: 0 10px 35px -22px rgba(25, 57, 43, 0.32);
  --shadow-lift: 0 24px 60px -25px rgba(25, 57, 43, 0.42);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Textareas keep their cols= attribute intrinsic width and can force grid
   tracks wider than the viewport on phones — cap them at their container. */
textarea { max-width: 100%; }

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .58; }
section[id] { scroll-margin-top: 104px; }

:focus-visible { outline: 3px solid #d7a94f; outline-offset: 3px; }
.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; }
.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; transform: translateY(-150%); border-radius: .75rem; background: var(--gold); color: var(--forest); padding: .7rem 1rem; font-weight: 700; transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); }

.site-header { color: var(--ink); }
.nav-shell { background: color-mix(in srgb, var(--cream) 87%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid transparent; }
.site-header.is-scrolled .nav-shell { background: color-mix(in srgb, var(--cream) 87%, transparent); backdrop-filter: blur(18px); border-color: rgba(35, 70, 56, .1); box-shadow: 0 5px 25px -20px rgba(25, 57, 43, .45); }
.nav-link { color: color-mix(in srgb, var(--ink) 83%, transparent); font-size: .875rem; font-weight: 600; position: relative; transition: color .2s ease; }
.nav-link::after { background: var(--gold); bottom: -.5rem; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; width: 100%; }
.nav-link:hover, .nav-link:focus-visible { color: var(--forest); }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }
.mobile-menu { display: grid; gap: .25rem; }
.mobile-menu a { border-radius: .7rem; font-weight: 600; padding: .7rem .4rem; transition: background .2s ease, color .2s ease; }
.mobile-menu a:hover, .mobile-menu a:focus-visible { background: rgba(215, 169, 79, .14); color: var(--forest); }

.button { align-items: center; border: 0; border-radius: 999px; display: inline-flex; font-size: .875rem; font-weight: 700; gap: .5rem; justify-content: center; min-height: 2.8rem; padding: .7rem 1.15rem; transition: transform .25s var(--ease-out), box-shadow .25s ease, background .25s ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-gold { background: linear-gradient(110deg, #e2bd6d, #c99135); box-shadow: 0 10px 24px -12px rgba(129, 86, 17, .7); color: #284738; }
.button-gold:hover { box-shadow: 0 16px 28px -13px rgba(129, 86, 17, .8); }
.button-forest { background: var(--forest); box-shadow: 0 10px 24px -15px rgba(22, 66, 48, .9); color: var(--cream); }
.button-forest:hover { background: #2d5a48; }
.button-cream { background: rgba(255, 252, 245, .14); border: 1px solid rgba(255, 252, 245, .42); color: var(--cream); backdrop-filter: blur(10px); }
.button-cream:hover { background: rgba(255, 252, 245, .24); }
.button-small { font-size: .78rem; min-height: 2.35rem; padding: .5rem .75rem; }
.button-outline { border: 1px solid rgba(35, 70, 56, .28); color: var(--forest); }
.button-outline:hover { background: rgba(35, 70, 56, .07); border-color: var(--forest); }
.icon-button { align-items: center; background: transparent; border: 0; border-radius: 999px; color: inherit; display: inline-flex; height: 2.75rem; justify-content: center; transition: background .2s ease, color .2s ease, transform .2s var(--ease-out); width: 2.75rem; }
.icon-button:hover { background: rgba(35, 70, 56, .09); transform: translateY(-1px); }
.icon-button-dark { background: rgba(255, 253, 245, .12); border: 1px solid rgba(255, 253, 245, .25); color: var(--cream); backdrop-filter: blur(10px); }
.icon-button-dark:hover { background: rgba(255, 253, 245, .24); }
.icon-button-outline { border: 1px solid rgba(35, 70, 56, .16); color: var(--forest); }
.icon-button-outline:hover { background: rgba(35, 70, 56, .08); }

.hero { background: var(--forest); }
.hero-slide { opacity: 0; pointer-events: none; transition: opacity 1.1s ease; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
.hero-image { height: 112%; object-fit: cover; transform: translateY(var(--hero-parallax, 0)) scale(1.02); transition: transform 7s var(--ease-out); width: 100%; }
.hero-slide.is-active .hero-image { transform: translateY(var(--hero-parallax, 0)) scale(1.08); }
.hero-overlay { background: linear-gradient(90deg, rgba(17, 52, 39, .92) 0%, rgba(22, 62, 46, .67) 42%, rgba(20, 55, 42, .13) 75%); }
.hero-copy { left: max(1.25rem, calc((100vw - 80rem) / 2 + 1.5rem)); max-width: 36rem; padding-right: 1.25rem; position: absolute; top: 52%; transform: translateY(-44%); z-index: 1; }
.hero-copy h1 { color: var(--cream); font-family: var(--font-display); font-size: clamp(2.75rem, 5.3vw, 4.5rem); font-weight: 600; letter-spacing: -.04em; line-height: .99; margin-top: 1.25rem; }
.hero-copy p { color: rgba(255, 253, 245, .8); font-size: 1rem; line-height: 1.7; margin-top: 1.25rem; max-width: 32rem; }
.eyebrow, .eyebrow-dark { display: inline-flex; font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.eyebrow { color: #a47424; }
.eyebrow-dark { align-items: center; border: 1px solid rgba(225, 187, 100, .4); border-radius: 999px; color: #efcb78; gap: .4rem; padding: .45rem .75rem; background: rgba(255,255,255,.05); backdrop-filter: blur(8px); }
.hero-dot, .review-dot { border: 0; border-radius: 999px; cursor: pointer; height: .38rem; transition: background .25s ease, width .3s var(--ease-out); width: 1.25rem; }
.hero-dot { background: rgba(255, 253, 245, .38); }
.hero-dot.is-active { background: var(--gold); width: 2.8rem; }
.review-dot { background: rgba(31, 74, 58, .24); }
.review-dot.is-active { background: var(--forest); width: 2.5rem; }

.section-heading { margin-inline: auto; max-width: 42rem; text-align: center; }
.section-heading h2 { color: var(--forest); font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.12; margin-top: .65rem; }
.section-heading p { color: rgba(35, 70, 56, .68); line-height: 1.7; margin-top: 1rem; }
.section-heading-dark h2 { color: var(--cream); }
.section-heading-dark p { color: rgba(255, 253, 245, .72); }

.product-card { background: rgba(255, 254, 250, .87); border: 1px solid rgba(35, 70, 56, .11); border-radius: 1.5rem; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; min-width: 0; overflow: hidden; transition: transform .42s var(--ease-out), box-shadow .42s ease; }
.product-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-.55rem); }
.product-card-dark { background: rgba(255, 253, 245, .07); border-color: rgba(255, 253, 245, .14); box-shadow: none; color: var(--cream); backdrop-filter: blur(12px); }
.product-card-dark:hover { box-shadow: 0 25px 45px -30px rgba(0, 0, 0, .75); }
.product-image-wrap { aspect-ratio: 1; background: var(--sand); overflow: hidden; position: relative; }
.product-image-wrap img { height: 100%; object-fit: cover; transition: transform .65s var(--ease-out); width: 100%; }
.product-card:hover .product-image-wrap img { transform: scale(1.08); }
.discount-badge { background: linear-gradient(110deg, #e4be70, #ca943a); border-radius: 999px; box-shadow: 0 5px 14px -8px rgba(67, 49, 12, .9); color: var(--forest); font-size: .68rem; font-weight: 800; left: 1rem; padding: .38rem .65rem; position: absolute; top: 1rem; }
.product-actions { display: flex; flex-direction: column; gap: .5rem; opacity: 0; position: absolute; right: 1rem; top: 1rem; transform: translateX(3rem); transition: opacity .3s ease, transform .3s var(--ease-out); }
.product-card:hover .product-actions, .product-card:focus-within .product-actions { opacity: 1; transform: translateX(0); }
.round-action { align-items: center; background: rgba(255, 253, 247, .96); border: 0; border-radius: 999px; box-shadow: 0 5px 14px -7px rgba(25, 57, 43, .35); color: var(--forest); display: inline-flex; height: 2.5rem; justify-content: center; transition: background .2s ease, color .2s ease, transform .2s var(--ease-out); width: 2.5rem; }
.round-action:hover, .round-action[aria-pressed="true"] { background: var(--forest); color: var(--cream); transform: scale(1.08); }
.product-tag { color: #8a6726; font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.product-card h3 { color: var(--forest); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.25; margin-top: .55rem; }
.product-card-dark h3 { color: var(--cream); }
.rating { align-items: center; color: var(--gold); display: flex; font-size: .8rem; gap: .25rem; letter-spacing: .05em; margin-top: .75rem; }
.rating small { color: rgba(35, 70, 56, .58); font-size: .72rem; font-weight: 600; letter-spacing: 0; margin-left: .15rem; }
.product-card-dark .rating small { color: rgba(255, 253, 245, .6); }
.price { color: var(--forest); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.product-card-dark .price { color: var(--cream); }
.price del { color: rgba(35, 70, 56, .5); font-family: var(--font-sans); font-size: .78rem; font-weight: 500; margin-left: .3rem; }
.product-card-dark .price del { color: rgba(255, 253, 245, .44); }

.feature-card { background: rgba(255, 253, 247, .62); border: 1px solid rgba(35, 70, 56, .11); border-radius: 1.5rem; box-shadow: var(--shadow-soft); height: 100%; padding: 1.75rem; transition: transform .42s var(--ease-out), box-shadow .42s ease; backdrop-filter: blur(13px); }
.feature-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-.45rem); }
.feature-icon { align-items: center; background: linear-gradient(135deg, var(--forest), var(--forest-bright)); border-radius: 1rem; color: var(--cream); display: flex; height: 3rem; justify-content: center; transition: transform .35s var(--ease-out); width: 3rem; }
.feature-card:hover .feature-icon { transform: scale(1.1) rotate(-3deg); }
.feature-card h3 { color: var(--forest); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-top: 1.2rem; }
.feature-card p { color: rgba(35, 70, 56, .67); font-size: .89rem; line-height: 1.65; margin-top: .55rem; }

.promo-banner { box-shadow: var(--shadow-lift); min-height: 420px; position: relative; }
.promo-image { height: 118%; inset: 0; object-fit: cover; position: absolute; transform: translateY(var(--promo-parallax, 0)); width: 100%; }
.promo-overlay { background: linear-gradient(90deg, rgba(17, 52, 39, .92), rgba(20, 58, 44, .61) 53%, rgba(17, 52, 39, .09)); }

.review-card { background: rgba(255, 253, 248, .73); border: 1px solid rgba(35, 70, 56, .12); border-radius: 1.5rem; box-shadow: var(--shadow-soft); padding: clamp(2rem, 5vw, 3.25rem); }
.review-card blockquote { color: var(--forest); font-family: var(--font-display); font-size: clamp(1.3rem, 2.5vw, 1.75rem); line-height: 1.55; margin-top: 1.4rem; }
.review-card figcaption { align-items: end; display: flex; justify-content: space-between; margin-top: 2rem; gap: 1rem; }
.review-card figcaption strong { color: var(--forest); display: block; font-size: .95rem; }
.review-card figcaption small { color: rgba(35, 70, 56, .6); display: block; font-size: .8rem; margin-top: .15rem; }

.faq-item { background: rgba(255, 254, 250, .72); border: 1px solid rgba(35, 70, 56, .12); border-radius: 1rem; box-shadow: var(--shadow-soft); overflow: hidden; }
.faq-item h3 button { align-items: center; background: transparent; border: 0; color: var(--forest); display: flex; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; gap: 1rem; justify-content: space-between; padding: 1.25rem 1.35rem; text-align: left; width: 100%; }
.faq-chevron { flex: none; transition: transform .32s var(--ease-out); }
.faq-item h3 button[aria-expanded="true"] .faq-chevron { transform: rotate(90deg); }
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease-out), padding .38s var(--ease-out); }
.faq-panel > div { overflow: hidden; }
.faq-panel p { color: rgba(35, 70, 56, .68); font-size: .9rem; line-height: 1.7; padding: 0 1.35rem; }
.faq-panel.is-open { grid-template-rows: 1fr; padding-bottom: 1.25rem; }

.gallery-tile { aspect-ratio: 1; border-radius: 1rem; display: block; overflow: hidden; position: relative; box-shadow: var(--shadow-soft); }
.gallery-tile img { height: 100%; object-fit: cover; transition: transform .65s var(--ease-out); width: 100%; }
.gallery-tile > span:first-of-type { align-items: center; background: rgba(19, 57, 43, .65); color: var(--cream); display: flex; inset: 0; justify-content: center; opacity: 0; position: absolute; transition: opacity .3s ease; }
.gallery-tile:hover img, .gallery-tile:focus-visible img { transform: scale(1.1); }
.gallery-tile:hover > span:first-of-type, .gallery-tile:focus-visible > span:first-of-type { opacity: 1; }

.newsletter { background: linear-gradient(135deg, #1f4a3a 0%, #326550 56%, #244d3e 100%); box-shadow: var(--shadow-lift); position: relative; }
.newsletter-orb { background: rgba(224, 183, 93, .18); border-radius: 999px; filter: blur(45px); height: 17rem; left: -5rem; pointer-events: none; position: absolute; top: -5rem; width: 17rem; }
.newsletter input { background: rgba(255, 253, 245, .12); border: 1px solid rgba(255, 253, 245, .28); border-radius: 999px; color: var(--cream); font-size: .9rem; min-height: 2.8rem; outline: none; padding: .7rem 1rem; width: 100%; }
.newsletter input::placeholder { color: rgba(255, 253, 245, .55); }
.newsletter input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(215, 169, 79, .28); }

footer .footer-title { color: var(--gold); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
footer ul { margin-top: .8rem; }
footer li + li { margin-top: .45rem; }
footer li a { color: rgba(255, 253, 245, .69); font-size: .88rem; transition: color .2s ease; }
footer li a:hover, footer li a:focus-visible { color: var(--gold); }

dialog { border: 0; color: var(--ink); margin: auto; padding: 0; }
dialog::backdrop { background: rgba(11, 31, 24, .58); backdrop-filter: blur(3px); }
.dialog-panel { background: var(--cream); }
.side-dialog { height: min(100dvh, 920px); margin-right: 0; max-width: min(100%, 29rem); width: 100%; }
.side-dialog .dialog-panel { min-height: 100%; }
.center-dialog { border-radius: 1.5rem; max-width: min(calc(100% - 2rem), 40rem); width: 100%; }
.center-dialog .dialog-panel { min-height: 0; padding: clamp(1.25rem, 4vw, 2rem); position: relative; }
.search-field { align-items: center; background: rgba(35, 70, 56, .06); border: 1px solid rgba(35, 70, 56, .14); border-radius: .85rem; color: var(--forest); display: flex; gap: .6rem; padding: 0 .85rem; }
.search-field input { background: transparent; border: 0; color: var(--forest); min-height: 3rem; outline: none; width: 100%; }
.search-result { align-items: center; border-radius: .9rem; display: grid; gap: .75rem; grid-template-columns: 3.5rem 1fr auto; padding: .6rem; transition: background .2s ease; }
.search-result:hover { background: rgba(35, 70, 56, .07); }
.search-result img { aspect-ratio: 1; border-radius: .7rem; height: 3.5rem; object-fit: cover; width: 3.5rem; }
.search-result h3 { color: var(--forest); font-family: var(--font-display); font-weight: 600; line-height: 1.25; }
.search-result p { color: rgba(35, 70, 56, .6); font-size: .78rem; margin-top: .2rem; }
.quick-view-panel { max-width: 48rem; }

.cart-empty { align-items: center; color: rgba(35, 70, 56, .66); display: flex; flex-direction: column; justify-content: center; min-height: 16rem; text-align: center; }
.cart-empty svg { color: var(--gold); height: 2.5rem; width: 2.5rem; }
.cart-item { align-items: start; border-bottom: 1px solid rgba(35, 70, 56, .1); display: grid; gap: .75rem; grid-template-columns: 4.5rem 1fr auto; padding: .85rem 0; }
.cart-item img { aspect-ratio: 1; border-radius: .75rem; height: 4.5rem; object-fit: cover; width: 4.5rem; }
.cart-item h3 { color: var(--forest); font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.2; }
.cart-item p { color: rgba(35, 70, 56, .68); font-size: .82rem; margin-top: .3rem; }
.quantity-control { align-items: center; border: 1px solid rgba(35, 70, 56, .15); border-radius: 999px; display: inline-flex; margin-top: .65rem; overflow: hidden; }
.quantity-control button { align-items: center; background: transparent; border: 0; color: var(--forest); display: inline-flex; height: 1.75rem; justify-content: center; width: 1.75rem; }
.quantity-control button:hover { background: rgba(35, 70, 56, .08); }
.quantity-control output { color: var(--forest); font-size: .8rem; font-weight: 700; min-width: 1.5rem; text-align: center; }
.cart-remove { align-items: center; background: transparent; border: 0; color: rgba(35, 70, 56, .5); display: inline-flex; justify-content: center; padding: .3rem; }
.cart-remove:hover { color: #a83939; }

.toast { background: var(--forest); border-radius: .9rem; bottom: 1.25rem; box-shadow: 0 15px 35px -16px rgba(4, 23, 14, .75); color: var(--cream); left: 50%; max-width: calc(100% - 2rem); opacity: 0; padding: .85rem 1rem; pointer-events: none; position: fixed; transform: translate(-50%, 1rem); transition: opacity .25s ease, transform .25s var(--ease-out); width: max-content; z-index: 70; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.js [data-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
/* Direction variants — set data-reveal-variant="left|right|zoom" in the markup.
   Pairs with is-revealed below: after reveal the transform resets either way. */
.js [data-reveal][data-reveal-variant="left"] { transform: translateX(-2rem); }
.js [data-reveal][data-reveal-variant="right"] { transform: translateX(2rem); }
.js [data-reveal][data-reveal-variant="zoom"] { transform: scale(.96); }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (max-width: 640px) {
  /* Shorter travel on small screens — long fades feel sluggish on phones. */
  .js [data-reveal]:not(.is-revealed) { transform: translateY(1rem); }
  .js [data-reveal][data-reveal-variant="left"]:not(.is-revealed) { transform: translateX(-1rem); }
  .js [data-reveal][data-reveal-variant="right"]:not(.is-revealed) { transform: translateX(1rem); }
}
/* Balanced headline wrapping reads better on narrow screens. */
.section-heading h2, .hero-copy h1, .review-card blockquote, .newsletter h2 { text-wrap: balance; }

@media (max-width: 640px) {
  .hero-copy { top: 49%; }
  .hero-overlay { background: linear-gradient(90deg, rgba(17, 52, 39, .91), rgba(21, 61, 45, .61) 75%, rgba(17, 52, 39, .35)); }
  .product-actions { opacity: 1; transform: none; }
  .round-action { height: 2.25rem; width: 2.25rem; }
  .gallery-tile > span:first-of-type { background: rgba(19, 57, 43, .36); opacity: 1; }
  .review-card figcaption { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .hero-image, .hero-slide.is-active .hero-image { transform: none; }
}

/* Header responsive show/hide is enforced here, not with Tailwind utilities:
   Tailwind v4 ships its utilities inside @layer, and unlayered styles (this
   file) always win the cascade — so `md:hidden` on .icon-button or
   .mobile-menu would lose to their display rules and never hide them. */
#mobile-menu[hidden] { display: none; }
/* Open animation: replays each time the hidden attribute is removed, since
   the element re-enters layout from display:none. */
#mobile-menu:not([hidden]) { animation: menu-in .32s var(--ease-out); }
#mobile-menu:not([hidden]) a { animation: menu-link-in .38s var(--ease-out) backwards; }
#mobile-menu:not([hidden]) a:nth-child(2) { animation-delay: .06s; }
#mobile-menu:not([hidden]) a:nth-child(3) { animation-delay: .12s; }
#mobile-menu:not([hidden]) a:nth-child(4) { animation-delay: .18s; }
#mobile-menu:not([hidden]) a:nth-child(5) { animation-delay: .24s; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-.6rem); } to { opacity: 1; transform: none; } }
@keyframes menu-link-in { from { opacity: 0; transform: translateX(-.5rem); } to { opacity: 1; transform: none; } }
@media (min-width: 768px) {
  [data-menu-toggle] { display: none; }
  #mobile-menu { display: none; }
}
@media (max-width: 639.98px) {
  .site-header .button { display: none; } /* "Shop now" is a sm:+ element */
}

/* Checkout responsive fallbacks (works even if Tailwind utilities are not applied) */
.checkout-page .mx-auto.max-w-7xl { width: 100%; }
.checkout-page .grid { display: grid; gap: 1.25rem; }
.checkout-page form { width: 100%; box-sizing: border-box; }
.checkout-page aside img, .checkout-page img { max-width: 100%; height: auto; }

@media (min-width: 768px) {
  .checkout-page .grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1.5rem; align-items: start; }
  .checkout-page aside { position: sticky; top: 28px; }
}

@media (max-width: 767.98px) {
  /* Stack form and order summary vertically on small devices */
  .checkout-page .grid { grid-template-columns: 1fr; }
  .checkout-page aside { order: -1; }
  .checkout-page .space-y-5 > * + * { margin-top: 1.25rem; }
}

/* Ensure form fields are never wider than their container */
.checkout-page input, .checkout-page textarea, .checkout-page select { max-width: 100%; box-sizing: border-box; }