/* =====================================================
   MSC SHOP — catalogue, product, basket, order pages.

   Loaded after styles.css and built entirely from its
   tokens. Nothing here introduces a colour, face, radius
   or shadow the rest of the site does not already have —
   the point is that a shop page is indistinguishable from
   the page next to it.

   Layout borrows the structure of a conventional product
   grid and product page, with none of the density: cream
   ground, ivory tiles, one hairline, generous space. Hover
   is a 200ms lift and nothing else. There is no entrance
   animation on purpose — the site's scroll reveals were
   switched off deliberately (see js/motion.js initGsap),
   and this follows that decision rather than reversing it.
   ===================================================== */

/* ── shared ─────────────────────────────────────────── */
.shop-page { background: var(--cream); }
.shop-page .section { padding-block: var(--space-12); }
@media (min-width: 768px) { .shop-page .section { padding-block: var(--space-16); } }

.shop-price {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.02em;
}
.shop-price .from {
  font-weight: 500;
  color: var(--color-text-muted);
  margin-right: 0.3em;
}

/* Visible focus everywhere in the shop, in gold, on top of the site's
   default. Steppers, thumbs and chips are all keyboard-operated. */
.shop-page :is(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── catalogue toolbar ──────────────────────────────── */
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}
.shop-search {
  flex: 1 1 220px;
  min-width: 0;
}
.shop-search .form-input { width: 100%; }
.shop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1 1 100%;
  order: 3;
}
@media (min-width: 768px) {
  .shop-chips { flex: 1 1 auto; order: 0; }
}
.shop-sort { flex: 0 0 auto; }
.shop-sort .form-select { min-width: 180px; }
.shop-count {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
  margin-left: auto;
}

/* ── catalogue grid ─────────────────────────────────── */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (max-width: 400px)   { .shop-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px)   { .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
@media (min-width: 1024px)  { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.shop-card {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-lg);
  transition: transform 200ms cubic-bezier(0.4,0,0.2,1);
}
.shop-card:hover { transform: translateY(-3px); }
.shop-card:hover .shop-tile { box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) {
  .shop-card, .shop-tile { transition: none; }
  .shop-card:hover { transform: none; }
}

/* The image tile. Square, ivory, one hairline, the image contained with
   padding — so a tall book and a wide hoodie both sit in the same frame. */
.shop-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--ivory);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow 200ms cubic-bezier(0.4,0,0.2,1);
}
.shop-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10%;
  display: block;
}
.shop-card-body { padding: var(--space-3) var(--space-1) 0; }
.shop-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0 0 var(--space-1);
}
.shop-card-sub {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 var(--space-2);
}

/* Sold out: greyed, flagged, not a link (rendered as a div, so there is
   nothing for a keyboard or screen reader to activate). */
.shop-card.is-sold-out { cursor: default; }
.shop-card.is-sold-out:hover { transform: none; }
.shop-card.is-sold-out:hover .shop-tile { box-shadow: var(--shadow-xs); }
.shop-card.is-sold-out .shop-tile img { opacity: 0.35; filter: grayscale(1); }
.shop-card.is-sold-out .shop-card-title,
.shop-card.is-sold-out .shop-price { color: var(--color-text-muted); }
.shop-flag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-family: var(--font-label);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 3px 10px;
}

/* Skeleton while products load — the same footprint as a card, so the
   grid does not jump when real cards replace them. */
.shop-skel .shop-tile { background: var(--cream-dark); border-color: transparent; }
.shop-skel .skel-line {
  height: 0.9em;
  border-radius: var(--radius-sm);
  background: var(--cream-dark);
  margin-top: var(--space-3);
}
.shop-skel .skel-line.short { width: 40%; }
.shop-skel .shop-tile,
.shop-skel .skel-line {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shop-shimmer 1.4s ease-in-out infinite;
}
@keyframes shop-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .shop-skel .shop-tile, .shop-skel .skel-line { animation: none; } }

.shop-empty,
.shop-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-16) var(--space-4);
  color: var(--color-text-muted);
}
.shop-empty h3, .shop-error h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.shop-error { color: var(--carnelian-dark); }

/* ── product page ───────────────────────────────────── */
.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}
@media (min-width: 1024px) {
  .product-layout { grid-template-columns: 1.1fr 1fr; gap: var(--space-16); align-items: start; }
}

.product-gallery { position: sticky; top: calc(var(--nav-height, 72px) + var(--space-6)); }
@media (max-width: 1023px) { .product-gallery { position: static; } }
.product-main { margin-bottom: var(--space-3); }
.product-main .shop-tile { box-shadow: var(--shadow-sm); }
.product-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}
.product-thumb {
  appearance: none;
  padding: 0;
  background: var(--ivory);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--ease-fast);
}
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 12%; display: block; }
.product-thumb.is-active { border-color: var(--green-700); }
.product-thumb:hover { border-color: var(--color-border); }

.product-cat {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold-600);
  margin: 0 0 var(--space-3);
}
.product-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.product-sub {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.product-price { font-size: var(--text-xl); margin: 0 0 var(--space-5); }
.product-short {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border-light);
}

.product-field { margin-bottom: var(--space-6); }
.product-field-label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.product-field-label .hint {
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: var(--space-2);
}

.variant-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.variant-btn {
  appearance: none;
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 500;
  min-width: 3rem;
  padding: 0.55rem 0.95rem;
  background: var(--ivory);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast), color var(--ease-fast);
}
.variant-btn:hover { border-color: var(--green-700); }
.variant-btn.is-active { background: var(--green-800); color: var(--gold-100); border-color: var(--green-800); }
.variant-btn:disabled {
  cursor: not-allowed;
  color: var(--color-text-muted);
  background: transparent;
  border-style: dashed;
  text-decoration: line-through;
}

.qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--ivory);
  overflow: hidden;
}
.qty-btn {
  appearance: none;
  width: 2.75rem;
  background: transparent;
  border: none;
  font-family: var(--font-label);
  font-size: var(--text-lg);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--ease-fast);
}
.qty-btn:hover:not(:disabled) { background: var(--cream-dark); }
.qty-btn:disabled { color: var(--color-border); cursor: not-allowed; }
.qty-input {
  width: 3.25rem;
  text-align: center;
  border: none;
  border-inline: 1px solid var(--color-border-light);
  background: transparent;
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stock {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-3);
}
.qty-stock.low { color: var(--carnelian); }

.product-ctas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-8) 0 var(--space-6);
}
@media (max-width: 480px) { .product-ctas { grid-template-columns: 1fr; } }
.product-ctas .btn { width: 100%; }
.product-ctas .btn:disabled,
.product-ctas .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.product-notice {
  font-size: var(--text-sm);
  color: var(--carnelian-dark);
  margin: calc(var(--space-4) * -1) 0 var(--space-6);
  min-height: 1.4em;
}

/* Delivery & returns, long description: native disclosure elements with
   the site's typography. No JS needed, keyboard-native. */
.product-accordion {
  border-top: 1px solid var(--color-border-light);
}
.product-accordion details {
  border-bottom: 1px solid var(--color-border-light);
}
.product-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text);
}
.product-accordion summary::-webkit-details-marker { display: none; }
.product-accordion summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--gold-600);
  line-height: 1;
}
.product-accordion details[open] summary::after { content: '–'; }
.product-accordion-body {
  padding: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-text-muted);
}
.product-accordion-body p { margin: 0 0 var(--space-3); }
.product-accordion-body p:last-child { margin-bottom: 0; }

.product-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-6);
  margin: 0;
  font-size: var(--text-sm);
}
.product-details dt {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  padding-top: 2px;
}
.product-details dd { margin: 0; color: var(--color-text); }

.related-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-top: var(--space-10);
  border-top: 1px solid var(--color-border-light);
}
.related-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin: 0;
}
.related-head a {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold-600);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.shop-notfound { text-align: center; padding: var(--space-20) var(--space-4); }
.shop-notfound h1 { font-family: var(--font-display); font-size: var(--text-4xl); margin: 0 0 var(--space-3); }
.shop-notfound p { color: var(--color-text-muted); margin: 0 0 var(--space-6); }

/* ── "added to basket" toast ────────────────────────── */
/* Slides in from the right, stays a few seconds, does not steal focus.
   aria-live on the region announces it for screen readers. */
.shop-toast {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 120;
  width: min(360px, calc(100vw - 2 * var(--space-4)));
  background: var(--green-900);
  color: #F5F1E4;
  border: 1px solid rgba(218,185,78,0.28);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-4) var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  transform: translateX(calc(100% + var(--space-6)));
  opacity: 0;
  transition: transform var(--ease-slow), opacity var(--ease-normal);
  pointer-events: none;
}
.shop-toast.is-visible { transform: none; opacity: 1; pointer-events: auto; }
.shop-toast-thumb {
  width: 52px; height: 52px; flex: 0 0 52px;
  background: var(--ivory);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.shop-toast-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.shop-toast-body { flex: 1; min-width: 0; }
.shop-toast-title {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 2px;
}
.shop-toast-text {
  font-size: var(--text-sm);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-toast a {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-300);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .shop-toast { transition: opacity var(--ease-fast); transform: none; } }

/* Visually hidden, present for screen readers. Defined here in case the
   base sheet has no equivalent; harmless if it does. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── basket page ────────────────────────────────────── */
.basket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .basket-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-12); }
}

.basket-lines { display: flex; flex-direction: column; }

/* What changed since last time — stock fell, a price moved, an item went.
   Shown once, above the lines, in the site's warning tone rather than as
   an error: nothing is wrong, the basket has just been brought up to date. */
.basket-changes {
  background: var(--ivory);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.basket-changes strong {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-700);
  display: block;
  margin-bottom: var(--space-1);
}
.basket-changes ul { margin: 0; padding-left: 1.1em; }

.basket-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.basket-line:first-child { border-top: 1px solid var(--color-border-light); }
.basket-thumb {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--ivory);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.basket-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10%; display: block; }
.basket-line-body { min-width: 0; }
.basket-line-title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.2;
  margin-bottom: 2px;
}
.basket-line-title:hover { color: var(--green-600); }
.basket-line-meta {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.basket-line-controls { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.basket-line-controls .qty-stepper { transform: scale(0.92); transform-origin: left center; }
.basket-remove {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.basket-remove:hover { color: var(--carnelian); }
.basket-line-total {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .basket-line { grid-template-columns: 72px minmax(0, 1fr); }
  .basket-line-total { grid-column: 2; text-align: left; margin-top: var(--space-2); }
}

/* ── summary ────────────────────────────────────────── */
.basket-summary {
  background: var(--ivory);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
  position: sticky;
  top: calc(var(--nav-height, 72px) + var(--space-6));
}
@media (max-width: 1023px) { .basket-summary { position: static; } }
.basket-summary h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin: 0 0 var(--space-5);
}

.delivery-choice { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.delivery-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--cream);
  cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast);
}
.delivery-option:hover { border-color: var(--green-700); }
.delivery-option.is-active { border-color: var(--green-800); background: var(--ivory); }
.delivery-option input { accent-color: var(--green-800); margin: 0; }
/* Name above hint, not run together: the two are spans so they can sit
   inside a <label>, which makes the whole row the click target. */
.delivery-option-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.delivery-option-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.delivery-option-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.delivery-option-price {
  font-family: var(--font-label);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* Progress toward free delivery. The bar is decorative; the sentence is
   the information, and it is what a screen reader gets. */
.free-delivery {
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.free-delivery.is-met { color: var(--green-700); }
.free-delivery-bar {
  height: 4px;
  background: var(--cream-dark);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: var(--space-2);
}
.free-delivery-bar span {
  display: block;
  height: 100%;
  background: var(--gold-500);
  border-radius: var(--radius-full);
  transition: width var(--ease-normal);
}
.free-delivery.is-met .free-delivery-bar span { background: var(--green-500); }

.basket-totals { border-top: 1px solid var(--color-border-light); padding-top: var(--space-4); margin-bottom: var(--space-5); }
.basket-totals-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding: var(--space-1) 0;
}
.basket-totals-row.total {
  font-family: var(--font-label);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}
.basket-summary .btn { width: 100%; }
.basket-continue {
  display: block;
  text-align: center;
  margin-top: var(--space-4);
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.basket-continue:hover { color: var(--color-text); }
.basket-digital-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-4) 0 0;
  line-height: 1.6;
}
.basket-notice {
  font-size: var(--text-sm);
  color: var(--carnelian-dark);
  margin: var(--space-3) 0 0;
  min-height: 1.4em;
}

.basket-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-20) var(--space-4);
}
.basket-empty h2 { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 600; margin: 0 0 var(--space-3); }
.basket-empty p { color: var(--color-text-muted); margin: 0 0 var(--space-6); }

/* Skeleton rows while stock and prices are re-checked on load. */
.basket-line.shop-skel .basket-thumb { background: var(--cream-dark); border-color: transparent; }

/* ── order pages (success / cancelled) ──────────────────── */
.order-wrap { max-width: 640px; }
.order-card {
  background: var(--ivory);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-8);
}
.order-eyebrow {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0 0 var(--space-2);
}
.order-ref {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
}
.order-greeting { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.order-status {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-light);
}
.order-status.is-paid { color: var(--green-700); }
.order-lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-6);
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
}
.order-lines dt { color: var(--color-text); }
.order-lines dd { margin: 0; text-align: right; font-family: var(--font-label); font-weight: 600; }
.order-lines .total {
  font-family: var(--font-label);
  font-size: var(--text-base);
  font-weight: 600;
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
}
.order-note { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.order-card .btn { margin-top: var(--space-2); }
.order-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }