/* Laurent Voss: the shop. Linked after style.css on the shop pages only: the collection, each piece, the bag.
   Same bone paper, ink and one oxblood accent; the tokens come from style.css's :root. No new fonts, images
   or colours. Everything a shopper presses is at least 44px tall, text that matters is 16px or more, and no
   state is shown by colour alone (a chosen size is filled and ticked, an error is written out).

   Contents
     1. The hidden attribute
     2. Collection index: each row is a link, with its price
     3. A piece: head, price, buy form, size chips, lists, rail, pager
     4. Buttons
     5. The bag
     6. Forced colours and print                                                                      */


/* ==================================================================
   1. HIDDEN
   Component rules below set display, which would otherwise win over
   the hidden attribute. bag.js shows and hides things with it.
   ================================================================== */

[hidden] { display: none !important; }


/* ==================================================================
   2. COLLECTION INDEX
   li.lineup-item   a.lineup-name.lineup-link     (span.lineup-name where there is no page yet)
                    span.lineup-count             (a pack's piece count)
                    span.lineup-price
                    ul.lineup-pieces | p.lineup-note
   The whole row is the link's target: its ::after covers the row.
   Rows sit on a grid: counter, name, price on the first line; the
   count and the pieces beneath. On a phone the price stays on the
   name's line and a pack's count goes under the name.
   ================================================================== */

.lineup-item {
  position: relative;
  grid-template-columns: 2.6em minmax(0, 1fr) auto;
  transition: border-color 200ms var(--ease);
}
.lineup-item::before { grid-column: 1; grid-row: 1; }
.lineup-item > .lineup-name  { grid-column: 2; grid-row: 1; }
.lineup-item > .lineup-price { grid-column: 3; grid-row: 1; }
.lineup-item > .lineup-count { grid-column: 2; grid-row: 2; }
.lineup-item > .lineup-pieces,
.lineup-item > .lineup-note  { grid-column: 2 / -1; grid-row: 3; }

.lineup-price {
  justify-self: end;
  padding-left: 8px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  transition: color 200ms var(--ease);
}
.lineup-count { font-size: 14px; letter-spacing: 0.16em; }

.lineup-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
  transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease);
}
.lineup-link:hover { color: var(--oxblood); text-decoration-color: var(--oxblood); }
.lineup-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
/* The ring goes round the whole row, not just the words. */
.lineup-link:focus-visible { outline: none; }
.lineup-link:focus-visible::after { outline: 2px solid var(--oxblood); outline-offset: 2px; }

/* Where :has() is understood, the hairline under the row you are on turns to ink. */
.lineup-item:has(.lineup-link:hover) { border-bottom-color: var(--ink); }
.lineup-item:has(.lineup-link:hover) .lineup-price { color: var(--oxblood); }

/* A pack whose contents are not given yet: plain text, no hover, no link. */
.lineup-item-pending .lineup-name { color: var(--ink); }
.lineup-note {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (min-width: 760px) {
  .lineup-item { grid-template-columns: 3em minmax(0, 1fr) auto auto; }
  .lineup-item > .lineup-count { grid-column: 3; grid-row: 1; margin-top: 0; }
  .lineup-item > .lineup-price { grid-column: 4; }
  .lineup-item > .lineup-pieces,
  .lineup-item > .lineup-note  { grid-column: 2 / -1; grid-row: 2; }
  .lineup-price { font-size: 20px; padding-left: 0; }
}


/* ==================================================================
   3. A PIECE
   article.doc.product
     header.doc-head.product-head   nav.crumbs, kicker, h1.product-title, price, notes, status callout
     div.doc-body.product-body      section.product-buy (the form), then contents, colours, also-in
     aside.doc-rail.product-rail    at a glance
     nav.product-pager
   The buy section comes first in the body, the rail after it, so on
   a phone nothing sits between the price and the choices.
   ================================================================== */

.product-head { padding-top: clamp(8px, 2vw, 24px); }

/* Breadcrumbs: Collection / Group. 16px, and each link 44px tall. */
.crumbs { margin: 0 0 clamp(14px, 2.4vw, 32px); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before {
  content: "/";
  content: "/" / "";
  margin: 0 0.7em;
  color: var(--ink-soft);
}
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  color: var(--ink-soft);
  text-underline-offset: 0.22em;
}
.crumbs a:hover { color: var(--oxblood); }

/* The name is smaller than a page title, so the longest ("Montaigne Unstructured Blazer") sits on a phone. */
.product-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 6.5vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 96;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}
.product-title em { font-style: italic; font-weight: 400; color: var(--oxblood); }

.product-price {
  margin: clamp(22px, 2.8vw, 38px) 0 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums;
}
.product-price-note,
.product-stock {
  margin: 10px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.5;
}
.product-price-note { color: var(--ink-soft); }
.product-stock { margin-top: 14px; font-size: 17px; font-weight: 500; color: var(--ink); }
.product-status { margin: clamp(22px, 2.6vw, 34px) 0 0; max-width: 46ch; }

/* The owner's photographs, when there are any. Room is reserved only when the figure is there. */
.product-photos { margin: 0 0 clamp(36px, 5vw, 64px); }
.product-photos img { display: block; width: 100%; height: auto; }

/* ── The buy form ── */

.product-buy .buy-fallback {
  margin: 0 0 1.2em;
  padding: 14px 18px;
  background: var(--paper-deep);
  border-left: 2px solid var(--oxblood);
}
.buy {
  display: grid;
  gap: clamp(24px, 3vw, 34px);
  margin: 0;
}

/* min-width: 0 stops a fieldset growing to fit its widest child, which would push the page sideways. */
.buy-slot { min-width: 0; margin: 0; padding: 0; border: 0; }
.buy-legend {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 1.8vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.product-buy .buy-sub {
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.buy-legend + .buy-options { margin-top: 0; }

/* Size chips: every choice in view at once, a 44px square at the least, 8px apart. */
.buy-options { display: flex; flex-wrap: wrap; gap: 8px; }
.buy-chip { position: relative; display: inline-block; }
/* The real radio stays in the page and in the tab order; only its looks are taken away. */
.buy-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.buy-chip span {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}
.buy-chip:hover span { background: var(--paper-deep); }
/* Chosen: filled ink, paper text, and a tick in the corner, so it never rests on colour alone. */
.buy-chip input:checked + span { background: var(--ink); color: var(--paper); }
.buy-chip input:checked + span::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 6px;
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.buy-chip input:focus-visible + span { outline: 2px solid var(--oxblood); outline-offset: 3px; }
/* Unavailable: struck through and muted. */
.buy-chip input:disabled + span {
  background: transparent;
  border-color: var(--ink-soft);
  color: var(--ink-soft);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* A choice still missing: an oxblood rule beside it and the words under it. The negative margin
   and the border and padding cancel out, so the choices do not move when the rule appears. */
.buy-slot[aria-invalid="true"] {
  margin-left: -16px;
  padding-left: 14px;
  border-left: 2px solid var(--oxblood);
}
.product-buy .buy-error {
  margin: 10px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--oxblood);
}
.buy-errors {
  padding: 16px 20px;
  background: var(--paper-deep);
  border-left: 2px solid var(--oxblood);
  color: var(--ink);
}
.buy-errors:focus { outline: none; }
.buy-errors:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.buy-errors p { margin: 0 0 6px; font-weight: 500; }
.buy-errors ul { margin: 0; padding: 0; list-style: none; }
.buy-errors li { margin: 0; }
.buy-errors a {
  display: inline-block;
  padding-block: 9px;
  color: var(--oxblood);
}

/* "Use the same size for every tee": a quiet text button, never pre-filled for you. */
.buy-same {
  justify-self: start;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--oxblood);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
  touch-action: manipulation;
}
.buy-same:hover { color: var(--ink); }
.buy-same:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }

/* Shown only if a size run is ever not yet approved. */
.product-buy .product-provisional {
  margin: 0 0 1em;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.product-buy .buy-fixed {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* The point-of-choice note about size exchanges. */
.product-buy .buy-policy {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
.product-buy .buy-status {
  min-height: 1.6em;
  margin: 0;
  font-weight: 500;
}
.product-buy .buy-status:empty { display: none; }
.product-buy .buy-next { margin: 0; }
.buy-next a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}

/* ── Lists and links on a piece's page ── */

.product-contents .doc-list a,
.product-colours .doc-list a,
.product-also .doc-list a {
  display: inline-block;
  padding-block: 9px;
  margin-block: -9px;
}

.product-rail { margin-top: clamp(48px, 7vw, 72px); }

/* Previous and next in this group: two links, stacked on a phone, 56px tall at the least. */
.product-pager {
  display: grid;
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--ink);
}
.product-pager a {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.product-pager a:hover { color: var(--oxblood); }

@media (min-width: 600px) {
  .product-pager { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .product-pager a[rel~="prev"] { grid-column: 1; }
  .product-pager a[rel~="next"] { grid-column: 2; justify-content: flex-end; text-align: right; }
}

@media (min-width: 960px) {
  .product-head > .crumbs,
  .product-head > .product-title { grid-column: 1 / -1; }
  .product-rail { margin-top: 0; }
  .product-pager { grid-column: 5 / -1; grid-row: 3; }
}

@media (prefers-reduced-motion: no-preference) {
  .product-title { animation: settle 900ms var(--ease) both; }
}


/* ==================================================================
   4. BUTTONS
   .btn.btn-primary: ink with paper text, sentence case, 52px tall at
   the least; full width on a phone, up to 24rem above. aria-disabled
   keeps the button focusable, so a screen reader can hear why it does
   nothing; it looks flat and still reads (text 4.5:1 or better).
   ================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  padding: 0 28px;
  border: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--oxblood); border-color: var(--oxblood); color: var(--paper); }
.btn-primary:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }
.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover,
.btn[aria-disabled="true"]:active {
  background: var(--paper-deep);
  border-color: var(--rule);
  color: var(--ink-soft);
  cursor: not-allowed;
  transform: none;
}
@media (min-width: 600px) {
  .btn { width: auto; min-width: 14rem; max-width: 24rem; }
}


/* ==================================================================
   5. THE BAG
   ol.bag-lines > li.bag-line   name, pieces, unit price, quantity, line total, Remove
   dl.bag-totals                subtotal, shipping, total (the reading layout's facts)
   div.bag-checkout             the button and the note under it
   Lines sit on hairlines like the lineup. On a phone each line stacks;
   from 600px the name and pieces are on the left, the quantity and
   Remove in the middle and the line total on the right.
   ================================================================== */

.bag-body { max-width: 40rem; }
.doc-body .bag-notice {
  margin: 0 0 1.4em;
  font-weight: 500;
}
.bag-notice:empty { display: none; }
.doc-body .bag-loading,
.doc-body .bag-empty {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.35;
}
.doc-body .bag-error {
  margin: 0;
  padding: 16px 20px;
  background: var(--paper-deep);
  border-left: 2px solid var(--oxblood);
  font-weight: 500;
}

.bag-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.bag-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name   name"
    "pieces pieces"
    "unit   unit"
    "qty    total"
    "remove remove";
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;
  padding: 20px 0 14px;
  border-bottom: 1px solid var(--rule);
}
.bag-line-name {
  grid-area: name;
  justify-self: start;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
  overflow-wrap: break-word;
}
.bag-line-name:hover { color: var(--oxblood); text-decoration-color: var(--oxblood); }

.bag-line-pieces {
  grid-area: pieces;
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.bag-line-pieces > li { margin: 0; }
.doc-body .bag-line-unit {
  grid-area: unit;
  margin: 0;
  font-size: 16px;
  color: var(--ink-soft);
}

/* The quantity stepper: [ − 2 + ], three joined 44px squares. */
.bag-qty { grid-area: qty; display: inline-flex; align-items: stretch; justify-self: start; }
.bag-qty button {
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 150ms var(--ease);
}
.bag-qty button:hover { background: var(--paper-deep); }
.bag-qty button:focus-visible { position: relative; outline: 2px solid var(--oxblood); outline-offset: 3px; }
.bag-qty button[aria-disabled="true"],
.bag-qty button[aria-disabled="true"]:hover {
  background: var(--paper-deep);
  border-color: var(--ink-soft);
  color: var(--ink-soft);
  cursor: not-allowed;
}
.bag-qty-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  padding: 0 4px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-size: 18px;
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}

.doc-body .bag-line-total {
  grid-area: total;
  margin: 0;
  justify-self: end;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

.bag-line-remove {
  grid-area: remove;
  justify-self: start;
  min-width: 44px;
  min-height: 44px;
  margin: 0 0 0 -4px;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--oxblood);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
  touch-action: manipulation;
}
.bag-line-remove:hover { color: var(--ink); }
.bag-line-remove:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 3px; }

@media (min-width: 600px) {
  .bag-line {
    grid-template-columns: minmax(0, 1fr) auto minmax(5.5rem, auto);
    grid-template-areas:
      "name   qty    total"
      "pieces unit   total"
      "pieces remove total";
    column-gap: 24px;
    align-items: start;
    padding: 24px 0 16px;
  }
  .bag-line-pieces { margin: 6px 0 0; }
  .bag-line-total { align-self: start; padding-top: 6px; }
}

/* Totals: label on the left, figure on the right, at every width. The total is set larger, over a darker rule. */
.bag-totals { margin: clamp(26px, 3.2vw, 38px) 0 0; border-top: 0; }
.doc-body .bag-totals > div {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
}
.bag-totals dd { text-align: right; }
.doc-body .bag-totals > #bag-total-row { border-bottom: 1px solid var(--ink); }
#bag-total {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 2.4vw, 32px);
  line-height: 1.1;
}

.bag-checkout { margin-top: clamp(26px, 3.2vw, 40px); }
.doc-body .bag-checkout-note {
  max-width: 44ch;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.bag-checkout-note:focus { outline: 2px solid var(--oxblood); outline-offset: 4px; }


/* ==================================================================
   6. FORCED COLOURS AND PRINT
   ================================================================== */

/* In a high-contrast mode backgrounds are replaced, so the chosen chip gets a heavy outline of its own. */
@media (forced-colors: active) {
  .buy-chip input:checked + span { outline: 3px solid Highlight; outline-offset: -3px; }
  .btn { border-color: ButtonText; }
  .btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}

/* Print: the bag as a plain list. Controls go; lines, quantities and totals stay. */
@media print {
  .product-buy,
  .product-pager,
  .bag-qty button,
  .bag-line-remove,
  .bag-checkout { display: none; }
  .bag-qty-value { border: 0; min-width: 0; padding: 0; }
  .bag-line-name,
  .lineup-link { color: inherit; text-decoration: none; }
  .lineup-link::after { display: none; }
}