/* ============================================================================
   OLD ROW x CARDINAL HARDWARE — storefront styles

   Built on the site's own tokens (--bg, --bg-2, --paper, --red,
   --stroke-strong) so the shop reads as part of Cardinal, with Old Row's real
   brand colours layered in as the co-brand:
       Old Row navy  #27346b   |  red #e92729  |  bone #fbf9fa
   (all three sampled from Old Row's own wordmark).

   Old Row's display face is Bebas Neue. It is used ONLY on Old Row elements —
   collection names, the co-brand lockup, the drop band, product tags — so the
   two brands stay legible as two brands where they sit side by side.

   Everything is namespaced .or-* so nothing here leaks into the shared sheet.
   ========================================================================= */
:root{
  --or-navy:#27346b;
  --or-navy-lift:#33447f;
  --or-red:#e92729;
  --or-bone:#fbf9fa;
  --or-display:'Bebas Neue','Recursive',system-ui,sans-serif;
  --or-green:#4ec46b;
  --or-amber:#e0a32a;
}

/* ---------- CO-BRAND LOCKUP ---------- */
.or-lockup{display:inline-flex;align-items:center;gap:clamp(14px,2.4vw,26px);
  padding:clamp(12px,1.6vw,17px) clamp(16px,2.2vw,24px);
  border:2px solid var(--stroke-strong);background:var(--ink);max-width:100%;flex-wrap:wrap}
.or-lockup__cardinal{display:flex;align-items:center;gap:11px;flex-shrink:0}
.or-lockup__cardinal img{width:clamp(38px,5vw,48px);height:auto;border:1px solid rgba(244,239,230,.25)}
.or-lockup__cardinal span{font-family:var(--display);font-weight:900;font-size:clamp(.82rem,1.5vw,.98rem);
  line-height:1.08;letter-spacing:-.01em;color:var(--paper);max-width:8ch}
.or-lockup__x{font-family:var(--or-display);font-size:clamp(1.5rem,3vw,2rem);line-height:1;color:var(--or-red);flex-shrink:0}
.or-lockup__or{height:clamp(34px,5.4vw,50px);width:auto;flex-shrink:0}

/* ---------- COMPACT HERO ----------
   The page has one job: get product on screen. So the hero is a band, not a
   full pagehead — lockup, headline, the pickup promise, and the grid starts
   immediately underneath. The stat strip that used to live here was removed
   for the same reason. */
.or-hero{position:relative;overflow:hidden;background:var(--bg-2);border-bottom:2px solid var(--stroke-strong)}
/* Old Row is navy + red on bone. On a near-black page the navy has to be lifted
   into the backdrop rather than used as a flat wash, or it reads muddy. */
.or-hero__bg{position:absolute;inset:0;
  background:
    radial-gradient(70% 120% at 10% 30%, rgba(39,52,107,.62), transparent 64%),
    radial-gradient(55% 110% at 94% 74%, rgba(233,39,41,.26), transparent 66%),
    linear-gradient(180deg,#14182c 0%,#0f0f10 82%)}
.or-hero__stripes{position:absolute;inset:0;opacity:.30;
  background-image:repeating-linear-gradient(135deg,rgba(251,249,250,.055) 0 2px,transparent 2px 11px)}
.or-hero__wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(22px,4vw,54px);flex-wrap:wrap;padding-block:clamp(26px,3.6vw,44px)}
.or-hero__copy{flex:1 1 440px;min-width:0}
.or-hero h1{margin:16px 0 0;font-size:clamp(2rem,5.4vw,3.4rem);line-height:.96}
.or-hero .lede{margin:12px 0 0;max-width:46ch;font-size:clamp(.96rem,1.5vw,1.08rem);line-height:1.55;color:var(--paper-2)}
.or-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* the three-step pickup promise, as a compact rail beside the headline */
.or-promise{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:0 1 296px}
@media(max-width:900px){.or-promise{grid-template-columns:repeat(3,1fr);flex-basis:100%}}
@media(max-width:560px){.or-promise{grid-template-columns:1fr}}
.or-promise li{display:flex;align-items:center;gap:12px;padding:11px 15px;
  border:2px solid var(--stroke-strong);background:rgba(10,10,10,.62)}
.or-promise b{font-family:var(--or-display);font-size:1.15rem;line-height:1;color:var(--or-red);flex-shrink:0}
.or-promise span{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;line-height:1.4;color:var(--paper)}

/* ---------- OLD ROW BAND ---------- */
.or-band{position:relative;overflow:hidden;background:var(--or-navy);
  border-top:2px solid var(--stroke-strong);border-bottom:2px solid var(--stroke-strong)}
.or-band::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(251,249,250,.07) 0 3px,transparent 3px 14px)}
.or-band__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,3.4vw,40px);flex-wrap:wrap;padding:clamp(18px,2.6vw,26px) var(--pad-x);text-align:center}
.or-band__line{font-family:var(--or-display);font-size:clamp(1.15rem,2.9vw,1.85rem);line-height:1;
  letter-spacing:.035em;color:var(--or-bone)}
.or-band__line em{font-style:normal;color:#ffd0d1}
.or-band__dot{width:9px;height:9px;background:var(--or-red);transform:rotate(45deg);flex-shrink:0}
@media(max-width:700px){.or-band__dot{display:none}}

/* ---------- HOW IT WORKS ---------- */
.or-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.or-steps{grid-template-columns:1fr}}
.or-step{position:relative;padding:24px 22px 26px;border:2px solid var(--stroke-strong);background:var(--bg-2)}
.or-step__n{display:block;font-family:var(--or-display);font-size:2.5rem;line-height:.9;letter-spacing:.04em;color:var(--or-red)}
.or-step h3{margin:12px 0 0;font-size:1.22rem;line-height:1.1}
.or-step p{margin:10px 0 0;font-size:.94rem;line-height:1.62;color:var(--paper-2)}

/* ---------- COLLECTION RAIL ---------- */
.or-rail{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:8px}
@media(max-width:900px){.or-rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.or-rail{grid-template-columns:1fr}}
.or-railcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:168px;
  padding:18px;text-align:left;border:2px solid var(--stroke-strong);background:var(--bg-2);cursor:pointer;
  overflow:hidden;transition:transform .14s ease,box-shadow .14s ease}
.or-railcard::before{content:"";position:absolute;inset:0;opacity:.92;
  background:linear-gradient(160deg,var(--rc,#27346b) 0%,rgba(10,10,10,.92) 82%)}
.or-railcard::after{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(251,249,250,.06) 0 2px,transparent 2px 10px)}
.or-railcard:hover,.or-railcard:focus-visible{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--or-red)}
.or-railcard:focus-visible{outline:3px solid #ff5a66;outline-offset:3px}
.or-railcard[aria-pressed="true"]{box-shadow:4px 4px 0 var(--or-red);border-color:var(--or-red)}
.or-railcard>*{position:relative;z-index:2}
.or-railcard__name{font-family:var(--or-display);font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:.98;
  letter-spacing:.03em;color:var(--or-bone)}
.or-railcard__n{margin-top:7px;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(251,249,250,.68)}

/* ---------- CONTROLS ---------- */
.or-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:0 0 20px}
.or-field{display:flex;flex-direction:column;gap:7px}
.or-field__lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.or-input,.or-select{font-family:var(--mono);font-size:.82rem;color:var(--paper);background:var(--bg-2);
  border:2px solid var(--stroke-strong);padding:11px 13px;min-height:44px;transition:box-shadow .12s linear}
.or-input{min-width:280px}
.or-input::placeholder{color:var(--muted)}
.or-input:focus,.or-select:focus{outline:none;box-shadow:4px 4px 0 var(--red)}
.or-input:focus-visible,.or-select:focus-visible{outline:3px solid #ff5a66;outline-offset:2px}
.or-select{cursor:pointer}
.or-select option{background:var(--bg-2);color:var(--paper)}
@media(max-width:600px){.or-input{min-width:0;width:100%}.or-field{flex:1 1 100%}}

.or-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.or-filter{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:11px 15px;
  background:transparent;color:var(--paper-2);border:2px solid var(--stroke-strong);cursor:pointer;min-height:44px;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease}
.or-filter:hover{color:var(--paper);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--red)}
.or-filter:focus-visible{outline:3px solid #ff5a66;outline-offset:3px}
.or-filter[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.or-filter--or[aria-pressed="true"]{background:var(--or-navy);border-color:var(--or-navy);color:var(--or-bone)}
.or-filter__n{opacity:.62;margin-left:7px;font-size:.92em}

.or-count{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}
.or-count b{color:var(--paper)}

/* ---------- PRODUCT GRID ---------- */
.or-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1200px){.or-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:880px){.or-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.or-grid{grid-template-columns:1fr}}

.or-card{display:flex;flex-direction:column;background:var(--bg-2);border:2px solid var(--stroke-strong);
  transition:transform .14s ease,box-shadow .14s ease}
.or-card:hover,.or-card:focus-within{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--red)}
.or-card--out{opacity:.62}
.or-card__media{position:relative;display:block;width:100%;padding:0;border:0;background:var(--or-bone);
  aspect-ratio:1/1;overflow:hidden;cursor:pointer}
.or-card__media img{width:100%;height:100%;object-fit:contain;display:block}
.or-card__media svg{position:absolute;inset:7%;width:86%;height:86%}
.or-card__media:focus-visible{outline:3px solid #ff5a66;outline-offset:-3px}
.or-card__mediawrap{position:relative;border-bottom:2px solid var(--stroke-strong)}
/* Old Row tag on every tile — the co-brand has to be unmissable */
.or-tag{position:absolute;top:0;left:0;z-index:3;display:flex;align-items:center;gap:6px;padding:5px 10px 4px;
  background:var(--or-navy);color:var(--or-bone);font-family:var(--or-display);font-size:.82rem;
  letter-spacing:.09em;line-height:1.25;border-right:2px solid var(--stroke-strong);border-bottom:2px solid var(--stroke-strong)}
.or-tag i{width:6px;height:6px;background:var(--or-red);transform:rotate(45deg);flex-shrink:0}
.or-card__flag{position:absolute;top:0;right:0;z-index:3;font-family:var(--mono);font-size:.56rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;background:var(--red);color:#fff;
  border-left:2px solid var(--stroke-strong);border-bottom:2px solid var(--stroke-strong)}
.or-card__flag--out{background:var(--ink);color:var(--muted)}
.or-card__flag--low{background:#c9861f;color:#0a0a0a}

.or-card__body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1;gap:9px}
.or-card__coll{font-family:var(--or-display);font-size:.88rem;letter-spacing:.11em;line-height:1;color:#7f92d6}
.or-card__name{font-family:var(--display);font-weight:800;font-size:1.02rem;line-height:1.14;letter-spacing:-.015em;
  color:var(--paper);text-align:left;background:none;border:0;padding:0;cursor:pointer}
.or-card__name:hover{color:#ff8a92}
.or-card__name:focus-visible{outline:3px solid #ff5a66;outline-offset:2px}
.or-card__color{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper-2)}
.or-swatch{width:14px;height:14px;border:1px solid rgba(244,239,230,.55);flex-shrink:0}

/* size picker — the add-to-bag control lives on the tile */
.or-sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.or-size{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.06em;min-width:38px;min-height:34px;
  padding:6px 8px;border:2px solid var(--stroke);color:var(--paper-2);background:rgba(10,10,10,.5);cursor:pointer;
  transition:border-color .12s linear,color .12s linear,background .12s linear}
.or-size:hover:not(:disabled){border-color:var(--paper);color:var(--paper)}
.or-size:focus-visible{outline:3px solid #ff5a66;outline-offset:2px}
.or-size[aria-pressed="true"]{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.or-size:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.or-size__n{display:block;font-size:.52rem;font-weight:500;letter-spacing:.06em;opacity:.7;margin-top:1px}

.or-card__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--stroke);display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap}
.or-price{font-family:var(--display);font-weight:900;font-size:1.3rem;letter-spacing:-.02em;color:var(--paper);
  font-variant-numeric:tabular-nums}
.or-add{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 16px;min-height:42px;background:var(--red);border:2px solid var(--red);color:#fff;cursor:pointer;
  transition:background .12s linear,border-color .12s linear}
.or-add:hover:not(:disabled){background:var(--red-deep);border-color:var(--red-deep)}
.or-add:focus-visible{outline:3px solid #ff5a66;outline-offset:2px}
.or-add:disabled{background:transparent;border-color:var(--stroke);color:var(--muted);cursor:not-allowed}
.or-add.is-added{background:var(--or-green);border-color:var(--or-green);color:#0a0a0a}

.or-card__sku{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--muted)}
.or-card__staff{display:none;gap:14px;flex-wrap:wrap;margin-top:10px;padding-top:10px;border-top:1px dashed var(--stroke)}
body.staff .or-card__staff{display:flex}
.or-kv{font-family:var(--mono);font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.or-kv b{display:block;margin-top:3px;font-size:.84rem;letter-spacing:0;text-transform:none;color:var(--paper);
  font-variant-numeric:tabular-nums}
.or-kv b.pos{color:var(--or-green)}

.or-empty{grid-column:1/-1;padding:56px 20px;text-align:center;border:2px dashed var(--stroke);
  font-family:var(--mono);font-size:.82rem;line-height:1.8;color:var(--muted)}

/* ---------- PICKUP BLOCK ---------- */
.or-pickup{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:900px){.or-pickup{grid-template-columns:1fr}}
.or-facts{list-style:none;margin:0;padding:0;border:2px solid var(--stroke-strong);background:var(--bg-2)}
.or-facts li{padding:16px 18px;border-bottom:2px solid var(--stroke-strong)}
.or-facts li:last-child{border-bottom:0}
.or-facts b{display:block;font-family:var(--or-display);font-size:1.15rem;letter-spacing:.06em;color:var(--paper)}
.or-facts span{display:block;margin-top:4px;font-family:var(--mono);font-size:.72rem;line-height:1.6;color:var(--paper-2)}

/* ---------- STAFF ---------- */
.or-toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;flex-shrink:0}
.or-toggle input{position:absolute;opacity:0;width:0;height:0}
.or-toggle__track{width:56px;height:30px;border:2px solid var(--stroke-strong);background:var(--ink);position:relative;
  transition:background .14s linear,border-color .14s linear;flex-shrink:0}
.or-toggle__knob{position:absolute;top:2px;left:2px;width:22px;height:22px;background:var(--paper);
  transition:transform .16s cubic-bezier(.2,.7,.3,1)}
.or-toggle input:checked + .or-toggle__track{background:var(--red);border-color:var(--red)}
.or-toggle input:checked + .or-toggle__track .or-toggle__knob{transform:translateX(26px);background:#fff}
.or-toggle input:focus-visible + .or-toggle__track{outline:3px solid #ff5a66;outline-offset:3px}
.or-toggle__lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);white-space:nowrap}

.or-staffpanel[hidden]{display:none}
.or-staffpanel{display:grid;gap:22px}
.or-panel{border:2px solid var(--stroke-strong);background:var(--bg-2);padding:22px}
.or-panel__h{margin:0;font-size:1.22rem}
.or-panel__p{margin:9px 0 18px;font-family:var(--mono);font-size:.76rem;line-height:1.7;color:var(--paper-2);max-width:72ch}
.or-lookup{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.or-lookup__row{display:flex;gap:10px;flex-wrap:wrap}
.or-lookup__row .or-input{flex:1 1 220px}

.or-order{border:2px solid var(--stroke);background:var(--ink);padding:16px 18px;margin-bottom:12px}
.or-order--done{opacity:.6}
.or-order__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.or-order__id{font-family:var(--or-display);font-size:1.3rem;letter-spacing:.07em;color:var(--paper)}
.or-order__st{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;border:2px solid var(--or-amber);color:var(--or-amber)}
.or-order__st--done{border-color:var(--or-green);color:var(--or-green)}
.or-order__who{margin:9px 0 0;font-family:var(--mono);font-size:.74rem;line-height:1.7;color:var(--paper-2)}
.or-order__items{list-style:none;margin:13px 0 0;padding:13px 0 0;border-top:1px solid var(--stroke)}
.or-order__items li{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:.74rem;
  color:var(--paper-2);padding:4px 0}
.or-order__items b{color:var(--paper);font-variant-numeric:tabular-nums}
.or-order__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:13px;padding-top:13px;border-top:1px solid var(--stroke)}
.or-order__tot{font-family:var(--display);font-weight:900;font-size:1.2rem;color:var(--paper);font-variant-numeric:tabular-nums}

/* ---------- INVENTORY TABLE ---------- */
.or-tablewrap{overflow:auto;border:2px solid var(--stroke-strong);max-height:520px}
.or-table{width:100%;min-width:900px;border-collapse:collapse;font-family:var(--mono);font-size:.74rem}
.or-table th,.or-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--stroke);white-space:nowrap}
.or-table th{background:var(--ink);color:var(--paper-2);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  position:sticky;top:0;z-index:2}
.or-table td{color:var(--paper-2);font-variant-numeric:tabular-nums}
.or-table td.nm{color:var(--paper);font-weight:600;white-space:normal;min-width:220px}
.or-table td.sold{color:var(--or-amber)}
.or-table tbody tr:hover{background:var(--bg-3)}
.or-table tbody tr.is-out td{opacity:.5}
.or-table tfoot td{background:var(--ink);color:var(--paper);font-weight:700;border-bottom:0;
  border-top:2px solid var(--stroke-strong);position:sticky;bottom:0}

/* ---------- PRODUCT MODAL ---------- */
.or-modal[hidden]{display:none}
.or-modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px}
.or-modal__scrim{position:absolute;inset:0;background:rgba(6,6,6,.88);backdrop-filter:blur(3px)}
.or-modal__panel{position:relative;z-index:2;width:min(940px,100%);max-height:88vh;overflow:auto;
  overscroll-behavior:contain;background:var(--bg-2);border:2px solid var(--stroke-strong);
  box-shadow:10px 10px 0 var(--or-red)}
.or-modal--checkout .or-modal__panel{width:min(620px,100%)}
.or-modal__close{position:sticky;top:0;float:right;z-index:4;margin:0;width:50px;height:50px;background:var(--ink);
  color:var(--paper);border-left:2px solid var(--stroke-strong);border-bottom:2px solid var(--stroke-strong);
  font-size:1.3rem;line-height:1}
.or-modal__close:hover{background:var(--red);color:#fff}
.or-modal__close:focus-visible{outline:3px solid #ff5a66;outline-offset:-3px}
.or-modal__grid{display:grid;grid-template-columns:340px 1fr;gap:0}
@media(max-width:780px){.or-modal__grid{grid-template-columns:1fr}}
.or-modal__media{position:relative;background:var(--or-bone);border-right:2px solid var(--stroke-strong);
  display:grid;place-items:center;aspect-ratio:1/1}
@media(max-width:780px){.or-modal__media{border-right:0;border-bottom:2px solid var(--stroke-strong);aspect-ratio:4/3}}
.or-modal__media img{width:100%;height:100%;object-fit:contain}
.or-modal__media svg{width:86%;height:86%}
.or-modal__body{padding:26px 26px 30px}
.or-modal__coll{font-family:var(--or-display);font-size:1.05rem;letter-spacing:.11em;line-height:1;color:#7f92d6}
.or-modal__body h3{margin:10px 0 0;font-size:clamp(1.3rem,3vw,1.85rem);line-height:1.06}
.or-modal__meta{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:13px}
.or-modal__price{margin:18px 0 0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.or-modal__price .or-price{font-size:2rem}
.or-msrp{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.or-modal__pick{margin-top:22px}
.or-modal__pick .or-field__lbl{display:block;margin-bottom:9px}
.or-modal__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.or-modal__actions .or-add{flex:1 1 200px}
.or-modal__note{margin-top:20px;padding:13px 15px;border-left:3px solid var(--or-red);background:rgba(10,10,10,.55);
  font-family:var(--mono);font-size:.72rem;line-height:1.7;color:var(--paper-2)}
.or-modal__note a{color:#ff5a66}

.or-sizetable{width:100%;border-collapse:collapse;margin-top:18px;font-family:var(--mono);font-size:.76rem}
.or-sizetable caption{text-align:left;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-bottom:9px}
.or-sizetable th,.or-sizetable td{border:1px solid var(--stroke);padding:8px 10px;text-align:left}
.or-sizetable th{background:var(--ink);color:var(--paper-2);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase}
.or-sizetable td{color:var(--paper-2);font-variant-numeric:tabular-nums}
.or-staffonly{display:none}
body.staff .or-staffonly{display:table-cell}
body.staff tr.or-staffonly{display:table-row}

/* ---------- CART ---------- */
.or-cartbtn{position:fixed;right:20px;bottom:20px;z-index:1100;display:inline-flex;align-items:center;gap:10px;
  padding:15px 20px;background:var(--red);color:#fff;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;min-height:52px}
.or-cartbtn:hover{background:var(--red-deep)}
.or-cartbtn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.or-cartbtn__n{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 6px;background:#fff;
  color:var(--red);font-size:.78rem;font-variant-numeric:tabular-nums}
.or-cartbtn.pop{animation:orpop .34s cubic-bezier(.2,.8,.3,1)}
@keyframes orpop{0%{transform:scale(1)}40%{transform:scale(1.10)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.or-cartbtn.pop{animation:none}}
@media(max-width:560px){.or-cartbtn{right:12px;bottom:12px;padding:13px 16px}}

.or-drawer[hidden]{display:none}
.or-drawer{position:fixed;inset:0;z-index:1300}
.or-drawer__scrim{position:absolute;inset:0;background:rgba(6,6,6,.84)}
.or-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(470px,100%);background:var(--bg-2);
  border-left:2px solid var(--stroke-strong);display:flex;flex-direction:column}
.or-drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;
  border-bottom:2px solid var(--stroke-strong);background:var(--ink)}
.or-drawer__head h3{margin:0;font-size:1.12rem}
.or-drawer__head p{margin:5px 0 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.or-drawer__close{width:42px;height:42px;border:2px solid var(--stroke-strong);color:var(--paper);font-size:1.2rem;
  line-height:1;flex-shrink:0}
.or-drawer__close:hover{background:var(--red);border-color:var(--red);color:#fff}
.or-drawer__close:focus-visible{outline:3px solid #ff5a66;outline-offset:2px}
.or-drawer__list{flex:1;overflow:auto;overscroll-behavior:contain;padding:14px 20px}
.or-line{display:grid;grid-template-columns:56px 1fr auto;gap:4px 12px;padding:13px 0;border-bottom:1px solid var(--stroke)}
.or-line__thumb{grid-row:1/3;width:56px;height:56px;background:var(--or-bone);border:1px solid var(--stroke);overflow:hidden}
.or-line__thumb img,.or-line__thumb svg{width:100%;height:100%;object-fit:contain;display:block}
.or-line__name{font-family:var(--display);font-weight:700;font-size:.92rem;line-height:1.2;color:var(--paper)}
.or-line__meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--muted);margin-top:4px}
.or-line__amt{font-family:var(--mono);font-size:.92rem;font-weight:700;color:var(--paper);
  font-variant-numeric:tabular-nums;text-align:right}
.or-line__qty{grid-column:2/4;display:flex;align-items:center;gap:6px;margin-top:8px}
.or-qbtn{width:30px;height:30px;border:2px solid var(--stroke-strong);color:var(--paper);font-size:1rem;line-height:1;
  display:grid;place-items:center}
.or-qbtn:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.or-qbtn:focus-visible{outline:3px solid #ff5a66;outline-offset:2px}
.or-qbtn:disabled{opacity:.3;cursor:not-allowed}
.or-qnum{font-family:var(--mono);font-size:.82rem;font-weight:700;min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
.or-line__rm{margin-left:auto;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:underline}
.or-line__rm:hover{color:#ff5a66}
.or-drawer__empty{padding:44px 8px;text-align:center;font-family:var(--mono);font-size:.76rem;line-height:1.8;color:var(--muted)}
.or-drawer__foot{border-top:2px solid var(--stroke-strong);padding:18px 20px;background:var(--ink)}
.or-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-2);padding:4px 0}
.or-total b{font-family:var(--display);font-size:1.1rem;letter-spacing:-.01em;color:var(--paper);font-variant-numeric:tabular-nums}
.or-total--grand{border-top:1px solid var(--stroke);margin-top:8px;padding-top:12px}
.or-total--grand b{font-size:1.7rem}
.or-total--staff{display:none}
body.staff .or-total--staff{display:flex}
.or-total--staff b{color:var(--or-green)}
.or-drawer__actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.or-drawer__actions .btn{flex:1 1 auto}
.or-drawer__note{margin:14px 0 0;font-family:var(--mono);font-size:.64rem;line-height:1.7;color:var(--muted)}

/* ---------- CHECKOUT ---------- */
.or-co__body{padding:26px 26px 30px}
.or-co__step{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#ff5a66}
.or-co__body h3{margin:10px 0 0;font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.08}
.or-co__body>p{margin:11px 0 0;font-size:.92rem;line-height:1.62;color:var(--paper-2);max-width:56ch}
.or-form{display:grid;gap:14px;margin-top:22px}
.or-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.or-form__row{grid-template-columns:1fr}}
.or-form label{display:flex;flex-direction:column;gap:7px}
.or-form .or-input{min-width:0;width:100%}
.or-form .or-input[aria-invalid="true"]{border-color:var(--red);box-shadow:4px 4px 0 var(--red)}
.or-err{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:#ff8a92;min-height:1em}

.or-pay{border:2px dashed var(--stroke-strong);background:rgba(10,10,10,.5);padding:18px;margin-top:6px}
.or-pay__h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.or-pay__h b{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
.or-pay__badge{font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 10px;background:var(--or-amber);color:#0a0a0a}
.or-pay__fake{margin-top:14px;display:grid;gap:9px}
.or-pay__bar{height:42px;border:2px solid var(--stroke);background:var(--bg-2);display:flex;align-items:center;
  padding:0 13px;font-family:var(--mono);font-size:.76rem;color:var(--muted);letter-spacing:.06em}
.or-pay__split{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.or-pay__p{margin:14px 0 0;font-family:var(--mono);font-size:.68rem;line-height:1.7;color:var(--paper-2)}

.or-co__sum{border:2px solid var(--stroke-strong);background:var(--ink);padding:16px 18px;margin-top:22px}
.or-co__sum .or-total{padding:3px 0}
.or-co__actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.or-co__actions .btn{flex:1 1 auto}

/* confirmation */
.or-done{text-align:center;padding:8px 0 0}
.or-done__tick{width:64px;height:64px;margin:0 auto;display:grid;place-items:center;background:var(--or-green);color:#0a0a0a}
.or-done__tick svg{width:34px;height:34px}
.or-done h3{margin:20px 0 0}
.or-done__id{margin:16px auto 0;display:inline-block;padding:11px 20px;border:2px solid var(--stroke-strong);
  background:var(--ink);font-family:var(--or-display);font-size:1.9rem;letter-spacing:.09em;color:var(--paper)}
.or-done__p{margin:16px auto 0;font-size:.94rem;line-height:1.65;color:var(--paper-2);max-width:48ch}
.or-done__p b{color:var(--paper)}

/* the emailed receipt, shown exactly as the customer receives it */
.or-receipt{margin-top:24px;border:2px solid var(--stroke-strong);background:#ffffff;color:#1a1a1a;text-align:left}
.or-receipt__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;
  background:var(--ink);color:var(--muted);font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase}
.or-receipt__in{padding:22px}
.or-receipt__head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:2px solid #1a1a1a}
.or-receipt__head img{width:40px;height:40px}
.or-receipt__head .rl{font-family:var(--display);font-weight:900;font-size:.98rem;line-height:1.08;color:#1a1a1a}
.or-receipt__head .rr{margin-left:auto;text-align:right;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:#666}
.or-receipt h4{margin:18px 0 0;font-family:var(--display);font-weight:900;font-size:1.22rem;color:#1a1a1a}
.or-receipt__num{margin:8px 0 0;font-family:var(--or-display);font-size:1.5rem;letter-spacing:.08em;color:#c8242c}
.or-receipt__p{margin:12px 0 0;font-family:var(--sans);font-size:.82rem;line-height:1.62;color:#333}
.or-receipt table{width:100%;border-collapse:collapse;margin-top:16px;font-family:var(--mono);font-size:.74rem}
.or-receipt th,.or-receipt td{padding:8px 0;text-align:left;border-bottom:1px solid #ddd;color:#333}
.or-receipt th{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#777}
.or-receipt td.r,.or-receipt th.r{text-align:right;font-variant-numeric:tabular-nums}
.or-receipt tfoot td{border-bottom:0;padding-top:10px;font-weight:700;color:#1a1a1a}
.or-receipt tfoot tr.g td{font-family:var(--display);font-size:1.05rem;border-top:2px solid #1a1a1a}
.or-receipt__box{margin-top:18px;padding:14px;background:#f4efe6;border-left:4px solid #c8242c}
.or-receipt__box b{display:block;font-family:var(--display);font-weight:900;font-size:.96rem;color:#1a1a1a}
.or-receipt__box span{display:block;margin-top:6px;font-family:var(--sans);font-size:.78rem;line-height:1.6;color:#444}
.or-receipt__foot{margin-top:18px;padding-top:14px;border-top:1px solid #ddd;font-family:var(--mono);font-size:.62rem;
  line-height:1.7;color:#777}

/* ---------- PRINT: receipt only ---------- */
@media print{
  /* ONE PAGE unless the order genuinely needs two.
     
     The bug this replaces: these rules used to say .or-modal{display:block}
     — every modal, not the checkout one. #or-modal is the PRODUCT modal, and
     setting display on it overrode its `hidden` attribute and resurrected
     586px of product photography above the receipt. The receipt then started
     594px down a 979px page and was sliced in half by the page break. One
     item, two pages, and the second one mostly blank.

     Hence the first rule: nothing carrying [hidden] may be un-hidden by
     anything below, and only the checkout modal is laid out at all. */
  [hidden]{display:none!important}

  .ticker,.nav,.foot,.or-cartbtn,.or-hero,.or-band,.or-controls,.or-filters,.or-grid,.or-count,.or-rail,
  .or-steps,.or-pickup,.or-staffpanel,.section-head,.section-number,.or-modal__close,.or-co__actions,
  .or-drawer,.or-modal__scrim,.or-receipt__bar,.or-done__tick,.or-skip,.or-co__step,
  main,footer,header,#or-modal{display:none!important}

  html,body{background:#fff!important;color:#000!important;margin:0!important;padding:0!important}

  /* Only the checkout modal, and flowed as a normal block so it starts at the
     top of the sheet instead of wherever it was floating on screen. */
  #or-checkout-modal{position:static!important;display:block!important;padding:0!important;
    background:none!important;inset:auto!important;overflow:visible!important}
  #or-checkout-modal .or-modal__panel{position:static!important;width:auto!important;max-width:none!important;
    max-height:none!important;height:auto!important;overflow:visible!important;border:0!important;
    box-shadow:none!important;background:#fff!important;transform:none!important}
  #or-checkout-modal .or-co__body{padding:0!important;overflow:visible!important;max-height:none!important}
  .or-done h3,.or-done__p,.or-done__id{display:none!important}

  /* The receipt is one object: never break inside it, and never orphan its
     header or its totals onto a sheet of their own. */
  .or-receipt{margin:0!important;border:0!important;break-inside:avoid;page-break-inside:avoid}
  .or-receipt__in{padding:0!important}
  .or-receipt table,.or-receipt thead,.or-receipt tfoot,.or-receipt__box,.or-receipt__head{
    break-inside:avoid;page-break-inside:avoid}
  .or-receipt tr{break-inside:avoid;page-break-inside:avoid}
  .or-receipt thead{display:table-header-group}

  /* A long order legitimately runs to a second sheet; these keep the columns
     readable when it does rather than trying to squeeze it onto one. */
  .or-receipt table{font-size:.72rem!important}
  .or-receipt__foot{font-size:.58rem!important}

  @page{margin:12mm}
}


/* ---------- FALLBACK RENDERING GROUND ----------
   Styles with a verified Old Row photo sit on bone (#fbf9fa), matching the
   photography's own white sweep. Styles we draw ourselves need a slightly
   deeper, warmer ground, or a pale garment — ivory, white, light green —
   disappears into the tile. */
.or-card__media--draw,
.or-modal__media--draw,
.or-line__thumb--draw{background:#e4dfd4}
.or-card__media--draw::after,
.or-modal__media--draw::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(135deg,rgba(20,20,20,.035) 0 2px,transparent 2px 9px)}


/* ---------- SHOP BAR ----------
   Controls sit directly under the hero, so they carry a little more weight
   than a normal filter row: this is the top of the page's real content. */
.section--shop{padding-block:clamp(26px,3.4vw,44px) var(--pad-y)}
.or-shopbar{margin-bottom:22px}
.or-shopbar__row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:4px}
.or-shopbar__row .or-count{margin:0}

.or-wishtoggle{display:inline-flex;align-items:center;gap:9px;padding:10px 15px;min-height:42px;
  border:2px solid var(--stroke-strong);background:transparent;color:var(--paper-2);cursor:pointer;
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background .12s linear,color .12s linear,border-color .12s linear}
.or-wishtoggle:hover{color:var(--paper)}
.or-wishtoggle:focus-visible{outline:3px solid #ff5a66;outline-offset:3px}
.or-wishtoggle.is-on{background:var(--red);border-color:var(--red);color:#fff}
.or-wishtoggle__n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;
  background:var(--stroke-strong);color:var(--ink);font-size:.7rem;font-variant-numeric:tabular-nums}
.or-wishtoggle.is-on .or-wishtoggle__n{background:#fff;color:var(--red)}

/* ---------- MERCHANDISING BADGES ----------
   Stacked top-left under the Old Row tag. Each one is backed by a real signal
   (Old Row's own best-seller rank, or what is left on the rack) — see
   badges() in old-row.js. */
.or-badges{position:absolute;top:30px;left:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.or-badge{font-family:var(--mono);font-size:.55rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:5px 10px;border-right:2px solid var(--stroke-strong);border-bottom:2px solid var(--stroke-strong);
  white-space:nowrap}
.or-badge--best{background:var(--or-red);color:#fff}
.or-badge--pop{background:var(--paper);color:var(--ink)}
.or-badge--fav{background:var(--bg-3);color:var(--paper)}
.or-badge--low{background:#c9861f;color:#0a0a0a}
.or-badge--out{background:var(--ink);color:var(--muted)}
.or-badges--modal{position:static;flex-direction:row;gap:7px;margin-bottom:12px}
.or-badges--modal .or-badge{border:0}

/* ---------- WISHLIST HEART ---------- */
.or-wish{position:absolute;top:0;right:0;z-index:4;width:40px;height:40px;display:grid;place-items:center;
  background:rgba(10,10,10,.82);color:var(--paper);border-left:2px solid var(--stroke-strong);
  border-bottom:2px solid var(--stroke-strong);cursor:pointer;transition:color .12s linear,background .12s linear}
.or-wish svg{fill:none;stroke:currentColor;stroke-width:2}
.or-wish:hover{color:#ff8a92;background:var(--ink)}
.or-wish:focus-visible{outline:3px solid #ff5a66;outline-offset:-3px}
.or-wish.is-on{color:var(--red)}
.or-wish.is-on svg{fill:currentColor;stroke:currentColor}

.or-savebtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 16px;min-height:42px;
  border:2px solid var(--stroke-strong);background:transparent;color:var(--paper-2);cursor:pointer;
  font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  flex:0 1 auto;transition:color .12s linear,border-color .12s linear}
.or-savebtn svg{fill:none;stroke:currentColor;stroke-width:2}
.or-savebtn:hover{color:var(--paper)}
.or-savebtn:focus-visible{outline:3px solid #ff5a66;outline-offset:2px}
.or-savebtn.is-on{color:var(--red);border-color:var(--red)}
.or-savebtn.is-on svg{fill:currentColor}

/* ---------- COLORWAY CAVEAT ----------
   Shown only where Old Row publishes this design in a colour other than the
   one Cardinal has on the rack. Better to say so than to let a customer turn
   up expecting the shirt in the photo. */
.or-altcolor{margin:16px 0 0;padding:12px 14px;border-left:3px solid var(--or-amber);
  background:rgba(224,163,42,.08);font-family:var(--mono);font-size:.7rem;line-height:1.65;color:var(--paper-2)}
.or-altcolor b{color:var(--paper)}

/* ---------- MOBILE: PULL PRODUCT UP ----------
   On a phone the stacked controls were pushing the first product row well past
   two screens. Search stays full width; sort and availability share a row; the
   filter chips scroll sideways instead of wrapping into four stacked lines.
   Together these lift the grid by roughly 300px on a 375px screen. */
@media(max-width:600px){
  .or-hero__wrap{padding-block:20px 22px}
  .or-hero h1{margin-top:14px}
  .or-hero .lede{margin-top:9px;font-size:.95rem}
  .or-promise{gap:7px;margin-top:4px}
  .or-promise li{padding:9px 13px}

  .or-controls{gap:10px;margin-bottom:12px}
  .or-controls .or-field:first-child{flex:1 1 100%}
  /* sort + availability share the second row */
  .or-controls .or-field:nth-child(2),
  .or-controls .or-field:nth-child(3){flex:1 1 calc(50% - 5px);min-width:0}
  .or-controls .or-select{width:100%}

  /* chips scroll rather than wrap — one line each, full-bleed to the gutter */
  .or-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(var(--pad-x) * -1);padding-inline:var(--pad-x);margin-bottom:10px}
  .or-filters::-webkit-scrollbar{display:none}
  .or-filter{flex:0 0 auto;padding:9px 13px;min-height:40px;font-size:.68rem}

  .or-shopbar__row{margin-top:2px}
  .or-shopbar{margin-bottom:16px}
  .section--shop{padding-block:20px var(--pad-y)}
}

/* ---------- PLACEHOLDER LABEL ----------
   Two styles in the opening order have been retired from Old Row's catalogue
   and have no product photo anywhere. They fall back to a drawn garment in the
   right colourway — this label says so plainly, so the tile reads as a
   deliberate placeholder rather than as a broken image. */
.or-nophoto{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:6px 10px;
  background:rgba(10,10,10,.82);color:var(--paper-2);
  font-family:var(--mono);font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;border-top:2px solid var(--stroke-strong)}

/* ---------------------------------------------------------------- CHECKOUT
   Stripe Embedded Checkout mounts inside .or-stripe. Two things matter here:

   1. The dashed border that used to sit on .or-pay read as "placeholder" —
      correct when the payment step was a drawing, wrong now that it takes
      money. Solid.
   2. Stripe renders its form in an iframe with its own light surface. Sitting
      that straight on the near-black page leaves a hard white rectangle, so it
      gets a plate with the same geometry as everything else on the page. The
      iframe sizes itself; min-height only stops the panel collapsing to
      nothing while it loads. */
.or-pay{border:2px solid var(--stroke-strong)}
.or-stripe{margin-top:14px;background:#fff;padding:0;min-height:280px;
  border:2px solid var(--stroke)}
.or-stripe > p{color:#444;text-align:center;padding:28px 10px;margin:0}
.or-stripe iframe{display:block;width:100%}

/* ======================================================== ACCESSIBILITY
   WCAG 2.2 AA pass. Loaded after site.min.css so these win.

   Everything here was measured in the browser, not guessed at. */

/* 2.4.1 Bypass Blocks (Level A). A keyboard user otherwise tabs the ticker,
   the whole nav and the search box before reaching a single product — on
   every visit. The target needs tabindex="-1" or the browser scrolls the
   page and leaves focus behind in the header. */
.or-skip{position:absolute;left:-9999px;top:0;z-index:4000;
  background:var(--or-red,#e92729);color:#fff;font-weight:700;
  padding:12px 18px;text-decoration:none;letter-spacing:.06em;text-transform:uppercase}
.or-skip:focus{left:8px;top:8px}
#main-content:focus{outline:none}

/* 2.5.8 Target Size, Minimum (24x24). Measured: product titles came in at
   234x19, the footer's nav column at 15px tall, "back to top" at 14, and the
   two section links at 18. The inline-in-a-sentence exemption does not cover
   any of them — these are stacked navigation, which is precisely the case the
   criterion exists for. Pad the LINK, never the list item: padding on the <li>
   grows the row without growing the target. */
.or-card__name{min-height:24px;display:flex;align-items:center;padding-block:2px}
.section-head__right a{display:inline-flex;align-items:center;min-height:24px}
footer a{display:inline-flex;align-items:center;min-height:24px}
footer li{line-height:1.2}

/* 1.4.3 Contrast, Minimum. Every pair below was MEASURED against the colour
   actually painted behind the text, not against the palette token — a token
   proves nothing when the element sits on a different ground. Ratios are the
   computed ones, before -> after.

   The worst was not subtle: "Photo coming soon" is beige type on the beige
   placeholder tile at 1.19:1, which is not low contrast so much as no
   contrast. It reads on a designer's screen only because they know what it
   says. */
.or-skip{background:var(--red,#c8242c)}                       /* 4.39 -> 5.61 */
.or-promise b{color:#ff5a66}                                  /* 4.05 -> 5.84 */
/* Only the badge that was ACTUALLY failing. The first attempt set every
   variant to the same red and broke .or-badge--pop, which is near-black type
   on a light chip by design — it went from passing to 3.53:1. A blanket fix
   to a measured problem is how you trade one defect for another. */
.or-badge--best{background:#c8242c}                           /* 4.39 -> 5.61 */
.or-nophoto{color:#4a453c}                                    /* 1.19 -> 7.16 */
/* The footer paints brand red on near-black in four places. .is-today .day
   is a two-class selector in site.min.css, so a one-class override loses and
   the colour never changes — specificity, not the value, was the bug. */
footer .foot__hours li.is-today .day,
footer .foot__hours li.is-today .hrs,
footer .foot__seo b,footer .foot__seo strong{color:#ff5a66}   /* 3.53 -> 6.51 */

/* The bag button is fixed, so it sits ON TOP of whatever happens to be under
   it. At 375px it was 128x56 in the bottom-right corner and covered most of
   the Availability dropdown: a tap at the centre of that select hit the bag
   instead — verified with elementFromPoint, which is the only way to catch
   this, since it looks merely "close" in a screenshot.

   Shrinking it to a compact pill on small screens pulls the covered area back
   off the controls. It keeps its own 24x24+ target and its count. */
@media (max-width: 640px){
  .or-cartbtn{right:12px;bottom:12px;gap:6px;padding:0 12px;height:48px;font-size:0}
  .or-cartbtn svg{width:20px;height:20px;flex:none}
  .or-cartbtn__n{font-size:.78rem;min-width:22px;height:22px}
}

/* The legal strip. Deliberately quiet but not hidden: it has to be findable
   before someone pays, and contrast was measured on the ground it actually
   sits on rather than assumed from the token. */
.or-legal{border-top:1px solid var(--stroke);padding:28px 0 34px;background:var(--bg)}
.or-legal p{margin:0;font-family:var(--sans);font-size:.82rem;line-height:1.8;color:#a8a49c}
.or-legal a{color:#ff5a66;text-decoration:underline;display:inline-flex;align-items:center;min-height:24px}
.or-legal a:hover{color:#fff}
.or-legal span{margin:0 8px;color:#6b6b6b}
.or-legal__note{margin-top:10px;max-width:70ch;color:#8f8b84;font-size:.78rem}