/* Biofitea Website — product pages (senna-tea.html, electrolytes.html).
   Loaded AFTER colors_and_type.css + website.css and only adds what the two
   product pages need on top of the homepage styles: breadcrumb, product hero,
   buy panel, spec table, how-to row, bundle card. Everything else (nav, shop
   pills, .step, .ingr*, .elec*, .faq, .cta, .foot, .rise) comes from
   website.css untouched. Breakpoints mirror website.css: 960px / 699px / 600px. */

/* ── Section helpers ───────────────────────────────────────────────────── */
/* The Electrolytes ingredients banner reuses the homepage's own .sec.elec
   (padding:0 + white ground), so it needs nothing here. */
.sec--white{background:var(--bf-white)}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.crumb{padding-top:24px}
.crumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
 font:700 11px/1 var(--bf-font-display);letter-spacing:0.14em;text-transform:uppercase;color:var(--bf-text-muted)}
.crumb li{display:flex;align-items:center;gap:10px}
.crumb li+li::before{content:"/";color:rgba(4,43,67,0.3);font-weight:400}
.crumb a{color:var(--bf-text-muted)}
.crumb a:hover{color:var(--bf-orange-text)}
.crumb [aria-current]{color:var(--bf-ink)}

/* ── Product hero ──────────────────────────────────────────────────────── */
.phero{padding:34px 0 88px}
.phero__grid{display:grid;grid-template-columns:1.02fr 0.98fr;gap:56px;align-items:center}
/* One h1 per page, sized down from the homepage's display-2 — a product name is
   longer than "Hydrate your day." and has to survive a 560px column. */
.phero h1{font:var(--bf-h1);letter-spacing:var(--bf-track-display);margin:14px 0 20px}
.phero__sub{font:var(--bf-body-lg);color:var(--bf-text-muted);max-width:46ch;margin-bottom:18px}
.phero__sub+.phero__sub{margin-bottom:22px}
.phero .hero__proof{margin-bottom:28px}
/* .stars is brand yellow, which disappears on cream — same swap the homepage
   makes for its light slides. */
.phero .stars{color:var(--bf-orange-text)}
.phero__media{position:relative}
.phero__media .hero__aura{inset:-8% -12%;opacity:0.55}
/* .hero__photo--square carries a 56px bottom margin for the carousel; not wanted here. */
.phero .hero__photo--square{margin-bottom:0}
.phero .hero__photo--square video{width:100%;height:auto;aspect-ratio:1;display:block;object-fit:cover;background:var(--bf-cream-2)}

/* ── Buy panel ─────────────────────────────────────────────────────────── */
.buy{background:var(--bf-white);border:1px solid var(--bf-border);border-radius:var(--bf-radius-lg);
 box-shadow:var(--bf-shadow-sm);padding:18px 22px 6px}
.buy__label{font:700 11px/1 var(--bf-font-display);letter-spacing:0.16em;text-transform:uppercase;color:var(--bf-text-muted)}
.buy__row{display:flex;align-items:center;justify-content:space-between;gap:16px 22px;flex-wrap:wrap;
 padding:18px 0;border-bottom:1px solid var(--bf-border)}
.buy__row:last-child{border-bottom:0}
.buy__name{display:block;font:800 19px/1.15 var(--bf-font-display);color:var(--bf-heading);letter-spacing:var(--bf-track-display)}
.buy__note{display:block;font:700 11px/1 var(--bf-font-display);letter-spacing:0.14em;text-transform:uppercase;color:var(--bf-orange-text);margin-top:8px}
/* Per-listing (per-SKU) store URLs live in .buy__links, NOT on .shop-pill —
   the STORES wiring in the page script rewrites every .shop-pill to the store
   FRONT, so a listing URL given that class would be thrown away (see README).
   These are styled to match .shop-pill exactly so the two rows still read as one set. */
.buy__links{display:flex;gap:10px;flex-wrap:wrap}
.buy__links a{display:inline-flex;align-items:center;font:700 13px/1 var(--bf-font-display);letter-spacing:0.04em;
 padding:11px 18px;border-radius:var(--bf-radius-pill);border:1.5px solid var(--bf-border);
 color:var(--bf-ink);background:var(--bf-white);transition:all var(--bf-dur) var(--bf-ease)}
.buy__links a:hover,.buy__links a:focus-visible{background:var(--bf-ink);border-color:var(--bf-ink);color:var(--bf-cream);text-decoration:none}

/* ── How-to row (Drop. Fizz. Go!) ──────────────────────────────────────── */
/* Reuses .step from website.css; the dividers and vertical rhythm that suit a
   stacked list are dropped for a three-across grid. */
.howto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.howto .step{padding:0;border-bottom:0;flex-direction:column;align-items:flex-start;gap:14px}
.howto .step p{max-width:34ch}

/* ── Spec / pack-size table ────────────────────────────────────────────── */
.spec{width:100%;border-collapse:separate;border-spacing:0;background:var(--bf-white);
 border:1px solid var(--bf-border);border-radius:var(--bf-radius-lg);overflow:hidden;box-shadow:var(--bf-shadow-sm)}
.spec th,.spec td{text-align:left;padding:20px 22px;border-bottom:1px solid var(--bf-border);vertical-align:middle;font:var(--bf-body-sm)}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}
.spec thead th{background:var(--bf-cream-2);font:700 11px/1 var(--bf-font-display);letter-spacing:0.14em;
 text-transform:uppercase;color:var(--bf-text-muted);white-space:nowrap}
/* Auto layout gives Details more room than it needs and squeezes the pack name
   onto two lines; pin the split instead. */
.spec thead th:nth-child(1){width:31%}
.spec thead th:nth-child(2){width:10%}
.spec thead th:nth-child(3){width:33%}
.spec__pack{display:flex;align-items:center;gap:16px}
.spec__pack img{width:76px;height:76px;flex:none;border-radius:var(--bf-radius);object-fit:cover;background:var(--bf-cream-2)}
.spec__name{font:800 17px/1.2 var(--bf-font-display);color:var(--bf-heading);display:block}
.spec__tag{display:block;font:700 11px/1 var(--bf-font-display);letter-spacing:0.14em;text-transform:uppercase;color:var(--bf-orange-text);margin-top:7px}
.spec__amt{font:800 22px/1 var(--bf-font-display);color:#014634;letter-spacing:var(--bf-track-display);white-space:nowrap}

/* ── Bundle card ───────────────────────────────────────────────────────── */
.bundle{display:grid;grid-template-columns:180px 1fr;gap:28px;align-items:center;max-width:820px;
 background:var(--bf-white);border:1px solid var(--bf-border);border-radius:var(--bf-radius-lg);
 padding:26px;box-shadow:var(--bf-shadow-sm)}
.bundle img{width:100%;height:auto;border-radius:var(--bf-radius);background:var(--bf-cream-2)}
.bundle h3{font:800 22px/1.2 var(--bf-font-display);margin-bottom:10px}
.bundle__tag{display:inline-block;font:700 11px/1 var(--bf-font-display);letter-spacing:0.14em;
 text-transform:uppercase;color:var(--bf-teal-700);background:var(--bf-orange);
 padding:8px 12px;border-radius:var(--bf-radius-pill);margin-bottom:14px}
.bundle p{font:var(--bf-body-sm);margin-bottom:18px}
.bundle small{display:block;font:700 11px/1 var(--bf-font-display);letter-spacing:0.16em;
 text-transform:uppercase;color:var(--bf-text-muted);margin-bottom:12px}

/* ── Disclaimer band (the .ingr__note next to the ingredients art) ──────── */
/* Longhands only — a padding shorthand here would wipe .wrap's side gutters and
   push the disclaimer flush to the viewport edge. */
.disc-band{padding-top:30px;padding-bottom:34px}
.disc-band .ingr__note{margin-top:0}

/* ── Responsive ────────────────────────────────────────────────────────── */
/* The shared nav (four desktop links, nine panel links) is styled entirely in
   website.css now, so index.html gets the same gap and stagger rules. */
@media (max-width:960px){
.phero{padding:28px 0 64px}
.phero__grid{grid-template-columns:1fr;gap:36px}
/* Phones: media (video / packshot) first, then the name and buy panel — client call 2026-09-11. */
.phero__media{order:-1}
.phero__sub{max-width:none}
.howto{grid-template-columns:1fr;gap:20px}
.howto .step{flex-direction:row;gap:16px;align-items:flex-start}
.bundle{grid-template-columns:140px 1fr;gap:22px}
}
@media (max-width:600px){
.crumb{padding-top:18px}
.phero{padding:20px 0 56px}
.buy{padding:14px 18px 4px}
.buy__row{padding:16px 0}
.disc-band{padding-top:24px;padding-bottom:28px}
/* Table reflows to one card per pack; the column headers move onto each cell. */
.spec{border-radius:var(--bf-radius-lg)}
.spec thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spec tbody tr{display:block;border-bottom:1px solid var(--bf-border)}
.spec tbody tr:last-child{border-bottom:0}
.spec th,.spec td{display:block;border-bottom:0;padding:14px 20px}
.spec tbody tr>*:first-child{padding-top:20px}
.spec tbody tr>*:last-child{padding-bottom:20px}
.spec td[data-label]::before{content:attr(data-label);display:block;font:700 10px/1 var(--bf-font-display);
 letter-spacing:0.14em;text-transform:uppercase;color:var(--bf-text-muted);margin-bottom:8px}
.bundle{grid-template-columns:1fr;padding:22px}
.bundle img{max-width:180px}
}