/* Subscribe — title | lede (a tighter page head, so the bar chips start on the first phone screen); the form: the
   controls 61.8 (01 bars a month, with the recommendation; 02 delivery every 1, 3 or 6 months, each card with its bars
   and prices; 03 scents: a mix of all of them, or one month picked in rows like Build your box) | the summary 38.2
   (price per delivery, price a bar, the saving, the receipt, Subscribe by email), held in view on desktop and stuck to
   the bottom of the screen under 1000px, inside the form only; then ruled rows (How it works, Prices) and the closing.
   Template: tools/subscribe-page.js; behaviour: /assets/js/subscribe.js.
   The note under Subscribe by email says how to order, so the footer's how-to-order line is hidden on this page.
   Orange only on the h1/h2, the button, the shared .num, link underlines, focus rings and the stepper/tool hover copied
   from the box: never on chips, cards, selected states, prices, savings, counts or messages. Plain shapes only. */

/* ---------- page ---------- */
.page-head { padding-block: var(--s-5) var(--s-4); }
.sub { margin-top: var(--s-4); }
.sub-row { margin-top: var(--s-6); scroll-margin-top: var(--s-4); }
.closing { margin-top: var(--s-6); }
.site-footer .footer-base p:last-child { display: none; } /* the note under Subscribe by email says how to order */

/* ruled rows: title 38.2 | content 61.8, a rule across the top of each (as on the product pages) */
.ix {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--s-3) var(--split-gap);
  align-items: start; border-top: 1px solid var(--rule-strong); padding-top: var(--s-3);
}
.ix-head { min-width: 0; }
.ix-head h2 { margin: 0; }
.ix-body { min-width: 0; }
.ix-body > :last-child { margin-bottom: 0; }

/* ---------- the form: controls 61.8 | summary 38.2 (the product page's gallery | buy box split) ---------- */
@media (min-width: 1000px) {
  .sub-form { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); column-gap: var(--split-gap); align-items: start; }
  /* the page head's rule opens both columns: no second rule over the summary, and its label starts on 01's line
     (without JS the summary follows the note in one column and keeps its own rule) */
  .js .sub-sum { border-top: 0; padding-top: 0; }
}
@media (min-width: 1000px) and (min-height: 760px) { .sub-aside { position: sticky; top: var(--s-4); } }

/* ---------- controls: three groups, each a fieldset of radios; the rule sits on the wrapper, never the fieldset ---------- */
.sub-group + .sub-group { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.sub-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sub-legend { display: flex; align-items: baseline; gap: var(--s-2); padding: 0; margin: 0 0 var(--s-1); font: 400 var(--t-2)/1.27 var(--serif); color: var(--cream); }
.sub-hint { margin: 0 0 var(--s-2); font: 400 .9375rem/1.618 var(--sans); color: var(--text-2); max-width: 34em; }
.sub-rec { font: 400 var(--t-1)/1.5 var(--serif); color: var(--cream); } /* the recommendation: the page's key sentence */

.sub-opts { display: grid; gap: var(--s-1); }
.sub-per { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sub-opts.sub-every { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sub-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* narrow desktops: the 61.8 column is under 616px, so twelve chips in a row would be under 44px wide; six a row */
@media (min-width: 1000px) and (max-width: 1199px) { .sub-per { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* each option is a native radio laid over its whole box (the target), drawn by the box */
.sub-opt { position: relative; display: block; }
.sub-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sub-opt-box {
  display: flex; align-items: center; justify-content: center; min-height: 55px;
  border: 1px solid var(--rule-strong); color: var(--cream);
  font: 500 var(--t-0)/1.2 var(--sans); font-variant-numeric: tabular-nums lining-nums;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.sub-card .sub-opt-box { flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 100%; padding: var(--s-2); text-align: left; }
.sub-opt:hover .sub-opt-box { border-color: var(--text); }
/* chosen: the site's own "selected" (the secondary button's hover), a cream fill with charcoal text, not a colour alone */
.sub-opt input:checked + .sub-opt-box { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.sub-opt input:checked + .sub-opt-box * { color: var(--ink); }
.sub-opt input:focus-visible + .sub-opt-box { outline: 2px solid var(--orange); outline-offset: 3px; }
.sub-card-title { font: 500 var(--t-0)/1.3 var(--sans); }
.sub-card-bars, .sub-card-line { font: 400 .9375rem/1.4 var(--sans); color: var(--text-2); }
.sub-card-price { margin-top: var(--s-1); font: 400 var(--t-0h)/1.3 var(--sans); font-variant-numeric: tabular-nums lining-nums; }
.sub-card-each { font: 400 var(--t-label)/1.4 var(--sans); color: var(--text-2); }
/* shipping: "Ships free" (6 bars or more a delivery) in the card's own text colour and weight, "+ shipping" quieter */
.sub-card-ship { margin-top: 2px; font: 400 var(--t-label)/1.4 var(--sans); color: var(--text-2); }
.sub-card-ship.is-free { color: var(--cream); font-weight: 500; }

/* a mix of all of them: the label photos (sprig crops), a line, the names */
.sub-all { margin-top: var(--s-3); }
.sub-all-thumbs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--s-2); }
.sub-all-thumbs .mix-thumb { width: 34px; }
.sub-all-text { margin: 0 0 var(--s-1); font-size: var(--t-0h); line-height: 1.5; color: var(--text); max-width: 34em; }
.sub-all-names { margin: 0; font: 400 .9375rem/1.618 var(--sans); color: var(--text-2); }

/* choose my scents: one month's bars, in Build your box's rows (the rules below are product.css's, unchanged) */
.sub-pick { margin-top: var(--s-3); }
.sub-pick-lead { margin: 0; font: 400 .9375rem/1.618 var(--sans); color: var(--text); }
.sub-pick-list { margin: var(--s-1) 0 0; font: 400 .9375rem/1.618 var(--sans); color: var(--text); }
.mix-rows { margin-top: var(--s-2); border-bottom: 1px solid var(--rule); }
.mix-row { display: grid; grid-template-columns: 55px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding-block: var(--s-1); border-top: 1px solid var(--rule); }
.mix-thumb { width: 55px; aspect-ratio: 1 / 1; transition: opacity .2s ease; }
/* the sprig crop: the label photos are one parcel and one bar; only the sprig at the lower right tells them apart
   (x 55-85%, y 62-92% of the photo). A photo with no sprig (Unscented) shows the end of the bar instead. */
.mix-thumb img { position: absolute; inset: 0; transform: scale(3.333); transform-origin: 78.6% 88.6%; }
.mix-thumb img.crop-bar { transform-origin: 71.4% 71.4%; }
.mix-text { display: flex; flex-direction: column; min-width: 0; }
.mix-name { font: 400 var(--t-0)/1.38 var(--sans); color: var(--cream); text-wrap: balance; overflow-wrap: anywhere; }
.mix-note { font: 400 var(--t-label)/1.38 var(--sans); color: var(--text-2); text-wrap: balance; }
.mix-row.is-zero .mix-thumb { opacity: .382; } /* only once the month is full: the bars in it stand out */
.mix-row.is-zero .mix-count { color: var(--text-2); }
.mix-step { display: flex; align-items: center; }
.mix-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--rule-strong); border-radius: 0; background: transparent; color: var(--cream);
  font: 400 1.25rem/1 var(--sans); cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.mix-btn:hover, .mix-btn:focus-visible { border-color: var(--orange); color: var(--orange); }
.mix-btn:focus-visible { outline-offset: 2px; }
/* disabled: dimmed by colour, not opacity, so the focus ring on a disabled stepper keeps its full orange */
.mix-btn[aria-disabled="true"] { cursor: not-allowed; border-color: var(--rule); color: var(--rule-strong); }
.mix-count { min-width: 34px; text-align: center; font: 500 var(--t-0)/1 var(--sans); font-variant-numeric: tabular-nums lining-nums; color: var(--cream); }
.mix-tools { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.mix-tool {
  padding: 12px 0; background: none; border: 0; cursor: pointer;
  font: 500 var(--t-label)/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
  text-decoration: underline 1px var(--rule-strong); text-underline-offset: 7px; transition: color .2s ease;
}
.mix-tool:hover, .mix-tool:focus-visible { color: var(--cream); text-decoration-color: var(--orange); }
.mix-tool[aria-disabled="true"], .mix-tool[aria-disabled="true"]:hover { color: var(--rule-strong); text-decoration: none; cursor: not-allowed; }
/* Undo keeps its 45px target, but its padding overhangs the line instead of making the bar taller */
.mix-undo { margin: -12px 0 -12px var(--s-1); }
.mix-undo:focus-visible { outline-offset: -7px; }

/* ---------- the summary (desktop: the 38.2 column, held in view on screens tall enough) ---------- */
.sub-sum { border-top: 1px solid var(--rule-strong); padding-top: var(--s-3); }
.sub-sum-label { margin: 0 0 var(--s-2); }
.sub-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin: 0; }
.sub-total { font: 400 var(--t-4)/1.1 var(--sans); color: var(--cream); font-variant-numeric: tabular-nums lining-nums; }
.sub-when { font: 400 var(--t-0h)/1.4 var(--sans); color: var(--text); }
.sub-detail { display: flex; flex-direction: column; margin: var(--s-1) 0 0; font: 400 .9375rem/1.618 var(--sans); color: var(--text); font-variant-numeric: tabular-nums lining-nums; }
#sub-save { color: var(--cream); }
.sub-receipt { margin: var(--s-3) 0 0; }
.sub-receipt dd { font-variant-numeric: tabular-nums lining-nums; }
.sub-msg { margin: var(--s-2) 0 0; font: 400 .9375rem/1.38 var(--sans); color: var(--cream); }
.sub-msg:empty { display: none; }
#sub-btn { margin-top: var(--s-3); }
.sub-note { margin: var(--s-2) 0 0; font: 400 .9375rem/1.618 var(--sans); color: var(--text-2); }
.sub-copy { margin: 0; font: 400 .9375rem/1.618 var(--sans); color: var(--text-2); }
/* a refused copy: its own line under the button it is about (so the label changing back never rewraps it); empty, it
   takes no room unless subscribe.js keeps it (a copy that then works) */
.sub-copy-why { display: block; color: var(--cream); }

/* ---------- How it works and Prices ---------- */
/* the rules between the steps span the column (as the Prices table does); the measure is on the text */
.sub-how { list-style: none; margin: 0; padding: 0; }
.sub-how li { padding-block: var(--s-2); border-top: 1px solid var(--rule); }
.sub-how li:first-child { border-top: 0; padding-top: 0; }
.sub-how p { margin: 0; max-width: 34em; font-size: var(--t-1); }
.sub-how-media { width: 100%; max-width: 233px; aspect-ratio: 1 / 1; margin-top: var(--s-4); }
.sub-how-media img { position: absolute; inset: 0; }

.sub-prices {
  width: 100%; margin-top: var(--s-3); border-collapse: collapse; border-bottom: 1px solid var(--rule);
  font: 400 var(--t-0)/1.5 var(--sans); font-variant-numeric: tabular-nums lining-nums;
}
.sub-prices th, .sub-prices td { padding: var(--s-2); text-align: left; vertical-align: baseline; border-top: 1px solid var(--rule); font-weight: 400; color: var(--text); }
.sub-prices thead th { vertical-align: bottom; border-top: 0; font: 500 var(--t-label)/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.sub-prices td:last-child { color: var(--cream); font-weight: 500; }
/* the row of this delivery's size: a panel and the weight (not colour alone) */
.sub-prices tr.is-on > * { background: var(--panel); }
.sub-prices tr.is-on th { color: var(--cream); font-weight: 500; }
.sub-terms, .sub-example { margin-top: var(--s-3); max-width: 34em; }

/* ---------- without JS: the note, the starting plan and its working button; no controls that cannot change the email ---------- */
.js .sub-nojs { display: none; }
.sub-nojs { max-width: 34em; margin: 0 0 var(--s-4); font-size: var(--t-0h); }
html:not(.js) .sub-controls { display: none; }
html:not(.js) .sub-form { display: block; max-width: 34rem; }

/* ---------- tablet and phones: one column; the summary is a bar stuck to the bottom of the screen ----------
   It sticks only inside the form (the aside is display: contents, so the bar's containing block is the form), so it
   is on screen while any control is and never covers How it works, Prices or the footer. Price, the delivery's bars
   and price a bar with the saving, the button; the receipt is left out. The note and copy line follow it. */
@media (max-width: 999px) {
  .sub-form { display: block; }
  .sub-aside { display: contents; }
  .sub-sum { position: sticky; bottom: 0; z-index: 2; margin-top: var(--s-5); padding: var(--s-2) 0; background: var(--bg); border-top: 1px solid var(--rule-strong); }
  .sub-sum-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* still a heading */
  .sub-receipt { display: none; }
  .sub-total { font-size: var(--t-2); }
  .sub-detail { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s-2); margin-top: 2px; }
  #sub-ship { flex-basis: 100%; } /* its own line, so the bar keeps one height whichever text it holds */
  .sub-msg { margin-top: var(--s-1); }
  #sub-btn { margin-top: var(--s-1); }
  /* a control reached with Tab never stops under the bar: --sub-bar is the bar's height, kept by subscribe.js */
  .sub-controls input, .sub-controls button { scroll-margin-bottom: calc(var(--sub-bar, 144px) + var(--s-1)); }
  .ix { grid-template-columns: minmax(0, 1fr); }
  .sub-how-media { display: none; } /* lazy, so phones never fetch it */
  html:not(.js) .sub-sum { position: static; }
  html:not(.js) .sub-receipt { display: block; }
}
/* tablet: price and saving on the left, the button beside them */
@media (min-width: 560px) and (max-width: 999px) {
  .sub-sum { display: grid; grid-template-columns: minmax(0, 1fr) minmax(233px, auto); column-gap: var(--s-4); align-items: center; }
  .sub-sum > * { grid-column: 1; }
  #sub-btn { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .sub-sum > .sub-msg { grid-column: 1 / -1; }
  .sub-detail { justify-content: flex-start; column-gap: var(--s-3); } /* the saving stays beside the bars line */
}
@media (min-width: 760px) { .sub-all-thumbs .mix-thumb { width: 55px; } }

/* ---------- phones ---------- */
@media (max-width: 759px) {
  .ix { row-gap: var(--s-2); }
  .sub-legend { font-size: var(--t-1); }
  .sub-rec { font-size: var(--t-0h); }
  .sub-per { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sub-per .sub-opt-box { min-height: 44px; }
  .sub-how p { font-size: var(--t-0h); }
  .sub-prices th, .sub-prices td { padding-inline: var(--s-1); }
  .sub-prices thead th { letter-spacing: .06em; text-wrap: balance; } /* the column labels closer, on two even lines at most */
}
@media (pointer: coarse) {
  .mix-btn { width: 44px; height: 44px; }
  .mix-count { min-width: 30px; }
}
/* the narrowest phones: cards a little tighter, so "6 months" and the largest price keep their lines; the bar's
   detail on one line for most plans; the steppers' count a little narrower */
@media (max-width: 379px) {
  .sub-card .sub-opt-box { padding: var(--s-1); }
  .sub-card-price { font-size: var(--t-0); }
  .sub-detail { font-size: .875rem; }
  .mix-row { column-gap: var(--s-1); }
  .mix-count { min-width: 26px; }
}
/* 320px: four chips a row, so each stays at least 44px wide; the cards' sides a little tighter still, so "$15.30 a bar"
   keeps one line (it needs 72px; 8px sides leave 69px at 320) */
@media (max-width: 359px) {
  .sub-per { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sub-card .sub-opt-box { padding-inline: 5px; }
}

@media (forced-colors: active) {
  .sub-opt input:checked + .sub-opt-box, .sub-opt input:checked + .sub-opt-box * { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .mix-btn[aria-disabled="true"], .mix-tool[aria-disabled="true"], #sub-btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  .sub-prices tr.is-on th { text-decoration: underline; }
}