/* ═══ Taste pages, shop & product — shared pieces ═══════ */

/* ── Product tile (taste "shop this flavor" + shop grid) ── */
.p-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 2.4vw, 28px); }
.p-tile { --tile-bg:rgba(255,255,255,.16); --tile-ink:var(--white); display:flex; flex-direction:column; color:var(--tile-ink); }
.p-tile-img { position:relative; display:grid; place-items:center; aspect-ratio:1/1; border-radius:var(--radius); background:var(--tile-bg); overflow:hidden; isolation:isolate; }
.p-tile-img::before { content:''; position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.22); filter:blur(30px); z-index:-1; }
.p-tile-img img { position:absolute; left:10%; top:9%; width:80%; height:82%; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(0,0,0,.28)); transition:transform .55s var(--ease-pop); }
.p-tile:hover .p-tile-img img { transform:translateY(-10px) rotate(-4deg) scale(1.04); }
.p-badge { position:absolute; top:14px; left:14px; font-family:var(--fs); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; padding:6px 11px; border-radius:999px; background:var(--brown); color:var(--white); transform:rotate(-4deg); }
.p-tile.is-soon .p-tile-img img { opacity:.75; filter:grayscale(.2) drop-shadow(0 18px 22px rgba(0,0,0,.2)); }
.p-tile-info { padding:16px 4px 0; display:flex; flex-direction:column; gap:6px; flex:1; }
.p-tile-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.p-tile-name { font-family:var(--fh); text-transform:uppercase; font-size:clamp(1.25rem, 2vw, 1.6rem); line-height:1; }
.p-tile-flavor { font-family:var(--fs); font-size:.82rem; opacity:.75; }
.p-tile-price { font-family:var(--fs); font-size:1.1rem; white-space:nowrap; }
.p-tile-desc { font-size:.9rem; line-height:1.5; opacity:.88; }
.p-tile-actions { display:flex; gap:8px; margin-top:auto; padding-top:10px; }
.p-tile-actions .btn { flex:1; padding-left:12px; padding-right:12px; }
.btn--ink { background:var(--tile-ink); color:var(--tile-on-ink, var(--brown)); }
.btn--ink:hover { filter:brightness(1.12); }
.btn--ink-outline { border-color:var(--tile-ink); color:var(--tile-ink); }
.btn--ink-outline:hover { background:var(--tile-ink); color:var(--tile-on-ink, var(--brown)); }
@media (max-width: 860px) {
  .p-grid { grid-template-columns:repeat(2, 1fr); }
  .p-grid--scroll { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) 6px; gap:14px; }
  .p-grid--scroll::-webkit-scrollbar { display:none; }
  .p-grid--scroll .p-tile { flex:0 0 72%; scroll-snap-align:center; }
}
@media (max-width: 480px) {
  .p-grid:not(.p-grid--scroll) { gap:12px; }
  .p-grid:not(.p-grid--scroll) .p-tile-desc { display:none; }
  .p-grid:not(.p-grid--scroll) .p-tile-actions .btn--ink-outline { display:none; }
}

/* ═══ Flavour theming ══════════════════════════════════════
   applyTheme() (data.js) sets --th-* on :root and adds body.themed.
   .bg-theme sections use the flavour colour instead of brown. */
body.themed { background:var(--th-bg); }
.bg-theme { background:var(--th-bg); }
.bg-theme .t-title, .bg-theme h1 { color:var(--th-title); }
.bg-theme .btn--orange { background:var(--th-alt); color:var(--th-alt-ink); }
.bg-theme .btn--orange:hover { background:var(--th-alt); filter:brightness(1.08); }
.bg-theme .btn--outline { border-color:rgba(255,255,255,.9); color:var(--white); }
.bg-theme .btn--outline:hover { background:var(--white); color:var(--th-bg); }

/* ── Hero (flavour pages + Over ons): photo left with the product clearly in view,
      solid colour panel right with the title, straight edge, no gradient ── */
.t-hero { position:relative; display:grid; grid-template-columns:62fr 38fr; grid-template-rows:minmax(0, 1fr); height:clamp(460px, 78vh, 740px); background:var(--th-bg); overflow:hidden; }
.t-hero > img { width:100%; height:100%; min-height:0; object-fit:cover; animation:heroZoom 12s ease-out both; }
@keyframes heroZoom { from { transform:scale(1.05); } }
.t-hero-panel { position:relative; z-index:2; background:var(--th-bg); display:flex; align-items:center; justify-content:center; padding:calc(var(--nav-h) + 24px) var(--gutter) 24px; }
.t-hero-text { animation:heroIn 1s .1s var(--ease-out) both; }
.t-hero h1 { font-family:var(--fh); text-transform:uppercase; font-size:clamp(2.6rem, 5vw, 5rem); line-height:.9; color:var(--th-title); }
.t-hero p { font-family:var(--fs); font-size:clamp(1.3rem, 2.2vw, 2rem); margin:10px 0 26px; color:var(--white); }
@keyframes heroIn { from { opacity:0; transform:translateY(30px); } }
@media (max-width: 760px) {
  .t-hero { grid-template-columns:1fr; grid-template-rows:auto auto; height:auto; }
  .t-hero > img { height:clamp(220px, 58vw, 300px); }
  .t-hero-panel { padding:24px var(--gutter) 4px; text-align:center; }
  .t-hero p { margin-bottom:18px; }
}

/* Flavour pages: ingredients-only photo, full width, title across the whole hero.
   A flat tint (no gradient) keeps the title readable. */
.t-hero--full { display:flex; align-items:center; justify-content:center; }
.t-hero--full > img { position:absolute; inset:0; width:100%; height:100%; }
.t-hero--full::after { content:''; position:absolute; inset:0; z-index:1; background:var(--hero-tint, rgba(0,0,0,.3)); }
.t-hero--full .t-hero-panel { background:none; width:100%; text-align:center; padding:calc(var(--nav-h) + 24px) var(--gutter) 24px; }
.t-hero--full h1 { font-size:clamp(3rem, 8.4vw, 9.5rem); color:var(--hero-title); white-space:nowrap; text-shadow:0 6px 40px rgba(0,0,0,.35); }
.t-hero--full p { text-shadow:0 2px 20px rgba(0,0,0,.4); }
.t-hero--full h1 + .btn { margin-top:28px; }
@media (max-width: 760px) {
  .t-hero--full { height:clamp(380px, 62svh, 520px); }
  .t-hero--full > img { position:absolute; height:100%; }
  .t-hero--full h1 { white-space:normal; font-size:clamp(2.8rem, 15vw, 4.4rem); }
}

/* ── Taste story ── */
.t-story .wrap { display:grid; grid-template-columns:6fr 5fr; gap:clamp(32px, 6vw, 80px); align-items:center; }
.t-story h2 { margin-bottom:8px; }
.t-story .t-sub { font-size:1.15rem; color:rgba(255,255,255,.85); margin-bottom:20px; }
.t-story .t-body { color:var(--white); }
.t-story .btn-row { margin-top:28px; }
.notes { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 28px; list-style:none; }
.notes li { font-family:var(--fs); font-size:.85rem; padding:8px 14px; border-radius:999px; border:2px solid var(--th-title); color:var(--th-title); }
.t-story-photo { border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; transform:rotate(2deg); box-shadow:0 30px 60px rgba(0,0,0,.25); transition:transform .6s var(--ease-pop); }
.t-story-photo:hover { transform:rotate(0) scale(1.02); }
.t-story-photo img { width:100%; height:100%; object-fit:cover; }
@media (max-width: 760px) {
  .t-story .wrap { grid-template-columns:1fr; }
  .t-story-photo { order:-1; width:80%; max-width:360px; margin:0 auto; }
}

/* ── Look inside (video) ── */
.inside { padding-bottom:clamp(56px, 8vw, 100px); }
.inside-frame { position:relative; border-radius:calc(var(--radius) + 6px); overflow:hidden; aspect-ratio:16/8; background:#000; box-shadow:0 40px 80px rgba(0,0,0,.3); }
.inside-frame video { width:100%; height:100%; object-fit:cover; }
.inside-frame::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 55%); pointer-events:none; }
.inside-text { position:absolute; left:clamp(20px, 4vw, 48px); bottom:clamp(20px, 4vw, 44px); right:20px; z-index:2; max-width:480px; }
.inside-text .t-eyebrow { color:rgba(255,255,255,.75); }
.inside-text h2 { font-family:var(--fh); text-transform:uppercase; font-size:var(--title-size); line-height:.9; color:var(--white); margin:6px 0 10px; }
.inside-text p { font-size:clamp(.9rem, 1.4vw, 1.05rem); color:rgba(255,255,255,.9); }
.inside-sound { position:absolute; top:16px; right:16px; z-index:3; width:44px; height:44px; border-radius:999px; background:rgba(0,0,0,.45); backdrop-filter:blur(6px); display:grid; place-items:center; }
.inside-sound svg { width:20px; height:20px; }
@media (max-width: 640px) {
  .inside-frame { aspect-ratio:4/5; }
}

/* ── Shop this flavor (alt colour) ── */
.t-shop { background:var(--th-alt); color:var(--th-alt-ink); }
.t-shop .t-title { color:var(--th-alt-title, var(--th-alt-ink)); }
.t-shop .p-tile { --tile-ink:var(--th-alt-ink); --tile-on-ink:var(--th-alt); --tile-bg:rgba(255,255,255,.22); }
.t-shop .p-grid { grid-template-columns:repeat(auto-fit, minmax(220px, 300px)); justify-content:center; }
.t-shop-sub { max-width:520px; margin:12px auto 0; font-size:1rem; }
.t-shop-more { text-align:center; margin-top:clamp(28px, 4vw, 40px); }
.t-shop .btn--outline { border-color:var(--th-alt-ink); color:var(--th-alt-ink); }
.t-shop .btn--outline:hover { background:var(--th-alt-ink); color:var(--th-alt); }
.t-shop .p-badge { background:var(--th-alt-ink); color:var(--th-alt); }

/* ── Recipe cards ── */
.recipes-with .t-title { color:var(--th-title, var(--orange)); }
.recipes-with .card { background:var(--th-card, var(--orange)); color:var(--th-card-ink, var(--white)); }
.recipes-with .card-text { color:inherit; opacity:.92; }
.recipes-with .btn-row { margin-top:clamp(28px, 4vw, 44px); }
.bg-theme .tag { background:var(--th-alt); color:var(--th-alt-ink); }