:root {
  --black: #050302;
  --graphite: #11100f;
  --bronze: #9b6a3c;
  --amber: #ff9a3c;
  --ember: #ff4d1f;
  --cream: #f4eadc;
  --muted: rgba(244,234,220,.68);
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; background: var(--black); }
body { margin: 0; overflow-x: hidden; color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: #fff; color: #000; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1rem, 2.4vw, 2rem) clamp(1rem, 4vw, 4rem);
  pointer-events: none;
}
.site-header a { pointer-events: auto; }
.site-logo, .cart-pill {
  display: inline-flex; align-items: center; gap: .65rem;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(255,255,255,.055); backdrop-filter: blur(18px);
  padding: .7rem .9rem; color: rgba(255,255,255,.82);
  letter-spacing: .12em; text-transform: uppercase; font-size: .74rem; font-weight: 800;
}
.site-logo__ember { width: .6rem; aspect-ratio: 1; border-radius: 50%; background: var(--ember); box-shadow: 0 0 24px rgba(255,77,31,.85); }
.site-nav { display: flex; gap: 1.2rem; color: rgba(255,255,255,.72); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.site-nav a { transition: color .24s ease; }
.site-nav a:hover { color: var(--amber); }
.cart-pill span { display: grid; place-items: center; min-width: 1.35rem; height: 1.35rem; border-radius: 99px; background: var(--amber); color: #1a0d05; }

.cinema-scroll { height: 1120vh; position: relative; background: var(--black); }
.scene-viewport { position: relative; min-height: 100vh; overflow: hidden; background:
  radial-gradient(circle at 50% 36%, rgba(255,160,62,.13), transparent 23%),
  radial-gradient(circle at 21% 78%, rgba(255,77,31,.18), transparent 20%),
  radial-gradient(circle at 85% 55%, rgba(155,106,60,.18), transparent 24%),
  linear-gradient(135deg, #020101, #11100f 62%, #050302);
}
.noise-layer { pointer-events: none; position: absolute; inset: 0; z-index: 7; opacity: .13; mix-blend-mode: soft-light; background-image:
  linear-gradient(115deg, rgba(255,255,255,.05), transparent 28%),
  repeating-radial-gradient(circle at 17% 31%, rgba(255,255,255,.32) 0 1px, transparent 1px 5px);
}
.depth-halo { position: absolute; width: 42rem; aspect-ratio: 1; border-radius: 999px; filter: blur(64px); opacity: .34; pointer-events: none; }
.depth-halo-a { left: -12rem; bottom: -15rem; background: rgba(255,77,31,.24); }
.depth-halo-b { right: -15rem; top: 24%; background: rgba(255,154,60,.18); }
.depth-halo-c { left: 42%; top: -18rem; background: rgba(244,234,220,.12); }

.scene-topbar { position: absolute; z-index: 5; top: clamp(4.6rem, 8vw, 6.5rem); left: clamp(1rem, 4vw, 4rem); right: clamp(1rem, 4vw, 4rem); display: flex; justify-content: space-between; color: rgba(255,255,255,.68); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.brand-pill { display: inline-flex; align-items: center; gap: .65rem; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; padding: .65rem .85rem; background: rgba(255,255,255,.045); backdrop-filter: blur(18px); }
.brand-pill span { width: .58rem; aspect-ratio: 1; border-radius: 50%; background: var(--ember); box-shadow: 0 0 22px rgba(255,77,31,.85); }
.caption-stack { position: absolute; z-index: 4; top: clamp(7.5rem, 19vh, 12rem); left: 50%; width: min(80vw, 62rem); transform: translateX(-50%); text-align: center; min-height: 9rem; }
.caption-frame { position: absolute; inset: 0; margin: 0; font-size: clamp(2.25rem, 5.8vw, 5.8rem); line-height: .96; font-weight: 820; letter-spacing: -.055em; text-wrap: balance; color: #fff; text-shadow: 0 0 34px rgba(255,154,60,.18); }
.progress-rail { position: absolute; z-index: 5; right: clamp(1rem, 3.2vw, 3.5rem); top: 25vh; width: 1px; height: 56vh; background: rgba(255,255,255,.12); }
.progress-rail span { display: block; width: 100%; height: 100%; background: linear-gradient(var(--cream), var(--amber), var(--ember)); }

.board-rig { position: absolute; inset: 0; display: grid; place-items: center; perspective: 980px; perspective-origin: 50% 55%; }
.website-board { position: relative; width: min(78vw, 78rem); aspect-ratio: 16/9; overflow: visible; border: 1px solid rgba(255,255,255,.2); background: #efe5d6; color: #17110d; box-shadow: 0 44px 140px rgba(0,0,0,.74), 0 0 90px rgba(255,105,28,.18); transform-style: preserve-3d; will-change: transform; }
.website-board::before { content: ""; position: absolute; inset: -1px; z-index: 4; pointer-events: none; background: linear-gradient(105deg, rgba(255,255,255,.24), transparent 34%, rgba(255,154,60,.12) 68%, transparent), radial-gradient(circle at 55% 45%, transparent 56%, rgba(0,0,0,.25)); mix-blend-mode: soft-light; }
.board-edge { position: absolute; background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(24,17,12,.9)); transform-origin: left center; opacity: .62; }
.board-edge-right { top: 0; right: -.55rem; width: .55rem; height: 100%; transform: rotateY(68deg); }
.board-edge-bottom { left: 0; bottom: -.55rem; width: 100%; height: .55rem; transform: rotateX(-68deg); }
.board-chrome { position: absolute; z-index: 3; inset: 0 0 auto; height: 3.2rem; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; color: rgba(23,17,13,.64); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.chrome-brand { font-weight: 900; color: #17110d; }
.chrome-nav { display: flex; gap: 1.3rem; }
.slide-mask { position: absolute; inset: 0; overflow: hidden; }
.slide-track { display: flex; width: 900%; height: 100%; will-change: transform; }
.cinema-slide { position: relative; flex: 0 0 11.111%; height: 100%; overflow: hidden; padding: clamp(4.7rem, 7vw, 7rem) clamp(1.4rem, 4vw, 4rem) clamp(1.5rem, 3vw, 3rem); background:
  radial-gradient(circle at 70% 42%, rgba(255,213,152,.58), transparent 26%),
  linear-gradient(135deg, #f4ecdf, #d7c6ae 58%, #b99672);
}
.fireplace-slide::after { content: ""; position: absolute; inset: auto 8% 9% 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(23,17,13,.2), transparent); }
.slide-copy, .series-copy { position: relative; z-index: 2; width: min(42%, 31rem); }
.eyebrow { margin: 0 0 .9rem; color: rgba(23,17,13,.52); font-size: .74rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.slide-copy h2, .series-copy h2, .contact-panel h2, .ai-panel h2 { margin: 0; font-size: clamp(2rem, 4vw, 5rem); line-height: .94; letter-spacing: -.055em; font-weight: 860; }
.slide-copy p, .series-copy p, .contact-panel p, .ai-panel p { margin: 1rem 0 0; color: rgba(23,17,13,.64); font-size: clamp(.95rem, 1.2vw, 1.1rem); line-height: 1.55; }
.button-row { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.4rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; border: 1px solid #17110d; border-radius: 999px; padding: .78rem 1.1rem; background: #17110d; color: var(--cream); font-weight: 900; letter-spacing: .04em; transition: transform .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(23,17,13,.22); }
.button--ghost { background: rgba(255,255,255,.38); color: #17110d; backdrop-filter: blur(12px); }

.hero-fireplace { position: absolute; right: 7%; top: 28%; width: 45%; aspect-ratio: 1.75; border: 1px solid rgba(23,17,13,.18); background: linear-gradient(#19110c, #050302); box-shadow: inset 0 0 0 10px rgba(255,255,255,.08), 0 36px 60px rgba(23,17,13,.24); overflow: hidden; }
.flame-bed { position: absolute; inset: auto 7% 10% 7%; height: 44%; background: radial-gradient(ellipse at bottom, rgba(255,154,60,.45), transparent 70%); filter: blur(.2px); }
.flame-bed i { position: absolute; bottom: 0; width: 18%; height: 75%; border-radius: 50% 50% 44% 44%; background: radial-gradient(circle at 50% 85%, #fff3bc 0 8%, #ffb13d 24%, #ff4d1f 54%, transparent 72%); animation: flameDance 1.8s ease-in-out infinite alternate; transform-origin: bottom; }
.flame-bed i:nth-child(1) { left: 7%; animation-delay: -.2s; }
.flame-bed i:nth-child(2) { left: 31%; height: 96%; animation-delay: -.7s; }
.flame-bed i:nth-child(3) { left: 55%; height: 84%; animation-delay: -.4s; }
.flame-bed i:nth-child(4) { left: 76%; height: 68%; animation-delay: -.9s; }
@keyframes flameDance { from { transform: scaleY(.82) skewX(-5deg); opacity: .78; } to { transform: scaleY(1.12) skewX(6deg); opacity: 1; } }

.collection-grid, .benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; height: 62%; align-items: end; }
.collection-grid a, .benefit-grid article { min-height: 15rem; padding: 1.2rem; border: 1px solid rgba(23,17,13,.14); background: rgba(255,255,255,.34); backdrop-filter: blur(18px); box-shadow: 0 24px 50px rgba(23,17,13,.12); font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 860; letter-spacing: -.04em; }
.benefit-grid strong { display: block; font-size: clamp(2rem, 4vw, 4.5rem); line-height: .9; }
.benefit-grid span { color: rgba(23,17,13,.58); font-size: .9rem; line-height: 1.35; }
.slide-footer-title { position: absolute; left: 1.4rem; bottom: 1.1rem; font-size: clamp(2.2rem, 6vw, 6.4rem); line-height: .86; font-weight: 860; letter-spacing: -.07em; color: rgba(23,17,13,.8); }
.series-products { position: absolute; right: 4%; top: 22%; width: 52%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.seed-product { min-height: 16rem; border: 1px solid rgba(23,17,13,.13); background: rgba(255,255,255,.38); backdrop-filter: blur(16px); overflow: hidden; box-shadow: 0 24px 45px rgba(23,17,13,.12); }
.seed-product img { width: 100%; aspect-ratio: 1.35; object-fit: cover; }
.seed-product__body { padding: .8rem; }
.seed-product h3 { margin: 0 0 .6rem; font-size: .9rem; line-height: 1.15; letter-spacing: -.025em; }
.price-row { display: flex; gap: .5rem; align-items: baseline; color: #17110d; font-weight: 900; }
.price-row s { color: rgba(23,17,13,.45); font-weight: 700; }
.seed-product a { margin-top: .65rem; font-size: .74rem; }

.ai-panel { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1rem; align-items: center; height: 100%; }
.ai-chat { border: 1px solid rgba(23,17,13,.14); background: rgba(255,255,255,.44); backdrop-filter: blur(18px); min-height: 65%; padding: 1rem; display: grid; grid-template-rows: 1fr auto auto; gap: .8rem; }
.ai-messages { display: grid; align-content: end; gap: .6rem; max-height: 19rem; overflow: auto; }
.ai-msg { padding: .75rem .85rem; border-radius: .9rem; background: rgba(23,17,13,.08); color: #17110d; line-height: 1.4; }
.ai-msg.user { margin-left: auto; background: #17110d; color: var(--cream); }
.ai-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.ai-options button, .ai-input button { border: 0; border-radius: 999px; background: #17110d; color: var(--cream); padding: .65rem .85rem; font-weight: 850; cursor: pointer; }
.ai-input { display: flex; gap: .5rem; }
.ai-input input { min-width: 0; flex: 1; border: 1px solid rgba(23,17,13,.15); background: rgba(255,255,255,.55); color: #17110d; border-radius: 999px; padding: .75rem .9rem; }
.contact-panel { width: min(72%, 46rem); text-align: center; margin: auto; }
.contact-panel a { display: inline-flex; margin-top: 1.5rem; padding: .9rem 1.2rem; border-radius: 999px; color: var(--cream); background: #17110d; box-shadow: 0 16px 35px rgba(23,17,13,.24); }
.contact-grid { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.contact-grid span { padding: .8rem; border: 1px solid rgba(23,17,13,.13); color: rgba(23,17,13,.62); text-align: center; font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }

.catalog-band, .shopify-section-main { padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 5vw, 5rem); background: #080504; }
.catalog-band h2, .page-title { margin: 0 0 2rem; font-size: clamp(2.5rem, 6vw, 7rem); line-height: .9; letter-spacing: -.06em; }
.fallback-product-grid, .product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.product-card, .seed-all-card { border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); backdrop-filter: blur(16px); color: #fff; overflow: hidden; }
.product-card__media img, .seed-all-card img { width: 100%; aspect-ratio: 1.12; object-fit: cover; background: #1a1410; }
.product-card__body, .seed-all-card__body { padding: 1rem; }
.product-card h3, .seed-all-card h3 { margin: 0 0 1rem; font-size: 1rem; line-height: 1.2; }
.product-card .eyebrow { color: var(--amber); }
.product-badge { position: absolute; margin: .8rem; padding: .35rem .55rem; border-radius: 99px; background: rgba(0,0,0,.72); color: #fff; font-size: .75rem; }

.product-page { display: grid; grid-template-columns: 1fr .82fr; gap: 2rem; padding: clamp(6rem, 10vw, 10rem) clamp(1rem, 5vw, 5rem) 5rem; background: radial-gradient(circle at 24% 20%, rgba(255,77,31,.15), transparent 26%), #080504; }
.product-gallery { display: grid; gap: .8rem; }
.product-gallery img { border: 1px solid rgba(255,255,255,.1); background: #15100d; }
.product-info { position: sticky; top: 7rem; align-self: start; }
.product-info h1 { margin: 0; font-size: clamp(2rem, 4.6vw, 5rem); line-height: .95; letter-spacing: -.055em; }
.product-description { color: var(--muted); line-height: 1.65; }
.quantity-input { width: 5rem; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff; border-radius: 999px; padding: .8rem; }
.cart-page table { width: 100%; border-collapse: collapse; }
.cart-page th, .cart-page td { padding: 1rem; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; }
.site-footer { padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 5vw, 5rem); background: #030201; display: grid; gap: 2rem; }
.site-footer h2 { margin: 0; max-width: 48rem; font-size: clamp(2rem, 5vw, 5rem); line-height: .95; letter-spacing: -.055em; }
.footer-links, .payment-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.footer-links a, .payment-row span { border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .65rem .8rem; color: var(--muted); }

@media (max-width: 980px) {
  .site-nav { display: none; }
  .caption-stack { top: 12vh; width: 88vw; }
  .caption-frame { font-size: clamp(2rem, 8.6vw, 4.4rem); }
  .website-board { width: 108vw; }
  .cinema-slide { padding: 4rem 1rem 1rem; }
  .slide-copy, .series-copy { width: 50%; }
  .series-products { width: 57%; right: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-grid, .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 74%; }
  .fallback-product-grid, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-page { grid-template-columns: 1fr; }
  .product-info { position: static; }
}

@media (max-width: 560px) {
  .site-header { padding: .8rem; }
  .site-logo { font-size: .62rem; }
  .cart-pill { padding: .65rem .75rem; font-size: .62rem; }
  .scene-index, .chrome-nav { display: none; }
  .scene-topbar { top: 4.6rem; }
  .brand-pill { max-width: calc(100vw - 2rem); font-size: .58rem; }
  .caption-stack { top: 14vh; min-height: 10rem; }
  .progress-rail { right: .8rem; top: 28vh; height: 45vh; }
  .board-rig { perspective: 780px; }
  .website-board { width: 132vw; }
  .board-chrome { height: 2.3rem; padding: 0 .8rem; font-size: .58rem; }
  .slide-copy, .series-copy { width: 54%; }
  .slide-copy h2, .series-copy h2, .contact-panel h2, .ai-panel h2 { font-size: clamp(1.35rem, 7.5vw, 2.2rem); }
  .slide-copy p, .series-copy p, .contact-panel p, .ai-panel p { font-size: .76rem; line-height: 1.35; }
  .hero-fireplace { right: 2%; top: 44%; width: 60%; }
  .series-products { top: 35%; width: 62%; grid-template-columns: 1fr; gap: .45rem; }
  .seed-product { min-height: 8.2rem; }
  .seed-product:nth-child(n+3) { display: none; }
  .seed-product img { aspect-ratio: 1.9; }
  .seed-product h3 { font-size: .66rem; }
  .collection-grid, .benefit-grid { gap: .45rem; }
  .collection-grid a, .benefit-grid article { min-height: 8.2rem; padding: .75rem; font-size: 1rem; }
  .slide-footer-title { font-size: clamp(2rem, 12vw, 4rem); }
  .ai-panel { grid-template-columns: 1fr; align-content: center; }
  .ai-chat { min-height: 52%; }
  .ai-panel__copy { display: none; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .fallback-product-grid, .product-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cinema-scroll { height: auto; }
  .scene-viewport { min-height: auto; padding: 7rem 0 2rem; }
  .board-rig, .caption-stack, .progress-rail { position: relative; inset: auto; transform: none; }
  .website-board { transform: none !important; width: min(94vw, 72rem); margin: 10rem auto 2rem; }
  .slide-track { width: auto; display: grid; }
  .cinema-slide { flex: none; min-height: 70vh; }
}