@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;
}

/* ---------- icons: where the header's controls sit ----------
 *
 * Until this token existed the answer was a by-product of `header`: the
 * three menu-on-the-same-row templates put the controls beside the menu
 * and the other nine beside the search, and no store could say
 * otherwise. Measured on a shop with eight categories at 1200px, that
 * by-product cost the menu 474px of the 1,152 the other templates give
 * it — five of eight chips visible instead of seven.
 *
 * The placement is markup, not CSS: layouts/sr.blade.php renders
 * partials/header_actions.blade.php in one of three places. What is here
 * is only what each place needs around it.
 */
/* with-nav: inside the bar that already holds the menu, so the menu
   scrolls under them rather than beside them. The bar is pulled out into
   the arrows' gutters, so the controls are pushed back in by the same
   amount or they would sit outside the page's own side padding. */
body.sr-icons-with-nav .sr-catsbar > .sr-actions {
  flex: 0 0 auto;
  align-self: center;
  margin-right: var(--sr-cats-gutter);
  padding-left: 16px;
}

/* The menu is what gives way when the row is short, not the controls:
   the menu can scroll and they cannot. */
body.sr-icons-with-nav .sr-cats {
  min-width: 0;
}

/* On a phone the menu and the controls cannot share a row: the controls
   take about 180px of the 343 a 375px screen has, and the menu is left
   showing one chip and a bit of the next. They go above it instead,
   full width — which is where own-bar puts them at every width. On a
   screen this narrow there is only one arrangement that works and both
   choices give it. */
@media (max-width: 640px) {
  body.sr-icons-with-nav .sr-catsbar {
    flex-wrap: wrap;
  }
  body.sr-icons-with-nav .sr-catsbar > .sr-actions {
    order: -1;
    flex-basis: 100%;
    justify-content: flex-end;
    margin: 0;
    padding: 0 var(--sr-cats-gutter) 6px;
  }
}
/* own-bar: a strip of its own above the header. Deliberately quiet — it
   is furniture, not the shop — and deliberately not sticky, since the
   header already follows you down and two bars deep is a page you read
   through a letterbox. */
.sr-utilbar {
  background: var(--soft-bg, var(--surface));
  border-bottom: 1px solid var(--line);
}

.sr-utilbar .sr-wrap {
  display: flex;
  justify-content: flex-end;
}

.sr-utilbar .sr-actions {
  gap: 14px;
  min-height: 38px;
}

/* Smaller than in the header: this row exists to take height out of the
   header, so it must not spend it here. */
.sr-utilbar .sr-actions svg {
  width: 20px;
  height: 20px;
}

.sr-utilbar .sr-user summary,
.sr-utilbar .sr-lang summary,
.sr-utilbar .sr-signin {
  font-size: 14px;
}

/* The menus hang off a bar that is not sticky, so they need to sit above
   the header that is. */
.sr-utilbar .sr-user-menu,
.sr-utilbar .sr-lang-menu {
  z-index: 25;
}

@media (min-width: 961px) {
  /* What all three arrangements share. The stores row is named whether
     or not it is there: a domain presenting one store has no such bar,
     and the row collapses. */
  body.sr-header-right .sr-header .sr-wrap {
    display: grid;
    align-items: center;
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
  body.sr-header-right .sr-catsbar-stores {
    grid-area: stores;
  }
  body.sr-header-right .sr-top {
    display: contents;
  }
  body.sr-header-right .sr-logo {
    grid-area: logo;
    padding: 12px 0;
  }
  /* The bar takes the grid cell; the nav inside it keeps scrolling. The
     gutters stay inside the cell here, because the cell's edge is exactly
     where the logo and the header icons begin. */
  body.sr-header-right .sr-catsbar {
    grid-area: menu;
    margin-left: 0;
    margin-right: 0;
  }
  body.sr-header-right .sr-cats {
    padding: 0;
    border-top: 0;
  }
  body.sr-header-right .sr-search {
    grid-area: search;
    margin: 0 0 12px;
  }
  /* **This layout has to know what `icons` says.**
   *
   * It used to place .sr-actions in an `actions` cell on the MENU row
   * whatever the markup had done with them — `display: contents` on
   * .sr-top hands its children to this grid, and a grid-area beats
   * source order. So of the nine Header x Icons combinations, this one
   * was inert: a store choosing "beside the search" got them beside the
   * menu, and the menu kept 716px of the 1,192 it would otherwise have.
   *
   * with-search: the controls take a column on the SEARCH row, which is
   * what was asked for, and the menu spans the two columns the actions
   * used to cost it.
   */
  body.sr-header-right.sr-icons-with-search .sr-header .sr-wrap {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "stores stores stores" "logo menu menu" "search search actions";
  }
  body.sr-header-right.sr-icons-with-search .sr-actions {
    grid-area: actions;
  }
  /* with-nav puts them inside the menu's own bar and own-bar puts them
     outside the header altogether, so in neither case is there anything
     to give a third column to. */
  body.sr-header-right.sr-icons-with-nav .sr-header .sr-wrap,
  body.sr-header-right.sr-icons-own-bar .sr-header .sr-wrap {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "stores stores" "logo menu" "search search";
  }
}
/* 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-catsbar {
  border-top: 1px solid var(--line);
}

body.sr-craft .sr-cats {
  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 per-section anchors store.blade.php writes. Zero-height blocks, so
   they take part in nothing: no line box, no gap, no sibling rule. The
   margin is what keeps a scrolled-to section clear of the sticky header;
   --sr-header-h is measured by the layout's script and the 72px is the
   header's own default height for the moment before it runs. */
.sr-anchor {
  display: block;
  height: 0;
  overflow: hidden;
  scroll-margin-top: calc(var(--sr-header-h, 72px) + 12px);
}

/* ---------- 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;
}

/* The preview label: the same fact as the bar, small and fixed at the foot
   of the screen so it is still there once the bar has scrolled away. Its own
   dark colours, like the bar, so it stays legible on every template. Kept
   under the filter sheet and the lightbox (z-index 60 and 100) so it can
   never cover one, and under the toast for the same reason. The X's box is
   44px so it is a tap target on a phone; only the glyph shows. */
.sr-preview-tag {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 50;
  display: flex;
  align-items: center;
  max-width: calc(100vw - 24px);
  padding: 4px 0 4px 14px;
  border-radius: 999px;
  background: #1f2933;
  color: #fff;
  font: 12px/1.4 system-ui, -apple-system, sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

.sr-preview-tag span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-preview-tag-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -11px 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.sr-preview-tag-x:hover {
  color: #8ab4f8;
}

/* ---------- 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);
}

/* The same control in the dashboard's draft preview, shown and inert.
   Just the code: the language the preview speaks is chosen outside the
   iframe, in the dashboard's own chrome, and a menu here would offer
   entries that do the wrong thing. It used to carry a sentence saying
   so, which stopped being true the moment that dropdown existed. */
.sr-lang-inert {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 4px;
  white-space: nowrap;
  cursor: default;
}

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

/* The category nav scrolls sideways at every width — it never wraps and is
   never cut without saying so. The bar around it is the positioning context
   for the two arrows and the edge fades; both appear only when there is
   more in that direction, which the layout's script decides and marks with
   has-prev / has-next. Without JavaScript neither appears and the row
   scrolls by touch or trackpad exactly as before. */
.sr-catsbar {
  /* The arrows stand in gutters of their own, one each side of the chip
     row, so an arrow is never over a chip's name or its count and never
     reaches the header icons. The gutter is as wide as the page's own
     side padding and the bar is pulled out into it, so the first chip
     still starts exactly where it did before there were arrows. */
  --sr-cats-gutter: 24px;
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  margin-left: calc(var(--sr-cats-gutter) * -1);
  margin-right: calc(var(--sr-cats-gutter) * -1);
}

.sr-cats {
  flex: 1 1 auto;
}

/* A flag beside a shop's name, only on a domain whose shops are in more
   than one country. Sized to the text so it never becomes the loudest
   thing on a card. */
.sr-flag {
  font-size: 0.95em;
  line-height: 1;
}

/* A product with no photograph. The box is the template's own tile
   colour and the words are the template's own, so this reads as part of
   the design rather than as a missing image. */
.sr-noimg-said {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 10px;
  text-align: center;
}

.sr-noimg-said svg {
  width: 26px;
  height: 26px;
  fill: var(--ink);
  opacity: 0.22;
  margin-bottom: 2px;
}

.sr-noimg-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.sr-noimg-note {
  font-size: 11px;
  color: var(--muted);
}

/* The store finder: one button above the list of shops, and a line that
   says what happened. Hidden until the layout's script reveals it, so a
   visitor without JavaScript never sees a control that cannot work. */
.sr-store-finder {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

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

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

/* The distance on a store card, in the accent so it reads as the answer
   to the question that was just asked. */
.sr-store-distance {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  margin-top: 2px;
}

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

/* The box that filters a long store row: it sits at the end of the bar,
   outside the scroller, so it never scrolls away from the row it
   filters. Hidden until the layout's script reveals it. */
.sr-chip-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: 8px;
}

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

.sr-chip-search input {
  width: 150px;
  max-width: 34vw;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--nav-bg);
  color: inherit;
  font: inherit;
  font-size: 13px;
}

.sr-chip-search-none {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

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

/* Visible to a screen reader, not on the page. */
.sr-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The stores, above the categories, on a domain presenting more than one.
   The chips are the category chips — same markup, so every template
   dresses them itself — and the row is marked off by a hairline so the
   two do not read as one long nav. Nothing of this exists on a
   single-store domain. */
.sr-catsbar-stores {
  border-bottom: 1px solid var(--line);
}

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

.sr-cats-stores .n {
  font-weight: 500;
}

.sr-catsbar::before,
.sr-catsbar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}

/* The fades belong to the chip row, so they start where the gutters end. */
.sr-catsbar::before {
  left: var(--sr-cats-gutter);
  background: linear-gradient(to right, var(--nav-bg), rgba(255, 255, 255, 0));
}

.sr-catsbar::after {
  right: var(--sr-cats-gutter);
  background: linear-gradient(to left, var(--nav-bg), rgba(255, 255, 255, 0));
}

.sr-catsbar.has-prev::before,
.sr-catsbar.has-next::after {
  opacity: 1;
}

/* The chevrons are not on the page. The edge fade is what says the row
   scrolls — on every template, at every width, and whatever the script
   has just measured — and the chevron is only ever a hint a pointer can
   uncover by hovering the bar.

   opacity rather than display or the hidden attribute, so the gutter is
   reserved either way and nothing shifts when one fades in; and
   pointer-events: none, so an invisible chevron cannot be clicked. The
   markup makes them aria-hidden and tabindex="-1" to match: a hint is
   not a control, and the row is reached by tabbing its own links. */
.sr-catsbar-arrow {
  flex: 0 0 var(--sr-cats-gutter);
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

/* Only a device with a real pointer is offered the hint, and only while
   the bar is under it, and only at an edge that has more to scroll — the
   same has-prev / has-next the fade reads. A touch screen matches
   neither query and never sees a chevron at all. */
@media (hover: hover) and (pointer: fine) {
  .sr-catsbar.has-prev:hover .sr-catsbar-prev,
  .sr-catsbar.has-next:hover .sr-catsbar-next {
    opacity: 0.4;
    pointer-events: auto;
  }
  .sr-catsbar.has-prev:hover .sr-catsbar-prev:hover,
  .sr-catsbar.has-next:hover .sr-catsbar-next:hover {
    opacity: 1;
    color: var(--accent);
  }
}
.sr-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  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 */
/* A store's own commercial block: a picture, a title and a paragraph,
   optionally the whole thing a link. Drawn in the template's own colours
   and corners, like every other section, so a store filling in four
   fields cannot produce something that looks foreign to its own shop. */
.sr-commercial-body {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--soft-bg, var(--surface));
  color: inherit;
  text-decoration: none;
}

.sr-commercial-pic {
  flex: 0 0 auto;
  width: 220px;
  max-width: 40%;
}

.sr-commercial-pic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.sr-commercial-words {
  min-width: 0;
}

.sr-commercial-title {
  display: block;
  margin-bottom: 4px;
  font-family: var(--head-font, inherit);
  font-size: 20px;
  font-weight: var(--head-weight, 700);
}

.sr-commercial-text {
  display: block;
  color: var(--muted);
}

a.sr-commercial-body:hover {
  border-color: var(--accent);
}

@media (max-width: 640px) {
  .sr-commercial-body {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .sr-commercial-pic {
    width: 100%;
    max-width: none;
  }
}
.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;
}

/* "Get directions" on a store card: offered only once the finder has a
   position to route from, and stacked under the distance it belongs
   with. [hidden] spelled out, because the rule below sets display and
   an author rule beats the UA's [hidden] { display: none } — the trap
   the nav arrows fell into. It sits above the name link stretched over
   the card, so it is a link of its own rather than part of it. */
/* `.sr .sr-store-directions`, not `.sr-store-directions`: `.sr a` is
   (0,1,1) and sets colour and text-decoration, so a single class loses
   to it — the same trap `.sr .sr-btn` is written out for. */
.sr .sr-store-directions {
  position: relative;
  z-index: 1;
  display: inline-block;
  align-self: flex-start;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
}

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

/* A store card is a <div> whose name is the link, stretched over the
   whole card — the seller block's arrangement, and for the same reason:
   an <a> may not hold the "Get directions" link. */
.sr-store-tile {
  position: relative;
}

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

/* The shop's own rating under the hero headline: its own line, with a
   little room from the headline above and the intro below. */
.sr-hero-copy .sr-rating {
  margin: 8px 0 2px;
}

/* Sell here: the band that recruits sellers. The template's own hero
   ground and radius, so it is the hero's sibling rather than a slab of
   colour; the copy left, the one button right, stacked on a phone. */
.sr-sell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 36px 0 0;
  padding: 24px 26px;
  background: var(--hero-bg);
  border-radius: var(--radius-lg);
}

.sr-sell-body {
  min-width: 0;
  flex: 1 1 380px;
}

.sr-sell h2 {
  font-size: 24px;
  margin: 0;
}

.sr-sell p {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.sr-sell-action {
  margin: 0;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .sr-sell {
    padding: 20px 18px;
  }
  .sr-sell h2 {
    font-size: 20px;
  }
  .sr-sell-action {
    flex: 1 1 100%;
  }
  .sr-sell-action .sr-btn {
    display: block;
    text-align: center;
  }
}
/* ---------- the shop info panel, and the bounded rows it shares ---------- */
/* The shop's own facts, under the hero on its own page. Two columns on a
   desktop, one under 640px, and a FIXED FOOTPRINT: the height is the slot
   set, never the content. Every row is one line — a long address is
   truncated by text-overflow, with the whole string still in the markup
   and in the title attribute — and Showroom::SHOPINFO_MAX_ROWS caps how
   many slots a column can hold. A shop that has filled everything in is
   the same height as the panel always is; a shop that has filled in two
   things is shorter, because a field it has not set is an absent row.

   Every colour, corner and face is the template's own token, so this is
   one component and not twelve designs. */
.sr-shopinfo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  margin: 24px 0 0;
  padding: 18px 20px;
  background: var(--tile);
  border: var(--card-border);
  border-radius: var(--radius-lg);
}

.sr-shopinfo-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.sr-shopinfo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 24px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
}

.sr-shopinfo-row > b {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--ink);
}

/* The one line. flex: 1 1 auto with min-width: 0 is what lets a flex item
   shrink below its content, which is what makes the ellipsis appear at
   all — without it the row would push the column wider instead. */
.sr-shopinfo-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted);
}

.sr .sr-shopinfo-row a.sr-shopinfo-value {
  color: var(--accent);
}

.sr-shopinfo-links {
  gap: 14px;
}

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

/* The sell row sits at the foot of its column, so the button lines up
   with the bottom of the panel however many rows are above it. */
.sr-shopinfo-sell {
  margin-top: auto;
}

/* The label is the store's own (StoreTheme `sell_button`, up to 600
   characters), so it clips to one line like every other value here.
   Without this one long label wraps and the panel grows, which is the
   one thing its footprint promises it will not do. */
.sr .sr-shopinfo-sell .sr-btn {
  max-width: 100%;
  padding: 7px 16px;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* One column on a phone. The panel is two columns of facts, not a
   layout: side by side in 160px each, a label and its value have no
   room and the bounded icon row wraps, which is the one thing the
   fixed footprint cannot allow. */
@media (max-width: 640px) {
  .sr-shopinfo {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
  }
}
/* A bounded row of link icons — the shop's and the seller's, one
   component. The "+N" is a link to the first thing it hides, not a dead
   label: a count you cannot act on is a smaller way of hiding something. */
.sr-icon-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  padding: 10px 14px 14px;
}

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

/* The row's padding is the seller CARD's inset. Inside the panel it is a
   row like the others and takes none — three classes, so this outweighs
   `body.sr-dawn .sr-icon-row` at (0,2,1) and the panel is the same shape
   on all twelve templates rather than flush on dawn and indented on the
   other eleven. */
.sr .sr-shopinfo .sr-icon-row {
  padding: 0;
}

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

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

/* No min-width here: the phone's 44px rule is `.sr-icon-row a` at
   (0,1,1) and a min-width restated at (0,3,1) would beat it, leaving
   the one control in the row that is under the tap target. The padding
   and the inherited height carry the size on a desktop. */
.sr .sr-icon-row a.sr-icon-more {
  width: auto;
  padding: 0 9px;
  border-radius: var(--pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

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

/* "Sells at": which of the presented shops this seller's account sells
   in. Bounded the same way — Showroom::SELLER_STORE_CAP chips and a
   "+N" to the store list. One shop is the ordinary case and reads as a
   single chip. */
.sr-seller-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 13px;
}

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

/* `.sr .sr-seller-stores`, not `.sr .sr-chip-more`: `.sr .sr-chip` has
   the same specificity and is declared later in the sheet, so the
   two-class form lost on order alone. Scoping it makes it
   order-independent. */
.sr .sr-seller-stores .sr-chip-more {
  color: var(--muted);
}

/* ---------- 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;
}

/* The real discount, as a percentage off, at the top-left corner of the
   card. The number is products.discount, the same one the price line
   already applies — never a figure of the badge's own. Drawn only where a
   template asks for it; everywhere else the struck-through price is how a
   discount reads, as it always was. */
.sr-badge-off {
  display: none;
}

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

/* The strip is the seller's newest photos — one, two or three of them,
   always filling it. The columns come from how many there are
   (grid-auto-columns: 1fr), and the strip's own 3:1 box keeps every block
   in a row the same height whether its seller has one photo or three.
   There is no fourth state: a seller with no photo has no strip at all
   (.sr-seller-nostrip), rather than a band of grey. */
.sr-seller-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 3px;
  aspect-ratio: 3/1;
  overflow: hidden;
  background: var(--tile);
}

/* minmax(0, ...) on both tracks, and min-height here, because a grid track
   is otherwise at least as tall as its content: the photos are square and
   two of them across a card are each half its width, which would drag the
   strip to half the card's height instead of filling the box the
   aspect-ratio asks for. */
.sr-seller-strip img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  -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;
}

/* 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;
}

/* No photos, no column to hold them. */
.sr .sr-seller-block-here.sr-seller-nostrip {
  grid-template-columns: minmax(0, 1fr);
}

.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-icon-row {
  padding: 10px 0 0;
}

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

body.sr-dawn .sr-seller-block-here .sr-icon-row {
  padding: 10px 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;
}

/* A store tile is a card like a category tile, never a block of colour.
   sr-cat-media-pad is the box that holds a mark rather than a photograph:
   the ground stays the template's own tile colour and the logo is padded
   inside it, with room around it. */
.sr-cat-media-pad {
  display: grid;
  place-items: center;
  padding: 16px;
}

/* The mark the header wears, larger: the logo, or the store's initials
   when it has none, on the store's brand colour — sitting ON the neutral
   ground rather than replacing it. The brand colour stays because a logo
   is often drawn for it: KUUL's is white on nothing, and on a neutral
   ground alone it would not be there at all. */
.sr-tile-mark {
  display: grid;
  place-items: center;
  width: min(46%, 112px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.02em;
}

/* .sr-cat-media img (0,1,1) covers the box; inside the mark a logo is
   contained and padded instead, so this has to out-specify it. */
.sr-cat-media .sr-tile-mark img {
  /* A circle's inscribed square is 70.7% of its width, so a square logo
     at 62% is padded all round and none of its corners crosses the arc. */
  width: 62%;
  height: 62%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* The mark takes each template's own shape, as the header's does. */
body.sr-craft .sr-tile-mark {
  border-radius: 12px;
}

body.sr-mono .sr-tile-mark,
body.sr-studio .sr-tile-mark {
  border-radius: 0;
}

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

/* The banner paints nothing of its own. It used to carry
   background: var(--tile), and since the box keeps its aspect-ratio
   whether or not the picture arrives, a banner whose file had gone left a
   grey slab the height of the box sitting over the photo strip. No
   picture is now no picture: the box is transparent, and the layout's
   script removes it outright when the image fails to load. */
.sr-seller-banner {
  display: block;
  aspect-ratio: 4/1;
  overflow: hidden;
  margin: 0 0 -22px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sr-seller-banner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     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-icon-row {
  padding-left: 14px;
  padding-right: 14px;
}

/* Excluded by a following rule rather than by :not() on the one above:
   :not() counts towards specificity, and (0,3,0) would have beaten
   `body.sr-dawn .sr-icon-row` at (0,2,1) and moved dawn's banner cards
   14px sideways. The seller's own page is padded by its body already. */
.sr-has-banner.sr-seller-block-here .sr-icon-row {
  padding-left: 0;
  padding-right: 0;
}

/* 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, 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, 0.38);
  }
  /* A phone swipes the row, so the chevrons are not even in the layout
     and the bar sits flush with the page again. They are already
     invisible everywhere; this takes their gutters back. */
  .sr-catsbar-arrow {
    display: none;
  }
  .sr-catsbar {
    margin-left: 0;
    margin-right: 0;
  }
  .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, 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-icon-row a,
  .sr .sr-icon-row a.sr-icon-more,
  .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-icon-row 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) {
  /* "Get directions" on a store card is a finger target like the rest.
     Safe against the [hidden] trap: `.sr .sr-store-directions[hidden]`
     is more specific than this, so it still wins. */
  .sr .sr-store-directions {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* 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;
  /* The ground behind a chip and behind an icon in the shared icon row.
     Mono, botanical and studio never defined it, so `background:
     var(--chip-bg)` was invalid at computed-value time and resolved to
     transparent — the circles behind the social glyphs simply were not
     drawn. Inherited from .sr-seller-icons and found when the row became
     a shared component; mono's is the same near-white its rules use. */
  --chip-bg: #f2f2f2;
  --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: -0.02em;
}

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

body.sr-mono .sr-logo-sub {
  text-transform: uppercase;
  letter-spacing: 0.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-catsbar {
  border-top: 1px solid var(--hair);
}

body.sr-mono .sr-cats a {
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.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;
}

/* The headline is the type scale's whole argument, so the jump from the
   body text to it is a big one: nearly three times the section headings
   at 1200, and it keeps growing with the viewport. */
body.sr-mono .sr-hero h1 {
  font-size: clamp(44px, 9.5vw, 104px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  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: 0.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: 0.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: 0.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: 0.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: -0.005em;
}

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

body.sr-mono .sr-badge {
  border-radius: 0;
  background: #111111;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.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: 0.03em;
}

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

body.sr-mono .sr-product-price {
  color: var(--accent);
  font-weight: 900;
  letter-spacing: -0.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: 0.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;
}

/* --- the tightening pass ---------------------------------------------

   Mono is white space, rules and one accent. Three things had drifted
   from that and are put back here. */
/* Sections breathe. The space between one and the next is as much of the
   design as the rules are, and 28px was not enough of it. */
body.sr-mono .sr-home-section {
  margin-top: 64px;
}

body.sr-mono .sr-listhead {
  margin: 52px 0 18px;
}

body.sr-mono .sr-cat-tiles {
  margin-top: 40px;
}

body.sr-mono .sr-hero {
  margin-bottom: 44px;
}

/* One accent, everywhere. The stars are gold by default, and gold is a
   second accent on a template whose whole argument is that it has one. */
body.sr-mono .sr-stars-on {
  color: var(--accent);
}

/* Nothing is blurred. A floating panel is a hard-edged box with a rule
   round it, like every other box here — the card shadows were already
   off, but the menus, the search suggestions, the language list, the
   toast and the nav's arrows had kept theirs. */
body.sr-mono .sr-menu,
body.sr-mono .sr-suggest,
body.sr-mono .sr-lang-menu,
body.sr-mono .sr-toast {
  box-shadow: none;
  border: 1px solid #111111;
  border-radius: 0;
}

/* ================= 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;
  --chip-bg: #eef2e7;
  --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, 0.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: -0.01em;
}

body.sr-botanical .sr-logo-sub {
  font-style: italic;
  letter-spacing: 0.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, 0.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, 0.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: -0.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: -0.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 0.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, 0.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: -0.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, 0.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;
  --chip-bg: #f1f1f1;
  --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: 0.14em;
  text-transform: uppercase;
}

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

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

body.sr-studio .sr-cats a {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.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: 0.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: -0.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: 0.2em;
  color: var(--muted);
}

body.sr-studio .sr-listhead .sr-count {
  font-size: 11px;
  letter-spacing: 0.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: 0.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: 0.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: 0.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: 0.02em;
  -webkit-line-clamp: 1;
  color: #101010;
}

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

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

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

body.sr-studio .sr-save {
  opacity: 0;
  transition: opacity 0.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: 0.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: -0.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: 0.18em;
  font-weight: 500;
  color: var(--muted);
}

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

/* ================= boutique =============================================

   Cream and coral, after mijnTafel. A display serif over a plain sans, a
   thin coral kicker above every section heading, black pill buttons, and
   photographs given a little warmth rather than left flat. The shop's own
   facts — the hours, the address, what is new this week — are set out
   under the hero as a trust row: those are the only numbers there are, and
   nothing here invents a rating or a review count for a shop. */
body.sr-boutique {
  --muted: #8a7a6d;
  --line: #e6d9c6;
  --hair: #efe6d8;
  --card-bg: #ffffff;
  --card-border: 0;
  --card-shadow: 0 8px 24px rgba(78, 52, 36, .09);
  --head-weight: 600;
  --head-ls: -0.015em;
  --nav-bg: #f8f1e6;
  --chip-bg: #ffffff;
  --hero-bg: #f1e5d3;
  --soft-bg: #f1e7d8;
}

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

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

body.sr-boutique .sr-logo-sub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

body.sr-boutique .sr-logo-mark {
  border-radius: 50%;
}

/* The nav is quiet type, underlined where you are. */
body.sr-boutique .sr-cats a {
  background: none;
  border-radius: 0;
  padding: 10px 0;
  margin-right: 24px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

body.sr-boutique .sr-cats a.on {
  background: none;
  border-bottom-color: var(--accent);
  font-weight: 600;
}

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

body.sr-boutique .sr-search input {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
}

body.sr-boutique .sr-search button {
  border-radius: var(--pill);
}

/* The hero: the headline is the display face, large and tight. */
body.sr-boutique .sr-hero {
  background: var(--hero-bg);
  border: 0;
  padding: 46px 44px;
}

body.sr-boutique .sr-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(34px, 5.2vw, 58px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

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

/* The trust row: the store strip the page already carried — opening
   hours, the address with its map link, how much is new this week — set
   out as one quiet line under the hero. Those are the facts the shop
   actually has; there is no rating and no review count for a shop, so
   there is none here. */
body.sr-boutique .sr-strip {
  justify-content: center;
  gap: 0;
  margin: -10px 0 26px;
  padding: 13px 20px;
  background: #ffffff;
  border-radius: var(--pill);
  box-shadow: var(--card-shadow);
  font-size: 13px;
}

body.sr-boutique .sr-strip > span {
  padding: 0 22px;
  border-left: 1px solid var(--line);
}

body.sr-boutique .sr-strip > span:first-child {
  border-left: 0;
}

/* A thin coral kicker over each section heading: a short rule and the
   section's own count, which the heading already carried. */
body.sr-boutique .sr-listhead h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 7px;
}

body.sr-boutique .sr-listhead .sr-count {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* ::after is the h2's last child, and column-reverse puts it on top: the
   rule is there whether or not the section has a count to show under it. */
body.sr-boutique .sr-listhead h2::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--accent);
}

body.sr-boutique .sr-more-link {
  font-weight: 500;
}

body.sr-boutique .sr-chip,
body.sr-boutique .sr-chip-menu > summary {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-weight: 500;
}

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

/* Buttons are solid black pills; coral is for the small things. */
body.sr-boutique .sr-btn {
  background: #141414;
  color: #ffffff;
  border-radius: var(--pill);
  padding: 13px 26px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

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

body.sr-boutique .sr-btn-o {
  background: transparent;
  border: 1px solid #141414;
  border-radius: var(--pill);
  font-weight: 600;
}

body.sr-boutique .sr-btn-o:hover {
  background: #141414;
  color: #ffffff;
}

/* Cards: white on a warm shadow, the photograph given a little warmth and
   a slow lift rather than a snap. */
body.sr-boutique .sr-card .sr-media {
  background: #fbf6ee;
}

body.sr-boutique .sr-card .sr-media img {
  filter: saturate(1.05) sepia(0.05);
  transition: transform 0.5s ease, filter 0.3s ease;
}

body.sr-boutique .sr-card:hover .sr-media img {
  transform: scale(1.03);
  filter: saturate(1.1) sepia(0.02);
}

body.sr-boutique .sr-title {
  font-weight: 500;
  font-size: 15px;
}

body.sr-boutique .sr-price {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
}

body.sr-boutique .sr-seller a {
  font-style: italic;
}

body.sr-boutique .sr-badge {
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--pill);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

body.sr-boutique .sr-cat-name,
body.sr-boutique .sr-seller-name {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.sr-boutique .sr-product-title {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

body.sr-boutique .sr-product-price {
  font-family: var(--font-head);
  font-weight: 600;
}

body.sr-boutique .sr-footer {
  background: #ffffff;
  border-top: 1px solid var(--line);
}

body.sr-boutique .sr-footer h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

body.sr-boutique .sr-by {
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  /* Stacked, the dividers between the trust row's facts read as stray
     lines, so the row becomes a plain panel. */
  body.sr-boutique .sr-strip {
    border-radius: var(--radius-lg);
    gap: 6px 0;
  }
  body.sr-boutique .sr-strip > span {
    padding: 0;
    border-left: 0;
  }
}
/* ================= reuse ================================================

   Kraft and dark green ink, after afturnytt.is. The template is
   deliberately plain: one sans at ordinary weights, no display face, no
   shadow, no gloss on the photographs and no lift on hover. Everything is
   a box with a hairline round it, and the price is the one flourish —
   a little paper ticket with a punched hole. A second-hand shop's
   noticeboard rather than a shop window. */
body.sr-reuse {
  --muted: #6f7c72;
  --line: #cdc4b4;
  --hair: #ded5c6;
  --card-bg: #fbf8f2;
  --card-border: 1px solid var(--line);
  --card-shadow: none;
  --head-weight: 600;
  --head-ls: 0;
  --nav-bg: #f3ede2;
  --chip-bg: #ffffff;
  --hero-bg: #e7dfd0;
  --soft-bg: #e7dfd0;
}

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

body.sr-reuse .sr-logo-mark {
  border-radius: 2px;
}

body.sr-reuse .sr-logo-name {
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.sr-reuse .sr-logo-sub {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* The nav is a row of boxes, not pills. */
body.sr-reuse .sr-catsbar {
  border-top: 1px solid var(--hair);
}

body.sr-reuse .sr-cats {
  gap: 0;
}

body.sr-reuse .sr-cats a {
  background: none;
  border-radius: 0;
  padding: 11px 14px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

body.sr-reuse .sr-cats a.on {
  background: none;
  border-bottom-color: var(--accent);
  color: var(--accent);
}

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

body.sr-reuse .sr-search input {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 4px;
}

body.sr-reuse .sr-search button {
  border-radius: 4px;
}

/* The hero is a bordered panel, flat, and the copy is plain. */
body.sr-reuse .sr-hero {
  background: var(--hero-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 30px;
}

body.sr-reuse .sr-hero h1 {
  font-size: clamp(28px, 3.8vw, 40px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

body.sr-reuse .sr-hero p {
  font-size: 15px;
  max-width: 48ch;
}

body.sr-reuse .sr-strip {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 14px;
  background: #fbf8f2;
  font-size: 13px;
}

body.sr-reuse .sr-listhead h2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.sr-reuse .sr-listhead .sr-count {
  color: var(--muted);
  font-weight: 500;
}

body.sr-reuse .sr-chip,
body.sr-reuse .sr-chip-menu > summary {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-weight: 500;
}

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

body.sr-reuse .sr-btn {
  background: var(--ink);
  color: #ffffff;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0;
}

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

body.sr-reuse .sr-btn-o {
  background: #ffffff;
  border: 1px solid var(--ink);
  border-radius: 4px;
  font-weight: 600;
}

/* Cards are boxes: a hairline, a flat photograph on white, and nothing
   moves when the pointer arrives. */
body.sr-reuse .sr-card .sr-media {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

body.sr-reuse .sr-card .sr-media img {
  filter: none;
}

body.sr-reuse .sr-card:hover,
body.sr-reuse .sr-cat-tile:hover,
body.sr-reuse .sr-seller-block:hover {
  transform: none;
}

body.sr-reuse .sr-card:hover .sr-media img {
  transform: none;
}

body.sr-reuse .sr-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
}

/* The price is a paper ticket: a bordered chip with a punched hole. */
body.sr-reuse .sr-price {
  /* The boxed card's body is a grid and a grid item is blockified, so the
     ticket has to be told to shrink-wrap or it stretches its whole cell. */
  display: inline-flex;
  justify-self: start;
  align-self: start;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

body.sr-reuse .sr-price::before {
  content: "";
  width: 5px;
  height: 5px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--bg);
}

body.sr-reuse .sr-price s {
  font-weight: 400;
  opacity: 0.55;
}

body.sr-reuse .sr-badge {
  background: var(--ink);
  color: #ffffff;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

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

body.sr-reuse .sr-cat-name,
body.sr-reuse .sr-seller-name {
  font-weight: 600;
  letter-spacing: -0.005em;
}

body.sr-reuse .sr-product-title {
  font-weight: 600;
  letter-spacing: -0.02em;
}

body.sr-reuse .sr-product-price {
  font-weight: 700;
}

body.sr-reuse .sr-footer {
  background: #e7dfd0;
  border-top: 1px solid var(--line);
}

body.sr-reuse .sr-footer h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

body.sr-reuse .sr-by {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

/* ================= market ===============================================

   The density and the energy of a big general marketplace, in warm amber
   and red rather than blue — there is no blue anywhere in it. Small tiles
   packed six across, tight padding, a loud price, and two pieces of real
   information given room: the discount the product actually carries, as a
   badge in the card's top-left corner, and the review average it actually
   has, as stars under the price. Neither is ever invented: the badge is
   products.discount, the same number the price line applies, and the
   stars are drawn only for a product with reviews. */
body.sr-market {
  --muted: #5c5c5c;
  --line: #dcdcdc;
  --hair: #eeeeee;
  --card-bg: #ffffff;
  --card-border: 1px solid var(--line);
  --card-shadow: none;
  --head-weight: 800;
  --head-ls: -0.02em;
  --nav-bg: #ffffff;
  --chip-bg: #f4f4f4;
  --hero-bg: #fdf1ea;
  --soft-bg: #fdf1ea;
}

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

body.sr-market .sr-logo-name {
  font-weight: 800;
  letter-spacing: -0.03em;
}

body.sr-market .sr-logo-sub {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The nav is packed: small, close together, the live one in the accent. */
body.sr-market .sr-cats {
  gap: 0;
}

body.sr-market .sr-cats a {
  background: none;
  border-radius: 0;
  padding: 9px 11px;
  font-size: 13px;
  font-weight: 600;
}

body.sr-market .sr-cats a.on {
  background: none;
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}

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

body.sr-market .sr-search input {
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  font-weight: 500;
}

body.sr-market .sr-search button {
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius);
}

body.sr-market .sr-hero {
  background: var(--hero-bg);
  padding: 26px 28px;
}

body.sr-market .sr-hero h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

body.sr-market .sr-hero p {
  font-size: 15px;
}

body.sr-market .sr-listhead {
  margin: 24px 0 10px;
}

body.sr-market .sr-listhead h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

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

body.sr-market .sr-chip,
body.sr-market .sr-chip-menu > summary {
  background: #ffffff;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  padding-top: 6px;
  padding-bottom: 6px;
}

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

/* The call to action is the accent, solid and heavy. */
body.sr-market .sr-btn {
  background: var(--accent);
  color: #ffffff;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body.sr-market .sr-btn:hover {
  background: #c4481f;
}

body.sr-market .sr-btn-o {
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 700;
}

/* Cards are tight: little padding, little gap, the photo flush. */
body.sr-market .sr-grid {
  gap: 10px;
}

body.sr-market .sr-body {
  padding: 8px 9px 10px;
  gap: 2px;
}

body.sr-market .sr-card .sr-media {
  background: #ffffff;
}

body.sr-market .sr-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

/* The price is the loudest thing on the card. */
body.sr-market .sr-price {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--accent);
  margin-top: 2px;
}

body.sr-market .sr-price s {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

/* The discount the product carries, in the corner. */
body.sr-market .sr-badge-off {
  display: inline-block;
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 3px 7px;
}

body.sr-market .sr-badge {
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 11px;
}

/* The stars it actually has, tight under the price. */
body.sr-market .sr-rating {
  margin-top: 1px;
  font-size: 12px;
}

body.sr-market .sr-stars {
  font-size: 12px;
}

body.sr-market .sr-seller {
  font-size: 12px;
}

body.sr-market .sr-cat-name,
body.sr-market .sr-seller-name {
  font-weight: 700;
  letter-spacing: -0.015em;
}

body.sr-market .sr-cat-tile,
body.sr-market .sr-seller-block {
  border: 1px solid var(--line);
  box-shadow: none;
}

body.sr-market .sr-product-title {
  font-weight: 800;
  letter-spacing: -0.03em;
}

body.sr-market .sr-product-price {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: -0.035em;
}

body.sr-market .sr-footer {
  background: #f7f7f7;
  border-top: 3px solid var(--accent);
}

body.sr-market .sr-footer h3 {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
}

body.sr-market .sr-by {
  border-top: 1px solid var(--line);
}

/* ================= etsy =================================================

   Etsy's own identity rather than craft's idea of a handmade shop: its
   orange on a warm white, Figtree — rounded and friendly, and not
   Nunito, which sense already wears — photographs rounded generously
   with no frame around them at all, pill buttons in the orange, and the
   shop's name directly under every product title, which is the thing a
   listing page there is really organised around. The heart on the card
   is left exactly as it is. */
body.sr-etsy {
  --muted: #595959;
  --line: #e6e1d9;
  --hair: #f0ece5;
  --card-bg: transparent;
  --card-border: 0;
  --card-shadow: none;
  --head-weight: 700;
  --head-ls: -0.02em;
  --nav-bg: #ffffff;
  --chip-bg: #f6f0e8;
  --hero-bg: #fdf0e6;
  --soft-bg: #f6f0e8;
}

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

body.sr-etsy .sr-logo-mark {
  border-radius: 50%;
}

body.sr-etsy .sr-logo-name {
  font-weight: 700;
  letter-spacing: -0.03em;
}

body.sr-etsy .sr-logo-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* The nav is rounded and quiet; the live entry fills with the orange. */
body.sr-etsy .sr-cats a {
  border-radius: var(--pill);
  background: none;
  padding: 8px 14px;
  font-weight: 500;
}

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

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

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

/* The search is the page's big rounded field. */
body.sr-etsy .sr-search input {
  background: #ffffff;
  border: 2px solid #222222;
  border-radius: var(--pill);
  font-weight: 500;
}

body.sr-etsy .sr-search button {
  background: var(--accent);
  color: #ffffff;
  border-radius: 50%;
}

body.sr-etsy .sr-hero {
  background: var(--hero-bg);
  padding: 40px 40px;
}

body.sr-etsy .sr-hero h1 {
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

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

body.sr-etsy .sr-listhead h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.sr-etsy .sr-listhead .sr-count {
  color: var(--muted);
  font-weight: 500;
}

body.sr-etsy .sr-chip,
body.sr-etsy .sr-chip-menu > summary {
  background: #ffffff;
  border: 1px solid #222222;
  border-radius: var(--pill);
  font-weight: 600;
}

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

/* Buttons are solid orange pills. */
body.sr-etsy .sr-btn {
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--pill);
  padding: 13px 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.sr-etsy .sr-btn:hover {
  background: #d25211;
}

body.sr-etsy .sr-btn-o {
  border: 2px solid #222222;
  border-radius: var(--pill);
  font-weight: 700;
}

/* The photograph is the card: rounded hard, no frame around it. */
body.sr-etsy .sr-card .sr-media {
  border-radius: var(--radius-lg);
  background: var(--soft-bg);
}

body.sr-etsy .sr-card .sr-media img {
  border-radius: var(--radius-lg);
}

/* Title, then the shop, then what it costs — the order a listing there
   is read in. .sr-body is a plain block otherwise, so it becomes a
   column here and the children are ordered rather than moved. */
body.sr-etsy .sr-grid:not(.sr-list) .sr-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 9px;
}

body.sr-etsy .sr-grid:not(.sr-list) .sr-title {
  order: 1;
  font-weight: 500;
  font-size: 14px;
}

body.sr-etsy .sr-grid:not(.sr-list) .sr-seller {
  order: 2;
  margin-top: 0;
  font-size: 12px;
}

body.sr-etsy .sr-grid:not(.sr-list) .sr-rating {
  order: 3;
  align-self: flex-start;
  margin-top: 1px;
}

body.sr-etsy .sr-grid:not(.sr-list) .sr-price {
  order: 4;
  margin-top: 2px;
}

body.sr-etsy .sr-grid:not(.sr-list) .sr-card-store {
  order: 5;
}

body.sr-etsy .sr-grid:not(.sr-list) .sr-card-extra {
  order: 6;
}

body.sr-etsy .sr-price {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}

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

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

body.sr-etsy .sr-badge {
  border-radius: var(--pill);
  background: #ffffff;
  font-weight: 700;
  font-size: 11px;
}

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

body.sr-etsy .sr-cat-name,
body.sr-etsy .sr-seller-name {
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.sr-etsy .sr-product-title {
  font-weight: 700;
  letter-spacing: -0.03em;
}

body.sr-etsy .sr-product-price {
  font-weight: 700;
  letter-spacing: -0.03em;
}

body.sr-etsy .sr-footer {
  background: var(--soft-bg);
  border-top: 1px solid var(--line);
}

body.sr-etsy .sr-footer h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

body.sr-etsy .sr-by {
  border-top: 1px solid var(--line);
}

/* ================= atlas ================================================

   Teal and coral on stone: the one built for a domain whose shops are in
   more than one country. Wide — it runs edge to edge — and horizontal:
   full-bleed bands separated by teal rules rather than boxes floating on
   a page, Space Grotesk for the headlines over Inter for everything
   else, and coral kept for the two things that are a call rather than a
   statement, the price and the button. The country row above the
   categories is the template's reason to exist, so it is given weight:
   a teal band with the flags large enough to read at a glance. */
body.sr-atlas {
  --muted: #5d6f6c;
  --line: #cfdbd8;
  --hair: #e0e8e6;
  --card-bg: #ffffff;
  --card-border: 0;
  --card-shadow: 0 1px 0 rgba(18, 33, 31, .06);
  --head-weight: 600;
  --head-ls: -0.02em;
  --nav-bg: #ffffff;
  --chip-bg: #e3eae8;
  --hero-bg: #0e6e66;
  --soft-bg: #e9efed;
}

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

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

body.sr-atlas .sr-logo-sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand);
}

body.sr-atlas .sr-logo-mark {
  border-radius: 8px;
}

/* The country row is the point of this template: its own teal band
   across the page, the flags big enough to read. */
body.sr-atlas .sr-catsbar-stores {
  background: var(--brand);
  border-bottom: 0;
}

body.sr-atlas .sr-catsbar-stores::before,
body.sr-atlas .sr-catsbar-stores::after {
  background: none;
}

body.sr-atlas .sr-cats-stores a {
  color: #ffffff;
  font-weight: 600;
  border-radius: 0;
  padding: 11px 16px;
}

body.sr-atlas .sr-cats-stores a:hover {
  background: rgba(255, 255, 255, 0.12);
}

body.sr-atlas .sr-cats-stores a.on {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

body.sr-atlas .sr-cats-stores .n {
  color: rgba(255, 255, 255, 0.72);
}

body.sr-atlas .sr-cats-stores .sr-flag {
  font-size: 1.15em;
}

body.sr-atlas .sr-catsbar-stores .sr-catsbar-arrow {
  color: #ffffff;
}

/* The categories are a plain rule of labels under it. */
body.sr-atlas .sr-cats a {
  background: none;
  border-radius: 0;
  padding: 11px 0;
  margin-right: 22px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

body.sr-atlas .sr-cats a.on {
  background: none;
  border-bottom-color: var(--accent);
  font-weight: 600;
}

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

body.sr-atlas .sr-search input {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

body.sr-atlas .sr-search button {
  background: var(--brand);
  color: #ffffff;
  border-radius: var(--radius);
}

/* The hero is a teal band, not a card. */
body.sr-atlas .sr-hero {
  background: var(--hero-bg);
  color: #ffffff;
  border: 0;
  border-radius: var(--radius-lg);
  padding: 44px 40px;
}

body.sr-atlas .sr-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: #ffffff;
}

body.sr-atlas .sr-hero p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 16px;
  max-width: 46ch;
}

body.sr-atlas .sr-hero .sr-btn {
  background: var(--accent);
  color: #ffffff;
}

body.sr-atlas .sr-hero .sr-btn-o {
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

body.sr-atlas .sr-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 4px;
  font-size: 13px;
}

body.sr-atlas .sr-listhead h2 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.025em;
}

body.sr-atlas .sr-listhead .sr-count {
  color: var(--brand);
  font-weight: 600;
}

body.sr-atlas .sr-chip,
body.sr-atlas .sr-chip-menu > summary {
  background: #ffffff;
  border: 1px solid var(--line);
  font-weight: 500;
}

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

/* Coral is the call to action and nothing else. */
body.sr-atlas .sr-btn {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.sr-atlas .sr-btn:hover {
  background: #e4573a;
}

body.sr-atlas .sr-btn-o {
  border: 1px solid var(--brand);
  color: var(--brand);
  font-weight: 600;
}

body.sr-atlas .sr-card .sr-media {
  background: var(--soft-bg);
}

body.sr-atlas .sr-title {
  font-size: 14px;
  font-weight: 500;
}

body.sr-atlas .sr-price {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 17px;
  color: var(--accent);
  letter-spacing: -0.02em;
}

body.sr-atlas .sr-card-store {
  color: var(--brand);
  font-weight: 500;
}

body.sr-atlas .sr-badge {
  background: var(--brand);
  color: #ffffff;
  font-weight: 600;
}

body.sr-atlas .sr-cat-name,
body.sr-atlas .sr-seller-name {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.02em;
}

body.sr-atlas .sr-cat-tile,
body.sr-atlas .sr-seller-block {
  border: 1px solid var(--line);
  box-shadow: none;
}

body.sr-atlas .sr-product-title {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.03em;
}

body.sr-atlas .sr-product-price {
  font-family: var(--font-head);
  color: var(--accent);
  font-weight: 600;
}

/* A product with no photograph keeps the template's own stone. */
body.sr-atlas .sr-noimg-said {
  background: var(--soft-bg);
}

/* The hero token is teal here, and the ad panel borrows it: dark words
   on a dark ground. The ad gets the stone instead. Written without a
   leading ".sr" — .sr is the body, so "body.sr-atlas .sr .sr-ad" would
   never match; at equal weight to the base rule, coming later wins. */
body.sr-atlas .sr-ad {
  background: var(--soft-bg);
  border-color: var(--line);
}

body.sr-atlas .sr-footer {
  background: #12211f;
  border-top: 0;
}

body.sr-atlas .sr-footer h3 {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #ffffff;
}

body.sr-atlas .sr-footer a,
body.sr-atlas .sr-footer li,
body.sr-atlas .sr-footer p {
  color: #b9c7c4;
}

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

body.sr-atlas .sr-by {
  border-top: 1px solid #2b3d3a;
  color: #8ea09d;
}

/* ================= fjord ================================================

   Spruce and lake on stone, after the Puotimo mockup. Quiet: white cards
   on a soft shadow, a centred mark, Manrope for the headlines over Inter
   for everything else, and one strong horizontal — the spruce band that
   carries the nearest-store finder, which is the thing this identity is
   organised around. Lake is the accent and is kept for links and the
   live state; spruce is the furniture.

   Nothing here decides what the store or country row contains: that is
   Showroom::countryChips() / storeChips() and partials/store_row, shared
   by every template. This block styles and nothing else. */
body.sr-fjord {
  --muted: #66766f;
  --line: #d7ded9;
  --hair: #e6ebe7;
  --card-bg: #ffffff;
  --card-border: 0;
  --card-shadow: 0 4px 16px rgba(27, 42, 37, .07);
  --head-weight: 700;
  --head-ls: -0.02em;
  --nav-bg: #ffffff;
  --chip-bg: #eef1ee;
  --hero-bg: #e6ebe7;
  --soft-bg: #eef1ee;
}

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

body.sr-fjord .sr-logo-mark {
  border-radius: 12px;
  background: var(--brand);
}

body.sr-fjord .sr-logo-name {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.035em;
}

body.sr-fjord .sr-logo-sub {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

body.sr-fjord .sr-cats a {
  background: none;
  border-radius: 0;
  padding: 12px 0;
  margin-right: 22px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

body.sr-fjord .sr-cats a.on {
  background: none;
  border-bottom-color: var(--accent);
  font-weight: 600;
}

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

/* The store or country row, whichever the shared component decided to
   render: a quiet strip on the stone. Written after the category rules
   on purpose — ".sr-cats a.on" and ".sr-cats-stores a.on" weigh exactly
   the same, so the later one wins, and this row is the more specific
   intent. Written first, its background was cancelled and the chip was
   white text on nothing. */
body.sr-fjord .sr-catsbar-stores {
  background: var(--soft-bg);
  border-bottom: 1px solid var(--line);
}

body.sr-fjord .sr-cats-stores a {
  font-weight: 600;
  border-radius: var(--pill);
  padding: 8px 14px;
}

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

body.sr-fjord .sr-cats-stores a.on .n {
  color: rgba(255, 255, 255, 0.76);
}

body.sr-fjord .sr-chip-search input {
  border-radius: var(--pill);
  background: #ffffff;
}

body.sr-fjord .sr-search input {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
}

body.sr-fjord .sr-search button {
  border-radius: var(--pill);
}

body.sr-fjord .sr-hero {
  background: var(--hero-bg);
  border: 0;
  padding: 44px 40px;
}

body.sr-fjord .sr-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

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

/* The one strong horizontal: the nearest-store finder as a spruce band
   across the page, which is what this identity is organised around. */
body.sr-fjord .sr-store-finder {
  background: var(--brand);
  color: #ffffff;
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  margin-bottom: 18px;
}

body.sr-fjord .sr-store-finder .sr-btn-o {
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
  background: transparent;
}

body.sr-fjord .sr-store-finder .sr-btn-o:hover {
  background: rgba(255, 255, 255, 0.12);
}

body.sr-fjord .sr-finder-note {
  color: rgba(255, 255, 255, 0.82);
}

body.sr-fjord .sr-store-distance {
  color: var(--brand);
}

body.sr-fjord .sr-listhead h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.03em;
}

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

body.sr-fjord .sr-chip,
body.sr-fjord .sr-chip-menu > summary {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-weight: 500;
}

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

body.sr-fjord .sr-btn {
  background: var(--brand);
  color: #ffffff;
  border-radius: var(--pill);
  padding: 13px 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

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

body.sr-fjord .sr-btn-o {
  border: 1px solid var(--brand);
  border-radius: var(--pill);
  color: var(--brand);
  font-weight: 600;
}

body.sr-fjord .sr-card .sr-media {
  background: var(--soft-bg);
}

body.sr-fjord .sr-title {
  font-size: 14px;
  font-weight: 500;
}

body.sr-fjord .sr-price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.025em;
}

body.sr-fjord .sr-card-store {
  color: var(--accent);
  font-weight: 500;
}

body.sr-fjord .sr-badge {
  background: var(--brand);
  color: #ffffff;
  border-radius: var(--pill);
  font-weight: 600;
}

body.sr-fjord .sr-cat-name,
body.sr-fjord .sr-seller-name {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.025em;
}

body.sr-fjord .sr-product-title {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.035em;
}

body.sr-fjord .sr-product-price {
  font-family: var(--font-head);
  font-weight: 800;
}

body.sr-fjord .sr-noimg-said {
  background: var(--soft-bg);
}

body.sr-fjord .sr-footer {
  background: var(--brand);
  border-top: 0;
}

body.sr-fjord .sr-footer h3 {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #ffffff;
}

body.sr-fjord .sr-footer a,
body.sr-fjord .sr-footer li,
body.sr-fjord .sr-footer p {
  color: #c3d0ca;
}

body.sr-fjord .sr-footer a:hover {
  color: #ffffff;
}

body.sr-fjord .sr-by {
  border-top: 1px solid #3a5a4f;
  color: #9db0a7;
}

/* ---------- the shop directory ----------
   /stores grouped by country where a site spans more than one, with a
   filter past STORE_SEARCH_FROM shops. Everything here is the template's
   own tokens: a directory is still the site's page. */
.sr-store-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 28px 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

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

/* The filter box, sized for a page rather than for a chip row. */
.sr-store-search {
  display: flex;
  max-width: 340px;
  margin: 0 0 6px;
}

.sr-store-nohits {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
}

/* ------------------------------------------------------------------
   Stickers (App\Stickers): the products that are only a price sticker
   on the shelves, next to the webshop products. The toggle is a pair
   of chips carrying their counts; a sticker is a compact ROW — spot
   chip, name, price on one line — because a shop can have fourteen
   thousand of them and a card-sized box for three words wasted most of
   its space: two columns from 900px in the section under the shelf,
   one below, and the full width of the grid when it stands among cards
   on the merged price-sorted shelf, so the price order reads down the
   page. Nothing to click, no hover, no heart.
   ------------------------------------------------------------------ */
.sr .sr-chip-pair {
  display: inline-flex;
  align-items: stretch;
}

.sr .sr-chip-pair .sr-chip {
  border-radius: 0;
}

.sr .sr-chip-pair .sr-chip:first-child {
  border-radius: var(--pill) 0 0 var(--pill);
}

.sr .sr-chip-pair .sr-chip:last-child {
  border-radius: 0 var(--pill) var(--pill) 0;
  margin-left: -1px;
}

.sr .sr-chip .sr-chip-n {
  font-weight: 400;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.sr-sticker-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 28px;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .sr-sticker-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sr .sr-sticker {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  cursor: default;
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}

/* Among cards: one full-width row, and no card frame from any template. */
.sr-grid > .sr-sticker {
  grid-column: 1/-1;
}

.sr-grid.sr-list > .sr-sticker {
  width: 100%;
}

.sr-sticker-spots {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 46%;
}

.sr .sr-spot {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--accent);
  border-radius: var(--pill, 999px);
  background: var(--surface, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.sr .sr-spot.sr-spot-none {
  border-color: var(--line);
  color: var(--muted);
  font-weight: 500;
}

.sr-sticker-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-sticker-mark {
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: var(--pill, 999px);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sr-sticker-price {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

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

.sr-stickers-pos {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* The shelf while it is being swapped in place, and the line a domain-wide
   search carries when a shop's shelf items could not be included. */
.sr-listing[aria-busy=true] {
  opacity: 0.6;
  transition: opacity 0.15s;
}

.sr-stickers-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
}

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

.sr-suggest-sticker .sr-sticker-mark {
  margin-left: 4px;
  vertical-align: middle;
}

/* Every seller a marketer (App\SellerShare): the share button beside
   Follow — the same outline button, an icon wide — and the sheet it
   opens: a popover under it on a desktop, a bottom sheet on a phone.
   Everything drawn with the template's own tokens, so mono gets its
   square 2px frame and fjord its pill, as their buttons do. */
.sr-seller-follow {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
}

/* Stretched to the follow button's own height, whatever a template makes
   it (mono's 2px frame and uppercase face are taller than dawn's). */
.sr-share {
  position: relative;
  display: flex;
  align-items: stretch;
}

.sr-share > summary {
  list-style: none;
  cursor: pointer;
}

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

.sr .sr-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-left: 12px;
  padding-right: 12px;
}

.sr .sr-share-btn svg {
  display: block;
  height: 17px;
  width: 17px;
}

.sr-share-sheet {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  width: 320px;
  max-width: calc(100vw - 32px);
  padding: 16px;
  background: var(--nav-bg, var(--bg));
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  text-align: left;
}

.sr-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 15px;
}

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

.sr-share-link {
  display: block;
  margin-bottom: 10px;
}

.sr-share-link span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.sr .sr-share-link input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
}

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

.sr .sr-share-actions .sr-btn,
.sr .sr-share-actions .sr-btn-o {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 13px;
  cursor: pointer;
}

.sr-share-qr {
  margin: 14px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.sr-share-qr svg {
  width: 184px;
  height: 184px;
  display: block;
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.sr-share-qr figcaption {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

.sr-share-print {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
}

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

@media (max-width: 640px) {
  /* The dimmed page behind the sheet is the sheet's own ::before, fixed
     over the viewport and behind the sheet's content within its stacking
     context — a pseudo-element on the <details> itself does not paint. */
  .sr-share-sheet::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, 0.38);
  }
  .sr-share-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 60;
    width: auto;
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  }
  .sr-share-qr svg {
    width: 200px;
    height: 200px;
  }
}
/* A search that found nothing: the term, and the whole shelf back. */
.sr-no-results {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.sr-no-results p {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
}