/* ============================================================
   Also Coffee Co — product page
   Loads after woo.css. Owns everything inside .also-pdp.
   ============================================================ */

/* ---------- Layout ---------------------------------------- */
.also-pdp__grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.75rem,4vw,4rem);align-items:start;
  padding-block:clamp(1.5rem,3vw,2.75rem) clamp(2.5rem,5vw,4rem);
}
/* grid items default to min-width:auto and refuse to shrink below their
   content — which pushed the whole page wider than the viewport */
.also-pdp__grid>*{min-width:0}

/* WooCommerce's own layout sheet floats .summary at 48% and halves the
   column. We dequeue it on product pages; this is the safety net. */
.also-pdp .also-pdp__summary,
.also-pdp .entry-summary{width:100%;max-width:none;float:none;margin:0}
.also-pdp .also-pdp__media{width:100%;float:none;margin:0}

.also-pdp__media{position:sticky;top:104px;display:flex;flex-direction:column;gap:1rem}

/* ---------- Media well ------------------------------------ */
.also-pdp__well{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;
  padding:clamp(1rem,2.4vw,2rem);box-shadow:var(--shadow-sm);
}
/* our own gallery — Woo's flexslider/zoom is not loaded on this page */
.also-gal{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.also-gal__main{
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1/1;overflow:hidden;
}
.also-gal__img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.also-gal.is-swapping .also-gal__img{opacity:0}
.also-gal__thumbs{
  display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap;
  list-style:none;margin:0;padding:0;
}
.also-gal__thumbs li{margin:0}
.also-gal__thumb{
  display:block;width:68px;padding:0;cursor:pointer;background:rgba(255,255,255,.55);
  border:1.5px solid transparent;border-radius:var(--radius-md);overflow:hidden;
  opacity:.7;transition:opacity var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.also-gal__thumb img{width:100%;height:auto;display:block}
.also-gal__thumb:hover{opacity:1}
.also-gal__thumb.is-on{opacity:1;border-color:var(--accent)}
.also-gal__thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.also-pdp__badge{
  position:absolute;top:16px;left:16px;z-index:3;
  font-size:var(--fs-micro);font-weight:700;padding:.3rem .7rem;border-radius:var(--radius-pill);
}
.also-pdp__ticks{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .95rem;
  justify-content:center;font-size:.85rem;color:var(--text-muted);font-weight:600;
}
.also-pdp__ticks li{display:inline-flex;align-items:center;gap:.4rem}
.also-pdp__ticks .also-ic{width:1.05em;height:1.05em;color:var(--accent)}

/* ---------- Summary head ---------------------------------- */
.also-pdp__head{margin-bottom:1.4rem}
.also-pdp__title{font-size:clamp(2.1rem,1.3rem + 2.6vw,3.3rem);line-height:1.02;margin:0 0 .5rem}
.also-pdp__rate{display:flex;align-items:center;gap:.5rem;font-size:.85rem;margin-bottom:.7rem}
.also-pdp__rate .stars{color:#9A5E1F;letter-spacing:1.5px}
.also-pdp__rate .cnt{color:var(--text-muted);font-weight:600}
.also-pdp__excerpt{margin:0 0 .7rem;font-size:1.08rem;color:var(--text-body);max-width:46ch}
.also-pdp__notes{
  margin:0 0 1rem;font-size:.95rem;color:var(--text-strong);font-weight:600;
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;
}
.also-pdp__notes span{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.09em;
  color:var(--text-muted);font-weight:700;
}
.also-pdp__scales{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;padding:.85rem 0 0;
  border-top:1px solid var(--border);
}
.also-pdp__scalenote{margin:.3rem 0 0;font-size:.78rem;line-height:1.4;color:var(--text-muted)}
.also-roast{display:flex;align-items:center;gap:.5rem;font-size:.85rem}
.also-roast .lab{color:var(--text-muted);font-weight:600}
.also-roast .bar{display:inline-flex;gap:3px}
.also-roast .seg{width:16px;height:6px;border-radius:3px;background:var(--acc-sand-deep,#EADCC2)}
.also-roast .seg.on{background:#8A5433}
.also-roast .word{font-weight:700;color:var(--text-strong)}

/* ---------- Buy box --------------------------------------- */
.also-pdp form.cart{margin:0}
/* The real Woo selects still do the work, they just aren't on screen.
   display:none (not a clip-rect) — a <table> ignores width:1px and grows
   to its content, which pushed the page 700px wide. The custom radio
   cards are the accessible control; hiding the duplicate selects from
   assistive tech is correct here. */
.also-pdp table.variations,
.also-pdp .reset_variations{display:none!important}
.also-pdp .woocommerce-variation-description,
.also-pdp .woocommerce-variation-price,
.also-pdp .woocommerce-variation-availability{display:none}

/* An author `display` rule beats the [hidden] attribute, so anything we
   toggle with `hidden` needs this or it never actually hides. */
.also-buy__freq[hidden],
.also-buy__total[hidden],
.also-buy__resolved[hidden]{display:none}

.also-buy__group{border:0;padding:0;margin:0 0 1.5rem;min-width:0}
.also-buy__legend{
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;
  width:100%;padding:0;margin:0 0 .65rem;
  font-family:var(--font-display);font-size:1.06rem;font-weight:700;color:var(--text-strong);
}
.also-buy__help{font-family:var(--font-body);font-size:.83rem;font-weight:600;color:var(--accent)}

/* plan */
.also-planopts{display:grid;gap:.6rem}
.also-planopt{position:relative;display:block;cursor:pointer}
.also-planopt input{position:absolute;opacity:0;width:0;height:0}
.also-planopt__in{
  display:flex;align-items:center;gap:.85rem;
  border:1.5px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface-card);padding:.9rem 1rem;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),background var(--dur-fast);
}
.also-planopt:hover .also-planopt__in{border-color:var(--border-strong)}
.also-planopt.is-on .also-planopt__in{border-color:var(--accent);box-shadow:0 0 0 3px rgba(113,66,48,.10)}
.also-planopt input:focus-visible+.also-planopt__in{outline:2px solid var(--accent);outline-offset:2px}
.also-planopt__tick{
  flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;color:transparent;
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
}
.also-planopt__tick .also-ic{width:13px;height:13px}
.also-planopt.is-on .also-planopt__tick{background:var(--accent);border-color:var(--accent);color:var(--acc-cream,#FDF4E6)}
.also-planopt__txt{display:flex;flex-direction:column;gap:.12rem;flex:1;min-width:0}
.also-planopt__txt strong{font-size:1rem;color:var(--text-strong)}
.also-planopt__txt small{font-size:.83rem;color:var(--text-muted);line-height:1.35}
.also-planopt__price{
  flex:none;text-align:right;font-weight:700;color:var(--text-strong);font-size:1rem;
  display:flex;flex-direction:column;line-height:1.2;
}
.also-planopt__price del{font-weight:500;font-size:.82rem;color:var(--text-muted)}
.also-planopt__flag{
  position:absolute;top:-.55rem;right:.9rem;
  background:var(--acc-blue,#93BBCF);color:var(--acc-ink-deep,#2B1810);
  font-size:var(--fs-micro);font-weight:700;padding:.16rem .6rem;border-radius:var(--radius-pill);
}
.also-buy__freq{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  margin-top:.7rem;padding:.75rem .9rem;
  background:var(--acc-blue-pale,#EAF3F8);border-radius:var(--radius-md);
}
.also-buy__freq label{font-weight:700;font-size:.9rem;color:var(--text-strong)}
.also-buy__freq select{
  border:1.5px solid var(--border-strong);border-radius:var(--radius-md);
  background:var(--surface-card);padding:.45rem .7rem;
  font-family:var(--font-body);font-weight:600;color:var(--text-strong);
}
.also-buy__freqnote{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.82rem;color:var(--text-muted);flex-basis:100%;
}
.also-buy__freqnote .also-ic{width:1em;height:1em}

/* size */
.also-sizeopts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.also-sizeopt{position:relative;display:block;cursor:pointer}
.also-sizeopt input{position:absolute;opacity:0;width:0;height:0}
.also-sizeopt__in{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;text-align:center;
  border:1.5px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface-card);padding:.85rem .5rem .75rem;height:100%;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}
.also-sizeopt:hover .also-sizeopt__in{border-color:var(--border-strong)}
.also-sizeopt.is-on .also-sizeopt__in{border-color:var(--accent);box-shadow:0 0 0 3px rgba(113,66,48,.10)}
.also-sizeopt input:focus-visible+.also-sizeopt__in{outline:2px solid var(--accent);outline-offset:2px}
.also-sizeopt__size{font-family:var(--font-display);font-size:1.25rem;font-weight:700;color:var(--text-strong)}
.also-sizeopt__cups{font-size:.78rem;color:var(--text-muted);font-weight:600}
.also-sizeopt__price{font-weight:700;color:var(--text-strong);margin-top:.28rem}
.also-sizeopt__per{font-size:.72rem;color:var(--text-muted)}
.also-size-guidance{display:block;margin:.65rem 0 0;font-size:.82rem;line-height:1.5;color:var(--text-muted);text-wrap:pretty}
.also-size-guidance--delivery{font-size:.75rem;margin-top:.3rem}
.also-size-guidance[hidden],.also-sizeopt__per[hidden]{display:none}
.also-sizeopt__flag{
  position:absolute;top:-.55rem;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--acc-cream,#FDF4E6);white-space:nowrap;
  font-size:var(--fs-micro);font-weight:700;padding:.16rem .55rem;border-radius:var(--radius-pill);
}

/* equipment */
.also-eqopts{display:grid;gap:.5rem}
.also-eqopt{display:block;cursor:pointer}
.also-eqopt input{position:absolute;opacity:0;width:0;height:0}
.also-eqopt__in{
  display:flex;align-items:center;gap:.75rem;
  border:1.5px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-card);padding:.68rem .9rem;
  transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast),box-shadow var(--dur-fast);
}
.also-eqopt:hover .also-eqopt__in{border-color:var(--border-strong)}
.also-eqopt.is-on .also-eqopt__in{border-color:var(--accent);box-shadow:0 0 0 3px rgba(113,66,48,.10)}
.also-eqopt input:focus-visible+.also-eqopt__in{outline:2px solid var(--accent);outline-offset:2px}
.also-eqopt__ic{flex:none;color:var(--accent)}
.also-eqopt__name{font-weight:600;color:var(--text-strong)}
.also-buy__resolved{
  display:flex;gap:.55rem;align-items:flex-start;margin:.75rem 0 0;
  padding:.7rem .9rem;background:var(--acc-blue-pale,#EAF3F8);
  border-radius:var(--radius-md);font-size:.9rem;color:var(--acc-ink-deep,#2B1810);
}
.also-buy__resolved .also-ic{flex:none;color:var(--accent);margin-top:.12rem}

/* total + add to cart */
.also-buy__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  padding:.9rem 0 1rem;margin-top:.3rem;border-top:1px solid var(--border);
}
.also-buy__totallab{font-weight:600;color:var(--text-muted)}
.also-buy__totalamt{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
[data-total-now]{font-family:var(--font-display);font-size:1.75rem;font-weight:700;color:var(--text-strong)}
[data-total-was]{color:var(--text-muted);font-size:1rem}
.also-buy__totalsave{
  background:var(--acc-blue,#93BBCF);color:var(--acc-ink-deep,#2B1810);
  font-size:var(--fs-micro);font-weight:700;padding:.2rem .6rem;border-radius:var(--radius-pill);
}
.also-pdp .woocommerce-variation-add-to-cart{display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap}
.also-pdp .quantity{display:flex;align-items:center}
.also-pdp .quantity .qty{
  width:72px;height:54px;text-align:center;
  border:1.5px solid var(--border-strong);border-radius:var(--radius-md);
  font-family:var(--font-body);font-weight:700;font-size:1rem;background:var(--surface-card);
}
.also-pdp .single_add_to_cart_button{flex:1;min-width:210px;justify-content:center}
.also-pdp .single_add_to_cart_button.disabled{opacity:.55;cursor:not-allowed}

.also-buy__reassure{
  list-style:none;margin:1.2rem 0 0;padding:1.1rem 0 0;
  border-top:1px solid var(--border);display:grid;gap:.6rem;
}
.also-buy__reassure li{display:flex;gap:.6rem;align-items:flex-start;color:var(--text-muted);font-size:.9rem}
.also-buy__reassure .also-ic{color:var(--accent);flex:none;margin-top:.1rem}
.also-buy__reassure .woocommerce-Price-amount{font-weight:700;color:var(--text-body)}

/* ---------- Calculator ------------------------------------ */
.also-pdpcalc{padding-block:clamp(2rem,4vw,3.2rem)}

/* Coffee Calculator — one question, one answer.
   Deliberately no price, no cost-per-cup, no "lasts you": the frequency IS
   the answer, and cost-per-cup lives on the homepage only. */
.also-cc{
  background:rgba(253,244,230,.06);border:1px solid rgba(253,244,230,.14);
  border-radius:var(--radius-2xl,44px);padding:clamp(1.4rem,3vw,2.6rem);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.4rem,3.5vw,3rem);align-items:center;
}
.also-cc__intro .also-eyebrow{color:var(--acc-blue,#93BBCF)}
.also-cc__intro h2{color:var(--acc-cream,#FDF4E6);margin:.35rem 0 .6rem;line-height:1.04}
.also-cc__intro p{color:rgba(253,244,230,.76);margin:0;font-size:.98rem;line-height:1.6;max-width:38ch}

.also-cc__work{display:grid;gap:clamp(1.2rem,2.6vw,2rem)}

.also-cc__ask{text-align:center}
.also-cc__asklab{
  display:block;font-weight:700;font-size:.86rem;letter-spacing:.02em;
  /* --acc-blue on the brown panel is 4.06:1 — under AA for text this size.
     Lightened just enough to clear 4.5 (5.29:1) while still reading blue. */
  color:#B4D3E2;margin-bottom:.7rem;
}
.also-cc__askunit{
  display:block;margin-top:.5rem;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(253,244,230,.6);
}
.also-cc input[type=range]{
  width:100%;height:44px;                 /* full 44px touch target, not just the track */
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;margin:0;
}
.also-cc input[type=range]::-webkit-slider-runnable-track{
  height:14px;border-radius:999px;background:rgba(253,244,230,.22);
}
.also-cc input[type=range]::-moz-range-track{
  height:14px;border-radius:999px;background:rgba(253,244,230,.22);
}
.also-cc input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:32px;height:32px;margin-top:-9px;
  border-radius:50%;background:var(--acc-blue,#93BBCF);border:3px solid var(--acc-primary,#714230);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.also-cc input[type=range]::-moz-range-thumb{
  width:32px;height:32px;border-radius:50%;background:var(--acc-blue,#93BBCF);
  border:3px solid var(--acc-primary,#714230);box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.also-cc input[type=range]:focus-visible{outline:2px solid var(--acc-blue,#93BBCF);outline-offset:6px}

/* the answer: cups -> bag(s) */
.also-cc__answer{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(.7rem,2vw,1.6rem);flex-wrap:wrap;
}
.also-cc__cup{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:96px;height:96px;border-radius:22px;
  /* --acc-primary on --acc-blue is 4.06:1, and the .85 opacity on the label
     below drags it to 3.27:1. --acc-ink clears AA in both places (7.09:1 for
     the number, 5.33:1 for the label once its opacity is applied) and keeps
     the brand rule of dark brown on blue. */
  background:var(--acc-blue,#93BBCF);color:var(--acc-ink,#402115);
}
.also-cc__cupnum{font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1}
.also-cc__cuplab{
  font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  margin-top:.15rem;opacity:.85;
}
.also-cc__arrow{flex:none;color:var(--acc-blue,#93BBCF);display:inline-flex}
.also-cc__arrow .also-ic{width:34px;height:34px}

.also-cc__picks{
  list-style:none;margin:0;padding:0;display:flex;align-items:flex-end;
  gap:clamp(.5rem,1.6vw,1.1rem);flex-wrap:wrap;justify-content:center;min-width:0;
}
.also-cc__pick{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  max-width:140px;text-align:center;
}
.also-cc__pick img{
  width:92px;height:auto;display:block;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.34));
  transform-origin:bottom center;
}
.also-cc__pick span{
  font-size:.82rem;font-weight:700;line-height:1.3;color:var(--acc-cream,#FDF4E6);
  text-wrap:balance;
}
.also-cc__or{
  align-self:center;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(253,244,230,.55);
}

/* The action now sits INSIDE .also-cc__work and the fine print inside
   .also-cc__intro, so the calculator is a single grid row. It used to be a
   full-width third row, which (with align-items:center on a 2-col grid) left a
   large empty panel below the intro copy on wide screens. */
.also-cc__act{text-align:center;margin-top:clamp(.9rem,2vw,1.4rem)}
.also-cc__fine{font-size:.78rem;color:rgba(253,244,230,.55);margin:1.1rem 0 0;max-width:38ch}
/* cups + cost per cup under each recommendation - the FAQ and the homepage USP
   both promise "cups & cost per cup", which the slider-only version did not show. */
.also-cc__pickmeta{display:block;font-size:.74rem;font-weight:600;line-height:1.35;
  color:rgba(253,244,230,.62);margin-top:.15rem}

@media (max-width:899px){
  .also-cc{grid-template-columns:minmax(0,1fr);text-align:center}
  .also-cc__intro p{margin-inline:auto}
  .also-cc__intro .also-eyebrow{justify-content:center}
}
/* once the picks wrap below the cup the horizontal arrow points at nothing */
@media (max-width:699px){
  .also-cc__answer{flex-direction:column;gap:.9rem}
  .also-cc__arrow{transform:rotate(90deg)}
  .also-cc__arrow .also-ic{width:26px;height:26px}
}
@media (max-width:560px){
  .also-cc__cup{width:82px;height:82px;border-radius:18px}
  .also-cc__cupnum{font-size:2.2rem}
  .also-cc__pick img{width:74px}
  .also-cc__pick{max-width:112px}
  .also-cc__pick span{font-size:.8rem}
}

/* ---------- Detail ---------------------------------------- */
.also-pdpdetail__grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:start;
}
.also-pdpdetail__story h2{margin:.3rem 0 .7rem}
.also-pdpdetail__story p{color:var(--text-body);margin:0 0 .8rem;max-width:60ch}
.also-pdpdetail__suits{display:flex;gap:.5rem;align-items:flex-start;color:var(--text-muted)!important}
.also-pdpdetail__suits .also-ic{flex:none;color:var(--accent);margin-top:.15rem}
/* The blue that used to be this whole section now lives on the spec card, which
   is where the client wanted it: the band reads cream, and the one dense piece of
   information on the page is the thing that carries the colour. Text stays
   --text-strong on a pale blue, so contrast is well clear of AA. */
.also-pdpdetail__specs{
  margin:0;background:var(--acc-blue-pale);border:1px solid rgba(102,150,172,.28);
  border-radius:var(--radius-xl);padding:.4rem 1.3rem;box-shadow:var(--shadow-sm);
}
.also-pdpdetail__specs>div{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--border);
}
.also-pdpdetail__specs>div:last-child{border-bottom:0}
.also-pdpdetail__specs dt{color:var(--text-muted);font-weight:600;font-size:.9rem;margin:0}
.also-pdpdetail__specs dd{margin:0;font-weight:700;color:var(--text-strong);text-align:right;font-size:.92rem}

/* ---------- Brew ------------------------------------------ */
.also-pdpbrew{background:var(--acc-base,#FDF4E6)}
.also-pdpbrew__head{text-align:center;max-width:58ch;margin:0 auto clamp(1.4rem,2.6vw,2.2rem)}
.also-pdpbrew__head h2{margin:.35rem 0 .5rem}
.also-pdpbrew__head p{color:var(--text-muted);margin:0}
.also-pdpbrew__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.9rem}
.also-brewcard{
  background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.15rem 1.15rem 1.25rem;box-shadow:var(--shadow-xs);
  display:flex;flex-direction:column;gap:.4rem;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.also-brewcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.also-brewcard__ic{color:var(--accent)}
.also-brewcard h3{margin:.15rem 0 0;font-size:1.05rem}
.also-brewcard__grind{
  align-self:flex-start;background:var(--acc-blue-pale,#EAF3F8);color:var(--acc-ink-deep,#2B1810);
  font-size:var(--fs-micro);font-weight:700;padding:.16rem .6rem;border-radius:var(--radius-pill);
}
.also-brewcard p{margin:.25rem 0 0;font-size:.88rem;color:var(--text-muted);line-height:1.5}

/* ---------- FAQ ------------------------------------------- */
.also-pdpfaq__in{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(1.4rem,3.5vw,3rem);align-items:start}
.also-pdpfaq__head h2{margin:.35rem 0 .6rem}
.also-pdpfaq__support{color:var(--text-muted);margin:0}
.also-pdpfaq__support a{color:var(--accent);font-weight:700}
.also-pdpfaq__list{display:grid;gap:.6rem}
.also-pdpfaq__item{
  background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.also-pdpfaq__item:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.also-pdpfaq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.2rem;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:700;color:var(--text-strong);font-size:1.02rem;
}
.also-pdpfaq__item summary::-webkit-details-marker{display:none}
.also-pdpfaq__item summary .also-ic{flex:none;color:var(--accent);transition:transform var(--dur-base) var(--ease-out)}
.also-pdpfaq__item[open] summary .also-ic{transform:rotate(180deg)}
.also-pdpfaq__body{padding:0 1.2rem 1.15rem}
.also-pdpfaq__body p{margin:0;color:var(--text-muted);line-height:1.6}

/* ---------- Reviews + related ----------------------------- */
.also-pdp__extra{background:var(--acc-base,#FDF4E6);padding-block:clamp(2rem,4.5vw,3.5rem)}
/* WooCommerce floats #comments and #review_form_wrapper at 48% each, which
   left the related-products list squashed into the right-hand half. */
.also-pdp__extra #reviews,
.also-pdp__extra #comments,
.also-pdp__extra #review_form_wrapper,
.also-pdp__extra .related{width:100%;max-width:none;float:none;clear:both;display:block}
.also-pdp__extra .related{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.also-pdp__extra .related>h2,
.also-pdp__extra #reviews h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);margin:0 0 1.2rem}
/* NB: WooCommerce's wrapper is <section class="related products">, so the
   grid must be scoped to ul.products or the section itself becomes a grid
   and drops its heading and list into separate columns. */
.also-pdp__extra ul.products{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:1.1rem;
  list-style:none;margin:0;padding:0;
}
.also-pdp__extra ul.products>li{margin:0;width:auto!important;float:none!important;min-width:0}

/* ---------- Reviews (placeholder UI) ---------------------- */
.also-pdprev__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
.also-pdprev__score{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;margin:.4rem 0 1rem}
.also-pdprev__score .n{font-family:var(--font-display);font-size:clamp(2.4rem,1.6rem + 2.4vw,3.4rem);font-weight:700;color:var(--text-strong);line-height:1}
/* #9A5E1F on the cream review card was 4.41:1, just under AA. Deepened to
   5.28:1 — same amber, one step darker. */
.also-pdprev__stars{color:#8A5319;letter-spacing:2px;font-size:1.15rem}
.also-pdprev__score .l{flex-basis:100%;color:var(--text-muted);font-size:.9rem}
.also-pdprev__dist{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;max-width:320px}
.also-pdprev__dist li{display:grid;grid-template-columns:2.2rem 1fr 2.6rem;align-items:center;gap:.6rem;font-size:.82rem;color:var(--text-muted)}
.also-pdprev__dist .bar{height:8px;border-radius:4px;background:var(--acc-sand-deep,#EADCC2);overflow:hidden}
.also-pdprev__dist .bar span{display:block;height:100%;background:#9A5E1F;border-radius:4px}
.also-pdprev__dist .n{text-align:right}
.also-pdprev__list{display:grid;gap:.75rem}
.also-review{background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.25rem 1.2rem;box-shadow:var(--shadow-xs)}
.also-review__top{display:flex;align-items:center;gap:.7rem;margin-bottom:.55rem}
.also-review__ava{flex:none;width:38px;height:38px;border-radius:50%;background:var(--acc-blue-pale,#EAF3F8);color:var(--accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700}
.also-review__name{display:block;font-weight:700;color:var(--text-strong);font-size:.95rem}
.also-review__verify{display:inline-flex;align-items:center;gap:.25rem;font-size:.74rem;color:var(--text-muted)}
.also-review__verify .also-ic{width:.9em;height:.9em;color:var(--accent)}
.also-review__stars{margin-left:auto;color:#9A5E1F;letter-spacing:1px;font-size:.9rem;flex:none}
.also-review__title{margin:0 0 .3rem;font-size:1rem}
.also-review__body{margin:0;color:var(--text-muted);font-size:.92rem;line-height:1.55}

/* ---------- Responsive ------------------------------------ */
@media (max-width:1023px){
  .also-pdp__grid{grid-template-columns:1fr;gap:1.75rem}
  .also-pdp__media{position:static}
  .also-pdp__well{max-width:520px;margin-inline:auto}
  .also-pdpdetail__grid,
  .also-pdprev__grid,
  .also-pdpfaq__in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* minmax(0,…) not 1fr — otherwise the track can't shrink below the card's
     min-content and the whole page gains a horizontal scrollbar */
  .also-sizeopts{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .also-sizeopt__in{flex-direction:row;flex-wrap:wrap;align-items:baseline;text-align:left;gap:.25rem .7rem;padding:.75rem .9rem}
  .also-sizeopt__size{flex:none}
  .also-sizeopt__cups{flex:none}
  .also-sizeopt__price{margin-top:0;margin-left:auto}
  .also-sizeopt__per{flex-basis:100%}
  .also-sizeopt__flag{left:auto;right:.8rem;transform:none}
  .also-pdp .woocommerce-variation-add-to-cart{flex-direction:column}
  .also-pdp .quantity .qty{width:100%}
  .also-pdp .single_add_to_cart_button{width:100%}
  .also-buy__total{padding-bottom:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .also-brewcard,.also-planopt__in,.also-sizeopt__in,.also-eqopt__in{transition:none}
}

/* ---------- Sticky buy bar ---------------------------------- */
.also-stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  display:flex;align-items:center;gap:.85rem;
  padding:.7rem clamp(.9rem,3vw,1.6rem);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  background:rgba(253,244,230,.94);backdrop-filter:blur(12px);
  border-top:1px solid var(--border);
  box-shadow:0 -14px 34px -22px rgba(40,21,13,.55);
  animation:also-sb-in .28s var(--ease-out,ease) both;
}
.also-stickybuy[hidden]{display:none}
@keyframes also-sb-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
.also-stickybuy__img{
  flex:none;width:46px;height:46px;object-fit:contain;
  background:var(--acc-surface,#FAE9CD);border-radius:var(--radius-md);
}
.also-stickybuy__txt{display:flex;flex-direction:column;min-width:0;line-height:1.25;flex:1}
.also-stickybuy__name{
  font-family:var(--font-display);font-weight:700;color:var(--text-strong);
  font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.also-stickybuy__price{font-size:.85rem;color:var(--text-muted);font-weight:600}
.also-stickybuy__btn{flex:none;white-space:nowrap}
@media (max-width:479px){
  .also-stickybuy__img{display:none}
  .also-stickybuy__btn{padding-inline:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .also-stickybuy{animation:none}
}

/* the bar sits over the footer — keep the last section clear of it */
.also-pdp__extra{padding-bottom:calc(clamp(2rem,4.5vw,3.5rem) + 76px)}

/* ---------- Add-to-basket loading state --------------------- */
.also-pdp .single_add_to_cart_button.is-loading{opacity:.75;pointer-events:none}

/* ============================================================
   Section rhythm + fine detail
   The page used to be one flat cream field. It now follows the
   homepage pattern: alternating bands split by the animated wave.
   ============================================================ */

/* the buy band sits on cream, like the homepage hero band */
.also-pdp{background:var(--acc-base)}
.also-pdp .also-divider{margin:0}

/* ---------- Reusable pill row (USPs, trust, stats) --------- */
.also-pillrow{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
}
.also-pillrow li{
  display:inline-flex;align-items:center;gap:.45rem;
  background:var(--surface-card);border:1px solid var(--acc-border);
  border-radius:var(--radius-pill);padding:.44rem .9rem;
  font-size:.84rem;font-weight:600;color:var(--text-body);
  box-shadow:var(--shadow-xs);
}
.also-pillrow li strong{color:var(--text-strong);font-weight:700}
.also-pillrow .also-ic{width:1.05em;height:1.05em;color:var(--accent);flex:none}

/* the gallery's trust pills */
.also-pdp__ticks{justify-content:center}

/* floating chip on the product well */
.also-chip--well{
  position:absolute;left:16px;bottom:16px;z-index:3;
  font-size:.8rem;padding:.42rem .8rem;
}
.also-chip--well .also-ic{width:1em;height:1em;color:var(--accent)}

/* ---------- Buy box: softer, more considered detail -------- */
.also-buy__reassure li{align-items:center;gap:.7rem}
.also-buy__reassure .also-ic{
  width:30px;height:30px;padding:7px;border-radius:var(--radius-pill);
  background:var(--acc-surface);color:var(--accent);
  box-sizing:border-box;margin-top:0;
}
.also-pdp__notes span{
  background:var(--acc-surface);border-radius:var(--radius-pill);
  padding:.22rem .6rem;
}

/* ---------- Calculator on brown ---------------------------- */
.also-pdpcalc{padding-block:clamp(2.4rem,4.5vw,3.6rem)}
.also-cc{
  background:linear-gradient(165deg,#5C3526,#3F2116);
  border:1px solid rgba(253,244,230,.10);
  box-shadow:0 34px 70px -34px rgba(20,10,5,.75);
}

/* ---------- Detail: alternating spec rows ------------------ */
.also-pdpdetail{position:relative;overflow-x:clip}
/* White bands rather than the old sand ones — the card is pale blue now, and
   sand-on-blue muddied both. */
.also-pdpdetail__specs>div:nth-child(odd){background:rgba(255,255,255,.62);border-radius:var(--radius-md)}
.also-pdpdetail__specs>div{padding-inline:.8rem;border-bottom-color:transparent}
.also-pdpdetail__specs{padding:.7rem .8rem}
.also-pdpdetail .also-emblem-bg--tl{top:auto;bottom:-8%;left:-6%;width:clamp(150px,15vw,260px);opacity:.4}

/* ---------- Brew cards: a bit more craft ------------------- */
.also-brewcard{position:relative;overflow:hidden;background:var(--surface-card)}
.also-brewcard::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--acc-blue),var(--acc-clay));
  opacity:0;transition:opacity var(--dur-base) var(--ease-out);
}
.also-brewcard:hover::before{opacity:1}
.also-brewcard__ic{
  width:44px;height:44px;padding:9px;border-radius:var(--radius-pill);
  background:var(--acc-blue-pale);color:var(--accent);box-sizing:border-box;
}

/* ---------- Reviews: head, stat pills, lifestyle shot ------ */
.also-pdprev__head{text-align:center;max-width:62ch;margin:0 auto clamp(1.5rem,3vw,2.4rem)}
.also-pdprev__head .also-eyebrow{justify-content:center}
.also-pdprev__head h2{margin:.35rem 0 1rem}
.also-pdprev__pills li{background:#fff}
.also-pdprev__shot{
  position:relative;margin:1.4rem 0 0;border-radius:var(--radius-xl);
  overflow:hidden;box-shadow:var(--shadow-sm);max-width:320px;
}
.also-pdprev__shot img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.also-pdprev__shot figcaption{
  position:absolute;left:12px;bottom:12px;
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(253,244,230,.94);color:var(--acc-ink-deep);
  font-size:.78rem;font-weight:700;padding:.36rem .78rem;
  border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);
}
.also-pdprev__shot figcaption .also-ic{width:1em;height:1em;color:var(--accent)}
.also-review{background:#fff}

/* ---------- FAQ + related on their own bands --------------- */
.also-pdpfaq__item{background:#fff}
.also-pdp__extra .also-pcard{background:#fff}

@media (max-width:1023px){
  .also-pdprev__shot{max-width:none}
}
@media (max-width:560px){
  .also-pillrow{justify-content:flex-start}
  .also-pdprev__pills{justify-content:center}
}

/* ---------- Corrections from the visual pass --------------- */
/* the head is measured for reading; the pill row must not inherit that cap */
.also-pdprev__head{max-width:none}
.also-pdprev__head h2,
.also-pdprev__head>p{max-width:62ch;margin-inline:auto}
.also-pdprev__pills{max-width:none}

/* five equipment cards should sit on one row at desktop, not 4 + an orphan */
.also-pdpbrew__grid{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}

/* a flex parent makes every text node its own flex item, which was opening
   a gap before the full stop — the copy is wrapped in a span instead */
.also-pdpdetail__suits{align-items:flex-start}
.also-pdpdetail__suits>span{flex:1}

/* ============================================================
   Audit fixes — layout, breakpoints, touch targets
   ============================================================ */

/* ---- (5) grid areas so mobile can lead with the name + price ---- */
.also-pdp__grid{
  grid-template-areas:"media head" "media buy";
  grid-template-rows:auto 1fr;
}
.also-pdp__head{grid-area:head;margin-bottom:0}
.also-pdp__media{grid-area:media}
.also-pdp__summary{grid-area:buy;padding-top:1.4rem}

/* ---- (4) tablets are wide enough for two columns ---- */
@media (max-width:1023px) and (min-width:700px){
  .also-pdp__grid{
    grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    grid-template-areas:"media head" "media buy";
    gap:clamp(1.25rem,3vw,2.25rem);
  }
  .also-pdp__media{position:sticky;top:88px}
  .also-pdp__well{max-width:none;margin-inline:0}
  /* the well was capped at 520px and centred by the ≤1023 rule below */
}

/* ---- (5)(6) phones: name and price first, smaller image ---- */
@media (max-width:699px){
  .also-pdp__grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "media" "buy";
    gap:1.1rem;
  }
  .also-pdp__media{position:static}
  .also-pdp__well{max-width:360px;margin-inline:auto;padding:clamp(.8rem,3vw,1.2rem)}
  .also-gal__main{aspect-ratio:1/1;max-height:280px}
  .also-gal__thumb{width:56px}
  .also-pdp__summary{padding-top:.4rem}
  .also-pdp__title{font-size:clamp(2rem,1.4rem + 3.2vw,2.6rem)}
  .also-pdp__head{margin-bottom:.2rem}
}

/* ---- (1) the chip was landing on top of the thumbnails ---- */
.also-chip--well{left:auto;right:16px;bottom:auto;top:16px}
.also-pdp__badge+.also-gal+.also-chip--well{top:16px}
@media (max-width:699px){
  .also-chip--well{top:12px;right:12px;font-size:.74rem;padding:.34rem .66rem}
}

/* ---- (7) trust pills: one scrolling row on phones, not three stacked ---- */
@media (max-width:699px){
  .also-pdp__ticks{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding-bottom:.25rem;margin-inline:calc(var(--pdp-gutter,1.25rem) * -1);
    padding-inline:var(--pdp-gutter,1.25rem);
    scrollbar-width:none;
  }
  .also-pdp__ticks::-webkit-scrollbar{display:none}
  .also-pdp__ticks li{flex:none;scroll-snap-align:start}
}


/* ---- (18) lift the smallest text a touch on phones ---- */
@media (max-width:699px){
  .also-pdpdetail__specs dt{font-size:.88rem}
  .also-pdpdetail__specs dd{font-size:.95rem}
  .also-sizeopt__cups{font-size:.82rem}
  .also-pdpcalc__fine{font-size:.85rem}
}

/* ---- (9) Delivery & returns ---- */
.also-pdpship__head{text-align:center;margin:0 auto clamp(1.2rem,2.4vw,1.9rem)}
.also-pdpship__head .also-eyebrow{justify-content:center}
.also-pdpship__head h2{margin:.3rem 0 0}
.also-pdpship__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:.9rem}
.also-shipcard{
  background:var(--surface-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.15rem 1.2rem 1.25rem;box-shadow:var(--shadow-xs);
}
.also-shipcard__ic{
  display:inline-flex;width:40px;height:40px;padding:9px;border-radius:var(--radius-pill);
  background:var(--acc-surface);color:var(--accent);box-sizing:border-box;margin-bottom:.6rem;
}
.also-shipcard h3{margin:0 0 .3rem;font-size:1.02rem}
.also-shipcard p{margin:0;font-size:.9rem;color:var(--text-muted);line-height:1.55}
.also-shipcard strong{color:var(--text-strong)}

/* ---- (11) the way out for anyone who isn't sure ---- */
.also-buy__unsure{
  display:flex;gap:.6rem;align-items:flex-start;margin:1.1rem 0 0;
  padding:.8rem .95rem;background:var(--acc-surface);border-radius:var(--radius-md);
  font-size:.9rem;color:var(--text-body);
}
.also-buy__unsure .also-ic{flex:none;color:var(--accent);margin-top:.12rem}
.also-buy__unsure a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px}

/* ---- rating jumps to the reviews ---- */
.also-pdp__rate .cnt{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
.also-pdp__rate .cnt:hover{color:var(--accent)}

/* ---- (21) gallery lightbox ---- */
.also-gal__main{cursor:zoom-in}
.also-lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(40,21,13,.86);backdrop-filter:blur(6px);padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base);
}
.also-lightbox.is-open{opacity:1;visibility:visible}
.also-lightbox img{
  max-width:min(900px,92vw);max-height:86vh;width:auto;height:auto;
  border-radius:var(--radius-xl);background:var(--acc-surface);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
.also-lightbox__close{
  position:absolute;top:clamp(.8rem,3vw,1.6rem);right:clamp(.8rem,3vw,1.6rem);
  width:46px;height:46px;border:0;border-radius:var(--radius-pill);cursor:pointer;
  background:var(--acc-cream,#FDF4E6);color:var(--acc-ink-deep,#28150D);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);
}
@media (prefers-reduced-motion:reduce){.also-lightbox{transition:none}}

/* ---- price on screen one for phones (plan cards are a screen further down) ---- */
.also-pdp__fromprice{display:none}
@media (max-width:699px){
  .also-pdp__fromprice{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;
    margin:.2rem 0 .9rem;font-family:var(--font-display);
    font-size:1.6rem;font-weight:700;color:var(--text-strong);
  }
  .also-pdp__fromprice>span:first-child{
    font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--text-muted);
  }
  .also-pdp__fromsub{
    font-family:var(--font-body);font-size:.82rem;font-weight:600;
    color:var(--accent);flex-basis:100%;
  }
}

/* ---- (7) tablet media column is narrow too — same scrolling pill row ---- */
@media (max-width:1023px){
  .also-pdp__ticks{
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding-bottom:.25rem;scrollbar-width:none;
  }
  .also-pdp__ticks::-webkit-scrollbar{display:none}
  .also-pdp__ticks li{flex:none;scroll-snap-align:start}
}

/* the scrolling pill row was cutting off mid-word with no hint it scrolls */
@media (max-width:1023px){
  .also-pdp__ticks{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  }
}
/* "Tastes like" reads better inline than as its own line on narrow screens */
@media (max-width:699px){
  .also-pdp__notes{gap:.4rem .55rem}
  .also-pdp__notes span{align-self:center}
}

/* ============================================================
   Customer content — photo wall, photo reviews, customer Q&A
   ============================================================ */

/* ---- photo wall on the dark band ---- */
.also-ugc{background:var(--acc-ink-deep);color:var(--acc-cream)}
.also-ugc__head{text-align:center;max-width:60ch;margin:0 auto clamp(1.5rem,3vw,2.4rem)}
.also-ugc__head .also-eyebrow{color:var(--acc-blue);justify-content:center}
.also-ugc__head h2{color:var(--acc-cream);margin:.35rem 0 .55rem}
.also-ugc__head p{color:rgba(253,244,230,.72);margin:0}

.also-ugc__grid{
  list-style:none;margin:0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.also-ugc__item{
  position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;
  background:rgba(253,244,230,.07);aspect-ratio:1/1;
}
.also-ugc__item--wide{grid-column:span 2;grid-row:span 2;aspect-ratio:1/1}
.also-ugc__item img{
  width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;
  transition:transform var(--dur-slow) var(--ease-out),filter var(--dur-base) var(--ease-out);
}
.also-ugc__item:hover img{transform:scale(1.045)}
.also-ugc__meta{
  position:absolute;inset:auto 0 0 0;padding:.9rem .9rem .8rem;
  background:linear-gradient(180deg,rgba(20,10,5,0),rgba(20,10,5,.82) 55%);
  pointer-events:none;
}
.also-ugc__cap{
  margin:0 0 .12rem;font-size:.86rem;font-weight:600;line-height:1.35;
  color:var(--acc-cream);text-wrap:balance;
}
.also-ugc__by{font-size:.74rem;color:rgba(253,244,230,.66);font-weight:600}
.also-ugc__item--wide .also-ugc__cap{font-size:1.05rem}
.also-ugc__foot{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:1.4rem 0 0;color:rgba(253,244,230,.7);font-size:.9rem;text-align:center;
}
.also-ugc__foot .also-ic{color:var(--acc-blue);flex:none}
.also-ugc__foot a{color:var(--acc-cream);font-weight:700;text-decoration:underline;text-underline-offset:2px}

@media (max-width:899px){
  .also-ugc__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .also-ugc__item--wide{grid-column:span 2;grid-row:span 2}
}
@media (max-width:599px){
  .also-ugc__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .also-ugc__item--wide{grid-column:span 2;grid-row:auto;aspect-ratio:3/2}
  .also-ugc__cap{font-size:.8rem}
  .also-ugc__meta{padding:.7rem .7rem .6rem}
}

/* ---- reviews with a photo ---- */
.also-review__where{color:var(--text-muted);font-weight:600;margin-left:.3rem;font-size:.86em}
.also-review__main{display:flex;gap:.9rem;align-items:flex-start}
.also-review__txt{min-width:0;flex:1}
.also-review__shot{
  flex:none;width:104px;height:104px;object-fit:cover;border-radius:var(--radius-md);
  cursor:zoom-in;background:var(--acc-surface);
  transition:transform var(--dur-base) var(--ease-out);
}
.also-review__shot:hover{transform:scale(1.03)}
@media (max-width:479px){
  .also-review__main{flex-direction:column}
  .also-review__shot{width:100%;height:auto;aspect-ratio:3/2}
}

/* ---- customer questions ---- */
.also-cq{margin-top:clamp(2rem,4vw,3rem)}
.also-cq__title{
  display:flex;align-items:center;gap:.55rem;justify-content:center;
  margin:0 0 1.1rem;font-size:1.1rem;color:var(--text-strong);
}
.also-cq__title .also-ic{color:var(--accent)}
.also-cq__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:.8rem}
.also-cq__item{
  background:var(--surface-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.1rem 1.2rem 1.2rem;box-shadow:var(--shadow-xs);
}
.also-cq__q{
  margin:0 0 .3rem;font-family:var(--font-display);font-weight:700;
  font-size:1.02rem;color:var(--text-strong);line-height:1.35;
}
.also-cq__who{display:block;font-size:.78rem;color:var(--text-muted);font-weight:600;margin-bottom:.7rem}
.also-cq__a{margin:0;font-size:.9rem;color:var(--text-muted);line-height:1.55}
.also-cq__badge{
  display:inline-block;background:var(--accent);color:var(--acc-cream);
  font-size:var(--fs-micro);font-weight:700;padding:.12rem .5rem;
  border-radius:var(--radius-pill);margin-right:.45rem;vertical-align:1px;
}

/* lightbox caption for customer photos */
.also-lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem}
.also-lightbox figcaption{
  color:var(--acc-cream,#FDF4E6);font-size:.9rem;font-weight:600;
  text-align:center;max-width:60ch;opacity:.85;
}
.also-lightbox figcaption[hidden]{display:none}
.also-ugc__item img:focus-visible,
.also-review__shot:focus-visible{outline:3px solid var(--acc-blue);outline-offset:3px}

/* ============================================================
   Motion — scroll reveals, selection feedback, micro-interaction
   Everything here is gated: the motion tokens collapse to 0ms
   under prefers-reduced-motion, and the reveal JS skips entirely.
   ============================================================ */

/* ---- staggered section reveals (reuses app.js's IntersectionObserver) ---- */
.also-reveal .also-eyebrow,
.also-reveal > .also-container > h2,
.also-reveal .also-cc__intro,
.also-reveal .also-pdpbrew__head,
.also-reveal .also-pdprev__head,
.also-reveal .also-ugc__head,
.also-reveal .also-pdpship__head,
.also-reveal .also-pdpfaq__head,
.also-reveal .also-pdpdetail__story{opacity:0}
.also-reveal.is-in .also-eyebrow,
.also-reveal.is-in > .also-container > h2,
.also-reveal.is-in .also-cc__intro,
.also-reveal.is-in .also-pdpbrew__head,
.also-reveal.is-in .also-pdprev__head,
.also-reveal.is-in .also-ugc__head,
.also-reveal.is-in .also-pdpship__head,
.also-reveal.is-in .also-pdpfaq__head,
.also-reveal.is-in .also-pdpdetail__story{animation:also-fade-rise var(--dur-reveal) var(--ease-out) both}

/* children stagger in behind their heading */
.also-reveal .also-cc__pick,
.also-reveal .also-brewcard,
.also-reveal .also-review,
.also-reveal .also-ugc__item,
.also-reveal .also-shipcard,
.also-reveal .also-cq__item,
.also-reveal .also-pdpfaq__item,
.also-reveal .also-pdpdetail__specs,
.also-reveal .also-pcard{opacity:0}
.also-reveal.is-in .also-cc__pick,
.also-reveal.is-in .also-brewcard,
.also-reveal.is-in .also-review,
.also-reveal.is-in .also-ugc__item,
.also-reveal.is-in .also-shipcard,
.also-reveal.is-in .also-cq__item,
.also-reveal.is-in .also-pdpfaq__item,
.also-reveal.is-in .also-pdpdetail__specs,
.also-reveal.is-in .also-pcard{animation:also-fade-rise var(--dur-reveal) var(--ease-out) both}
.also-reveal.is-in :is(.also-cc__pick,.also-brewcard,.also-review,.also-ugc__item,.also-shipcard,.also-cq__item,.also-pdpfaq__item):nth-child(1){animation-delay:.05s}
.also-reveal.is-in :is(.also-cc__pick,.also-brewcard,.also-review,.also-ugc__item,.also-shipcard,.also-cq__item,.also-pdpfaq__item):nth-child(2){animation-delay:.11s}
.also-reveal.is-in :is(.also-cc__pick,.also-brewcard,.also-review,.also-ugc__item,.also-shipcard,.also-cq__item,.also-pdpfaq__item):nth-child(3){animation-delay:.17s}
.also-reveal.is-in :is(.also-cc__pick,.also-brewcard,.also-review,.also-ugc__item,.also-shipcard,.also-cq__item,.also-pdpfaq__item):nth-child(4){animation-delay:.23s}
.also-reveal.is-in :is(.also-brewcard,.also-ugc__item,.also-pdpfaq__item):nth-child(5){animation-delay:.29s}
.also-reveal.is-in :is(.also-ugc__item,.also-pdpfaq__item):nth-child(6){animation-delay:.35s}
.also-reveal.is-in .also-ugc__item:nth-child(7){animation-delay:.41s}
.also-reveal.is-in .also-ugc__item:nth-child(8){animation-delay:.47s}
.also-reveal.is-in .also-ugc__item:nth-child(9){animation-delay:.53s}

/* never leave content stranded if the observer never fires */
@media (prefers-reduced-motion:reduce){
  .also-reveal *{animation:none!important}
}

/* ---- selection feedback in the buy box ---- */
.also-planopt__in,.also-sizeopt__in,.also-eqopt__in{will-change:transform}
.also-planopt:active .also-planopt__in,
.also-sizeopt:active .also-sizeopt__in,
.also-eqopt:active .also-eqopt__in{transform:scale(var(--press-scale,.97))}
.also-planopt.is-on .also-planopt__in,
.also-sizeopt.is-on .also-sizeopt__in,
.also-eqopt.is-on .also-eqopt__in{animation:also-pick var(--dur-slow) var(--ease-spring)}
@keyframes also-pick{0%{transform:scale(.985)}60%{transform:scale(1.012)}100%{transform:scale(1)}}
.also-planopt__tick .also-ic{transform:scale(.4);transition:transform var(--dur-base) var(--ease-spring)}
.also-planopt.is-on .also-planopt__tick .also-ic{transform:scale(1)}
.also-eqopt__ic{transition:transform var(--dur-base) var(--ease-spring)}
.also-eqopt.is-on .also-eqopt__ic{transform:scale(1.12) rotate(-4deg)}

/* the grind confirmation should arrive, not appear */
.also-buy__resolved{animation:also-slide-in var(--dur-slow) var(--ease-out) both}
@keyframes also-slide-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* the running total ticks over rather than jumping */
[data-total-now]{font-variant-numeric:tabular-nums;transition:color var(--dur-fast)}
[data-total-now].is-ticking{color:var(--accent)}
.also-buy__totalsave{animation:also-pop var(--dur-slow) var(--ease-spring) both}
@keyframes also-pop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}

/* ---- quantity stepper (injected) ---- */
.also-qty{display:flex;align-items:center;gap:0;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);background:var(--surface-card);overflow:hidden}
.also-qty__btn{
  width:46px;height:52px;border:0;background:transparent;cursor:pointer;
  color:var(--text-strong);font-size:1.15rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast),color var(--dur-fast);
}
.also-qty__btn:hover{background:var(--acc-surface)}
.also-qty__btn:active{transform:scale(.92)}
.also-qty__btn:disabled{opacity:.35;cursor:not-allowed}
.also-qty__btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.also-pdp .also-qty .qty{
  width:44px;height:52px;border:0;border-radius:0;text-align:center;
  font-family:var(--font-body);font-weight:700;font-size:1rem;background:transparent;
  -moz-appearance:textfield;font-variant-numeric:tabular-nums;
}
.also-pdp .also-qty .qty::-webkit-outer-spin-button,
.also-pdp .also-qty .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---- add to basket: label -> spinner -> tick ---- */
.also-pdp .single_add_to_cart_button{position:relative;overflow:hidden}
.also-pdp .single_add_to_cart_button.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;
  border:2.5px solid rgba(253,244,230,.35);border-top-color:var(--acc-cream,#FDF4E6);
  border-radius:50%;animation:also-spin .7s linear infinite;
}
.also-pdp .single_add_to_cart_button.is-loading{color:transparent!important}
@keyframes also-spin{to{transform:rotate(360deg)}}
.also-pdp .single_add_to_cart_button.is-done{background:#3F7D53!important}
.also-cartcount.is-bump{animation:also-bump .55s var(--ease-spring)}
@keyframes also-bump{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ---- FAQ accordion animates open ---- */
.also-pdpfaq__item .also-pdpfaq__body{overflow:hidden}
.also-pdpfaq__item summary{transition:background var(--dur-fast)}
.also-pdpfaq__item[open] summary{background:rgba(250,233,205,.35)}

/* ---- UGC caption arrives on hover, sits flat on touch ---- */
@media (hover:hover){
  .also-ugc__meta{transform:translateY(8px);opacity:.92;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-base)}
  .also-ugc__item:hover .also-ugc__meta,
  .also-ugc__item:focus-within .also-ugc__meta{transform:none;opacity:1}
}

/* ---- the sticky bar carries the actual choice ---- */
.also-stickybuy__setup{
  display:block;font-size:.74rem;color:var(--text-muted);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:479px){.also-stickybuy__setup{display:none}}

/* ============================================================
   Buy box — "How would you like to buy?"
   Subscription first (the thing we want to sell), 3-bag bundle
   second, single bag last. Replaces the old one-off/subscribe pair.
   ============================================================ */
.also-howopts{display:flex;flex-direction:column;gap:.6rem}

.also-howopt{position:relative;display:block;cursor:pointer;text-decoration:none;color:inherit}
.also-howopt input{position:absolute;opacity:0;width:0;height:0}
.also-howopt__in{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:.85rem;padding:.95rem 1.05rem;
  border:1.5px solid var(--border);border-radius:var(--radius-lg);
  background:var(--surface-card);
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out);
}
.also-howopt:hover .also-howopt__in{border-color:var(--border-strong)}
.also-howopt.is-on .also-howopt__in{
  border-color:var(--accent-blue,#93BBCF);
  box-shadow:0 0 0 3px rgba(147,187,207,.28);
}
.also-howopt input:focus-visible + .also-howopt__in{outline:2px solid var(--accent);outline-offset:2px}
.also-howopt--bundle:focus-visible{outline:none}
.also-howopt--bundle:focus-visible .also-howopt__in{outline:2px solid var(--accent);outline-offset:2px}

.also-howopt__ic{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:14px;
  background:var(--acc-surface);color:var(--accent);
}
.also-howopt__ic .also-ic{width:1.25em;height:1.25em}

.also-howopt__txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.also-howopt__txt strong{font-size:1.02rem;line-height:1.25;color:var(--text-strong)}
.also-howopt__txt small{font-size:.86rem;line-height:1.45;color:var(--text-muted)}

.also-howopt__chip{
  display:inline-flex;align-items:center;gap:.3rem;align-self:flex-start;
  margin-top:.35rem;padding:.16rem .55rem;border-radius:var(--radius-pill);
  background:var(--acc-blue-pale);color:var(--acc-ink-deep);
  font-size:.74rem;font-weight:700;
}
.also-howopt__chip .also-ic{width:.85em;height:.85em;color:var(--accent-blue,#93BBCF)}

.also-howopt__price{
  display:flex;flex-direction:column;align-items:flex-end;flex:none;
  font-weight:800;font-size:1.06rem;color:var(--text-strong);line-height:1.2;
}
.also-howopt__price del{font-weight:600;font-size:.85rem;color:var(--text-muted);opacity:.85}
.also-howopt__fromlab{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);
}

.also-howopt__flag{
  position:absolute;top:-.6rem;left:1rem;z-index:2;
  padding:.18rem .6rem;border-radius:var(--radius-pill);
  background:var(--accent-blue,#93BBCF);color:var(--acc-ink-deep);
  font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}
.also-howopt__go{flex:none;color:var(--text-muted);display:inline-flex}
.also-howopt__go .also-ic{width:1.1em;height:1.1em;transition:transform var(--dur-fast) var(--ease-out)}
.also-howopt--bundle:hover .also-howopt__go .also-ic{transform:translateX(3px)}

/* The blue moved to the bundle hero above. The subscription is a plain option
   now: the is-on ring (border + soft halo) is what marks it selected, which
   reads clearly without competing with the hero. */
.also-howopt--sub .also-howopt__ic{background:var(--acc-blue-pale);color:var(--accent-blue,#93BBCF)}

.also-howopt--bundle .also-howopt__in{grid-template-columns:auto minmax(0,1fr) auto auto}
.also-howopt--bundle .also-howopt__ic{background:var(--acc-clay-soft);color:var(--acc-primary)}

.also-howopt--once .also-howopt__ic{background:var(--acc-surface);color:var(--accent)}

/* reassurance strip between the choices and the size picker */
.also-howtrust{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.4rem clamp(.7rem,2vw,1.4rem);margin:.9rem 0 0;padding:0;
}
.also-howtrust li{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.82rem;color:var(--text-muted);font-weight:600;
}
.also-howtrust .also-ic{width:1em;height:1em;color:var(--accent-blue,#93BBCF)}

@media (max-width:560px){
  .also-howopt__in{grid-template-columns:auto minmax(0,1fr);gap:.7rem;padding:.85rem .9rem}
  .also-howopt__price{
    grid-column:2;align-items:flex-start;flex-direction:row;align-items:baseline;
    gap:.45rem;margin-top:.35rem;
  }
  .also-howopt--bundle .also-howopt__in{grid-template-columns:auto minmax(0,1fr) auto}
  .also-howopt--bundle .also-howopt__go{grid-row:1;grid-column:3}
  .also-howopt__ic{width:38px;height:38px;border-radius:12px}
}

/* The bundle is the hero (client 2026-08-14: "the choose any 3 should become
   the hero with the blue background and most popular pill"). `is-push` rather
   than `is-on` because it is a LINK, not a selected radio.

   The paint sits on __in, which owns the border-radius - painting the OUTER <a>
   was the "blue corners" bug the client screenshotted: the outer box has square
   corners under the rounded inner card, so its background peeked out at all
   four corners. */
.also-howopt--bundle.is-push{margin-top:.55rem}   /* headroom for the flag */
.also-howopt--bundle.is-push .also-howopt__in{
  border-color:var(--accent-blue,#93BBCF);
  background:var(--acc-blue-pale,#E5F0F6);
  box-shadow:0 10px 26px -14px rgba(20,10,5,.45);
}
.also-howopt--bundle.is-push:hover .also-howopt__in{box-shadow:0 14px 32px -14px rgba(20,10,5,.5)}
.also-howopt--bundle.is-push .also-howopt__ic{background:#fff}

/* Faint logo behind "What's in the bag".
   Sits under the content (z-index 0 vs the grid's 1) and is pinned to the right so
   it reads as a watermark rather than a graphic. The section already has
   overflow-x:clip, which is what lets it bleed off the edge without adding a
   horizontal scrollbar - do not swap that for overflow:hidden, it would crop the
   top of the emblem too. */
.also-pdpdetail{position:relative}
.also-pdpdetail__mark{
  position:absolute;right:-6%;bottom:-8%;width:min(46vw,560px);height:auto;
  opacity:.07;pointer-events:none;user-select:none;z-index:0;
}
.also-pdpdetail__grid{position:relative;z-index:1}
/* the white spec card needs a touch more lift now it sits on blue rather than cream */
.also-pdpdetail__specs{box-shadow:0 18px 40px -22px rgba(20,40,55,.45)}
@media (max-width:699px){
  .also-pdpdetail__mark{width:78vw;right:-14%;bottom:-4%;opacity:.06}
}

/* No-reviews state. Replaces a fabricated score, star distribution and a list of
   invented named reviews — see also_product_rating(). */
.also-pdprev__empty{
  display:flex;gap:.6rem;align-items:flex-start;justify-content:center;
  max-width:52ch;margin:0 auto;padding:1.4rem 1.2rem;
  background:var(--surface-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  color:var(--text-muted);text-align:left;text-wrap:pretty;
}
.also-pdprev__empty .also-ic{flex:none;color:var(--accent);margin-top:.15rem}

/* ---------------------------------------------------------------- *
 * Add more coffees to the same subscription
 * ------------------------------------------------------------------
 * A horizontal scroller rather than a wrapping grid: it sits inside the buy
 * box, which is a narrow column, and a grid of ten coffees would push the
 * button off the screen. Scrolls under the thumb on touch, and every tile is
 * reachable by keyboard because the selects are real focusable controls.
 * ---------------------------------------------------------------- */
/* min-width:0 is load-bearing, not tidying. This sits inside
   .woocommerce-variation-add-to-cart, which is a flex container, so the default
   min-width:auto stops it shrinking below its content — the scroller's ten tiles
   then pushed it to 1044px and gave the whole product page a horizontal scrollbar
   on a 390px screen instead of scrolling inside itself. */
.also-addbags{margin:0 0 1rem;padding:.85rem .9rem;background:var(--acc-blue-pale);
  border:1px solid rgba(102,150,172,.28);border-radius:var(--radius-lg);
  min-width:0;max-width:100%}
.also-addbags[hidden]{display:none}
.also-addbags__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;margin:0 0 .7rem}
.also-addbags__lab{display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;font-size:.92rem;color:var(--text-strong)}
.also-addbags__lab .also-ic{width:1.05em;height:1.05em;color:var(--accent)}
.also-addbags__hint{font-size:var(--fs-small);color:var(--text-muted)}

.also-addbags__row{
  list-style:none;margin:0;padding:0 0 .35rem;
  display:flex;gap:.6rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  min-width:0;   /* same reason as the wrapper above */
  /* contain:paint is doing real work, not tidying. min-width:0 stops the row
     stretching its parent, but the tiles were still contributing to the
     DOCUMENT's scrollable width — the row scrolled internally AND the whole
     product page scrolled sideways on a 390px screen. Measured: hiding the row
     took scrollWidth 952 -> 390, and contain:paint does the same while keeping
     the row. Nothing inside is positioned, so the new containing block costs
     nothing. */
  contain:paint;
}
.also-addbags__row::-webkit-scrollbar{height:6px}
.also-addbags__row::-webkit-scrollbar-thumb{background:rgba(102,150,172,.45);border-radius:99px}

.also-addbags__item{
  flex:0 0 auto;width:104px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.5rem .45rem;background:var(--surface-card);
  border:1px solid var(--border);border-radius:var(--radius-md);
}
.also-addbags__img{width:52px;height:auto;object-fit:contain}
.also-addbags__name{
  font-weight:700;font-size:.76rem;line-height:1.2;text-align:center;
  color:var(--text-strong);
  /* two lines then ellipsis — "Seasonal Single Origin" must not shove the
     dropdowns out of alignment across the row */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.4em;
}
.also-addbags__field{display:block;width:100%}
.also-addbags__sel{
  font:inherit;font-size:.76rem;font-weight:700;color:var(--text-strong);
  width:100%;padding:.28rem .4rem;min-height:32px;
  background:var(--surface-page);border:1px solid var(--border);
  border-radius:var(--radius-sm);cursor:pointer;
}
.also-addbags__sel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.also-addbags__qty{margin-top:.25rem}

@media (prefers-reduced-motion:no-preference){
  .also-addbags__item{transition:border-color var(--dur-fast) var(--ease-out)}
}
.also-addbags__item:focus-within{border-color:var(--accent)}

/* ---------------------------------------------------------------- *
 * Buy column: one blue panel, not three
 * ------------------------------------------------------------------
 * The selected subscription card, the delivery block and the add-more row were
 * all --acc-blue-pale, stacked down the same column. Three competing panels
 * read as noise, and the subscription card's blue sitting directly above
 * "Choose any 3 coffees" looked like a stray background behind it.
 * The selected plan keeps the blue — it is the thing being emphasised. The two
 * supporting blocks drop to the neutral card surface.
 * ---------------------------------------------------------------- */
.also-buy__freq{background:var(--surface-card);border:1px solid var(--border)}
.also-addbags{background:var(--surface-card);border-color:var(--border)}

/* "Change or pause it whenever you like." sat on its own line because of
   flex-basis:100%, and its descenders were clipped by the tight block padding. */
.also-buy__freq{padding:.7rem .9rem;align-items:center}
.also-buy__freqnote{flex-basis:auto;margin-left:auto;line-height:1.45;padding-block:.1rem}
@media (max-width:520px){
  .also-buy__freqnote{flex-basis:100%;margin-left:0}
}

/* The one real drop shadow in this column was heavy for a light UI. */
.also-howopt.is-on .also-howopt__in{box-shadow:0 6px 18px -12px rgba(20,10,5,.30)}

/* Mobile: the selects I added were a 32px tap target, and the delivery select
   35px. Both are primary controls in the buy box. */
@media (max-width:899px){
  .also-addbags__sel{min-height:44px}
  .also-buy__freq select{min-height:44px}
  .also-cc__cuplab{font-size:.7rem}
  .also-howopt__fromlab{font-size:.72rem}
}

/* ------------------------------------------------------------------ *
 * Subscription draft: return bar + the enriched "add more coffees" cards
 * ------------------------------------------------------------------ */

/* Drawn by draft.js only when a draft exists, so it is never in the cached
   HTML and never shows to someone who is not mid-subscription. */
.also-draftbar{margin:0 0 1.1rem;border:1px solid var(--acc-blue);border-radius:var(--radius-md,14px);background:var(--acc-blue-pale,#eef2f7)}
.also-draftbar__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem .9rem}
.also-draftbar__txt{display:flex;flex-direction:column;line-height:1.3}
.also-draftbar__txt strong{font-size:.92rem}
.also-draftbar__txt span{font-size:.8rem;color:var(--text-muted)}
.also-draftbar__acts{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.also-btn--sm{padding:.42rem .8rem;font-size:.82rem}

/* The card grid. Was name + two dropdowns; the client would not add a
   speciality coffee off that, and he was right. */
.also-addbags__item{display:flex;flex-direction:column;gap:.5rem}
.also-addbags__top{display:flex;align-items:flex-start;gap:.6rem}
.also-addbags__info{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.also-addbags__notes{font-size:.78rem;line-height:1.35;color:var(--text-muted)}
.also-addbags__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;font-size:.76rem}
.also-addbags__meta i{font-style:normal;font-weight:600;color:var(--text-strong)}
.also-addbags__meta b{font-weight:600;color:var(--text-muted)}
.also-addbags__more{align-self:flex-start;font-size:.78rem;font-weight:600;text-decoration:underline;text-underline-offset:2px}

@media (max-width:560px){
  .also-draftbar__in{flex-direction:column;align-items:stretch}
  .also-draftbar__acts{justify-content:stretch}
  .also-draftbar__acts>*{flex:1 1 auto;text-align:center}
}

/* The add-more cards were 104px wide, centred, with the name clamped to two
   lines - sized for a name and two dropdowns. They now carry tasting notes, a
   strength word, a price and a link, which at 104px wrapped to roughly one word
   per line and truncated every name. Widened and left-aligned to match. */
.also-addbags__item{width:200px;align-items:stretch;text-align:left}
.also-addbags__img{flex:0 0 auto;width:44px}
.also-addbags__name{
  text-align:left;min-height:0;
  -webkit-line-clamp:2;   /* keep the 2-line cap, drop the reserved height */
}
.also-addbags__top{align-items:center}
@media (max-width:480px){
  .also-addbags__item{width:174px}
}
/* Names and notes run to different lengths, so the size/qty controls sat at
   different heights across the row. Pushing the link down aligns everything
   below it without reserving fixed height for the text above. */
.also-addbags__more{margin-top:auto}

/* The audience line under each grind option - the client's sublabels
   ("For grinders & bean-to-cup machines" etc.). */
.also-eqopt__note{display:block;font-size:.74rem;line-height:1.3;color:var(--text-muted)}

/* Caffeine pill beside the product name (22 Oct). The bottom margin moves from
   the h1 to the row so the spacing below the title is unchanged. */
.also-pdp__titlerow{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .7rem;margin:0 0 .5rem}
.also-pdp__titlerow .also-pdp__title{margin:0}
.also-pdp__caff{display:inline-flex;align-items:center;font-size:.8rem;font-weight:700;letter-spacing:.02em;line-height:1;padding:.42rem .8rem;border-radius:var(--radius-pill,999px);white-space:nowrap}