/* ============================================================
   shop-checkout.css (leg L20): the basket, the checkout and the order-placed page.
   Copied rule for rule from the design pack's till.css (designs/shop-till-2026-11-13/till.css): section B whole, plus the few section A
   rules these pages use. Section A belongs to shop.css (leg L19); where shop.css already holds the same rule, loading both is harmless
   (the rules are byte-equal). No new colour, font, radius or shadow. Loaded by the three pages, after shop.css.
   ============================================================ */

/* ---------- from till.css section A (shared pieces these pages use) ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* A3. price. One shape everywhere: the figure in the display face, "was" struck through beside it. */
.price{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-variant-numeric:tabular-nums}
.price-now{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:21px;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.price-was{font-size:16px;font-weight:600;color:var(--ink-soft);text-decoration:line-through;text-decoration-thickness:2px}
.price.is-large .price-now{font-size:46px;letter-spacing:-.025em}
.price.is-large .price-was{font-size:20px}
.price-unit{font-size:16px;font-weight:600;color:var(--ink-soft)}
.price-block{margin-bottom:4px}
.price-block .sale-tag{margin:0 0 10px 4px}
.price-note{margin-top:6px;font-size:16px;color:var(--ink-soft)}
.price.is-loading .price-now{width:4.2ch;height:.9em;background:rgba(6,32,26,.12);color:transparent}

/* A5. a choice of two (finish; delivery or collection). The picked one fills with the page colour and carries a tick. */
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding:0 6px}
.opt{position:relative;display:flex;min-width:0}
.opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer}
.opt-face{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:3px;min-height:72px;padding:10px 46px 10px 18px;border:2px solid var(--ink);transform:skewX(-10deg);transition:background .2s,color .2s}
.opt-face>span{display:block;transform:skewX(10deg)}
.opt-name{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:17px;line-height:1.1;letter-spacing:.03em;text-transform:uppercase}
.opt-sub{font-size:16px;font-weight:600;line-height:1.3;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.opt:hover .opt-face{background:var(--white)}
.opt input:checked+.opt-face{background:var(--base);border-color:var(--base);color:var(--accent)}
.opt input:checked+.opt-face .opt-sub{color:var(--paper)}
.opt input:checked+.opt-face::after{content:"";position:absolute;right:18px;top:50%;width:16px;height:9px;margin-top:-8px;border:solid var(--accent);border-width:0 0 3px 3px;transform:skewX(10deg) rotate(-45deg)}
.opt input:focus-visible+.opt-face{outline:3px solid var(--focus);outline-offset:4px}
.opt input:disabled+.opt-face{opacity:.5;cursor:not-allowed}

/* the finish, named the same way on the basket, the order, the staff card and the job sheet: a solid box for print, a stitched box for embroidery */
.finish-tag{display:inline-block;padding:3px 9px 2px;border:2px solid currentColor;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:13px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
.finish-tag.is-embroidered{border-style:dashed}

/* A6. sums on paper: what is being added (product page), what was paid (order, confirmation) */
.totals{margin:22px 0 0;border-top:2px solid var(--ink)}
.totals div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid rgba(6,32,26,.2);font-size:17px}
.totals dt{min-width:0}
.totals dt small{display:block;font-size:16px;color:var(--ink-soft)}
.totals dd{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.totals .is-total{border-bottom:2px solid var(--ink)}
.totals .is-total dt{font-weight:700}
.totals .is-total dd{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:28px;line-height:1;letter-spacing:-.015em}

/* A11. rev 2 (ruling A10). A line with no logo is allowed and flagged. Gold: something still to come, not something wrong. */
.line-flag.is-follow{margin-left:0;background:var(--gold);color:var(--ink)}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--white)}
.btn-outline:disabled:hover{background:transparent}
@media (max-width:700px){
  .finish-tag{font-size:16px}
  .price.is-large .price-now{font-size:40px}
  .opts{grid-template-columns:1fr;gap:10px}
  .opt-face{min-height:60px}
}

/* ---------- section B (copied whole) ---------- */
/* B1. a basket line: picture, what it is, what it costs */
.basket-line{grid-template-columns:104px minmax(0,1fr) auto}
.line-facts{margin:0;padding:0;list-style:none;font-size:17px}
.line-facts li{margin-top:4px}
.line-facts .chip{width:16px;height:16px;margin:0 8px 0 2px;vertical-align:-2px}
.line-price{min-width:118px;text-align:right}
.line-price .price{justify-content:flex-end}
.line-price small{display:block;margin-top:6px;font-size:16px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.offer-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;margin-top:10px;padding:8px 12px;background:var(--white);font-size:16px;font-weight:600}
.offer-note b{font-variant-numeric:tabular-nums}
/* the logos on a line: numbered squares that match the pins, then where each one sits */
.pin-list{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0;padding:0;list-style:none;font-size:16px}
.pin-list li{display:inline-flex;align-items:center;gap:8px}
/* .pin-n and the small position guide's base rules (.guide, .g-logo, is-plain, is-blank) are in shop.css (L98). Sizes of the guide on a line: */
.request-line .guide,.kit-lines .guide{width:104px;height:124px}
.kit-lines .guide{width:64px;height:76px}
/* the colour bar's small form (SPEC 5): said in words under the facts when the small picture is another colour than the customer's */
.pic-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:8px 0 0;font-size:16px;line-height:1.35}
.pic-note span{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.pic-note span+strong+span{margin-left:6px}
.kit-lines .pic-note{display:flex;margin-top:2px}
/* a plain link inside a sentence of the pay step and the order pages (the shop's links carry no underline of their own) */
.pay-step .notice a,.sent .notice a,.sent-copy a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.pay-step .notice a:hover,.sent .notice a:hover,.sent-copy a:hover{text-decoration-color:var(--gold-deep)}
/* a line that left the shop */
.basket-line.is-gone>img,.basket-line.is-gone .guide{opacity:.4}
.gone-flag{display:inline-block;margin:0 0 6px;padding:3px 9px 2px;background:var(--danger);color:var(--white);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:13px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
.kit-price{margin-left:auto}
/* B2. the summary card grows sums, a code box and a total */
.summary-rows dd{font-variant-numeric:tabular-nums;font-weight:600}
.summary-rows dt small{display:block;font-weight:400;font-size:16px;color:var(--muted)}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:10px;padding-top:16px;border-top:2px solid var(--gold)}
.summary-total dt{font-size:19px;font-weight:700}
.summary-total dd{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:40px;line-height:.95;letter-spacing:-.02em;color:var(--gold);font-variant-numeric:tabular-nums}
.code-box{margin-top:18px;padding-top:16px;border-top:1px solid rgba(244,242,234,.28)}
.code-box label{display:block;margin-bottom:8px;font-weight:700}
.code-row{display:flex;gap:12px;padding-right:6px}
.code-row input{flex:1;min-width:0;min-height:50px;padding:10px 14px;border:2px solid var(--white);background:var(--white);color:var(--ink);font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.summary-card .code-row .btn{width:auto;min-height:50px;margin:0;padding:0 22px}
.code-on{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;font-weight:600}
.code-on .link-btn{color:var(--paper)}
.summary-card .error{color:#FFD9D0}
.summary-card .hint{display:block;margin-top:8px;font-size:16px;color:var(--muted)}
.summary-card .btn:disabled{opacity:.5}
.free-line{margin-top:12px}
/* B3. reorder: what changed since last time, said once, above the lines */
.reorder-report{margin-bottom:26px;padding:20px 22px 8px;background:var(--white);border-top:6px solid var(--gold)}
.reorder-report h2{margin-bottom:6px;font-size:22px;line-height:1.15;letter-spacing:-.01em}
.change-list{margin:14px 0 0;padding:0;list-style:none}
.change-list li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0;border-top:1px solid rgba(6,32,26,.2)}
.change-kind{font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:800;font-size:13px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
/* B4. checkout: three numbered parts, top to bottom */
.pay-step{padding:26px 0 30px;border-top:2px solid var(--ink)}
.pay-step:last-of-type{border-bottom:2px solid var(--ink)}
.pay-step>h2{display:flex;align-items:center;gap:14px;margin-bottom:18px;font-size:26px;line-height:1.05;letter-spacing:-.02em}
.step-n{flex:none;display:inline-grid;place-items:center;width:38px;height:34px;margin-left:4px;background:var(--ink);color:var(--paper);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:18px;line-height:1;transform:skewX(-10deg)}
.step-n>span{display:inline-block;transform:skewX(10deg)}
.pay-step .opts{margin-bottom:6px}
.pay-step .notice{margin-top:14px}
.choices .choice.is-tall{align-items:flex-start;padding:14px 16px;font-weight:400;line-height:1.45}
.choices .choice.is-tall input{margin-top:2px}
.choices .choice.is-tall b{display:block;font-weight:700}
.pay-frame{padding:22px;border:2px solid var(--ink);background:var(--white)}
.pay-frame h3{margin-bottom:6px;font-size:19px}
.pay-frame .notice{margin:0 0 16px}
.pay-step .actions{margin-top:24px;padding-left:6px}
.pay-total{font-variant-numeric:tabular-nums}
/* B5. order placed */
.next-steps{max-width:52ch;margin:0 0 30px;padding:0;list-style:none;counter-reset:n}
.next-steps li{position:relative;padding:12px 0 12px 52px;border-top:1px solid rgba(6,32,26,.2);font-size:18px;counter-increment:n}
.next-steps li::before{content:counter(n);position:absolute;left:4px;top:11px;display:grid;place-items:center;width:32px;height:30px;background:var(--ink);color:var(--paper);font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:16px}
.sent h2{margin:34px 0 12px;font-size:26px;line-height:1.05;letter-spacing:-.02em}
.sent .totals{margin:0 0 30px;border-top:0}
/* B6. phone only: the total and the way on, held at the foot of the screen while the summary card is out of sight */
.pay-bar{display:none}
/* B7. rev 2 (ruling A4). Phone only, checkout: one line of the order above step 1. It opens the whole "Your order" panel
   in place; the panel under the form stays where it is. A <details>, so it works with no script. */
.order-peek{display:none}

@media (max-width:700px){
  .basket-line{grid-template-columns:84px minmax(0,1fr)}
  .line-price{grid-column:2;min-width:0;text-align:left}
  .line-price .price{justify-content:flex-start}
  .request-line .guide{width:84px;height:104px}
  .kit-lines .guide{width:56px;height:68px}
  .gone-flag,.change-kind,.pin-n{font-size:16px}
  .kit-price{margin-left:0;flex-basis:100%}
  .pay-step>h2{font-size:23px}
  .pay-frame{padding:18px 16px}
  .pay-step .actions{flex-direction:column;align-items:stretch;padding-left:0}
  .pay-step .actions .btn{width:calc(100% - 12px);margin-left:6px}
  .summary-total dd{font-size:36px}
  .pay-bar{position:sticky;bottom:0;z-index:9;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 20px calc(10px + env(safe-area-inset-bottom));border-top:6px solid var(--gold);background:var(--night);color:var(--paper)}
  .pay-bar[hidden]{display:none}
  .pay-bar p{font-size:16px;font-weight:600;line-height:1.2}
  .pay-bar strong{display:block;margin-top:2px;font-family:Montserrat,Figtree,sans-serif;font-style:italic;font-weight:900;font-size:24px;line-height:1;letter-spacing:-.015em;color:var(--gold);font-variant-numeric:tabular-nums}
  .pay-bar .btn{flex:none;min-height:48px;margin-right:6px;padding:0 20px;font-size:15px}
  .order-peek{--focus:#D9B074;display:block;margin:0 0 26px;border-top:6px solid var(--gold);background:var(--night);color:var(--paper)}
  .order-peek>summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 12px;min-height:56px;padding:8px 14px;font-size:16px;font-weight:600;line-height:1.3;list-style:none;cursor:pointer}
  .order-peek>summary::-webkit-details-marker{display:none}
  .order-peek>summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
  .order-peek b{font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
  .peek-open,.peek-shut{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
  .order-peek .peek-shut,.order-peek[open] .peek-open{display:none}
  .order-peek[open] .peek-shut{display:inline}
  .order-peek .summary-card{padding:16px 14px 20px;border-top:1px solid rgba(244,242,234,.28)}
  .order-peek .summary-card h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* Section F1 (copied rule for rule from till.css block F1, added by design leg L37b for ruling R29): /order-confirmed.html before the order is paid.
   The tick's own box in outline; waiting: a 6px gold bar breathes inside it; the payment did not go through: the box holds a cross. */
.tick.is-waiting,.tick.is-off{position:relative;overflow:hidden;background:none;border:3px solid var(--gold);color:var(--gold)}
.tick.is-waiting::after{content:"";position:absolute;left:9px;right:9px;bottom:9px;height:6px;background:var(--gold);transform-origin:0 50%;animation:pay-wait 1.4s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes pay-wait{from{transform:scaleX(.3)}to{transform:scaleX(1)}}
.tick.is-off{border-color:#FFD9D0;color:#FFD9D0}
@media (prefers-reduced-motion:reduce){.tick.is-waiting::after{animation:none;transform:scaleX(.5)}}
.sent>.status{margin-bottom:24px}
.sent>.error{margin:0 0 24px;padding:12px 16px;background:var(--white);border-left:6px solid var(--danger)}
.sent>.actions+.notice{margin-top:24px}
.sent>.notice+.notice{margin-top:8px}
.sent>.notice b{font-weight:700;white-space:nowrap}

/* Section C: leg L20's own few rules, for states the specimen does not draw (spacing and a message box only, no new design) */
.kits-heading{margin-top:38px}
.basket-line .status{margin-top:10px}
.pay-error{margin:0 0 16px;padding:12px 16px;background:var(--white);border-left:6px solid var(--danger)}

/* L94 (design pass L91): G1 (S8). "+ £5.00 × 1" never breaks inside itself: on a narrow line it drops whole under the tag. */
.line-facts .num{display:inline-block;white-space:nowrap}

/* G2 (S1). A logo's own note sits under its place. A logo with a note takes the full row. */
.pin-list li.has-note{flex-basis:100%;align-items:flex-start}
.pin-list li.has-note .pin-n{flex:none}
.pin-note{display:block;margin-top:2px;color:var(--ink-soft);overflow-wrap:anywhere}

/* G7 (S26). "Picture shows Jade · Your colour French Navy": each label stays with its colour.
   The two pairs sit side by side when there is room and one under the other when there is not. */
.pic-pair{display:inline-flex;align-items:baseline;gap:8px;font-weight:400}
.pic-note{gap:2px 16px}

/* L127 (design pass L129): H1 (P4). The notice that ordering is not open yet. ONE part wherever it shows: white, a 3px
   ink edge all round (the test strip's own edge, taken round the box), the strip's leaning tag, then the sentence
   in bold. It is never a grey line: it is the thing a real visitor must not miss. On a narrow screen the tag sits
   on its own line above the sentence. */
.open-note{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin:0 0 24px;padding:14px 16px 15px;background:var(--white);border:3px solid var(--ink);color:var(--ink)}
.open-note .strip-tag{background:var(--ink);color:var(--white)}
.open-note p{flex:1 1 230px;min-width:0;font-size:18px;font-weight:700;line-height:1.35}
/* by a pay button: directly above the button row, nothing between them */
.pay-step .open-note{margin:18px 0 0}
.pay-step .open-note+.actions{margin-top:18px}