/* ============================================================================
   STEPUP STYLE CO — STOREFRONT
   ----------------------------------------------------------------------------
   The big sneaker sites all do the same handful of things: photography on
   white, very little chrome, near-black type, one accent used only for
   action. The restraint is the look — the shoes are the design.
   ========================================================================== */

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--grey-200);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--header-h);
}

/* The wordmark. Sized by height so the header bar stays 64px whatever the
   image's proportions are; width follows from the aspect ratio. */
.logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}
.logo img {
  height: 34px;
  width: auto;
  max-width: none;   /* overrides the global img{max-width:100%} */
}

/* On a phone the nav and search need the room more than the logo does. */
@media (max-width: 640px) {
  .logo img { height: 26px; }
}

.main-nav { display: flex; gap: 4px; margin-left: 8px; }
.main-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .14s var(--ease);
}
.main-nav a:hover      { background: var(--grey-100); }
.main-nav a.is-active  { background: var(--surface-dark); color: #fff; }

/* Sale earns the one accent colour on the page — it's the only nav item
   making a claim about price rather than naming a section. */
.main-nav a.nav-accent { color: var(--accent); font-weight: 700; }
.main-nav a.nav-accent:hover { background: #fdeceb; }
.main-nav a.nav-accent.is-active { background: var(--accent); color: #fff; }

.header-search { position: relative; flex: 1; max-width: 340px; margin-left: auto; }
.header-search .input {
  min-height: 42px;
  padding-left: 38px;
  border-radius: 999px;
  background: var(--grey-100);
  border-color: transparent;
}
.header-search .input:focus { background: var(--white); border-color: var(--ink); }
.header-search::before {
  content: '⌕';
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--grey-500);
  font-size: 1.1rem;
  pointer-events: none;
}

.cart-btn {
  position: relative;
  width: 44px; height: 44px;
  border: none;
  border-radius: 50%;
  background: transparent;
  font-size: 1.2rem;
  display: grid;
  place-items: center;
  flex: none;
}
.cart-btn:hover { background: var(--grey-100); }
.cart-count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 19px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.banner {
  background: var(--surface-dark);
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
}

@media (max-width: 800px) {
  .main-nav { display: none; }
  .header-search { max-width: none; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--surface-dark);
  color: #fff;
  padding: 84px 0 76px;
  overflow: hidden;
}
/* Above both the photo (0) and the scrim over it (1). */
.hero-inner { position: relative; z-index: 2; max-width: 660px; width: 100%; }
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: .94;
  margin-bottom: 18px;
}
.hero p { font-size: 1.05rem; opacity: .78; max-width: 460px; margin-bottom: 28px; }
.hero .btn { --btn-bg: #fff; --btn-fg: var(--surface-dark); --btn-bd: #fff; }

/* --- Hero photo ------------------------------------------------------------
   The banner uploaded in portal Settings. Absolutely positioned and cropped
   with object-fit, so one image serves phone, tablet and desktop: the frame
   changes shape, the photo fills it, and object-position decides which band
   survives the crop.

   Heights are set per breakpoint rather than by aspect ratio, because the
   hero's job is to be a readable strip carrying a headline — not to show the
   whole photograph. A 2:1 banner on a phone would be a 190px sliver.
   -------------------------------------------------------------------------- */
.hero-track {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.hero.has-photo .hero-track { opacity: 1; }

/* Every slide is stacked in the same box; only the current one is opaque, so
   moving between them is a crossfade rather than a jump. Stacking also means
   the hero never changes height as the carousel advances. */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hero-photo.is-on { opacity: 1; }

/* --- Carousel dots --------------------------------------------------------- */
.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  z-index: 3;             /* above the scrim (1) and the copy's stacking (2) */
  display: flex;
  justify-content: center;
  gap: 10px;
}
.hero-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.42);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.hero-dot:hover { background: rgba(255,255,255,.72); }
.hero-dot.is-on { background: #fff; transform: scale(1.32); }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* The dot itself stays small — a 9px tap target does not. The pseudo-element
   gives each one a 44px hit area without changing how it looks. */
.hero-dot::after {
  content: '';
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.hero-dots .hero-dot { position: relative; }

/* The scrim. White type has to stay readable over a photo nobody has seen
   yet, so it is weighted to the left where the headline sits and fades out
   across the frame rather than greying the whole picture evenly. */
.hero.has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(0,31,75,.86) 0%,
      rgba(0,31,75,.66) 42%,
      rgba(0,31,75,.28) 72%,
      rgba(0,31,75,.12) 100%);
}
@media (max-width: 700px) {
  /* Narrow screens leave no room to fade sideways — the copy sits over the
     middle of the frame, so the scrim has to cover it evenly. */
  .hero.has-photo::before {
    background: linear-gradient(180deg,
      rgba(0,31,75,.72) 0%, rgba(0,31,75,.80) 100%);
  }
}

/* Give the photo room to be a picture rather than a stripe. */
.hero.has-photo { min-height: 460px; display: flex; align-items: center; }
@media (max-width: 900px) { .hero.has-photo { min-height: 400px; } }
@media (max-width: 600px) { .hero.has-photo { min-height: 340px; } }

/* The watermark is a stand-in for photography. Once there is a photo it is
   noise on top of one, so it goes. */
.hero.has-photo::after { display: none; }

/* An oversized watermark, cropped by the hero. Cheap, and it stops the
   black block reading as an empty placeholder before real photography. */
.hero::after {
  content: 'STEPUP';
  position: absolute;
  right: -3%;
  bottom: -28%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(9rem, 24vw, 22rem);
  letter-spacing: -0.05em;
  color: rgba(255,255,255,.045);
  pointer-events: none;
  line-height: 1;
}

/* --- Sections ------------------------------------------------------------- */
.section { padding: 60px 0; }
.section-head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 26px;
}
.section-head h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-transform: uppercase;
  margin: 0;
}
.section-head .more { margin-left: auto; font-size: .88rem; font-weight: 600; }

/* --- Product grid --------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px 12px;
}
@media (max-width: 560px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px 8px; }
}

.card-product { text-decoration: none; display: block; }

.shot {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--grey-100);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}
.shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.card-product:hover .shot img { transform: scale(1.045); }

/* Shown until real photography exists. Better than a broken-image icon or a
   grey void — it still tells you which shoe you're looking at. */
.shot-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, var(--grey-200) 0%, var(--grey-100) 62%);
  text-align: center;
  padding: 20px;
}
.shot-empty span {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--grey-300);
  line-height: 1.1;
}

.shot-flags {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.p-brand {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--grey-500);
}
.p-name  { font-weight: 600; margin: 2px 0 1px; line-height: 1.3; }
.p-color { font-size: .84rem; color: var(--grey-500); }
.p-price { margin-top: 7px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-price s { color: var(--grey-500); font-weight: 400; margin-right: 6px; }
.p-price .sale { color: var(--accent); }

/* --- Filters -------------------------------------------------------------- */
.shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; }
@media (max-width: 900px) { .shop-layout { grid-template-columns: 1fr; gap: 20px; } }

.filters { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
.filter-group { padding: 16px 0; border-bottom: 1px solid var(--grey-200); }
.filter-group:last-child { border-bottom: none; }
.filter-group h3 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 10px;
}
.filter-list { display: flex; flex-direction: column; gap: 7px; }
.filter-list label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .88rem;
  cursor: pointer;
}
.filter-list input { accent-color: var(--ink); width: 16px; height: 16px; }

.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--grey-200);
}
.shop-count { font-size: .88rem; color: var(--grey-500); }

/* --- Product page --------------------------------------------------------- */
.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: 48px;
  padding: 32px 0 72px;
}
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: 28px; padding-top: 16px; }
}

.gallery { display: grid; gap: 10px; }
.gallery-main {
  aspect-ratio: 1 / 1;
  background: var(--grey-100);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-thumbs button {
  width: 72px; height: 72px;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 0;
  background: var(--grey-100);
}
.gallery-thumbs button.is-on { border-color: var(--ink); border-width: 2px; }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp-info { position: sticky; top: calc(var(--header-h) + 20px); align-self: start; }
@media (max-width: 900px) { .pdp-info { position: static; } }

.pdp-brand {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grey-500);
}
.pdp-name  { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 6px 0 4px; }
.pdp-color { color: var(--grey-500); }

/* --- Sport tags ----------------------------------------------------------
   A sport is how a customer finds more of the same, so these are links to
   the filtered shop, not inert labels. Pill shape borrowed from the portal's
   chips so the two interfaces stay recognisably one product. */
.pdp-sports { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pdp-sport {
  display: inline-flex;
  align-items: center;
  /* ~40px tall. It is a link people press on a phone, not a caption. */
  padding: 11px 14px;
  border: 1px solid var(--grey-200);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.pdp-sport:hover { border-color: var(--grey-300); background: var(--grey-50); }
.pdp-sport:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pdp-price {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  margin: 18px 0 6px;
  font-variant-numeric: tabular-nums;
}
.pdp-price s { font-size: 1.1rem; color: var(--grey-500); font-weight: 400; margin-right: 10px; }
.pdp-price .sale { color: var(--accent); }

/* --- The size picker -----------------------------------------------------
   The most important control on the site. Every size in the run is always
   shown, in one of three states. Hiding sold-out sizes is tempting and
   wrong: a customer needs to know their size exists and is gone, otherwise
   they assume you don't stock it and never come back.
   ------------------------------------------------------------------------ */
.size-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 26px 0 10px;
}
.size-head h3 { font-family: var(--font-body); font-size: .9rem; margin: 0; }
.size-guide-btn {
  margin-left: auto;
  font-size: .82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  color: var(--grey-700);
}

.size-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}

.size-opt {
  position: relative;
  padding: 12px 4px;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
/* Both must be block: as inline spans they sit side by side and read as
   "7 25 cm", which looks like one nonsense number. */
.size-opt-us { display: block; font-weight: 700; font-size: .96rem; line-height: 1.1; }
.size-opt-cm { display: block; font-size: .68rem; color: var(--grey-500); margin-top: 1px; }

.size-opt:hover:not(:disabled) { border-color: var(--brand-700); }
.size-opt.is-picked {
  border-color: var(--surface-dark);
  border-width: 2px;
  background: var(--surface-dark);
  color: #fff;
}
.size-opt.is-picked .size-opt-cm { color: rgba(255,255,255,.7); }

/* Sold out, and not open for pre-order: visible but plainly unavailable. */
.size-opt.is-gone {
  color: var(--grey-300);
  cursor: not-allowed;
  background:
    linear-gradient(to top left, transparent calc(50% - 1px),
      var(--grey-200) 50%, transparent calc(50% + 1px));
}
.size-opt.is-gone .size-opt-cm { color: var(--grey-300); }

/* Sold out but pre-orderable — an offer, not a dead end. */
.size-opt.is-preorder { border-color: var(--warn); border-style: dashed; }
.size-opt.is-preorder.is-picked {
  background: var(--warn);
  border-color: var(--warn);
  border-style: solid;
  color: #fff;
}
.size-opt-tag {
  display: block;
  margin-top: 3px;
  font-size: .58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--warn);
}
.size-opt.is-picked .size-opt-tag { color: rgba(255,255,255,.85); }

/* "Only 1 left" — urgency that happens to be true. */

.size-error {
  margin-top: 10px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--err);
}

/* --- Courier picker ------------------------------------------------------
   Nested under "Nationwide courier", indented and rule-marked so it reads as
   part of that choice rather than a fourth way to receive the order. */
.courier-wrap,
.plan-wrap {
  margin: -2px 0 2px 14px;
  padding: 12px 0 2px 16px;
  border-left: 2px solid var(--grey-300);
}
.courier-wrap .label,
.plan-wrap .label { font-size: .8rem; }

.courier-opt,
.plan-opt { padding: 11px 14px; }
.courier-opt .choice-title,
.plan-opt .choice-title { font-weight: 500; font-size: .9rem; }
.courier-opt .courier-price,
.plan-opt .plan-price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
.courier-opt .courier-price.is-free { color: var(--ok); }

/* The monthly figure is the whole reason anyone picks an instalment plan, so
   it belongs on the option itself rather than in the total underneath. */
.plan-opt .plan-mo {
  display: block;
  font-weight: 500;
  font-size: .76rem;
  color: var(--grey-500);
}

/* The weight caveat. Warning-coloured, but not a red error — nothing is
   wrong yet, and most parcels never reach 3kg. */
.ship-note {
  margin: 12px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: var(--warn-bg);
  font-size: .8rem;
  line-height: 1.55;
  color: var(--ink);
}

/* --- Pre-order explainer, shown once a pre-order size is picked ----------- */
.preorder-box {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  background: var(--warn-bg);
  font-size: .88rem;
}
.preorder-box h4 {
  font-family: var(--font-body);
  font-size: .9rem;
  margin: 0 0 8px;
  color: var(--warn);
}
.preorder-box dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.preorder-box dt { font-weight: 600; }
.preorder-box dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.pdp-actions { margin-top: 22px; display: grid; gap: 10px; }

.pdp-meta { margin-top: 30px; border-top: 1px solid var(--grey-200); }
.pdp-meta details { border-bottom: 1px solid var(--grey-200); }
.pdp-meta summary {
  padding: 16px 0;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
}
.pdp-meta summary::-webkit-details-marker { display: none; }
.pdp-meta summary::after { content: '+'; margin-left: auto; font-size: 1.2rem; }
.pdp-meta details[open] summary::after { content: '−'; }
.pdp-meta .detail-body { padding-bottom: 18px; font-size: .9rem; color: var(--grey-700); }

/* --- Size guide ----------------------------------------------------------- */
dialog.sheet {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 520px;
  width: 92vw;
  box-shadow: var(--shadow-lg);
}
dialog.sheet::backdrop { background: rgba(0,0,0,.45); }
.sheet-head {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--grey-200);
}
.sheet-head h3 { margin: 0; font-size: 1.05rem; }
.sheet-body { padding: 22px; max-height: 70vh; overflow-y: auto; }

/* --- Cart drawer ---------------------------------------------------------- */
.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--ease);
}
.drawer-scrim.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: min(420px, 100vw);
  background: var(--white);
  z-index: 91;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s var(--ease);
  box-shadow: var(--shadow-lg);
}
.drawer.is-open { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--grey-200);
}
.drawer-head h2 { margin: 0; font-size: 1.1rem; }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 20px; }
.drawer-foot {
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--grey-200);
}

.line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--grey-100);
}
.line-shot {
  width: 72px; height: 72px;
  border-radius: var(--radius);
  background: var(--grey-100);
  overflow: hidden;
}
.line-shot img { width: 100%; height: 100%; object-fit: cover; }
.line-name  { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.line-meta  { font-size: .8rem; color: var(--grey-500); margin-top: 2px; }
.line-price { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.qty {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
  border: 1px solid var(--grey-300);
  border-radius: 999px;
  padding: 2px 8px;
}
.qty button {
  border: none;
  background: none;
  width: 22px; height: 22px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  line-height: 1;
}
.qty button:disabled { opacity: .3; }
.qty span { min-width: 16px; text-align: center; font-weight: 700; font-size: .88rem; }

.line-remove {
  background: none;
  border: none;
  padding: 0;
  font-size: .78rem;
  color: var(--grey-500);
  text-decoration: underline;
  margin-top: 6px;
}

/* Cart lines are grouped: things that ship now, and things that don't. */
.cart-group-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 18px 0 2px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grey-500);
}
.cart-group-head:first-child { margin-top: 6px; }

.totals { display: grid; gap: 6px; margin-bottom: 14px; font-size: .9rem; }
.totals-row { display: flex; justify-content: space-between; }
.totals-row.grand {
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--grey-200);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
}

/* --- Footer --------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--grey-200);
  padding: 48px 0 32px;
  margin-top: 40px;
  font-size: .88rem;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  margin-bottom: 32px;
}
.footer-cols h4 {
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grey-500);
  margin-bottom: 10px;
}
.footer-cols a {
  display: block;
  padding: 4px 0;
  text-decoration: none;
  color: var(--grey-700);
}
.footer-cols a:hover { color: var(--ink); text-decoration: underline; }
.footer-base {
  padding-top: 22px;
  border-top: 1px solid var(--grey-200);
  color: var(--grey-500);
  font-size: .82rem;
}


/* --- Where to find us (home page) ------------------------------------------
   Details beside the map on a wide screen, stacked on a phone. The map is
   given the larger share because a customer scanning for "can I walk in?"
   recognises the shape of their own town faster than they read an address.
   -------------------------------------------------------------------------- */
.find-us {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.25fr);
  gap: 28px;
  align-items: start;
}
.find-details { display: grid; gap: 20px; }
.find-row .find-val { font-size: .95rem; line-height: 1.55; }
.find-row .find-val a { color: var(--ink); text-decoration: underline; }
.find-row .eyebrow { margin-bottom: 6px; }

/* Days on the left, times right-aligned, so the times line up as a column
   and can be read down without re-reading the days. */
.find-hours {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  color: var(--grey-700);
}
.find-hours span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

.find-map {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius, 10px);
  overflow: hidden;      /* clips the iframe's corners to the radius */
  background: var(--grey-100);
}
.find-map iframe {
  display: block;        /* kills the inline-element gap under the frame */
  width: 100%;
  height: 340px;
  border: 0;
}

@media (max-width: 760px) {
  .find-us { grid-template-columns: 1fr; gap: 22px; }
  .find-map iframe { height: 260px; }
}


/* --- Social ----------------------------------------------------------------
   Logos rather than words: three marks people recognise before they read.
   44px targets so a thumb hits them on a phone, and the navy fill deepens on
   hover so the whole row doesn't look like decoration.
   -------------------------------------------------------------------------- */
.social-row { display: flex; gap: 8px; margin-top: 2px; }

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -11px;      /* pulls the first icon back onto the column edge */
  border-radius: 50%;
  color: var(--brand-700);
  text-decoration: none;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.social-link:hover,
.social-link:focus-visible {
  background: var(--brand-200);
  color: var(--brand-900);
}
.social-row .social-link + .social-link { margin-left: 0; }


/* --- Footer detail ---------------------------------------------------------
   Two headings are themselves links (Shop, Visit us). They must not pick up
   the block/padding treatment that .footer-cols a gives the list items under
   them, or the column headings drift out of line with each other.
   -------------------------------------------------------------------------- */
.footer-cols h4 a {
  display: inline;
  padding: 0;
  color: inherit;
  text-decoration: none;
}
.footer-cols h4 a:hover { color: var(--brand-700); text-decoration: underline; }

/* A footer row whose destination hasn't been set yet. Deliberately looks
   inert — same position and rhythm as its neighbours, but plainly not a
   link, so nobody clicks it expecting a page. */
.footer-soon {
  display: block;
  padding: 4px 0;
  color: var(--grey-300);
  cursor: default;
}


/* --- Brand logos -----------------------------------------------------------
   Just the marks, on the page's own white. No tile, no border, no background —
   a logo already carries its own shape, and a box around it competes with it.

   Sized by height so a wide wordmark and a tall roundel read as equals; the
   width cap stops a very long wordmark dominating the row. Centred and
   wrapping rather than gridded, so five brands and twenty-five both look
   deliberate instead of leaving a half-empty last row.
   -------------------------------------------------------------------------- */
.brand-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px 44px;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-decoration: none;
  opacity: .78;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
/* The strip is paused by the time anyone can hover a logo, so the mark can
   answer: it comes up to full strength and lifts slightly, which is the whole
   signal that it's a link to that brand's shoes. */
.brand-logo:hover,
.brand-logo:focus-visible {
  opacity: 1;
  transform: translateY(-3px) scale(1.06);
}
.brand-logo:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 4px; }

.brand-logo img {
  height: 40px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
}

@media (max-width: 640px) {
  .brand-logos { gap: 20px 28px; }
  .brand-logo img { height: 32px; max-width: 104px; }
}


/* --- Brand marquee ---------------------------------------------------------
   The logo strip, sliding. Two identical runs sit side by side and the track
   travels exactly half its own width, so the second run reaches the start
   position the first one left and the loop has no visible seam.

   It pauses whenever someone might want to act on it: a pointer over it, a
   keyboard tab into it, or a finger on it. A logo that slides out from under
   a click is worse than one that never moved.
   -------------------------------------------------------------------------- */
.brand-marquee {
  position: relative;
  overflow: hidden;
  /* Logos fade out at both ends instead of being sliced by a hard edge, so
     the row reads as continuing rather than as clipped. */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%);
}

.brand-track {
  display: flex;
  width: max-content;
  animation: brand-scroll 40s linear infinite;   /* duration set in home.js */
}
.brand-run {
  display: flex;
  align-items: center;
  gap: 44px;
  padding-right: 44px;      /* keeps the join spaced like every other gap */
}

@keyframes brand-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.brand-marquee:hover .brand-track,
.brand-marquee:focus-within .brand-track,
.brand-marquee.is-held .brand-track { animation-play-state: paused; }

/* Belt and braces with the JS check: if the browser reports reduced motion,
   nothing moves even if the marquee was built. */
@media (prefers-reduced-motion: reduce) {
  .brand-track { animation: none; }
}

@media (max-width: 640px) {
  .brand-run { gap: 28px; padding-right: 28px; }
  .brand-marquee {
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg,
      transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
}

/* The marquee's tiles need to hold their width rather than shrink to fit. */
.brand-marquee .brand-logo { flex: 0 0 auto; }


/* --- Information sheet pop-up ----------------------------------------------
   A picture the shop uploaded — pre-order guidelines, layaway plan, FAQs —
   shown over the page rather than on one of its own, so a customer partway
   through checkout doesn't lose their place.

   The image is allowed to be tall: these are documents, and cropping one to
   fit the viewport would hide the part that answers the question. So the box
   scrolls instead.
   -------------------------------------------------------------------------- */
.sheet-back {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* over the sticky header (50) */
  background: rgba(0, 31, 75, .72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px;
  overflow-y: auto;
  animation: sheet-in .16s var(--ease);
}
@keyframes sheet-in { from { opacity: 0; } to { opacity: 1; } }

.sheet-box {
  position: relative;
  max-width: 860px;
  width: 100%;
  margin: auto;                 /* centres a short sheet, top-aligns a long one */
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.sheet-box img { display: block; width: 100%; height: auto; }

.sheet-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
}
.sheet-close:hover { background: #fff; }
.sheet-close:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }

@media (max-width: 640px) {
  .sheet-back { padding: 12px 10px; }
}