/* Customer shop: the public site's black canvas, paper surfaces and original artwork. */
.shop-page {
  --shop-ink: #1a1815;
  --shop-muted: #514b42;
  --shop-line: #c8b9a5;
  background: #080808;
  color: var(--colour-paper);
}
.shop-page .shop-closed h1, .shop-page .shop-closed p { color: var(--colour-paper); }
.shop-page .engine-header {
  background: #080808;
  border-bottom: 1px solid #393631;
  padding: 24px 5vw;
  min-height: 100px;
}
.shop-page .engine-header img { width: 185px; }
/* Thin alpha-edge outline, never an inversion: the white face and black lines stay intact. */
.shop-page .engine-header img, .shop-page .shop-footer img {
  filter: drop-shadow(0 0 .5px #fff) drop-shadow(0 0 .5px #fff);
}
.shop-page .engine-header nav { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.shop-page .engine-header nav a:last-child { border: 1px solid #74665a; border-radius: 3px; padding: 0 14px; }
.shop-page .engine-header nav a:hover { color: #ffc798; }
.shop-page .shop-shell, .shop-page .shop-footer { width: 100%; max-width: 1440px; padding-inline: 5vw; }
.shop-page .shop-shell { padding-block: 64px 80px; }
.shop-page .shop-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.shop-page .eyebrow { color: #beb8af; font-size: 12px; letter-spacing: .1em; margin-bottom: 20px; }
.shop-page .shop-hero h1 { font-family: var(--font-body); font-size: clamp(48px, 6.1vw, 88px); line-height: .94; letter-spacing: -.055em; text-transform: uppercase; max-width: 10ch; margin: 0 0 24px; }
.shop-page .shop-intro { color: #beb8af; font-size: 18px; margin-bottom: 0; }
.shop-page .shop-banner { background: var(--colour-berry); color: var(--colour-paper); padding: 14px 18px; border-radius: 3px; font-weight: 700; font-size: 15px; max-width: none; margin: 24px 0 0; }
.shop-page .shop-banner-preview { position: sticky; top: 0; z-index: 5; margin: 0 0 24px; border: 2px solid var(--colour-paper); }
.shop-page .shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block: 40px 64px; }
.shop-page .shop-card { min-width: 0; background: var(--colour-paper); color: var(--shop-ink); border-radius: 3px; overflow: hidden; display: flex; flex-direction: column; }
.shop-page .shop-card > img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; padding: 16px; }
.shop-page .shop-card-body { flex: 1; padding: 24px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--shop-line); }
.shop-page .shop-card h2 { font-family: var(--font-body); font-size: 26px; line-height: 1.12; letter-spacing: -.035em; margin: 0; }
.shop-page .shop-card p { font-size: 15px; margin: 0; line-height: 1.5; }
.shop-page .shop-blurb { color: var(--shop-muted); }
.shop-page .shop-price { color: var(--shop-ink); font-size: 24px !important; font-weight: 700; padding-top: 6px; }
.shop-page .shop-tag { color: var(--colour-berry); font-size: 13px !important; font-weight: 700; }
.shop-page .shop-soldout { font-weight: 700; color: var(--shop-muted); padding-block: 20px; }
.shop-page .shop-card-controls { margin-top: auto; padding-top: 24px; }
.shop-page .shop-options { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 12px; align-items: end; }
.shop-page .shop-option:only-child { grid-column: 2; }
.shop-page .shop-add { margin-top: 14px; width: 100%; }
.shop-page .shop-add, .shop-page .shop-pay { background: var(--colour-olive); color: var(--colour-paper); min-height: 48px; }
.shop-page .shop-add:hover, .shop-page .shop-pay:hover { background: #383e1e; }
.shop-page label { display: block; margin: 12px 0 6px; font-size: 14px; font-weight: 700; }
.shop-page .shop-options label { margin-top: 0; }
.shop-page input:not([type=checkbox]):not([type=radio]), .shop-page select {
  width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; background: #fff; color: var(--shop-ink);
  border: 1px solid #8a7f70; border-radius: 3px; font: inherit;
}
.shop-page input[type=checkbox], .shop-page input[type=radio] { width: 22px; height: 22px; min-height: 22px; accent-color: var(--colour-olive); flex: none; margin: 0; }
.shop-page .shop-checkout { padding: clamp(24px, 4vw, 48px); max-width: 760px; background: var(--colour-paper); color: var(--shop-ink); border-radius: 3px; }
.shop-page .shop-checkout h2 { font-family: var(--font-body); font-size: clamp(30px, 4vw, 42px); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 24px; }
.shop-page #shop-basket-heading { scroll-margin-top: 24px; }
.shop-page .shop-basket { list-style: none; margin: 0 0 32px; padding: 0; }
.shop-page .shop-basket li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--shop-line); }
.shop-page .shop-basket li > span { min-width: 0; overflow-wrap: anywhere; }
.shop-page .shop-remove { background: none; border: 1px solid #8a7f70; color: var(--shop-ink); min-height: 44px; padding: 0 14px; border-radius: 3px; flex: none; }
.shop-page fieldset { border: 0; padding: 0; margin: 0 0 28px; }
.shop-page legend { font-family: var(--font-body); font-weight: 700; font-size: 24px; padding: 0; margin-bottom: 12px; }
.shop-page .shop-choice, .shop-page .shop-terms { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 6px 0; font-weight: 400; }
.shop-page .shop-note { color: var(--shop-muted); font-size: 14px; margin: 6px 0 0; }
.shop-page .shop-note:empty { display: none; }
.shop-page .shop-pair { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; }
.shop-page .shop-form { display: block; background: none; border: 0; padding: 0; box-shadow: none; max-width: none; }
.shop-page .shop-pay-method { margin-top: 28px; }
.shop-page .shop-totals { display: block; border: 0; padding: 0; margin: 28px 0; }
.shop-page .shop-totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.shop-page .shop-totals dt, .shop-page .shop-totals dd { margin: 0; }
.shop-page .shop-totals dd { white-space: nowrap; }
.shop-page .shop-total { border-top: 1px solid var(--shop-line); margin-top: 12px; padding-top: 16px !important; font-size: 24px; font-weight: 700; }
.shop-page .shop-feedback { color: #8b1a1a; font-weight: 700; }
.shop-page .shop-feedback:empty { display: none; }
.shop-page .shop-pay { width: 100%; margin-top: 16px; }
.shop-page .shop-pay:disabled { opacity: .6; }
.shop-page .shop-empty { color: #beb8af; padding: 32px 0; grid-column: 1 / -1; border-block: 1px solid #393631; }
.shop-page .shop-footer { display: flex; gap: 24px; align-items: center; border-top: 1px solid #393631; padding-block: 32px; font-size: 14px; }
.shop-page .shop-footer img { width: 150px; }
.shop-page .shop-footer p { color: #beb8af; margin: 0 auto 0 0; font-size: 14px; }
.shop-page .shop-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.shop-page :is(a,button,input,select):focus-visible { outline: 3px solid #ac8150; outline-offset: 4px; }
.shop-page :is(.shop-card,.shop-checkout) :is(a,button,input,select):focus-visible { outline-color: var(--colour-berry); }
@media (max-width: 900px) {
  .shop-page .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .shop-page .engine-header { padding: 16px 6vw; gap: 8px 16px; }
  .shop-page .engine-header img { width: 150px; }
  .shop-page .engine-header nav { width: 100%; justify-content: space-between; gap: 16px; font-size: 13px; }
  .shop-page .shop-shell, .shop-page .shop-footer { padding-inline: 6vw; }
  .shop-page .shop-shell { padding-block: 40px 48px; }
  .shop-page .shop-heading { display: block; }
  .shop-page .shop-intro { font-size: 16px; }
  .shop-page .shop-grid { grid-template-columns: minmax(0, 1fr); margin-block: 32px 40px; }
  .shop-page .shop-card-body { padding: 20px; }
  .shop-page .shop-pair { grid-template-columns: 1fr; gap: 0; }
  .shop-page .shop-footer { flex-wrap: wrap; gap: 12px 24px; }
  .shop-page .shop-footer p { order: 3; width: 100%; }
  .shop-page .shop-footer > a:last-child { margin-left: auto; }
}

/* B2C catalogue (1 Nov 2026): one photo frame per card that follows the chosen colour or edition,
   front and back views, the shared variant picker, sold-out and "price coming soon" states. */
.shop-page .shop-media { position: relative; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.shop-page .shop-photo { position: absolute; inset: 0; }
.shop-page .shop-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 16px; box-sizing: border-box; animation: shop-photo-in .22s cubic-bezier(.2, .7, .2, 1); }
.shop-page .shop-photo > .variant-photo-placeholder { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
/* Product photos of the B2C set sit on the designer's warm backdrop; the frame continues it. */
.shop-page .shop-photo.is-slot { background: #ece7de; }
.shop-page .shop-photo.is-slot > img { padding: 0; }
@keyframes shop-photo-in { from { opacity: .35; } to { opacity: 1; } }
.shop-page .shop-views { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; }
.shop-page .shop-views button { display: block; width: 56px; height: 56px; min-height: 0; padding: 0; border: 1px solid #c8b9a5; border-radius: 3px; background: #ece7de; overflow: hidden; cursor: pointer; }
.shop-page .shop-views button[aria-pressed="true"] { border: 2px solid var(--shop-ink); }
.shop-page .shop-views button:focus-visible { outline: 3px solid #2879c8; outline-offset: 2px; }
.shop-page .shop-views img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shop-page .shop-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.shop-page .shop-card-head .shop-price { padding-top: 0; white-space: nowrap; }
.shop-page .shop-ribbon { position: absolute; top: 12px; left: 12px; background: var(--colour-berry); color: var(--colour-paper); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 3px; }
.shop-page .shop-card.is-sold-out .shop-photo > img { opacity: .55; filter: grayscale(.35); }
.shop-page .shop-collect { margin: 0; font-size: 13px; color: var(--shop-muted); }
.shop-page .shop-price.is-soon { font-size: 18px !important; color: var(--shop-muted); }
.shop-page .shop-pack { color: var(--shop-muted); font-size: 14px !important; }
.shop-page .shop-picker { margin-top: 10px; }
.shop-page .shop-picker legend { font-family: var(--font-body); font-size: 14px; margin-bottom: 8px; }
.shop-page .shop-picker .variant-chip-face { border-color: #8a7f70; }
.shop-page .shop-picker .variant-chip input:checked + .variant-chip-face { border-color: var(--shop-ink); }
.shop-page .shop-stock { color: var(--colour-berry); font-size: 13px !important; font-weight: 700; }
.shop-page .shop-stock:empty { display: none; }
.shop-page .shop-add:disabled { background: #d8d0c5; color: #514b42; cursor: not-allowed; }
.shop-page .shop-option input:disabled { background: #f1ebe2; color: #8a7f70; }
.shop-page .shop-pickups { display: grid; gap: 4px; }
.shop-page .shop-pickup { align-items: flex-start; padding: 8px 0; }
.shop-page .shop-pickup > span { display: grid; gap: 2px; }
.shop-page .shop-pickup strong { font-weight: 700; }
.shop-page .shop-pickup small { color: var(--shop-muted); font-size: 14px; }
.shop-page .shop-pickup input { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .shop-page .shop-photo > img { animation: none; } }

/* Server-priced bundles and the owner's optional basket bonus. */
.shop-page .shop-bundle { color: var(--shop-ink); font-weight: 700; }
.shop-page .shop-line-price, .shop-page .shop-line-note { display: block; margin-top: 5px; font-size: 14px; line-height: 1.5; }
.shop-page .shop-line-note { color: var(--shop-muted); }
.shop-page .shop-discount { display: inline-block; margin-left: 6px; font-weight: 700; }
.shop-page .shop-bonus { margin: 0 0 32px; padding: 20px; border: 1px solid var(--shop-line); border-radius: 3px; }
.shop-page .shop-bonus-progress { margin: 0; font-size: 16px; line-height: 1.5; }
.shop-page .shop-progress { display: block; width: 100%; height: 10px; margin: 14px 0 4px; border: 0; border-radius: 8px; overflow: hidden; appearance: none; background: #d8d0c5; color: var(--colour-olive); accent-color: var(--colour-olive); }
.shop-page .shop-progress::-webkit-progress-bar { background: #d8d0c5; border-radius: 8px; }
.shop-page .shop-progress::-webkit-progress-value { background: var(--colour-olive); border-radius: 8px; }
.shop-page .shop-progress::-moz-progress-bar { background: var(--colour-olive); border-radius: 8px; }
.shop-page .shop-progress.is-ready { height: 12px; }
.shop-page .shop-bonus[aria-busy="true"] { opacity: .7; }
.shop-page .shop-bonus-notice { color: var(--colour-paper); background: var(--colour-berry); padding: 14px 18px; border-radius: 3px; margin-bottom: 24px; max-width: 760px; }
.shop-page .shop-rewards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.shop-page .shop-reward { display: flex; flex-direction: column; min-width: 0; }
.shop-page .shop-reward .shop-option:only-child { grid-column: auto; }
.shop-page .shop-reward p { font-size: 14px; font-weight: 700; margin: 12px 0 6px; }
.shop-page .shop-reward .shop-add { margin-top: auto; }
.shop-page .shop-reward .shop-option { margin-bottom: 14px; }
.shop-page .shop-reward button[aria-pressed="true"] { outline: 2px solid var(--colour-olive); outline-offset: 3px; }
.shop-page .shop-cart-toggle { position: fixed; bottom: 24px; right: 5vw; z-index: 6; min-height: 48px; padding: 12px 24px; border: 1px solid var(--colour-paper); border-radius: 3px; background: var(--colour-olive); color: var(--colour-paper); font: inherit; font-weight: 700; box-shadow: 0 4px 16px #0005; }
.shop-page .shop-cart-drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(540px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; padding: 24px; border: 0; background: var(--colour-paper); color: var(--shop-ink); overflow-y: auto; box-sizing: border-box; }
.shop-page .shop-cart-drawer::backdrop { background: #000a; }
.shop-page:has(.shop-cart-drawer[open]) { overflow: hidden; }
.shop-page .shop-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.shop-page .shop-drawer-head h2 { font-family: var(--font-body); margin: 0; font-size: 30px; letter-spacing: -.035em; }
.shop-page .shop-cart-drawer .shop-total { font-size: 22px; }
.shop-page .shop-cart-drawer :is(a,button,input,select):focus-visible { outline-color: var(--colour-berry); }
@media (max-width: 600px) {
  .shop-page .shop-bonus { padding: 16px; }
  .shop-page .shop-rewards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .shop-page .shop-cart-toggle { bottom: 16px; right: 6vw; }
  .shop-page .shop-cart-drawer { padding: 24px 6vw; }
  .shop-page .shop-cart-drawer .shop-rewards { gap: 14px; }
}

/* Product pages use the catalogue's card and picker at a comfortable reading width. */
.shop-page .shop-card h2 a { color: inherit; text-decoration: none; }
.shop-page .shop-card h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.shop-page .shop-back:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; }
.shop-product-page .shop-shell { max-width: 1200px; }
.shop-product-page .shop-heading { display: none; }
.shop-product-page .shop-grid { display: block; margin-block: 24px 40px; }
.shop-product-page .shop-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.shop-product-page .shop-media { aspect-ratio: 1; }
.shop-product-page .shop-card-body { border-top: 0; border-left: 1px solid var(--shop-line); }
.shop-product-page .shop-card h1 { font-family: var(--font-body); font-size: clamp(30px, 3.5vw, 44px); line-height: 1.08; letter-spacing: -.035em; margin: 0; }
.shop-product-page .shop-checkout { margin-inline: auto; }
@media (max-width: 768px) {
  .shop-product-page .shop-card { display: flex; }
  .shop-product-page .shop-media { aspect-ratio: 4 / 3; }
  .shop-product-page .shop-card-body { border-left: 0; border-top: 1px solid var(--shop-line); }
}