/*
 * Breadwinner v3 prototype, /products ("Order a loaf"): page-only styles, loaded after v3.css
 * on products.html only. Every colour, size and space comes from the v3.css tokens.
 *
 * The page is a ledger with two entries. The header is a dated ledger page: "Order a loaf."
 * on the left and, from 1200px, the next delivery in the right column like the date on a
 * letterhead. Each loaf is a ruled entry (the pack standing on the page, or its drawing on a
 * print, then the name, the price and the one Haldi button) followed by its own label block.
 * From 1200px the page keeps one seven-and-five grid all the way down: the delivery date, each
 * entry's decision column (price, fee, quantity, the Haldi button), the photographed label,
 * the listing details and the order desk's price slip all start on the same line. A label
 * block between the two entries keeps their two Haldi buttons on different screens.
 *
 * Motion: the everyday layer only (button press, link swipe, notes writing once).
 */

/* The current page keeps a still band on the nav's "Order a loaf" link, like a current nav link. */
.nav__order[aria-current="page"] { background-size: 100% 55%; }

/* ---- Header: a dated ledger page ---- */
.products-head { padding-bottom: var(--s-2xl); }        /* the ledger starts 48px under it */
.products-head__lede { margin-top: var(--s-lg); }
.products-head__when { margin-top: var(--s-lg); }
.products-head__when > * + * { margin-top: var(--s-2xs); }
.products-head__date {
  max-width: none;
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums lining-nums;
}
/* From 1200px: the title and the date share one line, like a letterhead (the date block's last
   line sits on the h1's baseline); the one-line index of the loaves runs under both. */
@media (min-width: 1200px) {
  .products-head__grid-unused {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--gutter);
    align-items: last baseline;
  }
  .products-head__grid > h1 { grid-column: 1; grid-row: 1; }
  .products-head__grid > .products-head__when { grid-column: 2; grid-row: 1; margin-top: 0; }
  .products-head__grid > .products-head__lede { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- Loaf entries ---- */
.loaf--first { padding-bottom: calc(var(--section) / 2); }

/* A ledger entry, ruled above and below. Phones: the pack (or its drawing) beside the name,
   price and facts; the fee and the buy block run the full width under it. */
.loaf .product-row {
  --pic-w: 4.5rem;
  grid-template-columns: var(--pic-w) minmax(0, 1fr) auto;
  grid-template-areas:
    "pic name price"
    "pic facts facts"
    "fee fee fee"
    "buy buy buy";
  column-gap: var(--s-md);
  padding-top: var(--s-md);
  padding-bottom: var(--s-lg);
  border-bottom: var(--line-w) solid var(--rule);
}
.loaf .product-row__name { text-wrap: wrap; }
/* Price, fee and the buy block share one wrapper (so they read after the facts); below 1200px
   it steps out of the way and its children sit in the shared row grid. */
.product-row__decide { display: contents; }
/* The figure of a ledger entry is set as large as its name, in tabular Price figures. */
.loaf .product-row__price { font-size: var(--t-title); line-height: 1.25; }
.loaf .product-row__pic { width: var(--pic-w); }
.loaf .product-row__facts { margin-top: var(--s-xs); }
.loaf .product-row__fee { margin-top: var(--s-sm); }
.loaf .product-row__buy { margin-top: var(--s-md); }

/* The name in two tiers: the pack's name in Title, the kind of loaf under it in Body. */
.product-row__kind {
  display: block;
  margin-top: var(--s-2xs);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.3;
}

/* The Daily Bread pack, cut out and standing on the page: a thing on a table, so it may
   lean and cast the held-object shadow. No frame, no caption (the alt text describes it). */
.product-row__object { margin: 0; }
.product-row__object img {
  width: 100%;
  height: auto;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 50% 100%;
  filter: var(--shadow-held);
}

/* A drawing standing in for a photograph: the whole drawing on a 4:5 print. */
.loaf .product-row__pic[data-placeholder="photo"] .print__frame > img { object-fit: contain; }
.loaf .product-row__pic .print__caption { margin-top: var(--s-sm); text-wrap: balance; }
/* Phones: the print is too narrow for its caption, so the facts line says it is a drawing. */
.product-row__drawn { display: block; margin-top: var(--s-2xs); color: var(--pencil-text); }

/* A handwritten measurement beside the pack (from 1200px, where the entry has a margin for it). */
.product-row__note { display: none; }

@media (min-width: 600px) {
  .loaf .product-row {
    --pic-w: 7rem;
    grid-template-areas:
      "pic name price"
      "pic facts facts"
      "pic fee fee"
      "pic buy buy";
    column-gap: var(--s-lg);
    padding-block: var(--s-lg);
  }
  .loaf .product-row__fee { margin-top: var(--s-xs); }
  .loaf .product-row__buy { margin-top: var(--s-lg); }
}

@media (min-width: 900px) and (max-width: 1199.98px) {
  .loaf .product-row { --pic-w: 9rem; }
}

/* From 1200px: the loaf on the left (the pack, then its name, facts and a handwritten
   measurement pointing at it) and the decision on the right (price, the fee, quantity and the
   one Haldi button, then how it is paid). The right track is exactly the five-twelfths column
   of every seven-and-five grid on the page (425px at 1200, 510px at 1440). */
@media (min-width: 1200px) {
  .loaf .product-row {
    --pic-w: 12rem;
    grid-template-columns:
      var(--pic-w) var(--s-3xl) minmax(0, 1fr) var(--gutter)
      calc((100% - var(--gutter)) * 5 / 12);
    grid-template-areas:
      "pic . name  . decide"
      "pic . facts . decide"
      "pic . note  . decide";
    grid-template-rows: auto auto 1fr;
    column-gap: 0;
    padding-block: var(--s-xl);
  }
  .product-row__decide { display: block; grid-area: decide; }
  .loaf .product-row__price { justify-self: start; text-align: left; }
  .loaf .product-row__fee { justify-self: start; text-align: left; margin-top: var(--s-xs); max-width: 62ch; }
  .loaf .product-row__facts { margin-top: var(--s-sm); }
  .loaf .product-row__buy { margin-top: var(--s-lg); }
  /* The Haldi button fills the decision column (at least 17rem beside the 8.5rem stepper), so its
     width follows the column and never its label. */
  .loaf .product-row__add { flex: 1 1 14rem; min-width: 14rem; }
  .product-row__note {
    display: flex;
    grid-area: note;
    align-self: start;
    margin-top: var(--s-2xl);
    margin-left: var(--s-xs);
  }
}

/* ---- The label block under each loaf ---- */
.loaf-label { margin-top: var(--s-3xl); }
.loaf-label__title {
  font-size: var(--t-lede);
  font-weight: 350;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.loaf-label__intro { margin-top: var(--space-h); }
.loaf-label__skip { margin-top: var(--s-xs); }
.loaf-label > .label-slip { margin-top: var(--s-xl); }
@media (min-width: 600px) and (max-width: 899.98px) {
  .loaf-label > .label-slip { max-width: 35rem; }   /* a receipt stays till-paper narrow on tablets */
}
.loaf-label__proof,
.loaf-label__side,
.loaf-label__decl,
.loaf-label__licence { margin-top: var(--s-2xl); }
.loaf-label__side > :first-child { margin-top: 0; }

/* Listing details and the licence slip: a caption on top, in Label type, like the head of a
   ledger column. */
.loaf-label__decl caption,
.loaf-label .licence caption {
  caption-side: top;
  padding: 0 0 var(--s-xs);
  text-align: left;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--pencil-text);
}
.loaf-label__decl th { color: var(--ink-text); }
@media (max-width: 599.98px) {
  .loaf-label__decl caption { display: block; }
}
/* From 600px the listing label column takes 9.5rem, not the auto half, so the value column
   ("Keep refrigerated at 0 to 5 °C...") gets the width it needs. */
@media (min-width: 600px) {
  .loaf-label__decl th { width: 9.5rem; }
}

/* Ingredient receipts: the label column takes 62% of the slip, so a name like "Sourdough
   starter (sorghum flour, water)" wraps to two lines, not four. Figures keep the rest. */
.loaf-label .receipt__table th { width: 62%; }
.loaf-label .receipt__table td { width: 38%; }

/* The licence slip here sits in one column at every width: label, name, then the number on its
   own unbroken line (the shared slip only stacks below 1200px). */
.loaf-label .licence,
.loaf-label .licence tbody,
.loaf-label .licence tr,
.loaf-label .licence th,
.loaf-label .licence td { display: block; width: auto; }
.loaf-label .licence caption { display: block; }
.loaf-label .licence tr { padding: var(--row-pad) 0; border-bottom: var(--line-w) solid var(--rule); }
.loaf-label .licence tr:first-child { padding-top: 0; }
.loaf-label .licence tr:last-child { padding-bottom: 0; border-bottom: 0; }
.loaf-label .licence th,
.loaf-label .licence td,
.loaf-label .licence tr:first-child > *,
.loaf-label .licence tr:last-child > * { padding: 0; border: 0; }
.loaf-label .licence td { margin-top: var(--s-2xs); }
.loaf-label .licence__num { text-align: left; }

/* The photographed label panels: two prints laid on the page, the second a little lower and
   turned the other way. Each opens its full photograph. */
.label-prints {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-lg);
  align-items: start;
  max-width: 32rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.label-prints > li:nth-child(2) { margin-top: var(--s-2xl); }
.label-prints .print { --print-edge: 0.25rem; }
.label-prints .print__caption { text-wrap: balance; }
.label-prints__open { display: block; color: inherit; text-decoration: none; }
.label-prints__open:focus-visible { outline-offset: 6px; }

/* From 1200px, on the page's seven-and-five grid: the receipt with its margin notes and the
   line under it on the left; beside it the photographed label (Daily Bread), or the listing
   details and licences (whole wheat, whose pack is not photographed yet). */
@media (min-width: 1200px) {
  .loaf-label {
    --slip-w: 22.5rem;   /* overridden in the centred block below */
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--gutter);
    align-items: start;
    margin-top: var(--s-4xl);
  }
  .loaf-label--photos {
    grid-template-areas:
      "title ."
      "intro ."
      "skip  ."
      "slip  proof"
      "after proof"
      "decl  licence";
  }
  /* A trailing 1fr row takes the extra height of the tall right column, so the line under
     the receipt stays under the receipt. */
  .loaf-label--side {
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas:
      "title ."
      "intro ."
      "slip  side"
      "after side"
      ".     side";
  }
  .loaf-label__side .ledger-table--stack th { width: 9.5rem; }
  .loaf-label__title { grid-area: title; }
  .loaf-label__intro { grid-area: intro; }
  .loaf-label__skip { grid-area: skip; }
  .loaf-label > .label-slip { grid-area: slip; }
  .loaf-label > .label-after { grid-area: after; }
  .loaf-label__proof { grid-area: proof; margin-top: var(--s-xl); }
  .loaf-label__side { grid-area: side; margin-top: var(--s-xl); }
  .loaf-label > .loaf-label__decl { grid-area: decl; }
  .loaf-label > .loaf-label__licence { grid-area: licence; }
  .label-prints { max-width: none; gap: var(--s-xl); }
}

/* ---- Coming soon: from 1200px the Notify buttons start on the same line as every other action
   on the page (the five-twelfths column). ---- */
@media (min-width: 1200px) {
  .soon-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gutter); }
  .soon-row > .btn { justify-self: start; }
}

/* ---- Order desk summary: the price slip, the rule and the steps; no fields ---- */
.order-desk--summary .order-slip__cart { margin-top: var(--s-lg); }

/* ---- Print: the page prints finished; the photographs and the pack lie flat ---- */
@media print {
  .label-prints .print__frame,
  .product-row__object img { transform: none; }
  .product-row__object img { filter: none; }
}

/* ---- The shots (2026-10-09): the pack is the hero of its row, not a thumbnail. ---- */
.loaf .product-row { --pic-w: 8rem; }
@media (min-width: 600px) { .loaf .product-row { --pic-w: 12rem; } }
@media (min-width: 900px) { .loaf .product-row { --pic-w: 15rem; } }
@media (min-width: 1200px) { .loaf .product-row { --pic-w: 18rem; } }
.products-head__lineup { max-width: 44rem; }
.order-desk__print { max-width: 22rem; }

/* ============================================================================================
   v4 centred (2026-10-09): the page takes the reference's shape, like the home. Everything
   stacks on the centre line: a kicker, the title, the lede, the live delivery line and the
   lineup print; each loaf is a chapter (name, the pack standing large, the facts, the price
   and the one Haldi button), then its label slip with the notes beside it, the photographed
   panels, the listing details and the licences, each a centred column. Handwritten marks and
   the floating objects sit in the margins. These rules override the ledger layout above.
   ============================================================================================ */
.products-head__grid { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.page-head__kicker { letter-spacing: 0.01em; color: var(--pencil-text); }
.products-head__title { margin-top: var(--s-sm); max-width: none; font-size: var(--t-display); font-weight: 300; font-variation-settings: "opsz" 72; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }
.products-head__lede { max-width: 36ch; margin-inline: 0; text-wrap: pretty; }
.products-head__when { margin-top: var(--s-md); max-width: none; font-size: var(--t-body); line-height: 1.5; color: var(--accent-text); }
.products-head__lineup { width: 100%; max-width: 44rem; margin-top: var(--s-2xl); margin-inline: 0; }

.loaf { padding-top: calc(var(--section) / 2); padding-bottom: calc(var(--section) / 2); }
.loaf--first { padding-top: var(--s-2xl); }
.loaf > .wrap { position: relative; }
/* A left-aligned ledger row (DESIGN.md, Product ledger row): the pack at the left, then the
   name and facts, then the price, the fee and the buy block at the end. The grid is the
   shared .product-row one above; only the spacing is set here. */
.loaf .product-row { padding-block: 0 var(--s-xl); border-top: 0; text-align: left; }
.loaf .product-row__name { max-width: none; font-size: var(--t-headline); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.loaf .product-row__name .product-row__kind { font-size: var(--t-body); font-weight: 400; color: var(--pencil-text); letter-spacing: 0; }
.loaf .product-row__price { font-size: var(--t-title); line-height: 1.25; }
.loaf .product-row__facts { max-width: 44ch; text-wrap: pretty; }
.loaf .product-row__add { flex: 1 0 100%; min-width: 0; }   /* phones: full width from first paint, so the label never resizes it */
@media (min-width: 600px) { .loaf .product-row__buy { max-width: 28rem; } .loaf .product-row__add { flex: 1 1 14rem; min-width: 14rem; } }
/* Phones: beside an 8rem pack, a price at the right left the name about 110px, so "Daily Bread,
   Sorghum sourdough" stacked on four lines. The name takes the whole width beside the pack and
   the price sits under it, where the facts begin. */
@media (max-width: 599.98px) {
  .loaf .product-row {
    grid-template-areas:
      "pic name name"
      "pic price price"
      "pic facts facts"
      "fee fee fee"
      "buy buy buy";
    align-content: start;
  }
  .loaf .product-row__price { justify-self: start; align-self: start; margin-top: var(--s-xs); text-align: left; }
}

.loaf-label { display: block; margin-top: var(--s-3xl); text-align: left; }
.loaf-label > * { margin-inline: 0; }
.loaf-label__title { max-width: none; font-size: var(--t-lede); font-weight: 300; line-height: 1.45; letter-spacing: -0.005em; text-wrap: balance; }
.loaf-label__intro { max-width: 52ch; }
.loaf-label > .label-slip { max-width: 44rem; margin-top: var(--s-xl); text-align: left; }
.loaf-label > .label-after { max-width: 52ch; }
.loaf-label__proof { margin-top: var(--s-2xl); }
.label-prints { max-width: 36rem; margin-inline: 0; }
.loaf-label__side { max-width: 36rem; text-align: left; }
.loaf-label > .loaf-label__decl { max-width: 36rem; text-align: left; }
.loaf-label__licence { max-width: 36rem; text-align: left; }
@media (min-width: 1200px) {
  .loaf-label { display: block; }
  .loaf-label > .label-slip { --slip-w: 28rem; }
}

.order-desk--summary { text-align: left; padding-top: calc(var(--section) / 2); }
.order-desk__wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.order-desk__wrap > * { max-width: 36rem; }
.order-desk__wrap > h2 { max-width: none; font-size: var(--t-headline); font-weight: 300; text-wrap: balance; line-height: 1.1; letter-spacing: -0.01em; }
.order-desk__wrap .ink-mark--float { float: none; margin: var(--s-md) 0 0; }
.order-desk__wrap .order-slip { width: 100%; text-align: left; }
.order-desk__wrap .steps { text-align: left; }
.order-desk__wrap .share { justify-content: flex-start; }
.order-desk__print { max-width: 22rem; margin-inline: 0; }

/* The handwritten marks, as on the home page (moved to a shared sheet later). */
.mark { position: absolute; display: block; width: max-content; z-index: 1; font-family: var(--font-hand); font-size: var(--t-hand); font-weight: 400; line-height: 1.2; color: var(--accent-text); transform: rotate(var(--mark-tilt, -3deg)); pointer-events: none; }
.mark .note-words { clip-path: inset(-25% -10% -25% -10%); transition: clip-path 700ms var(--ease-expo); }
.mark.is-waiting .note-words { clip-path: inset(-25% 110% -25% -10%); transition: none; }
@media (max-width: 599.98px) {
  .mark:not([data-phone]) { display: none; }
  .mark[data-phone] { top: var(--pt) !important; left: var(--pl, auto) !important; right: var(--pr, auto) !important; font-size: var(--t-hand); }
}
html, body { overflow-x: clip; }
/* The old grid gave the name and the pack their own align-self; in the centred column every
   child sits on the centre line. The note's arrow pointed at the pack beside it; now it sits under. */

/* ---- Order strip (head, readiness fix 2026-10-10): the three loaves and one Haldi
   button, both above the fold at 390x844 and 1366x900 (audit finding 1). Reuses the
   .label/.price/.fine type and the existing spacing scale; no new tokens. ---- */
.order-strip { max-width: 30rem; margin: var(--s-xl) 0 0 !important; }
.order-strip__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--s-sm) var(--s-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}
.order-strip__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2xs); }
.order-strip__fine { margin-top: var(--s-sm); }
.order-strip__cta { margin-top: var(--s-md); }
@media (max-width: 599.98px) {
  .order-strip__list { gap: var(--s-xs) var(--s-lg); }
}

/* Reading line: defined once in v3.css (full motion, 900px and up). */

/* Ingredient lists without a value column (Millet, Quinoa): the name takes the full row. */
.loaf-label .receipt__table tr > th:only-child { width: 100%; }

/* The toast-and-chai drawing beside the Daily Bread storage line (2026-10-20): between the table and
   what follows on a phone; in the right margin from 900px. The stack keeps the table's 36rem measure. */
.loaf-label__stack { max-width: 36rem; position: relative; }
@media (min-width: 900px) {
  .loaf-label__stack > .loaf-label__mark.ink-mark--aside { position: absolute; float: none; left: calc(100% + var(--s-xl)); bottom: 0; margin: 0; }
}

/* The slice prop sits over the Daily Bread "Add to cart" button until the page is wide enough
   to leave it room: 110 px over the button at 1440, 26 px at 1680, clear at 1920 (23 Oct). */
@media (max-width: 1759.98px) {
  #daily-bread > .wrap > .float--slice { display: none; }
}