/* Ported from the frozen S2 prototype (_shared/store.css, 10 Oct 2026, with the owner's 44 px footer tap targets). Served to S2 pages only; the Home keeps store.css, its approved r3 rules. Rules unchanged: scripts/css-check.mjs proves it. Only comments differ, with the sample tenant's name removed. */
/* Storefront shell: header, menus, search, footer, toast, sheets, the product
   card, placeholders and the prototype strip. Tokens only; the `sc-` prefix is
   the storefront; `proto-` is prototype chrome that is never ported. */

/* Resets sit in the design system's base layer: unlayered, they would outrank
   every layered component rule (a button's own colour among them). */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font-body);
    font-size: var(--ui-text-base);
    line-height: var(--ui-leading-body);
  }
  img, svg { display: block; max-width: 100%; }
  a { color: inherit; }
  button { font: inherit; color: inherit; }
}
.sc-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.sc-icon { width: 22px; height: 22px; flex: none; }
.sc-icon--sm { width: 18px; height: 18px; }
html.sc-locked { overflow: hidden; }

/* ── Prototype strip ─────────────────────────────────────────────────── */
.proto-strip {
  background: var(--ui-surface-3);
  color: var(--ui-text-muted);
  font-family: var(--ui-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--ui-border);
}
.proto-strip__row { display: flex; align-items: center; gap: var(--ui-space-3); min-height: 32px; flex-wrap: wrap; }
.proto-strip__row b { color: var(--ui-text); font-weight: 500; }
@media (max-width: 600px) { .proto-strip__row > span:nth-of-type(2) { display: none; } }
.proto-strip__toggle {
  margin-inline-start: auto; background: transparent; border: 1px solid var(--ui-border-strong);
  padding: 2px 10px; cursor: pointer; font-family: var(--ui-font-mono); font-size: 11.5px; color: var(--ui-text);
}
.proto-panel { display: grid; gap: var(--ui-space-3); padding-block: var(--ui-space-3) var(--ui-space-4); }
.proto-panel[hidden] { display: none; }
.proto-panel__group { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.proto-panel__label { min-width: 72px; color: var(--ui-text-subtle); }
.proto-panel a, .proto-panel button {
  font-family: var(--ui-font-mono); font-size: 11.5px; text-decoration: none; color: var(--ui-text);
  background: var(--ui-surface); border: 1px solid var(--ui-border); padding: 3px 8px; cursor: pointer;
}
.proto-panel a[aria-current='true'] { border-color: var(--ui-accent); color: var(--ui-accent); }

/* ── Header ──────────────────────────────────────────────────────────── */
.sc-header { background: var(--ui-bg); border-bottom: 1px solid var(--ui-border); position: relative; z-index: 30; }
.sc-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 60px; gap: var(--ui-space-2);
}
.sc-header__left, .sc-header__right { display: flex; align-items: center; gap: 2px; }
.sc-header__right { justify-content: flex-end; }
.sc-logo { display: block; text-decoration: none; }
.sc-logo img { height: auto; }
.sc-logo__mark { width: 62px; }
.sc-logo__lockup { display: none; width: 124px; }
.sc-iconbtn {
  display: inline-grid; place-items: center; position: relative;
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; color: var(--ui-text);
  transition: color var(--ui-dur-fast) var(--ui-ease), background-color var(--ui-dur-fast) var(--ui-ease);
  text-decoration: none;
}
.sc-iconbtn:hover { color: var(--ui-accent); }
.sc-iconbtn__label { display: none; }
.sc-count {
  position: absolute; top: 6px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--ui-accent); color: var(--ui-accent-fg);
  font-size: 11px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
}
.sc-count[hidden] { display: none; }
.sc-count.is-tick { animation: sc-tick var(--ui-dur-slow) var(--ui-ease-spring); }
@keyframes sc-tick { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

.sc-nav { display: none; }
@media (min-width: 960px) {
  .sc-header__bar { min-height: 112px; }
  .sc-logo__mark { display: none; }
  .sc-logo__lockup { display: block; }
  .sc-header__menubtn { display: none; }
  .sc-iconbtn__label { display: inline; font-size: var(--ui-text-sm); margin-inline-start: 8px; }
  .sc-iconbtn--wide { width: auto; padding-inline: 10px; grid-auto-flow: column; }
  .sc-iconbtn--wide .sc-count { position: static; margin-inline-start: 8px; }
  .sc-nav { display: flex; justify-content: center; gap: var(--ui-space-8); border-top: 1px solid var(--ui-border); }
}
.sc-nav { position: relative; }
.sc-nav__item { position: static; }
.sc-nav__link {
  display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 2px;
  background: transparent; border: 0; cursor: pointer; text-decoration: none;
  font-size: var(--ui-text-xs); letter-spacing: var(--ui-tracking-label); text-transform: uppercase;
  font-weight: var(--ui-weight-strong); color: var(--ui-text);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--ui-dur-fast) var(--ui-ease), border-color var(--ui-dur-fast) var(--ui-ease);
}
.sc-nav__link:hover, .sc-nav__link[aria-expanded='true'] { color: var(--ui-accent); border-bottom-color: var(--ui-accent); }
.sc-nav__link svg { transition: transform var(--ui-dur-base) var(--ui-ease); }
.sc-nav__link[aria-expanded='true'] svg { transform: rotate(180deg); }
.sc-mega {
  position: absolute; left: 50%; top: 100%; z-index: 40;
  width: min(920px, 92vw);
  background: var(--ui-surface); border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-lg);
  padding: var(--ui-space-8);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ui-space-6) var(--ui-space-8);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-base) var(--ui-ease), visibility 0s linear var(--ui-dur-base);
}
.sc-mega.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.sc-mega h3 { font-size: var(--ui-text-md); margin-bottom: var(--ui-space-2); }
.sc-mega h3 a { text-decoration: none; }
.sc-mega h3 a:hover { color: var(--ui-accent); }
.sc-mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sc-mega li a { text-decoration: none; color: var(--ui-text-muted); font-size: var(--ui-text-sm); }
.sc-mega li a:hover { color: var(--ui-accent); }

/* ── Sheets (menu, search, WhatsApp, zoom) ───────────────────────────── */
.sc-sheet { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.sc-sheet.is-open { pointer-events: auto; }
.sc-sheet__scrim {
  position: absolute; inset: 0; background: color-mix(in srgb, var(--ui-text) 42%, transparent);
  opacity: 0; transition: opacity var(--ui-dur-slow) var(--ui-ease);
}
.sc-sheet.is-open .sc-sheet__scrim { opacity: 1; }
.sc-sheet__panel {
  position: absolute; background: var(--ui-surface); color: var(--ui-text);
  box-shadow: var(--ui-shadow-lg); display: flex; flex-direction: column; overflow: auto;
  transition: transform var(--ui-dur-slow) var(--ui-ease), opacity var(--ui-dur-base) var(--ui-ease);
}
.sc-sheet--left .sc-sheet__panel { left: 0; top: 0; bottom: 0; width: min(88vw, 380px); transform: translateX(-100%); }
.sc-sheet--top .sc-sheet__panel { left: 0; right: 0; top: 0; max-height: 86dvh; transform: translateY(-100%); }
.sc-sheet--bottom .sc-sheet__panel {
  left: 0; right: 0; bottom: 0; max-height: 88dvh; transform: translateY(100%);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 640px) {
  .sc-sheet--bottom .sc-sheet__panel { left: 50%; right: auto; bottom: auto; top: 50%; width: min(520px, 92vw); transform: translate(-50%, calc(-50% + 24px)); opacity: 0; }
  .sc-sheet.sc-sheet--bottom.is-open .sc-sheet__panel { transform: translate(-50%, -50%); opacity: 1; }
}
.sc-sheet.is-open .sc-sheet__panel { transform: none; }
.sc-sheet__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
  border-bottom: 1px solid var(--ui-border); position: sticky; top: 0; background: var(--ui-surface); z-index: 1;
}
.sc-sheet__head h2 { font-size: var(--ui-text-lg); }
.sc-sheet__body { padding: var(--ui-space-5); display: grid; gap: var(--ui-space-4); }
.sc-grab { width: 40px; height: 4px; border-radius: 999px; background: var(--ui-border-strong); margin: 10px auto 0; }
@media (min-width: 640px) { .sc-grab { display: none; } }

.sc-menu__list { list-style: none; margin: 0; padding: 0; }
.sc-menu__list > li { border-bottom: 1px solid var(--ui-border); }
.sc-menu__row {
  width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 52px;
  background: none; border: 0; padding: 0 var(--ui-space-5); cursor: pointer; text-align: left; text-decoration: none;
  font-family: var(--ui-font-display); font-size: var(--ui-text-md); font-weight: var(--ui-weight-display);
  letter-spacing: var(--ui-tracking-display);
}
.sc-menu__row svg { transition: transform var(--ui-dur-base) var(--ui-ease); color: var(--ui-text-subtle); }
.sc-menu__row[aria-expanded='true'] svg { transform: rotate(180deg); }
.sc-menu__subs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ui-dur-base) var(--ui-ease); }
.sc-menu__subs.is-open { grid-template-rows: 1fr; }
.sc-menu__subs > ul { overflow: hidden; list-style: none; margin: 0; padding: 0 var(--ui-space-5); }
.sc-menu__subs.is-open > ul { padding-bottom: var(--ui-space-3); }
.sc-menu__subs a { display: block; padding: 8px 0 8px var(--ui-space-3); text-decoration: none; color: var(--ui-text-muted); font-size: var(--ui-text-sm); border-left: 1px solid var(--ui-border); }
.sc-menu__foot { padding: var(--ui-space-5); display: grid; gap: var(--ui-space-2); font-size: var(--ui-text-sm); color: var(--ui-text-muted); }

.sc-search__field { display: flex; align-items: center; gap: var(--ui-space-3); border-bottom: 1px solid var(--ui-border-strong); padding-block: var(--ui-space-2); }
.sc-search__field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: 0;
  font-family: var(--ui-font-display); font-size: var(--ui-text-xl); color: var(--ui-text);
  letter-spacing: var(--ui-tracking-display); font-weight: var(--ui-weight-display);
}
.sc-search__field input::placeholder { color: var(--ui-text-subtle); }
.sc-search__hint { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: var(--ui-tracking-label); color: var(--ui-text-subtle); }
.sc-search__chips { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.sc-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ui-border-strong);
  background: var(--ui-surface); cursor: pointer; font-size: var(--ui-text-sm); text-decoration: none;
  transition: border-color var(--ui-dur-fast) var(--ui-ease), color var(--ui-dur-fast) var(--ui-ease);
}
.sc-chip:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.sc-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sc-result { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--ui-space-3); align-items: center; padding: 8px; text-decoration: none; }
.sc-result:hover, .sc-result:focus-visible { background: var(--ui-surface-2); }
.sc-result__img { width: 52px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ui-surface-3); }
.sc-result__img svg, .sc-result__img img { width: 100%; height: 100%; object-fit: cover; }
.sc-result__t { font-size: var(--ui-text-sm); font-weight: var(--ui-weight-strong); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-result__s { font-size: var(--ui-text-xs); color: var(--ui-text-subtle); }
.sc-result mark { background: var(--ui-accent-soft); color: var(--ui-accent); }
.sc-search__empty { color: var(--ui-text-muted); font-size: var(--ui-text-sm); }

/* ── Toast ───────────────────────────────────────────────────────────── */
.sc-toasts {
  position: fixed; left: 50%; bottom: calc(var(--sc-bar-h, 0px) + 16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; width: min(92vw, 380px);
  pointer-events: none;
}
.sc-toasts .ui-toast {
  pointer-events: auto; min-width: 0; max-width: none; width: 100%; align-items: center;
  animation: sc-toast-in var(--ui-dur-slow) var(--ui-ease) both;
}
.sc-toasts .ui-toast.is-out { animation: sc-toast-out var(--ui-dur-base) var(--ui-ease) both; }
.sc-toast__body { flex: 1; min-width: 0; }
.sc-toast__text { font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
@keyframes sc-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sc-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ── Placeholder (tenant fact not yet supplied) ──────────────────────── */
.sc-tbc {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 8px; border: 1px dashed var(--ui-accent-border);
  color: var(--ui-text-muted); font-size: var(--ui-text-xs); letter-spacing: 0.02em; background: var(--ui-surface);
  max-width: 100%;
}
.sc-tbc::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-warning); flex: none; }

/* ── Product card ────────────────────────────────────────────────────
   A gallery mount: the photograph sits inside a keyline mat, the pallu view
   crossfades in on hover, and the details read as a label under a framed
   work. Square corners and tracked caps come from the structure. */
.pc { display: grid; gap: var(--ui-space-4); min-width: 0; text-decoration: none; color: inherit; align-content: start; position: relative; }
.pc__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; isolation: isolate;
  background: var(--ui-surface-3);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ui-shadow-color) 6%, transparent);
  transition: box-shadow var(--ui-dur-slow) var(--ui-ease), transform var(--ui-dur-slow) var(--ui-ease);
}
.pc__img { position: absolute; inset: 0; transition: opacity var(--ui-dur-slow) var(--ui-ease), transform 900ms var(--ui-ease); }
.pc__img > svg, .pc__img > img { width: 100%; height: 100%; object-fit: cover; }
.pc__img--b { opacity: 0; transform: scale(1.04); }
.pc__mat {
  position: absolute; inset: var(--ui-space-2); z-index: 2; pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--ui-surface) 62%, transparent);
  transition: inset var(--ui-dur-slow) var(--ui-ease), border-color var(--ui-dur-slow) var(--ui-ease);
}
@media (hover: hover) {
  .pc:hover .pc__media { box-shadow: var(--ui-shadow-lg); transform: translateY(-4px); }
  .pc:hover .pc__img--a { opacity: 0; transform: scale(1.03); }
  .pc:hover .pc__img--b { opacity: 1; transform: none; }
  .pc:hover .pc__mat { inset: var(--ui-space-3); border-color: color-mix(in srgb, var(--ui-surface) 85%, transparent); }
  .pc:hover .pc__view { opacity: 1; transform: none; }
  .pc:hover .pc__title { color: var(--ui-accent); }
}
.pc:focus-visible { outline: 0; }
.pc:focus-visible .pc__media { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 3px; }

.pc__tag {
  position: absolute; z-index: 3; top: var(--ui-space-4); left: var(--ui-space-4);
  font-size: 10.5px; font-weight: var(--ui-weight-strong); letter-spacing: var(--ui-tracking-label); text-transform: uppercase; line-height: 1;
  padding: 7px 10px 6px; color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-surface) 90%, transparent); backdrop-filter: blur(6px);
}
.pc__tag--one { background: var(--ui-accent); color: var(--ui-accent-fg); }
.pc__tag--sold { color: var(--ui-text-muted); }
.pc__seal {
  position: absolute; z-index: 3; left: var(--ui-space-4); bottom: var(--ui-space-4);
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: var(--ui-weight-medium);
  padding: 5px 9px 4px 7px; color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-surface) 84%, transparent); backdrop-filter: blur(6px);
  transition: opacity var(--ui-dur-base) var(--ui-ease);
}
.pc__seal .sc-icon { width: 13px; height: 13px; color: var(--ui-accent); }
.pc__view {
  position: absolute; z-index: 3; right: var(--ui-space-4); bottom: var(--ui-space-4);
  display: none; align-items: center; gap: 4px; padding: 7px 10px 6px 12px;
  font-size: var(--ui-text-xs); letter-spacing: var(--ui-tracking-label); text-transform: uppercase; font-weight: var(--ui-weight-strong);
  background: var(--ui-surface); color: var(--ui-accent);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-base) var(--ui-ease);
}
.pc__view .sc-icon { width: 14px; height: 14px; }
@media (hover: hover) and (min-width: 720px) { .pc__view { display: inline-flex; } .pc:hover .pc__seal { opacity: 0; } }
.pc__soldband {
  position: absolute; z-index: 3; left: 0; right: 0; top: 50%; translate: 0 -50%;
  text-align: center; padding: 10px 0 9px;
  font-family: var(--ui-font-display); font-size: var(--ui-text-lg); letter-spacing: 0.3em; text-transform: uppercase; font-weight: var(--ui-weight-display);
  color: var(--ui-text); background: color-mix(in srgb, var(--ui-surface) 78%, transparent); backdrop-filter: blur(4px);
}

.pc__body { display: grid; gap: 6px; padding-inline: 2px; }
.pc__eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ui-tracking-label); color: var(--ui-accent); font-weight: var(--ui-weight-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc__title {
  font-family: var(--ui-font-display); font-size: var(--ui-text-md); font-weight: var(--ui-weight-display);
  line-height: 1.3; letter-spacing: var(--ui-tracking-display); color: var(--ui-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--ui-dur-base) var(--ui-ease);
}
@media (min-width: 720px) { .pc__title { font-size: var(--ui-text-lg); } }
.pc__facts { display: flex; flex-wrap: wrap; gap: 2px 0; margin-left: -19px; clip-path: inset(0 0 0 19px); font-size: var(--ui-text-xs); color: var(--ui-text-muted); letter-spacing: 0.02em; }
.pc__facts > span::before { content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ui-border-strong); vertical-align: middle; margin: -2px 8px 0; }
.pc__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2) var(--ui-space-3);
  margin-top: var(--ui-space-2); padding-top: var(--ui-space-3); border-top: 1px solid var(--ui-border);
}
.pc__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--ui-space-2); }
.pc__price .ui-price { font-size: var(--ui-text-md); }
.pc__compare { text-decoration: line-through; color: var(--ui-text-subtle); font-size: var(--ui-text-xs); }
.pc__save { font-size: var(--ui-text-xs); font-weight: var(--ui-weight-strong); color: var(--ui-success); }
.pc__colours { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ui-text-xs); color: var(--ui-text-muted); }
.pc__swatches { display: inline-flex; }
.pc__swatch { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ui-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ui-text) 16%, transparent); }
.pc__swatch + .pc__swatch { margin-left: -4px; }
.pc--sold .pc__img { filter: saturate(0.35); }
.pc--sold .pc__title, .pc--sold .pc__eyebrow { color: var(--ui-text-muted); }
/* A press answers the finger on touch screens: the mount gives a little, at once. */
@media (hover: none) {
  .pc:active .pc__media { transform: scale(0.975); transition-duration: var(--ui-dur-fast); }
}
/* Phone: two columns of about 165px. Lighter chrome on the image, a tighter label. */
@media (max-width: 719px) {
  .pc { gap: var(--ui-space-3); }
  .pc__mat { inset: 6px; }
  .pc__tag { top: 10px; left: 10px; font-size: 9.5px; padding: 6px 8px 5px; }
  .pc__seal { left: 10px; bottom: 10px; font-size: 9.5px; padding: 4px 7px 3px 6px; gap: 4px; }
  .pc__seal .sc-icon { width: 12px; height: 12px; }
  .pc__soldband { font-size: var(--ui-text-md); padding: 8px 0 7px; }
  .pc__body { gap: 4px; padding-inline: 1px; }
  .pc__eyebrow { font-size: 9.5px; }
  .pc__title { font-size: 0.9375rem; line-height: 1.32; }
  .pc__facts { font-size: 11.5px; }
  .pc__foot { margin-top: 4px; padding-top: var(--ui-space-2); gap: 4px var(--ui-space-2); }
  .pc__price .ui-price { font-size: var(--ui-text-base); }
  .pc__compare, .pc__save { font-size: 11px; }
  .pc__colours { font-size: 11px; gap: 6px; }
  .pc__swatch { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc__img, .pc__mat, .pc__view, .pc__media, .pc__seal { transition: none; }
}

/* ── Footer (owner, 9 Oct 2026: the shared, branded close of every storefront screen) ───────
   Plum ground in the logo's own colour family, cream type, gold rules and arch. The lotus-temple
   ornament crowns it; the logo sits in a gold arch at the centre of the "gate": Shop and Help on
   its left, Policies and Seller on its right. Phones: the logo first, every link still visible. */
.sc-footer {
  --ft-ground: #3d1027; --ft-deep: #2a0a1a; --ft-cream: #f3e3c3; --ft-text: rgba(243, 227, 195, 0.84);
  --ft-gold: #d6b06a; --ft-gold-hi: #f1d08f; --ft-line: rgba(214, 176, 106, 0.42);
  margin-top: var(--ui-space-16); position: relative; isolation: isolate; overflow: hidden; color: var(--ft-cream);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(214, 176, 106, 0.12), transparent 70%),
    radial-gradient(120% 90% at 50% 100%, var(--ft-ground), var(--ft-deep));
}
.sc-footer__crown { display: flex; justify-content: center; padding-top: clamp(36px, 4vw, 56px); }
.sc-footer__orn { width: clamp(220px, 26vw, 380px); height: auto; opacity: 0.92; }
.sc-footer__rule { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 0; width: min(92%, 1180px); color: var(--ft-gold); }
.sc-footer__rule i { flex: 1; height: 0; border-top: 1px solid var(--ft-line); border-bottom: 1px solid var(--ft-line); padding-top: 2px; transform-origin: right center; }
.sc-footer__rule i:last-child { transform-origin: left center; }
.sc-footer__rule b { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--ft-gold-hi); flex: none; }

.sc-footer__gate {
  display: grid; align-items: start; gap: var(--ui-space-8) clamp(20px, 3vw, 48px); padding-block: clamp(40px, 4.4vw, 64px) clamp(36px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 280px) minmax(0, 0.8fr) minmax(0, 1.35fr);
  grid-template-areas: 'shop help brand policies seller';
}
.sc-footer__group--shop { grid-area: shop; }
.sc-footer__group--help { grid-area: help; }
.sc-footer__group--policies { grid-area: policies; }
.sc-footer__group--seller { grid-area: seller; }
.sc-footer__brand { grid-area: brand; position: relative; display: grid; place-items: center; align-self: stretch; min-height: 230px; padding: 46px 26px 30px; }
.sc-footer__arch { position: absolute; inset: 0; border: 1px solid var(--ft-line); border-bottom: 0; border-radius: 50% 50% 0 0 / 110px 110px 0 0; }
.sc-footer__arch::before { content: ''; position: absolute; inset: 7px 7px 0; border: 1px solid rgba(214, 176, 106, 0.22); border-bottom: 0; border-radius: inherit; }
.sc-footer__arch::after { content: ''; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: var(--ft-ground); border: 1px solid var(--ft-gold-hi); }
.sc-footer__logo { position: relative; width: min(100%, 190px); height: auto; opacity: 0; }
.sc-footer__logo.is-lifted { opacity: 1; transition: opacity 0.6s var(--ui-ease); }

.sc-footer h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--ui-space-4); font-family: var(--ui-font-display); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ft-gold); }
.sc-footer h3::after { content: ''; width: 28px; height: 1px; background: var(--ft-line); }
.sc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--ui-text-sm); }
.sc-footer__link { position: relative; display: inline-flex; align-items: center; gap: 0; min-height: 36px; text-decoration: none; color: var(--ft-text); transition: color var(--ui-dur-base) var(--ui-ease), gap var(--ui-dur-base) var(--ui-ease); }
.sc-footer__link > span:last-child { background: linear-gradient(var(--ft-gold-hi), var(--ft-gold-hi)) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size var(--ui-dur-slow) var(--ui-ease); }
.sc-footer__dot { width: 0; height: 6px; overflow: hidden; flex: none; transition: width var(--ui-dur-base) var(--ui-ease); }
.sc-footer__dot::before { content: ''; display: block; width: 6px; height: 6px; transform: rotate(45deg) scale(0.8); background: var(--ft-gold-hi); }
.sc-footer__link:hover, .sc-footer__link:focus-visible { color: var(--ft-cream); gap: 8px; }
.sc-footer__link:hover .sc-footer__dot, .sc-footer__link:focus-visible .sc-footer__dot { width: 6px; }
.sc-footer__link:hover > span:last-child, .sc-footer__link:focus-visible > span:last-child { background-size: 100% 1px; }
.sc-footer a:focus-visible { outline: 2px solid var(--ft-gold-hi); outline-offset: 3px; border-radius: 2px; }

.sc-footer__facts { gap: 10px !important; padding: 16px 18px !important; border: 1px solid var(--ft-line); border-radius: 14px; background: linear-gradient(180deg, rgba(243, 227, 195, 0.05), rgba(243, 227, 195, 0.015)); }
.sc-footer__fact { display: flex; align-items: flex-start; gap: 10px; min-width: 0; color: var(--ft-text); line-height: 1.5; }
.sc-footer__fact > span { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sc-footer__ic { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ft-gold); }
.sc-footer .sc-tbc { color: var(--ft-cream); border-color: rgba(241, 208, 143, 0.55); background: rgba(243, 227, 195, 0.06); }

.sc-footer__base { display: flex; align-items: center; gap: 14px; padding-block: 18px clamp(22px, 2.6vw, 30px); font-size: var(--ui-text-xs); letter-spacing: 0.14em; color: rgba(243, 227, 195, 0.7); }
.sc-footer__base i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--ft-line)); }
.sc-footer__base i:last-child { transform: scaleX(-1); }

/* Motion: the rule draws out from its diamond, the gate rises in turn; the logo floats slowly
   while the footer is on screen. Nothing moves with reduced motion. */
.sc-footer__rule i { transform: scaleX(0); transition: transform 1.1s var(--ui-ease) 0.15s; }
.sc-footer__crown, .sc-footer__brand, .sc-footer__group { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ui-ease), transform 0.7s var(--ui-ease); }
.sc-footer__brand { transition-delay: 0.2s; }
.sc-footer__group { transition-delay: calc(0.3s + var(--i) * 0.08s); }
.sc-footer.is-in .sc-footer__rule i { transform: none; }
.sc-footer.is-in .sc-footer__crown, .sc-footer.is-in .sc-footer__brand, .sc-footer.is-in .sc-footer__group { opacity: 1; transform: none; }
@keyframes sc-footer-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sc-footer.is-live .sc-footer__logo.is-lifted { animation: sc-footer-float 6s ease-in-out infinite; }

/* Tablets: the logo arch on top, then Shop, Help and Policies side by side, Seller below. */
@media (max-width: 1099px) {
  .sc-footer__gate { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: 'brand brand brand' 'shop help policies' 'seller seller seller'; justify-items: stretch; }
  .sc-footer__brand { justify-self: center; width: min(100%, 260px); min-height: 210px; }
  .sc-footer__group--seller { justify-self: center; width: min(100%, 560px); }
}
/* Phones: logo first; Shop and Help in two columns; Policies; the Seller panel; every link visible. */
@media (max-width: 599px) {
  .sc-footer__gate { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'brand brand' 'shop help' 'policies policies' 'seller seller'; gap: 30px 18px; }
  .sc-footer__brand { width: min(100%, 220px); min-height: 180px; padding: 38px 20px 24px; }
  .sc-footer__group--policies ul { grid-auto-flow: column; justify-content: start; gap: 4px 24px; }
  .sc-footer__link { min-height: 44px; }
  .sc-footer__group--seller { width: 100%; }
}
/* Phone tap targets up to 720px (owner, 10 Oct 2026): footer links keep a 44px target below the
   storefront's phone threshold, not only below 600px. */
@media (max-width: 719px) {
  .sc-footer__link { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-footer__rule i, .sc-footer__crown, .sc-footer__brand, .sc-footer__group { opacity: 1; transform: none; transition: none; }
  .sc-footer.is-live .sc-footer__logo.is-lifted { animation: none; }
  .sc-footer__link, .sc-footer__link > span:last-child, .sc-footer__dot { transition: none; }
}

/* ── Skeleton helpers ────────────────────────────────────────────────── */
.sc-sk { display: block; background: var(--ui-surface-3); animation: ui-pulse 1.6s var(--ui-ease) infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sc-mega, .sc-sheet__panel, .sc-sheet__scrim, .pc__media, .sc-menu__subs { transition: none; }
  .sc-count.is-tick, .sc-toasts .ui-toast { animation: none; }
}