/* Product — breadcrumbs, gallery 61.8 | buy box 38.2 (held in view while a long gallery scrolls, on screens tall
   enough to show the whole box); below, ruled rows with the title on the left (38.2) and the content on the right
   (61.8): Details, Specifications; then continue shopping. Template: tools/product-page.js.
   How to order is stated once, in the buy box: the footer's line repeats it, so it is hidden here. */

/* ---------- breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: var(--s-2) 0; font: 500 var(--t-label)/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.crumbs li { display: flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: "/"; margin: 0 var(--s-2); color: var(--rule-strong); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; } /* "Shop" is 43px wide on its own */
.crumbs a:hover { color: var(--cream); }
.crumbs [aria-current] { color: var(--cream); }

/* ---------- gallery | buy box ---------- */
.product { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--s-5) var(--split-gap); align-items: start; padding-top: var(--s-2); }
.product-main { aspect-ratio: 1 / 1; }
.product-main img { position: absolute; inset: 0; }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-1); margin-top: var(--s-1); }
.thumb { aspect-ratio: 1 / 1; padding: 0; border: 0; cursor: pointer; }
.thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s ease; }
.thumb:hover::after { box-shadow: inset 0 0 0 2px var(--text-2); }
.thumb[aria-current="true"]::after { box-shadow: inset 0 0 0 2px var(--orange); }
.thumb img { position: absolute; inset: 0; }

/* the buy column runs the full height of the row, so the box has room to stay in view; only where the
   whole box fits on screen (the tallest, rosemary-spearmint, is 901px + 34px top), so nothing in it is
   ever held below the fold */
.buy { align-self: stretch; }
@media (min-width: 1000px) and (min-height: 940px) { .buy-inner { position: sticky; top: var(--s-4); } }
.buy h1 { font-size: clamp(var(--t-3), 1.7rem + 1.1vw, var(--t-4)); line-height: 1.1; margin: -.12em 0 var(--s-2); }
.price { font: 400 var(--t-2)/1 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums lining-nums; color: var(--cream); margin: 0 0 var(--s-3); }
.buy-intro { font-size: var(--t-0h); line-height: 1.618; color: var(--text); margin: 0 0 var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.field { display: block; margin-bottom: var(--s-3); }
.field .label { display: block; margin-bottom: var(--s-1); }
.field select {
  width: 100%; min-height: 55px; padding: 0 var(--s-5) 0 var(--s-3);
  appearance: none; -webkit-appearance: none; border: 1px solid var(--rule-strong); border-radius: 0;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1l5.5 5.5L12 1' fill='none' stroke='%23e9e3d5' stroke-width='1.25'/%3E%3C/svg%3E") no-repeat right var(--s-3) center;
  font: 400 var(--t-0)/1.2 var(--sans); color: var(--cream); cursor: pointer;
  transition: border-color .2s ease;
}
.field select:hover { border-color: var(--text); }
.field option { background: var(--bg); color: var(--cream); }
.order-note { font: 400 .9375rem/1.618 var(--sans); color: var(--text-2); margin: var(--s-2) 0 var(--s-4); }
.order-note a { color: var(--cream); text-decoration-color: var(--orange); }
/* sold out: the restock request is the page's action, a full-width button under the disabled state */
.restock { margin: var(--s-3) 0 var(--s-4); }
.restock .order-note { margin: 0 0 var(--s-1); }
.buy .link-arrow { margin-top: var(--s-1); }
.site-footer .footer-base p:last-child { display: none; } /* the buy box says it */

/* ---------- ruled rows: title 38.2 | content 61.8, a rule across the top of each ---------- */
.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; }
.prod-row { scroll-margin-top: var(--s-4); }
.prod-row .quote { margin-bottom: var(--s-4); }
.prod-row .quote figcaption { padding-left: 34px; text-indent: -34px; } /* a credit that wraps hangs under the name, not the dash */
.prod-row .prose p { font-size: var(--t-1); max-width: 30em; }
.prod-row .prose p:last-child { margin-bottom: 0; }
.prod-specs .group-title { font-size: var(--t-1); margin-bottom: var(--s-2); }
.prod-specs .specs, .prod-specs .ticks { margin-bottom: 0; border-bottom: 0; }

/* ---------- continue shopping: the page's last block, so it carries the closing's bottom space ---------- */
.more { padding-bottom: var(--s-6); }

/* ---------- tablet ---------- */
@media (max-width: 999px) {
  .product { grid-template-columns: minmax(0, 1fr); }
  .ix { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mobile ---------- */
@media (max-width: 759px) {
  .crumbs li:last-child { display: none; }
  .ix { row-gap: var(--s-2); }
  .prod-row .quote blockquote p { font-size: var(--t-1); }
  .prod-row .prose p { font-size: var(--t-0h); }
  .more { padding-bottom: var(--s-5); }
  /* continue shopping: two square tiles, one row (the shared odd-count rule would widen the first) */
  .grid[data-odd] > .card:first-child { grid-column: auto; }
  .grid[data-odd] > .card:first-child .card-media { aspect-ratio: 1 / 1; }
  .grid[data-odd] > .card:first-child .card-media img { object-fit: cover; }
  .more .card:nth-child(n+3) { display: none; }
}