/* ================================================================
   SHOP NOW — pieces shared between the desktop (shop.css) and mobile
   (shop.mobile.css) layouts: the SHOP BY accordion, the value-grid
   (Collection/Category/Style preview tiles), and the real product
   grid/card. Only the surrounding page chrome differs per breakpoint
   file — see plan section A/B.
   ================================================================ */

/* Locks the page's own scroll while the product-detail popup is open —
   the popup now sits over the real (dimmed) shop page instead of its own
   full-page background, so without this the page underneath would still
   scroll along with any touch/wheel input that lands outside the card. */
body.no-scroll { overflow: hidden; }

/* ---------- search bar ---------- */
.shop-search { width: 100%; }
.shop-search input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 999px;
  background: rgba(255, 248, 240, 0.96);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2);
  padding: 14px 22px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
}
.shop-search input::placeholder { color: #9a9086; }
.shop-search input:focus { outline: 2px solid var(--brand-red); outline-offset: 2px; }
/* Native search-input "clear" (x) button — recolor to match rather than
   leaving the browser-default gray circle. */
.shop-search input::-webkit-search-cancel-button { filter: none; opacity: 0.6; cursor: pointer; }

/* ---------- SHOP BY accordion ---------- */
.shop-by-row + .shop-by-row { border-top: 1px solid rgba(26, 26, 26, 0.08); }
.shop-by-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 14px 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.shop-by-toggle .chev { font-size: 11px; color: var(--brand-red); transition: transform 0.2s ease; }
.shop-by-toggle.is-active { font-weight: 800; }
.shop-by-toggle.is-active .chev { transform: rotate(180deg); }

.shop-by-list[hidden] { display: none; }
.shop-by-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 2px 14px 4px;
  /* Brand alone can run 80+ values — without a cap the list just grows
     past the bottom of the (sticky-positioned, so it can't rely on page
     scroll) Shop By card with no way to reach the rest. Scrolls
     internally instead, so the toggle rows above it stay reachable too. */
  max-height: min(50vh, 360px);
  overflow-y: auto;
}
.shop-by-list a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}
.shop-by-list a:hover { text-decoration: underline; }
.shop-by-list a.is-selected { font-weight: 800; color: var(--brand-red); }

/* ---------- value grid: same card/photo/label treatment as the home
   page's "Go Through the Racks" tiles (.rack-tile) — a white card with the
   photo inset on every side (not edge-to-edge), and the label overlaid
   directly on the photo (white text + shadow) rather than sitting below
   it in its own strip. ---------- */
.value-grid[hidden] { display: none; }
.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.value-tile {
  position: relative;
  border: none;
  background: #fff;
  border-radius: 40px;
  padding: clamp(10px, 1.6vw, 24px);
  cursor: pointer;
  text-align: left;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  display: block;
}
.value-tile-photo {
  position: relative;
  aspect-ratio: 312/400;
  border-radius: 24px;
  overflow: hidden;
  background: var(--cream);
  display: block;
}
.value-tile-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.value-tile-photo .no-photo {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8ae9a;
  font-size: 12px;
}
.value-tile-label {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 1.9vw, 27px);
  transform: translateX(-50%);
  display: block;
  color: #fff;
  font-size: clamp(13px, 1.25vw, 18px);
  font-weight: 800;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  white-space: normal;
  line-height: 1.15;
  text-align: center;
  width: calc(100% - 2 * clamp(10px, 1.6vw, 24px));
}

/* ---------- product grid (a specific value picked) ---------- */
.shop-grid-heading {
  color: var(--brand-red);
  font-size: clamp(24px, 3.6vw, 36px);
  margin: 0 0 clamp(16px, 2.4vw, 24px);
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
}
.shop-grid-empty { text-align: center; color: #8a8a8a; font-size: 15px; padding: 40px 0; }

.shop-card { background: var(--paper); }
.shop-card-photo {
  position: relative;
  aspect-ratio: 320/400;
  overflow: hidden;
  border-radius: 15px 15px 0 0;
  background: #ded9c9;
  cursor: pointer;
}
.shop-card-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.25s ease;
}
.shop-card-photo img.img-hover { opacity: 0; }
.shop-card:hover .shop-card-photo img.img-rest { opacity: 0; }
.shop-card:hover .shop-card-photo img.img-hover { opacity: 1; }
/* Catalog pieces added ahead of their Depop listing have no photo yet. */
.shop-card-photo .no-photo,
.pd-photo .no-photo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  color: #b8ae9a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.shop-card-info {
  border: 1px dashed rgba(163, 29, 31, 0.35);
  border-top: none;
  border-radius: 0 0 15px 15px;
  padding: 14px 16px 16px;
}
.shop-card-name {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-card-meta {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.shop-card-price { margin: 0; font-weight: 700; font-size: 15px; color: var(--ink); }

/* Single "Add to Cart" action, on both the grid tile and the detail popup —
   the Depop/Instagram/Local-checkout choice is made once, at checkout,
   instead of on every card. */
.add-to-cart-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: none;
  border-radius: 999px;
  background: var(--brand-red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 11px 0;
  cursor: pointer;
}
.add-to-cart-btn:hover { filter: brightness(1.08); }

/* ---------- product detail popup ---------- */
/* Background behind the card (the heart bubble-wrap texture) comes from
   .product-detail-popup in style.css; this is just the card itself. */
/* Hugs the card exactly (not the full viewport) so the close X, positioned
   relative to THIS wrapper, sits right at the card's own corner instead of
   floating in the screen corner. */
.product-detail-wrap {
  position: relative;
  width: min(420px, 90vw);
  max-height: 88vh;
}
.product-detail-popup .popup-close {
  top: -15px;
  right: -15px;
  width: 34px;
  height: 34px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.product-detail-card {
  width: min(420px, 90vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 18px;
  border: 3px solid #1a1a1a;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
}
/* Shorter than the original 320/400 — frees up enough vertical room that
   the card fits within max-height on short phone viewports without ever
   needing its own internal scroll. */
.pd-photo { position: relative; aspect-ratio: 320/360; background: var(--cream); overflow: hidden; }
.pd-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pd-slide.is-active { opacity: 1; }
.pd-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #1a1a1a;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.pd-arrow-prev { left: 10px; }
.pd-arrow-next { right: 10px; }
.pd-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.pd-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}
.pd-dot.is-active { background: #fff; }
.pd-body { padding: 18px 22px 22px; }
.pd-name { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ink); }
.pd-meta { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #8a8a8a; }
.pd-desc { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: #5a5a5a; }
/* Inline now (right next to the title, "Name - $25") instead of its own
   block below the description, so it reads as one line and the card takes
   up less vertical space. */
.pd-price { font-weight: 800; color: var(--brand-red); }