/* ── Store detail: shared cross-breakpoint styles ───────────────────────
   ONE #store-detail element/page for both breakpoints (see
   store-detail.js) — #store-detail-topbar uses the shared .page-topbar /
   .page-back-btn classes (variables.css), same as #browse-designs-topbar.
   Breakpoint-specific layout (header direction, photo size, font sizes)
   lives in desktop.css/mobile.css; this file holds everything that looks
   the same everywhere. */

#store-detail-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#store-detail-scroll::-webkit-scrollbar { width: 4px; }
#store-detail-scroll::-webkit-scrollbar-track { background: transparent; }
#store-detail-scroll::-webkit-scrollbar-thumb { background: var(--rule); }

/* Photo + its empty-state placeholder share one box (size set per
   breakpoint) so swapping [hidden] between them never shifts layout. */
#store-detail-photo {
  display: block;
  width: 100%;
  object-fit: cover;
}
#store-detail-photo[hidden] { display: none; }

#store-detail-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--rule);
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
#store-detail-photo-empty[hidden] { display: none; }

/* One big display headline per screen — the store name, in the same
   "large scale contrast reads as designed" device used elsewhere (see
   docs/UI_REDESIGN_2026-09.md). Font size is set per breakpoint. */
#store-detail-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.05;
}

#store-detail-name-sub {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-top: 4px;
}

#store-detail-address {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 10px;
  line-height: 1.5;
}

#store-detail-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
#store-detail-maps-link:hover { opacity: 0.7; }

/* Reused verbatim from the existing per-consignor copy in i18n.js/
   content.js (infoSunInAlleyDesc etc, see store-detail.js's
   getConsignorBlurb) rather than inventing new wording per store. */
#store-detail-blurb {
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.75;
  margin-top: 14px;
}
#store-detail-blurb[hidden] { display: none; }

#store-detail-updated {
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 10px;
  letter-spacing: 0.02em;
}
#store-detail-updated[hidden] { display: none; }

/* One .thumb-strip-wrap row per category, built in store-detail.js — see
   the note in filter.css about why .thumb-strip-wrap itself stays
   unscoped/plain here (this file must NOT redeclare its flex-grow
   browse-panel behaviour). */
#store-detail-inventory {
  border-top: 1px solid var(--ink);
  padding-top: 12px;
}

.store-detail-cat-label {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.store-detail-cat-label:not(:first-child) { margin-top: 24px; }

/* "gallery" page_template only (see store-detail.js) — same divider
   treatment as #store-detail-inventory above, since exactly one of the
   two is ever visible for a given store. Deliberately not thumb-strip.js:
   that component is sized for small square tile-design thumbnails with a
   caption per item, not a handful of large storefront/city photos. */
#store-detail-gallery-section {
  border-top: 1px solid var(--ink);
  padding-top: 12px;
}
#store-detail-gallery-section[hidden] { display: none; }

#store-detail-gallery {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
#store-detail-gallery::-webkit-scrollbar { height: 4px; }
#store-detail-gallery::-webkit-scrollbar-track { background: transparent; }
#store-detail-gallery::-webkit-scrollbar-thumb { background: var(--rule); }

.store-detail-gallery-item { flex-shrink: 0; }

.store-detail-gallery-img {
  display: block;
  object-fit: cover;
  /* width/height set per breakpoint — desktop.css/mobile.css */
}