/** Shopify CDN: Minification failed

Line 1450:10 Unexpected "{"
Line 1450:19 Expected ":"
Line 1456:14 Unexpected "{"
Line 1456:23 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:casamara-founders-note (INDEX:15) */
.cfound { background:#FFF3E0; color:#313840; padding:84px 38px; font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.cfound-inner { max-width:760px; margin:0 auto; }
.cfound-q p { margin:0; font-size:clamp(22px, 2.6vw, 32px); line-height:1.4; letter-spacing:0.005em; text-wrap:pretty; }
.cfound-q em { font-weight:600; }
.cfound-colophon { font-size:13px; letter-spacing:0.04em; opacity:0.6; margin-top:24px; }
@media (max-width:749px) {
  .cfound { padding:44px 22px; }
  .cfound-q p { font-size:22px; }
}
/* END_SECTION:casamara-founders-note */

/* START_SECTION:casamara-glossary (INDEX:16) */
.gl { background:#FFF3E0; color:#313840; font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.gl-inner { max-width:720px; margin:0 auto; padding:clamp(30px, 4vw, 56px) clamp(16px, 2vw, 28px) clamp(44px, 6vw, 80px); }
.gl-title { font-family:"Magiel Black","abril-titling-condensed",sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(36px, 4.8vw, 58px); line-height:0.9; margin:0 0 clamp(24px, 3vw, 40px); }
.gl-entry { border-top:1px solid rgba(49,56,64,0.22); padding:clamp(18px, 2.4vw, 26px) 0; scroll-margin-top:90px; }
.gl-name { font-family:inherit; font-weight:400; font-style:normal; font-size:clamp(22px, 2.6vw, 28px); line-height:1.16; margin:0 0 clamp(8px, 1.2vw, 12px); }
.gl-body { margin:0 0 12px; font-size:16px; line-height:1.55; letter-spacing:0.005em; }
.gl-body:last-child { margin-bottom:0; }
.gl-found { margin:0; font-size:13px; line-height:1.6; }
.gl-found-label { font-weight:600; font-style:normal; text-decoration:underline; text-underline-offset:2px; opacity:0.85; }
.gl-head-house { margin-top:clamp(30px, 4vw, 48px); scroll-margin-top:90px; }
.gl-section-h { font-family:"Magiel Black","abril-titling-condensed",sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(26px, 3.2vw, 36px); line-height:1; margin:0 0 clamp(18px, 2.4vw, 26px); }
/* END_SECTION:casamara-glossary */

/* START_SECTION:casamara-home-hero (INDEX:17) */
.chero { position:relative; overflow:hidden; min-height:min(84vh, 760px); display:flex; align-items:flex-start; background:#FFF3E0; color:#313840; font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.chero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:62% center; }
.chero-text { position:relative; padding:clamp(36px, 5vw, 72px) clamp(22px, 4vw, 56px); max-width:640px; display:flex; flex-direction:column; align-items:flex-start; }
.chero-device { width:92px; height:60px; background:#313840; }
.chero-h1 { font-family:inherit; font-weight:400; font-size:clamp(28px, 3.2vw, 42px); line-height:1.1; letter-spacing:0.005em; margin:22px 0 0; text-wrap:pretty; color:#313840; }
.chero-kicker { font-weight:600; font-style:italic; font-size:clamp(20px, 1.8vw, 25px); line-height:1.3; margin-top:14px; }
.chero-cta { display:inline-flex; align-items:center; justify-content:center; margin-top:32px; border-radius:3px; padding:0 30px; min-height:52px; background:#313840; color:#FFF3E0; text-decoration:none; font-size:17px; letter-spacing:0.01em; }
@media (max-width:749px) {
  .chero { min-height:0; display:flex; flex-direction:column; align-items:stretch; }
  .chero-img { position:static; inset:auto; width:100%; height:min(82vh, 700px); object-fit:cover; object-position:62% center; display:block; }
  .chero-text { position:static; padding:28px 22px 40px; max-width:none; }
  .chero-h1 { font-size:26px; }
  .chero-device { width:72px; height:47px; }
  .chero-kicker { font-size:20px; }
}
/* END_SECTION:casamara-home-hero */

/* START_SECTION:casamara-image-pair (INDEX:18) */
.cpair { display: flex; align-items: flex-start; background: #FFF3E0; width: 100%; max-width: 100%; overflow: hidden; }
.cpair__cell { position: relative; overflow: hidden; min-width: 0; }
.cpair__img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 749px) {
  /* Default is side-by-side even on phones: two 4:5 portraits stacked is a very tall scroll.
     Stacking is opt-in per instance. */
  .cpair--stack { display: block; }
  .cpair--stack .cpair__cell { flex: none !important; width: 100% !important; }
  .cpair--stack .cpair__cell + .cpair__cell { margin-top: var(--cpair-stack-gap, 0px); }
}

/* --- overlay (260901, About v3) ------------------------------------------ */
/* Inert unless overlay_position is set: no instance without it gains a class. */
.cpair--ov { position: relative; }

/* base.css hides every empty div (`div:empty { display: none }`, line 486, specificity 0,1,1).
   The scrim IS an empty div by design, so its rules are written at 0,2,0 and restate display. */
/* 260901 (photo-overlay model, Jason): ONE uniform black veil over the whole photograph, at
   every overlay position. No gradient, no navy, no partial ramp. This is the model the home
   page settled on — the bestsellers panel and the AWARD WINNING FLAVOR band both render the
   image at 0.5 opacity over a black ground, which is arithmetically the same thing as a flat
   50% black veil edge to edge (assets/casamara-card.css §header card). Written as a veil
   rather than an image opacity here because the two cells are separate <img> elements and one
   scrim covers both.
   Replaces the navy bottom-left ramp (held 45%, faded by 80%) and the uniform navy centre
   veil, which were two different mechanisms answering the same question.
   Contrast: worst case is a pure-white photo pixel, which the veil renders as rgb(128).
   Cream #FFF3E0 on rgb(128) is ~3.6:1 — clears AA Large for the display lines, under 4.5:1
   for the 19-20px overlay body ONLY where near-white photo sits beneath it. Accepted by
   Jason, 260901, for parity with the home bands. If a photo swap puts bright sky under the
   copy, move the photo, do not thicken the veil. */
.cpair--ov .cpair__scrim {
  display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: rgba(0,0,0,var(--cpair-scrim,0.5));
}

.cpair__overlay {
  position: absolute; inset: 0; z-index: 2; display: flex;
  padding: clamp(20px, 4.4vw, 64px);           /* = the DSD page gutter, §1.5 */
  box-sizing: border-box; pointer-events: none;
  font-family: "abril-titling-condensed", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
/* Both variants anchor to the BOTTOM. Only the horizontal axis differs. §1.1 S1/S4. */
.cpair--ov-bottom-left .cpair__overlay { align-items: flex-end; justify-content: flex-start; text-align: left; }
.cpair--ov-center      .cpair__overlay { align-items: flex-end; justify-content: center;     text-align: center; }

.cpair__ovbox { max-width: 620px; }            /* ~50 chars, near DSD's 416px/37-char hero */
.cpair--ov-center .cpair__ovbox { max-width: 680px; }  /* DSD's centred box is 608px, §1.2 */

/* font-family is declared, not inherited: base.css styles bare h1-h6 (font-family/style/weight/
   letter-spacing/colour/line-height/word-break, line 265) and overlay_tag can be h1 or h2, so
   every one of those has to be answered here. Same reason as .cstory__sub. */
.cpair__line {
  font-family: inherit;
  font-weight: 600; font-style: italic;        /* the one Abril italic this kit serves */
  /* 260901 (About v3 refinement): 34/5vw/64 -> 44/6.2vw/88. The DSD reference display is
     59px at 1440 over 20px body (3.0x); the two overlay lines are the page's largest voice,
     so they sit above that at 88px (4.4x) while the split subheads take the 3.0x. Floor
     raised 34 -> 44 so phones move with the desktop; measured at 390 the hero line goes
     4 lines -> 5 and still clears its 3:4 cell by a wide margin. */
  /* 260901 (ONE HEADER SIZE, Jason): this value is unchanged, but it is no longer the larger
     of two steps — it IS the step. casamara-story-block's subhead and casamara-motto-statement's
     lede both took this exact declaration (size, 0.96 leading, -0.015em tracking), so the About
     page now runs one display treatment at one size. Edit this and you move every header on
     the page; that is the point. The 4.4x display:body ratio replaces DSD's 3.0x throughout. */
  font-size: clamp(44px, 6.2vw, 88px);
  /* 260901 acceptance check (build plan §4 A4 note 1 / §5.8), measured on the dev server:
     at 0.86 the hero line clashed at 1440 (64px) — the italic f of "soft" overlapped the
     ascenders of the line below by 5px. 0.96 was the first value that cleared, at 1px.
     260901 (refinement) re-measured at 88px, because the line breaks move with the size.
     Method: render each adjacent pair of rendered lines into a canvas at the live font and
     line-height, one in red and one in green, and count the pixels carrying both inks. At
     88px/1440 the hero's five lines clash by 0 pixels at 0.96 — and at 0.90, 0.86 and 0.80
     as well; the first value that clashes is 0.70 (177 px on the worst pair). The 64px
     break pattern that forced 0.96 no longer exists at 88px. 0.96 is kept, with room. */
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: 0; color: inherit; word-break: normal; text-wrap: pretty;
}
.cpair__body p {
  margin: 32px 0 0;                            /* DSD's display->body gap, §1.5 */
  /* 260901 (type simplification): 1.4 -> 1.5, so the overlay body is the SAME body treatment
     the split sections and the S6 tail run — Abril regular, clamp(17,1.7vw,20), 1.5. */
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: inherit;
}
.cpair__body p + p { margin-top: 1em; }

@media (max-width: 749px) {
  .cpair__overlay { padding: 20px; }
  .cpair__ovbox, .cpair--ov-center .cpair__ovbox { max-width: none; }
  .cpair__body p { margin-top: 24px; }         /* DSD tightens 32 -> 24 at 390, §1.5 */
  /* DSD collapse: the second image is 0x0 at 375 and the first runs alone, taller. §1.7 */
  .cpair--mobfirst .cpair__cell + .cpair__cell { display: none; }
  .cpair--mobfirst .cpair__cell { flex: 0 0 100% !important; aspect-ratio: 3/4 !important; }
}
/* END_SECTION:casamara-image-pair */

/* START_SECTION:casamara-menus-band (INDEX:22) */
.cmenus { background:#313840; color:#FFF3E0; padding:34px 56px; font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.cmenus-grid { display:grid; grid-template-columns:220px 1fr; gap:44px; align-items:start; }
.cmenus-h { font-family:inherit; font-weight:400; font-style:normal; font-size:36px; margin:0; line-height:1.05; color:#FFF3E0; }
.cmenus-sub { font-size:13px; opacity:0.55; margin-top:14px; }
.cmenus-list { text-align:justify; font-size:17px; line-height:1.7; }
.cmenus-list span { display:inline-block; white-space:nowrap; margin-right:13px; }
@media (max-width:749px) {
  .cmenus { padding:24px 22px; }
  .cmenus-grid { grid-template-columns:1fr; gap:0; }
  .cmenus-h { font-size:24px; }
  .cmenus-sub { margin:10px 0 14px; }
  .cmenus-list { font-size:13px; }
}
/* END_SECTION:casamara-menus-band */

/* START_SECTION:casamara-mood-string (INDEX:23) */
.cmood { background:#FFF3E0; }
.cmood-row { display:flex; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.cmood-row::-webkit-scrollbar { display:none; }
.cmood-row > div { flex:0 0 calc(100% / 10.5); aspect-ratio:2/3; overflow:hidden; }
.cmood-img { width:100%; height:100%; object-fit:cover; display:block; }
.cmood-mobile { display:none; }
@media (max-width:749px) {
  .cmood-row > div { flex:0 0 calc(100% / 5.5); }
  .cmood-mobile { display:block; }
  .cmood-desktop { display:none; }
}
/* END_SECTION:casamara-mood-string */

/* START_SECTION:casamara-press-crawl (INDEX:25) */
.ccrawl { background:#FFF3E0; color:#313840; font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.ccrawl-press { padding:clamp(9px,1.6vw,10px) 0; overflow:hidden; border-top:var(--cc-hairline, 1.5px) solid #000; border-bottom:var(--cc-hairline, 1.5px) solid #000; }
.ccrawl-mask { overflow:hidden; }
.ccrawl-track { display:flex; align-items:baseline; width:max-content; animation:ccrawl var(--ccrawl-dur,60s) linear infinite; }
.ccrawl-rev { animation-name:ccrawl-rev; }
.ccrawl-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; margin-left:17px; align-self:center; }
.ccrawl-item { display:flex; align-items:baseline; gap:5px; padding-right:22px; white-space:nowrap; }
.ccrawl-q { font-size:clamp(14px,2.4vw,19px); line-height:1; }
.ccrawl-src { font-weight:600; font-style:italic; font-size:clamp(13px,2.27vw,18px); }
@keyframes ccrawl { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes ccrawl-rev { from{transform:translateX(-50%);} to{transform:translateX(0);} }
@media (prefers-reduced-motion: reduce) { .ccrawl-track { animation:none; flex-wrap:wrap; white-space:normal; } }
@media (max-width:749px) {
  .ccrawl-dot { width:6px; height:6px; margin-left:13px; }
  .ccrawl-item { padding-right:17px; }
}
/* END_SECTION:casamara-press-crawl */

/* START_SECTION:casamara-serve-teaser (INDEX:27) */
.cserve { background:#FFF3E0; color:#313840; padding:44px 38px 50px; font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.cserve-h { font-family:inherit; font-weight:400; font-size:clamp(28px, 3.2vw, 42px); line-height:1.1; margin:0 0 28px; }
.cserve-wrap { overflow-x:auto; margin:0 -2px; padding:0 2px; scrollbar-width:none; -ms-overflow-style:none; }
.cserve-wrap::-webkit-scrollbar { display:none; }
.cserve-steps { display:flex; }
.cserve-step { flex:1 1 0; min-width:0; box-sizing:border-box; padding:0 24px; border-left:1px solid rgba(49,56,64,0.16); }
.cserve-step:first-child { padding-left:0; border-left:0; }
.cserve-step[hidden] { display:none; }
.cserve-n { font-family:"Magiel Black",sans-serif; font-weight:900; font-size:56px; line-height:0.8; color:var(--accent); margin-left:-2px; }
.cserve-t { font-size:21px; margin:18px 0 10px; }
.cserve-b { font-size:15px; line-height:1.45; }
.cserve-opt { color:var(--accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.cserve-link { display:inline-block; margin-top:26px; font-size:15px; color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:749px) {
  .cserve { padding:28px 22px 34px; }
  .cserve-h { font-size:26px; }
  .cserve-wrap { overflow-x:auto; margin:0 -22px; padding:0 22px; }
  .cserve-step { flex:0 0 62%; padding:0 20px; }
  .cserve-step:first-child { padding-left:0; }
  .cserve-n { font-size:36px; }
  .cserve-t { font-size:17px; margin:10px 0 5px; }
  .cserve-b { font-size:13px; }
}
/* END_SECTION:casamara-serve-teaser */

/* START_SECTION:casamara-statement (INDEX:29) */
.cstate { background:#313840; color:#FFF3E0; padding:clamp(64px, 9vw, 140px) clamp(22px, 6vw, 110px); font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.cstate-line { font-size:clamp(46px, 7.2vw, 128px); line-height:0.96; letter-spacing:0.005em; text-wrap:pretty; }
/* END_SECTION:casamara-statement */

/* START_SECTION:casamara-story-block (INDEX:30) */
.cstory { background:#FFF3E0; color:#313840; padding:clamp(40px, 6vw, 84px) 0; font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.cstory__media { margin:0 auto clamp(24px, 3.4vw, 44px); padding:0 clamp(20px, 4vw, 56px); box-sizing:border-box; }
.cstory__media--measure { max-width:calc(640px + 2 * clamp(20px, 4vw, 56px)); }
.cstory__media--medium  { max-width:calc(900px + 2 * clamp(20px, 4vw, 56px)); }
.cstory__media--wide    { max-width:calc(1200px + 2 * clamp(20px, 4vw, 56px)); }
.cstory__media--full    { max-width:none; padding:0; }
.cstory__frame { position:relative; }
.cstory__frame--cropped { overflow:hidden; }
.cstory__frame--cropped .cstory__img { height:100%; object-fit:cover; }
.cstory__img { display:block; width:100%; height:auto; }
.cstory__pad { padding:0 clamp(20px, 4vw, 56px); }
.cstory__col { max-width:640px; margin:0 auto; }
.cstory--center .cstory__col { text-align:center; }
/* Abril Titling Condensed semibold italic — the one italic face this kit serves.
   colour and word-break are declared, not left alone, because base.css styles bare h1–h5
   (font-family/style/weight/letter-spacing/colour/line-height/word-break) and this h2 has
   to override all of it. */
/* 260831 (v2 build), per the DSD design spec §2.4 changes 1 and 2:
   font-size ceiling 34px -> 44px, which lifts display:body at 1440 from 1.7x to 2.2x. DSD
   measures 3.0x (59px over 20px); 3.0x is unreachable here because Abril Titling Condensed at
   60px over a 640px measure holds four or five words a line. At 1.7x subhead and body read as
   one voice at two sizes.
   margin-bottom 14px -> 28px. DSD's display-to-body gap is a measured 32px at 1440 and 24px at
   390; 14px was under half of it. The phone override below takes it to 20px, holding the same
   ratio DSD holds. */
/* 260901 (About v3 refinement): ceiling 44px -> 60px, floor 26px -> 32px. At 1440 the body
   is 20px, so 60px is exactly the 3.0x display:body ratio DSD measures (59px over 20px) —
   the ratio the v2 note above called unreachable. It is reachable in the split: the column
   is 560px rather than 640px but the subheads are one sentence each, so 60px holds them in
   three lines and the prose still bottom-aligns inside the photo's height. */
/* 260901 (ONE HEADER SIZE, Jason): "all the other headers are still smaller than 'We started
   Casamara…'". The About page had two display steps — 88px for the two image-pair overlay
   lines, 60px for every subhead and the S6 closing line. It now has ONE. This subhead takes
   the overlay line's step exactly: clamp(44px, 6.2vw, 88px), line-height 0.96, tracking
   -0.015em — same face (Abril Titling Condensed), same weight (600 italic), same leading and
   tracking as `.cpair__line`. Tracking moves with it because at 88px the 0.02em difference is
   ~1.8px a character and would wrap the two treatments differently; matching it is what makes
   them read as one size rather than two near-sizes.
   Measured at 88px/1440 (canvas overlap method, see casamara-image-pair): every subhead's
   adjacent line pairs clash by 0 pixels at 0.96. Wrap is word-level, no overflow, and the
   split sections still bottom-align into the photo at 1440 and 1024. See the checks in
   `260831 - About v3 Build Plan.md` §5. */
.cstory__sub { font-family:inherit; font-weight:600; font-style:italic; color:inherit; word-break:normal; font-size:clamp(44px, 6.2vw, 88px); line-height:0.96; letter-spacing:-0.015em; margin:0 0 28px; text-wrap:pretty; }
.cstory__body p { margin:0 0 1em; font-size:clamp(17px, 1.7vw, 20px); line-height:1.5; text-wrap:pretty; }
.cstory__body p:last-child { margin-bottom:0; }
.cstory__body em { font-weight:600; }
@media (max-width: 749px) {
  .cstory { padding:32px 0 36px; }
  .cstory__media { margin-bottom:22px; }
  /* 260831 (v2 build): the subhead margin tightens on phones the way DSD's does (32 -> 24 there;
     28 -> 20 here). The 24px font-size below is unchanged — the new clamp floor is 26px, so
     without this line phones would gain 2px they were never meant to gain. */
  /* 260901 (About v3 refinement): 24px -> 34px, holding the same ~1.35x it held against
     the desktop-to-phone step before (44/24 = 1.83, 60/34 = 1.76). Measured at 390 each
     subhead runs three lines and no section overflows. */
  /* 260901 (ONE HEADER SIZE): 34px -> 44px, which is the overlay line's phone value — the
     clamp floor, pinned flat here for the same reason it was pinned at 34px. */
  .cstory__sub { font-size:44px; margin-bottom:20px; }
  .cstory__body p { font-size:17px; }
}

/* --- 40/60 split (260901, About v3) --------------------------------------
   Measured DSD, §1.3: the image column is always 40%. Column padding is
   64px, the image runs to the column's inner edge, and the prose block is
   bottom-aligned to the image's bottom edge, never centred. Section height
   = image height + 64 + 64. Sections butt.

   align-items is STRETCH, not centre. The prose column has to fill the row
   before `align-items: flex-end` inside it has any free space to push
   against; at `center` the pad shrink-wraps its content and the text lands
   (imageH - textH)/2 above the image's bottom edge instead of on it. Stretch
   is what produces the measured DSD result (image bottom 2053, text bottom
   2054) and what the build plan's §5 check 3 tests for.                    */
.cstory--split { padding:0; display:grid; align-items:stretch; }
.cstory--split-image-left  { grid-template-columns:40% 60%; }
.cstory--split-image-right { grid-template-columns:60% 40%; }

.cstory--split .cstory__media {
  margin:0; max-width:none; box-sizing:border-box;
  padding:clamp(20px, 4.4vw, 64px);
}
.cstory--split-image-left  .cstory__media { padding-right:0; }
.cstory--split-image-right .cstory__media { padding-left:0; }

.cstory--split .cstory__pad {
  padding:clamp(20px, 4.4vw, 64px);
  display:flex;                        /* the bottom-alignment mechanism */
  align-items:flex-end;
  justify-content:flex-start;
}
.cstory--split .cstory__col { margin:0; max-width:560px; }  /* ~48 chars; DSD measures 52-56 */

@media (max-width: 749px) {
  .cstory--split { display:block; }
  .cstory--split .cstory__media,
  .cstory--split .cstory__pad { padding:20px 20px 32px; display:block; }
  .cstory--split .cstory__col { max-width:none; }
  /* §1.7: on the reversed section the top padding drops to zero, so text
     following text reads as continuous rather than as a dropped section. */
  .cstory--split-image-right .cstory__pad { padding-top:0; }
}
/* END_SECTION:casamara-story-block */

/* START_SECTION:casamara-two-kinds (INDEX:32) */
.ctk { background:#FBF1DE; color:#313840; padding:clamp(30px, 4vw, 56px) 38px; font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.ctk-h { font-family:inherit; font-weight:400; font-size:clamp(28px, 3.2vw, 42px); line-height:1.1; margin:0 0 18px; }
.ctk-intro { font-size:17px; line-height:1.5; margin:0 0 32px; max-width:72ch; text-wrap:pretty; }
.ctk-range { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; }
.ctk-mbtn { display:block; cursor:pointer; font-family:inherit; font-size:15px; color:#313840; text-align:center;
  padding:14px 15px; background:#FFF3E0; border-top:3px solid #FFFDF4; border-left:3px solid #FFFDF4; border-bottom:3px solid rgba(49,56,64,0.55); border-right:3px solid rgba(49,56,64,0.55); }
.ctk-mbtn.is-on { padding:15px 14px 13px 16px; background:#EFE0C8; border-top:3px solid rgba(49,56,64,0.55); border-left:3px solid rgba(49,56,64,0.55); border-bottom:3px solid #FFFDF4; border-right:3px solid #FFFDF4; }
.ctk-mbtn-name { display:flex; align-items:center; justify-content:center; height:42px; font-family:"Magiel Black",sans-serif; font-weight:900; line-height:0.8; font-size:30px; }
.ctk-mbtn-sub { display:block; font-weight:400; font-style:normal; font-size:17px; margin-top:3px; text-wrap:balance; }
.ctk-wordmark { display:block; width:min(78%, 220px); height:42px; margin:0 auto; background:#313840; }
.ctk-side { min-width:0; display:flex; flex-direction:column; }
.ctk-side-img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; margin-top:16px; }
.ctk-line { margin:22px 0 0; font-size:clamp(23px, 2.2vw, 30px); line-height:1.3; letter-spacing:0.005em; text-wrap:pretty; }
.ctk-body { margin:14px 0 0; font-size:17px; line-height:1.5; text-wrap:pretty; }
.ctk-body-sm { font-size:15px; }
.ctk-closed { display:none !important; }
.ctk-band { display:flex; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; margin-left:-38px; margin-right:-38px; padding-left:38px; padding-right:38px; }
.ctk-band::-webkit-scrollbar { display:none; }
.ctk-band > a, .ctk-band > .ctk-sccard { flex:0 0 293px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; text-align:left; background:#313840; padding:0; color:#FFF3E0; text-decoration:none; }
.ctk-cap { align-self:stretch; height:10px; flex:none; }
.ctk-cap-b { margin-top:8px; }
.ctk-fname { font-family:"Magiel Black",Georgia,sans-serif; font-weight:900; line-height:0.78; letter-spacing:0.005em; text-transform:uppercase; width:100%; font-size:76px; white-space:nowrap; }
.ctk-fstyle { font-weight:600; font-style:italic; line-height:1.3; margin-top:-5px; white-space:nowrap; font-size:22.3px; }
.ctk-fstory { line-height:1.15; margin-top:8px; margin-right:5px; font-size:15.5px; padding-right:10px; }
.ctk-fmore { font-size:13px; color:#FFF3E0; text-decoration:underline; margin-top:auto; }
.ctk-scname { font-family:"venn-extended",sans-serif; font-weight:800; line-height:0.9; letter-spacing:0.005em; text-transform:uppercase; width:100%; font-size:34px; min-height:1.8em; flex:none; }
.ctk-scstory { font-family:"venn-semicondensed",sans-serif; font-weight:700; line-height:1.15; margin-top:8px; margin-right:5px; font-size:13px; }
.ctk-scsoon { margin-bottom:auto; }
.ctk-scmore { font-family:"venn-semicondensed",sans-serif; font-weight:700; font-size:13px; color:#FFF3E0; text-decoration:underline; margin-top:auto; }
@media (min-width:750px) {
  .ctk-mbtn-sodas { grid-column:1; grid-row:1; margin-right:44px; }
  .ctk-mbtn-sc { grid-column:2; grid-row:1; margin-left:44px; }
  .ctk-side-sodas { grid-column:1; grid-row:2; margin-top:22px; padding:0 44px 0 0; }
  .ctk-side-sc { grid-column:2; grid-row:2; margin-top:22px; padding:0 0 0 44px; }
  .ctk-band-flavors { grid-column:1 / -1; grid-row:3; margin-top:28px; }
  .ctk-band-sc { grid-column:1 / -1; grid-row:4; margin-top:28px; }
  .ctk-band > a, .ctk-band > .ctk-sccard { height:172px; overflow:hidden; }
}
@media (max-width:749px) {
  .ctk { padding:28px 22px 34px; }
  .ctk-h { font-size:26px; }
  .ctk-line { font-size:23px; }
  .ctk-range { grid-template-columns:1fr; }
  .ctk-mbtn-sodas { order:1; }
  .ctk-side-sodas { order:2; margin-top:16px; padding:0; }
  .ctk-band-flavors { order:3; margin-top:10px; }
  .ctk-mbtn-sc { order:4; margin-top:22px; }
  .ctk-side-sc { order:5; margin-top:16px; padding:0; }
  .ctk-band-sc { order:6; margin-top:10px; }
  .ctk-band { margin-left:-22px; margin-right:-22px; padding-left:22px; padding-right:22px; }
  .ctk-band > a, .ctk-band > .ctk-sccard { flex:0 0 63%; height:132px; overflow:hidden; }
  .ctk-fname { font-size:52px; }
  .ctk-fstyle { font-size:12.5px; }
  .ctk-cap { height:8px; }
  .ctk-fstory { font-size:12px; padding-right:5px; }
  .ctk-fmore { font-size:11px; }
  .ctk-scname { font-size:24px; }
  .ctk-scstory { font-size:12px; }
}
/* END_SECTION:casamara-two-kinds */

/* START_SECTION:casamara-welcome (INDEX:34) */
.cwelcome { background:#FFF3E0; color:#313840; padding:clamp(44px, 6vw, 80px) 38px; font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.cwelcome-inner { max-width:720px; margin:0 auto; }
.cwelcome-h { font-family:inherit; font-weight:400; font-size:clamp(28px, 3.2vw, 42px); line-height:1.1; margin:0; text-align:left; }
.cwelcome-lead { font-weight:600; font-style:italic; font-size:clamp(19px, 1.9vw, 24px); line-height:1.4; margin:18px 0 0; }
.cwelcome-body { font-size:17px; line-height:1.6; margin:18px 0 0; text-wrap:pretty; }
.cwelcome-body2 { margin-top:14px; }
@media (max-width:749px) {
  .cwelcome { padding:28px 22px 34px; }
  .cwelcome-h { font-size:26px; line-height:1.35; }
}
/* END_SECTION:casamara-welcome */

/* START_SECTION:flavor-pdp (INDEX:48) */
.fp { --navy:#313840; --cream:#FFF3E0; --sand:#F1E6D2; --altcream:#FBF1DE; --line:rgba(49,56,64,0.16); --line2:rgba(49,56,64,0.22); --line3:rgba(49,56,64,0.28); --fp-u: 1px; /* 260811: handoff spec is fixed px at desktop; scaling unit removed */ --ctl-h:calc(52 * var(--fp-u));
  /* 260828 R6 (Jason item 6): "font sizes below each of these sections is a little different —
     let's try to be consistent." ONE scale for every how-to panel: body for all running copy
     (serve, mix, pair, ingredients, nutrition, the recipes link), sub for the named subheads
     (the highball, each cocktail). Nothing in a panel sets its own size. */
  --fp-body:calc(17 * var(--fp-u)); --fp-body-lh:1.55; --fp-sub:calc(20 * var(--fp-u));
  /* 260902 (Jason, correction): --fp-accent-on-navy and --fp-line-on-navy are GONE with the
     navy ground they were mixed for. There is no navy surface left in the tile system — the
     open tile's title box and the open panel are cream with navy ink again, and the open state
     is marked by a hairline outline instead. Every link inside a panel is back on its normal
     cream-ground accent, which is the accent the rest of the PDP uses, so no lift is needed and
     no rule may reintroduce one. */
  background:var(--cream); color:var(--navy); font-family:"abril-titling-condensed",Georgia,serif; -webkit-font-smoothing:antialiased; }
.fp h1 { font-family:"Magiel Black","abril-titling-condensed",sans-serif; font-weight:900; }
.fp h2 { font-family:inherit; font-weight:400; font-style:normal; }

/* 260831 L-1: the hero used `1fr 1fr`, and an `fr` track's automatic minimum is min-content —
   so as the window narrowed the buy panel's own min-content pushed past 50% and the photo,
   object-fit:cover in a shrinking box, got cropped. The photo is the fixed quantity now: the
   media column holds a constant width across the desktop range and the TEXT column absorbs
   the squeeze down to a floor. See the >=750px block near the end of this stylesheet for the
   track definition; this base rule is the <750px / no-support fallback. */
.fp-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.fp-media { position:relative; overflow:hidden; min-width:0; }
.fp-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left bottom; }
.fp-buy { padding:clamp(22px,2.2vw,34px) clamp(20px,2.5vw,38px); display:flex; flex-direction:column; min-width:0; }
.fp-name-row { display:flex; align-items:baseline; justify-content:space-between; gap:calc(16 * var(--fp-u)); min-width:0; }
/* 260831 L-2: assets/base.css sets `h1 { word-break: break-word }`, which in Chrome behaves as
   overflow-wrap:anywhere — that is what split BOTANICAL SODA into "BOTANIC / AL SODA" on the
   variety pack. Magiel is display type; it breaks at spaces or not at all. The size scales with
   the panel instead (see the container-query block below). */
.fp-name { font-size:calc(58 * var(--fp-u)); line-height:0.9; letter-spacing:0.005em; margin:0; text-transform:uppercase;
  word-break:normal; overflow-wrap:normal; hyphens:none; min-width:0; }
/* 260902 (Jason, style line): the statement of ID under the name renders at the SAME computed
   size as the mood line at every width. They used to run two ramps — 25/21/clamp(17,4.2cqi,25)
   against 28.8/26/clamp(19,4.8cqi,28.8) — which is how they drifted. --fp-mood is now the one
   expression, declared on .fp once per breakpoint (base here, phone in the <=749px block,
   desktop in the >=750px container block). cqi resolves where the value is USED, not where it
   is declared, and both consumers sit inside the fpbuy container, so the desktop clamp still
   measures the buy panel. Slope and weight, not size, are what separate the two lines now.
   margin-top is 6 -> 8: at 28.8/1.3 the style line runs 37.4px tall under a 52.2px name line
   box and 6px read tight. Measured 1440: name bottom 112, style 120-158, blurb top 174. */
.fp { --fp-mood: calc(28.8 * var(--fp-u)); }
.fp-style { font-weight:600; font-style:italic; font-size:var(--fp-mood); line-height:1.3; margin-top:calc(8 * var(--fp-u)); opacity:1; }
.fp-blurb { margin:calc(16 * var(--fp-u)) 0 calc(18 * var(--fp-u)); font-size:var(--fp-mood); line-height:1.3; letter-spacing:0.005em; }
.fp-block { margin:calc(8 * var(--fp-u)) 0 0; }
.fp-eyebrow { font-size:calc(12 * var(--fp-u)); letter-spacing:0.02em; opacity:0.5; margin:0 0 calc(7 * var(--fp-u)); }

/* ONE control treatment (v2 prototype): Abril 16px, flat, radius 3px. Selected = navy border + light fill. */
.fp-pill { display:inline-flex; align-items:center; justify-content:center; text-align:center; font-family:inherit; font-size:calc(16 * var(--fp-u)); letter-spacing:0.01em; line-height:1.1; cursor:pointer; border-radius:3px; box-sizing:border-box; border:1px solid var(--line3); background:transparent; color:var(--navy); transition:border-color .2s ease, background .2s ease; }
.fp-pill:hover:not(.is-on) { border-color:rgba(49,56,64,0.5); background:rgba(49,56,64,0.028); }
.fp-pill.is-on { border-color:var(--navy); background:rgba(49,56,64,0.05); color:var(--navy); }
.fp-packs { display:flex; }
.fp-pack { flex:1; flex-direction:column; gap:calc(3 * var(--fp-u)); padding:0 calc(6 * var(--fp-u)); min-height:var(--ctl-h); }
.fp-pack-a { font-size:calc(16 * var(--fp-u)); line-height:1; }
.fp-pack-b { font-size:calc(12 * var(--fp-u)); letter-spacing:0.01em; opacity:0.6; }
.fp-formats { display:flex; }
.fp-fmt { flex:1; padding:0 calc(8 * var(--fp-u)); min-height:var(--ctl-h); position:relative; }
.fp-fmt-i { position:absolute; right:calc(8 * var(--fp-u)); bottom:calc(7 * var(--fp-u)); width:calc(18 * var(--fp-u)); height:calc(18 * var(--fp-u)); box-sizing:border-box; border:1px solid rgba(49,56,64,0.45); border-radius:50%; font-family:Georgia,serif; font-size:calc(11 * var(--fp-u)); font-style:italic; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease; }
.fp-fmt-i:hover { background:var(--navy); color:var(--cream); border-color:var(--navy); }
.fp-fmt.is-on .fp-fmt-i:hover { background:var(--cream); color:var(--navy); border-color:var(--cream); }
.fp-fmt-info { position:relative; margin:calc(6 * var(--fp-u)) 0 2px; border-top:1px solid var(--navy); padding:calc(8 * var(--fp-u)) 0 calc(4 * var(--fp-u)); }
.fp-fmt-info[hidden] { display:none; }
.fp-fmt-info-notch { position:absolute; top:calc(-5 * var(--fp-u)); right:calc(15 * var(--fp-u)); width:calc(8 * var(--fp-u)); height:calc(8 * var(--fp-u)); background:var(--cream); border-top:1px solid var(--navy); border-left:1px solid var(--navy); transform:rotate(45deg); }
.fp-fmt-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:calc(8 * var(--fp-u)); }
.fp-fmt-info-grid p { margin:0; font-size:calc(12 * var(--fp-u)); line-height:1.5; opacity:0.6; }
.fp-fmt-info-grid p:first-child { padding-right:calc(10 * var(--fp-u)); }
.fp-fmt-info-grid p:last-child { padding-left:calc(10 * var(--fp-u)); }
.fp-cadence { display:flex; margin-top:calc(9 * var(--fp-u)); }
.fp-cadence[hidden] { display:none; }
.fp-cad { flex:1; padding:0 calc(4 * var(--fp-u)); min-height:var(--ctl-h); }
/* 260902 (Jason, D5): cadence dropdown. Pill face on a native select; the chevron is an
   inline SVG in the flat navy (#313840 = --navy) because appearance:none removes the
   platform arrow and a data URI cannot read a custom property. */
.fp-cad-select { flex:1; min-height:var(--ctl-h); padding:0 calc(36 * var(--fp-u)) 0 calc(12 * var(--fp-u));
  font-family:inherit; font-size:calc(16 * var(--fp-u)); letter-spacing:0.01em; line-height:1.1;
  color:var(--navy); background:transparent; border:1px solid var(--line3); border-radius:3px;
  box-sizing:border-box; cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23313840' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right calc(14 * var(--fp-u)) center; }
.fp-cad-select:hover { border-color:rgba(49,56,64,0.5); }
.fp-cad-select:focus-visible { outline:none; border-color:var(--navy); }

/* 260902 (Jason, merged groups): an option group is ONE segmented control, not a row of
   separate chips. This is the .fp-drow construction (above) generalised to a horizontal group
   that is allowed to wrap: the buttons stay separate elements, they overlap by 1px so two 1px
   borders read as one 1px seam, and only the GROUP's outer corners round.
     - The pull-back is on both axes and on EVERY child, including the first of each wrapped
       line, because no CSS selector knows where a flex line begins. The container pays the 1px
       back as padding, so the block's painted span is unchanged: measured at 1440 the pack row
       still runs 756 -> 1389.3, exactly the span of .fp-drow and .fp-atc-grid beneath it.
     - Rounding lives on the container with overflow:hidden rather than on :first-child /
       :last-child, so a group that has wrapped rounds its four BLOCK corners and leaves every
       internal corner square. Measured wrapped at a 1024 viewport: packs 2x2, cadence 3x2,
       every seam 1px, both axes.
     - Selected state is unchanged (navy border + 5% navy fill, as .fp-drow.is-on) and stays
       legible at a shared seam because .is-on is raised above both neighbours; hover is raised
       above the un-hovered ones so a hover border is not half-covered by the next button's.
       z-index needs position, hence position:relative on the group's children.
     - overflow:hidden would clip a default focus ring drawn outside the button, so the focus
       outline is drawn inset. Tap targets are untouched: min-height is still --ctl-h, 48px on a
       phone, measured 48.0 tall at 390 (packs 87.3 wide, cadence 58.5 wide).
   .fp-pack-tabs is NOT in this list on purpose — the variety-pack flavor tabs carry no border
   and are selected by colour (260902 Jason item 1); merging them would undo that. */
.fp-packs, .fp-formats, .fp-cadence {
  gap: 0;
  padding-left: 1px;      /* cancels the -1px pull on the first button of every line */
  padding-bottom: 1px;    /* cancels the -1px pull on the last line */
  border-radius: 3px;
  overflow: hidden;
}
.fp-packs > *, .fp-formats > *, .fp-cadence > * {
  margin-left: -1px;
  margin-bottom: -1px;
  border-radius: 0;
  position: relative;
}
.fp-pill:hover { z-index: 1; }
.fp-pill.is-on { z-index: 2; }
.fp-pill:focus-visible { outline: 2px solid var(--navy); outline-offset: -3px; z-index: 3; }
.fp-delivery { display:flex; flex-direction:column; }
.fp-drow { position:relative; display:flex; align-items:center; justify-content:space-between; padding:calc(13 * var(--fp-u)) calc(16 * var(--fp-u)); cursor:pointer; font-size:calc(16 * var(--fp-u)); background:transparent; box-sizing:border-box; border:1px solid var(--line3); border-radius:3px 3px 0 0; }
.fp-drow + .fp-drow { margin-top:-1px; border-radius:0 0 3px 3px; }
.fp-drow.is-on { border-color:var(--navy); background:rgba(49,56,64,0.05); z-index:1; }
.fp-drow:hover:not(.is-on) { border-color:rgba(49,56,64,0.5); background:rgba(49,56,64,0.028); }
.fp-drow input { position:absolute; opacity:0; pointer-events:none; }
.fp-drow-l { display:flex; align-items:center; gap:calc(11 * var(--fp-u)); }
.fp-dot { width:calc(15 * var(--fp-u)); height:calc(15 * var(--fp-u)); border:1.5px solid rgba(49,56,64,0.4); border-radius:50%; flex:none; box-sizing:border-box; background:transparent; }
.fp-drow input:checked ~ .fp-drow-l .fp-dot,
.fp-drow.is-on .fp-dot { border:4.5px solid var(--navy); background:var(--cream); }
.fp-atc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(12 * var(--fp-u)); align-items:stretch; margin-top:calc(8 * var(--fp-u)); }
.fp-atc { grid-column:span 2; border-radius:3px; padding:0 calc(24 * var(--fp-u)); min-height:var(--ctl-h); background:var(--navy); color:var(--cream); border:none; cursor:pointer; font-family:inherit; font-size:calc(17 * var(--fp-u)); letter-spacing:0.01em; display:flex; align-items:center; justify-content:center; gap:calc(12 * var(--fp-u)); }
.fp-atc[disabled] { opacity:0.5; cursor:not-allowed; }
.fp-atc:hover:not([disabled]) { opacity:0.86; }
.fp-atc:active:not([disabled]) { opacity:0.72; }
.fp-atc-sep { opacity:0.5; }
.fp-qty { grid-column:span 1; display:flex; align-items:stretch; min-height:var(--ctl-h); border:1px solid var(--line3); border-radius:3px; overflow:hidden; box-sizing:border-box; }
.fp-qty-btn { font-size:calc(20 * var(--fp-u)); width:calc(46 * var(--fp-u)); padding:0; background:transparent; border:none; color:var(--navy); line-height:1; cursor:pointer; font-family:inherit; }
.fp-qty-n { flex:1; min-width:0; display:flex; align-items:center; justify-content:center; border-left:1px solid var(--line2); border-right:1px solid var(--line2); }
.fp-qty-n input { width:calc(38 * var(--fp-u)); text-align:center; border:0; background:transparent; font-family:inherit; font-size:calc(18 * var(--fp-u)); -moz-appearance:textfield; }
.fp-qty-n input::-webkit-outer-spin-button,.fp-qty-n input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }

.fp-thumbs { position:absolute; right:calc(14 * var(--fp-u)); bottom:calc(14 * var(--fp-u)); display:flex; gap:calc(8 * var(--fp-u)); z-index:2; }
.fp-thumb { width:calc(44 * var(--fp-u)); height:calc(44 * var(--fp-u)); padding:0; border:1px solid rgba(255,243,224,0.65); background:var(--cream); cursor:pointer; overflow:hidden; }
.fp-thumb.is-on { border:2px solid var(--navy); }
.fp-thumb-img { width:100%; height:100%; object-fit:cover; display:block; }

.fp-fams { display:grid; grid-template-columns:repeat(3,1fr); gap:calc(24 * var(--fp-u)) calc(44 * var(--fp-u)); margin-top:calc(16 * var(--fp-u)); }
/* 260902 (Jason item 3): the underline is gone from the family headers too. It survived the
   260902 item-2 pass because that pass only de-underlined the TERMS, and this base rule kept
   drawing a line under every family name — measured on /products/alta-cans before the fix:
   .fp-arom .fp-fam-label computed text-decoration-line:underline. Nothing in the aromatics
   chart underlines now, in any state — the header/term separation is carried by the FACE
   (display caps over Abril lowercase), see the .fp-arom block below. */
.fp-fam-label { font-weight:600; font-style:normal; font-size:calc(12 * var(--fp-u)); line-height:1.9; opacity:0.85; text-transform:lowercase; text-decoration:none; }
.fp-fam-list { font-size:calc(12 * var(--fp-u)); line-height:1.9; text-transform:lowercase; display:flex; flex-direction:column; }
/* 260831 review: one aromatic per line and no separator between them, so a two-word term that
   wraps ("mandarin orange" in a 106px phone column) reads as two separate aromatics. A hanging
   indent makes the second line visibly a continuation. No wraps occur at desktop widths, so
   nothing moves there. */
.fp-fam-list > div { padding-left:calc(9 * var(--fp-u)); text-indent:calc(-9 * var(--fp-u)); }
/* A linked aromatic is set exactly like every other term — same family, size, weight and slope —
   and carries no underline in any state. The affordance is the drawer that slides out on click
   plus the accent the term takes on hover and keyboard focus.
   NOTE ON THIS BLOCK: nothing in the theme renders .fp-fams outside the .fp-arom module any
   more (the hero's half-column grid went away at 260831 L-3, and
   snippets/flavor-aromatics-fams.liquid is unrendered). These are the base pair, kept only so
   the module has a floor to override; the live chart is styled in the .fp-arom block further
   down and that block is the one to read. */
.fp-fam-list a { color:inherit; font-size:inherit; font-family:inherit; font-weight:inherit; font-style:normal; text-decoration:none; border-bottom:none; }
.fp-fam-list a:hover { text-decoration:none; color:var(--arom-accent, var(--accent)); }
.fp-explore { display:inline-block; margin-top:calc(24 * var(--fp-u)); font-size:calc(12 * var(--fp-u)); color:var(--accent); text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
/* 260828 R6 (item 2): same link treatment, sitting under the sold-out button. Only the
   top margin differs — it follows a control, not a paragraph. */
.fp-explore-bis { margin-top:calc(12 * var(--fp-u)); align-self:flex-start; font-size:calc(16 * var(--fp-u)); }
.fp-explore-bis[hidden] { display:none; }
/* 260901 (Jason fix 1): the story quadrant's explore link, inline at the end of the
   description. font-size:inherit is load-bearing — the theme sets `a { font-size: 1.3rem }`,
   which beats inheritance from the <p> (same trap .fp-copy-more hit). Everything typographic
   comes from .fp-story-body; only the accent colour and the underline mark it as a link.
   No white-space:nowrap: this rides inside running copy and must be allowed to wrap. */
.fp-explore-inline { font-family:inherit; font-size:inherit; font-weight:inherit; font-style:inherit;
  line-height:inherit; letter-spacing:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

/* W-19: variable-aromatics tabs for variety packs (handoff 260715, direction 1a)

   260902 (Jason item 1): the tab list is compressed and de-ruled. What changed and why:

     - The hairline under the list and the 2px underline under each tab are BOTH gone. They
       were the same idea twice — a rule to sit on and a rule to mark the active tab — and
       between them they cost 3px of ink and forced 10px of bottom padding to clear them.
     - Colour is the selection indicator now. Each button carries its own flavor's
       --tab-accent inline (see the markup above); the selected name is set in it, the rest
       stay navy at the same muted weight they always had. aria-selected still carries the
       state programmatically, so this is not a colour-only signal.
     - Vertical pitch: 22px/lh 1 + 10px padding + 2px border + 22px margin = 56px from the
       top of the list to the top of the panel, per ROW. Now 18px/lh 1.05 + 10px margin =
       ~29px, and a wrapped second row costs 27px rather than 60px.
     - white-space:nowrap is the load-bearing line for "a flavor name never breaks". Magiel
       Black is wide, the story cell narrows to ~360px on a 1000px window, and ONDA breaking
       to ON / DA is what a flex item does by default when the row runs out. Nowrap pushes
       the whole name to the next row instead, which flex-wrap already handles.
     - text-decoration:none is belt-and-braces: nothing in the theme underlines a <button>
       today, but the whole point of this change is that no line renders under a tab. */
.fp-pack-tabs { display:flex; flex-wrap:wrap; column-gap:calc(22 * var(--fp-u)); row-gap:calc(8 * var(--fp-u)); margin-bottom:calc(10 * var(--fp-u)); }
.fp-pack-tab { font-family:"Magiel Black",sans-serif; font-weight:900; text-transform:uppercase; font-size:calc(18 * var(--fp-u)); line-height:1.05; letter-spacing:0.01em; white-space:nowrap; padding:0; background:transparent; border:none; text-decoration:none; cursor:pointer; color:rgba(49,56,64,0.70); }
.fp-pack-tab.is-on { color:var(--tab-accent, var(--accent)); }
.fp-pack-panel[hidden] { display:none; }
.fp-pack-line { margin:0 0 calc(16 * var(--fp-u)); }
.fp-pack .fp-fams { margin-top:calc(16 * var(--fp-u)); }

/* 260828 R6 (Jason item 2): the .fp-subrow substitute band and its .fp-sub-* card styles are
   removed. One line under the sold-out button does the same work. */

/* 260828 D-1: no standing signup block. The email row is revealed by the sold-out ATC button. */
.fp-bis { margin-top:calc(10 * var(--fp-u)); }
.fp-bis[hidden] { display:none; }
.fp-bis-row { display:flex; gap:calc(8 * var(--fp-u)); }
.fp-bis-email { flex:1; padding:0 calc(14 * var(--fp-u)); min-height:var(--ctl-h); box-sizing:border-box; font-family:inherit; font-size:calc(15 * var(--fp-u)); color:var(--navy); background:transparent; border:1px solid var(--line3); border-radius:5px; }
.fp-bis-btn { padding:0 calc(18 * var(--fp-u)); min-height:var(--ctl-h); }
.fp-bis-msg { font-size:calc(13 * var(--fp-u)); margin-top:calc(8 * var(--fp-u)); opacity:0.75; }
/* Sold out: the button spans the full row (quantity is meaningless) and reads as the notify CTA. */
.fp-atc-grid.is-bis { grid-template-columns:1fr; }
.fp-atc-grid.is-bis .fp-qty { display:none; }
.fp-atc-grid.is-bis .fp-atc { grid-column:1 / -1; font-size:calc(16 * var(--fp-u)); }

/* v2: the design prototype has no sticky buy bar — parked, not removed. */
.fp-sticky { display:none !important; position:fixed; left:0; right:0; bottom:0; z-index:40; align-items:center; gap:calc(22 * var(--fp-u)); background:var(--navy); color:var(--cream); padding:calc(10 * var(--fp-u)) calc(24 * var(--fp-u)); }
.fp-sticky[hidden] { display:none; }
.fp-sticky-info { display:flex; align-items:baseline; gap:calc(10 * var(--fp-u)); font-size:calc(15 * var(--fp-u)); flex:none; }
.fp-sticky-name { font-family:"Magiel Black",sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:0.03em; }
.fp-sticky-ctls { display:flex; align-items:center; gap:calc(16 * var(--fp-u)); flex:1; justify-content:center; flex-wrap:wrap; }
.fp-sticky-group { display:flex; gap:calc(4 * var(--fp-u)); }
.fp-schip { font-family:inherit; font-size:calc(13 * var(--fp-u)); letter-spacing:0.01em; line-height:1; padding:calc(8 * var(--fp-u)) calc(11 * var(--fp-u)); border-radius:4px; border:1px solid rgba(255,243,224,0.35); background:transparent; color:var(--cream); cursor:pointer; }
.fp-schip.is-on { background:var(--cream); color:var(--navy); border-color:var(--cream); }
.fp-sticky-atc { background:var(--cream); color:var(--navy); border:none; border-radius:5px; font-family:inherit; font-size:calc(15 * var(--fp-u)); padding:calc(11 * var(--fp-u)) calc(20 * var(--fp-u)); cursor:pointer; white-space:nowrap; flex:none; }
.fp-sticky-atc[disabled] { opacity:0.5; cursor:not-allowed; }

/* 260901 (Jason fix 1b): the story quadrant's padding MIRRORS the buy panel's, so the two
   text cells of the hero are inset by the same amount. These are the same two clamps
   .fp-buy carries above — vertical clamp(22,2.2vw,34), horizontal clamp(20,2.5vw,38) —
   written out rather than shared, because .fp-buy also sets flex/container properties this
   cell must not inherit. Both resolve against the viewport (not cqi), so they stay equal at
   every width. Measured 1440: 31.68px / 36px on both. */
.fp-story-inner { padding:clamp(22px,2.2vw,34px) clamp(20px,2.5vw,38px); }
/* 260902 (Jason, post-launch): the long description matches the mood line and aromatics.
   Same vw mirror as --fp-arom-size (see THE MOOD MIRROR note at the aromatics band) because
   the story cell, like the aromatics band, sits outside .fp-buy's cq container — var(--fp-mood)
   here would resolve its cqi against the viewport in the 1000-1600 band and balloon. Leading
   comes down 1.55 -> 1.3, the value the mood line and aromatics both carry. */
.fp-story-body { margin:0; font-size:clamp(19px, 4.56vw - 35.28px, calc(28.8 * var(--fp-u))); line-height:1.3; letter-spacing:0.005em; }
.fp-evoc { position:relative; display:grid; grid-template-columns:repeat(3,1fr); }
.fp-evoc div { position:relative; overflow:hidden; }
/* 260902 (Jason, rail): the crops carry their own proportion now. Until 260901 the rail's
   height came from min-height:clamp(220px,18vw,320px) on .fp-evoc; that was a floor under the
   TEXT and was rightly removed. But .fp-evoc div holds an absolutely-positioned img, so its own
   content height is zero — with the floor gone the rail simply inherited whatever height the
   story copy produced, and the crop proportion became a by-product of line count. It degrades
   as the screen widens, because the media track grows with 45vw while the copy re-flows onto
   fewer lines: measured on /products/alta-cans, 235x142 (1.65:1, 48% of the 4:5 source frame)
   at 1440 and 347x121 (2.88:1, 28% of the frame) at 1920. The sources are portrait — 1440x1800
   on all three of alta's atmosphere shots — so a flat box crops them to nothing.
   4/3 is a photographic landscape crop, held at every desktop width; it shows 60% of the frame.
   align-self:stretch is not decoration: `normal` does NOT stretch a box that has an
   aspect-ratio, and without it the crops sit at their ratio height inside a taller row and
   leave cream INSIDE the rail wherever the story copy runs long (measured 78px of crop in a
   143px row at a deliberately flat 3/1). With it, .fp-evoc's existing grid-template-rows:1fr
   still lets the copy drive the row when the copy is the taller of the two — verified at 1024,
   story cell 124.7, crops 124.1, no gap. min-height:100% is the belt-and-braces fallback for an
   engine that reads the stretch rule differently; where stretch works it is a no-op.
   Mobile is untouched: the <=749px block sets its own 150px band and aspect-ratio:auto.
   260902 ASSEMBLY FIX — width:100% is load-bearing and is NOT tidying. A grid item that has an
   aspect-ratio and is stretched in the block axis takes its INLINE size from the ratio, not
   from its track: align-self:stretch made the height definite, and the width then computed as
   height x 4/3 instead of filling the 1fr column. Measured on /products/alta-cans at a 1024
   viewport before this line: the row was copy-driven at 125.06, so each crop came out
   124.06 x 4/3 = 165.41 wide inside a 120px track — three of them, 496px of photos in a 360px
   rail, and 45px of horizontal page scroll. It is invisible at 1440 only because the ratio
   height and the track width happen to agree there (235 wide, 176.25 tall, exactly 4:3).
   width:100% makes the inline size definite so the crop fills its column, and the ratio still
   sets the ROW height through the item's intrinsic contribution — verified unchanged at 1440
   (evoc 705 x 177.25, crops 235 x 176.25) and fixed at 1024 (crops 120 x 124.06, overflow 0).
   min-width:0 does NOT fix this: the width is ratio-derived, not an automatic minimum. */
@media (min-width: 750px) {
  .fp-evoc div { aspect-ratio: 4 / 3; align-self: stretch; min-height: 100%; width: 100%; }
}
.fp-evoc img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* 260831 L-3: aromatics as its own full-width module between the hero and press crawl 2.
   Same hairline language as the hero quadrants — a rule above, the crawl's own rule below. */
/* 260901 (Jason fix 4 / fix 2a): press crawl 2 used to sit directly under this band, and its
   own border-top was what closed the band off. With the crawl gone the band draws its own
   bottom hairline — same --line, same language as the top one — so the module still terminates
   on a rule rather than bleeding into the how-to table. */
.fp-arom { background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* 260901 (Jason fix 2a): more room below the chart than above it. The band reads as a plate of
   type; symmetric padding let the last row of aromatics sit almost on the closing rule. Top is
   unchanged, bottom is roughly doubled. */
.fp-arom-inner { padding:clamp(24px,2.4vw,34px) clamp(20px,2.5vw,38px) clamp(44px,4.4vw,64px); }
.fp-arom-panel[hidden] { display:none; }

/* 260901 (Jason fix 2): the band is three equal thirds of centred type and nothing else.
   The "Aromatics" eyebrow is gone from the markup, so .fp-arom-eyebrow is gone from here.

   EXACT thirds: column-gap is 0 and the tracks are repeat(3, 1fr), so each .fp-fam measures
   the band width / 3 to the pixel. The columns need no gutter because the type is centred
   inside them and sized to leave ~10% clear on each side (below).

   ONE size for the whole band, labels and lists alike — the 12px/12px parity the module has
   always had, scaled up. Line height comes down from 1.9: that leading was set for 12px type
   and would open a 400px hole per column at this size.

   260902 (Jason item 3): THE SIZE *IS* THE MOOD LINE'S, not merely its ceiling. This
   SUPERSEDES the 260902 item-2 note that said matching only at the top of the range was
   deliberate. That version matched the 28.8px ceiling and kept a 3.6vw ramp under it, so the
   chart read 28.8px at a 1024 window where the mood line read 19px — the defect Jason is
   looking at. --fp-arom-size resolves to the SAME number .fp-blurb resolves to at every
   desktop width — with the terms back on Abril there is no width at which it yields; the phone
   block is the only place a fit cap still binds. Measured on the Transatlantic case with all
   six panels unhidden, mood line / chart: 1440 28.8/28.8, 1024 19/19, 800 19/19.

   THE MOOD MIRROR. .fp-blurb is clamp(19px, 4.8cqi, 28.8px) and cqi resolves against .fp-buy's
   CONTENT box. This band is not inside that container, so cqi is unavailable here and the
   value has to be mirrored in vw. The hero tracks make that deterministic (see the >=750px
   L-1 block):
     media = max(720px, 45vw)                buy  = max(360px, 100vw - 15px scrollbar - media)
     pad   = clamp(20px, 2.5vw, 38px) a side  content = buy - 2 x pad
   Through the 1080-1600 range that is content = 0.95vw - 735px, and 4.8% of it is
   4.56vw - 35.28px; it sits on the 19px floor below ~1190 and reaches 28.8px at ~1404.
   Measured against the live .fp-blurb on /products/variety-case-transatlantic-leisure-sodas,
   mirror vs. mood line:
     1600 28.8/28.8   1440 28.8/28.8   1300 24.00/24.00   1200 19.44/19.44
     1150 19/19       1024 19/19        800 19/19
   This is a MIRROR of a value it cannot read. If the hero tracks change (--fp-media-w,
   --fp-buy-min) or .fp-buy's horizontal padding changes, this expression is stale and has to
   be re-derived. That is the price of matching a container-sized value from outside its
   container; moving .fp-blurb off cqi is the alternative and the L-1/L-2 notes rule it out.

   NO FIT RAMP ON DESKTOP. This SUPERSEDES the 260902 item-3 fit ramp entirely. That ramp
   existed because the TERMS were set in caps display type — BLACKSTRAP MOLASSES measured
   14.03em in Magiel and could not hold a 247px column at the mood line, so the chart had to
   yield below ~950px. 260902 (Jason, correction) puts the terms back on Abril regular and moves
   the display face to the HEADERS, and Abril lowercase is 1.74x narrower: measured in-browser
   on the live faces, the widest live term is "blackstrap molasses" (Isla, and the Isla panel of
   the Transatlantic case) at 8.08em, and the widest family header is MARINE at 4.565em in
   Magiel / FLORAL at 5.952em in venn-extended.
   At 8.08em the mood line never overruns the column, at any desktop width — so the ramp has no
   width at which it binds and it is gone rather than left in as a no-op. Column is
   (100vw - 15px scrollbar - two band paddings) / 3; check, widest term against column:
     vw    mood   column   "blackstrap molasses"   MARINE (hdr)
     1440  28.8   451.0    232.7 (51.6%)           131.5 (29.2%)
     1024  19.0   319.1    153.5 (48.1%)            86.7 (27.2%)
      800  19.0   248.3    153.5 (61.8%)            86.7 (34.9%)
      750  19.0   232.5    153.5 (66.0%)            86.7 (37.3%)
   The phone block at the end of this stylesheet is the one place a fit cap survives, because
   a third of a 390px screen is 115px and the 26px phone mood line genuinely does not fit there.
   --fp-arom-em (the widest term, in ems of the TERM face) is declared here and read only by
   that phone expression.

   IF A TERM IS ADDED OR RENAMED, --fp-arom-em is the one number to update: set a span to
   font-size:100px in abril-titling-condensed 400 at 0.005em, measure the longest term as
   stored (lowercase) and divide by 100. Nothing else in this module moves. */
.fp-arom { --fp-arom-em: 8.08;
  --fp-arom-size: clamp(19px, 4.56vw - 35.28px, 28.8px); }
.fp-arom .fp-fams { grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:0;
  row-gap:clamp(20px,2.2vw,32px); margin-top:0; }
.fp-arom .fp-fam { min-width:0; text-align:center; }
/* 260902 (Jason, correction): the ACCENT DISPLAY FACE IS ON THE HEADERS.
   This SUPERSEDES both earlier passes at this pair — 260902 item 2 (headers Abril semibold
   ITALIC) and 260902 item 3 (TERMS in caps display type). Item 3 put the display face on the
   wrong element; the family name is the label and takes the product's own accent face, and the
   terms are running botanical names and go back to reading like the mood line.
   Magiel is the soda face and a pack's tabs are sodas, so Magiel is the default here and the
   venn modifier is the exception — one rule, one override, no per-term branching. The class is
   set by the Liquid above off the product's template suffix (.fp-arom--venn).
   Both spellings of Magiel are listed for the reason assets/casamara-card.css lists both:
   layout/theme.liquid registers 'Magiel' and 'Magiel Black' against the SAME CDN woff2, so the
   chart follows whichever family name the loaded face reports. Measured: identical advance
   widths from either name and at either weight, because there is one file behind both.
   text-transform:uppercase beats the base .fp-fam-label lowercase on specificity (0-2-0 vs
   0-1-0). opacity is lifted off the base's 0.85: the header is now the emphasised element of
   the pair and a dimmed display cap fights that.
   Same size as the terms, as the module has always been — one field of type, two faces. */
.fp-arom .fp-fam-label { font-size:var(--fp-arom-size); line-height:1.2; margin-bottom:0.3em;
  font-family:'Magiel','Magiel Black',Georgia,sans-serif; font-weight:900; font-style:normal;
  text-transform:uppercase; letter-spacing:0.01em; text-decoration:none; opacity:1; }
/* venn-extended is served at 700 and nothing else, so 700 IS the weight; 0.04em is the tracking
   the Venn card name already carries (assets/casamara-card.css .cc-card__name--venn). */
.fp-arom--venn .fp-fam-label { font-family:'venn-extended','abril-titling-condensed',Georgia,serif;
  font-weight:700; letter-spacing:0.04em; font-size:calc(var(--fp-arom-size) * 0.9); }
/* The TERMS are the mood line: abril-titling-condensed regular, roman, sentence case AS STORED
   (text-transform:none, so "orris root" stays "orris root"), 0.005em tracking and 1.3 leading —
   the four values .fp-blurb carries — at --fp-arom-size, which is the mood line's own computed
   size mirrored in vw. No caps, no underline, in any state.
   text-decoration:none is on this block, not only on the <a>, because a decoration set on a
   block PROPAGATES to its inline descendants and no rule on the link can cancel it. */
.fp-arom .fp-fam-list { font-size:var(--fp-arom-size); line-height:1.3;
  font-family:'abril-titling-condensed',Georgia,serif; font-weight:400; font-style:normal;
  text-transform:none; letter-spacing:0.005em; text-decoration:none; }

/* 260901 (Jason fix 2b): a hairline between the columns, in the product's accent at reduced
   strength. --arom-accent is the flavor's own accent: the section sets --accent for a single
   flavor, and on a pack each .fp-arom-panel overrides --arom-accent inline with the referenced
   flavor's accent_color, so switching a W-19 tab switches the rule colour with the chart.
   Colour is applied twice on purpose: the rgba navy is the floor a browser without color-mix
   lands on (the "navy-muted fallback"), and the color-mix line takes over where it is
   supported. Accent hexes come from the metafield as opaque values, so there is no way to
   fade one without mixing.
   Columns 2 and 3 of every row carry the rule, never column 1 — nth-child(3n+1) is the left
   edge of a row, and a flavor with more than three families would otherwise draw a rule down
   the outside of the band. */
.fp-arom .fp-fam:nth-child(3n+2), .fp-arom .fp-fam:nth-child(3n+3) {
  border-left:1px solid rgba(49,56,64,0.18); }
@supports (color: color-mix(in srgb, red, blue)) {
  .fp-arom .fp-fam:nth-child(3n+2), .fp-arom .fp-fam:nth-child(3n+3) {
    border-left-color:color-mix(in srgb, var(--arom-accent, var(--accent)) 38%, transparent); }
}
/* 260901 (Jason fix 2c): the aromatics link to their Botanical Index entries, quietly. Colour,
   size and family are all inherited — twenty-seven blue underlines would turn the chart into a
   link farm.
   260901 (Jason item 2a): the underline is gone in both states.
   260902 (Jason item 2): SUPERSEDES the italic half of that decision. A linked term is set
   roman, exactly like an unlinked one — the terms are one uniform field of type. (The italic
   briefly moved to the family headers; the headers are display caps now, and the term
   treatment below is unaffected either way.) The affordance did not go anywhere: the term turns
   the active flavor's accent on hover and on keyboard focus (--arom-accent on a pack panel,
   --accent on a single flavor, the same PDP-wide hover the rest of the page's links take), and
   clicking still slides the Botanical Index drawer out. What is lost is the at-rest tell of
   WHICH terms open something; that was the trade Jason made.
   font-size:inherit is load-bearing here for the same reason it is on .fp-explore-inline: the
   theme sets a { font-size: 1.3rem }, which beats plain inheritance. */
.fp-arom .fp-fam-list a,
.fp-arom .fp-fam-list a:link,
.fp-arom .fp-fam-list a:visited { color:inherit; font-family:inherit; font-size:inherit;
  font-weight:inherit; letter-spacing:inherit; text-transform:inherit; font-style:normal;
  text-decoration:none; border-bottom:none; cursor:pointer; }
/* font-weight:inherit joins font-size:inherit as load-bearing. The theme's own
   `body,h1..h6,a { font-family; font-weight }` block sets a weight on every anchor and beats
   plain inheritance, the same trap font-size falls into. It happens to agree with the term
   weight today (both 400 now that the terms are Abril regular), which is exactly why the line
   stays: the day the term weight moves, an unstated inherit is what breaks.
   Every state named below, not just rest and hover: :active covers the frame between mousedown
   and the drawer opening. Nothing here draws a line, and nothing may. :focus-visible keeps its
   own rule because a browser that does not know the pseudo-class drops the entire selector
   list it appears in — sharing one would take the :hover rule down with it. */
.fp-arom .fp-fam-list a:hover,
.fp-arom .fp-fam-list a:active { text-decoration:none; color:var(--arom-accent, var(--accent)); }
.fp-arom .fp-fam-list a:focus-visible { text-decoration:none; color:var(--arom-accent, var(--accent)); }
/* the hanging indent was there so a wrapped two-word aromatic read as one entry in a 106px
   phone column. Nothing wraps now and the type is centred, so an indent would push every
   line off centre. */
.fp-arom .fp-fam-list > div { padding-left:0; text-indent:0; }

/* 260901 (Jason fix 4): one crawl in this section, at the top. The adjacency rules that
   suppressed a doubled hairline under crawls 2 and 3 are gone with them, and so are
   .fp-press-2 / .fp-press-3 and the reversed keyframes only crawl 2 used. */
.fp-crawl { background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:calc(14 * var(--fp-u)) 0; overflow:hidden; }
.fp-press-mask { overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.fp-press-track { display:flex; align-items:baseline; width:max-content; }
.fp-press-1 { animation:fp-crawl var(--fp-crawl-dur,60s) linear infinite; }
.fp-press-dot { width:calc(7 * var(--fp-u)); height:calc(7 * var(--fp-u)); border-radius:50%; background:var(--accent); flex:none; margin-left:calc(17 * var(--fp-u)); align-self:center; }
.fp-press-item { display:flex; align-items:baseline; gap:calc(5 * var(--fp-u)); padding-right:calc(22 * var(--fp-u)); white-space:nowrap; }
.fp-press-q { font-size:calc(18 * var(--fp-u)); line-height:1; font-style:italic; }
.fp-press-src { font-weight:600; font-style:italic; font-size:calc(13 * var(--fp-u)); opacity:0.7; }
@keyframes fp-crawl { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce) { .fp-press-track { animation:none; flex-wrap:wrap; white-space:normal; } }

.fp-table { background:var(--cream); overflow-anchor:none; padding:calc(34 * var(--fp-u)) calc(38 * var(--fp-u)); }
.fp-table * { overflow-anchor:none; }

/* 260828 D-4: image-led tiles, structure copied from the landing page's link-tile module.
   Tiles occupy row 1; the open panel spans the full width in row 2. */
/* 260828 R6 (Jason item 4): "put the boxes BELOW the image ... when a tab is open on desktop
   view, give me a single border line that wraps around the combined header and text (so the
   outline will be shaped like a tabbed index card)."

   260831 L-4 (Jason): "bring the hairline border right up around the photo — tight to the
   image, not offset around a larger box." The outline moves from the label box to the TILE.
   The photo is width:100% of the tile, so the tile's left, right and top borders sit exactly
   on the image edges; the tab of the index card is now photo + label together, not the label
   alone. The label box keeps its padding and min-height (metrics unchanged) but no longer
   draws a border of its own.

   260902 (Jason, correction): this is the live geometry again, in --line rather than navy —
   see the full construction note at ".fp-tile.is-on" below, which is where the rules are. The
   260901/260902 fill rounds (navy title box, navy panel) that made an outline unnecessary are
   both rescinded.
   In one line: row-gap is 0 so the tiles' bottom edge IS the panel's top edge; every tile
   carries a 1px border, transparent when closed; the open tile paints left/top/right and a 2px
   cream ::after strip on .fp-tile-box erases the two pixels at the seam. Mobile keeps the panel
   as a plain rectangle — it is ordered after all four tiles there, so there is no seam to join
   and the open tile closes its own box. */
.fp-tiles { display:grid; grid-template-columns:repeat(var(--fp-tile-cols,4),minmax(0,1fr));
  column-gap:clamp(12px,1.6vw,24px); row-gap:0; align-items:stretch; }
/* max-width caps the square: products with only one or two how-to metafields would otherwise
   render a single tile the full width of the page (1496px on a 1536 viewport). */
/* 260828 R2 (Jason): photos render clean — no border on the tile, no overlay, no colour
   grade, no 01/02 numbering. Cream #FFF3E0 / navy #313840 / hairline are the Brand/tokens
   ground+ink pair. */
.fp-tile { grid-row:1; position:relative; display:flex; flex-direction:column; max-width:calc(420 * var(--fp-u));
  box-sizing:border-box; padding:0; border:1px solid transparent; background:transparent; color:var(--navy);
  cursor:pointer; font-family:inherit; text-align:left; transition:border-color .2s ease; }
/* 260902 (Jason, correction): margin-bottom is 0 — the title box sits FLUSH on the bottom edge
   of the photo. It was clamp(10px,1vw,14px), which put a band of cream between the photo and
   the box and made the box read as a separate object below the picture rather than as the
   picture's caption. Nothing else moves: .fp-tile-box keeps margin-top:auto, so on the open
   tile the box still bottoms out on the row seam and the tab geometry is unchanged. */
.fp-tile-photo { display:block; position:relative; width:100%; aspect-ratio:1 / 1; overflow:hidden; background:var(--sand); flex:0 0 auto; margin-bottom:0; }
.fp-tile-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.fp-tile:hover .fp-tile-img { transform:scale(1.03); }
/* 260828 R7 (Jason item 4): "when something isn't selected, don't show any box at all."
   260831 L-4: the border that carries that rule now lives on .fp-tile (above), not here — it
   is TRANSPARENT on every tile, so a closed tile and the open tile have identical metrics and
   nothing shifts when the selection moves. Only the open tile paints it (see "the tab" below).
   The label box keeps its padding and background and draws no border of its own. Hover draws
   no box either — the + / − turning accent and the photo's scale are the affordance. */
.fp-tile-box { position:relative; z-index:2; margin-top:auto;
  display:flex; align-items:center; justify-content:space-between; gap:clamp(10px,1.2vw,18px);
  box-sizing:border-box; background:var(--cream); color:var(--navy); border:none;
  padding:clamp(10px,1vw,14px) clamp(12px,1.2vw,16px);
  transition:background .18s ease, color .18s ease; }
/* Abril Titling Condensed regular, per Jason — not the Venn caps the tile labels carried.
   min-height is two lines of it, so a title that wraps and a title that does not produce
   boxes of the same height, and every box bottom edge stays on the row seam.
   260828 R7 (Jason item 4): "reduce the font size of the header text so that it matches the
   body text." --fp-body is the one panel scale (17px desktop / 15px phone), so the label now
   rides it — there is no separate tile size to keep in step. */
.fp-tile-label { display:flex; align-items:center; min-height:calc(2.3em);
  font-family:inherit; font-weight:400; font-style:normal;
  font-size:var(--fp-body); line-height:1.15; letter-spacing:0; text-transform:none; color:var(--navy); }
.fp-tile-btn { flex:none; display:flex; align-items:center; justify-content:center; width:calc(22 * var(--fp-u)); height:calc(22 * var(--fp-u));
  color:var(--navy); font-family:"venn-semicondensed","abril-titling-condensed",Georgia,serif; font-weight:700;
  font-size:calc(24 * var(--fp-u)); line-height:1; transition:color .2s ease; }
.fp-tile-btn::before { content:"+"; }
.fp-tile.is-on .fp-tile-btn::before { content:"\2212"; }
.fp-tile:hover .fp-tile-btn { color:var(--accent); }

/* 260902 (Jason, correction): THE OPEN STATE IS AN OUTLINE, NOT A FILL.
   This SUPERSEDES the 260902 inversion (open title box navy with cream type) and, with it, the
   260901 fix-3 "fill, not a border weight" decision. Both of those are gone. Every surface in
   the tile system is cream with navy ink again — the open title box included — and the one
   thing that marks the open tile is a hairline running around it and its panel.
   The hairline is --line, the theme's own hairline, not the navy the tab used to paint: the
   open unit is a large shape and a full-strength 1px navy rectangle around a quarter of the row
   reads as a border on a box rather than as a selection.
   Every tile still carries a 1px border (transparent when closed), so nothing shifts by a pixel
   when the selection moves — that has been true since L-4 and stays true. */
/* the closed box's own affordance on hover — a faint navy wash, the same 0.05 fill the buy
   panel's selected controls use. Unchanged, and the only fill left in the module. */
.fp-tile:hover:not(.is-on) .fp-tile-box { background:rgba(49,56,64,0.06); }
/* THE TABBED INDEX CARD, rebuilt on the hairline (260902 Jason, correction).
   The R6 ask this geometry serves has never changed: "when a tab is open on desktop view, give
   me a single border line that wraps around the combined header and text (so the outline will
   be shaped like a tabbed index card)". The 260901 fill/inversion rounds let it lapse — with a
   navy tab and a navy panel the junction was one navy shape and no line was needed. With both
   back on cream the line is the whole indicator, so the seam machinery comes back. It is the
   same construction L-4 documented, in --line instead of navy:
     - EVERY tile carries a 1px border, transparent when closed, so the metrics never move.
     - the OPEN tile paints left/top/right in --line, tight to the photo (the photo is
       width:100% of the tile, so those three edges sit exactly on the image edges); its bottom
       border is transparent.
     - the OPEN PANEL carries a full 1px --line box. row-gap is 0, so the panel's top border
       lands directly under the open tile's bottom edge.
     - a 2px cream strip (::after on .fp-tile-box, bottom:-2px) erases the 1px of the tile's own
       bottom border and the 1px of the panel's top border beneath it — the two pixels between
       the tab's content box and the panel's padding box. The strip stays on .fp-tile-box
       because that span stretches to the tile's CONTENT width: left:0 / right:0 lands exactly
       between the tile's two side borders and leaves them running down into the panel rule.
   Result: one continuous hairline — up the tab's left side, across its top, down its right
   side, along the panel's top border either side of the tab, down the panel's sides and across
   its bottom. No doubled segment and no gap.
   The panel spans grid-column 1 / -1, so when the FIRST tile is open its left border and the
   panel's left border are the same vertical line; that is correct, not a collision.
   Mobile does not use any of this — see the <=749px block, where the panel is ordered after
   all four tiles and each half closes its own hairline box. */
.fp-tile:not(.is-on) { border-color:transparent; }
.fp-tile.is-on { border-color:var(--line); border-bottom-color:transparent; }
.fp-tile.is-on .fp-tile-box::after { content:""; position:absolute; left:0; right:0;
  bottom:calc(-2 * var(--fp-u)); height:calc(2 * var(--fp-u)); background:var(--cream); z-index:3; }
/* the card body
   260828 R7 (Jason item 4): "remove the border on the left bottom and right side of the body
   text … leave it along the left top and right side of the header box, and from the bottom
   right edge of the header box to the top right edge of the body text box."
   So: no left, no bottom, no right on the panel. The one surviving segment is the top rule,
   which is exactly the run from the tab's bottom-right corner across to the panel's top-right
   corner (and, when the open tab is not the first, the mirror run to its top-left corner). */
/* 260902 (Jason, correction): the panel is CREAM with navy ink — the navy box is gone — and it
   carries the other half of the open unit's hairline: a full 1px --line box, whose top border
   is punched out under the open tab by the strip above.
   The "long border" Jason called out in 260901 fix 3 does not come back with it. That defect
   was a top rule under EVERY tile including the closed ones, drawn while the open tile had no
   line beneath it at all — emphasis on the wrong three quarters of the row. Here the top border
   is one segment of a closed outline that the open tab interrupts, and the eye reads the whole
   figure, not the rule. */
.fp-panel { grid-row:2; grid-column:1 / -1; border:1px solid var(--line);
  padding:clamp(20px,2vw,30px); background:var(--cream); color:var(--navy); }
.fp-panel[hidden] { display:none; }

.fp-i { font-style:italic; }

/* 260828 R3 (Jason): the three how-to panels are plain paragraph copy on one type scale.
   Gone: .fp-steps/.fp-step* (the sidescrolling numbered steps), .fp-acc-num (the 00/01 tags),
   .fp-mix-b, and the .fp-recipe-name/.fp-recipe-build pair with its 0.72 opacity. Nothing in
   these panels is dimmed and nothing is numbered. */
/* 260831 L-4 (Jason): "make the open text box full width." The panel always spanned the grid,
   but its copy was capped at 640px, so an open panel read as a wide empty box with a narrow
   column of text down the left. The cap is gone here, on the lead name and on .fp-ing. The one
   exception Jason kept is .fp-recipes, which stays two-up on desktop. */
.fp-copy p { margin:0 0 calc(14 * var(--fp-u)); font-size:var(--fp-body); line-height:var(--fp-body-lh); max-width:none; }
.fp-copy p:last-child { margin-bottom:0; }
/* Abril semibold italic — the same treatment as .fp-style in the buy panel. */
.fp-sbi { font-weight:600; font-style:italic; }

/* 260828 R6 (Jason item 5): "check the styling on the how to mix a drink section. it's a mess
   and very difficult to navigate visually." The panel ran a highball, two recipes and a link
   together as one column of identical paragraphs — the only thing separating a recipe name
   from its own body copy was semibold italic at body size.
   The minimum that fixes it, and nothing else: two eyebrow labels (the existing .fp-eyebrow,
   the site's own small-caps-free label style) naming the two halves; the named subhead scale
   on the highball and on each recipe's first line; the two recipes side by side on desktop,
   each opened by a 2px accent rule. No boxes, no fills, no new type — the accent is the
   product's own custom.accent_color, already the page's link colour. */
.fp-mix-eyebrow { margin:0 0 calc(10 * var(--fp-u)); }
/* p.fp-lead-name, not .fp-lead-name: `.fp-copy p` is one point more specific and was silently
   winning the size — the highball name has been rendering at body size since the panel was
   built. Same reason .fp-recipe > p:first-child is written as a child selector. */
.fp-copy p.fp-lead-name { font-weight:600; font-style:italic; font-size:var(--fp-sub); line-height:1.3; margin:0 0 calc(6 * var(--fp-u)); max-width:none; }
/* 260828 R7 (Jason item 5): "remove the long gray hairline below the highball." The rule is
   gone; the space it sat in is kept, so the two halves still read apart. */
.fp-mix-lead { padding-bottom:0; margin-bottom:calc(28 * var(--fp-u)); }
.fp-recipes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(20 * var(--fp-u)) calc(40 * var(--fp-u)); }
/* One recipe does not need a column it has to share — it reads as a truncated half-page. */
.fp-recipes.is-one { grid-template-columns:minmax(0,1fr); }
.fp-recipe { border-top:2px solid var(--accent); padding-top:calc(12 * var(--fp-u)); }
/* fp-copy renders the recipe name as the **first line** of the metafield; it is the recipe's
   subhead, so it takes the subhead size the highball name takes. */
.fp-recipe > p:first-child { font-size:var(--fp-sub); line-height:1.3; margin-bottom:calc(8 * var(--fp-u)); }
/* same specificity trap as the lead name: `.fp-copy p` was overriding this margin to zero.
   260828 R7 (Jason item 5): "reduce the size of 'visit our cocktail recipes page' to same
   styling as 'find something else' 'explore other flavors'." That is .fp-explore — 12px, the
   product's accent, underlined at 2px offset. Written out rather than shared because
   .fp-explore is a block link with its own top margin; only the type treatment carries over. */
.fp-copy p.fp-copy-more { margin:calc(24 * var(--fp-u)) 0 0; font-size:calc(12 * var(--fp-u)); line-height:1.3; }
/* font-size:inherit is load-bearing — the theme sets `a { font-size: 1.3rem }`, which beats
   inheritance from the <p>. Measured 20.8px here before this line landed; the same trap the
   footer's legal bar hit. */
.fp-copy-more a { font-size:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:auto; }
.fp-pair { margin:calc(22 * var(--fp-u)) 0 0; font-size:var(--fp-body); }
.fp-i-label { opacity:0.6; }
/* 260828 R7 (Jason item 6): "i'm still seeing some odd opacity on the nutrition facts." Every
   alpha in this panel is gone — the ingredients line was at 0.9, the nutrition line at 0.75.
   Full-opacity navy, like the rest of the panel copy. Nothing here is dimmed. */
.fp-ing { margin:0; font-size:var(--fp-body); line-height:var(--fp-body-lh); color:var(--navy); max-width:none; }
.fp-ing-nutri { margin-top:calc(18 * var(--fp-u)); }
.fp-ing-pack + .fp-ing-pack { margin-top:calc(26 * var(--fp-u)); padding-top:calc(26 * var(--fp-u)); border-top:1px solid var(--line); }
.fp-ing-pack-name { font-weight:600; font-style:italic; margin-bottom:calc(6 * var(--fp-u)); }

/* ---- the navy-ground re-inking block is REMOVED (260902, Jason correction) ----------------
   It existed only to make panel content legible on the navy fill: .fp-ing forced to inherit,
   the pack rule and the recipe rules moved onto --fp-line-on-navy / --fp-accent-on-navy, the
   eyebrow lifted from 0.5 to 0.72, and a cream focus ring. The panel is cream again, so every
   one of those is not merely unnecessary but wrong — the lifted accent is a washed-out version
   of the product's own accent and would now be read against cream. The rules above this point
   already style panel content for a cream ground, which is what they were written for; nothing
   replaces this block. */

/* ============================================================================
   260901 (Jason item 3) — ACCENT ON HOVER, PDP-WIDE
   Every anchor inside this section takes the product's accent on hover and on keyboard focus.
   --arom-accent before --accent so a pack's aromatics chart hovers in the ACTIVE flavor's
   colour (each .fp-arom-panel sets it inline); everywhere else --arom-accent is unset and the
   fallback resolves to the section's own --accent.

   Specificity note, because three of the four live link classes already sit at rest in the
   accent: .fp a:hover is 0-1-1, so it wins over .fp-explore / .fp-explore-inline (0-1-0) and
   loses to .fp-copy-more a (0-2-0) — in both directions the computed colour is the same accent,
   so nothing is half-applied. The aromatics chart is the one link whose rest colour is navy,
   and it carries its own 0-3-1 hover rule up in the .fp-arom block for that reason.

   NOT touched, and why — every one of these is a control with a designed hover of its own, and
   half-applying an accent to a component that already inverts or fills would read as a bug:
     .fp-atc            add-to-cart, navy fill, hover is an opacity step
     .fp-pill           pack / format / cadence chips, hover is a border + tint
     .fp-fmt-i          the can/bottle "i" badge, hover inverts to navy-on-cream
     .fp-drow           subscribe rows, hover is a border + tint
     .fp-tile           how-to tiles, hover scales the photo and tints the box (the + already
                        turns accent, which is where this idea came from)
     .fp-pack-tab       W-19 flavor tabs; since 260902 the accent IS the selected state — the
                        selected name is set in that flavor's own --tab-accent, and there is no
                        underline left to hover
     .fp-thumb, .fp-schip, .fp-qty-btn, .fp-bis-btn — buttons, not links
   Also untouched: the header and footer (shell sections, not this file) and the cross-sell
   "Quick View +" deck, which is section flavor-index / .cc-card — outside .fp entirely, so a
   rule scoped here could not reach it even if it should. */
.fp a:hover, .fp a:focus-visible { color: var(--arom-accent, var(--accent)); }

/* ============================================================================
   260901 (Jason item 2b/2c/2e) — BOTANICAL INDEX DRAWER
   Right-edge slide-out carrying the glossary. The overlay stays in the DOM but out of the
   accessibility tree between opens: [hidden] until the first open, then visibility, which also
   takes it out of hit-testing. The delayed visibility transition on close is what lets the
   panel finish sliding out before it disappears.
   z-index 1100 clears the shell header (1000) and nothing else on the page is above 4.
   The overlay IS the backdrop — see the markup comment: base.css's `div:empty { display:none }`
   makes a content-free scrim div unrenderable, so the dimming is this element's own
   background-color and the click-to-close test is e.target === the overlay. */
.fp-gl { position:fixed; inset:0; z-index:1100; visibility:hidden; background:rgba(49,56,64,0);
  transition:visibility 0s linear 280ms, background-color 240ms ease; }
.fp-gl[data-open] { visibility:visible; background:rgba(49,56,64,0.44); transition-delay:0s; }
/* 2e: 92vw rather than a fixed width means the panel is already nearly full-bleed on a small
   tablet; the phone block below takes it to the whole screen, like the nav drawer. */
.fp-gl-panel { position:absolute; top:0; right:0; bottom:0; width:min(560px, 92vw);
  display:flex; flex-direction:column; background:var(--cream); color:var(--navy);
  border-left:1px solid var(--line2); box-shadow:calc(-2 * var(--fp-u)) 0 calc(26 * var(--fp-u)) rgba(49,56,64,0.16);
  transform:translateX(100%); transition:transform 280ms cubic-bezier(0.32,0.72,0,1); }
.fp-gl[data-open] .fp-gl-panel { transform:none; }
@media (prefers-reduced-motion: reduce) {
  .fp-gl, .fp-gl-panel { transition:none; }
}
/* The nav drawer's top row: close button first, at the left, pulled 11px out so the icon —
   not the 44px tap target — lines up with the copy below it. */
.fp-gl-top { flex:none; display:flex; align-items:center; gap:calc(4 * var(--fp-u));
  padding:calc(14 * var(--fp-u)) clamp(16px,2vw,26px) calc(12 * var(--fp-u));
  border-bottom:2px solid var(--line3); }
.fp-gl-close { width:calc(44 * var(--fp-u)); height:calc(44 * var(--fp-u)); margin-left:calc(-11 * var(--fp-u));
  padding:0; display:flex; align-items:center; justify-content:center; background:transparent;
  border:none; color:var(--navy); cursor:pointer; line-height:1; }
.fp-gl-close svg { width:calc(22 * var(--fp-u)); height:calc(22 * var(--fp-u)); display:block; }
.fp-gl-close:hover { color:var(--accent); }
.fp-gl-title { font-family:"Magiel Black","abril-titling-condensed",sans-serif; font-weight:900;
  text-transform:uppercase; font-size:calc(15 * var(--fp-u)); letter-spacing:0.02em; }
/* position:relative so an entry's offsetTop is measured against the SCROLLING box and the JS
   can set scrollTop directly. scrollIntoView would have scrolled the locked page instead. */
.fp-gl-body { position:relative; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:0 clamp(16px,2vw,26px) calc(56 * var(--fp-u)); }
.fp-gl-wait { font-size:var(--fp-body); margin:calc(24 * var(--fp-u)) 0 0; opacity:0.7; }
/* The injected markup is the glossary page's own .gl-entry / .gl-name / .gl-body / .gl-found,
   and sections/casamara-glossary.liquid's stylesheet is in the theme's compiled styles.css on
   every template — verified on the PDP — so the entries arrive already typeset. Only the page
   chrome is neutralised here. */
.fp-gl-body .gl { background:transparent; }
.fp-gl-body .gl-entry { scroll-margin-top:calc(12 * var(--fp-u)); }
.fp-gl-body .gl-entry:first-child { border-top:none; }
/* 2c: the eye has to land on the term that was clicked, in a list of 44. A short accent wash
   plus a rule in the same accent, removed by the JS after two seconds. */
.fp-gl-body .gl-entry.is-fp-target {
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow:inset calc(3 * var(--fp-u)) 0 0 var(--accent);
  transition:background 500ms ease, box-shadow 500ms ease; }

/* 260828 D-5: .fp-menus (placements band) and .fp-reviews (Judge.me shelf) removed from the PDP. */

@media (max-width:749px) {
  /* 2e: full-width on a phone, like the nav drawer. */
  .fp-gl-panel { width:100%; border-left:none; }
  .fp-gl-top { padding:calc(14 * var(--fp-u)) calc(22 * var(--fp-u)) calc(12 * var(--fp-u)); }
  .fp-gl-body { padding:0 calc(22 * var(--fp-u)) calc(48 * var(--fp-u)); }
  /* Mobile: the prototype's <=749px values are literal px, so unscale the unit. */
  .fp { --fp-u: 1px; --ctl-h:calc(48 * var(--fp-u));
    /* 260828 R6 (item 6): the one scale, one step down. */
    --fp-body:calc(15 * var(--fp-u)); --fp-sub:calc(17 * var(--fp-u)); }
  .fp-hero { display:flex; flex-direction:column; }
  .fp-evoc { order:1; }
  .fp-story-inner { order:2; }
  .fp-media { min-height:0; border-right:0; border-bottom:1px solid var(--line); }
  .fp-media img { position:static; height:auto; display:block; }
  .fp-buy { padding:calc(24 * var(--fp-u)) calc(22 * var(--fp-u)) calc(20 * var(--fp-u)); }
  .fp-name { font-size:calc(46 * var(--fp-u)); }
  /* 260902: one phone size for both — see --fp-mood at the top of this stylesheet. The 26px is
     the value .fp-blurb already carried from the prototype-parity block below; the style line
     comes up to meet it from 21. Neither element sets a size of its own any more. */
  .fp { --fp-mood: calc(26 * var(--fp-u)); }
  .fp-blurb { order:5; margin:calc(16 * var(--fp-u)) 0 0; padding-top:calc(16 * var(--fp-u)); border-top:1px solid var(--line); line-height:1.5; }
  .fp-block { margin-top:calc(7 * var(--fp-u)); }
  /* 260902: merged on the phone too — the 7px gap here silently beat the group rules above. */
  .fp-packs { gap:0; }
  .fp-pack-a { font-size:calc(15 * var(--fp-u)); }
  .fp-pack-b { font-size:calc(11 * var(--fp-u)); }
  .fp-atc-grid { display:flex; flex-direction:column-reverse; gap:calc(7 * var(--fp-u)); margin-top:calc(7 * var(--fp-u)); }
  .fp-atc { width:100%; padding:0 calc(18 * var(--fp-u)); font-size:calc(16 * var(--fp-u)); }
  .fp-qty { align-self:flex-start; width:calc(140 * var(--fp-u)); }
  .fp-qty-n input { min-width:calc(44 * var(--fp-u)); font-size:calc(17 * var(--fp-u)); }
  .fp-fams { grid-template-columns:repeat(2,1fr); gap:calc(18 * var(--fp-u)) calc(14 * var(--fp-u)); margin-top:calc(16 * var(--fp-u)); }
  .fp-fam-label { font-size:calc(12 * var(--fp-u)); }
  .fp-fam-list { font-size:calc(12 * var(--fp-u)); }
  /* 260902 (Jason item 1), phone: the compression is a desktop ask and the 44px tap target is
     not negotiable, so the padding that BUILDS that target stays exactly as it was (10 + 19 +
     15 = 44 now that the 2px underline is gone). Only the row gap comes in — 20px between two
     rows of 44px targets was pure air, and 10px still leaves 35px of clear space between the
     two lines of type. */
  .fp-pack-tabs { column-gap:calc(20 * var(--fp-u)); row-gap:calc(10 * var(--fp-u)); }
  .fp-pack-tab { font-size:calc(19 * var(--fp-u)); padding:calc(10 * var(--fp-u)) 0 calc(15 * var(--fp-u)); } /* >=44px tap target */

  .fp-thumbs { position:static; padding:calc(10 * var(--fp-u)) calc(22 * var(--fp-u)) calc(12 * var(--fp-u)); overflow-x:auto; }
  .fp-thumb { width:calc(52 * var(--fp-u)); height:calc(52 * var(--fp-u)); flex:none; border-color:var(--line2); }

  /* 260901 (Jason fix 1b), phone: the same mirror as desktop — .fp-buy's phone padding is
     24 / 22 / 20, so the story cell takes it verbatim. */
  .fp-story-inner { padding:calc(24 * var(--fp-u)) calc(22 * var(--fp-u)) calc(20 * var(--fp-u)); }
  /* 260902 (Jason): phone follows the phone mood size (26px, --fp-mood above) and the
     phone blurb's 1.5 leading, replacing the old 15px body size. */
  .fp-story-body { font-size:calc(26 * var(--fp-u)); line-height:1.5; }
  .fp-evoc { grid-template-columns:repeat(3,1fr); }
  .fp-evoc div { aspect-ratio:1/1; }

  .fp-crawl { padding:calc(10 * var(--fp-u)) 0; }
  .fp-press-dot { width:calc(5 * var(--fp-u)); height:calc(5 * var(--fp-u)); margin:0 calc(18 * var(--fp-u)); }
  .fp-press-item { gap:calc(10 * var(--fp-u)); }
  .fp-press-q { font-size:calc(15 * var(--fp-u)); }
  .fp-press-src { font-size:calc(11 * var(--fp-u)); }

  .fp-table { padding:calc(24 * var(--fp-u)) calc(22 * var(--fp-u)) calc(28 * var(--fp-u)); }
  /* 260828 R6 (item 4): on mobile the open panel is ordered after all four tiles, so there is
     no seam to join. 260902 (Jason, correction) restores the desktop seam machinery, and these
     two lines are what keep the phone out of it: the open tile closes its own hairline box on
     all four sides, and the eraser strip — which would punch a 2px cream slot out of the tile's
     own bottom edge with nothing beneath it to erase — is suppressed. The panel is its own
     hairline rectangle 10px below, exactly as it has been. */
  .fp-tiles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:calc(10 * var(--fp-u)); }
  .fp-tile { grid-row:auto; }
  .fp-tile.is-on { border-bottom-color:var(--line); }
  .fp-tile.is-on .fp-tile-box::after { display:none; }
  .fp-panel { grid-row:auto; grid-column:1 / -1; order:9; margin-top:calc(10 * var(--fp-u)); padding:calc(18 * var(--fp-u)); }
  /* 260902 (Jason, correction): flush on the phone too — the 8px band goes with the desktop
     clamp it mirrored. */
  .fp-tile-photo { margin-bottom:0; }
  .fp-tile-box { gap:calc(8 * var(--fp-u)); padding:calc(8 * var(--fp-u)) calc(10 * var(--fp-u)); }
  /* 260828 R7 (item 4): no phone size of its own — the label rides --fp-body (15px here). */
  .fp-tile-label { min-height:calc(2.3em); }
  .fp-tile-btn { width:calc(18 * var(--fp-u)); height:calc(18 * var(--fp-u)); font-size:calc(20 * var(--fp-u)); }
  /* 260828 R3: no horizontal scroller on mobile any more — the panels are stacked paragraphs. */
  .fp-copy p { margin-bottom:calc(12 * var(--fp-u)); }
  .fp-mix-lead { padding-bottom:calc(16 * var(--fp-u)); margin-bottom:calc(16 * var(--fp-u)); }
  .fp-recipes { grid-template-columns:1fr; gap:calc(18 * var(--fp-u)); }
  .fp-copy p.fp-copy-more { margin-top:calc(18 * var(--fp-u)); }
  .fp-pair { margin-top:calc(16 * var(--fp-u)); }
}

/* ============================================================================
   PROTOTYPE PARITY — 2026-08-06
   Every value below is lifted verbatim from Alta PDP v2.dc.html. Nothing here
   is invented. These are values the build dropped or mistyped during the port.
   ============================================================================ */

/* Desktop — scoped to >=750px so it cannot leak past the mobile block below,
   which resets .fp-media min-height to 0 and .fp-evoc rows to a fixed band. */
@media (min-width: 750px) {
  .fp-media { min-height: calc(420 * var(--fp-u)); }  /* prototype inline; the build
                                             dropped it, leaving the orphaned
                                             min-height:0 in the 749px block */
  .fp-evoc  { grid-template-rows: 1fr; }    /* prototype inline; without it the
                                             atmosphere photos collapse to a
                                             thin band instead of filling the
                                             row beside the story block */
  /* 260824 W-13: prototype hero-quadrant hairlines the build dropped */
  .fp-media { border-right:1px solid var(--line); }
  .fp-story-inner { border-top:1px solid var(--line); border-right:1px solid var(--line); }
  .fp-evoc { border-top:1px solid var(--line); }
}

/* Mobile — prototype's own <=749px block */
@media (max-width: 749px) {
  .fp-fams      { grid-template-columns: repeat(3, 1fr); gap: calc(18 * var(--fp-u)) calc(14 * var(--fp-u)); }
  .fp-fam-label { font-size: calc(10 * var(--fp-u)); }
  .fp-fam-list  { font-size: calc(15 * var(--fp-u)); }
  /* 260902: the 26px moved up to --fp-mood in the block above, where .fp-style reads it too.
     Only the leading is set here now, which is what this parity block was carrying that the
     block above was not. */
  .fp-blurb     { line-height: 1.35; }
  .fp-evoc      { grid-template-rows: calc(150 * var(--fp-u)); }
  .fp-evoc div  { aspect-ratio: auto; }
  /* 260901 (Jason fix 1b): was 20/22/20 here, which silently beat the block above. Both now
     carry .fp-buy's phone padding so the two hero text cells match at 390 as well. */
  .fp-story-inner { padding: calc(24 * var(--fp-u)) calc(22 * var(--fp-u)) calc(20 * var(--fp-u)); }
  /* 260831 L-3: the aromatics module matches the how-to table's phone gutters.
     260901 (Jason fix 2a): the same extra bottom room the desktop band gets. This block is the
     later of the two mobile blocks, so it is the one that has to carry it — the desktop
     clamp above never reaches a phone. */
  .fp-arom-inner { padding: calc(24 * var(--fp-u)) calc(22 * var(--fp-u)) calc(44 * var(--fp-u)); }
  /* 260902 (Jason, correction), phone: THIRDS ARE BACK. This SUPERSEDES the 260902 item-3
     phone note, which stacked the families into one column. That note was correct for the
     type it was written against — in Magiel caps the widest live term, BLACKSTRAP MOLASSES,
     is 14.03em, and holding it on one line in a 115px third of a 390px screen would have
     needed 7.4px type, so a single 346px column at 22.2px was the only honest option. The
     terms are Abril lowercase again and measure 8.08em, which changes the answer: a third of
     390 holds "blackstrap molasses" on one line at 12.85px (105.0px of a 115.3px column,
     91%), so the chart returns to the three columns it is — the same shape as desktop, at
     every width.
     The size is the desktop construction with the phone's column: the mood line (26px here),
     capped by "the widest term fills 90% of its column", floored at 11px. Column is 100vw
     less the 44px of gutters this block sets on .fp-arom-inner, over three. It reaches the
     26px mood line at ~745px and holds it to the 749px breakpoint; below 390 it steps down on
     its own (360 -> 11.8px, longest term still 90%). This is the ONE surviving fit cap in the
     module — the desktop ramp is gone because at 8.08em it never binds above 750.
     The column hairlines come back with the columns: nth-child(3n+2)/(3n+3) is a three-track
     rule, and with three tracks it draws exactly where it did on desktop, so the phone
     override that zeroed it is gone too.
     The .fp-fam-label / .fp-fam-list sizes in the prototype-parity block above are single-class
     selectors; every rule in this module names .fp-arom too, so they do not fight. */
  .fp-arom { --fp-arom-size: max(11px, min(calc(0.90 * (100vw - 44px) / 3 / var(--fp-arom-em)), 26px)); }
}

/* ============================================================================
   260831 — L-1 hero column behaviour, L-2 narrow-desktop top panel, L-3 chart width.
   Desktop only. Stacking is unchanged: the flip to a single column happens at 749px
   and below, the theme's existing mobile breakpoint. There is no intermediate state.
   ============================================================================ */
@media (min-width: 750px) {
  /* L-1. The photo is the fixed quantity now. --fp-media-w is the width the media column
     HOLDS as the window narrows; the buy panel absorbs the squeeze down to --fp-buy-min, and
     only below that does the photo start giving ground. max(720px, 45vw) keeps the split at a
     natural ~45% on very wide screens rather than pinning the photo to a small fixed box.
       1600px viewport -> media 720 / text 880
       1500            -> media 720 / text 780
       1400            -> media 720 / text 680   (was 700 / 700, with the photo cropping)
       1200            -> media 720 / text 480
       1080            -> media 720 / text 360   <- text reaches its floor here
       1000            -> media 640 / text 360
        750            -> media 390 / text 360
     Track sizing: the fixed-max track is grown to its limit before the fr track expands, so
     the media column takes 720px whenever (width - 360) allows and the remainder goes to the
     text. Below that the fr track sits on its 360px base and the media column takes the rest. */
  .fp { --fp-media-w: max(720px, 45vw); --fp-buy-min: 360px; }
  .fp-hero { grid-template-columns: minmax(0, var(--fp-media-w)) minmax(var(--fp-buy-min), 1fr); }

  /* 260901 (Jason item 1): the floor on row 2 is REMOVED. It read clamp(220px,18vw,320px) —
     259.2px at a 1440 viewport — and the story cell, a stretched grid item beside it, inherited
     that height whatever its text measured. On /products/alta-cans the description filled
     111.7px of a 259.2px box: 147.5px of dead cream under two lines of copy, on every flavor
     with an atmosphere rail. The row is content-driven now, so the cell ends where the text does
     and the photos take the height the text gives them (143px at 1440, three 235px crops).
     Nothing replaces it: a min-height here is a floor under the TEXT, not under the photos, and
     that is the whole defect. If the rail should stand taller, the honest lever is an
     aspect-ratio on .fp-evoc div — the photos' own proportion — not a floor on the row.
     /products/como and /products/variety-case carry no rail at all: their story cell already
     spans the row (see .fp-hero > .fp-story-inner:last-child below) and never saw the floor. */

  /* Sizing the buy panel against ITS OWN width rather than the viewport: with the tracks above,
     panel width is no longer a fixed fraction of vw, so cqi is the only unit that tells the
     truth. container-type:inline-size also drops the panel's min-content contribution to zero,
     which is the second half of the L-1 fix — the text cannot push into the photo again.
     Where container queries are unsupported, cqi lengths resolve against the small viewport;
     at every desktop width that lands above the clamp ceilings, so the panel simply renders at
     today's fixed sizes. */
  .fp-buy { container-type: inline-size; container-name: fpbuy; }

  /* L-2. Title scale. Advance widths measured from Brand/assets/Magiel-Black.ttf: the longest
     live single words are SUPERCLASICO (8.59em) and TRANSATLANTIC (9.60em); BOTANICAL is
     6.64em. At the 58px ceiling TRANSATLANTIC needs 557px of the 610px the panel offers at a
     1400px viewport, and the ramp keeps roughly 10% headroom against that word at every width
     down to the floor. Combined with word-break:normal above, a title now wraps at spaces or
     scales — never mid-word.
       panel 880 -> 58px   panel 680 -> 57.9px   panel 560 -> 46.6px   panel 360 -> 30px */
  /* 260831 review correction: cqi resolves against the CONTAINER'S CONTENT BOX, and .fp-buy
     carries clamp(20px,2.5vw,38px) of horizontal padding — so the ramp above was reading a
     panel 54-76px narrower than the widths its table was built from, and then subtracting a
     further 6px. Measured result: the title fell to 32px at a 1200px viewport and to the 30px
     floor by 1080, against a 720px photo. The coefficient itself was already the right one —
     9.4cqi IS the 10%-headroom fit for TRANSATLANTIC (9.60em in Magiel Black) against the
     panel's own text width — so the fix is to drop the constant, not to re-derive the ramp.
       panel 880 (content 804) -> 58px    panel 705 (633) -> 58px
       panel 465 (405)         -> 38px    panel 360 (306) -> 30px floor
     Longest word check at every step: 9.6 x font <= content width, with headroom to spare. */
  .fp-name  { font-size: clamp(30px, 9.4cqi, calc(58 * var(--fp-u))); }
  /* 260902: one ramp for both. This is the mood line's own expression, unchanged — the style
     line adopts it rather than the reverse, because the aromatics ceiling at line ~985 is
     already derived from clamp(19px, 4.8cqi, 28.8px) and moving it would move that too.
     Measured: 28.8px at 1440 (panel 705, on the ceiling), 19px at 1024 (panel on its 360px
     floor, both on the clamp floor). */
  .fp { --fp-mood: clamp(19px, 4.8cqi, calc(28.8 * var(--fp-u))); }

  /* The rest of the top panel across 1000-1600: controls hold one row while they fit and wrap
     rather than crush. Nothing here forks the panel type scale — it is the buy column's own
     control sizes that flex. */
  /* Descendant-scoped on purpose: .fp-pack is two different things in this section — the size
     pill in the buy panel and the variety-pack tabs wrapper in the story cell. Every rule below
     names the parent so nothing new lands on the collision. */
  .fp-packs, .fp-formats, .fp-cadence { flex-wrap: wrap; }
  .fp-packs .fp-pack   { flex: 1 1 calc(96 * var(--fp-u)); }
  .fp-formats .fp-fmt  { flex: 1 1 calc(120 * var(--fp-u)); }
  .fp-cadence .fp-cad  { flex: 1 1 calc(96 * var(--fp-u)); }
  /* The add-to-cart row keeps its three columns all the way down. What gives is the stepper's
     chrome, not the type: at a 360px panel the quantity column is 97px and a 46/38/46 stepper
     needs 130. Only widths move here — every font-size in the panel is untouched, so the one
     PDP type scale is not forked. Padding on the button follows for the same reason. */
  .fp-atc  { padding: 0 clamp(10px, 2.4cqi, 24px); }
  .fp-qty-btn { width: clamp(30px, 5cqi, 46px); }
  .fp-qty-n input { width: clamp(28px, 4cqi, 38px); }

  /* Under ~460px of panel a four-size pack row reads better two-up than crushed into one. */
  @container fpbuy (max-width: 460px) {
    /* 260902: the -4px was half of the 8px gap, which is gone. A 45% basis is deliberately
       under half so two always fit a line and grow to fill it, with no rounding cliff where
       2 x calc(50% - 0px) can overflow the 1px-narrower content box. */
    .fp-packs .fp-pack, .fp-cadence .fp-cad { flex: 1 1 45%; }
    /* the can/bottle "i" popover is a two-column comparison; one column below this width */
    .fp-fmt-info-grid { grid-template-columns: 1fr; gap: calc(6 * var(--fp-u)); }
    .fp-fmt-info-grid p:first-child { padding-right: 0; }
    .fp-fmt-info-grid p:last-child  { padding-left: 0; }
  }

  /* L-3. The chart now has the whole page width, so the families run as one row of equal
     columns instead of the fixed three that fitted half the hero. Two families make two wide
     columns, six make six — the count comes from the data, as it always has. */
  /* 260831 review capped the columns at 220px and packed them left, because equal full-width
     columns made three 12px lists sit as three specks 426px apart — the chart read as
     stretched, not wide.
     260901 (Jason fix 2) removes the cause rather than the symptom: the type now fills its
     column, so equal thirds read as a chart and not as scatter. The 220px cap, the
     left-packing and the column gutter all go with it; the base rules above own the grid at
     every width. Named here only to unwind the auto-flow this block used to set. */
  .fp-arom .fp-fams { grid-auto-flow: row; grid-auto-columns: auto; justify-content: stretch; }

  /* 260831 review, overriding L-4 for readability: L-4 removed the 640px cap because an open
     panel read as a wide empty BOX with a narrow column of copy down the left. The box is
     gone now — the panel draws only a top rule, no sides and no bottom — but the uncapped
     measure went the other way: 146 characters a line at 1440, 120 at 1200. 90ch is the
     upper bound that still fills most of the row at the widths this page is read at, and
     with no side borders a line that ends early does not read as an empty container.
     .fp-recipes columns are ~74ch at 1440, so the two-up recipes are untouched. */
  .fp-copy p, .fp-ing { max-width: 90ch; }

  /* 260831 review: the hero's second row assumes an atmosphere rail on the right. Products
     whose gallery holds nothing past the featured image have none — /products/como and
     /products/variety-case both measured zero rail images — and the row rendered as the story
     block plus a blank cream cell, with .fp-story-inner's border-right ruling 100-230px down
     the middle of nothing. With no rail the story owns the row: the top hairline runs
     unbroken, there is no phantom column, and the copy keeps a readable measure. */
  .fp-hero > .fp-story-inner:last-child { grid-column: 1 / -1; border-right: 0; }
  .fp-hero > .fp-story-inner:last-child .fp-story-body { max-width: 78ch; }
}
/* END_SECTION:flavor-pdp */

/* START_SECTION:subscription-perks-2 (INDEX:85) */
.section-{{ section.id }}-padding {
    padding-top: calc(35px * 0.75);
    padding-bottom: calc(35px * 0.75);
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: 35px;
      padding-bottom: 35px;
    }
  }

  .benefits-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
  
  .benefit-box {
    background-color: rgb(var(--color-{{ section.settings.box_color_scheme }}-background));
    padding: 25px;
    border-radius: 8px;
  }
  
  .benefit-content {
    width: 100%;
  }
  
  .benefit-box h3 {
    color: rgba(var(--color-foreground), 1);
    margin-top: 0;
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .benefit-box p {
    color: rgba(var(--color-foreground), 0.75);
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
  }
  
  @media screen and (max-width: 768px) {
    .benefits-container {
      grid-template-columns: 1fr;
    }
  }
/* END_SECTION:subscription-perks-2 */