/** Shopify CDN: Minification failed

Line 15:20 Expected identifier but found whitespace
Line 15:21 Unexpected "rgb("

**/
/* ============================================================
 * Seller Storefront (v2) — Etsy-style layout, Cratejoy brand.
 * Implements the design at /Store Collection Design/.
 *
 * Brand tokens (mirrors cratejoy-tokens.css from the design):
 *   --font-sans   : 'muli', 'Mulish', system-ui, sans-serif
 *   --font-serif  : 'lora', 'Lora', Georgia, serif
 *   teal-primary  : rgb(38, 130, 133)   /* --dark-teal */
 *   teal-100      : rgb(237, 249, 249)
 *   ink/dark-gray : rgb(51, 51, 51)
 *   slate         : rgb(75, 75, 75)
 *   dim-gray      : rgb(112, 112, 112)
 *   smoke (border): rgb(224, 224, 224)
 *   salt (bg-soft): rgb(248, 251, 251)
 *   orange (stars): rgb(252, 182, 62)
 *   green         : rgb(29, 180, 102)
 *   salmon        : rgb(255, 93, 82)
 *   pink          : rgb(244, 129, 123)
 *   muted-purple  : rgb(82, 105, 105)
 * ============================================================ */

.seller-page {
  --sp-teal:        rgb(38, 130, 133);
  --sp-teal-soft:   rgb(237, 249, 249);
  --sp-ink:         rgb(51, 51, 51);
  --sp-fg2:         rgb(75, 75, 75);
  --sp-fg3:         rgb(112, 112, 112);
  --sp-border:      rgb(224, 224, 224);
  --sp-bg-soft:     rgb(248, 251, 251);
  --sp-orange:      rgb(252, 182, 62);
  --sp-green:       rgb(29, 180, 102);
  --sp-salmon:      rgb(255, 93, 82);
  --sp-pink:        rgb(244, 129, 123);
  --sp-muted-purple:rgb(82, 105, 105);
  --sp-shadow:      0 2px 5px 0 rgba(0,0,0,.05);
  --sp-shadow-soft: 0 6px 18px rgba(0,0,0,.06);

  font-family: var(--font-sans, 'muli', 'Mulish', -apple-system, sans-serif);
  color: var(--sp-ink);
  background: #fff;
}

.seller-page *, .seller-page *::before, .seller-page *::after { box-sizing: border-box; }
.seller-page h1, .seller-page h2, .seller-page h3, .seller-page h4 { margin: 0; font-weight: 700; color: var(--sp-ink); }
.seller-page button { font-family: inherit; }

/* ── HERO BANNER ────────────────────────────────────── */
.seller-hero {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: linear-gradient(135deg, #e8dff5 0%, #f5e4e9 45%, #fde8dc 100%);
  background-size: cover;
  background-position: center;
}
.seller-hero__overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 50%),
              radial-gradient(circle at 80% 80%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}

/* ── IDENTITY ROW ───────────────────────────────────── */
.seller-identity {
  background: #fff;
  border-bottom: 1px solid var(--sp-border);
}
.seller-identity__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 24px 22px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
}
.seller-identity__logo-wrap {
  position: relative;
  margin-top: -90px;
  flex-shrink: 0;
}
.seller-identity__logo {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: linear-gradient(135deg, #d6c2f0 0%, #f4d4d4 100%);
  border: 6px solid #fff;
  box-shadow: var(--sp-shadow-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.seller-identity__logo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.seller-identity__logo-initial {
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-weight: 700;
  font-size: 84px;
  color: var(--sp-ink);
}
.seller-identity__flair {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--sp-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
@media (max-width: 767px) {
  .seller-identity__logo { width: 132px; height: 132px; border-width: 5px; }
  .seller-identity__logo-initial { font-size: 60px; }
  .seller-identity__logo-wrap { margin-top: -66px; }
  .seller-identity__flair { width: 30px; height: 30px; border-width: 3px; }
}

.seller-identity__main {
  flex: 1 1 0;
  min-width: 320px;
}
.seller-identity__title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.seller-identity__name {
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-weight: 700;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
@media (min-width: 768px) { .seller-identity__name { font-size: 44px; } }
@media (min-width: 1100px) { .seller-identity__name { font-size: 52px; } }
.seller-identity__pill-pref {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--sp-teal-soft) !important;
  color: var(--sp-teal) !important;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid rgba(38, 130, 133, .18);
}
.seller-identity__pill-pref svg { flex-shrink: 0; }
.seller-identity__tagline {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--sp-fg2);
  font-weight: 400;
}

.seller-identity__stats {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  color: var(--sp-fg2);
  align-items: center;
}
.seller-identity__stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.seller-identity__stat strong {
  color: var(--sp-ink);
  font-weight: 700;
}
.seller-identity__stat-faded { color: var(--sp-fg3); }
.seller-identity__stars {
  position: relative;
  display: inline-block;
  color: var(--sp-orange);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
  font-family: var(--font-sans);
}
.seller-identity__star-empty { color: var(--sp-border); }
.seller-identity__star-fill {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--sp-orange);
  width: 0;
}

.seller-identity__actions {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  gap: 10px;
  align-self: center;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 180px;
  height: auto !important;
  overflow: visible !important;
}
.seller-identity__actions .seller-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap;
  height: auto !important;
  width: auto !important;
  position: static !important;
  clip: auto !important;
}
.seller-identity__actions .seller-btn svg { flex-shrink: 0; }

/* ── BUTTONS ───────────────────────────────────────── */
.seller-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
}
.seller-page .seller-btn--primary,
button.seller-btn--primary {
  background: var(--sp-teal) !important;
  color: #fff !important;
  border-color: var(--sp-teal) !important;
}
.seller-page .seller-btn--primary:hover,
button.seller-btn--primary:hover {
  background: rgb(28, 110, 113) !important;
  color: #fff !important;
  border-color: rgb(28, 110, 113) !important;
}
.seller-page .seller-btn--ghost,
button.seller-btn--ghost {
  background: #fff !important;
  color: var(--sp-ink) !important;
  border-color: var(--sp-ink) !important;
}
.seller-page .seller-btn--ghost:hover,
button.seller-btn--ghost:hover {
  background: var(--sp-bg-soft) !important;
  color: var(--sp-ink) !important;
}
.seller-btn--ghost[aria-pressed="true"] {
  background: var(--sp-teal);
  color: #fff;
  border-color: var(--sp-teal);
}
.seller-btn--block { width: 100%; padding: 9px 16px; }

/* ── STICKY TABS ───────────────────────────────────── */
.seller-tabs {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--sp-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.seller-tabs__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.seller-tabs__nav {
  display: flex;
  gap: 4px;
}
.seller-tab {
  background: transparent;
  border: 0;
  padding: 18px 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--sp-fg2);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.seller-tab:hover {
  color: var(--sp-teal) !important;
  border-bottom-color: rgba(38, 130, 133, .35);
}
.seller-tab--active {
  color: var(--sp-teal) !important;
  border-bottom-color: var(--sp-teal) !important;
  font-weight: 700;
}
.seller-tab__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--sp-teal) !important;
  background: var(--sp-teal-soft) !important;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(38, 130, 133, .15);
}
.seller-tab--active .seller-tab__count {
  color: #fff !important;
  background: var(--sp-teal) !important;
  border-color: var(--sp-teal);
}

.seller-tabs__search {
  position: relative;
  min-width: 280px;
}
.seller-tabs__search svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sp-fg3);
  pointer-events: none;
}
.seller-tabs__search input {
  width: 280px;
  height: 38px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--sp-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  background: var(--sp-bg-soft);
}
.seller-tabs__search input:focus {
  outline: none;
  border-color: var(--sp-teal);
  background: #fff;
}

/* ── MAIN / PANES ──────────────────────────────────── */
.seller-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
.seller-pane { display: none; }
.seller-pane--active { display: block; }

/* ── ITEMS TAB LAYOUT ──────────────────────────────── */
.seller-items-grid-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 36px;
  align-items: flex-start;
}
.seller-items-main { min-width: 0; }
@media (max-width: 900px) {
  .seller-items-grid-layout { grid-template-columns: 1fr; gap: 24px; }
}

/* ── SIDEBAR ───────────────────────────────────────── */
.seller-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
}
@media (max-width: 900px) {
  .seller-sidebar { position: static; }
}
.seller-sidebar__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sp-muted-purple);
  margin-bottom: 10px;
}
.seller-sidebar__label--small {
  font-size: 11px;
  letter-spacing: 1.5px;
  margin-top: 18px;
}
.seller-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.seller-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.seller-quick-chip {
  background: #fff;
  border: 1px solid var(--sp-border);
  color: var(--sp-fg2);
  padding: 7px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
  will-change: transform;
}
.seller-quick-chip:hover { background: var(--sp-bg-soft); color: var(--sp-ink); }
.seller-quick-chip:active { transform: scale(.94); }
.seller-quick-chip:focus-visible {
  outline: 2px solid rgb(38, 130, 133);
  outline-offset: 2px;
}
.seller-quick-chip.is-active {
  background: rgb(38, 130, 133) !important;
  color: #fff !important;
  border-color: rgb(38, 130, 133) !important;
  box-shadow: 0 1px 4px rgba(38, 130, 133, .25);
}
.seller-quick-chip.is-active:hover {
  background: rgb(34, 117, 119) !important;
  border-color: rgb(34, 117, 119) !important;
}
.seller-section-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--sp-ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .15s ease;
}
.seller-section-btn:hover { background: var(--sp-bg-soft); }
/* Active state mirrors the quick-chip pattern below — solid teal pill,
   white text, white count badge. Same visual language across the two
   filter surfaces so the relationship reads as one filtering UI. */
.seller-section-btn--active {
  background: rgb(38, 130, 133) !important;
  color: #ffffff !important;
  font-weight: 700;
}

.seller-sidebar__card,
.seller-sidebar__glance {
  margin-top: 16px;
  padding: 16px;
  background: var(--sp-bg-soft);
  border-radius: 12px;
  border: 1px solid var(--sp-border);
}
.seller-sidebar__glance { background: #fff; }
.seller-sidebar__card-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}
.seller-sidebar__card p {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--sp-fg2);
  line-height: 1.5;
}

.seller-glance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 12px;
  margin-top: 8px;
}
.seller-glance__num {
  font-size: 18px;
  font-weight: 700;
  color: var(--sp-ink);
}
.seller-glance__lab { color: var(--sp-fg3); }

/* ── ANNOUNCEMENT STRIP ────────────────────────────── */
.seller-announce {
  background: linear-gradient(135deg, var(--sp-teal-soft), var(--sp-bg-soft));
  border: 1px solid var(--sp-teal-soft);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.seller-announce__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(38, 130, 133);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.seller-announce__icon svg { color: #fff; stroke: #fff; }
.seller-announce__body {
  flex: 1;
  font-size: 13px;
  color: var(--sp-ink);
  line-height: 1.55;
}
.seller-announce__body strong { color: var(--sp-ink); display: block; margin-bottom: 4px; }
.seller-announce__body p { margin: 0; color: var(--sp-fg2); }

/* ── FEATURED CAROUSEL ─────────────────────────────── */
.seller-featured { margin-bottom: 36px; }
.seller-featured__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.seller-featured__title {
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-size: 24px;
  font-weight: 700;
}
.seller-featured__sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--sp-fg3);
}
.seller-featured__arrows { display: flex; gap: 8px; }
.seller-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sp-border);
  color: var(--sp-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
  box-shadow: var(--sp-shadow);
}

/* Overlay arrows on the carousel itself (Etsy/Amazon style) — float
   on the left + right edges of the track, vertically centered on the
   product cards. !important on the colors because the theme's global
   button reset (Tailwind preflight in dist.style.css) flips
   background-color back to transparent on hover, otherwise the white
   bg disappears and the white-chevron-on-white-image becomes invisible. */
.seller-featured__carousel { position: relative; }
.seller-arrow--overlay {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px !important;
  height: 44px !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(38, 130, 133, .15) !important;
  color: rgb(38, 130, 133) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12), 0 1px 4px rgba(0, 0, 0, .06) !important;
  transition: transform .15s ease, box-shadow .18s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  opacity: 1 !important;
}
.seller-arrow--overlay:hover {
  background: rgb(38, 130, 133) !important;
  background-color: rgb(38, 130, 133) !important;
  color: #ffffff !important;
  border-color: rgb(38, 130, 133) !important;
  box-shadow: 0 6px 18px rgba(38, 130, 133, .3), 0 2px 6px rgba(0, 0, 0, .08) !important;
}
.seller-arrow--overlay:active { transform: translateY(-50%) scale(.92); }
.seller-arrow--prev { left: -18px; }
.seller-arrow--next { right: -18px; }
/* On touch devices the overlay arrows are noise (users swipe) — hide
   them and let the header arrows be the only desktop affordance. */
@media (hover: none) and (pointer: coarse) {
  .seller-arrow--overlay { display: none; }
}
.seller-featured__track {
  display: grid;
  grid-auto-flow: column;
  /* Fixed 240px columns — never stretch. The 1fr we had before caused a
     single-item carousel to blow the card up to full row width. With a
     fixed cell width the card always renders at parity with the All-items
     grid below, regardless of count. justify-content keeps short
     carousels left-aligned instead of centering one mega-card. */
  grid-auto-columns: 240px;
  justify-content: start;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.seller-featured__track::-webkit-scrollbar { display: none; }
.seller-featured__track > * { scroll-snap-align: start; }

/* ── ITEMS HEADER + FILTERS ────────────────────────── */
.seller-items-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.seller-items-header__title {
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-size: 24px;
  font-weight: 700;
}
.seller-items-header__count {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--sp-fg3);
}
.seller-items-header__filters { display: flex; gap: 8px; align-items: center; }
.seller-select {
  padding: 8px 12px;
  border: 1px solid var(--sp-border);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  background: #fff;
  color: var(--sp-ink);
  cursor: pointer;
}

/* ── ITEMS GRID ────────────────────────────────────── */
.seller-items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .seller-items-grid { grid-template-columns: repeat(3, 1fr); } }
/* 2-column kicks in at the SAME width the sidebar collapses (≤900px).
   Previously this was 700px, leaving 700-900px in a broken state with
   3-column cards but no sidebar context — cards rendered too wide and
   visually felt like single-column posters. */
@media (max-width: 900px) { .seller-items-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.seller-items-empty {
  padding: 60px;
  text-align: center;
  color: var(--sp-fg3);
}

/* ── PRODUCT CARD ──────────────────────────────────── */
.seller-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--sp-border);
  transition: box-shadow .15s ease, transform .15s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--sp-ink);
}
.seller-card:hover {
  box-shadow: var(--sp-shadow-soft);
  transform: translateY(-2px);
  text-decoration: none;
}
.seller-card:hover .seller-card__image img,
.seller-card:hover .seller-card__image-placeholder { transform: scale(1.04); }
.seller-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--sp-bg-soft);
  overflow: hidden;
}
.seller-card__image img,
.seller-card__image-placeholder {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.seller-card__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0e4f6 0%, #fde4d3 100%);
}
.seller-card__image-placeholder img { width: 50%; height: auto; opacity: .85; }

/* Top-left image overlay slot — used by Free shipping. Replaces the
   redundant "BOX" type pill (the seller-page tabs already say "All
   items" / "BOX" sections, so duplicating it per card was noise). */
.seller-card__topleft {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: .3px;
  text-transform: uppercase;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.seller-card__topleft--freeship {
  background: rgb(29, 180, 102) !important;
  background-color: rgb(29, 180, 102) !important;
  color: #ffffff !important;
}
/* Legacy class kept (no-op) in case any cached HTML still references it. */
.seller-card__type { display: none !important; }
.seller-card__badge {
  position: absolute;
  top: 12px; right: 12px;
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.12);
  letter-spacing: .3px;
  text-transform: uppercase;
  z-index: 2;
}
.seller-card__badge--green  { background: rgb(29, 180, 102) !important; }
.seller-card__badge--salmon { background: rgb(255, 93, 82) !important; }
.seller-card__badge--purple { background: rgb(139, 125, 186) !important; }
.seller-card__badge--orange { background: rgb(252, 181, 62) !important; color: var(--sp-ink) !important; }
.seller-card__badge--pink   { background: rgb(244, 129, 123) !important; }

.seller-card__heart {
  position: absolute;
  bottom: 12px; right: 12px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  color: var(--sp-ink);
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.seller-card__heart.is-liked svg { fill: rgb(239, 71, 52); stroke: rgb(239, 71, 52); }

/* Etsy-style stacked card body: title on its own line, price block
   below (sale red + strikethrough + "(N% off)" when discounted). */
.seller-card__body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.seller-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--sp-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.seller-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
.seller-card__price-now {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-ink);
}
.seller-card__price-now--sale { color: var(--sp-salmon); }
.seller-card__price-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-salmon);
}
.seller-card__price-prefix {
  font-size: 11px;
  font-weight: 600;
  color: var(--sp-fg3);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.seller-card__price-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--sp-fg3);
}

/* Secondary flair pills below the price — mirrors the marketplace
   listing-card chips (Preferred Seller, Ships fast). Small + soft. */
.seller-card__flair {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.seller-card__flair-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.seller-card__flair-pill--shipsfast {
  background: rgba(29, 180, 102, .12);
  color: var(--sp-green);
  border: 1px solid rgba(29, 180, 102, .25);
}
/* (Free shipping moved to .seller-card__topleft on the image area —
   no longer rendered inside the flair-pill row.) */
.seller-card__flair-pill--eco {
  background: rgba(252, 182, 62, .14);
  color: rgb(176, 118, 12);
  border: 1px solid rgba(252, 182, 62, .35);
}
.seller-card__price-was {
  font-size: 12px;
  color: var(--sp-fg3);
  text-decoration: line-through;
}
.seller-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--sp-fg2);
  margin-top: 2px;
}
.seller-card__rating strong { color: var(--sp-ink); }
.seller-card__reviews { color: var(--sp-fg3); }
.seller-card__stars {
  position: relative;
  display: inline-block;
  color: var(--sp-orange);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
}
.seller-card__stars-empty { color: var(--sp-border); }
.seller-card__stars-fill {
  position: absolute;
  top: 0; left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--sp-orange);
}

/* ── REVIEWS TAB ────────────────────────────────────── */
.seller-reviews-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .seller-reviews-layout { grid-template-columns: 1fr; gap: 24px; }
}
.seller-reviews-aside { position: sticky; top: 80px; }
@media (max-width: 900px) { .seller-reviews-aside { position: static; } }

.seller-reviews-aggregate {
  margin-bottom: 18px;
  padding: 22px 22px 18px;
  background: linear-gradient(160deg, var(--sp-teal-soft) 0%, var(--sp-bg-soft) 100%);
  border-radius: 16px;
  border: 1px solid rgba(38, 130, 133, .14);
}
.seller-reviews-aggregate__score {
  display: flex;
  align-items: center;
  gap: 14px;
}
.seller-reviews-aggregate__num {
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--sp-ink);
}
.seller-reviews-aggregate__score .seller-identity__stars { font-size: 18px; letter-spacing: 2px; }
.seller-reviews-aggregate__count {
  font-size: 13px;
  color: var(--sp-fg2);
  margin-top: 4px;
  font-weight: 600;
}

.seller-reviews-breakdown {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seller-reviews-breakdown__row {
  display: grid;
  grid-template-columns: 60px 1fr 60px;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  color: var(--sp-ink);
}
.seller-reviews-breakdown__row:hover { background: var(--sp-bg-soft); }
.seller-reviews-breakdown__row.is-active { background: var(--sp-teal-soft); }
.seller-reviews-breakdown__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-fg2);
}
.seller-reviews-breakdown__bar {
  position: relative;
  height: 8px;
  background: var(--sp-bg-soft);
  border-radius: 999px;
  overflow: hidden;
}
.seller-reviews-breakdown__fill {
  position: absolute;
  inset: 0;
  background: var(--sp-orange);
  border-radius: 999px;
}
.seller-reviews-breakdown__count {
  font-size: 12px;
  color: var(--sp-fg3);
  text-align: right;
}

.seller-reviews-explainer {
  margin-top: 18px;
  padding: 14px;
  background: var(--sp-bg-soft);
  border-radius: 12px;
  font-size: 12px;
  color: var(--sp-fg2);
  line-height: 1.55;
}
.seller-reviews-explainer__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--sp-ink);
  margin-bottom: 4px;
}

.seller-reviews-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.seller-reviews-header__title {
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-size: 26px;
  font-weight: 700;
}
.seller-reviews-empty {
  padding: 40px;
  text-align: center;
  background: var(--sp-bg-soft);
  border-radius: 12px;
  color: var(--sp-fg2);
  font-size: 14px;
}
.seller-reviews-items { display: flex; flex-direction: column; gap: 0; }

/* Photo strip — when a review has uploaded images, surface them as
   small clickable thumbnails between the body and the product link. */
.seller-review__photos {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
}
.seller-review__photo {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--sp-border);
  display: block;
  background: var(--sp-bg-soft);
  transition: border-color .15s ease, transform .15s ease;
}
.seller-review__photo:hover {
  border-color: var(--sp-teal);
  transform: scale(1.04);
}
.seller-review__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* "View all reviews" button — opens the modal dialog. Same teal pill
   language as the rest of the page. */
.seller-reviews-load-more {
  margin: 24px auto 0;
  display: block;
  padding: 12px 28px;
  border-radius: 999px;
  background: #fff;
  color: var(--sp-teal);
  border: 1px solid var(--sp-teal);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.seller-reviews-load-more:hover:not(:disabled) {
  background: var(--sp-teal);
  color: #fff;
}
.seller-reviews-load-more:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ── ALL-REVIEWS DIALOG ─────────────────────────────── */
.seller-rmodal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  margin: 0;
  inset: 0;
  z-index: 9999;
}
.seller-rmodal::backdrop { background: rgba(0, 0, 0, 0); }
.seller-rmodal[open] { display: flex; align-items: stretch; justify-content: center; }
.seller-rmodal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 1;
}
.seller-rmodal__panel {
  position: relative;
  z-index: 2;
  margin: auto;
  background: #fff;
  width: min(960px, 96vw);
  max-height: 90vh;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .25);
}
.seller-rmodal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--sp-border);
  flex-shrink: 0;
}
.seller-rmodal__title {
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--sp-ink);
  margin: 0;
}
.seller-rmodal__close {
  background: transparent;
  border: 0;
  padding: 6px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--sp-fg2);
  transition: background .15s ease, color .15s ease;
}
.seller-rmodal__close:hover { background: var(--sp-bg-soft); color: var(--sp-teal); }
.seller-rmodal__body {
  overflow-y: auto;
  padding: 16px 24px 24px;
  flex: 1 1 auto;
}
.seller-rmodal__photos-wrap {
  background: var(--sp-bg-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.seller-rmodal__photos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.seller-rmodal__photos-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--sp-fg2);
}
.seller-rmodal__photos-arrows { display: flex; gap: 6px; }
.seller-rmodal__photos {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}
.seller-rmodal__photo {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--sp-border);
  background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}
.seller-rmodal__photo:hover {
  border-color: var(--sp-teal);
  transform: scale(1.03);
}
.seller-rmodal__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.seller-rmodal__reviews .seller-review:first-child { border-top: 1px solid var(--sp-border); padding-top: 18px; }

/* PDP-style: tight top row [stars + verified | avatar + name + date],
   body flush below, product reference as a slim inline card. */
.seller-review {
  padding: 18px 0;
  border-top: 1px solid var(--sp-border);
}
.seller-review:first-child { border-top: 0; padding-top: 8px; }

.seller-review__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.seller-review__top-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.seller-review__top-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--sp-fg2);
}
@media (max-width: 600px) {
  .seller-review__top { flex-direction: column; align-items: flex-start; gap: 8px; }
}

.seller-review__top-left .seller-card__stars { font-size: 14px; letter-spacing: 1px; line-height: 1; }
.seller-review__verified {
  font-size: 11px;
  font-weight: 700;
  color: var(--sp-teal);
  background: var(--sp-teal-soft);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .3px;
}

.seller-review__avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--sp-ink);
  flex-shrink: 0;
}
.seller-review__author { font-weight: 700; color: var(--sp-ink); font-size: 13px; }
.seller-review__date-sep { color: var(--sp-fg3); opacity: .6; }
.seller-review__date { color: var(--sp-fg3); font-size: 13px; }

.seller-review__title {
  margin: 0 0 6px;
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--sp-ink);
  line-height: 1.25;
}
.seller-review__body {
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: var(--sp-ink);
}

.seller-review__product {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 8px 14px 8px 8px;
  margin-top: 12px;
  border-radius: 10px;
  background: var(--sp-bg-soft);
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--sp-ink);
  max-width: 100%;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.seller-review__product:hover { background: #fff; border-color: var(--sp-teal); transform: translateY(-1px); }
.seller-review__product-img {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.seller-review__product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seller-review__product-meta {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.seller-review__product-lab {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sp-fg3);
}
.seller-review__product-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.seller-review__product-cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--sp-teal);
  margin-left: 6px;
  white-space: nowrap;
}

/* ── ABOUT TAB ─────────────────────────────────────── */
.seller-about-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .seller-about-layout { grid-template-columns: 1fr; gap: 24px; }
}
.seller-about__heading {
  margin: 14px 0 22px;
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sp-ink);
  position: relative;
  padding-bottom: 18px;
}
.seller-about__heading::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--sp-teal) 0%, var(--sp-pink) 100%);
  border-radius: 999px;
}
@media (min-width: 768px) { .seller-about__heading { font-size: 32px; } }
.seller-about__body--muted { color: var(--sp-fg3); font-style: italic; }
.seller-about__contact {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--sp-bg-soft);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
}
.seller-about__contact-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.seller-about__contact-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.seller-about__contact-lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sp-fg3);
}
.seller-about__contact-list a { color: var(--sp-teal); font-weight: 600; text-decoration: none; }
.seller-about__contact-list a:hover { text-decoration: underline; }
.seller-about__contact-cta {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--sp-teal);
  cursor: pointer;
  text-align: left;
}
.seller-about__contact-cta:hover { text-decoration: underline; }

.seller-about__body {
  font-size: 16px;
  line-height: 1.65;
  color: var(--sp-fg2);
}
.seller-about__body p { margin: 0 0 14px; }
.seller-about__body p:last-child { margin-bottom: 0; }
.seller-about-card {
  padding: 24px;
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  background: var(--sp-bg-soft);
}
.seller-about-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.seller-about-card__list li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.seller-about-card__icon {
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.seller-about-card__icon svg { width: 18px; height: 18px; }
.seller-about-card__icon--teal   { color: var(--sp-teal); }
.seller-about-card__icon--green  { color: var(--sp-green); }
.seller-about-card__icon--pink   { color: var(--sp-pink); }
.seller-about-card__icon--salmon { color: var(--sp-salmon); }
.seller-about-card__icon--orange { color: rgb(204, 138, 18); }
.seller-about-card__lab {
  font-size: 12px;
  color: var(--sp-fg3);
}
.seller-about-card__val {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-ink);
}

/* ── POLICIES TAB ───────────────────────────────────── */
.seller-policies {
  max-width: none;
  margin: 0;
}
.seller-policies__heading {
  margin: 6px 0 24px;
  font-family: var(--font-serif, 'lora', 'Lora', Georgia, serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--sp-ink);
}
.seller-policies__heading::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  background: linear-gradient(90deg, var(--sp-teal) 0%, var(--sp-pink) 100%);
  border-radius: 999px;
}
@media (min-width: 768px) { .seller-policies__heading { font-size: 30px; } }

.seller-policy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 720px) { .seller-policy-grid { grid-template-columns: 1fr; } }

.seller-policy {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--sp-border);
  border-radius: 14px;
  background: #fff;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.seller-policy:hover {
  border-color: rgba(38, 130, 133, .35);
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
  transform: translateY(-1px);
}
.seller-policy::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--sp-teal);
  opacity: .85;
}
.seller-policy__art {
  width: 72px;
  height: 72px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

/* Accent bar mirrors the icon hue per card. */
.seller-policy:nth-child(1)::before { background: var(--sp-teal); }
.seller-policy:nth-child(2)::before { background: var(--sp-salmon); }
.seller-policy:nth-child(3)::before { background: var(--sp-orange); }
.seller-policy:nth-child(4)::before { background: var(--sp-pink); }
.seller-policy:nth-child(5)::before { background: var(--sp-green); }
.seller-policy__title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-ink);
}
.seller-policy__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sp-fg2);
}
.seller-policy__body p { margin: 0 0 6px; }
.seller-policy__body p:last-child { margin-bottom: 0; }
.seller-policy__body a { color: var(--sp-teal); }
.seller-policy__sub {
  font-size: 12px !important;
  color: var(--sp-fg3) !important;
  margin-top: 6px !important;
}
.seller-policy-payments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 4px;
}
.seller-policy-payment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  background: transparent;
  border: 0;
  padding: 0;
}
.seller-policy-payment__svg {
  height: 24px;
  width: auto;
  display: block;
  border-radius: 3px;
}
/* Cratejoy gift card — matches the brand */
.seller-policy-payment--gift .seller-policy-payment__svg { width: 38px; }

.seller-policy-details {
  margin-top: 28px;
  padding: 22px 24px;
  background: var(--sp-bg-soft);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
}
.seller-policy-details__title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-ink);
}
.seller-policy-details__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin: 0;
  font-size: 13px;
}
@media (max-width: 600px) { .seller-policy-details__list { grid-template-columns: 1fr; } }
.seller-policy-details__list > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: baseline;
}
.seller-policy-details__list dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sp-fg3);
}
.seller-policy-details__list dd {
  margin: 0;
  color: var(--sp-ink);
  font-weight: 500;
}
.seller-policy-details__list a { color: var(--sp-teal); font-weight: 600; text-decoration: none; }
.seller-policy-details__list a:hover { text-decoration: underline; }

/* ── MOBILE adjustments ────────────────────────────── */
@media (max-width: 700px) {
  .seller-tabs__search { width: 100%; min-width: 0; margin-top: 8px; }
  .seller-tabs__search input { width: 100%; }
  .seller-identity__inner { gap: 12px; }
  .seller-identity__logo { width: 80px; height: 80px; }
  .seller-identity__logo-wrap { margin-top: -40px; }
  .seller-identity__name { font-size: 24px; }
  .seller-identity__actions { flex: 1 1 100%; }
  .seller-identity__actions button { flex: 1 1 auto; }
}

/* ── CONTACT-SELLER DRAWER STACKING ────────────────── */
/* Theme defaults: #modal z-index 30, .app--off-right-modal z-index 40.
   Sticky announcement bars, floating "Claim 20% Off" tabs, and third-party
   pop-ups (Klaviyo, Wisepops, support chat bubble) all sit above that.
   Boost both above any reasonable sticky/widget ceiling when our drawer
   is open, AND hide the stickies that aren't part of the drawer flow. */
body.seller-drawer-open #modal { z-index: 9998 !important; }
body.seller-drawer-open #pdp-contact-seller,
body.seller-drawer-open .app--off-right-modal { z-index: 9999 !important; }
body.seller-drawer-open [class*="announcement"],
body.seller-drawer-open [class*="kl-private-reset-css"],
body.seller-drawer-open .needsclick[id*="klaviyo"],
body.seller-drawer-open [class*="claim"][class*="tab"],
body.seller-drawer-open [data-discount-strip] { visibility: hidden !important; }

/* The sticky tab nav is NOT hidden — the drawer modal/backdrop sits
   above it at z 9998-9999, so it sits correctly behind the dim overlay
   (no "white empty strip" artifact). Just lower its z-index defensively
   so its sticky stacking context can't punch through the dimmer. */
body.seller-drawer-open .seller-tabs { z-index: 1 !important; }

/* ── EXTRA COLOR ACCENTS ───────────────────────────── */
/* Stats-row icons pick up brand teal so the identity row reads warm */
.seller-identity__stat svg { color: var(--sp-teal); }
.seller-identity__stat svg:not([fill="none"]) path,
.seller-identity__stat svg circle { stroke: var(--sp-teal); }

/* Card hover gets a teal-tinted border + soft shadow lift */
.seller-card {
  border: 1px solid transparent;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.seller-card:hover {
  border-color: rgba(38, 130, 133, .28);
  box-shadow: 0 10px 24px rgba(38, 130, 133, .08);
  transform: translateY(-2px);
}
.seller-card__heart { transition: color .18s ease, transform .18s ease, background .18s ease; }
.seller-card__heart:hover { color: var(--sp-pink); transform: scale(1.08); }
.seller-card__heart.is-liked { color: var(--sp-pink); }

/* Featured carousel arrows pick up teal on hover */
.seller-arrow { transition: background .15s ease, border-color .15s ease, color .15s ease; }
.seller-arrow:hover {
  background: var(--sp-teal-soft);
  border-color: var(--sp-teal);
  color: var(--sp-teal);
}

/* Section button hover + press feedback. Press uses translate+scale
   for tactile feedback (matches the tab nav + featured arrows). */
.seller-section-btn {
  transition: background .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease;
  will-change: transform;
}
.seller-section-btn:hover:not(.seller-section-btn--active) {
  background: var(--sp-teal-soft);
  color: var(--sp-teal);
}
.seller-section-btn:active { transform: scale(.97); }
.seller-section-btn:focus-visible {
  outline: 2px solid rgb(38, 130, 133);
  outline-offset: 2px;
}

/* Quick chip hover — match the wash */
.seller-quick-chip:hover:not(.is-active) {
  background: var(--sp-teal-soft);
  color: var(--sp-teal);
  border-color: rgba(38, 130, 133, .3);
}

/* Tab counts wrapped in a pill — must stay readable in both states.
   Use explicit RGB so unresolved CSS vars can't make it disappear,
   and bump specificity so this rule sits last + wins. */
.seller-page .seller-tab .seller-tab__count {
  background: rgb(237, 249, 249) !important;
  color: rgb(38, 130, 133) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(38, 130, 133, .18) !important;
  display: inline-block !important;
  min-width: 18px !important;
  text-align: center !important;
}
.seller-page .seller-tab.seller-tab--active .seller-tab__count {
  background: rgb(38, 130, 133) !important;
  color: #ffffff !important;
  border-color: rgb(38, 130, 133) !important;
}
/* Hide the badge entirely when JS marks it as empty/zero — no point
   showing "0" for a brand-new shop with no items/reviews yet. */
.seller-tab__count[data-empty="1"] { display: none !important; }

/* Section btn count badge — explicit RGBs so it's never invisible
   regardless of which surface it sits on. Active state uses solid
   teal background with white text (same pattern as the tab nav
   active count), so it stays readable on every backdrop. */
.seller-section-btn__count {
  background: rgb(241, 244, 246) !important;
  color: rgb(94, 110, 117) !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  min-width: 22px !important;
  text-align: center !important;
  display: inline-block !important;
  transition: background .15s ease, color .15s ease;
}
/* On the solid-teal active row, count flips to white-on-translucent
   so it reads as a sub-pill on the parent pill (matches chip aesthetic). */
.seller-section-btn--active .seller-section-btn__count {
  background: rgba(255, 255, 255, .22) !important;
  color: #ffffff !important;
}
/* Hide section-count badge entirely when JS marks it empty */
.seller-section-btn__count[data-empty="1"] { display: none !important; }

/* Borders across the page get a faint teal tint */
.seller-items-header,
.seller-tabs,
.seller-identity,
.seller-sidebar__card,
.seller-policy {
  border-color: rgba(38, 130, 133, .14);
}

/* Links inside body content get teal */
.seller-about__body a,
.seller-policy__body a,
.seller-announce__body a { color: var(--sp-teal); font-weight: 600; }
.seller-about__body a:hover,
.seller-policy__body a:hover { text-decoration: underline; }

/* ── RESPONSIVE IMPROVEMENTS ──────────────────────────
   Two breakpoints intentionally:
   ≤900px — the sidebar already collapses to a single column
            here (see .seller-items-grid-layout @ line 391).
            That's where the vertical "shop sections wall"
            becomes the worst UX problem, so the horizontal-
            pill conversion has to kick in at the SAME width.
   ≤767px — true-mobile only: identity row wraps, tabs become
            swipeable, hero offsets adjust.
   ────────────────────────────────────────────────────── */

/* When the sidebar collapses to single-column, restyle Shop sections
   + Quick filters as a compact wrapping pill grid. Goal: products
   reach above the fold ASAP — every label / row / margin we save
   here is one less swipe before a customer sees a product. */
@media (max-width: 900px) {
  /* Hide section labels on mobile — the chips visually communicate
     "filter by category" without a SHOP SECTIONS / QUICK FILTERS
     caption above them. Saves ~24px per label * 2 labels = ~48px. */
  .seller-page .seller-sidebar__label,
  .seller-page .seller-sidebar__label--small { display: none !important; }

  .seller-page .seller-sidebar__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px;
    padding: 0;
    margin: 0 0 8px;
  }
  .seller-page .seller-sidebar__list > li {
    flex: 0 0 auto;
    display: block;
  }
  /* Compact pill — tight padding + smaller font so 9 chips fit in
     ~2 rows instead of 5. Still legible at 11.5px / 5px×11px. */
  .seller-page .seller-section-btn {
    padding: 5px 11px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(38, 130, 133, .22) !important;
    background: #fff !important;
    width: auto !important;
    gap: 5px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    box-shadow: none !important;
  }
  .seller-page .seller-section-btn:hover:not(.seller-section-btn--active) {
    background: var(--sp-teal-soft) !important;
    border-color: rgba(38, 130, 133, .4) !important;
  }
  .seller-page .seller-section-btn--active {
    background: rgb(38, 130, 133) !important;
    color: #fff !important;
    border-color: rgb(38, 130, 133) !important;
  }
  .seller-page .seller-section-btn__count {
    padding: 0 6px !important;
    font-size: 9.5px !important;
    min-width: 16px !important;
  }

  /* Quick filters merge visually into the same chip cloud (no label,
     same tight gap) — they read as part of the same filter surface. */
  .seller-page .seller-quick-filters {
    margin: 0 0 12px;
    gap: 5px;
    flex-wrap: wrap;
  }
  .seller-page .seller-quick-chip {
    padding: 5px 11px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  /* Announcement is redundant with the About tab (same store.description
     source) — hide on mobile to push the products grid above the fold.
     Desktop keeps it for prominence in the items column. */
  .seller-page .seller-announce { display: none !important; }

  /* "At a glance" on the items tab is redundant with the About-tab
     card — hide whenever the sidebar collapses so the products grid
     moves above the fold. */
  .seller-page .seller-sidebar__glance { display: none !important; }

  /* Items header: title + filters wrap cleanly. */
  .seller-page .seller-items-header { flex-wrap: wrap; gap: 12px; align-items: stretch; }
  .seller-page .seller-items-header__filters { width: 100%; flex-wrap: wrap; }
  .seller-page .seller-items-header__filters .seller-select { flex: 1 1 0; min-width: 0; }

  /* Kill the empty gaps. Mobile margins were tuned for desktop spacing
     and looked huge once everything stacked vertically. */
  .seller-page .seller-announce { margin-bottom: 16px; padding: 12px 14px; }
  .seller-page .seller-quick-filters { margin-bottom: 14px; }
  .seller-page .seller-items-grid-layout { gap: 16px; }
  .seller-page .seller-sidebar { margin-bottom: 0; }
  .seller-page .seller-featured { margin-bottom: 24px; }
  /* If a flair pill row has nothing in it, don't reserve space for it. */
  .seller-page .seller-card__flair:empty { display: none !important; }
}

/* True-mobile (≤767px) fixes: identity row + tabs + hero + badges. */
@media (max-width: 767px) {
  /* Identity row: kill min-widths that forced the row wider than
     the viewport (root cause of the horizontal-scroll bug). Let
     actions wrap onto their own line at full width. */
  .seller-page .seller-identity__main { min-width: 0 !important; }
  .seller-page .seller-identity__actions {
    min-width: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  .seller-page .seller-identity__actions .seller-btn,
  .seller-page .seller-identity__actions button {
    width: 100% !important;
    justify-content: center !important;
  }
  .seller-page .seller-identity__inner {
    flex-wrap: wrap;
    gap: 16px;
    /* The identity row's white background now starts with a soft
       fade so the banner image bleeds DOWN into the identity area
       (the "blending" the desktop has). The logo sits on top of
       this transition via its negative margin-top below. */
    position: relative;
    padding-top: 0 !important;
  }

  /* Mobile hero is a touch shorter so the banner→identity
     transition happens above the fold on phone viewports. */
  .seller-page .seller-hero { height: 180px; }

  /* Logo bridges the banner→identity boundary like desktop does
     — top half sits ON the banner, bottom half on the identity
     white. !important on margin-top because there are 3 stacked
     legacy rules at different breakpoints that fight this. */
  .seller-page .seller-identity__logo-wrap {
    margin-top: -54px !important;
    z-index: 3;
    position: relative;
  }
  .seller-page .seller-identity__logo {
    width: 108px !important;
    height: 108px !important;
    border-width: 4px !important;
  }
  .seller-page .seller-identity__logo-initial {
    font-size: 48px !important;
  }
  .seller-page .seller-identity__flair {
    width: 30px !important;
    height: 30px !important;
    border-width: 3px !important;
    bottom: 2px !important;
    right: 2px !important;
  }

  /* Title wraps to multiple lines on mobile instead of being clipped
     with an ellipsis. The desktop rule uses white-space: nowrap +
     text-overflow: ellipsis to keep long shop titles tidy on a wide
     row; on mobile that turns "The Amazing Mystery Box" into "The
     Amazing My…", which hides the brand. */
  .seller-page .seller-identity__name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.15 !important;
    font-size: 26px !important;
  }

  /* Tab nav: shrink tabs so all 4 fit cleanly without horizontal
     scroll. The previous attempt to make it swipeable failed because
     the parent .seller-tabs__inner uses flex-wrap:wrap, which made
     individual tabs wrap to a second line instead of overflowing for
     scroll. Simplest fix: smaller tabs + smaller search, all on one
     row, no scrolling required. */
  .seller-page .seller-tabs__inner {
    padding: 0 14px;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .seller-page .seller-tabs__nav {
    flex: 1 1 auto;
    min-width: 0;
    gap: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .seller-page .seller-tabs__nav::-webkit-scrollbar { display: none; }
  .seller-page .seller-tab {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 13px !important;
    padding: 14px 0 !important;
    gap: 6px !important;
  }
  /* Hide the tab counts on mobile — they take real estate and the
     active state already telegraphs which tab you're on. */
  .seller-page .seller-tab .seller-tab__count { display: none !important; }
  /* Hide the shop-search entirely on mobile — the earlier collapsed
     pattern (icon-only that expands on focus) left a visible empty
     box below the tabs. Users on mobile use the site's main search
     anyway; the shop-narrow search is desktop-only utility. */
  .seller-page .seller-tabs__search { display: none !important; }

  /* Card badges: stack on the left edge when both present so they
     can never collide on narrow mobile cards. Free shipping stays
     row 1; Sale (or any badge) drops to row 2 just below it. */
  .seller-page .seller-card__topleft {
    top: 10px !important;
    left: 10px !important;
    font-size: 9.5px !important;
    padding: 4px 9px !important;
    letter-spacing: .2px !important;
  }
  .seller-page .seller-card__badge {
    top: auto !important;
    bottom: auto !important;
    right: auto !important;
    left: 10px !important;
    /* Offset down by ~26px to clear the Free-shipping pill above
       (when Free-shipping is rendered the badge sits on row 2;
       when it's absent, this still looks fine — top-left of card). */
    top: 38px !important;
    font-size: 9.5px !important;
    padding: 4px 9px !important;
    letter-spacing: .2px !important;
  }
  /* If Free-shipping pill is NOT present, the badge can sit back at
     the top so it doesn't float weirdly. Detected via :not(:has) when
     supported; harmless on browsers without :has. */
  .seller-page .seller-card__image:not(:has(.seller-card__topleft)) .seller-card__badge {
    top: 10px !important;
  }

  /* Featured carousel: cards shrink so 2+ peek through. */
  .seller-page .seller-featured__track {
    grid-auto-columns: 180px !important;
    gap: 12px;
  }

  /* Belt-and-braces against any leftover horizontal overflow. */
  .seller-page { overflow-x: hidden; }
  .seller-page .seller-identity__stats { row-gap: 4px; column-gap: 14px; }
}