/* ============================================================
   BIOSCHA - landing redesign
   Layout system measured from the All Natural reference DOM:
   container 1416px, page gutter 40px, section pad 100/50,
   Inter wt500 everywhere, card r8, tile r14.
   Images = grey placeholders until AI visuals are ready.
   ============================================================ */

:root {
  --ink: #000000;
  --paper: #ffffff;
  --ph: #e6e4e0;        /* light placeholder */
  --ph-mid: #b9b7b2;    /* mid placeholder */
  --ph-dark: #8b8984;   /* dark placeholder, white text passes on it */
  --ph-deep: #55534f;   /* newsletter / countdown placeholder */
  --gutter: 40px;
  --container: 1496px; /* 1416 content + 2x40 gutter */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { font-weight: 500; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- type scale (measured) ---------- */
.t-hero   { font-size: 46px; letter-spacing: -1.85px; line-height: 46px; }
.t-h2     { font-size: 30px; letter-spacing: -1.25px; line-height: 31.5px; }
.t-h3     { font-size: 25px; letter-spacing: -1.25px; line-height: 25px; }
.t-name18 { font-size: 18px; letter-spacing: -0.9px;  line-height: 18px; }
.t-quote  { font-size: 16px; letter-spacing: -0.5px;  line-height: 23.2px; }
.t-body   { font-size: 14px; letter-spacing: -0.5px;  line-height: 17.5px; }
.t-price  { font-size: 13px; letter-spacing: -0.6px; }
.t-small  { font-size: 12px; letter-spacing: -0.4px;  line-height: 14.4px; }
.t-micro  { font-size: 11px; line-height: 11px; text-transform: uppercase; letter-spacing: 0; }
.t-featured-in { font-size: 12px; letter-spacing: 0.3px; line-height: 13.2px; text-transform: uppercase; }

/* ---------- shared layout ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: 100px 0 50px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.link-arrow { font-size: 14px; letter-spacing: -0.5px; white-space: nowrap; }

/* ---------- placeholders ---------- */
.ph        { background: var(--ph); }
.ph-mid    { background: var(--ph-mid); }
.ph-dark   { background: var(--ph-dark); }
.ph-deep   { background: var(--ph-deep); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 10px 36px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.5px;
  line-height: 17.5px;
  cursor: pointer;
  border: none;
}
.btn-light { background: var(--paper); color: var(--ink); }
.btn-dark  { background: var(--ink);  color: var(--paper); }

/* ============================================================
   NAV - 63px, transparent over hero, white links
   ============================================================ */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 63px;
  z-index: 10;
  color: var(--paper);
}
.nav .container {
  max-width: none;
  height: 63px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-left, .nav-right { display: flex; gap: 24px; align-items: center; flex: 1; }
.nav-right { justify-content: flex-end; }
.nav-logo { font-size: 18px; letter-spacing: -0.5px; flex: 0; white-space: nowrap; }
.nav a { font-size: 14px; letter-spacing: -0.5px; line-height: 17.5px; }

/* ============================================================
   HERO - full viewport, h1 block bottom-left, white CTA pill
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  color: var(--paper);
}
.hero-inner {
  position: relative;
  width: 100%;
  padding: 0 var(--gutter) 38px;
}
.hero h1 { max-width: 400px; margin-bottom: 21px; }
.hero .t-micro { margin-bottom: 12px; opacity: .9; }

/* ============================================================
   BRANDS STRIP - 231px band, FEATURED-IN label + logo row
   ============================================================ */
.brands { padding: 100px 0 50px; }
.brands .container {
  display: flex;
  align-items: center;
  gap: 48px;
}
.brands-label { white-space: nowrap; }
.brands-row {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}
.brand-logo {
  height: 22px;
  width: 120px;
  border-radius: 4px;
  background: var(--ph);
}

/* ============================================================
   PRODUCT GRID - 4 x 339, gap 20, img 390 r8
   ============================================================ */
.tabs-row { display: flex; gap: 20px; margin-bottom: 24px; }
.tabs-row button {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-weight: 500;
  font-size: 14px; letter-spacing: -0.5px;
  color: var(--ink); opacity: .45;
  padding: 0;
}
.tabs-row button.active { opacity: 1; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.card { position: relative; }
.card-img {
  aspect-ratio: 339 / 390;
  border-radius: 8px;
  background: var(--ph);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.card-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--paper);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 11px;
  line-height: 11px;
  text-transform: uppercase;
}
.card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.card-name { font-size: 14px; letter-spacing: -0.5px; line-height: 17.5px; }
.card-cat  { font-size: 11px; line-height: 11px; text-transform: uppercase; opacity: .55; margin-top: 4px; }
.card-price{ font-size: 13px; letter-spacing: -0.6px; white-space: nowrap; }

/* ============================================================
   CATEGORY TILES - 3 x 459x624, r14, white label bottom
   ============================================================ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 19.5px;
}
.cat-tile {
  position: relative;
  aspect-ratio: 459 / 624;
  border-radius: 14px;
  background: var(--ph-mid);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--paper);
}
.cat-tile-label {
  width: 100%;
  padding: 20px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  letter-spacing: -0.5px;
}

/* ============================================================
   INFO / 1 PRODUCT - 50/50 split, image 752 tall
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  padding: 50px 8px;
}
.split-img {
  height: 752px;
  border-radius: 14px;
  background: var(--ph);
}
.split-body {
  padding: 0 96px;
  max-width: 640px;
}
.split-body .t-micro { margin-bottom: 16px; opacity: .55; }
.split-body h2 { margin-bottom: 18px; }
.split-body p  { margin-bottom: 26px; }
.split.reverse .split-img  { order: 2; }
.split.reverse .split-body { order: 1; justify-self: end; }

/* ============================================================
   ARTICLES - 3 cards
   ============================================================ */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.article-img {
  aspect-ratio: 459 / 300;
  border-radius: 8px;
  background: var(--ph);
  margin-bottom: 14px;
}
.article-card .t-micro { opacity: .55; margin-bottom: 8px; }
.article-card h4 { font-size: 18px; letter-spacing: -0.9px; line-height: 22px; margin-bottom: 6px; }

/* ============================================================
   CARDS LARGE - 2 x 698x704, r14, text overlay
   ============================================================ */
.large-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.large-tile {
  position: relative;
  height: 704px;
  border-radius: 14px;
  background: var(--ph-mid);
  overflow: hidden;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
}
.large-tile h3 { margin-bottom: 10px; }
.large-tile p  { margin-bottom: 20px; max-width: 380px; }

/* ============================================================
   FEATURED PRODUCT - full-bleed 100vh band
   ============================================================ */
.featured {
  position: relative;
  height: 100vh;
  min-height: 640px;
  background: var(--ph-dark);
  color: var(--paper);
  display: flex;
  align-items: flex-end;
}
.featured-inner { padding: 0 var(--gutter) 46px; }
.featured-inner .t-micro { margin-bottom: 12px; opacity: .9; }
.featured-inner h2 { margin-bottom: 20px; max-width: 430px; }

/* ============================================================
   COUNTDOWN - container media block 531 tall, centered white
   ============================================================ */
.countdown-media {
  border-radius: 14px;
  background: var(--ph-deep);
  height: 531px;
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}
.countdown-media .t-small { opacity: .85; }
.count-row { display: flex; gap: 28px; margin: 18px 0 8px; }
.count-cell { text-align: center; }
.count-num { font-size: 30px; letter-spacing: -1.25px; line-height: 31.5px; }
.count-lab { font-size: 11px; line-height: 11px; text-transform: uppercase; opacity: .7; margin-top: 6px; }

/* ============================================================
   TESTIMONIALS - heading 30, 3 cols: name18 quote16 prod12
   ============================================================ */
.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 44px;
}
.testi h4 { font-size: 18px; letter-spacing: -0.9px; line-height: 18px; margin-bottom: 14px; }
.testi blockquote { font-size: 16px; letter-spacing: -0.5px; line-height: 23.2px; margin-bottom: 18px; }
.testi-prod { display: flex; align-items: center; gap: 12px; }
.testi-thumb { width: 44px; height: 44px; border-radius: 8px; background: var(--ph); }
.testi-prod .t-micro { opacity: .55; margin-top: 4px; }

/* ============================================================
   INSTAGRAM - 5 x 264 tiles, gap 24, r8
   ============================================================ */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 30px;
}
.ig-tile { aspect-ratio: 1; border-radius: 8px; background: var(--ph); }

/* ============================================================
   NEWSLETTER - full-bleed 592 dark band, centered
   ============================================================ */
.newsletter {
  height: 592px;
  background: var(--ph-deep);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
  padding: 0 var(--gutter);
}
.newsletter p { max-width: 420px; }
.nl-form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.6);
  width: 300px;
  margin-top: 10px;
}
.nl-form input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--paper);
  font-family: inherit;
  font-size: 14px;
  height: 40px;
}
.nl-form input::placeholder { color: rgba(255,255,255,.7); }
.nl-form button {
  background: none; border: none; color: var(--paper);
  font-size: 16px; cursor: pointer; padding: 0 2px;
}

/* ============================================================
   FOOTER - white, tagline 16, cols: 11-caps header + 14 links
   ============================================================ */
.footer { padding: 40px 0 46px; }
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 90px;
}
.footer-tagline { font-size: 16px; letter-spacing: -0.6px; line-height: 16px; }
.footer h6 { font-size: 11px; line-height: 11px; text-transform: uppercase; font-weight: 500; opacity: .55; margin-bottom: 18px; }
.footer li { margin-bottom: 12px; }
.footer li a { font-size: 14px; letter-spacing: -0.5px; line-height: 17.5px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: -0.4px;
  opacity: .55;
}

/* ---------- responsive floor (Shoptet mobile pass comes later) ---------- */
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid, .article-grid, .testi-grid { grid-template-columns: 1fr; }
  .large-grid, .split { grid-template-columns: 1fr; }
  .split-img { height: 420px; }
  .split-body { padding: 32px 8px; }
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .nav a.hide-m { display: none; } /* tablet: category links + logo + cart stay */
}

/* ============================================================
   INNER PAGES (measured from reference: /all, /shop/*, /about,
   /journal). Same tokens, new components.
   ============================================================ */

/* ---------- solid nav variant (inner pages) ---------- */
.nav-solid {
  position: sticky;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.nav-solid.nav { position: sticky; }

/* ---------- page header band (listing 458 / journal 332) ---------- */
.page-head {
  padding: 120px 0 90px;
}
.page-head h1 { max-width: 660px; }
.page-head .t-micro { margin-bottom: 14px; opacity: .55; }
.page-head-journal { padding: 90px 0 40px; }
.page-head-journal h1 { max-width: 450px; }

/* ---------- listing: 250 sidebar + 1146 grid col ---------- */
.listing {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
  align-items: start;
}
.filter-col { position: sticky; top: 95px; }
.filter-col h6 {
  font-size: 11px; line-height: 11px; text-transform: uppercase;
  opacity: .55; margin: 26px 0 14px;
}
.filter-col h6:first-child { margin-top: 0; }
.filter-col li { margin-bottom: 11px; }
.filter-col a { font-size: 14px; letter-spacing: -0.5px; line-height: 17.5px; }
.filter-col a.active { text-decoration: underline; text-underline-offset: 3px; }

.sort-bar {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  margin-bottom: 22px;
  font-size: 14px;
  letter-spacing: -0.5px;
}
.sort-bar span { opacity: .55; }

.listing .product-grid { grid-template-columns: repeat(4, 1fr); gap: 19px; }
.listing .card-img { aspect-ratio: 272 / 312; }

/* ---------- PDP: container 1000, gallery 600 + info 360 ---------- */
.pdp {
  max-width: 1000px;
  margin: 0 auto;
  padding: 107px 0 50px;
  display: grid;
  grid-template-columns: 600px 360px;
  gap: 40px;
}
.pdp-gallery { display: flex; gap: 14px; }
.pdp-thumbs { display: flex; flex-direction: column; gap: 12px; width: 70px; }
.pdp-thumb { aspect-ratio: 1; border-radius: 6px; background: var(--ph); cursor: pointer; }
.pdp-thumb.active { outline: 1px solid var(--ink); outline-offset: 2px; }
.pdp-main {
  flex: 1;
  aspect-ratio: 515 / 595;
  border-radius: 8px;
  background: var(--ph);
}
.pdp-info .t-micro { opacity: .55; margin-bottom: 10px; }
.pdp-info h1 { margin-bottom: 12px; }
.pdp-price { font-size: 14px; letter-spacing: -0.6px; margin-bottom: 24px; }
.pdp-desc { font-size: 14px; font-weight: 400; letter-spacing: -0.5px; line-height: 17.5px; margin-bottom: 26px; }
.pdp-buy { display: flex; gap: 10px; margin: 26px 0 8px; }
.qty {
  display: flex; align-items: center;
  border: 1px solid rgba(0,0,0,.25);
  border-radius: 8px;
  height: 40px;
}
.qty button {
  width: 30px; height: 100%;
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-family: inherit;
}
.qty span { min-width: 22px; text-align: center; font-size: 14px; }
.pdp-buy .btn { flex: 1; text-align: center; padding: 10px 0; }

.badges {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 22px 0 6px;
}
.badges span { font-size: 11px; line-height: 11px; text-transform: uppercase; opacity: .7; }

.accordion { border-top: 1px solid rgba(0,0,0,.12); margin-top: 22px; }
.accordion details { border-bottom: 1px solid rgba(0,0,0,.12); }
.accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 14px;
  letter-spacing: -0.5px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion .acc-body { padding: 0 0 18px; font-size: 14px; font-weight: 400; letter-spacing: -0.5px; line-height: 17.5px; }

/* how-to-use split: two 708 halves */
.howto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 50px 0;
}
.howto > div:first-child { border-radius: 14px; background: var(--ph); min-height: 757px; }
.howto-body { display: flex; flex-direction: column; justify-content: center; padding: 0 90px; }
.howto-body h2 { margin-bottom: 18px; }
.howto-body ol { margin: 8px 0 0 18px; }
.howto-body li { font-size: 14px; font-weight: 400; letter-spacing: -0.5px; line-height: 17.5px; margin-bottom: 14px; }

/* key ingredients band */
.ingredients-band { padding: 76px 0 50px; }
.ing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.ing-tile {
  border-radius: 14px;
  background: var(--ph-mid);
  height: 845px;
  color: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px;
}
.ing-tile h3 { margin-bottom: 8px; }

/* ---------- cart page ---------- */
.cart-wrap {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: start;
  padding: 60px 0 100px;
}
.cart-item {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.cart-item:first-child { border-top: 1px solid rgba(0,0,0,.12); }
.cart-thumb { width: 110px; aspect-ratio: 110/128; border-radius: 8px; background: var(--ph); }
.cart-item .card-cat { margin-top: 4px; }
.cart-remove { font-size: 11px; line-height: 11px; text-transform: uppercase; opacity: .55; margin-top: 10px; display: inline-block; }
.cart-summary {
  position: sticky; top: 95px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 28px;
}
.cart-summary h3 { margin-bottom: 22px; }
.sum-row {
  display: flex; justify-content: space-between;
  font-size: 14px; letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.sum-row.total {
  border-top: 1px solid rgba(0,0,0,.12);
  padding-top: 16px; margin-top: 16px;
  font-size: 16px; letter-spacing: -0.6px;
}
.cart-summary .btn { width: 100%; text-align: center; margin-top: 20px; }
.cart-note { font-size: 12px; font-weight: 400; letter-spacing: -0.4px; opacity: .55; margin-top: 14px; text-align: center; }

/* ---------- about page ---------- */
.about-intro { padding: 140px 0 110px; }
.about-intro h1 { max-width: 950px; }
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: center;
  padding: 50px 8px;
}
.about-split .split-img { height: 809px; }
.about-split.reverse .split-img { order: 2; }
.quote-band { padding: 120px 0; text-align: center; }
.quote-band h2 { max-width: 640px; margin: 0 auto; }

/* ---------- journal ---------- */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 20px;
  row-gap: 56px;
}

/* ---------- responsive floor ---------- */
@media (max-width: 1080px) {
  .listing { grid-template-columns: 1fr; }
  .filter-col { position: static; }
  .listing .product-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp { grid-template-columns: 1fr; padding-top: 40px; }
  .pdp-gallery { flex-direction: column-reverse; }
  .pdp-thumbs { flex-direction: row; width: auto; }
  .howto, .ing-grid, .about-split { grid-template-columns: 1fr; }
  .howto > div:first-child { min-height: 420px; }
  .howto-body { padding: 32px 8px; }
  .ing-tile { height: 420px; }
  .cart-wrap { grid-template-columns: 1fr; }
  .journal-grid { grid-template-columns: 1fr; }
  .about-split .split-img { height: 420px; }
}

/* ---------- generated product photos ---------- */
.card-img img, .split-img img, .pdp-main img, .cart-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-tile-label { position: relative; z-index: 1; }
.cat-tile::after { content: ""; position: absolute; inset: 60% 0 0 0; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.38)); pointer-events: none; }
.cat-tile-label { z-index: 2; }
.hero-bg, .featured-bg { background-size: cover; background-position: center; }

/* ============================================================
   IMAGE SLOT SUPPORT (new blocks)
   ============================================================ */
.large-tile img, .ing-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.large-tile, .ing-tile { position: relative; }
.large-tile::after, .ing-tile::after {
  content: ""; position: absolute; inset: 45% 0 0 0;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.45));
  pointer-events: none;
}
.large-tile > *, .ing-tile > * { position: relative; z-index: 1; }
.ig-tile { overflow: hidden; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; }
.testi-thumb { overflow: hidden; }
.testi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.about-band { height: 511px; background-size: cover; background-position: center; }
.values-row {
  display: flex; flex: 1;
  justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.values-row span { font-size: 11px; line-height: 11px; text-transform: uppercase; opacity: .6; }

/* ============================================================
   MOBILE NAV (hamburger, CSS-only)
   ============================================================ */
.menu-toggle { display: none; }
.menu-btn { display: none; cursor: pointer; }
.mobile-menu { display: none; }

/* ============================================================
   MOBILE LAYER - measured on reference at 390px:
   gutter 20, nav 65, h1 28/30.8, h3 20, cards 76% snap
   carousel, full-width buttons.
   ============================================================ */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  /* type scale */
  .t-hero  { font-size: 28px; letter-spacing: -1.12px; line-height: 30.8px; }
  .t-h2    { font-size: 25px; letter-spacing: -1px;    line-height: 27px; }
  .t-h3    { font-size: 20px; letter-spacing: -1px;    line-height: 20px; }
  .section { padding: 64px 0 32px; }
  .section-head { margin-bottom: 20px; }

  /* nav: burger left, logo center, cart right */
  .nav .container { height: 65px; }
  .nav { height: 65px; }
  .nav-left { display: none; }
  .nav-right a.hide-m { display: none; }
  .menu-btn {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 44px; height: 44px; flex: 1;
  }
  .menu-btn span, .menu-btn::before, .menu-btn::after {
    content: ""; display: block; width: 22px; height: 1.5px;
    background: currentColor;
  }
  .mobile-menu {
    position: fixed; inset: 65px 0 0 0;
    background: var(--paper); color: var(--ink);
    padding: 28px var(--gutter);
    z-index: 40;
  }
  .mobile-menu a {
    display: block;
    font-size: 25px; letter-spacing: -1px; line-height: 27px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(0,0,0,.07);
  }
  .menu-toggle:checked ~ .mobile-menu { display: block; }
  .nav-solid { position: sticky; }

  /* hero */
  .hero { height: 100svh; min-height: 560px; }
  .hero h1 { max-width: 300px; }
  .hero .btn, .featured-inner .btn, .split-body .btn,
  .countdown-media .btn, .large-tile .btn {
    display: block; width: 100%; text-align: center;
  }
  .hero-inner { padding-bottom: 30px; }

  /* brands / values strip */
  .brands { padding: 56px 0 24px; }
  .brands .container { flex-direction: column; align-items: flex-start; gap: 20px; }
  .values-row { justify-content: flex-start; gap: 14px 22px; }

  /* product rows: 76% snap carousel bleeding to screen edge */
  .product-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .product-grid::-webkit-scrollbar { display: none; }
  .product-grid .card {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }

  /* listing grid stays a real grid, 2-up */
  .listing .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
    margin: 0; padding: 0;
    overflow: visible;
  }
  .listing .card { flex: none; }

  /* category tiles: carousel too */
  .cat-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .cat-grid::-webkit-scrollbar { display: none; }
  .cat-tile { flex: 0 0 80%; scroll-snap-align: start; }

  /* splits: image on top, tight body */
  .split, .about-split { grid-template-columns: 1fr; padding: 24px 0 0; }
  .split-img { height: 440px; border-radius: 0; }
  .split.reverse .split-img, .about-split.reverse .split-img { order: 0; }
  .split.reverse .split-body { order: 1; }
  .split-body { padding: 28px var(--gutter) 40px; max-width: none; }

  /* articles + journal: single column */
  .article-grid, .journal-grid { grid-template-columns: 1fr; row-gap: 40px; }

  /* large tiles */
  .large-grid { grid-template-columns: 1fr; gap: 12px; }
  .large-tile { height: 480px; padding: 24px; }

  /* featured band */
  .featured { height: 82svh; min-height: 480px; }
  .featured-inner { padding-bottom: 34px; }
  .featured-inner h2 { max-width: 320px; }

  /* countdown */
  .countdown-media { height: 460px; padding: 0 20px; text-align: center; }
  .count-row { gap: 18px; }
  .count-num { font-size: 24px; letter-spacing: -1px; }

  /* testimonials */
  .testi-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 30px; }

  /* instagram: 2-up grid */
  .ig-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }

  /* newsletter */
  .newsletter { height: 520px; padding: 0 var(--gutter); }
  .newsletter p { max-width: 320px; }
  .nl-form { width: 100%; max-width: 320px; }

  /* footer */
  .footer { padding: 32px 0 40px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; padding-bottom: 44px; }
  .footer-bottom { flex-direction: column; gap: 6px; }

  /* about */
  .about-intro { padding: 72px 0 56px; }
  .about-band { height: 300px; }
  .about-split .split-img { height: 440px; }
  .quote-band { padding: 72px 0; }

  /* page head */
  .page-head { padding: 56px 0 36px; }
  .page-head-journal { padding: 48px 0 20px; }

  /* listing filters: chip row */
  .listing { grid-template-columns: 1fr; gap: 8px; }
  .listing > * { min-width: 0; }
  .filter-col { position: static; }
  .filter-col h6 { display: none; }
  .filter-col ul {
    display: flex; gap: 8px;
    overflow-x: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: 2px var(--gutter) 10px;
    scrollbar-width: none;
  }
  .filter-col ul::-webkit-scrollbar { display: none; }
  .filter-col li { margin: 0; flex: 0 0 auto; }
  .filter-col a {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 999px;
    white-space: nowrap;
  }
  .filter-col a.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .filter-col ul + h6 + ul { display: none; }
  .sort-bar { justify-content: space-between; margin: 10px 0 18px; }

  /* pdp */
  .pdp { padding: 18px 0 30px; gap: 22px; }
  .pdp-main { border-radius: 8px; }
  .pdp-thumbs { gap: 10px; }
  .pdp-thumb { width: 64px; }
  .pdp-buy .btn { padding: 12px 0; }
  .howto { padding: 24px 0 0; gap: 0; }
  .howto > div:first-child { border-radius: 0; min-height: 440px; }
  .howto-body { padding: 30px var(--gutter) 44px; }
  .ingredients-band { padding: 48px 0 24px; }
  .ing-grid { gap: 12px; margin-top: 20px; }
  .ing-tile { height: 440px; padding: 22px; }

  /* cart */
  .cart-wrap { padding: 20px 0 64px; gap: 28px; }
  .cart-item { grid-template-columns: 84px 1fr auto; grid-template-rows: auto auto; gap: 8px 14px; }
  .cart-thumb { width: 84px; grid-row: 1 / 3; }
  .cart-item .qty { grid-column: 2; justify-self: start; }
  .cart-item .card-price { grid-column: 3; grid-row: 1; }
  .cart-summary { position: static; }
}

/* banner backgrounds, swappable per breakpoint */
.bg-hero     { background-image: url(img/hero.jpg); }
.bg-featured { background-image: url(img/featured-argan.jpg); }

@media (max-width: 767px) {
  /* portrait banners composed for phones */
  .bg-hero     { background-image: url(img/hero-mobile.jpg); }
  .bg-featured { background-image: url(img/featured-mobile.jpg); }

  /* nav: burger fixed left, logo truly centered, cart right */
  .nav .container { position: relative; }
  .menu-btn { flex: 0 0 44px; margin-left: -11px; }
  .nav-logo {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav-right { flex: 0 0 auto; }

  /* carousels: rest at the 20px gutter, real trailing space */
  .product-grid, .cat-grid { scroll-padding-inline-start: var(--gutter); }
  .product-grid::after, .cat-grid::after {
    content: ""; flex: 0 0 calc(var(--gutter) - 12px);
  }
  .listing .product-grid::after { content: none; }
}

/* audit fixes */
.pdp-thumb { overflow: hidden; }
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
  /* featured band: scrim so the headline reads over the bottle */
  .featured::after {
    content: ""; position: absolute; inset: 55% 0 0 0;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
    pointer-events: none;
  }
  .featured { position: relative; }
  .featured-inner { position: relative; z-index: 1; }

  /* instagram: 2x2, no orphan */
  .ig-grid .ig-tile:nth-child(5) { display: none; }
}

/* ============================================================
   MOTION - one easing, two durations, nothing bounces.
   Reveals: fade + 18px rise, 650ms, stagger max 3x70ms (script.js).
   Micro: 250ms hovers. Reduced-motion kills everything.
   ============================================================ */
:root {
  --ease: cubic-bezier(0.33, 1, 0.68, 1); /* easeOutCubic: settles, never snaps */
  --t-reveal: 1100ms;
  --t-micro: 350ms;
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease),
    filter var(--t-reveal) var(--ease);
  will-change: opacity, transform, filter;
}
.reveal.in-view { opacity: 1; transform: none; filter: none; }

/* hero content: one intro on load, nothing else on the hero */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(28px); filter: blur(12px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hero-inner { animation: hero-in 1400ms var(--ease) 150ms backwards; }

/* image hovers: quiet zoom, desktop pointers only */
.card-img, .cat-tile, .article-img, .ig-tile, .split-img { overflow: hidden; }
.card-img img, .cat-tile img, .article-img img, .ig-tile img,
.large-tile img, .split-img img {
  transition: transform 1000ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-img img,
  .cat-tile:hover img,
  .article-card:hover .article-img img,
  .ig-tile:hover img,
  .large-tile:hover img { transform: scale(1.03); }

  .link-arrow .icon-arrow { transition: transform var(--t-micro) var(--ease); }
  .link-arrow:hover .icon-arrow { transform: translateX(4px); }

  .btn { transition: opacity var(--t-micro) var(--ease), transform var(--t-micro) var(--ease); }
  .btn:hover { opacity: .88; }
  .btn:active { transform: scale(.985); }

  .nav a, .footer li a, .filter-col a, .cart-remove {
    transition: opacity var(--t-micro) var(--ease);
  }
  .nav a:hover, .footer li a:hover, .filter-col a:hover, .cart-remove:hover { opacity: .55; }

  .tabs-row button { transition: opacity var(--t-micro) var(--ease); }
  .tabs-row button:hover { opacity: .8; }

  .pdp-thumb { transition: opacity var(--t-micro) var(--ease); }
  .pdp-thumb:hover { opacity: .8; }
}

/* carousels glide instead of jumping */
.product-grid, .cat-grid { scroll-behavior: smooth; }



/* mobile menu: slide + fade, driven by the checkbox */
@media (max-width: 767px) {
  .mobile-menu {
    display: block;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition:
      opacity 450ms var(--ease),
      transform 450ms var(--ease),
      visibility 0s linear 450ms;
  }
  .menu-toggle:checked ~ .mobile-menu {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition:
      opacity 450ms var(--ease),
      transform 450ms var(--ease);
  }
}

/* the off switch */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .hero-inner { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .product-grid, .cat-grid { scroll-behavior: auto; }
}

/* mobile nav control: text label like the reference, left aligned */
@media (max-width: 767px) {
  .menu-btn {
    flex: 0 0 auto;
    margin-left: 0;
    width: auto; height: 44px;
    align-items: center; flex-direction: row;
    font-size: 14px; letter-spacing: -0.5px;
  }
  .menu-btn span, .menu-btn::before, .menu-btn::after { display: none; }
  .menu-btn .menu-label { display: inline; }
  .menu-btn .menu-label::after { content: "Menu"; }
  .menu-toggle:checked ~ .container .menu-btn .menu-label::after { content: "Zavřít"; }
}
@media (max-width: 767px) {
  .menu-btn .menu-label {
    display: inline;
    width: auto; height: auto;
    background: none;
  }
}

/* ============================================================
   FILTERS + SORT
   ============================================================ */
.card[hidden] { display: none; }
.product-grid {
  transition: opacity 240ms var(--ease), filter 240ms var(--ease);
}
.product-grid.grid-fading { opacity: 0; filter: blur(6px); }

.sort-label { font-size: 14px; letter-spacing: -0.5px; opacity: .8; }
#sort {
  font: inherit; font-size: 14px; letter-spacing: -0.5px;
  border: none; background: none; color: var(--ink);
  cursor: pointer; outline: none;
}
.results-count { opacity: .55; font-size: 14px; letter-spacing: -0.5px; }

.empty-note {
  font-size: 14px; font-weight: 400; letter-spacing: -0.5px; line-height: 17.5px;
  opacity: .7; padding: 44px 0;
}

.filter-col a { cursor: pointer; }
.filter-col .cat-filters li:nth-child(5) { margin-bottom: 26px; } /* gap before tag filters */

@media (prefers-reduced-motion: reduce) {
  .product-grid.grid-fading { opacity: 1; filter: none; }
}

/* ============================================================
   ICONS - inline sprite, stroke inherits text color
   ============================================================ */
.icon {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -4px;
  display: inline-block;
}
.icon-arrow { width: 15px; height: 15px; vertical-align: -2px; margin-left: 2px; }
.icon-check { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; opacity: .8; }
.icon-link { display: inline-flex; align-items: center; gap: 5px; }
.cart-count { font-size: 12px; letter-spacing: -0.4px; }
.qty .icon { width: 13px; height: 13px; vertical-align: -2px; }

/* accordion marker: plus rotates into a cross */
.accordion summary { align-items: center; }
.acc-icon { opacity: .55; transition: transform 350ms var(--ease); }
details[open] .acc-icon { transform: rotate(45deg); }

/* ============================================================
   TESTIMONIAL CARDS - soft grey, family radius
   ============================================================ */
.testi {
  background: #F1F0ED;
  border-radius: 14px;
  padding: 30px 28px;
}
.testi-grid { gap: 20px; }
.testi .testi-thumb { background: var(--paper); }
@media (max-width: 767px) {
  .testi { padding: 26px 22px; }
  .testi-grid { gap: 14px; }
}