/* =========================================================
   testmodel.css: everything new in the 3@1 Northlands test shop.
   Loaded last, after stark, store, shop-prototype, shop and order (none of them edited).
   Colour: DESIGN.md section 3 hexes (through the stark tokens) plus white, the r2 glass and shadow recipes,
   and the product colours of the shirt and mug chips. Motion: the drop (320 ms) and the phone price bar only.
   ========================================================= */
:root {
  --banner-h: 44px;
  --sticky-top: 96px;                 /* the 80px nav plus 16px, once the banner has scrolled away */
  --price-h: 245px;                   /* the compact price panel */
  --pane-max: 780px;
  --pane-h: clamp(420px, calc(100svh - var(--sticky-top) - var(--price-h) - 26px - 16px), var(--pane-max));   /* fix round 1: 16 px of air under the pill */
  --tm-grey: #5A6472;
  --tm-glass: rgba(4,18,51,.45);
  --tm-glass-line: rgba(255,255,255,.2);
}
@media (max-height: 959px) { :root { --pane-max: 520px; } }   /* fix round 1: at 1440 x 900 the total must clear the fold, so the pane stops at 520 px */
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Testing Mode banner ---------- */
.tm-banner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .15rem .6rem; min-height: var(--banner-h); padding: .4rem 1rem;
  background: var(--yellow); color: var(--navy); text-align: center; position: relative; z-index: 101;
}
.tm-banner .ico { width: 18px; height: 18px; vertical-align: middle; }
.tm-banner b { font-family: var(--font-d); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .06em; line-height: 1.2; }
.tm-banner span { font-family: var(--font-b); font-size: 14px; font-weight: 600; line-height: 1.35; }

/* ---------- nav basket count ---------- */
.snav__mini { position: relative; }
.tm-mini-count {
  position: absolute; top: 1px; right: -2px; min-width: 20px; height: 20px; padding: 0 .3rem; border-radius: 999px; background: var(--red); color: #fff;
  font-size: .8125rem; font-weight: 800; display: inline-grid; place-items: center; line-height: 1;
}

/* ---------- glass chip and the placeholder tag ---------- */
.pd-gchip {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; padding: .2rem .8rem; border-radius: 999px;
  background: var(--tm-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--tm-glass-line); color: #fff; font-size: .875rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.pd-gchip .ico { width: 1.15em; height: 1.15em; }
.pd-gchip--name { white-space: nowrap; position: relative; min-width: 0; max-width: 100%; }
.pd-gchip__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* r6 fix: one line and an ellipsis, as the Digital Printing file row */
.pd-gchip--name .ico { flex: none; }
.pd-gchip--warn { background: #fff !important; color: var(--red); border-color: rgba(213,35,47,.4); }
.tm-ph {
  display: inline-block; font-style: normal; font-family: var(--font-b); font-size: 13px; font-weight: 600;   /* fix round 1: 13 px floor (was the spec's 11 px) */ letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  padding: .28rem .5rem; border-radius: 999px; background: var(--sky-wash); color: var(--tm-grey); vertical-align: middle; white-space: nowrap;
}

/* ---------- shop front ---------- */
.tm-hero { display: flex; align-items: center; min-height: 300px; padding: 2.4rem 0 2rem; }
.tm-hero .container { display: grid; justify-items: start; gap: 1rem; }
.tm-hero__title { margin: 0; font-family: var(--font-d); font-weight: 700; text-transform: uppercase; color: #fff; font-size: 4.2rem; line-height: .98; }
.tm-hero__sub { margin: 0; color: #fff; font-weight: 700; font-size: 1.2rem; line-height: 1.4; max-width: 36rem; text-wrap: balance; }
.tm-shop { padding: 0 1.5rem 3rem; }
.tm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; max-width: 1240px; margin: 0 auto; }
.tm-card[id] { scroll-margin-top: 110px; }
.tm-card {
  display: flex; flex-direction: column; background: #fff; color: var(--ink); border-radius: var(--pc-radius); box-shadow: var(--pc-shadow);
  overflow: hidden; text-decoration: none; transition: box-shadow .18s ease;
}
.tm-card:hover { box-shadow: var(--pc-shadow-hi); color: var(--ink); }
.tm-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179, var(--pc-shadow); }
.tm-card__img { display: block; aspect-ratio: 1 / 1; background: #003482; }   /* the avatars' measured edge ground, so image and card media meet without a seam */
.tm-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tm-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.1rem 1.3rem 1.3rem; flex: 1; }
.tm-eyebrow { position: relative; display: block; padding-bottom: .55rem; margin-bottom: .1rem; color: var(--tm-grey); font-family: var(--font-b); font-weight: 600; font-size: 13px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; }
.tm-eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--yellow); }
.tm-card h3 { margin: 0; font-family: var(--font-d); font-weight: 700; text-transform: uppercase; color: var(--navy); font-size: 1.5rem; line-height: 1; }
.tm-card__blurb { display: block; color: var(--tm-grey); font-size: 15px; line-height: 1.45; }
.tm-card__price { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-weight: 600; font-size: 15px; color: var(--navy); }
.tm-card__go { margin-top: auto; }
.tm-how { padding: 0 1.5rem 4rem; }
.tm-how__band { max-width: 1240px; margin: 0 auto; padding: 1.8rem; border-radius: var(--pc-radius); background: var(--tm-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--tm-glass-line); }
.tm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.tm-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; row-gap: .2rem; align-content: start; }
.tm-disc { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--yellow); color: var(--navy); display: grid; place-items: center; }
.tm-disc .ico { width: 22px; height: 22px; }
.tm-steps h3 { margin: 0; font-family: var(--font-d); font-weight: 600; text-transform: uppercase; color: #fff; font-size: 1.6rem; line-height: 1.05; }
.tm-steps p { margin: 0; color: #fff; font-size: 1rem; line-height: 1.45; }

/* ---------- product page: head and grid ---------- */
.pd-sec.ssec.lt-sec { padding-top: 2rem; }   /* fix round 1: was 3.5rem at 1440, the shared .ssec.lt-sec rule is left alone */
.pd-head { margin: 0 0 1rem; }
.pd-head__row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-bottom: .5rem; }
.pd-head .front-title { margin: 0; font-size: clamp(2.4rem, 4.4vw, 3.8rem); }
.pd-head .front-lead { font-size: 1.1rem; max-width: 56rem; }   /* one line at desktop, so every product has the same title block height */
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.pd-left, .pd-right { min-width: 0; }
.pd-stack { display: grid; gap: 1.6rem; }
@media (min-width: 1001px) {
  .pd-grid { grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr); }
  .pd-left { align-self: stretch; }   /* the column is as tall as the row, so the stack has room to travel */
  .pd-stack { position: sticky; top: var(--sticky-top); }
  .pd-pane { height: var(--pane-h); }
}
@media (max-width: 1000px) {
  .pd-left, .pd-stack { display: contents; }
  .pd-pane { order: 1; }
  .pd-right { order: 2; }
  .pd-price { order: 3; }
  .pd-how { order: 4; }
}
@media (min-width: 781px) and (max-width: 1000px) { .pd-pane { height: min(var(--pane-h), 640px); } }

/* ---------- the pane: empty and reading ---------- */
.pd-pane { position: relative; min-width: 0; }
.pd-start { display: flex; align-items: stretch; justify-content: center; gap: 2rem; height: 100%; }
.pd-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; text-align: center;
  flex: 0 1 auto; height: 100%; aspect-ratio: 420 / 594; max-width: 100%; padding: 1.6rem;
  background: #fff; border: 2px dashed rgba(0,49,121,.55); border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); color: var(--navy); cursor: pointer;
}
.pd-drop:hover, .pd-drop.is-over { border-color: rgba(0,174,239,.9); }
.pd-drop.is-over { background: var(--sky-wash); }
.pd-drop:has(.pd-file:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179, var(--pc-shadow); }
.pd-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.pd-drop__icon { width: 48px; height: 48px; color: var(--navy); fill: none; stroke: currentColor; }
.pd-drop__t { font-family: var(--font-b); font-weight: 800; font-size: 1.15rem; line-height: 1.35; color: var(--navy); max-width: 17rem; text-wrap: balance; }
.pd-drop__s { font-size: .95rem; line-height: 1.45; color: var(--tm-grey); max-width: 17rem; text-wrap: balance; }
.pd-drop.is-error .pd-drop__s { color: var(--red); font-weight: 700; }
.pd-drop__rd { display: none; }
.pd-drop.is-reading { border-style: solid; border-color: rgba(0,49,121,.2); cursor: progress; }
.pd-drop.is-reading .pd-drop__icon, .pd-drop.is-reading .pd-drop__t, .pd-drop.is-reading .pd-drop__s { display: none; }
.pd-drop.is-reading .pd-drop__rd { display: block; }
.pd-drop__file {
  position: absolute; top: 14px; left: 14px; right: 14px; display: none; align-items: center; gap: .45rem; width: fit-content; max-width: calc(100% - 28px);
  padding: .3rem .8rem; border-radius: 999px; background: var(--sky-wash); color: var(--navy); font-size: .875rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; text-align: left;
}
.pd-drop__file small { font-size: .8125rem; font-weight: 700; color: var(--navy); white-space: nowrap; }
.pd-drop.is-reading .pd-drop__file { display: inline-flex; }
.pd-drop__line { font-weight: 800; font-size: 1.1rem; color: var(--navy); }
.pd-ind { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; overflow: hidden; border-radius: 0 0 calc(var(--pc-radius) - 2px) calc(var(--pc-radius) - 2px); background: var(--sky-wash); display: none; }
.pd-ind i { display: block; height: 100%; width: 38%; background: var(--navy); border-radius: 999px; animation: pd-ind 1.2s ease-in-out infinite; }
.pd-drop.is-reading .pd-ind { display: block; }
@keyframes pd-ind { from { transform: translateX(-100%); } to { transform: translateX(270%); } }

/* the door, Large Format only: drawn at true scale beside the proof only after the customer chooses True scale (r3) */
.pd-doorsvg { display: block; width: 100%; height: 100%; }
.pd-doorsvg * { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.pd-doorlbl { position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: 10px; }

/* ---------- the pane: preview, on the glass desk ---------- */
.pd-preview { display: none; }
.pd[data-state="preview"] .pd-start { display: none; }
.pd[data-state="preview"] .pd-preview {
  display: flex; flex-direction: column; height: 100%; min-height: 0; padding: .9rem 1rem; background: var(--tm-glass);
  border: 1px solid var(--tm-glass-line); border-radius: var(--pc-radius);
}
/* one glass layer only: chips on the desk are solid Navy at 90 percent */
.pd-preview .pd-gchip { background: rgba(0,49,121,.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pd-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .55rem; }
.pd-topr { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pd-viewbtn { cursor: pointer; font-family: var(--font-b); min-height: 44px; }
.pd-tabs { display: flex; gap: .4rem; }
.pd-tab {
  min-height: 44px; padding: .2rem 1rem; border-radius: 999px; border: 1px solid var(--tm-glass-line); background: rgba(0,49,121,.9); color: #fff;
  font: 700 .875rem/1.2 var(--font-b); cursor: pointer;
}
.pd-tab[aria-pressed="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.pd-tab:focus-visible, .pd-viewbtn:focus-visible, .pd-total:focus-visible, .pd-artbtn:has(input:focus-visible), .pd-chg:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179; }
.pd-chg { position: relative; flex: none; white-space: nowrap; margin-left: .3rem; padding: .1rem .6rem; border-radius: 999px; background: #fff; color: var(--navy); font-size: .8125rem; font-weight: 800; cursor: pointer; }
.pd-read { list-style: none; margin: 0 0 .55rem; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pd-readlead { color: #fff; font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-right: .3rem; }
.pd-sidenote { margin: 0 0 .55rem; padding: 0 .2rem; color: #fff; font-size: .875rem; font-weight: 700; line-height: 1.35; }

.pd-stage { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; justify-content: center; }
.pd-row { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 14px; }
.pd-row.is-floor { margin-bottom: 46px; align-self: center; align-items: flex-end; gap: 52px; border-bottom: 1px solid rgba(255,255,255,.35); }
.pd-door { position: relative; flex: none; }

.pd-sheet { position: relative; flex: none; display: block; background: #fff; box-shadow: var(--pc-shadow); border-radius: 0; }
.pd-clip { position: absolute; inset: 0; overflow: hidden; background: #fff; display: block; }
.pd-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-blank, .pd-pdfnote { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: .4rem; flex-direction: column; text-align: center; padding: .5rem; color: var(--tm-grey); font-weight: 700; font-size: .875rem; }
.pd-pdfnote .ico { width: 28px; height: 28px; color: var(--navy); }
.pd-sheet.is-blank .pd-art, .pd-sheet.is-pdfnote .pd-art { display: none; }
.pd-sheet.is-blank .pd-blank, .pd-sheet.is-pdfnote .pd-pdfnote { display: flex; }
.pd-trim { position: absolute; inset: 0; border: 1px dashed #fff; box-shadow: 0 0 0 1px rgba(16,32,60,.6); pointer-events: none; display: block; }
.pd-bleed { position: absolute; inset: calc(var(--bleed, 4px) * -1); border: 1px dashed #00AEEF; pointer-events: none; display: none; }
.pd-sheet.has-bleed .pd-bleed { display: block; }
.pd-wrap { position: absolute; display: none; pointer-events: none; background: rgba(4,18,51,.4); }
.pd-wrap--r { top: 0; right: 0; bottom: 0; width: var(--wrap, 6px); border-left: 1px solid rgba(255,255,255,.4); }
.pd-wrap--b { left: 0; right: 0; bottom: 0; height: var(--wrap, 6px); border-top: 1px solid rgba(255,255,255,.4); }
.pd-sheet.is-canvas .pd-wrap { display: block; }
.pd-sheet.is-canvas .pd-trim, .pd-sheet.is-canvas .pd-bleed { display: none; }
.pd-sheen { position: absolute; top: 0; bottom: 0; left: 28%; width: min(180px, 70%); display: none; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%); }
.pd-sheet.is-gloss .pd-sheen { display: block; }
/* one-ink products (stamps): the art in greys, the ink colour screened over it, so paper stays white and the design prints in the ink */
.pd-clip { isolation: isolate; }
.pd-ink { position: absolute; inset: 0; display: none; pointer-events: none; background: var(--ink, #1C1C1C); mix-blend-mode: screen; }
.pd-sheet.has-ink .pd-ink { display: block; }
.pd-sheet.has-ink .pd-art { filter: grayscale(1) contrast(1.4); }
.pd-sheet.is-landing { animation: pd-land .32s ease-out both; }
@keyframes pd-land { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

.pd-obj { position: absolute; inset: 0; }
.pd-objcanvas { display: block; width: 100%; height: 100%; }
.pd-obj canvas { touch-action: none; }
.pd-photos { --tw: 160px; --th: 160px; position: absolute; inset: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fit, var(--tw)); gap: 12px 10px; justify-content: center; align-content: center; padding: 2px; }   /* fix round 1: tiles at the print ratio, centred in the pane */
.pd-photos figure { margin: 0; display: grid; gap: 4px; }
.pd-photos img { width: var(--tw); height: var(--th); object-fit: contain; border-radius: 6px; background: #fff; display: block; }   /* r6 fix: the whole photo in its print frame, a portrait stays portrait (was cover, which cropped it) */
.pd-photos figcaption { color: #fff; font-size: .8125rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pd-parcel { background: #003482; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }   /* fix round 1: the whole box, not cropped */
.pd-cap { margin: .6rem 0 0; text-align: center; color: #fff; font-size: .9375rem; font-weight: 600; line-height: 1.4; }

/* ---------- cards ---------- */
.pd-card { min-width: 0; background: #fff; color: var(--ink); border: 1px solid rgba(0,49,121,.12); border-radius: var(--pc-radius); box-shadow: var(--pc-shadow); padding: clamp(1.1rem, 2.2vw, 1.6rem); }
.pd-h { margin: 0 0 20px; font-family: var(--font-d); font-weight: 700; text-transform: uppercase; color: var(--navy); font-size: 2rem; line-height: 1; }
.pd-readnote { margin: -.6rem 0 .9rem; color: var(--navy); font-weight: 800; font-size: .95rem; }
.pd-opts__body[inert] { opacity: .55; pointer-events: none; }
.pd-opts .pd-lg { display: block; margin: 0 0 10px; font-family: var(--font-d); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; color: var(--navy); }
.pd-opts .pd-g { margin: 0; padding: 24px 0 22px; border-top: 1px solid var(--shop-line); min-width: 0; }
.pd-opts .pd-g:first-of-type { padding-top: 0; border-top: 0; }
.pd-opts .pd-g:last-of-type { padding-bottom: 0; }
.pd-opts .tm-ph { margin-left: .5rem; }

.pd-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.pd-chips.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd-chips .ph-chip { min-height: 56px; padding: .4rem .65rem; }
.pd-chips .ph-chip b { font-size: .9rem; line-height: 1.2; }
.pd-chips .ph-chip small { line-height: 1.2; }
.pd-chips .ph-chip.is-span { grid-column: 1 / -1; }
.pd-chips.is-compact .ph-chip { min-height: 52px; padding: .35rem .5rem; }
.pd-chips .pd-pr { font-size: .875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-chips .ph-chip small, .pd-chips .pd-pr, .pd-trow small { color: var(--navy); }   /* fix round 1: sub-lines and prices on white, Navy #003179 = 12.2:1 (was Navy at 80 percent = 6.9:1) */
.pd-chips .ph-chip:empty { display: none; }
.ph-chip.has-sw { grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; align-content: center; }
.ph-chip.has-sw > b, .ph-chip.has-sw > small { grid-column: 2; }
.pd-sw { grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,49,121,.4); }
.pd-note { margin: .6rem 0 0; color: var(--tm-grey); font-size: .875rem; }
.pd-trows { display: grid; gap: .5rem; }
.ph-chip.pd-trow { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem .8rem; }
.pd-trow__main, .pd-trow__end { display: grid; gap: .05rem; min-width: 0; }
.pd-trow__end { text-align: right; justify-items: end; }
.pd-trow small { display: block; }
.pd-trow .ico { width: 1em; height: 1em; vertical-align: -.12em; margin-right: .25rem; }
.pd-trow b { font-variant-numeric: tabular-nums; }
.pd-qtyrow { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.qty button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.pd-dims { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; }
.pd-dims label { display: grid; gap: .2rem; }
.pd-dims label span { font-size: .875rem; font-weight: 700; color: var(--navy); }
.pd-dims i { font-style: normal; font-weight: 700; color: var(--navy); min-height: 44px; display: inline-flex; align-items: center; }
.pd-in {
  min-height: 44px; width: 104px; padding: .4rem .75rem; border: 1px solid rgba(0,49,121,.55); border-radius: 12px; background: #fff; color: var(--ink);
  font: 600 1rem/1.2 var(--font-b); font-variant-numeric: tabular-nums;
}
.pd-in--wide { width: 100%; }
.pd-in:focus { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179; }
.pd-artrow { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.pd-artstat { font-size: .9375rem; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.pd-artbtn { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1rem; border: 1px solid rgba(0,49,121,.55); border-radius: 999px; font-weight: 800; font-size: .9rem; color: var(--navy); cursor: pointer; }
.pd-artbtn:hover { border-color: rgba(0,174,239,.9); }

/* ---------- price panel (compact) ---------- */
.pd-price { position: relative; display: grid; gap: 8px; padding: 20px; }
.pd-price__more { display: none; }
.pd-lines { list-style: none; margin: 0; padding: 0; }
.pd-lines li { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; font-size: .9rem; color: var(--shop-ink-soft); }
.pd-lines li b { color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-total { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; min-height: 48px; padding: 0; }
.pd-total span { font-family: var(--font-d); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; color: var(--navy); }
.pd-total b { font-family: var(--font-d); font-weight: 700; font-size: 2.8rem; line-height: 1; color: var(--red); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-price.is-quote .pd-total b { font-size: 2.2rem; }
.pd-unit { margin: 0; min-height: 22px; font-size: .9375rem; line-height: 1.4; color: var(--shop-ink-soft); font-variant-numeric: tabular-nums; }
.pd-fine { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--shop-ink-soft); }
.pd-order { margin-top: 4px; }
.pd-order[aria-disabled="true"] { opacity: .7; cursor: not-allowed; }
.pd-order[aria-disabled="true"]:hover { transform: none; }
.pd-order .ico { width: 1.2em; height: 1.2em; }
.pd-added {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); margin: 0; display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap;
  padding: .55rem 1rem; border-radius: 999px; background: var(--tm-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--tm-glass-line);
  color: #fff; font-weight: 700; font-size: .9375rem;
}
.pd-added a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; font-weight: 800; }

/* ---------- closing band on the product page: three steps on the ground ---------- */
.pd-how { margin-top: 56px; }

/* ---------- basket, checkout, thanks ---------- */
.tm-sec { padding-top: clamp(1rem, 2.4vw, 1.8rem); }
.tm-cartgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 1.6rem; align-items: start; }
.tm-lines { list-style: none; margin: 0; padding: .4rem 1.4rem; }
.tm-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto 44px; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--shop-line); }
.tm-line:last-child { border-bottom: 0; }
.tm-line__th { position: relative; display: block; width: 72px; height: 72px; }
.tm-line__thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; background: var(--sky-wash); display: block; }
.tm-line__main { display: grid; gap: .15rem; min-width: 0; }
.tm-line__main b { color: var(--navy); font-weight: 800; font-size: 1rem; }
.tm-line__main span { color: var(--tm-grey); font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; }
.tm-line__total { font-family: var(--font-d); font-weight: 700; font-size: 1.4rem; color: var(--navy); white-space: nowrap; min-width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.tm-line__rm { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: var(--navy); border-radius: 50%; cursor: pointer; }
.tm-line__rm:hover { background: rgba(0,49,121,.07); }
.tm-line__rm:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179; }
.tm-line__rm .ico { width: 22px; height: 22px; }
.tm-totals { display: grid; gap: 10px; }
.tm-totals__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; color: var(--shop-ink-soft); font-size: .9375rem; }
.tm-totals__rows li { display: flex; justify-content: space-between; gap: 1rem; }
.tm-totals__rows b { color: var(--navy); font-variant-numeric: tabular-nums; }
.tm-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 1rem; padding: 2.6rem 1.4rem; text-align: center; }
.tm-empty__ico { width: 48px; height: 48px; color: var(--navy); fill: none; stroke: currentColor; }
.tm-empty__t { margin: 0; font-family: var(--font-d); font-weight: 700; text-transform: uppercase; font-size: 1.6rem; color: var(--navy); }
.tm-cogrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 1.6rem; align-items: start; }
.co .field { margin-bottom: 1rem; }
.co .field label { display: block; margin-bottom: .35rem; font-size: .9375rem; font-weight: 700; color: var(--navy); }
.co .field input { width: 100%; min-height: 48px; padding: .5rem .85rem; border: 1px solid rgba(0,49,121,.55); border-radius: 12px; background: #fff; color: var(--ink); font: 600 1rem/1.2 var(--font-b); }
.co .field input:focus { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179; }
.tm-hint { margin: 0 0 1rem; color: var(--tm-grey); font-size: .9375rem; }
.tm-notice {
  display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 1rem; padding: .75rem .95rem; border-radius: 12px; color: var(--navy); font-weight: 600; font-size: .9375rem; line-height: 1.4;
  background: color-mix(in srgb, var(--yellow) 24%, #fff); border: 1px solid color-mix(in srgb, var(--orange) 55%, #fff);
}
.tm-notice .ico { flex: none; width: 22px; height: 22px; }
.tm-sum { list-style: none; margin: 0 0 1rem; padding: 0; width: 100%; text-align: left; }
.tm-sum li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--shop-line); color: var(--navy); font-size: .9375rem; }
.tm-sum small { display: block; color: var(--tm-grey); font-size: .875rem; font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; }
.tm-sum li > b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tm-thanks { max-width: 640px; margin: 1.5rem auto 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1rem; text-align: center; padding: 2.2rem 1.6rem; }
.tm-thanks__ico { width: 56px; height: 56px; color: var(--navy); fill: none; stroke: currentColor; }
.tm-thanks__h { margin: 0; }
.tm-thanks__p { margin: 0; color: var(--navy); font-weight: 600; font-size: 1.05rem; line-height: 1.5; }
.tm-thanks .pd-total { width: 100%; }
.tm-thanks__note { margin: -.4rem 0 0; text-align: left; width: 100%; }
.tm-thanks__acct { margin: 0; text-align: center; color: var(--navy); }
.tm-thanks__acct a { display: inline-flex; align-items: center; min-height: 44px; color: var(--navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1000px) {
  .tm-cartgrid, .tm-cogrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  .tm-banner { padding: .5rem 1rem; }
  .tm-hero { min-height: 0; padding: 1.6rem 0 1.2rem; }
  .tm-hero__title { font-size: 2.6rem; }
  .tm-hero__sub { font-size: 1.05rem; }
  .tm-shop, .tm-how { padding-left: 1rem; padding-right: 1rem; }
  .tm-grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .tm-steps { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .tm-how__band { padding: 1.3rem; }
  .tm-pdp, body.tm-pdp.shop { padding-bottom: 56px; }
  .pd-head { margin-bottom: 1rem; }
  .pd-head__row { flex-direction: column; align-items: flex-start; gap: .6rem; }   /* fix round 1: every page head stacks the same way at phone width (the back pill above the title) */
  .pd-pane { height: auto; }
  .pd-start { height: auto; }
  .pd-drop { width: 100%; height: min(56svh, 460px); aspect-ratio: auto; flex: 1 1 auto; }
  .pd[data-state="preview"] .pd-preview { height: auto; padding: .75rem; }
  .pd-stage { flex: none; }
  .pd-photos { position: static; max-height: 46svh; }
  .pd-parcel { position: static; height: auto; max-height: 46svh; }
  .pd-obj { position: relative; inset: auto; height: 46svh; }
  .pd-h { font-size: 1.7rem; }
  .pd-chips { grid-template-columns: minmax(0, 1fr); }
  .pd-chips.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-chips .ph-chip { min-height: 50px; }
  .pd-how { margin-top: 2rem; order: 5; }
  .pd-price {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; border-radius: 20px 20px 0 0; border-width: 1px 0 0; padding: 6px 12px 5px; min-height: 56px; gap: 0;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "more more" "fine fine" "tot cta"; align-items: center; column-gap: .8rem;
  }
  /* fix round 1: these are scoped to the fixed price bar. Unscoped, the grid-area names leaked into the basket totals and the thank-you card
     and gave the thank-you card two implicit columns (the tall vertical BACK TO SHOP pill the reader saw at 390). */
  .pd-price .pd-unit, .pd-price .pd-fine { display: none; }
  .pd-price.is-open .pd-price__more { display: block; grid-area: more; padding-top: .4rem; }
  .pd-price.is-open .pd-fine { display: block; grid-area: fine; margin: 0 0 .4rem; }
  .pd-price .pd-total { grid-area: tot; min-height: 44px; align-items: center; cursor: pointer; justify-content: flex-start; gap: .6rem; }
  .pd-price .pd-total span { font-size: 1.1rem; }
  .pd-price .pd-total b, .pd-price.is-quote .pd-total b { font-size: 1.8rem; }
  .pd-price .pd-order { grid-area: cta; margin: 0; width: auto; padding: .7rem 1.2rem; font-size: .95rem; min-height: 44px; }
  .tm-thanks { grid-template-columns: minmax(0, 1fr); padding: 1.6rem 1.1rem; }
  .tm-thanks .btn { width: 100%; min-height: 56px; justify-content: center; }
  .tm-cartgrid .btn--block, .tm-cogrid .btn--block, .co .btn--block { min-height: 56px; }
  .pd-added { top: auto; bottom: calc(100% + 10px); left: 12px; right: 12px; }
  .tm-cartgrid, .tm-cogrid { gap: 1.2rem; }
  .tm-line { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "th main rm" "qty qty total"; row-gap: .6rem; }
  .tm-line__th { grid-area: th; width: 64px; height: 64px; }
  .tm-line__thumb { width: 64px; height: 64px; }
  .tm-line__main { grid-area: main; }
  .tm-line .qty { grid-area: qty; justify-self: start; }
  .tm-line__total { grid-area: total; min-width: 0; }
  .tm-line__rm { grid-area: rm; justify-self: end; }   /* fix round 1: the third column is auto, so the line total is never wider than its box */
}
@media (prefers-reduced-motion: reduce) {
  .pd-sheet.is-landing { animation: none; }
  .pd-ind i { animation: none; width: 100%; opacity: .5; border-radius: 0; }
  .tm-card, .btn { transition: none; }
}


@media (min-width: 781px) and (max-width: 1000px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* =========================================================
   Courier page: the fleet quote widget (assets/js/courier-quote.js).
   The qz__* rules the widget needs are already in store.css (a copy of the fleet file). Three fleet rules are missing from
   that copy and are added here word for word. The fleet dom/intl toggle is scoped to .cq so order.css's light toggle does not win.
   ========================================================= */
.qz__cards--row { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.qz__err { font-size: .76rem; font-weight: 700; color: var(--yellow); margin: .6rem 0 0; }
.qz__fine--gap { margin-bottom: 1.1rem; }
@media (max-width: 680px) { .qz__cards--row { grid-template-columns: 1fr; } }   /* fleet rule, re-stated because the auto-fit line above comes after the copy's phone rule */

.cq .ctoggle { display: flex; width: fit-content; max-width: 100%; gap: .35rem; padding: .35rem; margin: 0 auto 1.4rem; border-radius: 999px; background: rgba(2,14,43,.5); border: 1px solid rgba(127,216,255,.2); }
.cq .ctoggle__btn { display: block; min-height: 44px; border: 0; cursor: pointer; padding: .6rem 1.15rem; border-radius: 999px; font-weight: 800; font-size: .82rem; letter-spacing: .02em; line-height: 1.2; text-align: center; color: rgba(255,255,255,.8); background: transparent; transition: background .2s, color .2s; }
.cq .ctoggle__btn.is-on { color: #04123a; background: linear-gradient(120deg, var(--cyan), #7fd8ff); box-shadow: 0 6px 18px -8px rgba(0,174,239,.7); }
.cq .cpane[hidden] { display: none; }

/* layout: the widget starts at the top (r3: the avatar pane above it was removed) */
body.tm-courier.shop { padding-bottom: 0; }   /* no fixed price bar on this page */
.cq-stack { display: grid; gap: 1.1rem; max-width: 52rem; margin: 0 auto; }
/* r4: "Get a quote" lives in the Courier page heading; the separate QUOTE REQUEST heading block is gone and everything sits higher */
.front-title__q { display: inline-block; margin-left: .35em; font-size: .58em; letter-spacing: .02em; color: var(--yellow); white-space: nowrap; vertical-align: baseline; }
.tm-courier .pd-head { margin-bottom: .4rem; }
.tm-courier .pd-sec.ssec.lt-sec { padding-top: 1.4rem; }
.tm-courier .cq .ctoggle { margin-bottom: 1rem; }
.cq { min-width: 0; }
@media (max-width: 780px) {
  .cq { order: 1; }
}

/* the shop's 13 px floor and its contrast floor (fix round 1 rules) applied to the fleet's small print.
   Remove this block to get the fleet sizes and greys back exactly. */
.cq .qz__sub { font-size: .8125rem; color: rgba(255,255,255,.85); }
.cq .qz__steps li { font-size: .8125rem; }
.cq .qz__steps li b { font-size: .8125rem; }
.cq .qz__cardsub { font-size: .8125rem; color: rgba(255,255,255,.8); }
.cq .qz__card b { font-size: .9rem; }
.cq .qz__chip b { font-size: .8125rem; }
.cq .qz__chip span { font-size: .8125rem; color: rgba(255,255,255,.8); }
.cq .qz__chip em { font-size: .8125rem; }
.cq .qz__summary { font-size: .875rem; }
.cq .qz__summary i { font-size: .8125rem; }
.cq .qz__fine { font-size: .8125rem; color: rgba(255,255,255,.8); }
.cq .qz__err { font-size: .8125rem; }
.cq .qz__label { color: #fff; }
.cq .field label em { font-size: .8125rem; font-style: normal; font-weight: 600; }
.cq .qz .field input::placeholder, .cq .qz .field textarea::placeholder { color: rgba(255,255,255,.6); font-style: italic; }   /* fix round 2: italic so L, W, H and kg cannot be mistaken for entered values */
/* .lt-sec sets Ink text and Navy headings for the white cards; the widget is the fleet's dark glass, so its own text stays white */
.cq .qz { color: #fff; }
.cq .qz__head h3 { color: #fff; }
.cq .qz__head h3 svg { color: #35d07f; }
/* order.css (.ord-sec .field ...) makes fields white with Navy labels for the print forms; inside the fleet widget they stay the fleet's glass fields (stark.css .field) */
.cq .qz .field label { color: rgba(255,255,255,.85); font-size: .8125rem; }
.cq .qz .field input, .cq .qz .field textarea, .cq .qz .field select {
  min-height: 0; padding: .85rem 1rem; border-radius: 12px; font-size: 1rem; color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);
}
.cq .qz .field textarea { min-height: 0; }
.cq .qz .field input:focus, .cq .qz .field textarea:focus, .cq .qz .field select:focus {
  outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179;   /* the shop's focus ring (order.css spec 4) */
}
/* the ghost Back button: order.css (.lt-sec .btn--ghost) makes it Navy for the light cards; on the glass widget it is the fleet's white ghost */
.cq .qz .btn--ghost, .cq .qz .btn--ghost:hover { background: rgba(255,255,255,.07); border: 1px solid var(--glass-border); color: #fff; }
.cq .qz .btn--ghost:hover { background: rgba(255,255,255,.13); }
.cq .qz .btn[disabled] { opacity: .6; cursor: default; transform: none; }

/* fix round 2 (reader findings 1 and 4).
   1. order.css (.ord-sec .field select { width: 100% }) beat the fleet's .qz__val select { width: auto } and squeezed the amount box to nothing: the currency list keeps its own width and the amount takes the rest.
   4. Back and Send request never wrap onto two lines, at any width. */
.cq .qz__val select { width: auto; flex: 0 0 auto; min-width: 5.4em; }
.cq .qz__val input { flex: 1 1 0; min-width: 0; width: auto; }
.cq .qz__nav .btn { white-space: nowrap; flex: 0 0 auto; }
.cq .qz__send { flex-wrap: nowrap; }
@media (max-width: 480px) {
  /* at 390 the two buttons at the fleet's side padding were 5 px wider than the card's content box, so the card scrolled sideways when Send was pressed and clipped the left edge of the labels. Tighter side padding, same text and size. */
  .cq .qz__nav .btn { padding-left: 1.15rem; padding-right: 1.15rem; }
  .cq .qz__nav { gap: .6rem; }
}

/* ---------- round 3: sample-price notes, qty hint, print quality (dpi) meter ----------
   Colour only from the 3@1 tokens: Navy, Cyan, Yellow, Red, white text on the Navy glass chip. No white ground. */
.tm-card__sample { flex: 1 0 100%; display: block; color: var(--tm-grey); font-size: 13px; font-weight: 600; line-height: 1.3; }
.tm-line__sample { color: var(--tm-grey); font-size: 13px; font-weight: 600; }
.pd-fine [data-ph] { font-weight: 700; }
.pd-note { margin: .35rem 0 0; color: var(--tm-grey); font-size: .8125rem; line-height: 1.35; }
.pd-dpi {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin: 0 0 .55rem; padding: .4rem .8rem; border-radius: 16px;
  background: rgba(0,49,121,.9); border: 1px solid var(--tm-glass-line); color: #fff; font-size: .875rem; font-weight: 700; line-height: 1.3;
}
.pd-dpi__lbl { font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pd-dpi__bar { position: relative; flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 96px; height: 10px; }
.pd-dpi__bar i { display: block; border-radius: 5px; background: rgba(255,255,255,.3); }
.pd-dpi.is-great .pd-dpi__bar i.on { background: var(--cyan); }
.pd-dpi.is-ok .pd-dpi__bar i.on { background: var(--yellow); }
.pd-dpi.is-low .pd-dpi__bar i.on { background: var(--red-hot); }
.pd-dpi__bar u { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; border-radius: 2px; background: #fff; text-decoration: none; }
.pd-dpi__val { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; min-width: 0; }
.pd-dpi__badge { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem .1rem .45rem; border-radius: 999px; font-weight: 800; background: rgba(255,255,255,.18); color: #fff; }
.pd-dpi__badge .ico { width: 1.15em; height: 1.15em; flex: none; }
.pd-dpi.is-great .pd-dpi__badge { background: var(--cyan); color: var(--navy); }
.pd-dpi.is-ok .pd-dpi__badge { background: var(--yellow); color: var(--navy); }
.pd-dpi.is-low .pd-dpi__badge { background: var(--red); color: #fff; }
.pd-dpi__n { font-variant-numeric: tabular-nums; }
.pd-dpi__note { font-size: .8125rem; font-weight: 600; opacity: .9; margin-left: .3rem; }
@media (max-width: 780px) { .pd-dpi__bar { width: 80px; } }

/* ---------- round 3: X to remove, every PDF page, Digital Printing front and back ---------- */
.pd-x { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -8px -10px -8px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.pd-x .ico { width: 20px; height: 20px; }
.pd-x:hover { background: rgba(255,255,255,.2); }
.pd-x:focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 5px #003179; }
.pd-photos figure { position: relative; }
.pd-x--tile { position: absolute; top: 2px; right: 2px; margin: 0; background: rgba(0,49,121,.92); color: #fff; }
.pd-x--tile:hover { background: var(--red); }
.pd-x--inline { margin: 0 0 0 .1rem; color: var(--navy); }
.pd-x--inline:hover { background: var(--sky-wash); }
.pd-x--inline:focus-visible { outline-color: var(--navy); box-shadow: 0 0 0 5px rgba(0,174,239,.5); }
.pd-tabs.is-many { max-width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.pd-tabs.is-many .pd-tab { flex: none; min-width: 44px; padding: .2rem .6rem; }
.pd-sheet.is-loading .pd-art { opacity: .25; }

[data-two] .pd-preview { display: none !important; }
/* ============ round 5: the frosted-glass desk controls (Front / Back, file row, page strip) ============
   Glass stays on these controls only. One recipe: a navy-tinted translucent fill with a lighter top, a light inner border, an inner top highlight,
   a soft drop and a backdrop blur. Concentric radii (outer 16, inner 13). Selected = a bright frosted thumb with Navy text (12:1).
   Every hit area is 44 px or more. Motion is short and switched off under prefers-reduced-motion. */
.pd-sides, .pd-sidetabs, .pd-frow, .pd-pager, .co-steps, .co-switch, .co-chip {
  --g-fill: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)), rgba(0,31,84,.58);
  --g-line: rgba(255,255,255,.3);
}
[data-two] .pd-preview { display: none !important; }
.pd-sides {
  display: flex; flex-direction: column; height: 100%; min-height: 0; padding: .85rem 1rem .9rem; background: var(--tm-glass);
  border: 1px solid var(--tm-glass-line); border-radius: var(--pc-radius);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 22px 44px -28px rgba(0,10,32,.85);
}
.pd-sidebar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin: 0 0 .7rem; }
.pd-sidetabs, .pd-frow, .pd-pager, .co-steps, .co-switch, .co-chip {
  background: var(--g-fill); border: 1px solid var(--g-line); border-radius: 16px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 10px 22px -14px rgba(0,10,32,.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
}
/* Front / Back: a two-part switch, the bright thumb slides to the chosen side */
.pd-sidetabs { position: relative; isolation: isolate; flex: none; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; }
.pd-sidetabs::before {
  content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 13px;
  background: linear-gradient(180deg, #fff, #E3F5FD); box-shadow: 0 8px 16px -8px rgba(0,10,32,.75), inset 0 -1px 0 rgba(0,49,121,.14);
}
.pd-sidetabs[data-on="back"]::before { transform: translateX(100%); }
.pd-sidetab { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-width: 7.2rem; min-height: 44px; padding: .2rem 1rem; border: 0; border-radius: 13px; background: transparent; color: #fff; font: 800 .9375rem/1.1 var(--font-b); cursor: pointer; }
.pd-sidetab small { font-size: .8125rem; font-weight: 600; opacity: .92; }
.pd-sidetab[aria-selected="true"] { color: var(--navy); }
.pd-sidetab:not([aria-selected="true"]):hover { background: rgba(255,255,255,.12); }
.pd-sidetab:focus-visible, .pd-pager__step:focus-visible, .pd-pager .pd-tab:focus-visible, .pd-frow .pd-x:focus-visible, .pd-frow .pd-chg:has(input:focus-visible) {
  outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 5px #003179;
}
.pd-sidetab__dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
.pd-sidetab[aria-selected="true"] .pd-sidetab__dot { box-shadow: 0 0 0 2px var(--navy); }
/* the file row */
.pd-frow { flex: 1 1 15rem; min-width: 0; display: flex; align-items: center; gap: .65rem; min-height: 50px; padding: 3px; }
.pd-frow__th { flex: none; width: 44px; height: 44px; border-radius: 13px; object-fit: cover; display: grid; place-items: center; background: rgba(0,49,121,.85); border: 1px solid rgba(255,255,255,.4); }
.pd-frow__th--ic .ico { width: 22px; height: 22px; }
.pd-frow__txt { flex: 1 1 0; min-width: 0; display: grid; gap: 1px; }
.pd-frow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9375rem; font-weight: 800; line-height: 1.2; }
.pd-frow__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8125rem; font-weight: 600; line-height: 1.2; color: rgba(255,255,255,.88); }
.pd-frow .pd-chg {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 1rem; border-radius: 13px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: .875rem; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.pd-frow .pd-chg:hover { background: rgba(255,255,255,.26); }
.pd-frow .pd-x { width: 44px; height: 44px; margin: 0; border-radius: 13px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); color: #fff; }
.pd-frow .pd-x:hover { background: rgba(213,35,47,.9); border-color: rgba(255,255,255,.5); }
/* the page strip: count, previous, numbered chips on a scrolling track with soft edge fades, next */
.pd-side__info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem; margin: 0 0 .6rem; }
.pd-read--plain { margin: 0; gap: 0; color: rgba(255,255,255,.95); font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.pd-read--plain li + li::before { content: "\00b7"; margin: 0 .55rem; opacity: .7; }
.pd-pager { flex: 1 1 19rem; min-width: 0; max-width: 31rem; margin-left: auto; display: flex; align-items: center; gap: 3px; min-height: 50px; padding: 3px; }
.pd-pager__count { flex: none; display: inline-flex; align-items: center; padding: 0 .65rem 0 .5rem; margin-right: 2px; border-right: 1px solid rgba(255,255,255,.24); min-height: 30px; font-size: .875rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pd-pager__long { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* "Page 3 of 30" is read out; "3 / 30" is what shows, so six chips fit beside it */
.pd-pager__step { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.26); border-radius: 13px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.pd-pager__step .ico { width: 22px; height: 22px; }
.pd-pager__step:not([aria-disabled="true"]):hover { background: rgba(255,255,255,.26); }
.pd-pager__step[aria-disabled="true"] { opacity: .4; cursor: default; }
.pd-pager .pd-side__tabs {
  position: relative; flex: 1 1 0; min-width: 0; max-width: none; display: flex; gap: 3px; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fl, 0px), #000 calc(100% - var(--fr, 0px)), transparent 100%);
}
.pd-pager .pd-side__tabs::-webkit-scrollbar { display: none; }
.pd-pager .pd-tab { flex: none; min-width: 44px; min-height: 44px; padding: 0 .75rem; border: 1px solid transparent; border-radius: 13px; background: transparent; color: #fff; font: 800 .9375rem/1 var(--font-b); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; }
.pd-pager .pd-tab:hover { background: rgba(255,255,255,.16); }
.pd-pager .pd-tab[aria-pressed="true"] { background: linear-gradient(180deg, #fff, #E3F5FD); color: var(--navy); border-color: rgba(0,174,239,.95); box-shadow: 0 8px 16px -8px rgba(0,10,32,.75); }
.pd-side__tabs:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .pd-sidetabs::before { transition: transform .22s cubic-bezier(.3,.7,.2,1); }
  .pd-sidetab, .pd-pager .pd-tab, .pd-pager__step, .pd-frow .pd-chg, .pd-frow .pd-x { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
  .pd-side__sheet .pd-sheet { transition: width .16s ease, height .16s ease; }
}
/* no backdrop-filter (older browsers): the same controls on solid Navy, so nothing depends on the blur */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pd-sides { background: #04235c; }
  .pd-sidetabs, .pd-frow, .pd-pager, .co-steps, .co-switch, .co-chip { background: #0b3a82; }
}
.pd-side { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; min-height: 0; }
.pd-side__stage { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
.pd-side__sheet { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.pd-side .pd-dpi { flex: none; flex-wrap: nowrap; gap: .25rem .6rem; margin: .6rem 0 0; padding: .3rem .9rem; border-radius: 999px; min-height: 40px; }
.pd-side .pd-dpi__val { flex-wrap: nowrap; white-space: nowrap; }
.pd-side .pd-dpi__lbl { white-space: nowrap; }
.pd-drop--mini { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; max-width: none; padding: .8rem; gap: .5rem; }
.pd-drop--mini .pd-drop__icon { width: 44px; height: 44px; }
.pd-drop--mini .pd-drop__t { font-size: 1.15rem; max-width: 24rem; }
.pd-drop--mini .pd-drop__s { font-size: .9375rem; max-width: 24rem; }
.pd-side .pd-sidenote { margin: .5rem 0 0; font-size: .875rem; }
@media (max-width: 780px) {
  .pd-sides { height: auto; padding: .75rem .75rem .8rem; }
  .pd-sidetabs { width: 100%; }
  .pd-sidetab { min-width: 0; }
  .pd-frow { flex-basis: 100%; }
  .pd-pager { flex-basis: 100%; max-width: none; margin-left: 0; }
  .pd-pager__count { padding: 0 .55rem 0 .4rem; }
  .pd-side { flex: none; }
  .pd-side__stage { flex: none; min-height: 240px; }
  .pd-side.is-empty .pd-side__stage { height: 260px; }
  .pd-side .pd-dpi { flex-wrap: wrap; border-radius: 16px; }
  .pd-side .pd-dpi__lbl { display: none; }
  .pd-side .pd-dpi__note { display: none; }
}

/* ---- round 5: Orientation chip glyphs and the quiet "Matched to your file" note ---- */
.pd-sw.pd-glyph { position: relative; width: 22px; height: 22px; border: 0; border-radius: 0; background: none; color: var(--navy); }
.pd-glyph::before { content: ""; position: absolute; box-sizing: border-box; border: 2px solid currentColor; border-radius: 3px; background: rgba(0,174,239,.2); }
.pd-glyph--portrait::before { left: 5px; top: 1px; width: 12px; height: 20px; }
.pd-glyph--landscape::before { left: 1px; top: 5px; width: 20px; height: 12px; }
.pd-autonote { display: flex; align-items: center; gap: .35rem; margin: .55rem 0 0; color: var(--tm-grey); font-weight: 600; }
.pd-autonote .ico { width: 16px; height: 16px; flex: none; color: var(--navy); }

/* ============ round 6: one-page checkout (steps bar, collect or deliver, remembered details, ready notice, pay tiles, order summary) ============
   The glass is the round 5 recipe (selectors added to its lists above, nothing new): the steps bar, the Collect/Delivery switch and the two notice chips.
   They sit on a bright blue deck inside the white card, so white text on the glass reads (checked by pixel in work/r6-checks.js). Motion only without prefers-reduced-motion. */
.co { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.2rem; }   /* flex, not grid: a sticky grid item can only move inside its own cell */
.co-sec { scroll-margin-top: 150px; }
.co-anchor { display: block; height: 0; overflow: hidden; scroll-margin-top: 150px; }   /* #details: the Edit link in My account lands on Your details, clear of the sticky steps bar */
.co-steps { position: sticky; top: 84px; z-index: 30; list-style: none; margin: 0; padding: 3px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)), linear-gradient(rgba(0,31,84,.58), rgba(0,31,84,.58)), #0A4187; }
.co-step a { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: .2rem .6rem; border-radius: 13px; color: #fff; text-decoration: none; font: 800 .9375rem/1.15 var(--font-b); text-align: left; }
.co-step a:hover { background: rgba(255,255,255,.12); color: #fff; }
.co-step a:focus-visible { outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 5px #003179; }
.co-step__n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; font-size: .8125rem; font-weight: 800; line-height: 1; }
.co-step__n .ico { width: 15px; height: 15px; }
.co-step.is-current a { background: linear-gradient(180deg, #fff, #E3F5FD); color: var(--navy); box-shadow: 0 8px 16px -8px rgba(0,10,32,.75), inset 0 -1px 0 rgba(0,49,121,.14); }
.co-step.is-current .co-step__n { background: var(--navy); border-color: var(--navy); color: #fff; }
.co-step.is-done .co-step__n { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }
.co-deck { margin: 0 0 1.1rem; padding: .85rem; border-radius: 18px; background: radial-gradient(120% 95% at 50% 42%, #1BA8E6 0%, #0B8BD1 22%, #0A6FBF 45%, #0A55A3 70%, #0A4187 100%); }
.co-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; max-width: 480px; }
.co-switch::before { content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 13px;
  background: linear-gradient(180deg, #fff, #E3F5FD); box-shadow: 0 8px 16px -8px rgba(0,10,32,.75), inset 0 -1px 0 rgba(0,49,121,.14); }
.co-switch[data-on="delivery"]::before { transform: translateX(100%); }
.co-opt, .co-chip { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .2rem .8rem; border-radius: 13px; color: #fff; font: 800 .9375rem/1.1 var(--font-b); cursor: pointer; }
.co-opt .ico, .co-chip .ico { width: 20px; height: 20px; flex: none; }
.co-opt input, .co-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.co-opt:has(input:checked) { color: var(--navy); }
.co-opt:not(:has(input:checked)):hover { background: rgba(255,255,255,.12); }
.co-opt:has(input:focus-visible), .co-chip:has(input:focus-visible) { outline: 3px solid #fff; outline-offset: -3px; box-shadow: inset 0 0 0 5px #003179; }
.co-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.co-chip { min-width: 9.5rem; border-radius: 16px; }
.co-chip:has(input:checked) { background: linear-gradient(180deg, #fff, #E3F5FD); color: var(--navy); }
.co-chip:not(:has(input:checked)):hover { background: rgba(255,255,255,.12); }
.co-store { display: flex; gap: .7rem; margin: 0 0 1rem; color: var(--navy); font-size: 1rem; line-height: 1.5; }
.co-store .ico { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.co-hours { margin: 0 0 1rem; padding: .85rem 1rem; border-radius: 12px; background: var(--sky-wash); color: var(--navy); }
.co-hours__h { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.co-hours__h .ico { width: 20px; height: 20px; }
.co-hours dl { margin: 0; display: grid; gap: .3rem; }
.co-hours dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; }
.co-hours dt { font-weight: 600; }
.co-hours dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.co-field--short { max-width: 12rem; }
.co-loc { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.2rem; border-radius: 999px; border: 2px solid var(--navy); background: #fff; color: var(--navy); font: 800 .9375rem/1 var(--font-b); cursor: pointer; }
.co-loc .ico { width: 20px; height: 20px; }
.co-loc:hover { background: var(--sky-wash); }
.co-loc:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179; }
.co-loc[aria-busy="true"] { opacity: .75; cursor: progress; }
.co-locmsg { margin: .6rem 0 0; color: var(--tm-grey); font-size: .9375rem; line-height: 1.4; }
.co-guest { margin-top: -.6rem; }
.co-saved { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .6rem; margin: -.3rem 0 .6rem; color: var(--tm-grey); font-size: .875rem; }
.co-forget { min-height: 44px; min-width: 44px; padding: 0 .4rem; background: none; border: 0; color: var(--navy); font: 800 .875rem/1 var(--font-b); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.co-forget:focus-visible { outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 5px #003179; }
.co-h3 { margin: 1.5rem 0 .6rem; font-family: var(--font-d); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; color: var(--navy); }
.co-pay { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.co-paytile { display: grid; justify-items: center; align-content: start; gap: .35rem; padding: .85rem .4rem; text-align: center; border: 2px dashed rgba(0,49,121,.5); border-radius: 14px; color: var(--navy); font-weight: 800; font-size: .9375rem; line-height: 1.2; cursor: not-allowed; user-select: none; }
.co-paytile .ico { width: 26px; height: 26px; }
.co-paytile em { font-style: normal; font-size: .8125rem; font-weight: 800; padding: .05rem .55rem; border-radius: 999px; background: var(--yellow); color: var(--navy); }
.co-sum { list-style: none; margin: 0 0 .8rem; padding: 0; }
.co-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: .9rem 0; border-bottom: 1px solid var(--shop-line); }
.co-line__thumb { width: 88px; height: 88px; object-fit: cover; border-radius: 12px; background: var(--sky-wash); display: block; }
.co-line__main { display: grid; gap: .3rem; justify-items: start; min-width: 0; }
.co-line__main b { color: var(--navy); font-weight: 800; font-size: 1rem; }
.co-line__main > span { color: var(--tm-grey); font-size: .875rem; line-height: 1.35; overflow-wrap: anywhere; }
.co-line__right { display: grid; justify-items: end; gap: .2rem; text-align: right; color: var(--tm-grey); font-size: .875rem; }
.co-line__right b { font-family: var(--font-d); font-weight: 700; font-size: 1.3rem; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the print-quality badge: the same words and colours as the meter on the product pages */
.q-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .65rem .1rem .45rem; border-radius: 999px; font-size: .8125rem; font-weight: 800; line-height: 1.35; }
.q-badge .ico { width: 1.15em; height: 1.15em; flex: none; }
.q-badge.is-great { background: var(--cyan); color: var(--navy); }
.q-badge.is-ok { background: var(--yellow); color: var(--navy); }
.q-badge.is-low { background: var(--red); color: #fff; }
.q-badge__n { font-weight: 600; font-variant-numeric: tabular-nums; }
.q-badge--sm { position: absolute; left: 4px; bottom: 4px; padding: .05rem .5rem; }
.tm-facts { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .6rem; text-align: left; }
.tm-facts li { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; border-radius: 12px; background: var(--sky-wash); color: var(--navy); font-weight: 600; font-size: .9375rem; line-height: 1.45; }
.tm-facts .ico { flex: none; width: 22px; height: 22px; margin-top: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .co-switch::before { transition: transform .22s cubic-bezier(.3,.7,.2,1); }
  .co-opt, .co-chip, .co-step a, .co-loc { transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
}
@media (max-width: 780px) {
  .co { gap: 1rem; }
  .co-steps { top: 72px; }
  .co-step a { flex-direction: column; gap: .2rem; padding: .3rem .25rem; font-size: .8125rem; text-align: center; min-height: 54px; }
  .co-sec { scroll-margin-top: 140px; }
  .co-anchor { scroll-margin-top: 140px; }
  .co-switch { max-width: none; }
  .co-chip { flex: 1 1 0; min-width: 0; }
  .co-line { grid-template-columns: 64px minmax(0, 1fr) auto; gap: .7rem; }
  .co-line__thumb { width: 64px; height: 64px; }
  .co-line__right b { font-size: 1.15rem; }
  .co-pay { gap: .45rem; }
  .co-paytile { padding: .75rem .25rem; font-size: .875rem; }
}

/* ============ round 6 fix (29 Oct): functional fixes only ============ */
/* (g) the Digital Printing page strip, reused on the other products when a file has more than 8 pages */
.pd-pagerwrap { display: flex; margin: 0 0 .6rem; }
.pd-pagerwrap[hidden] { display: none; }
.pd-preview .pd-pagerwrap .pd-pager { margin-left: auto; }
@media (max-width: 780px) { .pd-pagerwrap .pd-pager { flex-basis: 100%; max-width: none; margin-left: 0; } }
/* (e) while the phone menu is open it sits above the Testing Mode banner, so the close X can be tapped */
@media (max-width: 1080px) { body.menu-open .snav { z-index: 200; } }

/* ======================================================================
   Round 7 (1 Nov 2026): the fleet shell in the shop. Override block, last on purpose.
   Everything here is scoped to body.shop so stark.css and store.css stay untouched.
   ====================================================================== */

/* (round 8, 1 Nov 2026: the shop-only Home item and its desktop override were removed here; the header no longer carries Home.) */

/* shop front: the "Order online" band sits on the fleet's soft cyan ground (.ssec--light, no white) */
.tm-order { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.tm-order .ssec__head { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); }

/* quote form (Steve item 10) */
.qf-card { max-width: 640px; margin: 1.5rem auto 0; }
.co .field textarea, .co .field select { width: 100%; min-height: 48px; padding: .6rem .85rem; border: 1px solid rgba(0,49,121,.55); border-radius: 12px; background: #fff; color: var(--ink); font: 600 1rem/1.35 var(--font-b); }
.co .field textarea { min-height: 128px; resize: vertical; }
.co .field textarea:focus, .co .field select:focus { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #003179; }
.co .field [aria-invalid="true"] { border-color: var(--red); border-width: 2px; }
.qf-msg { margin: 0 0 1rem; padding: .75rem .95rem; border-radius: 12px; color: var(--navy); font-weight: 600; font-size: .9375rem; line-height: 1.4; background: color-mix(in srgb, var(--yellow) 24%, #fff); border: 1px solid color-mix(in srgb, var(--orange) 55%, #fff); }
.qf-msg.is-bad { border: 2px solid var(--red); }
.qf-privacy { margin: 1rem 0 0; text-align: center; }

/* mobile tab bar: the page reserves its height, and the fixed price bar on product pages sits above it */
@media (max-width: 680px) {
  body.shop { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0)); }
  body.shop .pd-price { bottom: calc(var(--mtab-h, 61px) + env(safe-area-inset-bottom, 0)); }
}

/* header fit: the shop menu carries Shop, the six fleet services, the My account avatar and the Basket (r8; the fleet has 8 items),
   so the header row is allowed more of the screen than the 1180 px content column. Height, font and logo stay the fleet's. */
@media (min-width: 1081px) {
  body.shop .snav .snav__inner { width: min(1640px, 97.5%); }
}
@media (min-width: 1081px) and (max-width: 1279px) {
  body.shop .snav__loc { display: none; }
  body.shop .snav__menu a:not(.btn) { padding-inline: .18rem; }
}

/* hero: body.shop sets the page ink to dark navy, the fleet hero inherits white from its body; restore white inside the hero ground */
body.shop .shero { color: #fff; }

/* "shop online" eyebrow: the fleet's own cyan reads 3.7:1 on the light ground, Navy clears AA */
.tm-order .hud-label { color: var(--navy); }

/* ======================================================================
   Round 7 QC fix pass (1 Nov 2026): touch targets, the mobile bottom strip, the footer, the phone banner.
   ====================================================================== */

.tm-banner .tm-banner__short { display: none; }

/* quote form: the Testing Mode note sits under the button */
.qf-testnote { margin: 1rem 0 0; }

/* header touch targets: burger and basket 44 x 44 at every width they show, bars centred in the burger */
body.shop .snav__toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
body.shop .snav__inner .snav__mini { width: 44px; height: 44px; }

/* desktop menu links are 44 px tall; the 80 px header does not grow because the row is already taller than that */
@media (min-width: 1081px) {
  body.shop .snav__menu a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}

/* footer: links and social icons are 44 px targets at every width; the list gap goes so the columns stay tidy */
body.shop .sfoot ul { gap: 0; }
body.shop .sfoot ul a { display: inline-flex; align-items: center; min-height: 44px; }
body.shop .sfoot__social a { width: 44px; height: 44px; }
body.shop .sfoot__social { gap: .3rem; }

/* phone and small tablet: the fixed bars (price bar on product pages, tab bar) are cleared by the FOOTER's own padding,
   not by body padding, so no bare page ground shows under the footer */
@media (max-width: 780px) {
  body.shop, body.tm-pdp.shop { padding-bottom: 0; }
  body.tm-pdp.shop .sfoot { padding-bottom: calc(2rem + 64px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 680px) {
  body.shop { padding-bottom: 0; }
  body.shop .sfoot { padding-bottom: calc(2rem + 76px + env(safe-area-inset-bottom, 0px)); }
  body.tm-pdp.shop .sfoot { padding-bottom: calc(2rem + 76px + 64px + env(safe-area-inset-bottom, 0px)); }
  body.shop .sfoot__brand p { margin-inline: auto; }

  /* Testing Mode banner: two lines at 390 (the short line, the long one is for wider screens) */
  .tm-banner { padding: .3rem .75rem; gap: .05rem .5rem; }
  .tm-banner .tm-banner__full { display: none; }
  .tm-banner .tm-banner__short { display: inline; flex-basis: 100%; font-size: 13px; line-height: 1.3; }
}

/* ======================================================================
   Round 8 (1 Nov 2026): fleet hover menu with graphics, avatar for My account, Home and the header quote button gone.
   ====================================================================== */

/* My account is an avatar (Tabler user-circle, the house icon pack) next to the basket, same 20 px icon, colour and 44 px hit area as the basket.
   Desktop: the avatar is a menu item right before the basket. Phone and small tablet (menu breakpoint 1080 px): it sits beside the basket tile in the header. */
.snav__tools { display: none; }
@media (min-width: 1081px) {
  body.shop .snav__menu a.snav__avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; color: var(--navy); }
  body.shop .snav__menu a.snav__avatar svg { width: 20px; height: 20px; }
  body.shop .snav__menu a.snav__avatar:hover { color: #04123a; }
}
@media (max-width: 1080px) {
  body.shop .snav__acct { display: none; }
  body.shop .snav__tools { display: flex; align-items: center; gap: .3rem; grid-column: 1; justify-self: start; }
  body.shop .snav__inner .snav__tools .snav__mini { grid-column: auto; margin: 0; }
  body.shop .snav__inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .4rem; }
  body.shop .snav__inner > .nav { margin-right: 0; }
  /* the logo keeps its 66 px box (header stays about 68 px) and shrinks sideways to the space the two tiles leave it */
  body.shop .snav__brand { min-width: 0; width: 100%; justify-content: center; }
  body.shop .snav__brand img { width: auto; max-width: 100%; height: 66px; object-fit: contain; }
}

/* mega menu cards in the shop header: the shop's 44 px menu-link rule (inline-flex, centred) must not reshape the fleet's cards */
@media (min-width: 1081px) {
  body.shop .snav__menu .mega__item { display: flex; justify-content: flex-start; min-width: 0; min-height: 0; align-items: center; border-radius: 14px; }
  body.shop .snav__menu .mega__txt b { color: #04123a; }
}

/* ======================================================================
   Round 9 (2 Nov 2026): Top sellers panel on slide 1 (Printiva is off the site), 3@1 Gifts tiles, pay choice at checkout,
   confirmation panels for the quote flows. No new colour, no new font: the glass recipe, tokens and radii of the earlier rounds.
   ====================================================================== */

/* Top sellers: glass panel, sits in the slide-1 stage where the mascot was (centred on the arc rings). Names left, prices right, 44 px rows. */
.tm-top {
  --g-fill: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)), rgba(0,31,84,.58);
  position: relative; z-index: 2; box-sizing: border-box; width: min(100%, 320px); margin: 0; padding: .9rem .9rem .6rem; text-align: left; color: #fff;
  background: var(--g-fill); border: 1px solid rgba(255,255,255,.3); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 10px 22px -14px rgba(0,10,32,.8);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tm-top { background: #0b3a82; } }
.tm-top__h { margin: 0 0 .25rem; padding: 0 .35rem; text-align: left; font-family: var(--font-m); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9fd9ff; }
/* Round 12 (2 Nov 2026): the Top sellers panel shows the four top sellers as product images (shop photos on blue), names only, no prices.
   2 x 2 rounded tiles under the heading, the name over a navy fade at the foot of each tile. Same glass panel, same tokens. */
.tm-top__list { list-style: none; margin: 0; padding: 0; }
.tm-top__list li { margin: 0; padding: 0; }
.tm-top__list--img { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: .4rem; }
.tm-top__list--img a {
  position: relative; display: block; box-sizing: border-box; min-height: 44px; aspect-ratio: 10 / 9; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.3); background: #0b3a82; color: #fff; text-decoration: none;
  box-shadow: 0 6px 14px -10px rgba(0,10,32,.9);
}
.tm-top__list--img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.tm-top__list--img a > span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .55rem .4rem; font-size: .875rem; font-weight: 700; line-height: 1.15; text-align: left;
  background: linear-gradient(0deg, rgba(0,31,84,.94) 0%, rgba(0,31,84,.7) 55%, rgba(0,31,84,0) 100%);
}
.tm-top__list--img a:hover { border-color: rgba(255,255,255,.65); }
.tm-top__list--img a:hover > span { color: var(--yellow); }
.tm-top__list--img a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #003179; }
@media (max-width: 900px) {
  .hslide--stage .tm-top { width: min(100%, 340px); padding: .6rem .6rem .6rem; }
  .hslide--stage .tm-top__h { margin: 0 0 .1rem; }
  .tm-top__list--img { gap: 6px; margin-top: .3rem; }
  .tm-top__list--img a { aspect-ratio: 17 / 10; border-radius: 10px; }
  /* store.css sizes every .hslide__art img on phones with !important (width and height auto); the tiles need their own box */
  .hslide .hslide__art .tm-top__list--img img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0; object-fit: cover; }
  .tm-top__list--img a > span { padding: 1rem .45rem .3rem; font-size: .8125rem; }
}

/* the 3@1 Gifts tiles are product cards that open another shop; the card look is unchanged */
.tm-card--gifts .tm-card__price { font-weight: 600; color: var(--tm-grey); }

/* checkout: how you will pay. Real radios in the same glass chips as the notice choice; three across at 1440, stacked at 390, all 44 px or more */
.co-pays { width: 100%; }
.co-pays .co-chip { flex: 1 1 11.5rem; min-width: 0; text-align: center; line-height: 1.2; padding: .45rem .8rem; }
.co-chip[hidden] { display: none; }
@media (max-width: 520px) { .co-pays .co-chip { flex-basis: 100%; justify-content: flex-start; } }

/* confirmation panels: quote.html and the Courier widget. Quote requests end here, never in the basket. */
.tm-done { max-width: 640px; margin: 1.5rem auto 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1rem; text-align: center; padding: 2.2rem 1.6rem; }
.tm-done__ico { width: 56px; height: 56px; color: var(--navy); fill: none; stroke: currentColor; }
.tm-done__h { margin: 0; }
.tm-done__ref { margin: 0; color: var(--tm-grey); font-size: 1rem; }
.tm-done__ref b { color: var(--navy); font-family: var(--font-m); letter-spacing: .06em; }
.tm-done__p { margin: 0; color: var(--navy); font-weight: 600; font-size: 1.05rem; line-height: 1.5; }
.tm-done__fine { margin: 0; }
.tm-done .tm-notice { margin: 0; text-align: left; }
@media (max-width: 780px) { .tm-done { padding: 1.6rem 1.1rem; } .tm-done .btn { width: 100%; min-height: 56px; justify-content: center; } }

.cq .qz__done { display: grid; justify-items: start; gap: .8rem; padding: .4rem 0 .2rem; color: #fff; }
.cq .qz__doneh { margin: 0; display: flex; align-items: center; gap: .5rem; font-family: var(--font-d); text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; color: #fff; }
.cq .qz__doneh svg { width: 26px; height: 26px; color: #35d07f; flex: none; }
.cq .qz__doneh:focus { outline: none; }
.cq .qz__ref { margin: 0; font-size: .9375rem; color: rgba(255,255,255,.85); }
.cq .qz__ref b { color: var(--yellow); font-family: var(--font-m); letter-spacing: .06em; }
.cq .qz__donep { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.45; color: #fff; }
.cq .qz__donenote { margin: .2rem 0 0; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border-radius: 12px; background: color-mix(in srgb, var(--yellow) 24%, #fff); color: var(--navy); font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.cq .qz__donenote .ico { flex: none; width: 20px; height: 20px; }

/* ======================================================================
   Round 13 (2 Nov 2026): the six fleet service pages (body.tm-service, built by build_services.py).
   The fleet's own body is white; body.shop sets the page ink to dark navy, so every dark ground on a service page restores white
   (hero, deep and ember sections), exactly as body.shop .shero does above. Light sections keep the shop ink.
   ====================================================================== */
body.tm-service .page-hero,
body.tm-service .ssec--deep,
body.tm-service .ssec--ember { color: #fff; }
body.tm-service .tm-help { text-align: center; }
body.tm-service .tm-help .ssec__intro { margin-inline: auto; }
body.tm-service .tm-help .btn { margin-top: .6rem; }
/* the fleet's pbar keeps a 3rem gap above it that shows the dark body ground; on the shop that ground is blue, so on a service page the
   closing band runs straight into the colour bar and the footer */
body.tm-service .pbar { margin-top: 0; }
body.tm-service .tm-help .hud-label { justify-content: center; }

/* Round 14 (2 Nov 2026): scroll cue on the service pages' table wrappers (the DHL box-size table on domestic-courier.html is 425 px wide in a 315 px box at 390,
   so the Max weight column was clipped with no hint). Phones only. The wrapper gets its own solid brand-blue ground (the section ground behind it is a gradient, so
   the cover colour must be opaque and known); two covers scroll with the content (background-attachment: local) and hide the edge glows, which stay fixed
   (background-attachment: scroll). Result: a cyan glow on the right edge while there is more to the right, on the left edge once it has been scrolled, gone at the ends. */
@media (max-width: 600px) {
  body.tm-service :is(.dhlbox__scroll, div:has(> table)) {
    --tm-scroll-bg: #04214f;
    background-color: var(--tm-scroll-bg);
    background-image:
      linear-gradient(to right, var(--tm-scroll-bg) 35%, rgba(4,33,79,0)),
      linear-gradient(to left, var(--tm-scroll-bg) 35%, rgba(4,33,79,0)),
      linear-gradient(to right, rgba(0,174,239,.55), rgba(0,174,239,0)),
      linear-gradient(to left, rgba(0,174,239,.55), rgba(0,174,239,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 44px 100%, 44px 100%, 28px 100%, 28px 100%;
    background-attachment: local, local, scroll, scroll;
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
  }
}

/* Round 14 (2 Nov 2026): the Top sellers grid becomes ONE composed pack shot (a table display of the four top sellers), no words.
   Same glass panel and slot; the heading stays for screen readers only. Desktop tile 10 / 9, phones 17 / 10, the picture is cropped to fit. */
.tm-top--pack { padding: .5rem; }
.tm-top__h--sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tm-top__pack { position: relative; display: block; box-sizing: border-box; aspect-ratio: 10 / 9; overflow: hidden; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: #0b3a82; box-shadow: 0 6px 14px -10px rgba(0,10,32,.9); }
.tm-top__pack img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.tm-top__pack:hover { border-color: rgba(255,255,255,.65); }
.tm-top__pack:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #003179; }
@media (max-width: 900px) {
  .hslide--stage .tm-top--pack { padding: .4rem; }
  .tm-top__pack { aspect-ratio: 17 / 10; border-radius: 10px; }
  .hslide .hslide__art .tm-top__pack img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; margin: 0; object-fit: cover; }
}

/* Round 15 (2 Nov 2026): the pack shot is a cut-out like slides 2 to 4: no glass plate, no frame, the slider's drop-shadow behind the products. */
.tm-top--cut { padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tm-top--cut .tm-top__pack { aspect-ratio: auto; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.tm-top--cut .tm-top__pack img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 24px 42px rgba(0,0,0,.5)); }
.tm-top--cut .tm-top__pack:hover { border: 0; }
.tm-top--cut .tm-top__pack:focus-visible { outline: 3px solid #fff; outline-offset: 6px; box-shadow: none; }
@media (max-width: 900px) {
  .hslide--stage .tm-top--cut { padding: 0; }
  .tm-top--cut .tm-top__pack { aspect-ratio: auto; border-radius: 0; }
  .hslide .hslide__art .tm-top--cut .tm-top__pack img { width: auto !important; height: 100% !important; max-height: 190px !important; max-width: 100% !important; margin: 0 auto; object-fit: contain; }
}
/* r15b: look found the shadow near-invisible on the navy ground and the art small; slightly larger, shadow with a darker contact layer */
.tm-top--cut { width: min(100%, 360px); }
.tm-top--cut .tm-top__pack img { filter: drop-shadow(0 6px 10px rgba(0,8,30,.55)) drop-shadow(0 24px 38px rgba(0,8,30,.55)); }
@media (max-width: 900px) {
  .hslide--stage .tm-top--cut { width: min(100%, 340px); }
  .hslide .hslide__art .tm-top--cut .tm-top__pack img { max-height: 214px !important; }
}