/* ============================================================
   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-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-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;
  color:var(--acc-blue,#93BBCF);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;
  background:var(--acc-blue,#93BBCF);color:var(--acc-primary,#714230);
}
.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);
}

.also-cc__act{grid-column:1 / -1;text-align:center;margin-top:.4rem}
.also-cc__fine{font-size:.78rem;color:rgba(253,244,230,.55);margin:.8rem 0 0}

@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}
.also-pdpdetail__specs{
  margin:0;background:var(--surface-card);border:1px solid var(--border);
  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}
.also-pdprev__stars{color:#9A5E1F;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}
.also-pdpdetail__specs>div:nth-child(odd){background:rgba(250,233,205,.42);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 *{opacity:1!important;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}}