/* Also Coffee Co - Build your bundle.
   Loads only on the page-make-your-bundle.php template, after pdp.css so it can
   reuse .also-pillrow, .also-btn and the shared tokens without !important. */

.also-bundlehero .also-crumb{margin-bottom:.9rem}
.also-bundlehero h1{font-family:var(--font-display);font-size:clamp(2rem,1.4rem + 2.6vw,3.3rem);line-height:1.03;margin:.3em 0 .3em;color:var(--acc-ink-deep)}
.also-bundlehero__lead{max-width:56ch;color:var(--text-muted);font-size:var(--fs-body);line-height:1.6;margin:0 0 1.2rem}
.also-bundlehero__pills{margin:0}
.also-household{padding:clamp(1rem,2vw,1.5rem);margin:1.2rem 0 1.5rem;border:1px solid var(--acc-blue);border-radius:var(--radius-xl,18px);background:var(--acc-blue-pale,#e5f0f6)}
.also-household__intro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:start}
.also-household__icon{margin-top:.2rem}
.also-household h2{font-family:var(--font-display);font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2;margin:0 0 .35rem}
.also-household p{font-size:.9rem;line-height:1.55;margin:0;max-width:75ch}
.also-household details{margin:.7rem 0 0}
.also-household summary{display:flex;align-items:center;gap:.5rem;min-height:44px;width:fit-content;max-width:100%;font-size:.82rem;font-weight:700;cursor:pointer;list-style:none}
.also-household summary::-webkit-details-marker{display:none}
.also-household summary svg{width:16px;height:16px;flex:none}
.also-household details[open] summary svg{transform:rotate(180deg)}
.also-household__details{display:grid;gap:.75rem;padding:.5rem 0 0}
.also-bb__sizeprice{display:block;font-size:.8rem;font-weight:700;line-height:1.4}
.also-bb__sizevalue{display:block;font-size:.6875rem;line-height:1.3;color:var(--accent)}
.also-bb__pricebasis{display:block;font-family:var(--font-body);font-size:.68rem;line-height:1.5;font-weight:400;color:var(--text-muted)}
.also-bb__cfg .also-size-guidance{font-size:.74rem;margin:.5rem 0 0}


/* Hero and picker are one continuous cream run, so the default .also-section
   padding stacks into a large gap between them. Compound selectors are required:
   .also-section's padding-block is re-set inside a later @media in homepage.css,
   so a bare .also-bundlehero{padding-block:...} loses on equal specificity. */
.also-section.also-bundlehero{padding-block:clamp(2.2rem,4.5vw,3.4rem) clamp(1.6rem,3vw,2.4rem)}
.also-section.also-bundlebuild{padding-block:clamp(1rem,2vw,1.6rem) clamp(2.6rem,5vw,4rem)}

/* ---- setup: size + grind ---- */
.also-bb__setup{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.1rem,2.4vw,1.8rem);margin-bottom:clamp(1.6rem,3vw,2.4rem)}
@media (min-width:900px){.also-bb__setup{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}}
.also-bb__lab{display:block;font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.also-bb__opts{display:flex;flex-wrap:wrap;gap:.55rem}
.also-bb__opt{display:flex;flex-direction:column;gap:.12rem;text-align:left;cursor:pointer;
  background:var(--surface-card);border:1.5px solid var(--acc-border-strong);border-radius:var(--radius-lg,14px);
  padding:.6rem .9rem;color:var(--acc-ink);font-family:inherit;
  transition:border-color .18s var(--ease-out),background .18s var(--ease-out),transform .18s var(--ease-out)}
.also-bb__opt strong{font-size:.95rem;font-weight:700;line-height:1.2}
.also-bb__opt small{font-size:.76rem;color:var(--text-muted);line-height:1.25}
.also-bb__opt:hover{border-color:var(--accent);transform:translateY(-1px)}
.also-bb__opt.is-on{background:var(--acc-blue-pale,#E5F0F6);border-color:var(--accent)}

/* ---- the picker ---- */
.also-bb__pickhead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.also-bb__pickhead .also-bb__lab{margin-bottom:0}
.also-bb__counter{font-size:.85rem;font-weight:700;color:var(--acc-ink)}

.also-bb__grid{list-style:none;margin:0 0 clamp(6rem,12vw,8rem);padding:0;
  display:grid;gap:clamp(.6rem,1.4vw,1rem);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:620px){.also-bb__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:960px){.also-bb__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

.also-bb__card{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:var(--surface-card);border:1.5px solid var(--border);border-radius:var(--radius-xl,18px);
  padding:.9rem .7rem 1rem;cursor:pointer;font-family:inherit;text-align:center;
  transition:border-color .18s var(--ease-out),box-shadow .18s var(--ease-out),transform .18s var(--ease-out)}
.also-bb__card:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.also-bb__item.is-on .also-bb__card{border-color:var(--accent);background:var(--acc-blue-pale,#E5F0F6);box-shadow:var(--shadow-sm)}
.also-bb__item.is-full .also-bb__card{opacity:.42;cursor:not-allowed}
.also-bb__img{width:auto;height:92px;object-fit:contain;display:block}
.also-bb__name{font-weight:700;font-size:.92rem;line-height:1.25;color:var(--acc-ink-deep)}
.also-bb__notes{font-size:.72rem;line-height:1.35;color:var(--text-muted)}
.also-bb__price{font-weight:700;font-size:.88rem;color:var(--acc-ink);margin-top:.15rem}
.also-bb__badge{position:absolute;top:.5rem;left:.5rem;font-size:.62rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:var(--acc-clay,#C08B6A);color:#fff;border-radius:var(--radius-pill);padding:.14rem .45rem}
.also-bb__tick{position:absolute;top:.5rem;right:.5rem;width:1.35rem;height:1.35rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;
  border:1.5px solid var(--acc-border-strong);background:#fff;color:var(--accent)}
.also-bb__item.is-on .also-bb__tick{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- sticky summary ---- */
.also-bb__bar{position:sticky;bottom:0;z-index:60;margin-top:-4rem;
  background:var(--surface-card);border:1px solid var(--border);border-radius:var(--radius-xl,18px);
  box-shadow:0 -10px 40px -20px rgba(20,10,5,.5);padding:clamp(.8rem,2vw,1.15rem)}
.also-bb__barin{display:flex;align-items:center;gap:clamp(.7rem,2vw,1.3rem);flex-wrap:wrap}
.also-bb__chosen{display:flex;gap:.4rem;flex-wrap:wrap;flex:1 1 16rem;min-width:0;align-items:flex-start;align-content:flex-start}
.also-bb__chip{display:inline-flex;align-items:center;gap:.3rem;background:var(--acc-base);border-radius:var(--radius-pill);
  padding:.28rem .5rem .28rem .7rem;font-size:.82rem;font-weight:600;color:var(--acc-ink)}
.also-bb__chipx{background:none;border:0;padding:0 .15rem;font-size:1rem;line-height:1;cursor:pointer;color:var(--text-muted)}
.also-bb__chipx:hover{color:var(--accent)}
.also-bb__chipnone{font-size:.85rem;color:var(--text-muted)}
.also-bb__sums{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.also-bb__total{font-family:var(--font-display);font-size:clamp(1.25rem,1rem + 1vw,1.7rem);color:var(--acc-ink-deep)}
.also-bb__was{color:var(--text-muted);font-size:.9rem}
.also-bb__was[hidden],.also-bb__save[hidden],.also-bb__perbag[hidden]{display:none}
.also-bb__perbag{flex-basis:100%;font-size:.88rem;font-weight:700;color:var(--text-strong)}
.also-bb__save{background:var(--acc-blue-pale,#E5F0F6);color:var(--acc-ink);border-radius:var(--radius-pill);
  padding:.16rem .55rem;font-size:.78rem;font-weight:700}
.also-bb__add{flex:0 0 auto}
.also-bb__add:disabled{opacity:.5;cursor:not-allowed}
.also-bb__fine{margin:.7rem 0 0;font-size:.82rem;color:var(--text-muted)}
.also-bb__fine a{color:var(--accent);text-decoration:underline;text-underline-offset:.15em}

@media (max-width:560px){
  .also-bb__barin{flex-direction:column;align-items:stretch}
  .also-bb__chosen{flex-basis:auto}
  .also-bb__add{width:100%;justify-content:center}
  .also-bb__sums{justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  .also-bb__card,.also-bb__opt{transition:none}
  .also-bb__card:hover:not(:disabled),.also-bb__opt:hover{transform:none}
}

/* Size is fixed at 250g, so the setup row is a single column now. */
.also-bb__setup--onecol{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.also-bb__setup--onecol{grid-template-columns:minmax(0,1fr)}}

/* The price is the thing people compare, so it leads the card rather than
   trailing the tasting notes. */
.also-bb__price{order:-1;font-family:var(--font-display);font-size:1.15rem;font-weight:400;
  color:var(--acc-ink-deep);margin:.1rem 0 .05rem}
.also-bb__card{gap:.22rem}
.also-bb__name{order:-2}

/* Frequency step, subscription mode only. */
.also-bb__field--freq{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.also-bb__field--freq .also-bb__opt strong{font-size:.9rem}

/* Emblem watermark, same treatment as the homepage bands. overflow-x:clip (not
   hidden) is what lets it bleed off the side without a horizontal scrollbar while
   leaving the top uncropped - the client's hard rule is never to crop the logo
   against a section edge. */
.also-bundlehero{position:relative;overflow-x:clip}
.also-bundlehero .also-emblem-bg--tl{
  position:absolute;top:6%;left:-5%;width:clamp(150px,16vw,300px);height:auto;
  transform:rotate(-8deg);opacity:.5;pointer-events:none;z-index:0;
}
.also-bundlehero > .also-container{position:relative;z-index:1}

/* ---------------------------------------------------------------- *
 * Per-tile size + quantity — subscriptions only
 * ------------------------------------------------------------------
 * Sits OUTSIDE .also-bb__card on purpose. The card is a <button>, and a
 * <select> or nested <button> inside one is invalid HTML the parser will
 * hoist straight back out, taking the controls with it.
 * ---------------------------------------------------------------- */
.also-bb__cfg{
  display:flex;gap:.5rem;align-items:flex-end;justify-content:space-between;
  margin:.5rem 0 0;padding:.55rem .6rem;
  background:var(--surface-card);border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.also-bb__cfgfield{display:flex;flex-direction:column;gap:.22rem;min-width:0}
.also-bb__cfglab{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);
}
.also-bb__size{
  font:inherit;font-size:.86rem;font-weight:700;color:var(--text-strong);
  padding:.32rem 1.4rem .32rem .5rem;min-height:36px;
  background:var(--surface-page);border:1px solid var(--border);
  border-radius:var(--radius-sm);cursor:pointer;
  /* keep the native picker on touch — a custom menu here buys nothing */
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%,calc(100% - 9px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.also-bb__size:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.also-bb__qty{display:inline-flex;align-items:center;gap:.1rem}
.also-bb__qtybtn{
  width:32px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;line-height:1;color:var(--text-strong);
  background:var(--surface-page);border:1px solid var(--border);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.also-bb__qtybtn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.also-bb__qtybtn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.also-bb__qtybtn:hover:not(:disabled){background:var(--acc-blue-pale);border-color:var(--accent)}
.also-bb__qtybtn:disabled{opacity:.38;cursor:not-allowed}
.also-bb__qtybtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;z-index:1}
.also-bb__qtyn{
  min-width:30px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.92rem;color:var(--text-strong);
  border-block:1px solid var(--border);background:var(--surface-card);
}

.also-bb__pickhint{
  display:flex;gap:.5rem;align-items:flex-start;
  margin:-.2rem 0 1.1rem;color:var(--text-muted);font-size:var(--fs-small);
}
.also-bb__pickhint .also-ic{flex:none;color:var(--accent);margin-top:.15rem}

/* Narrow phones: stack rather than squeeze the select to nothing */
@media (max-width:400px){
  .also-bb__cfg{flex-direction:column;align-items:stretch;gap:.45rem}
  .also-bb__qty{justify-content:space-between}
  .also-bb__qtyn{flex:1}
}

/* Hero was left-aligned in a narrow measure, leaving the right-hand half of a
   1440px screen empty. Centred instead: the copy keeps a readable line length
   (full-width body text at this size is unreadable) but the band now looks
   deliberate rather than unfinished. */
.also-bundlehero .also-container{text-align:center}
.also-bundlehero__lead{max-width:62ch;margin-inline:auto}
.also-bundlehero .also-crumb,
.also-bundlehero .also-eyebrow{justify-content:center}
.also-bundlehero__pills{justify-content:center}
@media (max-width:699px){
  .also-bundlehero .also-container{text-align:left}
  .also-bundlehero .also-crumb,
  .also-bundlehero .also-eyebrow,
  .also-bundlehero__pills{justify-content:flex-start}
  .also-bundlehero__lead{margin-inline:0}
}

/* The badge was absolutely positioned at the top-left of the card, straight over
   the product name — "ROTATING" across "Seasonal Single Origin", "HALF CAFF"
   across "50/50 Half Caf". The name is the first thing in the card, so the badge
   needs to sit clear of it rather than on top. */
.also-bb__item{position:relative}
.also-bb__badge{
  position:static;align-self:center;order:-3;
  margin:0 0 .3rem;padding:.12rem .5rem;
  border-radius:var(--radius-pill);white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}

/* Route out of the page once the bags are in. Hidden until the add succeeds. */
.also-bb__go[hidden],.also-bb__basket[hidden]{display:none}
.also-bb__basket{
  align-self:center;font-size:var(--fs-small);font-weight:600;
  color:var(--text-muted);text-decoration:underline;text-underline-offset:3px;
}
.also-bb__basket:hover{color:var(--accent)}

/* Frequency buttons were 38px. They are the one control on this page that a
   phone user taps more than once. */
@media (max-width:899px){
  .also-bb__opt{min-height:44px}
  .also-bb__notes{font-size:.75rem}
  .also-bb__badge{font-size:.7rem}
}

/* Link out to the full product page. Sits outside the card button - an <a>
   inside a <button> is invalid and clicks behave inconsistently. */
.also-bb__more{display:inline-block;margin:.35rem 0 0;font-size:.78rem;font-weight:600;text-decoration:underline;text-underline-offset:2px;color:var(--text-muted)}
.also-bb__more:hover,.also-bb__more:focus-visible{color:var(--accent)}

/* Delivery line in the summary. Visible on purpose: the discount can drop a
   basket back under the free-delivery threshold. */
.also-bb__ship{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;margin:.35rem 0 0;font-size:.8rem;color:var(--text-muted)}
.also-bb__ship b{font-weight:600;color:var(--text-strong)}
.also-bb__ship .is-free{font-weight:700;color:var(--acc-green,#2d5a3d)}
.also-bb__ship em{flex-basis:100%;font-style:normal;font-size:.75rem;opacity:.85}

/* Size as a segmented control, not a dropdown. Three options - showing all
   three costs one row and removes a tap, and leaves room for the cup count
   the client asked to keep visible. */
.also-bb__cfgfield--size{display:flex;flex-direction:column;gap:.3rem;flex:1 1 100%}
.also-bb__sizes{display:flex;gap:.3rem}
.also-bb__sizebtn{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:.05rem;padding:.4rem .3rem;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface,#fff);cursor:pointer;line-height:1.2;transition:border-color .15s,background .15s}
/* Explicit colour: without it the size and price inherit the <button> default,
   which iPhone renders in system blue (desktop Chrome renders black, so headless
   tests never saw it). These were the only two button texts on the site doing it. */
.also-bb__sizebtn{color:var(--text-strong)}
.also-bb__sizebtn b{font-size:.82rem;font-weight:700}
.also-bb__sizebtn i{font-style:normal;font-size:.68rem;color:var(--text-muted)}
.also-bb__sizebtn:hover{border-color:var(--accent)}
.also-bb__sizebtn.is-on{border-color:var(--accent);background:var(--acc-blue-pale,#eef2f7);box-shadow:inset 0 0 0 1px var(--accent)}
.also-bb__sizebtn.is-on i{color:var(--text-strong)}
@media (max-width:619px){
  .also-bb__sizes{display:grid;grid-template-columns:minmax(0,1fr)}
  .also-bb__sizes .also-bb__sizebtn{display:grid;grid-template-columns:minmax(0,1fr) auto;text-align:left;gap:.15rem .25rem;padding:.5rem .35rem}
  .also-bb__sizebtn i{display:block;grid-column:1;grid-row:2}
  .also-bb__sizeprice{grid-column:2;grid-row:1}
  .also-bb__sizevalue{grid-column:2;grid-row:2;font-size:.6875rem}
}

/* The config panel is a flex row with no wrap, so a full-width Size field
   pushed Bags out of the box and the panel bled into the next grid column.
   In a card this narrow both fields want their own row anyway. */
.also-bb__cfg{flex-wrap:wrap}
.also-bb__cfg .also-bb__cfgfield{flex:1 1 100%}

/* The hero calculator card. .also-cc was styled for the dark --acc-primary band
   it used to sit in below the picker, so the card carries that band with it
   rather than restyling the calculator for a blue background. */
.also-bundlehero__calc{margin-top:1.8rem;background:var(--acc-primary);border-radius:var(--radius-lg);padding:clamp(1.1rem,3vw,1.9rem);box-shadow:0 14px 34px -18px rgba(20,10,5,.45)}