/* ══════════════════════════════════════════════════════════════════════════
   The shelves: every place the shop shows products.

   Same world as the island front door (css/town-glass.css): cream paper,
   forest ink, soft depth, nothing outlined in black. Each department keeps
   the colour of its district on the island, so you always know which aisle
   you are standing in.

   A product sits on a tinted stage: seller photos with white backgrounds are
   multiplied onto the tint, so a shelf of mixed eBay photos reads as one
   collection instead of a wall of rectangles.

   Two ways to touch it:
     mouse    the card leans toward the pointer, light glances off it, the
              second photo fades in, the name gets a drawn underline and
              "Add" slides up;
     finger   photos are a swipe strip with dots, "+" is always there at
              thumb size, and a press gives a small squeeze.
   Motion is transform and opacity only, and switched off for reduced motion.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --sh-paper: #f4f5e9;
  --sh-paper-2: #ebeedf;
  --sh-card: #fbfcf6;
  --sh-ink: #17382f;
  --sh-ink-2: #36554a;
  --sh-muted: #5a6c60;
  --sh-line: #d6dfcf;
  --sh-cta: #1f4a3a;
  --sh-cta-2: #2b604b;
  --sh-red: #b8321f;
  --sh-gap: clamp(16px, 2.2vw, 24px);
  --sh-wrap: 1360px;
  --sh-out: cubic-bezier(.16, 1, .3, 1);
  --sh-quart: cubic-bezier(.25, 1, .5, 1);
  --t-bg: #e9e6d8;
  --t-ink: #5b5444;
}

/* The island's district colours, one per department. */
[data-tint="jewelry"] { --t-bg: #f7ddd5; --t-ink: #96331f; }
[data-tint="home"]    { --t-bg: #f5e5bb; --t-ink: #6f4d14; }
[data-tint="beauty"]  { --t-bg: #e8def3; --t-ink: #5e4282; }
[data-tint="tech"]    { --t-bg: #d2e8ee; --t-ink: #285f72; }
[data-tint="pets"]    { --t-bg: #dae9cd; --t-ink: #3d6534; }
[data-tint="kids"]    { --t-bg: #f3dec4; --t-ink: #82512b; }
[data-tint="outdoor"] { --t-bg: #e0e8c3; --t-ink: #4a5f1c; }
[data-tint="women"]   { --t-bg: #f4dae4; --t-ink: #852c57; }
[data-tint="men"]     { --t-bg: #dadff0; --t-ink: #323f76; }
[data-tint="more"]    { --t-bg: #e9e6d8; --t-ink: #5b5444; }

/* ── The page ─────────────────────────────────────────────────────────── */

body.shelf-page {
  /* The park band runs edge to edge (100vw): clip, so it never adds a
     sideways scroll. clip, not hidden, keeps the sticky header working. */
  overflow-x: clip;
  background: var(--sh-paper);
  background-image: none;
  color: var(--sh-ink);
  font-family: Nunito, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.shelf-page h1, .shelf-page h2, .shelf-page h3 { font-family: Fredoka, Nunito, system-ui, sans-serif; }
.shelf-wrap {
  max-width: var(--sh-wrap);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 28px);
}
.shelf-page main { padding-bottom: 72px; }
.shelf-page :is(a, button, input, select):focus-visible {
  outline: 3px solid var(--sh-ink);
  outline-offset: 3px;
  border-radius: 10px;
}
.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;
}

/* ── The header, in island ink ────────────────────────────────────────────
   The shared header (css/head.css) is drawn in the old black-outline style.
   On the shelves and product pages it takes the island's softer hand: same
   layout and controls, forest ink, rounded pills, no hard shadows. */
:is(.shelf-page, .pdp-alive, .town-front) .db-head {
  --dbh-ink: #17382f;
  --dbh-muted: #5a6c60;
  --dbh-accent: #b8321f;
  --dbh-line: #dfe5d6;
  background: rgba(244, 245, 233, .88);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid #dfe5d6;
}
:is(.shelf-page, .pdp-alive, .town-front) .db-head .db-brand b { color: #c0321c; }
:is(.shelf-page, .pdp-alive, .town-front) .db-pill {
  border: 1px solid #cbd6c6;
  border-radius: 99px;
  background: #fbfcf6;
  box-shadow: none;
  transition: background .2s ease, box-shadow .3s ease, transform .4s var(--sh-out);
}
:is(.shelf-page, .pdp-alive, .town-front) .db-pill:hover { transform: translateY(-1px); background: #fff; box-shadow: 0 8px 16px -10px rgba(23, 56, 47, .45); }
:is(.shelf-page, .pdp-alive, .town-front) .db-pill:active { transform: scale(.97); box-shadow: none; }
:is(.shelf-page, .pdp-alive, .town-front) .db-search input { border: 1px solid #cbd6c6; border-radius: 99px; background: #fbfcf6; }
:is(.shelf-page, .pdp-alive, .town-front) .db-search input:focus { border-color: var(--sh-cta); box-shadow: 0 0 0 4px rgba(31, 74, 58, .14); }
:is(.shelf-page, .pdp-alive, .town-front) .db-mega {
  border: 1px solid #dfe5d6;
  border-radius: 26px;
  box-shadow: 0 30px 60px -30px rgba(23, 56, 47, .45);
}
:is(.shelf-page, .pdp-alive, .town-front) .db-cart-n { background: #c0321c; }

/* ── The product card ─────────────────────────────────────────────────── */

.pc {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--sh-ink);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .55s var(--sh-out);
}
.pc-figure { position: relative; }
.pc-media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background: var(--t-bg);
  isolation: isolate;
  transition: box-shadow .55s var(--sh-out);
  -webkit-tap-highlight-color: transparent;
}
/* A pool of light behind the product: it swells when you come close. */
.pc-media::before {
  content: "";
  position: absolute;
  inset: 12% 10% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 248, .78), rgba(255, 255, 248, 0));
  transform: scale(.88);
  transition: transform .8s var(--sh-out);
  z-index: 0;
}
/* No z-index here: the photos must blend (multiply) with the tinted stage
   below them, and a stacking context would leave them nothing to blend with. */
.pc-track { position: absolute; inset: 0; display: block; }
.pc-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 8%;
  box-sizing: border-box;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: opacity .5s ease, transform .8s var(--sh-out);
}
.pc-shot.is-alt { opacity: 0; }
.pc-shot.is-extra, .pc-dots { display: none; }
.pc-shot[data-src] { visibility: hidden; }

.pc-chips {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 250, .86);
  color: var(--t-ink);
  font: 800 11.5px/1 Nunito, system-ui, sans-serif;
  letter-spacing: .01em;
}
.pc-chip--new { background: var(--sh-ink); color: var(--sh-paper); }
.pc-chip--new::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9fe0b4;
  box-shadow: 0 0 0 0 rgba(159, 224, 180, .7);
  animation: sh-ping 2.4s var(--sh-out) infinite;
}
@keyframes sh-ping {
  0% { box-shadow: 0 0 0 0 rgba(159, 224, 180, .65); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(159, 224, 180, 0); }
}

/* Add to cart: a pill that lives on the photo's corner. */
.pc-add {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 99px;
  background: var(--sh-cta);
  color: var(--sh-paper);
  font: 800 14px/1 Nunito, system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 20px -10px rgba(16, 45, 37, .7);
  transition: transform .45s var(--sh-out), opacity .35s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.pc-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc-add-done { display: none; }
.pc-add:hover { background: var(--sh-cta-2); }
.pc-add.is-busy { opacity: .7; pointer-events: none; }
.pc-add.is-added { background: #2f7a55; }
.pc-add.is-added .pc-add-plus { display: none; }
.pc-add.is-added .pc-add-done { display: block; animation: sh-pop .5s var(--sh-out); }
.pc-add--choose { padding: 0 16px; background: rgba(255, 255, 250, .92); color: var(--sh-ink); }
.pc-add--choose:hover { background: #fff; }
@keyframes sh-pop { from { transform: scale(.4); } to { transform: scale(1); } }

.pc-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 4px 0;
  flex: 1;
}
.pc-kicker {
  margin: 0;
  color: var(--t-ink);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-name {
  position: relative;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.005em;
}
.pc-name a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The name is the card's link for keyboards and screen readers; its hit
   area covers the words below the photo (the photo is its own link, so a
   finger can still swipe the photo strip). */
.pc-name a::after { content: ""; position: absolute; inset: -14px -4px 0; z-index: 2; }
.pc-body { isolation: isolate; }
.pc-name a { position: static; }
.pc-body > :not(.pc-name) { position: relative; }
.pc-squiggle {
  position: absolute;
  left: 0;
  bottom: -5px;
  width: min(120px, 70%);
  height: 8px;
  overflow: visible;
  pointer-events: none;
}
.pc-squiggle path {
  fill: none;
  stroke: var(--t-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  transition: stroke-dashoffset .7s var(--sh-out);
}
.pc-tag {
  margin: 2px 0 0;
  color: var(--sh-muted);
  font-size: 13.5px;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-for {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 13px;
}
.pc-for span { color: var(--sh-muted); font-weight: 800; margin-right: 2px; }
.pc-for em {
  font-style: normal;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 99px;
  background: var(--t-bg);
  color: var(--t-ink);
}
.pc-foot {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: auto;
  padding-top: 6px;
}
.pc-price {
  font-family: Fredoka, Nunito, system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--sh-ink);
}
.pc-ship, .pc-rate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sh-muted);
  font-size: 12.5px;
  font-weight: 700;
}
.pc-ship svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pc-rate span { color: #b07a12; }

/* Mouse and trackpad: the shelf comes alive under the pointer. */
@media (hover: hover) and (pointer: fine) {
  .pc:hover { --lift: -6px; }
  .pc:hover .pc-media { box-shadow: 0 26px 40px -26px color-mix(in srgb, var(--t-ink) 70%, transparent); }
  .pc:hover .pc-media::before { transform: scale(1.14); }
  .pc:hover .pc-shot.is-main { transform: scale(1.045); }
  .pc.has-alt:hover .pc-shot.is-main { opacity: 0; }
  .pc.has-alt:hover .pc-shot.is-alt { opacity: 1; transform: scale(1.03); }
  .pc:hover .pc-squiggle path,
  .pc:focus-within .pc-squiggle path { stroke-dashoffset: 0; }
  .pc-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 46%);
    opacity: 0;
    transition: opacity .45s ease;
  }
  .pc:hover .pc-media::after { opacity: 1; }
  .pc-add { opacity: 0; transform: translateY(10px) scale(.92); }
  .pc:hover .pc-add, .pc:focus-within .pc-add, .pc-add.is-added { opacity: 1; transform: none; }
}

/* Fingers: swipe the photos, "+" always within reach. */
@media (hover: none), (pointer: coarse) {
  .pc-add { padding: 0; width: 44px; }
  .pc-add-label { display: none; }
  .pc-add--choose { width: auto; padding: 0 14px; }
  .pc-add--choose .pc-add-label { display: inline; font-size: 13px; }
  .pc:active .pc-media { transform: scale(.985); transition: transform .2s ease; }
  html.shelf-js .pc-track.has-more {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  html.shelf-js .pc-track.has-more::-webkit-scrollbar { display: none; }
  html.shelf-js .pc-track.has-more .pc-shot {
    position: relative;
    flex: 0 0 100%;
    display: block;
    opacity: 1;
    scroll-snap-align: center;
  }
  html.shelf-js .pc-track.has-more ~ .pc-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 3;
    display: flex;
    gap: 5px;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .pc-dots i {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--t-ink) 30%, transparent);
    transition: width .3s var(--sh-out), background .3s ease;
  }
  .pc-dots i.on { width: 16px; background: var(--t-ink); }
}

/* The feature card: one product per row of four gets the big stage. */
.pc--feature .pc-media { border-radius: 32px; }
.pc--feature .pc-name { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.015em; }
.pc--feature .pc-tag { font-size: 15.5px; -webkit-line-clamp: 3; }
.pc--feature .pc-price { font-size: 26px; }
.pc--feature .pc-shot { padding: 10%; }
.pc--compact .pc-name { font-size: 15.5px; }

/* Arriving on screen: a short rise, row by row. */
html.shelf-js .pc.will-reveal { opacity: 0; translate: 0 18px; }
html.shelf-js .pc.will-reveal.is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity .7s var(--sh-out) calc(var(--i) * 70ms),
              translate .9s var(--sh-out) calc(var(--i) * 70ms),
              transform .55s var(--sh-out);
}

/* ── Grids ────────────────────────────────────────────────────────────── */

.shelf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 40px var(--sh-gap);
}
.shelf-grid .pc--feature { grid-column: span 2; grid-row: span 2; }
.shelf-grid .pc--feature.is-end { grid-column: 3 / span 2; }
@media (max-width: 1080px) {
  .shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shelf-grid .pc--feature.is-end { grid-column: 2 / span 2; }
}
@media (max-width: 720px) {
  .shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 12px; }
  .shelf-grid .pc--feature, .shelf-grid .pc--feature.is-end { grid-column: 1 / -1; grid-row: span 1; }
  .pc-name { font-size: 15.5px; }
  .pc-tag { font-size: 13px; }
  .pc-price { font-size: 18px; }
  .pc-media { border-radius: 20px; }
  .pc-chips { left: 9px; top: 9px; }
  .pc-add { right: 9px; bottom: 9px; }
}

/* A note from the shop, tucked into the grid like a card left on the shelf. */
.shelf-note {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 22px 20px;
  border-radius: 26px;
  background: #fbf3d2;
  color: #4b3d17;
  rotate: -1.2deg;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 30px -24px rgba(75, 61, 23, .5);
}
.shelf-note h3 { margin: 0; font-size: 22px; line-height: 1.1; color: #3b2f0f; }
.shelf-note p { margin: 0; font-size: 14.5px; line-height: 1.5; }
.shelf-note svg { width: 92px; height: 74px; overflow: visible; }
.shelf-note svg * { fill: none; stroke: #3b2f0f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.shelf-note .note-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 700; }
.shelf-note .note-steps li::before { content: counter(step); counter-increment: step; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: #3b2f0f; color: #fbf3d2; font-size: 12px; }
.shelf-note .note-steps { counter-reset: step; }
@media (max-width: 720px) { .shelf-note { grid-column: 1 / -1; rotate: -.6deg; } }

/* ── The shop: hero and window ────────────────────────────────────────── */

.shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(26px, 5vw, 64px) 0 clamp(18px, 3vw, 34px);
}
.shop-hero .eyebrow {
  margin: 0 0 12px;
  color: var(--sh-muted);
  font-size: 13px;
  font-weight: 800;
}
.shop-hero h1 {
  margin: 0;
  font-size: clamp(46px, 6.6vw, 96px);
  line-height: .94;
  letter-spacing: -.04em;
  color: var(--sh-ink);
}
.shop-hero h1 em { font-style: normal; color: var(--sh-cta-2); }
.shop-hero .lead {
  max-width: 34ch;
  margin: 20px 0 0;
  color: var(--sh-ink-2);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  font-weight: 600;
}
.shop-hero .hero-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.sh-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 99px;
  background: var(--sh-cta);
  color: var(--sh-paper);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  transition: background .2s ease, transform .4s var(--sh-out);
}
.sh-btn:hover { background: var(--sh-cta-2); transform: translateY(-2px); }
.sh-btn.alt { background: transparent; color: var(--sh-ink); box-shadow: inset 0 0 0 1.5px #b9c7b6; }
.sh-btn.alt:hover { background: #fff; }
.sh-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Three of the newest finds, laid on the table like photos. */
.window { position: relative; aspect-ratio: 6 / 5; max-width: 560px; justify-self: end; width: 100%; }
.window-shot {
  position: absolute;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 28px;
  background: var(--t-bg);
  box-shadow: 0 30px 50px -30px rgba(23, 56, 47, .55), 0 1px 0 rgba(255, 255, 255, .7) inset;
  overflow: hidden;
  isolation: isolate;
  rotate: var(--r);
  transition: rotate .7s var(--sh-out), transform .7s var(--sh-out), box-shadow .5s ease;
  animation: sh-float 7s ease-in-out infinite;
  animation-delay: var(--d);
}
.window-shot img { width: 100%; height: 100%; padding: 9%; box-sizing: border-box; object-fit: contain; mix-blend-mode: multiply; }
.window-shot:nth-child(1) { left: 0; top: 18%; --r: -8deg; --d: 0s; z-index: 1; }
.window-shot:nth-child(2) { left: 27%; top: 0; --r: 3deg; --d: -2.3s; z-index: 2; }
.window-shot:nth-child(3) { left: 50%; top: 32%; --r: 10deg; --d: -4.6s; z-index: 3; }
.window-shot .ws-label {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 250, .9);
  color: var(--sh-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .5s var(--sh-out);
}
.window-tag {
  position: absolute;
  right: 4%;
  top: 4%;
  z-index: 4;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--sh-ink);
  color: var(--sh-paper);
  font: 700 15px/1 Fredoka, system-ui, sans-serif;
  rotate: 6deg;
}
@keyframes sh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (max-width: 820px) {
  .shop-hero { grid-template-columns: 1fr; gap: 18px; padding-top: 22px; }
  .shop-hero h1 { font-size: clamp(46px, 13.5vw, 72px); }
  .shop-hero .lead { max-width: 40ch; font-size: 17px; }
  .hero-links .sh-btn { flex: 1 1 auto; justify-content: center; }
  .window { justify-self: center; max-width: 440px; aspect-ratio: 7 / 5; }
  .window-shot { width: 46%; border-radius: 22px; }
  .window-shot:nth-child(1) { left: 2%; top: 16%; }
  .window-shot:nth-child(2) { left: 28%; top: 2%; }
  .window-shot:nth-child(3) { left: 52%; top: 24%; }
  .window-tag { right: 0; top: 0; font-size: 13px; }
}
@media (hover: hover) and (pointer: fine) {
  .window:hover .window-shot:nth-child(1) { transform: translate(-6%, 2%); }
  .window:hover .window-shot:nth-child(3) { transform: translate(6%, 4%); }
  .window-shot:hover { rotate: 0deg; z-index: 5; box-shadow: 0 36px 60px -30px rgba(23, 56, 47, .7); }
  .window-shot:hover .ws-label { opacity: 1; transform: none; }
}

/* ── The aisles: departments as places, not words ────────────────────── */

.shelf-section { margin-top: clamp(40px, 6vw, 72px); }
.shelf-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.shelf-head h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1;
  letter-spacing: -.025em;
}
.shelf-head p { margin: 8px 0 0; color: var(--sh-muted); font-weight: 600; max-width: 60ch; }
.shelf-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 99px;
  color: var(--sh-ink);
  font-weight: 800;
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px #c3cfbf;
  transition: background .2s ease;
}
.shelf-more:hover { background: #fff; }
@media (max-width: 720px) {
  .shelf-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .shelf-head .rail-btns { display: none; }
}
.shelf-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: transform .4s var(--sh-out); }
.shelf-more:hover svg { transform: translateX(3px); }

.atlas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(210px, auto);
  gap: var(--sh-gap);
}
.aisle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 210px;
  padding: 22px 22px 20px;
  border-radius: 30px;
  background: var(--t-bg);
  color: var(--t-ink);
  overflow: hidden;
  isolation: isolate;
  transition: transform .6s var(--sh-out), box-shadow .6s var(--sh-out);
}
.aisle--hero { grid-column: span 2; grid-row: span 2; padding: 30px; }
.aisle-link { color: inherit; text-decoration: none; }
.aisle-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.aisle h3 { margin: 0; font-size: 26px; line-height: 1.05; letter-spacing: -.02em; max-width: 11ch; }
.aisle--hero h3 { font-size: clamp(36px, 4vw, 54px); max-width: 9ch; }
.aisle-count { margin: 8px 0 0; font-size: 13.5px; font-weight: 800; opacity: .85; position: relative; z-index: 1; }
.aisle-subs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; position: relative; z-index: 3; max-width: 62%; }
.aisle-subs a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(255, 255, 250, .66);
  color: var(--t-ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s ease;
}
.aisle-subs a:hover { background: #fff; }
.aisle-subs small { margin-left: 6px; font-weight: 700; opacity: .7; }
/* The aisle's doodle, drawn in the department's own ink. */
.aisle-doodle {
  position: absolute;
  right: 18px;
  top: 16px;
  width: 64px;
  height: 64px;
  opacity: .55;
  z-index: 0;
  transition: transform .8s var(--sh-out), opacity .3s ease;
}
.aisle-doodle * { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.aisle--hero .aisle-doodle { width: 96px; height: 96px; right: 28px; top: 26px; }
/* A little fan of what is actually on the shelf, always whole. */
.aisle-fan { position: absolute; right: 14px; bottom: 14px; width: min(52%, 230px); aspect-ratio: 1.6; z-index: 1; pointer-events: none; }
.aisle--hero .aisle-fan { width: min(46%, 400px); right: 26px; bottom: 26px; }
.aisle--hero .aisle-subs { max-width: 46%; }
.aisle-fan img {
  position: absolute;
  width: 50%;
  height: auto;
  aspect-ratio: 1;
  padding: 7%;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 22px;
  background: rgba(255, 255, 250, .55);
  mix-blend-mode: multiply;
  box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .45);
  transition: transform .8s var(--sh-out);
}
.aisle-fan img:nth-child(1) { left: 0; top: 20%; transform: rotate(-10deg); }
.aisle-fan img:nth-child(2) { left: 25%; top: 0; transform: rotate(-2deg); z-index: 1; }
.aisle-fan img:nth-child(3) { left: 50%; top: 16%; transform: rotate(9deg); z-index: 2; }
@media (hover: hover) and (pointer: fine) {
  .aisle:hover { transform: translateY(-5px); box-shadow: 0 30px 46px -32px color-mix(in srgb, var(--t-ink) 75%, transparent); }
  .aisle:hover .aisle-fan img:nth-child(1) { transform: translate(-10%, -6%) rotate(-17deg); }
  .aisle:hover .aisle-fan img:nth-child(2) { transform: translate(0, -12%) rotate(0deg); }
  .aisle:hover .aisle-fan img:nth-child(3) { transform: translate(10%, -4%) rotate(15deg); }
  .aisle:hover .aisle-doodle { transform: rotate(-8deg) scale(1.1); opacity: .9; }
}
.aisle--crown { background: #8d2c1f; color: #fff6ea; }
.aisle--crown .aisle-subs a { background: rgba(255, 246, 234, .16); color: #fff6ea; }
.aisle--crown p { max-width: 26ch; font-weight: 600; line-height: 1.45; margin: 10px 0 0; position: relative; z-index: 1; }

@media (max-width: 1080px) {
  .atlas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .atlas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(168px, auto); gap: 12px; }
  .aisle { min-height: 168px; padding: 16px; border-radius: 24px; }
  .aisle--hero { grid-column: 1 / -1; grid-row: span 1; min-height: 220px; padding: 20px; }
  .aisle h3 { font-size: 20px; }
  .aisle--hero h3 { font-size: 34px; }
  .aisle-subs { display: none; }
  .aisle--hero .aisle-subs { display: flex; max-width: 54%; gap: 5px; }
  .aisle--hero .aisle-subs a { min-height: 32px; padding: 5px 10px; font-size: 12.5px; }
  .aisle-doodle { width: 44px; height: 44px; right: 12px; top: 12px; }
  .aisle-fan { width: 64%; right: 10px; bottom: 10px; }
  .aisle--hero .aisle-fan { width: 40%; right: 12px; bottom: 16px; }
}

/* A rail of what came in today. */
.rail-wrap { position: relative; }
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 21vw, 252px);
  gap: var(--sh-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  padding: 4px 4px 12px;
  margin: -4px -4px 0;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-btns { display: flex; gap: 8px; }
.rail-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--sh-ink);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px #c3cfbf;
  transition: background .2s ease, opacity .2s ease;
}
.rail-btn:hover { background: var(--sh-paper-2); }
.rail-btn:disabled { opacity: .35; cursor: default; }
.rail-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none), (pointer: coarse) { .rail-btns { display: none; } }
@media (max-width: 720px) { .rail { grid-auto-columns: 62vw; gap: 12px; } }

/* ── A department: its own coloured room ──────────────────────────────── */

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 14px; color: var(--sh-muted); font-size: 14px; font-weight: 700; }
.crumbs a { color: inherit; text-underline-offset: 3px; }
.crumbs span[aria-hidden] { opacity: .5; }
.room {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 24px;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 36px;
  background: var(--t-bg);
  color: var(--t-ink);
  overflow: hidden;
  isolation: isolate;
}
.room h1 { margin: 0; font-size: clamp(40px, 5.6vw, 76px); line-height: .95; letter-spacing: -.035em; }
.room .lead { margin: 16px 0 0; max-width: 46ch; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; font-weight: 600; color: color-mix(in srgb, var(--t-ink) 82%, #000); }
.room .aisle-fan { position: relative; right: auto; bottom: auto; width: 100%; max-width: 380px; justify-self: end; align-self: center; }
.room .aisle-doodle { right: 28px; top: 24px; width: 72px; height: 72px; opacity: .45; }
.room .aisle-fan { z-index: 1; }
.subnav { grid-column: 1 / -1; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 4px -4px -4px; padding: 4px; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 46px;
  padding: 5px 16px 5px 5px;
  border-radius: 99px;
  background: rgba(255, 255, 250, .7);
  color: var(--t-ink);
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: background .2s ease, transform .4s var(--sh-out);
}
.subnav a.no-thumb { padding-left: 16px; }
.subnav a:hover { background: #fff; transform: translateY(-2px); }
.subnav a.active { background: var(--t-ink); color: var(--sh-paper); }
.subnav img { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; padding: 4px; box-sizing: border-box; background: var(--t-bg); mix-blend-mode: multiply; }
.subnav a.active img { mix-blend-mode: normal; background: rgba(255, 255, 250, .85); }
.subnav small { font-weight: 700; opacity: .7; }
@media (max-width: 720px) {
  .room { grid-template-columns: 1fr; border-radius: 28px; padding: 22px 18px 18px; }
  .room .aisle-fan { position: absolute; right: 10px; top: 14px; width: 44%; opacity: .95; }
  .room h1, .room .lead { position: relative; z-index: 2; max-width: 62%; }
  .room .lead { max-width: 100%; }
  .room .aisle-doodle { display: none; }
}

/* Sort, search and the count: one quiet row. */
.shelf-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 26px 0 24px;
}
.shelf-count { margin: 0; color: var(--sh-muted); font-weight: 800; }
.shelf-count b { color: var(--sh-ink); }
.sorts { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--sh-paper-2); overflow-x: auto; scrollbar-width: none; }
.sorts::-webkit-scrollbar { display: none; }
.sorts a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 99px;
  color: var(--sh-ink-2);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.sorts a:hover { background: rgba(255, 255, 250, .8); }
.sorts a[aria-current] { background: #fff; color: var(--sh-ink); box-shadow: 0 2px 8px -4px rgba(23, 56, 47, .4); }
.shelf-find { display: flex; align-items: center; gap: 0; min-width: min(320px, 100%); border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1.5px #ccd8c8; }
.shelf-find input { flex: 1; min-width: 0; min-height: 46px; padding: 0 6px 0 18px; border: 0; background: transparent; color: var(--sh-ink); font: 700 15px Nunito, system-ui, sans-serif; }
.shelf-find input:focus { outline: none; }
.shelf-find:focus-within { box-shadow: inset 0 0 0 2px var(--sh-ink); }
.shelf-find button { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: transparent; color: var(--sh-ink); cursor: pointer; }
.shelf-find svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tools-right { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
@media (min-width: 980px) { .tools-right { flex-wrap: nowrap; } }
@media (max-width: 720px) {
  .shelf-tools { margin: 18px 0; }
  .tools-right { width: 100%; }
  .sorts { width: 100%; }
  .shelf-find { width: 100%; }
}

.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 44px; }
.pager a, .pager span {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 99px;
  color: var(--sh-ink);
  font-weight: 800;
  text-decoration: none;
}
.pager a { box-shadow: inset 0 0 0 1.5px #c9d4c5; }
.pager a:hover { background: #fff; }
.pager .current { background: var(--sh-ink); color: var(--sh-paper); }
.pager .disabled { opacity: .4; }

.shelf-empty {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 34px;
  border-radius: 30px;
  background: var(--sh-paper-2);
  color: var(--sh-ink-2);
  font-weight: 700;
}
.shelf-empty h2 { margin: 0; font-size: 28px; color: var(--sh-ink); }
.shelf-empty p { margin: 0; max-width: 52ch; line-height: 1.55; }

/* The buying guide some aisles carry (dog bandana sizes, for one). */
.guide-card {
  display: grid;
  gap: 18px;
  margin: 26px 0 0;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 30px;
  background: var(--sh-card);
  box-shadow: inset 0 0 0 1.5px var(--sh-line);
}
.guide-card .answer { margin: 0; max-width: 80ch; font-size: 17px; line-height: 1.65; font-weight: 600; }
.guide-card .answer b { color: var(--t-ink); }
.guide-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.guide-facts article { padding: 16px; border-radius: 20px; background: var(--t-bg); color: var(--t-ink); }
.guide-facts h2 { margin: 0 0 6px; font-size: 19px; }
.guide-facts p { margin: 0; line-height: 1.5; color: color-mix(in srgb, var(--t-ink) 80%, #000); }
.guide-links { display: flex; flex-wrap: wrap; gap: 8px; }
.guide-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 99px; background: var(--sh-paper-2); color: var(--sh-ink); font-weight: 800; text-decoration: none; }
.guide-links a:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--sh-line); }
.guide-faq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.guide-faq details { padding: 14px 16px; border-radius: 18px; background: var(--sh-paper); }
.guide-faq summary { cursor: pointer; font-weight: 800; }
.guide-faq p { margin: 8px 0 0; color: var(--sh-muted); line-height: 1.5; }
@media (max-width: 720px) { .guide-facts, .guide-faq { grid-template-columns: 1fr; } }

/* Added to the cart: a quiet confirmation instead of a page change. */
.shelf-toast {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(420px, calc(100vw - 24px));
  padding: 10px 10px 10px 10px;
  border-radius: 22px;
  background: var(--sh-ink);
  color: var(--sh-paper);
  box-shadow: 0 24px 50px -20px rgba(10, 30, 24, .7);
  transform: translate(-50%, 140%);
  transition: transform .6s var(--sh-out);
}
.shelf-toast.is-on { transform: translate(-50%, 0); }
.shelf-toast img { width: 48px; height: 48px; flex: none; border-radius: 14px; object-fit: contain; padding: 4px; box-sizing: border-box; background: var(--sh-paper); }
.shelf-toast p { margin: 0; flex: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
.shelf-toast p b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; }
.shelf-toast a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 99px; background: var(--sh-paper); color: var(--sh-ink); font-weight: 800; text-decoration: none; }
@media (min-width: 900px) { .shelf-toast { left: auto; right: 24px; transform: translate(0, 140%); } .shelf-toast.is-on { transform: none; } }

/* The park strip between shelves keeps the cast walking past. */
.shelf-page .park-band.is-strip { max-height: 120px; margin: clamp(36px, 5vw, 60px) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .pc, .pc-media, .pc-shot, .aisle, .aisle-fan img, .window-shot, .shelf-toast, .sh-btn, .subnav a { transition: none !important; animation: none !important; }
  .pc-chip--new::before { animation: none; }
  html.shelf-js .pc.will-reveal { opacity: 1; translate: none; }
  .pc { transform: none !important; }
}
@media (forced-colors: active) {
  .pc-media, .aisle, .room, .shelf-note { border: 1px solid CanvasText; }
  .pc-shot { mix-blend-mode: normal; }
}

/* ── The cookie question, in the island's hand ───────────────────────────
   Two banners ask it: the town's own (.tcookie) and the shared partial
   (.cookiejar, styled in bazaar2.css). Same question, softer paper. */
:is(.shelf-page, .pdp-alive, .town-front) :is(.tcookie, .cookiejar) {
  border: 0;
  border-radius: 24px;
  padding: 16px 18px;
  background: rgba(251, 252, 246, .97);
  box-shadow: 0 24px 50px -24px rgba(16, 45, 37, .55), inset 0 0 0 1px #dfe5d6;
  color: var(--sh-ink-2);
}
:is(.shelf-page, .pdp-alive, .town-front) :is(.tck-text, .cookiejar .cktext) b { color: var(--sh-ink); font-family: Fredoka, Nunito, sans-serif; }
:is(.shelf-page, .pdp-alive, .town-front) :is(.tck-text, .cookiejar .cktext) a { color: var(--sh-ink); border: 0; text-decoration: underline; text-underline-offset: 3px; }
:is(.shelf-page, .pdp-alive, .town-front) :is(.tck-btn, .cookiejar .btn) {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 99px;
  background: var(--sh-cta);
  color: var(--sh-paper);
  box-shadow: none;
  font-weight: 800;
  cursor: pointer;
}
:is(.shelf-page, .pdp-alive, .town-front) :is(.tck-btn, .cookiejar .btn).ghost { background: transparent; color: var(--sh-ink); box-shadow: inset 0 0 0 1.5px #b9c7b6; }
:is(.shelf-page, .pdp-alive, .town-front) :is(.tck-btn, .cookiejar .btn):active { transform: scale(.97); box-shadow: none; }