@charset "UTF-8";
/* Showroom presentation.

   Loaded only by layouts/sr.blade.php — the layout every presentation page
   (frontend/sr/*) extends — so nothing here can reach the legacy storefront,
   and none of embed.css reaches these pages. Plain CSS in a .scss file, like
   embed.scss: the build compiles it to public/css/showroom.css unchanged, and
   the two must be edited together.

   Everything is drawn from the custom properties on body.sr. Two sets:

   - The store's tokens — --bg, --ink, --tile, --accent, --brand, --font,
     --font-head, and from the corners and photo choices --radius, --radius-lg,
     --pill and --photo-aspect — are emitted inline by layouts/sr.blade.php
     from App\StoreTheme (the template's values with the store's own on top).
     Dawn's values sit here only as a fallback should that block ever be
     missing. The layout choices arrive as classes on body: sr-header-under |
     -centred | -right, sr-width-boxed | -full, sr-topbar-off.
   - The template's internal values — muted text, hairlines, chip and hero
     grounds, card treatment, heading weight — and its structural rules live
     here under body.sr-dawn / body.sr-craft / body.sr-sense. A store cannot
     override these; it picks a template. */
body.sr {
  --bg: #ffffff;
  --ink: #151515;
  --tile: #f3f3f3;
  --accent: #177a3d;
  --brand: #177a3d;
  --radius: 2px;
  --radius-lg: 4px;
  --pill: 4px;
  --photo-aspect: 4 / 5;
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-head: "Inter", system-ui, -apple-system, sans-serif;
}

body.sr-dawn {
  --muted: #666666;
  --line: #e7e7e7;
  --card-bg: transparent;
  --card-border: 0;
  --card-shadow: none;
  --head-weight: 600;
  --head-ls: -0.01em;
  --nav-bg: #ffffff;
  --chip-bg: #f3f3f3;
  --hero-bg: #f6f6f6;
  --soft-bg: #f3f3f3;
}

body.sr-craft {
  --muted: #7a6a5c;
  --line: #e0d6c6;
  --card-bg: #fbf8f2;
  --card-border: 1px solid var(--line);
  --card-shadow: none;
  --head-weight: 600;
  --head-ls: 0;
  --nav-bg: #f6f1e8;
  --chip-bg: #ece4d6;
  --hero-bg: #efe6d7;
  --soft-bg: #ede5d6;
}

body.sr-sense {
  --muted: #5f7168;
  --line: #dbe5de;
  --card-bg: #ffffff;
  --card-border: 0;
  --card-shadow: 0 6px 20px rgba(28, 42, 34, .08);
  --head-weight: 800;
  --head-ls: -0.01em;
  --nav-bg: #ffffff;
  --chip-bg: #ffffff;
  --hero-bg: #e3eee7;
  --soft-bg: #dbe8df;
}

/* ---------- the layout tokens: header, width, top bar ---------- */
/* logo-centred: the logo on its own row, the search and the icons under it,
   the menu centred where it fits (safe, so an overflowing row still starts
   at its first entry). */
body.sr-header-centred .sr-top {
  height: auto;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 10px;
  padding: 16px 0 10px;
}

body.sr-header-centred .sr-logo {
  flex: 1 0 100%;
  justify-content: center;
  text-align: center;
}

body.sr-header-centred .sr-search {
  flex: 1 1 320px;
  margin-left: 0;
  max-width: 560px;
}

body.sr-header-centred .sr-cats {
  justify-content: safe center;
}

body.sr-header-centred .sr-cats .sr-cats-sellers {
  margin-left: 0;
}

/* logo-left-menu-right: logo, menu and the icons on one row, the search on a
   row of its own under them. The top row's box gives its children to the
   header's grid (display: contents), which places the menu between them.
   Below 960px the menu goes back under the logo, as everywhere. */
.sr-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

@media (min-width: 961px) {
  body.sr-header-right .sr-header .sr-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo menu actions" "search search search";
    align-items: center;
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
  body.sr-header-right .sr-top {
    display: contents;
  }
  body.sr-header-right .sr-logo {
    grid-area: logo;
    padding: 12px 0;
  }
  body.sr-header-right .sr-cats {
    grid-area: menu;
    padding: 0;
    border-top: 0;
  }
  body.sr-header-right .sr-actions {
    grid-area: actions;
  }
  body.sr-header-right .sr-search {
    grid-area: search;
    margin: 0 0 12px;
  }
}
/* width: boxed keeps the page at 1240px; full runs edge to edge. */
body.sr-width-full .sr-wrap {
  max-width: none;
}

/* ---------- the templates' own shapes: what a token cannot express ---------- */
/* Craft — warm paper, serif headings, cards drawn with a 1px line and 10px
   corners, the logo centred on its own row above the search and the nav.
   docs/ux/sr-mockup-kuul.html, "Craft". */
body.sr-craft .sr-header {
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -4px 0 var(--bg), inset 0 -5px 0 var(--line);
}

body.sr-craft .sr-logo-mark {
  border-radius: 10px;
}

body.sr-craft .sr-logo-name {
  font-size: 28px;
  letter-spacing: 0;
}

body.sr-craft .sr-logo-sub {
  font-style: italic;
}

body.sr-craft .sr-search {
  background: #fff;
}

body.sr-craft .sr-cats {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

body.sr-craft .sr-hero {
  border: 1px solid var(--line);
  background: var(--card-bg);
}

body.sr-craft .sr-hero h1 {
  font-size: 44px;
  font-weight: 500;
}

body.sr-craft .sr-listhead h2,
body.sr-craft .sr-account-title,
body.sr-craft .sr-login h1,
body.sr-craft .sr-product-title {
  font-weight: 500;
}

body.sr-craft .sr-listhead h2 {
  font-size: 30px;
}

body.sr-craft .sr-listhead {
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

body.sr-craft .sr-cat-tile,
body.sr-craft .sr-seller-block,
body.sr-craft .sr-account-row,
body.sr-craft .sr-cart-row,
body.sr-craft .sr-login-col,
body.sr-craft .sr-checkout-summary,
body.sr-craft .sr-offer {
  border: 1px solid var(--line);
}

body.sr-craft .sr-chip {
  border-radius: var(--pill);
}

body.sr-craft .sr-btn-o {
  background: #fff;
}

body.sr-craft .sr-footer {
  border-top: 1px solid var(--line);
  box-shadow: inset 0 4px 0 var(--bg), inset 0 5px 0 var(--line);
  padding-top: 40px;
}

/* Sense — soft mint ground, everything rounded 16px, white cards on a soft
   shadow, the nav a row of pills with the current one filled.
   docs/ux/sr-mockup-kuul.html, "Sense". */
body.sr-sense .sr-header {
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(28, 42, 34, 0.06);
}

body.sr-sense .sr-cats {
  gap: 8px;
  padding: 6px 0 12px;
}

body.sr-sense .sr-cats a {
  border-radius: var(--pill);
  background: var(--hero-bg);
  padding: 8px 16px;
}

body.sr-sense .sr-cats a:hover {
  background: var(--tile);
}

body.sr-sense .sr-cats a.on {
  background: var(--accent);
  color: #fff;
}

body.sr-sense .sr-cats a.on .n {
  color: rgba(255, 255, 255, 0.8);
}

body.sr-sense .sr-cats .sr-cats-sellers {
  background: transparent;
}

body.sr-sense .sr-btn,
body.sr-sense .sr-btn-o,
body.sr-sense .sr-search,
body.sr-sense .sr-sort select,
body.sr-sense .sr-view,
body.sr-sense .sr-offer input,
body.sr-sense .sr-form input:not([type=radio]):not([type=checkbox]) {
  border-radius: var(--pill);
}

body.sr-sense .sr-view button:first-child {
  padding-left: 14px;
}

body.sr-sense .sr-view button:last-child {
  padding-right: 14px;
}

body.sr-sense .sr-btn {
  background: var(--accent);
}

body.sr-sense .sr-btn-o {
  border-color: var(--line);
  background: #fff;
}

body.sr-sense .sr-search {
  background: #fff;
  border-color: transparent;
  box-shadow: var(--card-shadow);
}

body.sr-sense .sr-hero {
  background: #fff;
  box-shadow: var(--card-shadow);
}

body.sr-sense .sr-hero h1 {
  font-weight: 800;
}

body.sr-sense .sr-strip,
body.sr-sense .sr-checkout-summary,
body.sr-sense .sr-login-col-quick,
body.sr-sense .sr-offer {
  background: #fff;
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-lg);
}

body.sr-sense .sr-strip {
  padding: 14px 18px;
}

body.sr-sense .sr-chip {
  border-color: transparent;
  background: #fff;
  box-shadow: 0 2px 8px rgba(28, 42, 34, 0.06);
}

body.sr-sense .sr-chip.on {
  background: var(--accent);
  color: #fff;
}

body.sr-sense .sr-cat-tile,
body.sr-sense .sr-seller-block,
body.sr-sense .sr-account-row,
body.sr-sense .sr-cart-row,
body.sr-sense .sr-login-col {
  border: 0;
  background: #fff;
  box-shadow: var(--card-shadow);
}

body.sr-sense .sr-footer {
  background: #fff;
  border-top: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -6px 20px rgba(28, 42, 34, 0.06);
  padding: 36px 24px 28px;
}

/* ---------- base ---------- */
.sr *,
.sr *::before,
.sr *::after {
  box-sizing: border-box;
}

html:has(body.sr) {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.sr {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

.sr a {
  color: inherit;
  text-decoration: none;
}

.sr h1,
.sr h2,
.sr h3 {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-ls);
  margin: 0;
}

.sr button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.sr img {
  max-width: 100%;
}

.sr-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.sr-main {
  min-height: 50vh;
}

/* ---------- the domains row's options ---------- */
/* Operator HTML from Nova (top bar, commercial block, custom footer) renders
   raw inside these; they only reserve the slot and keep it inside the page. */
.sr-domain-topbar,
.sr-domain-footer {
  max-width: 100%;
  overflow-x: auto;
}

.sr-domain-commercial {
  margin: 20px 0 0;
  max-width: 100%;
  overflow-x: auto;
}

.sr-hero-image a {
  display: block;
}

/* ---------- preview banner ---------- */
.sr-preview-banner {
  background: #1f2933;
  color: #fff;
  font: 14px/1.45 system-ui, -apple-system, sans-serif;
  padding: 10px 16px;
  text-align: center;
}

.sr-preview-banner a {
  color: #8ab4f8;
  margin-left: 10px;
}

/* ---------- header ---------- */
.sr-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
}

.sr-top {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 72px;
}

.sr-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sr-logo-mark {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.02em;
}

.sr-logo-mark img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sr-logo-text {
  display: block;
  min-width: 0;
}

.sr-logo-name {
  display: block;
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-size: 22px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-logo-sub {
  display: block;
  font-family: var(--font);
  font-weight: 400;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.sr-search {
  flex: 1;
  max-width: 520px;
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.sr-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 10px 14px;
  font: inherit;
  background: transparent;
  color: var(--ink);
  outline: none;
}

.sr-search input::-moz-placeholder {
  color: var(--muted);
}

.sr-search input::placeholder {
  color: var(--muted);
}

.sr-search button {
  border: 0;
  background: transparent;
  padding: 0 14px;
  color: var(--muted);
  display: grid;
  place-items: center;
}

/* Search suggestions: a listbox under the field. */
.sr-search {
  position: relative;
  overflow: visible;
}

.sr-suggest {
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% + 6px);
  z-index: 30;
  background: var(--nav-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  max-height: 70vh;
  overflow-y: auto;
  padding: 6px 0;
}

.sr-suggest[hidden] {
  display: none;
}

.sr-suggest-title {
  padding: 8px 14px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.sr .sr-suggest-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 14px;
  min-height: 44px;
  color: var(--ink);
}

.sr .sr-suggest-item.on,
.sr .sr-suggest-item:hover {
  background: var(--chip-bg);
}

.sr-suggest-item img,
.sr-suggest-noimg {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
  background: var(--tile);
}

.sr-suggest-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sr-suggest-name {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-suggest-meta {
  font-size: 12px;
  color: var(--muted);
}

.sr .sr-suggest-more {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.sr-lang {
  position: relative;
  font-size: 13px;
  color: var(--muted);
}

.sr-lang summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 4px;
  min-height: 44px;
  white-space: nowrap;
}

.sr-lang summary::-webkit-details-marker {
  display: none;
}

.sr-lang-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  min-width: 150px;
  padding: 6px 0;
  background: var(--nav-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.sr-lang-menu a {
  display: block;
  padding: 8px 14px;
  color: var(--ink);
}

.sr-lang-menu a:hover,
.sr-lang-menu a.on {
  background: var(--chip-bg);
}

/* The account menu and "Sign in" — only on a store that sells through the
   site — share the language menu's look. */
.sr-user {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.sr-user summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 4px;
  min-height: 44px;
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-user summary::-webkit-details-marker {
  display: none;
}

.sr-user-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  min-width: 170px;
  padding: 6px 0;
  background: var(--nav-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  font-weight: 500;
}

.sr-user-menu a {
  display: block;
  padding: 8px 14px;
  color: var(--ink);
  white-space: nowrap;
}

.sr-user-menu a:hover {
  background: var(--chip-bg);
}

.sr .sr-signin {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.sr-signin svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.sr .sr-signin:hover {
  color: var(--accent);
}

.sr-cats {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 6px 0 10px;
  scrollbar-width: none;
}

.sr-cats::-webkit-scrollbar {
  display: none;
}

.sr-cats a {
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  gap: 8px;
  align-items: center;
}

.sr-cats a:hover,
.sr-cats a.on {
  background: var(--chip-bg);
}

.sr-cats a.on {
  font-weight: 600;
}

.sr-cats .n {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

.sr-cats .sr-cats-sellers {
  margin-left: auto;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- buttons ---------- */
/* .sr .sr-btn, not .sr-btn: `.sr a { color: inherit }` is (0,1,1) and beats a
   lone class, which painted the hero's primary button black on black. */
.sr .sr-btn {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  border: 0;
  line-height: 1.2;
}

.sr .sr-btn-o {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 11px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  color: var(--ink);
  line-height: 1.2;
}

/* ---------- hero ---------- */
.sr-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  margin: 28px 0;
  background: var(--hero-bg);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
}

.sr-hero-text-only {
  grid-template-columns: 1fr;
}

.sr-hero h1 {
  font-size: 40px;
  line-height: 1.1;
  max-width: 14ch;
}

.sr-hero p {
  font-size: 16px;
  color: var(--muted);
  max-width: 44ch;
  margin: 14px 0 22px;
}

.sr-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-hero-image img {
  display: block;
  width: 100%;
  height: 370px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius);
}

.sr-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 180px 180px;
  gap: 10px;
}

.sr-collage a {
  display: block;
  min-width: 0;
  min-height: 0;
  background: var(--tile);
  border-radius: var(--radius);
  overflow: hidden;
}

.sr-collage img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sr-collage a:first-child {
  grid-row: 1/3;
}

.sr-collage-1 a:first-child {
  grid-column: 1/3;
}

.sr-collage-2 a:last-child {
  grid-row: 1/3;
}

/* ---------- store strip ---------- */
.sr-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 14px;
  color: var(--muted);
  padding: 0 4px 4px;
}

.sr-strip b {
  color: var(--ink);
  font-weight: 600;
}

.sr-strip a {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- category tiles ---------- */
.sr-cat-tiles {
  margin: 24px 0 0;
}

/* One row. Where it does not fit it scrolls sideways, snapping tile by tile,
   and the page itself never grows wider. */
.sr-cat-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.sr-cat-row::-webkit-scrollbar {
  display: none;
}

.sr .sr-cat-tile {
  flex: 0 0 176px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
  transition: transform 0.15s ease;
}

.sr .sr-cat-tile:hover {
  transform: translateY(-2px);
}

.sr-cat-media {
  display: block;
  aspect-ratio: 1/1;
  background: var(--tile);
  overflow: hidden;
  position: relative;
}

.sr-cat-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sr-cat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px 12px;
}

body.sr-dawn .sr-cat-body {
  padding: 10px 0 0;
}

.sr-cat-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sr-cat-count {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- front-page rows ---------- */
.sr-home-section {
  margin-top: 28px;
}

.sr-home-section .sr-listhead {
  margin: 0 0 12px;
}

.sr-home-section .sr-listhead h2 {
  font-size: 22px;
}

.sr .sr-more-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.sr .sr-recent-clear {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
}

.sr .sr-recent-clear:hover {
  color: var(--ink);
}

.sr-recent[hidden] {
  display: none;
}

.sr-recent {
  margin-bottom: 8px;
}

/* Six cards across at 1200; sideways scroll where they do not fit. */
.sr-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 80px) / 6);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.sr-row::-webkit-scrollbar {
  display: none;
}

.sr-row > .sr-card {
  scroll-snap-align: start;
}

.sr-row .sr-card-extra {
  display: none;
}

/* Featured sellers: four seller blocks across. */
.sr-seller-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

/* About */
.sr-about-text {
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.6;
}

.sr-about-text p {
  margin: 0 0 12px;
}

.sr-about-text a {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- listing ---------- */
.sr-listhead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 36px 0 14px;
  flex-wrap: wrap;
}

.sr-listhead h2 {
  font-size: 26px;
}

.sr-listhead .sr-count {
  color: var(--muted);
  font-size: 14px;
  margin-left: 10px;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 0;
}

.sr-tools {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sr-sort {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.sr-sort select {
  font: inherit;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  min-height: 40px;
}

.sr-view {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.sr-view button {
  border: 0;
  background: transparent;
  padding: 8px 12px;
  min-height: 40px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}

.sr-view button.on {
  background: var(--chip-bg);
  color: var(--ink);
}

/* ---------- filter chips ---------- */
.sr-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sr-chip-menu {
  position: relative;
}

.sr-chip-menu summary {
  list-style: none;
}

.sr-chip-menu summary::-webkit-details-marker {
  display: none;
}

.sr .sr-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
}

.sr .sr-chip.on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.sr-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  z-index: 15;
  min-width: 200px;
  max-width: min(320px, 100vw - 32px);
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px 0;
  background: var(--nav-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.sr-menu a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  font-size: 14px;
  color: var(--ink);
}

.sr-menu a:hover,
.sr-menu a.on {
  background: var(--chip-bg);
}

.sr-menu a.on {
  font-weight: 600;
}

.sr-menu .n {
  color: var(--muted);
  font-size: 12px;
}

/* The category menu is the store's whole tree: sub-categories indented under
   their parent. */
.sr-menu-tree .sr-menu-l1 {
  font-weight: 600;
}

.sr-menu-tree .sr-menu-l2 {
  padding-left: 28px;
}

.sr-menu-tree .sr-menu-l3 {
  padding-left: 42px;
  font-size: 13px;
}

/* ---------- badges ---------- */
.sr-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.sr-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.sr-badge-soon {
  background: var(--ink);
  color: var(--bg);
}

.sr-badge-inline {
  position: static;
  vertical-align: middle;
  margin-left: 8px;
  font-family: var(--font);
  letter-spacing: 0.02em;
}

/* ---------- list view ---------- */
/* A row: 120px square thumbnail left; title, price, seller, the first 120
   characters of the description and the attribute chips right; the heart at
   the right edge. */
.sr-grid.sr-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sr-list .sr-card {
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  padding-right: 52px;
}

.sr-list .sr-card:hover {
  transform: none;
}

.sr-list .sr-media {
  flex: 0 0 120px;
  width: 120px;
  aspect-ratio: 1/1;
  border-radius: var(--radius);
}

.sr-list .sr-body {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sr-list .sr-title {
  min-height: 0;
}

.sr-list .sr-price {
  margin-top: 2px;
}

.sr-list .sr-save {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: var(--chip-bg);
}

.sr-card-extra {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.sr-card-excerpt {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.sr-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sr .sr-chip-small {
  padding: 3px 10px;
  font-size: 12px;
  min-height: 0;
}

.sr-empty {
  color: var(--muted);
  margin: 24px 0 48px;
}

.sr-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 16px;
}

/* Tile size: small / medium / large — 6 / 4 / 3 columns here, fewer as the
   screen narrows (see the breakpoints). The medium set is the base above. */
.sr-grid.sr-grid-small {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 12px;
}

.sr-grid.sr-grid-large {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 20px;
}

.sr-grid-size {
  margin-left: 4px;
}

.sr-grid-size button {
  font-size: 13px;
  font-weight: 600;
  min-width: 36px;
}

.sr-grid-size[hidden] {
  display: none;
}

/* The list view's extra content — the description excerpt and the attribute
   chips — exists only there; the grid hides it. */
.sr-grid:not(.sr-list) .sr-card-extra {
  display: none;
}

/* ---------- card ---------- */
/* position: relative because the heart (.sr-save) is absolutely placed at the
   card's top-right; without it every heart stacked at the page's corner. */
.sr-card {
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sr-card:hover {
  transform: translateY(-2px);
}

.sr-media {
  position: relative;
  display: block;
  aspect-ratio: var(--photo-aspect);
  background: var(--tile);
  overflow: hidden;
}

.sr-media img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* The second photo, laid over the first and faded in on hover (pointer
   devices only; the script adds it the first time the pointer arrives). */
.sr-media .sr-media-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 0.2s ease;
}

@media (hover: hover) {
  .sr-card.sr-has-alt:hover .sr-media-alt {
    opacity: 1;
  }
}
.sr-noimg {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.sr-noimg svg {
  width: 34px;
  height: 34px;
  fill: var(--ink);
  opacity: 0.22;
}

/* The base is the clean style: the text straight under the photo. The other
   card styles (body.sr-cards-*, below) set their own frame and padding. */
.sr-body {
  padding: 10px 0 0;
}

.sr-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  min-height: 2.6em;
}

.sr-price {
  font-weight: 700;
  font-size: 17px;
  margin-top: 6px;
}

.sr-price s {
  font-weight: 400;
  font-size: 13px;
  color: var(--muted);
  margin-left: 6px;
}

.sr-seller {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.sr-seller a {
  color: var(--muted);
  font-weight: 600;
}

.sr-seller a:hover {
  color: var(--accent);
}

/* ---------- card styles: the card_style token as body.sr-cards-* ----------

   clean is the base above. Each style sets the card's frame (which the seller
   blocks share, so a shelf and its sellers row match) and, in the grid, where
   the title, the price and the seller sit; the list view keeps its row layout
   and takes only the frame. Later rules win over the templates' panel rules
   of the same specificity, which is why this block follows them. */
/* boxed: a thin line, 12px inside, the price and the seller on one row. */
body.sr-cards-boxed .sr-card,
body.sr-cards-boxed .sr-seller-block {
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: none;
}

body.sr-cards-boxed .sr-grid:not(.sr-list) .sr-body {
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "title title" "price seller";
  align-items: baseline;
  -moz-column-gap: 10px;
       column-gap: 10px;
}

body.sr-cards-boxed .sr-grid:not(.sr-list) .sr-title {
  grid-area: title;
}

body.sr-cards-boxed .sr-grid:not(.sr-list) .sr-price {
  grid-area: price;
  margin-top: 8px;
  white-space: nowrap;
}

body.sr-cards-boxed .sr-grid:not(.sr-list) .sr-seller {
  grid-area: seller;
  margin-top: 8px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

body.sr-cards-boxed .sr-list .sr-body {
  padding: 8px 0;
}

/* elevated: white on a soft shadow, 14px inside, the price above the title. */
body.sr-cards-elevated .sr-card,
body.sr-cards-elevated .sr-seller-block {
  background: #fff;
  border: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.09);
}

body.sr-cards-elevated .sr-card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 14px 32px rgba(0, 0, 0, 0.12);
}

body.sr-cards-elevated .sr-grid:not(.sr-list) .sr-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
}

body.sr-cards-elevated .sr-grid:not(.sr-list) .sr-price {
  order: -1;
  margin: 0 0 4px;
}

body.sr-cards-elevated .sr-grid:not(.sr-list) .sr-title {
  min-height: 0;
}

body.sr-cards-elevated .sr-grid:not(.sr-list) .sr-seller {
  margin-top: 8px;
}

body.sr-cards-elevated .sr-list .sr-body {
  padding: 8px 0;
}

/* soft: the photo, its corners rounded, inside a light tinted card with
   more room around everything and a quieter seller line. */
body.sr-cards-soft .sr-card,
body.sr-cards-soft .sr-seller-block {
  background: var(--soft-bg);
  border: 0;
  box-shadow: none;
}

body.sr-cards-soft .sr-grid:not(.sr-list) .sr-card {
  padding: 10px;
  border-radius: calc(var(--radius-lg) + 6px);
}

body.sr-cards-soft .sr-grid:not(.sr-list) .sr-media {
  border-radius: var(--radius-lg);
}

body.sr-cards-soft .sr-grid:not(.sr-list) .sr-save {
  top: 18px;
  right: 18px;
}

body.sr-cards-soft .sr-grid:not(.sr-list) .sr-body {
  padding: 14px 4px 6px;
}

body.sr-cards-soft .sr-grid:not(.sr-list) .sr-price {
  margin-top: 8px;
}

body.sr-cards-soft .sr-seller a {
  font-weight: 400;
}

body.sr-cards-soft .sr-list .sr-card {
  padding: 8px 52px 8px 8px;
}

body.sr-cards-soft .sr-list .sr-media {
  border-radius: var(--radius-lg);
}

/* editorial: the photo fills the card and the words sit over its foot on a
   gradient — one line of title, then the price and the seller. The overlay
   lets the pointer through to the photo's link; its own links stay live. */
body.sr-cards-editorial .sr-grid:not(.sr-list) .sr-card {
  background: var(--tile);
}

body.sr-cards-editorial .sr-grid:not(.sr-list) .sr-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  pointer-events: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "title title" "price seller";
  align-items: baseline;
  -moz-column-gap: 10px;
       column-gap: 10px;
}

body.sr-cards-editorial .sr-grid:not(.sr-list) .sr-body a {
  pointer-events: auto;
}

body.sr-cards-editorial .sr-grid:not(.sr-list) .sr-title {
  grid-area: title;
  color: #fff;
  font-size: 14px;
  -webkit-line-clamp: 1;
  min-height: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.sr-cards-editorial .sr-grid:not(.sr-list) .sr-price {
  grid-area: price;
  color: #fff;
  font-size: 15px;
  margin-top: 3px;
  white-space: nowrap;
}

body.sr-cards-editorial .sr-grid:not(.sr-list) .sr-price s {
  color: rgba(255, 255, 255, 0.7);
}

body.sr-cards-editorial .sr-grid:not(.sr-list) .sr-seller {
  grid-area: seller;
  margin-top: 3px;
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

body.sr-cards-editorial .sr-grid:not(.sr-list) .sr-seller a {
  color: rgba(255, 255, 255, 0.85);
}

body.sr-cards-editorial .sr-grid:not(.sr-list) .sr-seller a:hover {
  color: #fff;
}

.sr-more {
  display: flex;
  justify-content: center;
  margin: 32px 0 48px;
}

/* ---------- marketing slot ---------- */
/* The mockup's ad tile: dashed hairline, the hero ground, a small label. In
   the grid it is one cell; as a top banner it runs the width of the shelf. */
.sr .sr-ad {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 22px;
  border: 2px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--hero-bg);
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
}

.sr-ad-media {
  display: block;
  margin: -22px -22px 6px;
}

.sr-ad-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  -o-object-fit: cover;
     object-fit: cover;
}

.sr-ad-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sr-ad small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sr-ad-title {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  letter-spacing: var(--head-ls);
  font-size: 18px;
  line-height: 1.25;
}

.sr-ad-text {
  font-size: 14px;
  color: var(--muted);
}

.sr-ad-more {
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}

.sr .sr-ad-top {
  margin: 0 0 18px;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.sr-ad-top .sr-ad-media {
  flex: 0 0 200px;
  margin: -22px 0 -22px -22px;
  align-self: stretch;
}

.sr-ad-top .sr-ad-media img {
  height: 100%;
  aspect-ratio: auto;
  min-height: 120px;
}

.sr-list .sr-ad {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 12px;
}

.sr-list .sr-ad-media {
  flex: 0 0 140px;
  margin: 0;
}

.sr-list .sr-ad-media img {
  aspect-ratio: 1/1;
  border-radius: var(--radius);
}

/* ---------- buying and offers ---------- */
.sr-product-buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.sr .sr-product-buy-row .sr-btn,
.sr .sr-product-buy-row .sr-btn-o {
  margin: 0;
}

.sr-offer {
  margin: 12px 0 0;
  padding: 14px 16px;
  background: var(--hero-bg);
  border-radius: var(--radius-lg);
}

.sr-offer[hidden],
.sr .sr-offer [hidden] {
  display: none;
}

.sr-offer-info {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--muted);
}

.sr-offer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.sr-offer-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.sr-offer-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.sr-offer input {
  width: 96px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--nav-bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.sr-offer-note {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
}

.sr-offer-note:empty {
  display: none;
}

.sr-offer-disclaimer {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- follow ---------- */
.sr-follow-menu summary {
  list-style: none;
  cursor: pointer;
}

.sr-follow-menu summary::-webkit-details-marker {
  display: none;
}

.sr .sr-follow.on {
  background: var(--chip-bg);
  border-color: transparent;
}

.sr-follow-form {
  padding: 14px 16px;
  min-width: 260px;
}

.sr-follow-what {
  margin: 0 0 4px;
  font-weight: 600;
  font-size: 14px;
}

.sr-follow-how {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.sr-follow-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  cursor: pointer;
}

.sr-follow-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  margin: 0;
}

.sr-follow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sr .sr-follow-actions .sr-btn,
.sr .sr-follow-actions .sr-btn-o {
  margin: 0;
}

.sr-listhead .sr-follow-menu,
.sr-listhead > .sr-follow {
  margin-right: auto;
}

.sr-seller-follow {
  margin-top: 12px;
}

/* ---------- account pages, forms, cart, checkout, orders ---------- */
.sr-login-wide {
  max-width: 600px;
}

.sr-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sr-form h2 {
  font-size: 18px;
  margin: 16px 0 4px;
}

.sr-form label {
  font-size: 14px;
  font-weight: 600;
}

.sr-form input:not([type=radio]):not([type=checkbox]),
.sr-form select,
.sr-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--nav-bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.sr-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}

.sr-form-row > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sr .sr-form .sr-btn {
  margin-top: 8px;
  align-self: flex-start;
}

.sr-form-more {
  margin: 4px 0;
}

.sr-form-more summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  padding: 8px 0;
}

.sr-form-more[open] summary {
  margin-bottom: 8px;
}

.sr-form-more > label,
.sr-form-more > input,
.sr-form-more > .sr-form-row {
  display: block;
  margin-bottom: 8px;
}

.sr-form-more > .sr-form-row {
  display: grid;
}

.sr-form-note,
.sr-account-note,
.sr-muted {
  font-size: 13px;
  color: var(--muted);
}

.sr-required {
  color: var(--accent);
}

.sr-account-title {
  font-size: 26px;
}

.sr-account-who {
  margin: 4px 0 14px;
  font-size: 14px;
  color: var(--muted);
}

.sr-account-nav {
  margin-bottom: 20px;
}

.sr .sr-chip-quiet {
  margin-left: auto;
  color: var(--muted);
}

.sr-account-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.sr .sr-account-item .sr-account-remove {
  align-self: flex-start;
  margin: 0;
  font-size: 13px;
  min-height: 36px;
}

.sr-account-offer {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.sr-account-offer small {
  font-weight: 400;
  color: var(--muted);
}

.sr-account-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sr .sr-account-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 16px;
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-lg);
}

body.sr-dawn .sr-account-row {
  border: 1px solid var(--line);
}

.sr-account-row-body {
  flex: 1 1 240px;
  min-width: 0;
}

.sr-account-row-body h3 {
  font-size: 16px;
  margin: 0 0 4px;
}

.sr-account-row-body p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.sr .sr-account-row .sr-btn-o,
.sr .sr-account-row .sr-account-remove {
  margin: 0;
}

/* Cart rows: thumbnail, name, price, the way out. Also the order's lines. */
.sr-cart-store {
  margin-bottom: 28px;
}

.sr-cart-store-name {
  font-size: 18px;
  margin: 0 0 10px;
}

.sr-cart-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sr .sr-cart-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-lg);
}

body.sr-dawn .sr-cart-row {
  border: 1px solid var(--line);
}

.sr-cart-row-sold {
  opacity: 0.6;
}

.sr-cart-photo {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  background: var(--tile);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.sr-cart-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sr-cart-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sr-cart-body .sr-title {
  min-height: 0;
}

.sr-cart-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.sr-cart-price s {
  font-size: 13px;
  color: var(--muted);
}

.sr .sr-cart-remove {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.sr .sr-cart-remove:hover {
  background: var(--chip-bg);
  color: var(--ink);
}

.sr-cart-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 20px;
  margin-top: 12px;
}

.sr-cart-total {
  margin: 0;
  font-size: 15px;
}

.sr-cart-total strong {
  font-size: 18px;
}

.sr .sr-cart-foot .sr-btn {
  margin: 0;
}

/* Checkout: the form left, the summary right. */
.sr-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.sr-checkout-summary {
  padding: 18px;
  background: var(--hero-bg);
  border-radius: var(--radius-lg);
}

.sr-checkout-summary h2 {
  font-size: 18px;
  margin: 0 0 12px;
}

.sr-checkout-summary .sr-cart-row {
  background: var(--nav-bg);
}

.sr-checkout-shipping {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sr-checkout-fee {
  margin-left: auto;
  font-weight: 600;
}

.sr-checkout-totals {
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}

.sr-checkout-totals div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sr-checkout-totals dt {
  color: var(--muted);
}

.sr-checkout-totals dd {
  margin: 0;
  font-weight: 600;
}

.sr-checkout-sum {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 17px;
}

.sr-checkout-sum dt {
  color: var(--ink);
  font-weight: 600;
}

.sr-order-totals {
  max-width: 360px;
  margin-left: auto;
}

.sr-order-status {
  flex: 0 0 auto;
}

.sr-thankyou h1 {
  font-size: 32px;
}

/* ---------- email login ---------- */
.sr-login {
  max-width: 440px;
  margin: 40px auto 64px;
}

.sr-login h1 {
  font-size: 28px;
  margin-bottom: 10px;
}

.sr-login-intro,
.sr-login-sent {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 20px;
}

.sr-login-sent {
  color: var(--ink);
  padding: 14px 16px;
  background: var(--hero-bg);
  border-radius: var(--radius-lg);
}

.sr-login-dev,
.sr-login-alt {
  font-size: 13px;
  color: var(--muted);
  margin: 16px 0 0;
}

.sr .sr-login-alt a {
  color: var(--accent);
  font-weight: 600;
}

.sr-login-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sr-login-form label {
  font-size: 14px;
  font-weight: 600;
}

.sr-login-form input {
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--nav-bg);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}

.sr .sr-login-form .sr-btn {
  margin-top: 8px;
  align-self: flex-start;
}

.sr-login-error {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: #fff1f0;
  color: #a12020;
  font-size: 14px;
}

/* The login page: the Kirpparikalle account left, the email link right. */
.sr-login-two {
  max-width: 980px;
}

.sr-login-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 8px;
}

.sr-login-col {
  padding: 22px 22px 20px;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.sr-login-col h2 {
  font-size: 20px;
  margin: 0 0 6px;
}

.sr-login-col-quick {
  background: var(--hero-bg);
  border-color: transparent;
}

.sr-benefits {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
}

.sr-benefits li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.sr-benefits li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 700;
}

.sr-login-quick-note {
  margin-top: 14px;
}

/* A short note at the foot of the screen: "you are signed in", or the
   invitation to sign in that follows a guest's first save to the list. */
.sr-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px 12px 18px;
  background: var(--nav-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  font-size: 14px;
}

.sr-toast[hidden] {
  display: none;
}

.sr-toast-ok {
  padding-right: 18px;
}

.sr .sr-toast .sr-btn {
  margin: 0;
  white-space: nowrap;
}

.sr .sr-toast-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.sr-list-keep {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
}

.sr .sr-list-keep a {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- visit list ---------- */
.sr-list-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  flex: 0 0 44px;
}

.sr-list-link svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.sr-list-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.sr-save {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  display: grid;
  place-items: center;
  color: var(--ink);
  padding: 0;
}

.sr-save svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.sr-save.on {
  color: var(--accent);
}

.sr-save.on svg {
  fill: currentColor;
}

.sr-save-text {
  position: static;
  width: auto;
  height: auto;
  border-radius: 999px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  padding: 8px 14px;
  gap: 8px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  margin: -8px 0 18px;
}

.sr-list-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sr-list-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
}

.sr-list-photo {
  flex: 0 0 88px;
  width: 88px;
  aspect-ratio: 1/1;
  background: var(--tile);
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  position: relative;
}

.sr-list-photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sr-list-body {
  flex: 1;
  min-width: 0;
}

.sr-list-body .sr-title {
  min-height: 0;
}

.sr-list-body .sr-price {
  margin-top: 4px;
}

.sr-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.sr-list-seller {
  font-weight: 600;
}

.sr-list-seller:hover {
  color: var(--accent);
}

.sr .sr-list-remove {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  min-height: 44px;
}

.sr .sr-list-remove:hover {
  border-color: var(--ink);
}

.sr-share-url {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
}

/* display:flex above would beat the UA's [hidden]; keep it hidden until Share. */
.sr-share-url[hidden] {
  display: none;
}

.sr-share-url input {
  flex: 1 1 260px;
  min-width: 0;
  font: inherit;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
}

/* ---------- product page ---------- */
.sr-crumbs {
  margin: 20px 0 16px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sr-crumbs a:hover {
  color: var(--ink);
}

.sr-product {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 40px;
}

/* Every photo, large, stacked. The button is the tap target for the lightbox. */
.sr-photos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sr .sr-photo {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--tile);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: zoom-in;
}

.sr-photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  -o-object-fit: contain;
     object-fit: contain;
}

.sr-photo-empty {
  aspect-ratio: 4/5;
  cursor: default;
}

.sr-product-title {
  font-size: 28px;
  line-height: 1.15;
}

.sr-product-price {
  font-weight: 700;
  font-size: 24px;
  margin: 12px 0 16px;
}

.sr-product-price s {
  font-weight: 400;
  font-size: 15px;
  color: var(--muted);
  margin-left: 8px;
}

.sr-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.sr-product-actions .sr-save-text {
  margin: 0;
}

.sr .sr-share-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border-color: var(--line);
  font-size: 14px;
  min-height: 40px;
}

.sr-product-meta {
  margin: 14px 0 0;
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.sr-product-meta > div {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.sr-product-meta dt {
  color: var(--muted);
  min-width: 80px;
}

.sr-product-meta dd {
  margin: 0;
  font-weight: 600;
}

.sr-product-meta dd a:hover {
  color: var(--accent);
}

.sr-product-chips {
  margin: 14px 0 0;
}

.sr-chip-key {
  color: var(--muted);
  font-weight: 500;
}

/* StoreText::html() turns line breaks into <br>, so the text wraps normally. */
.sr-product-desc {
  margin: 18px 0 0;
}

.sr-product-desc p {
  margin: 0 0 10px;
}

.sr-product-desc a {
  color: var(--accent);
  text-decoration: underline;
}

.sr .sr-product-buy {
  margin: 20px 0 0;
}

.sr-product-seller {
  margin-top: 22px;
}

.sr-similar .sr-listhead {
  margin-top: 8px;
}

.sr-similar .sr-listhead h2 {
  font-size: 20px;
}

.sr-product-store {
  margin: 32px 0 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

/* Lightbox */
.sr-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.92);
  display: grid;
  place-items: center;
}

.sr-lightbox[hidden] {
  display: none;
}

.sr-lb-img {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  -o-object-fit: contain;
     object-fit: contain;
  cursor: zoom-out;
}

.sr .sr-lb-close,
.sr .sr-lb-prev,
.sr .sr-lb-next {
  position: fixed;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.sr .sr-lb-close {
  top: 16px;
  right: 16px;
}

.sr .sr-lb-prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.sr .sr-lb-next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.sr-lb-count {
  position: fixed;
  bottom: 16px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

body.sr-lb-open {
  overflow: hidden;
}

.sr-h-small {
  font-size: 13px;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ---------- seller block ---------- */
/* One design wherever a seller appears, built like the product card: the
   strip of the three newest photos on top, the picture (or the initials on
   the brand colour) with the name, the first line of the description and the
   counts, the website and social icons last. The name's anchor is stretched
   over the block so the whole block is the link; the icons sit above it. */
.sr .sr-seller-block {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-width: 0;
  transition: transform 0.15s ease;
}

.sr .sr-seller-block:hover {
  transform: translateY(-2px);
}

.sr-seller-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  background: var(--tile);
}

.sr-seller-strip img,
.sr-seller-strip-empty {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  background: var(--tile);
}

.sr-seller-head-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px 0;
}

body.sr-dawn .sr-seller-head-row {
  padding: 12px 0 0;
}

.sr-avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.sr-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.sr-seller-body {
  min-width: 0;
  flex: 1;
}

.sr-seller-name {
  font-size: 16px;
  line-height: 1.25;
}

.sr-seller-name a:hover {
  color: var(--accent);
}

.sr-seller-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sr-seller-business {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.sr-seller-line {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sr-seller-meta {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.sr-seller-new {
  color: var(--accent);
  font-weight: 600;
}

.sr-seller-icons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 10px 14px 14px;
}

body.sr-dawn .sr-seller-icons {
  padding: 10px 0 0;
}

.sr .sr-seller-icons a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--ink);
}

.sr .sr-seller-icons a:hover {
  color: var(--accent);
}

.sr-seller-icons svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The head of the seller page: the same block, laid out sideways — the text
   left, the strip right — since it runs the width of the page. */
.sr-seller-head {
  margin: 28px 0 20px;
}

.sr .sr-seller-block-here {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  overflow: visible; /* the follow menu drops out of the block */
}

.sr-seller-block-here .sr-seller-strip {
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  overflow: hidden;
}

.sr .sr-seller-block-here:hover {
  transform: none;
}

.sr-seller-block-here .sr-seller-strip {
  grid-column: 2;
  grid-row: 1/3;
}

.sr-seller-block-here .sr-seller-head-row {
  padding: 18px 18px 0;
}

.sr-seller-block-here .sr-seller-icons {
  padding: 12px 18px 18px;
}

body.sr-dawn .sr-seller-block-here .sr-seller-head-row {
  padding: 14px 18px 0 0;
}

body.sr-dawn .sr-seller-block-here .sr-seller-icons {
  padding: 12px 18px 0 0;
}

.sr-seller-block-here .sr-seller-name {
  font-size: 26px;
}

.sr-seller-block-here .sr-seller-line {
  display: block;
  -webkit-line-clamp: unset;
  font-size: 15px;
}

.sr-seller-block-here .sr-avatar {
  flex-basis: 72px;
  width: 72px;
  height: 72px;
  font-size: 24px;
}

.sr-sellers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* ---------- notices ---------- */
.sr-notice {
  text-align: center;
  padding: 64px 0;
  font-size: 18px;
}

.sr .sr-notice .sr-btn {
  margin-top: 16px;
}

/* ---------- footer ---------- */
.sr-footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 28px;
  color: var(--muted);
  font-size: 14px;
  margin-top: 24px;
}

.sr-footer-cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 24px;
}

.sr-footer h3 {
  font-size: 15px;
  color: var(--ink);
  margin-bottom: 10px;
}

.sr-footer p {
  margin: 0;
  max-width: 40ch;
}

.sr-footer ul {
  padding: 0;
  margin: 0;
}

.sr-footer li {
  list-style: none;
  margin: 6px 0;
}

.sr-footer a:hover {
  color: var(--accent);
}

.sr-by {
  margin-top: 28px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .sr-cats a,
  .sr .sr-chip,
  .sr-menu a,
  .sr-view button,
  .sr-sort select {
    min-height: 44px;
  }
  .sr .sr-chip {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media (max-width: 960px) {
  .sr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sr-grid.sr-grid-small {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sr-grid.sr-grid-large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sr-row {
    grid-auto-columns: calc((100% - 48px) / 4);
  }
  .sr-seller-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sr-hero {
    grid-template-columns: 1fr;
  }
  .sr-collage {
    grid-template-rows: 140px 140px;
  }
  .sr-hero-image img {
    height: 290px;
  }
  .sr-product {
    grid-template-columns: 1fr;
  }
  .sr-checkout-grid {
    grid-template-columns: 1fr;
  }
  .sr-login-cols {
    grid-template-columns: 1fr;
  }
  .sr-sellers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sr .sr-seller-block-here {
    grid-template-columns: 1fr;
  }
  .sr-seller-block-here .sr-seller-strip {
    grid-column: 1;
    grid-row: 1;
  }
  .sr-footer-cols {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .sr-wrap {
    padding: 0 16px;
  }
  .sr-top {
    height: auto;
    padding: 12px 0;
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  .sr-search {
    max-width: none;
    order: 3;
    flex-basis: 100%;
  }
  .sr-actions {
    margin-left: auto;
    gap: 4px;
  }
  /* With the account and cart there too, the row fits only as icons. */
  .sr-top {
    gap: 10px 4px;
  }
  .sr .sr-signin {
    width: 44px;
    justify-content: center;
    padding: 0;
  }
  .sr-signin span {
    display: none;
  }
  .sr-user summary {
    max-width: 110px;
    padding: 10px 0;
  }
  .sr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
  }
  .sr-grid.sr-grid-small {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
  }
  .sr-grid.sr-grid-small .sr-title {
    font-size: 13px;
  }
  .sr-grid.sr-grid-small .sr-price {
    font-size: 15px;
  }
  .sr-grid.sr-grid-large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sr-list .sr-media {
    flex-basis: 96px;
    width: 96px;
  }
  .sr-form-row {
    grid-template-columns: 1fr;
  }
  .sr-cart-price {
    align-items: flex-start;
  }
  .sr-list .sr-card {
    padding-right: 44px;
  }
  .sr-hero {
    padding: 24px;
    margin: 16px 0 20px;
  }
  .sr .sr-cat-tile {
    flex-basis: 140px;
  }
  .sr-row {
    grid-auto-columns: calc((100% - 10px) / 2 - 20px);
    gap: 10px;
  }
  .sr-seller-tiles {
    grid-template-columns: 1fr;
  }
  .sr-hero h1 {
    font-size: 30px;
  }
  .sr-title {
    font-size: 14px;
  }
  .sr-listhead {
    margin-top: 28px;
  }
  .sr-listhead h2 {
    font-size: 22px;
  }
  .sr-tools {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .sr-list-photo {
    flex-basis: 72px;
    width: 72px;
  }
  .sr .sr-ad-top {
    flex-direction: column;
    align-items: stretch;
  }
  .sr-ad-top .sr-ad-media {
    flex-basis: auto;
    margin: -22px -22px 6px;
  }
  .sr-list .sr-ad-media {
    flex-basis: 96px;
  }
  .sr-list-row {
    flex-wrap: wrap;
  }
  .sr .sr-list-remove {
    margin-left: 86px;
  }
  /* A chip's menu opened near the right edge ran past the viewport. Below
     640px it is a sheet pinned to the bottom of the screen instead. */
  .sr-menu {
    position: fixed;
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 16px;
    max-width: none;
    max-height: 50vh;
    z-index: 40;
  }
  .sr-product-title {
    font-size: 22px;
  }
  .sr-sellers {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sr-card,
  .sr .sr-cat-tile {
    transition: none;
  }
  .sr-card:hover,
  .sr .sr-cat-tile:hover {
    transform: none;
  }
}

/* ---------- several stores on one domain (Part 2) ----------

   A main-tier domain presenting more than one store: the store tiles on the
   front page and /stores, the store line on every card, the sellers page
   grouped by store, and the Store chip. Nothing here matches on a single-store
   presentation, which renders no .sr-store-* markup at all. */

.sr-store-tiles .sr-cat-tile {
  flex-basis: 220px;
}

.sr-store-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .02em;
}

.sr-store-logo img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.sr-store-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.sr .sr-store-grid .sr-cat-tile {
  flex: none;
}

.sr-card-store {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.sr-card-store a {
  color: var(--muted);
}

.sr-card-store a:hover {
  color: var(--accent);
}

.sr-store-group {
  margin: 28px 0 12px;
  font-size: 18px;
  font-weight: 700;
}

.sr-store-group:first-of-type {
  margin-top: 0;
}

.sr-store-group .sr-count {
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
  margin-left: 6px;
}

@media (max-width: 960px) {
  .sr-store-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .sr-store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sr-store-tiles .sr-cat-tile {
    flex-basis: 160px;
  }
}

/* ---------- reviews and ratings ----------

   The star row is two copies of the same five characters, the filled one
   clipped to a percentage, so a half star needs no image and scales with
   whatever font size it is dropped into. --star is not a theme token: a
   store picks its accent, not the colour of a star. */

.sr-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  margin-top: 4px;
}

a.sr-rating:hover .sr-rating-n {
  color: var(--accent);
}

.sr-stars {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 1px;
  font-size: 13px;
}

.sr-stars-off {
  color: rgba(0, 0, 0, .18);
}

.sr-stars-on {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: #e3a008;
}

.sr-rating-n {
  font-variant-numeric: tabular-nums;
}

/* The card and the seller block keep their rating on one quiet line. */
.sr-card .sr-rating,
.sr-seller-block .sr-rating {
  font-size: 12px;
}

.sr-product-info .sr-rating {
  font-size: 15px;
  margin: 6px 0 0;
}

.sr-product-info .sr-stars {
  font-size: 17px;
}

.sr-reviews {
  margin-top: 28px;
}

.sr-reviews .sr-listhead {
  align-items: baseline;
}

.sr-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.sr-review {
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

body.sr-dawn .sr-review {
  border-top: 1px solid var(--hair);
  border-radius: 0;
  padding: 14px 0;
}

.sr-review-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.sr-review-head .sr-rating {
  margin: 0;
}

.sr-review-name {
  font-weight: 600;
  color: var(--ink);
}

.sr-review-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--pill);
  background: var(--tile);
  color: var(--muted);
}

.sr-review-date {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.sr-review-body {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

.sr-review-reply {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--tile);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
  line-height: 1.5;
}

.sr-review-reply b {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 3px;
}

.sr-review-reply p {
  margin: 0;
}

.sr-review-signin {
  margin: 16px 0 0;
}

.sr-review-form {
  margin: 20px 0 0;
  max-width: 560px;
  display: grid;
  gap: 12px;
}

.sr-review-form h3 {
  margin: 0;
  font-size: 17px;
}

.sr-review-field {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.sr-review-field input,
.sr-review-field textarea {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 9px 11px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--bg);
  width: 100%;
  box-sizing: border-box;
}

.sr-review-field textarea {
  resize: vertical;
  min-height: 88px;
}

.sr-review-form .sr-btn {
  justify-self: start;
}

/* The rating picker: five radios rendered highest-first, so hovering or
   selecting one lights it and every star after it in the source. */
.sr-review-rating {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
}

.sr-review-rating legend {
  float: left;
  width: 100%;
  font-size: 13px;
  color: var(--muted);
  padding: 0 0 4px;
}

.sr-review-rating input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.sr-review-rating label {
  font-size: 26px;
  line-height: 1;
  color: rgba(0, 0, 0, .18);
  cursor: pointer;
}

.sr-review-rating input:checked ~ label,
.sr-review-rating label:hover,
.sr-review-rating label:hover ~ label {
  color: #e3a008;
}

.sr-review-rating input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-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;
}

/* ---------- a seller's banner and tagline (seller_extras) ----------

   The banner sits behind the avatar at the top of the seller block; the
   block gets padding for it and the avatar lifts over its lower edge, so
   the picture reads as the seller's own header rather than a stray image.
   Nothing here matches on a seller the store has set no banner for. */

.sr-seller-block.sr-has-banner {
  position: relative;
  padding-top: 0;
}

.sr-seller-banner {
  display: block;
  aspect-ratio: 4 / 1;
  background: var(--tile);
  overflow: hidden;
  margin: 0 0 -22px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sr-seller-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sr-has-banner .sr-seller-head-row {
  position: relative;
  padding: 0 14px 12px;
}

.sr-has-banner .sr-avatar {
  box-shadow: 0 0 0 3px var(--card-bg, var(--bg));
}

.sr-has-banner .sr-seller-strip,
.sr-has-banner .sr-seller-icons {
  padding-left: 14px;
  padding-right: 14px;
}

/* On the seller's own page the block is the head of the page: a two-column
   grid, text left and the photo strip right. The banner spans both and the
   strip drops to the row below it, so the picture is the head of the whole
   block rather than a panel beside the strip. The block keeps overflow
   visible there — the follow menu drops out of it — so the banner rounds
   its own top corners rather than being clipped by the card. */
.sr-seller-block-here .sr-seller-banner {
  aspect-ratio: 5 / 1;
  margin-bottom: -30px;
  grid-column: 1 / -1;
  grid-row: 1;
}

.sr-has-banner.sr-seller-block-here .sr-seller-strip {
  grid-row: 2 / 4;
  border-radius: 0;
}

.sr-seller-tagline {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--accent);
  font-weight: 600;
}

.sr-seller-block-here .sr-seller-tagline {
  font-size: 16px;
}

@media (max-width: 640px) {
  .sr-seller-banner,
  .sr-seller-block-here .sr-seller-banner {
    aspect-ratio: 3 / 1;
    margin-bottom: -18px;
  }
}

/* ---------- urgency: how few are left, how many looked today ----------

   Both are real counts and both are absent below their threshold, so these
   rules only ever match when there is something true to say. */

.sr-left {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #9a3412;
  background: #fff1e7;
  border-radius: var(--pill);
  padding: 2px 9px;
  vertical-align: middle;
  margin-left: 6px;
}

.sr-listhead h2 .sr-left {
  font-size: 12px;
}

.sr-urgency {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 13px;
}

.sr-urgency .sr-left {
  margin-left: 0;
}

.sr-views {
  color: var(--muted);
}

/* ---------- mobile: the filter sheet, a sticky tools bar, a swipeable
   gallery, and tap targets ----------

   Above 640px the sheet is display:contents, so the chips are the row they
   have always been and nothing below changes the desktop page. */

.sr-filterbar {
  display: contents;
}

.sr-filter-sheet {
  display: contents;
}

/* `.sr .sr-chip` is two classes deep, so hiding a chip needs to be too. */
.sr .sr-filter-open,
.sr-filter-head,
.sr-filter-apply {
  display: none;
}

/* The sort and size bar follows the header down the page — on a phone
   only, where the shelf is long and the controls are far away by the time
   you want them. --sr-header-h is watched by the layout's script, because
   the three header layouts, the webfonts and the domain's own top bar all
   change how tall the header is. */
@media (max-width: 640px) {
  .sr-listhead .sr-tools {
    position: sticky;
    top: var(--sr-header-h, 56px);
    z-index: 9;
    background: var(--bg);
    padding: 6px 0;
  }
}

/* ---------- the product gallery ---------- */

.sr-photo-dots {
  display: none;
}

@media (max-width: 640px) {
  /* One photo per screen, snapped, swiped by the browser itself. */
  .sr-photos {
    display: flex;
    /* The stack above is a column; a phone lays the same photos in a row. */
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gutter, 16px) * -1);
    padding-inline: var(--gutter, 16px);
  }

  .sr-photos::-webkit-scrollbar {
    display: none;
  }

  .sr-photos > .sr-photo {
    flex: 0 0 100%;
    scroll-snap-align: center;
    margin: 0;
  }

  .sr-photo-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0;
  }

  .sr-photo-dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    position: relative;
    cursor: pointer;
  }

  .sr-photo-dot::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
  }

  .sr-photo-dot.on::after {
    background: var(--accent);
    width: 22px;
  }

  /* ---------- the filter sheet ---------- */

  .sr-filterbar {
    display: block;
  }

  .sr .sr-filter-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .sr-filter-n:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }

  .sr-filter-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(0, 0, 0, .38);
  }

  .sr-filterbar-open .sr-filter-sheet {
    display: block;
  }

  body.sr-sheet-open {
    overflow: hidden;
  }

  .sr-filterbar-open .sr-filters,
  .sr-filter-head,
  .sr-filter-apply {
    position: fixed;
    left: 0;
    right: 0;
    background: var(--bg);
  }

  .sr-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: calc(78vh - 4px);
    padding: 14px 16px 10px;
    border-radius: 16px 16px 0 0;
    font-size: 17px;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
  }

  .sr-filter-close {
    border: 0;
    background: none;
    font-size: 26px;
    line-height: 1;
    width: 44px;
    height: 44px;
    cursor: pointer;
    color: var(--ink);
  }

  /* The chips themselves: the middle of the sheet, and the only part that
     scrolls. */
  .sr-filterbar-open .sr-filters {
    display: block;
    top: 22vh;
    bottom: 72px;
    overflow-y: auto;
    padding: 4px 16px 8px;
    margin: 0;
  }

  .sr-filterbar-open .sr-filters > .sr-chip,
  .sr-filterbar-open .sr-chip-menu {
    display: block;
    width: 100%;
    margin: 0 0 2px;
  }

  /* In the sheet a chip is a full-width row and its menu opens inline
     underneath it rather than floating: seven groups, one of which is the
     whole category tree, is a list to scroll, not a wall to read. */
  .sr-filterbar-open .sr-chip-menu > summary {
    width: 100%;
    border-radius: var(--radius);
    justify-content: space-between;
  }

  .sr-filterbar-open .sr-menu {
    position: static;
    display: block;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 2px 0 8px 10px;
    min-width: 0;
    max-height: none;
  }

  .sr-filterbar-open .sr-menu a.staged {
    font-weight: 700;
    color: var(--accent);
  }

  .sr-filter-apply {
    display: block;
    bottom: 0;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
  }

  .sr-filter-apply .sr-btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  /* The sticky tools bar needs the page background behind it, not the card. */
  .sr-listhead .sr-tools {
    padding: 8px 0;
    margin-inline: calc(var(--gutter, 16px) * -1);
    padding-inline: var(--gutter, 16px);
    border-bottom: 1px solid var(--line);
  }
}

/* ---------- tap targets ----------

   Everything the presentation's own chrome offers a finger is at least
   44x44 on a touch screen. Links inside running prose — a review body, the
   about text, a product description, the domain's own custom HTML — are
   left alone: they are words in a sentence, not controls. */
@media (max-width: 640px) {
  .sr-save,
  .sr-seller-icons a,
  .sr-lb-close,
  .sr-lb-prev,
  .sr-lb-next,
  .sr-toast-close {
    min-width: 44px;
    min-height: 44px;
  }

  .sr-save {
    width: 44px;
    height: 44px;
  }

  .sr-seller-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sr-btn,
  .sr-btn-o,
  .sr-chip,
  .sr-view button,
  .sr-grid-size button,
  .sr-search input,
  .sr-search button,
  .sr-sort select,
  .sr-review-field input,
  .sr-review-field textarea {
    min-height: 44px;
  }

  .sr-view button,
  .sr-grid-size button {
    min-width: 44px;
  }

  .sr-lang > summary,
  .sr-user > summary {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .sr-menu a,
  .sr-lang-menu a,
  .sr-user-menu a,
  .sr-footer a,
  .sr-crumbs a,
  .sr-more-link,
  .sr-recent-clear,
  .sr-title,
  .sr-cat-tile,
  .sr-rating,
  .sr-seller a,
  .sr-card-store a,
  .sr-review-rating label {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .sr-title {
    align-items: flex-start;
  }

  .sr-seller,
  .sr-card-store {
    margin-top: 0;
  }

  .sr-cat-tile {
    display: flex;
    flex-direction: column;
  }

  .sr-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }

  .sr-review-rating label {
    justify-content: center;
    min-width: 44px;
  }
}

@media (max-width: 640px) {
  /* .sr .sr-share-btn sets its own padding at a higher specificity, so the
     minimum is restated at the same weight. */
  .sr .sr-share-btn,
  .sr .sr-btn,
  .sr .sr-btn-o {
    min-height: 44px;
  }

  /* The product's own facts: the seller and the category are links in a
     definition list, and both are things a finger goes for. */
  .sr-product-meta dd a,
  .sr-product-meta dt {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .sr-product-meta dd a {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  /* The seller block is one big link (.sr-seller-link::after covers it), but
     the name itself is what a finger aims at, and the avatar sits beside it —
     so the name gets its own 44 rather than relying on the stretch. */
  .sr-seller-name .sr-seller-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 640px) {
  /* The store name heading the sellers page groups under is a link too. */
  .sr-store-group a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 640px) {
  /* A short nickname is still a 44-wide target. */
  .sr-seller-name .sr-seller-link,
  .sr-store-group a {
    min-width: 44px;
  }

  /* A label is a tap target too: tapping it puts the cursor in the field. */
  .sr form label,
  .sr-review-field,
  .sr-follow-option {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .sr-review-field {
    display: grid;
    align-content: center;
  }
}

@media (max-width: 640px) {
  /* `position: sticky` only sticks inside its own parent'"'"'s box, and the
     heading row is a few pixels tall — so at this width the heading row is
     display:contents and its children become children of the listing,
     which is as tall as the shelf. The sort and size bar then follows the
     header all the way down. */
  .sr-listing > .sr-listhead {
    display: contents;
  }

  .sr-listing > .sr-listhead > h2 {
    margin: 0 0 8px;
  }
}

/* ================= mono =================================================

   Near-black on white with one accent. The template is made of rules and
   weight, not of colour and shadow: a 2px line under the header, hairlines
   everywhere else, no radius on anything, uppercase labels with wide
   tracking, and the accent kept for two jobs only — the price, and the
   thing you are currently on. Nothing here is a recoloured Dawn; the type
   scale, the header, the cards and the footer are all its own. */

body.sr-mono {
  --muted: #6b6b6b;
  --line: #111111;
  --hair: #e2e2e2;
  --nav-bg: #ffffff;
  --card-bg: transparent;
  --card-border: 0;
  --card-shadow: none;
}

body.sr-mono .sr-header {
  border-bottom: 2px solid var(--line);
}

body.sr-mono .sr-logo-mark {
  border-radius: 0;
  background: #111111;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: -.02em;
}

body.sr-mono .sr-logo-name {
  font-weight: 900;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

body.sr-mono .sr-logo-sub {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
}

/* The nav is a row of labels underlined when live, not pills. */
body.sr-mono .sr-cats {
  border-top: 1px solid var(--hair);
}

body.sr-mono .sr-cats a {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  border-radius: 0;
  background: none;
  padding: 14px 0;
  margin-right: 22px;
  border-bottom: 3px solid transparent;
}

body.sr-mono .sr-cats a.on {
  background: none;
  color: #111111;
  border-bottom-color: #111111;
}

body.sr-mono .sr-cats a:hover {
  background: none;
  border-bottom-color: var(--hair);
}

body.sr-mono .sr-cats .n {
  color: var(--muted);
  font-weight: 500;
}

body.sr-mono .sr-search input {
  border: 2px solid #111111;
  border-radius: 0;
  font-weight: 500;
}

body.sr-mono .sr-search button {
  border-radius: 0;
}

/* The hero is type on white with a rule under it, not a panel. */
body.sr-mono .sr-hero {
  background: none;
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  padding: 8px 0 34px;
}

body.sr-mono .sr-hero h1 {
  font-size: clamp(36px, 7vw, 68px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

body.sr-mono .sr-hero p {
  font-size: 16px;
  max-width: 46ch;
}

body.sr-mono .sr-listhead h2 {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .04em;
}

body.sr-mono .sr-listhead .sr-count {
  color: var(--accent);
  font-weight: 800;
}

body.sr-mono .sr-chip,
body.sr-mono .sr-chip-menu > summary {
  border-radius: 0;
  border: 1px solid #111111;
  background: none;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

body.sr-mono .sr-chip.on,
body.sr-mono .sr-chip-menu > summary.on {
  background: #111111;
  color: #ffffff;
}

body.sr-mono .sr-btn {
  border-radius: 0;
  background: #111111;
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
}

body.sr-mono .sr-btn:hover {
  background: var(--accent);
}

body.sr-mono .sr-btn-o {
  border-radius: 0;
  border: 2px solid #111111;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
}

/* Cards: no frame, a hairline under the photo, the price in the accent. */
body.sr-mono .sr-card .sr-media {
  border-radius: 0;
}

body.sr-mono .sr-title {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.005em;
}

body.sr-mono .sr-price {
  font-weight: 900;
  font-size: 16px;
  color: var(--accent);
  letter-spacing: -.02em;
}

body.sr-mono .sr-badge {
  border-radius: 0;
  background: #111111;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 800;
}

body.sr-mono .sr-cat-tile,
body.sr-mono .sr-seller-block {
  border-radius: 0;
  border: 1px solid var(--hair);
  box-shadow: none;
}

body.sr-mono .sr-cat-name,
body.sr-mono .sr-seller-name {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .03em;
}

body.sr-mono .sr-product-title {
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: uppercase;
  line-height: 1;
}

body.sr-mono .sr-product-price {
  color: var(--accent);
  font-weight: 900;
  letter-spacing: -.02em;
}

/* The footer is the one inversion: black, to close the page. */
body.sr-mono .sr-footer {
  background: #111111;
  color: #ffffff;
  border: 0;
}

body.sr-mono .sr-footer h3 {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 800;
  color: #ffffff;
}

body.sr-mono .sr-footer a,
body.sr-mono .sr-footer li,
body.sr-mono .sr-footer p {
  color: #c9c9c9;
}

body.sr-mono .sr-footer a:hover {
  color: var(--accent);
}

body.sr-mono .sr-by {
  border-top: 1px solid #303030;
  color: #8a8a8a;
}

/* ================= botanical ============================================

   Sage on cream. Everything is rounded — the mark is a circle, the nav is
   pills, the hero is a soft panel, the photographs sit inside their cards
   rather than filling them — and the headings are a serif. Where Mono uses
   rules, this uses air and a low warm shadow. */

body.sr-botanical {
  --muted: #77836f;
  --line: #ddd9cd;
  --hair: #e6e2d6;
  --nav-bg: #faf7f0;
  --card-bg: #fffdf8;
  --card-border: 0;
  --card-shadow: 0 6px 20px rgba(76, 92, 66, .09);
  --soft-bg: #f2f5ec;
}

body.sr-botanical .sr-header {
  border-bottom: 0;
  box-shadow: 0 4px 18px rgba(76, 92, 66, .06);
}

body.sr-botanical .sr-logo-mark {
  border-radius: 999px;
}

body.sr-botanical .sr-logo-name {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -.01em;
}

body.sr-botanical .sr-logo-sub {
  font-style: italic;
  letter-spacing: .04em;
}

body.sr-botanical .sr-cats a {
  border-radius: 999px;
  padding: 9px 16px;
  font-weight: 500;
}

body.sr-botanical .sr-cats a.on {
  background: var(--brand);
  color: #ffffff;
}

body.sr-botanical .sr-cats a.on .n {
  color: rgba(255, 255, 255, .8);
}

body.sr-botanical .sr-cats a:hover {
  background: var(--soft-bg);
}

body.sr-botanical .sr-search input {
  border-radius: 999px;
  background: #fffdf8;
  border: 1px solid var(--line);
  padding-left: 18px;
}

body.sr-botanical .sr-search button {
  border-radius: 999px;
}

/* A soft panel with a lot of room, and a serif headline. */
body.sr-botanical .sr-hero {
  background: linear-gradient(160deg, #fffdf8 0%, #f2f5ec 100%);
  border: 0;
  border-radius: 28px;
  padding: 38px 34px;
  box-shadow: 0 10px 32px rgba(76, 92, 66, .08);
}

body.sr-botanical .sr-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
}

body.sr-botanical .sr-hero-image img,
body.sr-botanical .sr-collage img {
  border-radius: 20px;
}

body.sr-botanical .sr-listhead h2 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -.01em;
}

body.sr-botanical .sr-chip,
body.sr-botanical .sr-chip-menu > summary {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fffdf8;
}

body.sr-botanical .sr-chip.on,
body.sr-botanical .sr-chip-menu > summary.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}

body.sr-botanical .sr-btn,
body.sr-botanical .sr-btn-o {
  border-radius: 999px;
  padding-inline: 20px;
}

body.sr-botanical .sr-btn-o {
  background: #fffdf8;
}

/* The photograph is set into the card, not flush with it: a smaller
   rounded rectangle on a tinted ground, with room around it. */
body.sr-botanical .sr-card {
  background: var(--card-bg);
  border-radius: 22px;
  padding: 10px 10px 14px;
  box-shadow: var(--card-shadow);
}

body.sr-botanical .sr-card .sr-media {
  border-radius: 16px;
  background: var(--soft-bg);
}

body.sr-botanical .sr-card .sr-media img {
  border-radius: 16px;
  transition: transform .5s ease;
}

body.sr-botanical .sr-card:hover .sr-media img {
  transform: scale(1.035);
}

body.sr-botanical .sr-body {
  padding: 10px 6px 0;
}

body.sr-botanical .sr-title {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
}

body.sr-botanical .sr-price {
  font-weight: 600;
}

body.sr-botanical .sr-badge {
  border-radius: 999px;
  background: rgba(255, 253, 248, .94);
  color: var(--brand);
  font-weight: 600;
}

body.sr-botanical .sr-cat-tile,
body.sr-botanical .sr-seller-block {
  border-radius: 22px;
  border: 0;
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
}

body.sr-botanical .sr-cat-media,
body.sr-botanical .sr-cat-media img {
  border-radius: 18px 18px 0 0;
}

body.sr-botanical .sr-seller-name,
body.sr-botanical .sr-product-title {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -.01em;
}

body.sr-botanical .sr-avatar {
  border-radius: 999px;
}

/* The footer is a cream panel that curves away from the page. */
body.sr-botanical .sr-footer {
  background: linear-gradient(180deg, #f2f5ec 0%, #eaf0e3 100%);
  border: 0;
  border-radius: 32px 32px 0 0;
  margin-top: 48px;
}

body.sr-botanical .sr-footer h3 {
  font-family: var(--font-head);
  font-weight: 600;
}

body.sr-botanical .sr-by {
  border-top: 1px solid rgba(106, 127, 92, .18);
}

/* ================= studio ===============================================

   The photographs, packed. Edge to edge, six across, square, four pixels
   apart, and every word shrunk to a caption: the grid is the page and the
   text gets out of its way. Monochrome on white, one quiet grotesque, and
   the chrome — header, chips, footer — pared back to labels. */

body.sr-studio {
  --muted: #8a8a8a;
  --line: #ececec;
  --hair: #ececec;
  --nav-bg: #ffffff;
  --card-bg: transparent;
  --card-border: 0;
  --card-shadow: none;
}

body.sr-studio .sr-header {
  border-bottom: 1px solid var(--hair);
}

body.sr-studio .sr-top {
  padding-block: 10px;
}

body.sr-studio .sr-logo-mark {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 0;
  font-size: 12px;
}

body.sr-studio .sr-logo-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.sr-studio .sr-logo-sub {
  display: none;
}

body.sr-studio .sr-cats {
  border-top: 1px solid var(--hair);
}

body.sr-studio .sr-cats a {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 500;
  background: none;
  border-radius: 0;
  padding: 11px 0;
  margin-right: 20px;
  color: var(--muted);
}

body.sr-studio .sr-cats a.on {
  background: none;
  color: #101010;
}

body.sr-studio .sr-cats a:hover {
  background: none;
  color: #101010;
}

body.sr-studio .sr-cats .n {
  font-size: 9px;
  opacity: .6;
}

body.sr-studio .sr-search input {
  border-radius: 0;
  border: 1px solid var(--hair);
  font-size: 13px;
}

/* Almost no hero: a line of type, and the pictures immediately. */
body.sr-studio .sr-hero {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 22px 0 18px;
  gap: 18px;
}

body.sr-studio .sr-hero h1 {
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
}

body.sr-studio .sr-hero p {
  font-size: 13px;
  color: var(--muted);
  max-width: 42ch;
}

body.sr-studio .sr-hero-image img,
body.sr-studio .sr-collage img,
body.sr-studio .sr-cat-media img {
  border-radius: 0;
}

/* Section headings are captions, not titles. */
body.sr-studio .sr-listhead h2 {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
}

body.sr-studio .sr-listhead .sr-count {
  font-size: 11px;
  letter-spacing: .1em;
}

body.sr-studio .sr-chip,
body.sr-studio .sr-chip-menu > summary {
  border-radius: 0;
  border: 1px solid var(--hair);
  background: none;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 500;
  padding: 7px 11px;
}

body.sr-studio .sr-chip.on,
body.sr-studio .sr-chip-menu > summary.on {
  background: #101010;
  border-color: #101010;
  color: #ffffff;
}

body.sr-studio .sr-btn {
  border-radius: 0;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 500;
}

body.sr-studio .sr-btn-o {
  border-radius: 0;
  border-color: var(--hair);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .14em;
  font-weight: 500;
}

/* The grid: four pixels apart, and the captions under the pictures are
   the smallest thing on the page. */
body.sr-studio .sr-grid {
  gap: 4px;
}

body.sr-studio .sr-card .sr-media {
  border-radius: 0;
  background: var(--surface, #f5f5f5);
}

body.sr-studio .sr-body {
  padding: 7px 2px 14px;
  gap: 1px;
}

body.sr-studio .sr-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  -webkit-line-clamp: 1;
  color: #101010;
}

body.sr-studio .sr-price {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .02em;
}

body.sr-studio .sr-seller,
body.sr-studio .sr-card-store {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .55;
}

body.sr-studio .sr-badge {
  border-radius: 0;
  background: #101010;
  color: #ffffff;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
}

body.sr-studio .sr-save {
  opacity: 0;
  transition: opacity .15s ease;
}

body.sr-studio .sr-card:hover .sr-save,
body.sr-studio .sr-save.on {
  opacity: 1;
}

body.sr-studio .sr-cat-tile,
body.sr-studio .sr-seller-block {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

body.sr-studio .sr-cat-row {
  gap: 4px;
}

body.sr-studio .sr-cat-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 500;
}

body.sr-studio .sr-cat-count {
  font-size: 10px;
}

body.sr-studio .sr-product-title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -.01em;
}

body.sr-studio .sr-avatar {
  border-radius: 0;
}

body.sr-studio .sr-footer {
  background: none;
  border-top: 1px solid var(--hair);
}

body.sr-studio .sr-footer h3 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  color: var(--muted);
}

body.sr-studio .sr-footer a,
body.sr-studio .sr-footer li {
  font-size: 12px;
}