/* ==========================================================================
   Ashop default theme — modern e-commerce
   ========================================================================== */

:root {
  --color-bg: #ffffff;
  --color-canvas: #f7f7f9;
  --color-text: #1a1a1a;
  --color-muted: #6b7280;
  --color-faint: #9ca3af;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-brand: #ff6b00;
  --color-brand-dark: #e35d00;
  --color-brand-contrast: #ffffff;
  --color-success: #16a34a;
  --color-success-bg: #ecfdf5;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;
  --color-warning: #f59e0b;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06);
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --container: 1280px;
  --gap: 16px;
  --gap-2: 8px;
  --gap-3: 12px;
  --gap-4: 16px;
  --gap-5: 24px;
  --gap-6: 32px;
  --gap-7: 48px;
  --gap-8: 64px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --transition-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --transition: 200ms cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-brand); }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.01em; margin: 0; font-weight: 700; }

/* -------- Layout -------- */
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gap-5); }
.container--narrow { max-width: 540px; }
.container--wide { max-width: 1480px; }
.section { padding-block: var(--gap-7); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* -------- Buttons -------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius-pill);
  background: #fff; color: var(--color-text); border: 1px solid var(--color-border-strong);
  font-weight: 600; font-size: 14px; line-height: 1; text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.btn:hover { background: var(--color-canvas); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--color-brand); color: var(--color-brand-contrast); border-color: var(--color-brand); }
.btn--primary:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); color: var(--color-brand-contrast); }
.btn--dark { background: #111; color: #fff; border-color: #111; }
.btn--dark:hover { background: #000; color: #fff; border-color: #000; }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--color-canvas); }
.btn--block { width: 100%; }
.btn--lg { padding: 14px 28px; font-size: 15px; }
.btn--sm { padding: 7px 14px; font-size: 13px; }

/* -------- Form fields -------- */
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--color-brand);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, .12);
}
label { display: block; margin-bottom: var(--gap-3); }
/* Stacked field-title styling — ONLY for a <span> sitting directly above
   its form control (the `<label><span>Title</span><input></label>`
   pattern). Scoping with :has(+ control) stops this from matching span
   text inside flex control affordances (radio/checkbox pills, inline
   checkbox/radio labels) site-wide: there the bottom margin made the text
   ride ~3px high because flex centres the margin box, not the text box. */
label > span:has(+ input, + select, + textarea) { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }

/* ───────────────────────────────────────────────────────────────────────
 * SYSTEM-WIDE checkbox / radio LABEL normalization — single source of
 * truth for control↔text alignment + spacing across every store.
 * Any <label> that DIRECTLY wraps a native checkbox/radio becomes one
 * centred flex row with a uniform 8px gap, and the native control box is
 * zeroed (no asymmetric UA margin), fixed-size and non-shrinking. This
 * replaces the per-control nudges that drifted (translateY text shims,
 * divergent gaps, default radio margins) and caused checkbox text to sit
 * low / radio text to sit high.
 *
 * Excludes .variant-option (its <input> is a hidden absolute child — a
 * flex/gap rule would re-expose it). Does NOT match .pb-variant-pill
 * (its <input> is a SIBLING, not a child). Does NOT touch the
 * `label > span:has(+input)` field-title rule above (that targets the
 * span, not a label wrapping the input). */
label:has(> input[type="checkbox"]):not(.variant-option),
label:has(> input[type="radio"]):not(.variant-option) {
  display: flex;
  align-items: center;
  gap: 8px;
}
label:has(> input[type="checkbox"]):not(.variant-option) > input[type="checkbox"],
label:has(> input[type="radio"]):not(.variant-option) > input[type="radio"] {
  margin: 0;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  accent-color: var(--color-brand, #ff6b00);
}

fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--gap-4); margin-bottom: var(--gap-4); }
legend { padding: 0 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }

/* -------- Announcement bar -------- */
.announcement-bar {
  background: #111; color: #fff;
  font-size: 13px; text-align: center; padding: 9px 16px;
  letter-spacing: .01em;
}
.announcement-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* -------- Header -------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--gap-5);
  padding-block: var(--gap-3); width: 100%;
}
.site-header__inner > .site-header__logo { flex: 0 0 auto; margin-right: auto; }
.site-header__inner > .site-nav { flex: 0 0 auto; }
.site-header__inner > .site-header__actions { flex: 0 0 auto; }
.site-header__logo {
  font-weight: 800; font-size: 22px; letter-spacing: -.02em;
  color: var(--color-text);
}
.site-header__logo:hover { color: var(--color-brand); }
.site-header__logo img { max-height: 36px; width: auto; }

.site-nav { display: none; }
@media (min-width: 920px) { .site-nav { display: block; } }
.site-nav > ul {
  display: flex; gap: var(--gap-5); align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.site-nav__item { position: relative; }
.site-nav__link {
  display: block; padding: 10px 0;
  font-size: 14px; font-weight: 600;
  color: var(--color-text);
}
.site-nav__link:hover, .site-nav__link[aria-current="page"] { color: var(--color-brand); }
.site-nav__link--has-children { padding-right: 16px; position: relative; }
.site-nav__link--has-children::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--transition-fast);
}
.site-nav__item:hover .site-nav__link--has-children::after { transform: translateY(-35%) rotate(-135deg); }
.site-nav__menu {
  position: absolute; left: 0; top: 100%;
  min-width: 220px; padding: 10px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.site-nav__item:hover .site-nav__menu, .site-nav__item:focus-within .site-nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.site-nav__menu a {
  display: block; padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--color-text);
}
.site-nav__menu a:hover { background: var(--color-canvas); color: var(--color-brand); }

/* Nested submenus — flyout to the right of the parent item. */
.site-nav__menu-item { position: relative; }
.site-nav__menu-item--has-children > a {
  padding-right: 22px;
}
.site-nav__menu-item--has-children > a::after {
  content: ''; position: absolute; right: 12px; top: 50%;
  width: 5px; height: 5px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-65%) rotate(-45deg);
}
.site-nav__menu-item > .site-nav__menu {
  left: 100%; top: -10px;
  transform: translateX(8px);
}
.site-nav__menu-item:hover > .site-nav__menu,
.site-nav__menu-item:focus-within > .site-nav__menu {
  opacity: 1; visibility: visible; transform: translateX(0);
}

/* Splash page — full-bleed, no header / footer chrome. */
.template-splash { background: var(--color-canvas); }
.splash-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--gap-7) var(--gap-5);
}
.splash-page__inner {
  max-width: 720px; text-align: center;
  background: #fff; padding: var(--gap-7);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.splash-page__title { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--gap-5); }
.splash-page__body { color: var(--color-muted); font-size: 16px; line-height: 1.6; }
.splash-page__enter { margin-top: var(--gap-6); }

/* Homepage content page — keeps the home merchandising below it. */
.home-page-content { padding: var(--gap-7) 0 0; }
.home-page-content__title { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--gap-4); }
.home-page-content__body { font-size: 15px; line-height: 1.6; color: var(--color-text); }

/* Brand detail logo. */
.brand-detail__logo { max-height: 96px; width: auto; margin-bottom: var(--gap-3); }

/* ----- Configurable category & brand menus (sections) ----- */
.category-menu { font-size: 14px; }
.category-menu__list { list-style: none; padding: 0; margin: 0; }
.category-menu__list--depth-1 { padding-left: 14px; }
.category-menu__list--depth-2 { padding-left: 14px; }
.category-menu__list--depth-3 { padding-left: 14px; }
.category-menu__item { padding: 4px 0; }
.category-menu__item--active > .category-menu__link { color: var(--color-brand); font-weight: 700; }
.category-menu__link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--radius-xs); }
.category-menu__link:hover { background: var(--color-canvas); color: var(--color-brand); }
.category-menu__icon { width: 22px; height: 22px; object-fit: contain; }

.category-menu--horizontal > .category-menu__list { display: flex; gap: var(--gap-3); flex-wrap: wrap; }
.category-menu--horizontal .category-menu__list--depth-1 { padding-left: 0; }

.category-menu__dropdown {
  width: 100%; max-width: 320px; padding: 10px 12px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text);
}

.category-menu--mega { display: flex; gap: var(--gap-4); list-style: none; padding: 0; margin: 0; }
.category-menu--mega > .category-menu__item { position: relative; }
.category-menu--mega > .category-menu__item > a {
  display: block; padding: 8px 12px; border-radius: var(--radius-pill);
  background: var(--color-canvas); font-weight: 600;
}
.category-menu--mega > .category-menu__item--has-children:hover > .category-menu__list,
.category-menu--mega > .category-menu__item--has-children:focus-within > .category-menu__list {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 240px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); padding: 10px; z-index: 30;
}

.brand-menu { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.brand-menu--vertical .brand-menu__item { padding: 4px 0; }
.brand-menu--horizontal { display: flex; gap: var(--gap-3); flex-wrap: wrap; }
.brand-menu__link { padding: 4px 6px; border-radius: var(--radius-xs); }
.brand-menu__link:hover { background: var(--color-canvas); color: var(--color-brand); }
.brand-menu__item--active > .brand-menu__link { color: var(--color-brand); font-weight: 700; }
.brand-menu__dropdown {
  width: 100%; max-width: 320px; padding: 10px 12px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text);
}

.collection-grid--cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.collection-grid--cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
.collection-grid--cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
.collection-grid--cols-5 { grid-template-columns: repeat(2, 1fr) !important; }
.collection-grid--cols-6 { grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 720px) {
  .collection-grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .collection-grid--cols-4 { grid-template-columns: repeat(3, 1fr) !important; }
  .collection-grid--cols-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .collection-grid--cols-6 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1024px) {
  .collection-grid--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .collection-grid--cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .collection-grid--cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
  .collection-grid--cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
}
.collection-card__children {
  list-style: none; margin: var(--gap-2) 0 0; padding: 0;
  display: flex; gap: var(--gap-2); flex-wrap: wrap;
}
.collection-card__children a {
  font-size: 12px; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--color-canvas); color: var(--color-muted);
}
.collection-card__children a:hover { background: var(--color-brand); color: #fff; }

/* Subcategory tile strip on a category page (legacy RenderSubCategories) */
.sub-categories { margin-bottom: var(--gap-6); }
.sub-categories__title {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--color-muted);
  margin: 0 0 var(--gap-3);
}
.sub-categories__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--gap-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px)  { .sub-categories__grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .sub-categories__grid { grid-template-columns: repeat(6, 1fr); } }
.sub-category-tile a {
  display: flex; flex-direction: column; align-items: center; gap: var(--gap-2);
  padding: var(--gap-3); text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: #fff; transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.sub-category-tile a:hover { border-color: var(--color-brand); transform: translateY(-2px); }
.sub-category-tile__image {
  width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--color-canvas);
}
.sub-category-tile__placeholder {
  width: 100%; aspect-ratio: 1/1; display: block;
  background: var(--color-canvas); border-radius: var(--radius-sm);
}
.sub-category-tile__title { font-size: 13px; font-weight: 600; color: var(--color-text); }

.brands-strip__list--cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.brands-strip__list--cols-4 { grid-template-columns: repeat(4, 1fr) !important; }
.brands-strip__list--cols-5 { grid-template-columns: repeat(5, 1fr) !important; }
.brands-strip__list--cols-6 { grid-template-columns: repeat(6, 1fr) !important; }
.brands-strip__list--cols-8 { grid-template-columns: repeat(8, 1fr) !important; }

.site-header__actions {
  display: flex; align-items: center; gap: var(--gap-2);
}
.site-header__action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-pill); color: var(--color-text);
  position: relative;
}
.site-header__action:hover { background: var(--color-canvas); color: var(--color-brand); }
/* Recognised-visitor greeting next to the account icon. */
.site-header__greeting { font-size: 13px; color: var(--color-muted); white-space: nowrap; }
.site-header__greeting strong { color: var(--color-fg); font-weight: 600; }
.site-header__greeting a { color: var(--color-link); }
.site-header__notyou { color: var(--color-danger); margin-left: 4px; }
@media (max-width: 880px) { .site-header__greeting { display: none; } }
.site-header__cart-count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--color-brand); color: #fff;
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Phase 7.43 — TRADE chip on the account icon when the active tier is B2B. */
.site-header__trade-chip {
  position: absolute; top: -4px; right: -8px;
  padding: 1px 5px; min-width: 18px; height: 16px;
  background: #f59e0b; color: #fff;
  border-radius: var(--radius-pill);
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em; line-height: 14px;
  text-transform: uppercase; text-align: center;
}

.site-header__search {
  display: none; position: relative; align-items: center;
  padding: 0 8px 0 14px; border-radius: var(--radius-pill);
  background: var(--color-canvas); color: var(--color-muted);
  font-size: 13px; min-width: 320px;
}
@media (min-width: 720px) { .site-header__search { display: inline-flex; } }
.site-header__search:focus-within { color: var(--color-text); box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }

.site-header__search-label { display: inline-flex; align-items: center; opacity: 0.7; }
.site-header__search-input {
  flex: 1; min-width: 0; height: 36px; padding: 0 8px;
  border: 0; outline: none; background: transparent;
  font-size: 13px; color: var(--color-text);
}
.site-header__search-input::placeholder { color: var(--color-muted); }

.site-header__search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: #fff; color: var(--color-text);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  max-height: 70vh; overflow: auto;
}
.site-header__search-results.is-loading { opacity: 0.85; }

.site-header__search-list {
  list-style: none; margin: 0; padding: 4px;
}
.site-header__search-list > li > a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 8px; color: inherit; text-decoration: none;
}
.site-header__search-list > li[aria-selected="true"] > a,
.site-header__search-list > li > a:hover {
  background: var(--color-canvas, #f9fafb);
}
.site-header__search-thumb {
  width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
  background: var(--color-canvas, #f3f4f6); flex: 0 0 40px;
}
.site-header__search-thumb--empty { display: block; }
.site-header__search-meta { flex: 1 1 auto; min-width: 0; }
.site-header__search-title {
  font-size: 13px; font-weight: 500; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-header__search-title mark { background: rgba(250, 204, 21, 0.35); color: inherit; padding: 0; }
.site-header__search-sku {
  font-size: 11px; color: var(--color-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.site-header__search-price {
  flex: 0 0 auto; text-align: right; font-size: 13px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.site-header__search-current { font-weight: 600; }
.site-header__search-compare { font-size: 11px; color: var(--color-muted); text-decoration: line-through; }

.site-header__search-empty {
  padding: 16px; text-align: center; color: var(--color-muted); font-size: 13px;
}
.site-header__search-viewall {
  display: block; padding: 10px; text-align: center;
  border-top: 1px solid var(--color-border, #e5e7eb);
  font-size: 12px; color: var(--color-link, #3b82f6); text-decoration: none;
}
.site-header__search-viewall:hover { text-decoration: underline; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* -------- Hero -------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 460px; display: grid; place-items: center;
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 50%, #fbcfe8 100%);
}
.hero[style*="url"] { background-size: cover; background-position: center; }
.hero[style*="url"]::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
}
.hero__inner {
  position: relative; z-index: 1; max-width: 720px;
  text-align: center; padding: var(--gap-7) var(--gap-5);
  color: var(--color-text);
}
.hero[style*="url"] .hero__inner { color: #fff; }
.hero__heading {
  font-size: clamp(32px, 5.5vw, 64px);
  font-weight: 800; letter-spacing: -.03em; margin-bottom: var(--gap-3);
}
.hero__sub {
  font-size: clamp(15px, 1.6vw, 19px); margin: 0 0 var(--gap-5);
  opacity: .85;
}
.hero__cta { padding: 14px 32px; }

/* The `{% section %}` Liquid tag auto-wraps every section in
   `<div class="shopify-section section-<name>">`. That class name
   collides with the BEM `.section-header` heading block below
   (e.g. for `{% section 'header' %}` we end up with two stacked
   `.section-header` rules — one wrapper, one heading row). Reset the
   wrapper so it stays a plain block container that fills its parent. */
.shopify-section { display: block; width: 100%; }

/* -------- Section heading row -------- */
.section-header:not(.shopify-section) {
  display: flex; align-items: end; justify-content: space-between; gap: var(--gap-4);
  margin-bottom: var(--gap-5);
}
.section-header__title {
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; letter-spacing: -.02em;
}
.section-header__sub { color: var(--color-muted); margin: 6px 0 0; font-size: 14px; }
.section-header__link {
  font-size: 14px; font-weight: 600; color: var(--color-brand);
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.section-header__link::after { content: '→'; transition: transform var(--transition-fast); }
.section-header__link:hover::after { transform: translateX(2px); }

/* -------- Product grid + card -------- */
.product-grid {
  display: grid; gap: var(--gap-5);
  grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 0;
}
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--color-border);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  text-decoration: none; color: inherit;
  height: 100%;
}
.product-card:hover {
  transform: translateY(-2px); border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md); color: inherit; text-decoration: none;
}
.product-card__image {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--color-canvas); overflow: hidden;
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.4, 0, .2, 1); }
.product-card:hover .product-card__image img { transform: scale(1.04); }
.product-card__image-placeholder {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, #f3f4f6 0 8px, #e5e7eb 8px 16px);
}
.product-card__badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--color-brand); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.product-card__badge--sale { background: var(--color-danger); }
.product-card__badge--new  { background: #111; }
/* "Best value" corner badge — home-featured / category-featured products.
   Sits flush in the top-right corner (container clips overflow). */
/* Scoped to `.product-card__image img` so it beats the generic
   `.product-card__image img` rule (width/height/object-fit), which would
   otherwise blow the badge up to cover the whole card. */
.product-card__image img.product-card__best-value {
  position: absolute; inset: 0 0 auto auto;
  width: 78px; height: auto; object-fit: contain;
  z-index: 3; pointer-events: none;
}
.product-card__body {
  padding: 14px 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.product-card__title {
  font-size: 14px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* -------- Price -------- */
.price { display: inline-flex; align-items: baseline; gap: 10px; font-weight: 700; flex-wrap: wrap; }
.price--lg { font-size: 33px; }
.price--compact { font-size: 14px; }
.price__regular { color: var(--color-text); }
.price__sale { color: var(--color-danger); }
.price__compare { color: var(--color-faint); font-weight: 500; font-size: .55em; }
.price__save-badge { font-weight: 600; font-size: .45em; color: var(--color-text); background: var(--color-canvas); border: 1px solid var(--color-border); border-radius: 999px; padding: 2px 8px; }
/* Phase 7.44 — small "incl./ex. tax" caption beside the price. */
.price__tax-suffix { color: var(--color-muted); font-weight: 500; font-size: .75em; margin-left: .35em; }

/* -------- Collection grid (categories list) -------- */
.collection-grid {
  display: grid; gap: var(--gap-4);
  grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 0;
}
@media (min-width: 720px) { .collection-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .collection-grid { grid-template-columns: repeat(4, 1fr); } }

.collection-card {
  display: block; position: relative;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-canvas);
  aspect-ratio: 4 / 5;
  text-decoration: none; color: inherit;
  transition: transform var(--transition);
}
.collection-card:hover { transform: scale(1.01); color: inherit; text-decoration: none; }
.collection-card img { width: 100%; height: 100%; object-fit: cover; }
.collection-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7));
  display: flex; flex-direction: column; justify-content: end;
  padding: var(--gap-4);
  color: #fff;
}
.collection-card__title { font-size: 18px; font-weight: 700; margin: 0; }
.collection-card__count { font-size: 12px; opacity: .85; margin-top: 2px; }

/* -------- Brands strip -------- */
.brands-strip {
  background: var(--color-canvas);
  padding: var(--gap-6) 0;
}
.brands-strip__list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-4);
  list-style: none; margin: var(--gap-4) 0 0; padding: 0;
}
@media (min-width: 720px) { .brands-strip__list { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .brands-strip__list { grid-template-columns: repeat(6, 1fr); } }
.brand-chip {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--color-border);
  padding: var(--gap-4); aspect-ratio: 3 / 2;
  border-radius: var(--radius-md); transition: border-color var(--transition);
  text-decoration: none; color: var(--color-text);
}
.brand-chip:hover { border-color: var(--color-brand); }
.brand-chip img { max-height: 60%; max-width: 80%; object-fit: contain; filter: grayscale(.4); transition: filter var(--transition); }
.brand-chip:hover img { filter: none; }
.brand-chip__name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }

/* -------- Trust badges -------- */
.trust-badges {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-4);
  padding: var(--gap-5) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
}
@media (min-width: 720px) { .trust-badges { grid-template-columns: repeat(4, 1fr); } }
.trust-badge {
  display: flex; align-items: center; gap: var(--gap-3);
  padding: 8px 4px;
}
.trust-badge__icon { width: 32px; height: 32px; color: var(--color-brand); flex-shrink: 0; }
.trust-badge__title { font-weight: 700; font-size: 14px; line-height: 1.2; }
.trust-badge__desc { color: var(--color-muted); font-size: 12px; line-height: 1.3; }

/* -------- Image with text -------- */
.image-with-text { padding: var(--gap-7) 0; }
.image-with-text__inner {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-6); align-items: center;
}
@media (min-width: 720px) { .image-with-text__inner { grid-template-columns: 1fr 1fr; } }
.image-with-text__image img { border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; }
.image-with-text__copy h2 { font-size: clamp(22px, 2.4vw, 32px); margin-bottom: var(--gap-3); }
.image-with-text__copy p { color: var(--color-muted); margin-bottom: var(--gap-4); }

/* -------- Newsletter -------- */
.newsletter {
  background: #111; color: #fff;
  padding: var(--gap-7) 0; margin-top: var(--gap-7);
}
.newsletter__inner { max-width: 560px; margin: 0 auto; text-align: center; padding: 0 var(--gap-5); }
.newsletter h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: var(--gap-3); }
.newsletter p { color: rgba(255,255,255,.75); margin-bottom: var(--gap-4); }
.newsletter form { display: grid; grid-template-columns: 1fr auto; gap: var(--gap-2); max-width: 420px; margin: 0 auto; }
.newsletter input { background: #fff; }
.newsletter__flash {
  max-width: 420px;
  margin: 0 auto var(--gap-3);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
}
.newsletter__flash--ok    { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.newsletter__flash--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* -------- Page header -------- */
.page-header { margin-block: var(--gap-7) var(--gap-5); }
.page-header__title { font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.02em; }
.page-header__subtitle { color: var(--color-muted); margin-top: 8px; }
.page-header__description { color: var(--color-muted); margin-top: 8px; max-width: 720px; font-size: 16px; line-height: 1.6; }
.page-header__meta { color: var(--color-faint); margin-top: 6px; font-size: 13px; }

/* -------- Blog listing -------- */
.blog-template { padding-bottom: var(--gap-8); }
.blog-template__empty {
  margin: var(--gap-7) 0;
  padding: var(--gap-6);
  text-align: center;
  color: var(--color-muted);
  background: var(--color-canvas);
  border-radius: var(--radius-md);
}
.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.article-list__item a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.article-list__item h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0;
  line-height: 1.35;
}
.article-list__item img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--color-canvas);
}
.article-list__date {
  color: var(--color-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}
.article-list__excerpt {
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Layout 1 — 2-column tile grid (default). */
.blog-layout-1 .article-list,
.blog-layout-undefined .article-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-6);
}
@media (min-width: 720px) {
  .blog-layout-1 .article-list,
  .blog-layout-undefined .article-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-6) var(--gap-5);
  }
}
.blog-layout-1 .article-list__item,
.blog-layout-undefined .article-list__item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.blog-layout-1 .article-list__item:hover,
.blog-layout-undefined .article-list__item:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.blog-layout-1 .article-list__item img,
.blog-layout-undefined .article-list__item img {
  aspect-ratio: 16 / 9;
}
.blog-layout-1 .article-list__item a,
.blog-layout-undefined .article-list__item a {
  display: grid;
  grid-template-rows: auto 1fr;
}
.blog-layout-1 .article-list__item a > h2,
.blog-layout-1 .article-list__item a > .article-list__date,
.blog-layout-1 .article-list__item a > .article-list__excerpt,
.blog-layout-undefined .article-list__item a > h2,
.blog-layout-undefined .article-list__item a > .article-list__date,
.blog-layout-undefined .article-list__item a > .article-list__excerpt {
  margin-inline: var(--gap-4);
}
.blog-layout-1 .article-list__item a > .article-list__date,
.blog-layout-undefined .article-list__item a > .article-list__date {
  margin-top: var(--gap-4);
}
.blog-layout-1 .article-list__item a > h2,
.blog-layout-undefined .article-list__item a > h2 {
  margin-top: 6px;
  font-size: 20px;
}
.blog-layout-1 .article-list__item a > .article-list__excerpt,
.blog-layout-undefined .article-list__item a > .article-list__excerpt {
  margin-top: 10px;
  margin-bottom: var(--gap-4);
}
.blog-layout-1 .article-list__item a:hover h2,
.blog-layout-undefined .article-list__item a:hover h2 {
  color: var(--color-brand);
}

/* Layout 2 — image + title row. */
.blog-layout-2 .article-list--image-row {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}
.blog-layout-2 .article-list__item {
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--gap-4);
}
.blog-layout-2 .article-list__item a {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-3);
}
@media (min-width: 640px) {
  .blog-layout-2 .article-list__item a {
    grid-template-columns: 220px 1fr;
    gap: var(--gap-5);
    align-items: center;
  }
}
.blog-layout-2 .article-list__item img {
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 10;
}
@media (min-width: 640px) {
  .blog-layout-2 .article-list__item img {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .blog-layout-2 .article-list__item h2 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .blog-layout-2 .article-list__item .article-list__date {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
}
.blog-layout-2 .article-list__item h2 {
  font-size: clamp(20px, 2.2vw, 24px);
  margin: 0;
}
.blog-layout-2 .article-list__item .article-list__date { margin-top: 6px; }
.blog-layout-2 .article-list__item a:hover h2 {
  color: var(--color-brand);
}

/* Layout 3 — title-only list. */
.blog-layout-3 .article-list--titles {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}
.blog-layout-3 .article-list__item {
  border-bottom: 1px solid var(--color-border);
}
.blog-layout-3 .article-list__item a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-4);
  padding-block: var(--gap-4);
  flex-wrap: wrap;
}
.blog-layout-3 .article-list__item h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  flex: 1 1 auto;
}
.blog-layout-3 .article-list__item .article-list__date {
  flex: 0 0 auto;
}
.blog-layout-3 .article-list__item a:hover h2 {
  color: var(--color-brand);
}

/* Layout 4 — featured + grid. */
.blog-layout-4 .article-list__featured {
  display: block;
  margin-bottom: var(--gap-7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.blog-layout-4 .article-list__featured:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
}
.blog-layout-4 .article-list__featured a {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .blog-layout-4 .article-list__featured a {
    grid-template-columns: 1.3fr 1fr;
  }
}
.blog-layout-4 .article-list__featured img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.blog-layout-4 .article-list__featured > a > .article-list__date,
.blog-layout-4 .article-list__featured > a > h2,
.blog-layout-4 .article-list__featured > a > .article-list__excerpt {
  padding-inline: var(--gap-6);
}
.blog-layout-4 .article-list__featured > a > .article-list__date {
  padding-top: var(--gap-6);
}
.blog-layout-4 .article-list__featured h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-top: 10px;
}
.blog-layout-4 .article-list__featured .article-list__excerpt {
  font-size: 15px;
  margin-top: var(--gap-3);
  padding-bottom: var(--gap-6);
}
.blog-layout-4 .article-list__featured a:hover h2 {
  color: var(--color-brand);
}
.blog-layout-4 .article-list--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-5);
}
@media (min-width: 640px) {
  .blog-layout-4 .article-list--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .blog-layout-4 .article-list--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.blog-layout-4 .article-list--grid .article-list__item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.blog-layout-4 .article-list--grid .article-list__item:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.blog-layout-4 .article-list--grid .article-list__item img { aspect-ratio: 16 / 10; }
.blog-layout-4 .article-list--grid .article-list__item a > .article-list__date {
  margin: var(--gap-3) var(--gap-3) 0;
}
.blog-layout-4 .article-list--grid .article-list__item a > h2 {
  margin: 6px var(--gap-3) var(--gap-3);
  font-size: 17px;
}
.blog-layout-4 .article-list--grid .article-list__item a:hover h2 {
  color: var(--color-brand);
}

/* Pagination — shared across all blog layouts. */
.blog-template__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
  margin-top: var(--gap-7);
  padding-top: var(--gap-5);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.blog-template__pagination .pagination__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.blog-template__pagination .pagination__link:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-canvas);
}
.blog-template__pagination .pagination__info {
  color: var(--color-muted);
  font-size: 13px;
}

/* -------- Breadcrumbs -------- */
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; padding: 0; margin: var(--gap-3) 0 0;
  font-size: 13px; color: var(--color-muted);
}
.breadcrumbs li:not(:last-child)::after { content: '/'; margin-left: 6px; color: var(--color-faint); }
.breadcrumbs a:hover { color: var(--color-brand); }

/* -------- Product page -------- */
.product-template { padding-bottom: var(--gap-8); }
.product-template .product-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-6); }
@media (min-width: 900px) {
  .product-template .product-grid { grid-template-columns: 1.15fr 1fr; gap: var(--gap-7); align-items: start; }
}
.product-gallery__main { background: var(--color-canvas); border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1 / 1; }
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px;
  list-style: none; padding: 0; margin: 8px 0 0;
}
.product-gallery__thumbs img { aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; }
.product-gallery__thumbs img:hover { border-color: var(--color-brand); }

.product-info__brand { color: var(--color-brand); margin: 0 0 var(--gap-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.product-info__title { font-size: clamp(24px, 3vw, 36px); margin: 0 0 var(--gap-3); }
.product-info__sku { color: var(--color-muted); font-size: 12px; margin: var(--gap-3) 0; letter-spacing: .04em; }
.product-info__description { margin: var(--gap-5) 0; color: var(--color-muted); }
.product-info__short { margin-top: var(--gap-5); padding-top: var(--gap-4); border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 14px; }

.product-form { margin-top: var(--gap-5); padding-top: var(--gap-5); border-top: 1px solid var(--color-border); }
.variant-group { margin-bottom: var(--gap-4); }
.variant-group__label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin-bottom: 8px; }
.variant-group__options { display: flex; flex-wrap: wrap; gap: 8px; }
.variant-option {
  position: relative; display: inline-flex; align-items: center;
  padding: 8px 16px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 600; font-size: 13px;
  transition: all var(--transition-fast);
}
.variant-option input { position: absolute; opacity: 0; pointer-events: none; }
.variant-option:has(input:checked) { border-color: var(--color-text); background: var(--color-text); color: #fff; }
.variant-option:hover { border-color: var(--color-text); }
.product-form__qty { max-width: 140px; margin-block: var(--gap-4); }
.product-form__qty input { text-align: center; }
.btn--add-to-cart { width: 100%; padding: 16px 24px; font-size: 16px; }

.product-info__lead { font-size: 16px; color: var(--color-text); margin: var(--gap-4) 0; }
.product-info__stock { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: var(--gap-3) 0 0; }
.product-info__stock .dot { width: 8px; height: 8px; border-radius: 50%; }
.product-info__stock--in { color: var(--color-success); }
.product-info__stock--in .dot { background: var(--color-success); }
.product-info__stock--out { color: var(--color-danger); }
.product-info__stock--out .dot { background: var(--color-danger); }

.product-meta { list-style: none; padding: 0; margin: var(--gap-5) 0 0; display: grid; gap: 8px; border-top: 1px solid var(--color-border); padding-top: var(--gap-4); font-size: 13px; }
.product-meta li { display: flex; justify-content: space-between; gap: var(--gap-3); }
.product-meta span { color: var(--color-muted); }
.product-meta a { color: var(--color-brand); }

.product-form__row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-3); align-items: end; margin-top: var(--gap-4); }
.product-form__qty { margin: 0; }

.variant-group__selected { color: var(--color-text); font-weight: 600; text-transform: none; letter-spacing: 0; }
.variant-option__delta { display: block; font-size: 11px; color: var(--color-muted); font-weight: 500; margin-top: 2px; }
.variant-option--unavailable { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.product-description { margin-top: var(--gap-7); padding-top: var(--gap-6); border-top: 1px solid var(--color-border); max-width: 880px; }
.product-description__heading { font-size: 22px; margin-bottom: var(--gap-4); }
.product-description__body { color: var(--color-muted); }
.product-description__body p, .product-description__body li { color: var(--color-text); }

/* -------- Qty stepper -------- */
.qty-stepper {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  overflow: hidden; max-width: 130px;
}
.qty-stepper button {
  width: 36px; padding: 0; background: #fff; color: var(--color-text);
  font-size: 18px; font-weight: 600; line-height: 1;
}
.qty-stepper button:hover { background: var(--color-canvas); color: var(--color-brand); }
.qty-stepper input {
  width: 50px; padding: 0; border: 0; border-radius: 0;
  text-align: center; font-weight: 600; -moz-appearance: textfield;
  background: #fff;
}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.qty-stepper input:focus { box-shadow: none; }

/* -------- Cart drawer -------- */
.cart-drawer { position: fixed; inset: 0; z-index: 100; }
.cart-drawer[hidden] { display: none; }
.cart-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(15, 23, 42, .35);
  opacity: 0; transition: opacity 200ms cubic-bezier(.4,0,.2,1);
}
.cart-drawer.is-open .cart-drawer__backdrop { opacity: 1; }
.cart-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(420px, 92vw);
  background: #fff; box-shadow: -8px 0 32px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 250ms cubic-bezier(.4,0,.2,1);
}
.cart-drawer.is-open .cart-drawer__panel { transform: translateX(0); }
.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--gap-4) var(--gap-5); border-bottom: 1px solid var(--color-border);
}
.cart-drawer__title { font-size: 18px; }
.cart-drawer__close { width: 36px; height: 36px; border-radius: var(--radius-pill); font-size: 22px; color: var(--color-muted); }
.cart-drawer__close:hover { background: var(--color-canvas); color: var(--color-text); }
.cart-drawer__body { flex: 1; overflow-y: auto; }
.cart-drawer__empty { padding: var(--gap-6) var(--gap-5); text-align: center; color: var(--color-muted); }
.cart-drawer__lines { list-style: none; margin: 0; padding: var(--gap-3) var(--gap-5); display: grid; gap: var(--gap-4); }
.cart-drawer__line { display: grid; grid-template-columns: 80px 1fr; gap: var(--gap-3); padding-bottom: var(--gap-4); border-bottom: 1px solid var(--color-border); }
.cart-drawer__line:last-child { border-bottom: 0; }
.cart-drawer__line-image { display: block; }
.cart-drawer__line-image img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-drawer__line-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-drawer__line-title { font-weight: 400; line-height: 1.3; color: var(--color-text); }
.cart-drawer__line-title:hover { color: var(--color-brand); }
.cart-drawer__line-variant { color: var(--color-muted); font-size: 12px; margin: 0; }
.cart-drawer__line-row { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-2); margin-top: 4px; }
.cart-drawer__line-price { font-size: 14px; }
.cart-drawer__line-remove { color: var(--color-faint); font-size: 12px; align-self: flex-start; padding: 0; text-decoration: underline; }
.cart-drawer__line-remove:hover { color: var(--color-danger); }
.cart-drawer__foot {
  padding: var(--gap-4) var(--gap-5);
  border-top: 1px solid var(--color-border);
  display: grid; gap: 10px;
}
.cart-drawer__total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; }
.cart-drawer__note { color: var(--color-muted); font-size: 12px; margin: 0; }

.site-header__cart-count.is-empty { display: none; }
body.cart-drawer-open { overflow: hidden; }

/* -------- Cart summary box -------- */
.cart-summary {
  margin-top: var(--gap-5);
  padding: var(--gap-5);
  background: var(--color-canvas);
  border-radius: var(--radius-md);
  display: grid; gap: var(--gap-3);
  max-width: 480px; margin-left: auto;
}
.cart-summary__row { display: flex; justify-content: space-between; gap: var(--gap-5); font-size: 18px; font-weight: 700; }
.cart-summary__actions { display: flex; gap: var(--gap-3); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--gap-3); }
.cart-summary__actions .btn { flex: 1; min-width: 140px; }

.cart-items__actions { display: flex; justify-content: flex-end; padding: var(--gap-3) 0; }
.cart-item__link { font-weight: 600; color: var(--color-text); }
.cart-item__link:hover { color: var(--color-brand); }

/* -------- Collection page -------- */
.main-collection { padding-bottom: var(--gap-8); }
.collection-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--gap-3);
  padding: var(--gap-4) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--gap-5);
}
.collection-toolbar__count { color: var(--color-muted); font-size: 14px; margin: 0; }
.collection-toolbar__sort { display: flex; align-items: center; gap: var(--gap-3); }
.collection-toolbar__sort label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.collection-toolbar__sort label > span { display: inline; margin: 0; color: var(--color-muted); font-weight: 500; font-size: 13px; }
.collection-toolbar__sort select { padding: 8px 12px; padding-right: 32px; min-width: 180px; }

/* -------- Listing sidebar (category / brand / search filters) -------- */
/* Single column on mobile; sidebar appears alongside the grid ≥1024px. */
.collection-layout { display: grid; grid-template-columns: 1fr; gap: var(--gap-5); }
/* Two columns whenever the sidebar has content — filters (listings) OR the
   browse block (blog / no-filter listings, which always carry categories +
   brands combos + custom pages). An empty sidebar collapses to one column
   instead of leaving a blank 240px gutter. */
@media (min-width: 1024px) {
  .collection-layout:has(.filter-box),
  .collection-layout:has(.sidebar-browse) { grid-template-columns: 240px 1fr; align-items: start; }
  /* Content pages always use the two-column layout — their left column always
     carries the browse block + testimonials (and a section nav when nested),
     so a nested/parent page never falls back to the single-column grid that
     left the section nav stacked full-width on top of the body. Explicit so it
     doesn't depend solely on the :has() triggers above. */
  .collection-layout.page-layout { grid-template-columns: 240px 1fr; align-items: start; }
}
.collection-sidebar { display: flex; flex-direction: column; gap: var(--gap-5); min-width: 0; }
.collection-main { min-width: 0; }
/* Hide the filter sidebar on narrow screens so products lead. The header nav
   + footer already expose categories/brands/pages on mobile. */
@media (max-width: 1023px) { .collection-sidebar { display: none; } }

/* Shared "browse" block: category + brand combo boxes + custom-page links.
   Sits below the filters on listings and is the whole sidebar on blog pages. */
.sidebar-browse { display: flex; flex-direction: column; gap: var(--gap-4); }
.sidebar-browse__box { display: flex; flex-direction: column; gap: 6px; }
.sidebar-browse__label { font-size: 13px; font-weight: 600; color: var(--color-fg); }
.sidebar-browse__select {
  width: 100%; padding: 8px 10px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: #fff; color: var(--color-fg);
}
.sidebar-browse__pages { gap: 4px; }
.sidebar-browse__pagelist { list-style: none; margin: 0; padding: 0; }
.sidebar-browse__pagelist li { font-size: 13px; }
.sidebar-browse__pagelist a { display: block; padding: 5px 0; color: #2563eb; text-decoration: none; }
.sidebar-browse__pagelist a:hover { text-decoration: underline; }

/* Inline child-page links rendered below the page body (visible on mobile,
   where the sidebar collapses). */
.page-children { margin-top: var(--gap-5); padding-top: var(--gap-4); border-top: 1px solid var(--color-border); }
.page-children__title { font-size: 1.1rem; margin: 0 0 var(--gap-3); }
.page-children__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--gap-2); }
@media (min-width: 640px) { .page-children__grid { grid-template-columns: repeat(2, 1fr); } }
.page-children__link {
  display: block; padding: 12px 14px; color: var(--color-fg); text-decoration: none; font-weight: 500;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff;
}
.page-children__link:hover { border-color: var(--color-fg); }

/* Combined filter box: clean white box, a main "Filter results by" heading,
   then smaller muted section subtitles (Brands first, then Price). */
.filter-box { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.filter-box__heading {
  padding: 12px 14px;
  font-size: 15px; font-weight: 700;
  color: var(--color-fg);
  border-bottom: 1px solid var(--color-border);
}
.filter-box__title {
  padding: 12px 14px 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-muted);
}
/* Hairline between the Brands section and the Price section. */
.filter-list + .filter-box__title { border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 12px; }
.filter-list { list-style: none; margin: 0; padding: 6px 0; max-height: 360px; overflow-y: auto; }
.filter-list li { font-size: 13px; }
.filter-list a {
  display: block; padding: 6px 14px;
  color: var(--color-link); text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 120ms ease, color 120ms ease;
}
.filter-list a:hover { background: var(--color-surface-soft); }
.filter-list .is-active > a {
  background: var(--color-surface-soft); font-weight: 700;
  border-left-color: var(--color-brand);
}

/* -------- Cart -------- */
.cart-template { padding-bottom: var(--gap-8); }
.cart-empty { text-align: center; padding: var(--gap-8) var(--gap-4); }
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { text-align: left; padding: 10px; border-bottom: 1px solid var(--color-border); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); font-weight: 600; }
.cart-table td { padding: 14px 10px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.cart-item__image img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-sm); }
.cart-item__variant { display: block; color: var(--color-muted); font-size: 13px; margin-top: 2px; }
.cart-item__remove { color: var(--color-faint); font-size: 22px; }
.cart-item__remove:hover { color: var(--color-danger); }
.cart-totals { display: grid; gap: var(--gap-3); padding-top: var(--gap-5); justify-items: end; max-width: 480px; margin-left: auto; }
.cart-totals__subtotal { font-size: 18px; display: flex; justify-content: space-between; gap: var(--gap-5); width: 100%; }
.cart-totals__note { color: var(--color-muted); font-size: 13px; }

/* -------- Checkout -------- */
.layout-checkout { background: var(--color-canvas); }
.checkout-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: #fff; border-bottom: 1px solid var(--color-border); }
.checkout-progress ol { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--gap-4); color: var(--color-muted); font-size: 13px; }
.checkout-progress .active { color: var(--color-text); font-weight: 700; }
.checkout-step { background: #fff; padding: var(--gap-6); border-radius: var(--radius-md); margin-block: var(--gap-5); box-shadow: var(--shadow-sm); max-width: 720px; margin-inline: auto; }
.checkout-step__title { margin-top: 0; margin-bottom: var(--gap-4); font-size: 22px; }
.checkout-actions { display: flex; gap: var(--gap-3); margin-top: var(--gap-5); justify-content: space-between; align-items: center; }
.payment-summary p { display: flex; justify-content: space-between; margin: 6px 0; font-size: 14px; color: var(--color-muted); }
.payment-summary__total { font-size: 18px; color: var(--color-text); border-top: 1px solid var(--color-border); padding-top: var(--gap-3); margin-top: var(--gap-3); font-weight: 700; }
.shipping-rate, .payment-method {
  display: flex; align-items: center; gap: var(--gap-3); cursor: pointer;
  padding: var(--gap-4); margin-bottom: var(--gap-2);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}
.shipping-rate:has(input:checked), .payment-method:has(input:checked) { border-color: var(--color-brand); background: rgba(255, 107, 0, .04); }
.shipping-rate__name { flex: 1; font-weight: 600; }

/* -------- Footer -------- */
.site-footer { background: #111; color: #d1d5db; margin-top: var(--gap-8); }
.site-footer__inner {
  display: grid; gap: var(--gap-5);
  padding: var(--gap-7) var(--gap-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .site-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer__col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin: 0 0 var(--gap-3); }
.site-footer__col p { color: rgba(255,255,255,.65); font-size: 14px; line-height: 1.55; }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer__col a { color: rgba(255,255,255,.7); font-size: 14px; }
.site-footer__col a:hover { color: #fff; }
.site-footer__legal { padding: var(--gap-3) var(--gap-5); border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); font-size: 12px; text-align: center; }
.site-footer__corp {
  padding: var(--gap-4) var(--gap-5);
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.6);
  font-size: 12px;
  line-height: 1.55;
  display: grid;
  gap: 4px;
}
.site-footer__corp-name { color: rgba(255,255,255,.85); font-weight: 600; margin: 0; }
.site-footer__corp-address,
.site-footer__corp-line,
.site-footer__corp-tax { margin: 0; }
.site-footer__corp a { color: rgba(255,255,255,.75); border-bottom: 1px dotted rgba(255,255,255,.25); }
.site-footer__corp a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); }

/* -------- Search -------- */
.search-template { padding-bottom: var(--gap-8); }
.search-form { display: flex; gap: var(--gap-2); margin-top: var(--gap-3); max-width: 560px; }
.search-form input { flex: 1; }
.search-results__count { color: var(--color-muted); margin-block: var(--gap-3) var(--gap-5); }

/* -------- Errors -------- */
.error-template { text-align: center; padding: var(--gap-8) var(--gap-5); }
.error-template h1 { font-size: clamp(56px, 10vw, 96px); margin: 0; letter-spacing: -.04em; }
.error-template p { color: var(--color-muted); margin-block: var(--gap-3) var(--gap-5); font-size: 17px; }

/* -------- Password -------- */
.password-template { min-height: 100vh; display: grid; place-items: center; background: var(--color-canvas); }
.password-card { background: #fff; padding: var(--gap-7); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: min(420px, 92vw); text-align: center; }

/* -------- Account / orders tables -------- */
.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); font-weight: 600; text-align: left; padding: 10px; border-bottom: 1px solid var(--color-border); }
.orders-table td { padding: 12px 10px; border-bottom: 1px solid var(--color-border); }
.address-card { padding: var(--gap-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--gap-3); }
.address-card--default { border-color: var(--color-brand); }
.badge {
  display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill);
  background: var(--color-canvas); color: var(--color-text);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}

/* -------- Pagination -------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--gap-3); padding: var(--gap-6) 0; font-size: 14px; }
.pagination__link { padding: 8px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); }
.pagination__link:hover { border-color: var(--color-text); }
.pagination__info { color: var(--color-muted); }

/* -------- Rich text -------- */
.rte { line-height: 1.7; }
.rte h2 { font-size: 22px; margin-block: var(--gap-5) var(--gap-3); }
.rte h3 { font-size: 18px; margin-block: var(--gap-4) var(--gap-2); }
.rte p { margin-block: var(--gap-3); }
.rte ul, .rte ol { padding-left: 24px; margin-block: var(--gap-3); }
.rte a { color: var(--color-brand); text-decoration: underline; }

/* -------- Shopify-style checkout -------- */
.layout-checkout { background: #fff; }
.sf-checkout { position: relative; display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }
.sf-checkout__container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 24px; }

/* Transparent header — no full-width white band. On desktop the grey
   order-summary rail runs full height behind it, so the logo sits over
   the white left column while the top-right shows grey (Shopify style). */
.sf-checkout__header {
  background: transparent;
  position: relative; /* keep the logo above the grey rail layer */
  z-index: 1;
}
.sf-checkout__header .sf-checkout__container { padding-top: 28px; padding-bottom: 16px; }
.sf-checkout__logo { display: inline-block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--color-text); }
/* Cap BOTH axes: a wide logo is bounded by max-width, but a tall one
   (e.g. Petbucket's 354×139 mark) was previously bounded only by width
   and rendered ~94px tall — much larger than the storefront header's
   logo. 56px matches the header cap so checkout reads consistent. */
.sf-checkout__logo img { display: block; max-width: 240px; max-height: 56px; width: auto; height: auto; }
.sf-checkout__breadcrumbs { margin-top: 14px; font-size: 12px; color: var(--color-muted); }
.sf-checkout__breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; margin: 0; list-style: none; }
.sf-checkout__breadcrumbs li.is-done a { color: var(--color-text); }
.sf-checkout__breadcrumbs li.is-active { color: var(--color-text); font-weight: 600; }
.sf-checkout__breadcrumbs li.is-active a, .sf-checkout__breadcrumbs li.is-active span { color: var(--color-text); }
.sf-checkout__breadcrumbs a { color: inherit; text-decoration: none; }
.sf-checkout__breadcrumbs a:hover { color: var(--color-brand); }
.sf-checkout__chevron { color: var(--color-faint); }

.sf-checkout__main { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 32px; padding-bottom: 64px; flex: 1; }
@media (min-width: 900px) {
  .sf-checkout__main { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; }

  /* Grey order-summary rail (Shopify style): a full-PAGE-height band on the
     right, painted by a layer on .sf-checkout (NOT the summary column) so it
     runs from the very top of the page (behind the transparent header) to
     the very bottom (behind the transparent footer). It no longer bleeds to
     the viewport edge — the RIGHT edge stops at the centred 1200px container's
     right edge so there's no empty grey gutter past the summary.

     --co-rail-x is the rail's LEFT edge = the summary column's left edge.
     With a 360px column: `50% + (1200/2 - 24 - 360) = 50% + 216px` while the
     container is at max-width, then `100% - (24 + 360) = 100% - 384px` once it
     stops growing. The RIGHT edge is the container's right outer edge:
     `50% - 600px` on a >=1200px viewport, clamped to 0 below that (the
     container is full-bleed there anyway). KEEP IN SYNC with
     .sf-checkout__container (max-width 1200, padding 24) and the 360px col. */
  .sf-checkout { --co-rail-x: min(calc(50% + 216px), calc(100% - 384px)); }
  .sf-checkout::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: max(0px, calc(50% - 600px));
    left: var(--co-rail-x);
    background: #f6f6f7;
    border-left: 1px solid var(--color-border);
    z-index: -1; /* behind all checkout content; .sf-checkout has no bg */
    pointer-events: none;
  }

  .sf-checkout__summary-col {
    align-self: start;
    /* Pull the summary up so its heading sits near the logo line — the rail's
       top was previously a tall empty grey gap. The content right-aligns to
       the container edge (col is flush with the container's right). */
    margin-top: -72px;
    padding: 0 0 64px 32px;
  }
  /* The totals follow the form as the customer scrolls the (taller) left
     column. */
  .sf-checkout__summary-col > .sf-summary { position: sticky; top: 24px; }
  /* Desktop-only "Order Summary" heading at the top of the rail (the mobile
     toggle label is hidden here). */
  .sf-summary__heading { display: block; margin: 0 0 16px; font-size: 18px; font-weight: 600; color: var(--color-text); }
}
.sf-checkout__main-col { min-width: 0; }
/* Collapsed delivery summary: name on its own line, address below it. */
.sf-collapsed__name { display: block; }


.sf-step { display: flex; flex-direction: column; gap: 16px; }
.sf-step__section { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 24px; }
.sf-step__section[data-state="collapsed"] { padding-top: 16px; padding-bottom: 16px; }
.sf-step__heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 12px; }
.sf-step__section[data-state="collapsed"] .sf-step__heading { margin-bottom: 6px; }
.sf-step__heading h2 { font-size: 18px; font-weight: 600; color: var(--color-text); margin: 0; }
.sf-step__heading-note { font-size: 13px; color: var(--color-muted); margin: 0; }
.sf-step__heading-note a { color: var(--color-brand); text-decoration: none; }
.sf-step__heading-note a:hover { text-decoration: underline; }

.sf-step__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Pay-now CTA at the bottom of the single-step form (left column).
   - Mobile: full width (easy thumb target).
   - Desktop (≥900px): 50% width, right-aligned within the form column.
   The previous `.sf-summary__actions` block in the right rail is now
   empty — its container div was removed from checkout-summary.liquid. */
.sf-single__submit { margin-top: 8px; }
.sf-btn--block { width: 100%; font-size: 16px; padding: 16px 28px; }
@media (min-width: 900px) {
  .sf-single__submit { display: flex; justify-content: flex-end; }
  .sf-single__submit .sf-btn--block { width: 50%; }
}
.sf-link { color: var(--color-brand); font-size: 14px; text-decoration: none; }
.sf-link:hover { text-decoration: underline; }
.sf-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 6px; border: 1px solid transparent; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, opacity .15s; }
.sf-btn--primary { background: var(--color-text); color: #fff; }
.sf-btn--primary:hover:not(:disabled) { background: var(--color-brand-dark, #000); }
.sf-btn--primary:disabled { opacity: .4; cursor: not-allowed; }
.sf-btn--secondary { background: #fff; color: var(--color-text); border-color: var(--color-border-strong); }

/* Floating-label fields */
.sf-field { position: relative; display: block; margin-bottom: 12px; }
.sf-field input, .sf-field select {
  width: 100%; padding: 22px 14px 8px; border: 1px solid var(--color-border-strong); border-radius: 6px;
  font-size: 14px; background: #fff; color: var(--color-text); transition: border-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
}
.sf-field input:focus, .sf-field select:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(255,107,0,.15); }
.sf-field__label {
  position: absolute; left: 14px; top: 14px; color: var(--color-muted); font-size: 13px;
  pointer-events: none; transition: transform .12s, font-size .12s, color .12s; transform-origin: left top;
  background: transparent;
}
.sf-field input:focus ~ .sf-field__label,
.sf-field input:not(:placeholder-shown) ~ .sf-field__label,
.sf-field select:focus ~ .sf-field__label,
.sf-field select:not([value=""]):not(:invalid) ~ .sf-field__label { transform: translateY(-9px); font-size: 11px; color: var(--color-muted); }
.sf-field--country select { padding-right: 36px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7280' d='M6 8 0 0h12z'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
/* `.sf-field { display: block }` (author) outranks the UA `[hidden]` rule,
   so a `hidden` attribute alone won't hide a field — make it explicit. */
.sf-field[hidden] { display: none; }
/* Custom-field shipping-country wrapper. `display: contents` keeps each
   wrapped field flowing exactly as a direct child of the section, so the
   per-field margins + floating labels are unchanged when shown. The
   [hidden] rule (more specific, so it wins) re-hides a country-gated field —
   same author-outranks-UA-`[hidden]` reason as .sf-field above. */
.sf-ccf { display: contents; }
.sf-ccf[hidden] { display: none; }
.sf-field__hint { display: block; margin-top: 6px; color: var(--color-muted); font-size: 12px; line-height: 1.4; }

.sf-field-row { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 600px) { .sf-field-row { grid-template-columns: 1fr 1fr; } .sf-field-row--3 { grid-template-columns: 1fr 1fr 1fr; } }

.sf-country-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.75rem;
  background: #f3f4f6; color: var(--color-text);
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px;
  font-size: 14px; font-weight: 500;
}

/* Single-country block: just the badge (no floating label). Used when
   the merchant has restricted shipping_allowed_countries to one entry. */
.sf-field--single { position: relative; padding: 0; border: 0; background: transparent; margin-bottom: 12px; }
.sf-field--single .sf-country-badge { padding: 0.6rem 0.9rem; }

/* No-label variant — used for the country select at the END of the
   address. The placeholder option ("Select your country…") is the
   visible hint, so the floating label would just duplicate / overlap. */
.sf-field--no-label > .sf-field__label { display: none; }
.sf-field--no-label > select { padding-top: 14px; padding-bottom: 14px; }
.sf-step__flash {
  margin-bottom: 1rem; padding: 0.7rem 0.9rem;
  border-radius: 6px; font-size: 13px;
}
.sf-step__flash--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.sf-step__flash--warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Quick-recognise inline panel — appears under the email field on
   /checkout/contact when the email matches an existing customer.
   Non-blocking: the address form below stays editable. */
/* "Confirm it's you" modal — surfaces on /checkout/contact email
   blur for recognised customers. Backdrop + centered card, Shop-Pay
   style six digit boxes, optional passkey / password / email-channel
   alternatives. */
.sf-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.sf-confirm-modal[hidden] { display: none; }
.sf-confirm-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  animation: sf-confirm-fade 160ms ease-out;
}
.sf-confirm-modal__card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 18px;
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  animation: sf-confirm-slide 200ms ease-out;
}
.sf-confirm-modal__close {
  position: absolute; top: 0.85rem; right: 0.85rem;
  width: 32px; height: 32px;
  background: transparent; border: 0; cursor: pointer;
  color: #475569;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.sf-confirm-modal__close:hover { background: #f1f5f9; }
.sf-confirm-modal__brand {
  font-size: 13px; font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  color: #6366f1;
  margin-bottom: 1rem;
}
.sf-confirm-modal__brand:empty { display: none; }
.sf-confirm-modal__title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 0.4rem;
}
.sf-confirm-modal__sub {
  font-size: 14px;
  color: #475569;
  margin: 0 0 1.1rem;
  line-height: 1.45;
}
.sf-confirm-modal__digit-row {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 1rem;
}
.sf-confirm-modal__digit {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 56px;
  font-size: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
}
.sf-confirm-modal__digit:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.sf-confirm-modal__hint {
  margin: -0.4rem 0 0.8rem;
  font-size: 13px;
  color: #b91c1c;
}
.sf-confirm-modal__passkey {
  display: inline-flex; align-items: center; gap: 0.5rem;
  width: 100%;
  justify-content: center;
  padding: 0.7rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  margin-bottom: 0.6rem;
}
.sf-confirm-modal__passkey:hover { background: #f8fafc; }
.sf-confirm-modal__passkey[hidden] { display: none; }
.sf-confirm-modal__resend {
  display: block;
  background: transparent; border: 0;
  padding: 0;
  margin: -0.4rem 0 0.8rem;
  font-size: 13px; font-weight: 500;
  text-align: left;
  color: #6366f1;
  cursor: pointer;
}
.sf-confirm-modal__resend:hover:not(:disabled) { text-decoration: underline; }
.sf-confirm-modal__resend:disabled {
  color: #cbd5e1;
  cursor: default;
}
.sf-confirm-modal__resend[hidden] { display: none; }
.sf-confirm-modal__alt {
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  margin-top: 0.5rem;
}
.sf-confirm-modal__alt-link {
  background: transparent; border: 0;
  color: #475569;
  font-size: 13px;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
}
.sf-confirm-modal__alt-link:hover { color: #0f172a; text-decoration: underline; }
.sf-confirm-modal__alt-link[hidden] { display: none; }
.sf-confirm-modal__field {
  display: flex; flex-direction: column; gap: 0.3rem;
  margin-bottom: 0.8rem;
}
.sf-confirm-modal__field-label {
  font-size: 12px; font-weight: 600; color: #475569;
}
.sf-confirm-modal__field input {
  height: 44px;
  padding: 0 0.85rem;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 15px;
  background: #fff;
  color: #0f172a;
}
.sf-confirm-modal__field input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.sf-confirm-modal__primary {
  width: 100%;
  margin-bottom: 0.6rem;
}
.sf-confirm-modal__enroll-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  margin: 0 auto 0.85rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
}
body.sf-modal-open { overflow: hidden; }

@keyframes sf-confirm-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes sf-confirm-slide {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-confirm-modal__backdrop,
  .sf-confirm-modal__card { animation: none; }
}

/* Account → passkeys section */
.account-passkeys {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border, #e2e8f0);
}
.account-passkeys h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.account-passkeys__intro {
  color: #475569; font-size: 14px; margin: 0 0 0.85rem;
}
.account-passkeys__list {
  list-style: none; padding: 0; margin: 0 0 0.9rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.account-passkeys__row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  background: #fff;
}
.account-passkeys__meta {
  display: block; font-size: 12px; color: #64748b;
}
.account-passkeys__empty {
  color: #64748b; font-size: 13px; margin: 0 0 0.85rem;
}
.account-passkeys__status {
  margin-top: 0.6rem; font-size: 13px; color: #475569;
}
.account-passkeys__status.is-error { color: #b91c1c; }
.account-passkeys__status.is-ok    { color: #047857; }
.account-passkeys__status[hidden]  { display: none; }

/* Phone combo (flag + dial chip + input). Standalone field with a
   label-above-row layout (NOT sharing .sf-field's floating-label
   pattern, which collides with the prefix chip). */
.sf-phone-combo { display: flex; flex-direction: column; gap: 0.3rem; }
.sf-phone-combo__label {
  font-size: 12px; font-weight: 600;
  color: var(--color-text);
}
.sf-phone-combo .sf-phone-row {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sf-phone-combo .sf-phone-row:focus-within {
  border-color: var(--color-brand, #ff6b00);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.18);
}
.sf-phone-country {
  display: inline-flex; align-items: center;
  padding: 0 0.55rem;
  background: #f3f4f6;
  border: 0;
  border-right: 1px solid var(--color-border, #d1d5db);
  font-size: 14px; color: var(--color-text);
  font-weight: 600; font-variant-numeric: tabular-nums;
  cursor: pointer;
  /* Keep the chip narrow — only the 2-letter code + dial fits */
  width: 88px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%236b7280' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  padding-right: 1.1rem;
}
.sf-phone-country:focus { outline: 2px solid var(--color-brand, #ff6b00); outline-offset: -2px; }
.sf-phone-combo input[data-phone-input] {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: 0.55rem 0.7rem;
  font-size: 14px; color: var(--color-text);
  outline: none;
}
.sf-phone-combo__hint {
  font-size: 12px; color: var(--color-muted, #6b7280);
  min-height: 1em; display: block; margin-top: 0.25rem;
}

/* Checkbox + radio rows
 * ─────────────────────────────────────────────────────────────────────
 * Flex `align-items: center` aligns box geometries, but the system
 * font's visible glyph optical-centre sits above the line-box
 * geometric centre — so the text always looks higher than the
 * checkbox. Use inline-block + `vertical-align: middle` (which aligns
 * by visual midline) and translate the text label down by 3px to
 * cancel the residual font ascent/descent asymmetry. */
.sf-checkbox, .sf-radio {
  /* Centred flex row (was display:block + inline-block/vertical-align +
     a transform:translateY(3px) text nudge that left the checkbox text
     ~3px low). Spacing comes from the single system gap below; the span
     keeps the label's 1.4 line-height and centres on the control. */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
  cursor: pointer;
}

.sf-checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px; height: 16px;
  margin: 0; padding: 0;
  border: 1.5px solid var(--color-border-strong, #d1d5db);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background 120ms ease, border-color 120ms ease;
}
.sf-checkbox input[type="checkbox"]:checked {
  background: var(--color-text, #111);
  border-color: var(--color-text, #111);
}
.sf-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 7px;
  height: 4px;
  border: solid #fff;
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}
.sf-checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-brand, #ff6b00);
  outline-offset: 2px;
}

.sf-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px; height: 16px;
  margin: 0; padding: 0;
  border: 1.5px solid var(--color-border-strong, #d1d5db);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.sf-radio input[type="radio"]:checked { border-color: var(--color-brand, #ff6b00); }
.sf-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--color-brand, #ff6b00);
  transform: translate(-50%, -50%);
}

.sf-radio {
  padding: 14px; border: 1px solid var(--color-border-strong);
  border-radius: 6px; margin-bottom: 8px; line-height: 1.4;
}
.sf-radio:has(input:checked) { border-color: var(--color-brand); background: rgba(255,107,0,.05); }

/* Compact billing toggle — single line of text + checkbox, no header.
   Section gets minimal padding so it doesn't take a full card of space. */
.sf-single__billing { padding: 12px 18px; }
.sf-checkbox--billing { margin: 0; font-size: 14px; line-height: 1.4; }
.sf-single__billing .sf-billing-fields { margin-top: 12px; }
/* When a section ends with the checkbox (Contact: newsletter), drop the
   bottom padding so there's no empty stripe below it. */
.sf-step__section:has(> .sf-checkbox:last-child) { padding-bottom: 14px; }
.sf-step__section .sf-checkbox:last-child { margin-bottom: 0; }
.sf-step__section > .sf-checkbox { margin-top: 12px; }

/* Stacked field — label above control. Used for textarea / file / any
   control where the floating-label pattern overlaps the content. */
.sf-stacked-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.sf-stacked-field__label { font-size: 13px; color: var(--color-muted); }
.sf-stacked-field__control {
  width: 100%; padding: 10px 14px; border: 1px solid var(--color-border-strong); border-radius: 6px;
  font: inherit; font-size: 14px; background: #fff; color: var(--color-text);
  transition: border-color .15s, box-shadow .15s; resize: vertical;
}
.sf-stacked-field__control:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(255,107,0,.15); }

/* Multi-select rendered as a disclosure dropdown. Closed-by-default
   summary mirrors the look of .sf-field; the panel reveals a checkbox
   list so the user can pick multiple values without the native
   <select multiple> overlap. */
.sf-multiselect { position: relative; margin-bottom: 12px; }
.sf-multiselect > summary {
  list-style: none;
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; padding: 10px 36px 8px 14px;
  border: 1px solid var(--color-border-strong); border-radius: 6px;
  background: #fff; color: var(--color-text); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%236b7280' d='M6 8 0 0h12z'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
}
.sf-multiselect > summary::-webkit-details-marker { display: none; }
.sf-multiselect[open] > summary { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(255,107,0,.15); }
.sf-multiselect__label { font-size: 11px; color: var(--color-muted); }
.sf-multiselect__value { font-size: 14px; color: var(--color-text); line-height: 1.3; }
.sf-multiselect:not(:has(input:checked)) .sf-multiselect__value { color: var(--color-muted); }
.sf-multiselect__panel {
  margin-top: 6px; padding: 6px; border: 1px solid var(--color-border-strong);
  border-radius: 6px; background: #fff; max-height: 220px; overflow: auto;
  display: flex; flex-direction: column;
}
.sf-multiselect__option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 4px; font-size: 14px;
  color: var(--color-text); cursor: pointer;
}
.sf-multiselect__option:hover { background: rgba(15,23,42,.04); }
.sf-multiselect__option:has(input:checked) { background: rgba(255,107,0,.06); }

.sf-billing-fields { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 12px; }
.sf-billing-fields[hidden] { display: none; }

/* Review rows on shipping/payment */
.sf-review { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 4px 0; }
.sf-review__row { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.sf-review__row:last-child { border-bottom: none; }
.sf-review__label { color: var(--color-muted); }
.sf-review__value { color: var(--color-text); }
.sf-review__change { color: var(--color-brand); text-decoration: none; font-size: 13px; }
.sf-review__change:hover { text-decoration: underline; }

/* Shipping options */
.sf-shipping-options { display: flex; flex-direction: column; gap: 0; padding: 0; margin: 0; list-style: none; border: 1px solid var(--color-border-strong); border-radius: 6px; overflow: hidden; }
.sf-shipping-option { display: flex; align-items: center; gap: 8px; padding: 16px 18px; cursor: pointer; border-bottom: 1px solid var(--color-border); background: #fff; }
.sf-shipping-options li:last-child .sf-shipping-option, .sf-shipping-options > .sf-shipping-option:last-child { border-bottom: none; }
.sf-shipping-option:has(input:checked) { background: rgba(255,107,0,.05); }
.sf-shipping-option__info { flex: 1; }
.sf-shipping-option__title { font-size: 14px; font-weight: 500; color: var(--color-text); margin: 0; }
.sf-shipping-option__desc { font-size: 12px; color: var(--color-muted); margin: 2px 0 0; }
.sf-shipping-option__price { font-size: 14px; font-weight: 600; color: var(--color-text); margin: 0; }
/* Loading state shown in the shipping-method field while rates are re-fetched
   after a country/state/postcode change (assets/checkout-rates.js). Reuses the
   .sf-btn-spinner glyph; currentColor is the muted text colour set here. */
.sf-shipping-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px; color: var(--color-muted); font-size: 14px; }

/* Payment methods */
.sf-payment-methods { padding: 0; margin: 0; list-style: none; border: 1px solid var(--color-border-strong); border-radius: 6px; overflow: hidden; }
.sf-payment-methods > li { border-bottom: 1px solid var(--color-border); }
.sf-payment-methods > li:last-child { border-bottom: none; }
.sf-payment-method { display: flex; align-items: center; gap: 8px; padding: 12px 18px; cursor: pointer; background: #fff; }
.sf-payment-method__title { font-size: 14px; font-weight: 500; }
.sf-payment-method__panel { padding: 0 18px 12px; background: #fff; }
.sf-payment-method__panel-help { font-size: 12px; color: var(--color-muted); margin: 0 0 6px; }
.sf-payment-method__error { font-size: 13px; color: var(--color-danger); margin-top: 8px; }
.sf-primer-mount { min-height: 220px; }

.sf-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.sf-tag--test { background: #fff7e6; color: #b15c00; border: 1px solid #ffd591; }

/* Right-rail summary */
/* Desktop: the grey panel is provided by .sf-checkout__summary-col, so the
   summary itself is transparent. Mobile (below) restores a white card. */
.sf-summary { background: transparent; border: 0; padding: 0; border-radius: 0; }
/* Hide the heading on MOBILE only (the toggle shows the title there). Scoped to
   a media query so it can't override the desktop `display:block` via source
   order — media queries add no specificity, so an unconditional `display:none`
   here (after the min-width:900 rule) would win at every width and hide it. */
@media (max-width: 899px) { .sf-summary__heading { display: none; } }
@media (max-width: 899px) { .sf-summary { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 0; margin-bottom: 16px; } .sf-summary__mobile-toggle { padding: 14px 18px; } .sf-summary__mobile-toggle[open] { padding-bottom: 18px; } .sf-summary__mobile-toggle summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; } .sf-summary__body { padding-top: 14px; } }
@media (min-width: 900px) { .sf-summary__mobile-toggle summary { display: none; } .sf-summary__body { display: block !important; } }
.sf-summary__lines { padding: 0; margin: 0 0 4px; list-style: none; }
.sf-line { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.sf-line:first-child { padding-top: 0; }
.sf-line:last-child { border-bottom: none; }
/* No `overflow: hidden` here — the qty badge overhangs the corner (see below)
   and would be clipped. The image clips itself via its own border-radius. */
.sf-line__thumb { position: relative; width: 56px; height: 56px; border: 1px solid var(--color-border); border-radius: 10px; flex-shrink: 0; background: #fff; }
.sf-line__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }
/* Neutral grey quantity badge with a ring so it reads on the grey panel. */
.sf-line__qty { position: absolute; top: -9px; right: -9px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #9b9b9b; color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid #f6f6f7; }
.sf-line__info { flex: 1; min-width: 0; }
.sf-line__title { font-size: 14px; font-weight: 400; color: var(--color-text); margin: 0; }
.sf-line__variant { font-size: 13px; color: var(--color-muted); margin: 2px 0 0; }
.sf-line__sub { font-size: 12px; color: var(--color-muted); margin: 3px 0 0; line-height: 1.5; }
.sf-line__price { font-size: 14px; font-weight: 600; color: var(--color-text); margin: 0; white-space: nowrap; }

.sf-summary__discount { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.sf-summary__discount-row { display: flex; gap: 8px; }
.sf-summary__discount-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: 6px; font-size: 14px; }
.sf-summary__discount-row button { padding: 10px 16px; background: #f0f0f0; color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: 6px; font-weight: 500; cursor: pointer; font-size: 14px; }
.sf-summary__coupon { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--color-border-strong); border-radius: 6px; font-size: 13px; background: #f9faf7; }
.sf-summary__coupon-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--color-text); }
.sf-summary__coupon-label { color: var(--color-muted); flex: 1; }
.sf-summary__coupon-remove { background: transparent; border: none; color: var(--color-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.sf-summary__coupon-remove:hover { color: #b91c1c; }
.sf-summary__coupon-error { color: #b91c1c; font-size: 12px; margin: 0; }

/* Inline button spinner — swapped in for the label while a discount-form
   apply/remove request is in flight (assets/cart-coupon.js). Uses currentColor
   so it matches whatever text colour the button already has. */
.sf-btn-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: sf-btn-spin 0.6s linear infinite;
}
@keyframes sf-btn-spin { to { transform: rotate(360deg); } }

.sf-summary__totals { padding: 16px 0 0; margin: 0; border-top: 1px solid var(--color-border); }
.sf-summary__totals > div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.sf-summary__totals dt { color: var(--color-muted); margin: 0; }
.sf-summary__totals dd { color: var(--color-text); font-weight: 500; margin: 0; }
.sf-summary__muted { color: var(--color-muted); font-weight: 400 !important; }

.sf-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; border-top: 1px solid var(--color-border); margin-top: 8px; font-size: 16px; }
.sf-summary__total strong { font-size: 26px; font-weight: 700; }
/* Currency code sits inline next to the "Total" label (e.g. "Total AUD"). */
.sf-summary__total small { font-size: 12px; color: var(--color-muted); margin-left: 4px; }
/* Settlement footnote — small italic line under the total when the
   customer sees prices in one currency but their card is debited in
   another. Quiet styling on purpose; it's a reassurance, not a CTA. */
.sf-summary__settlement-note { margin: 6px 0 0; font-size: 12px; color: var(--color-muted); font-style: italic; line-height: 1.4; }

/* Cart lines on /checkout */
.sf-cart-lines { padding: 0; margin: 0; list-style: none; }
.sf-cart-line { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.sf-cart-line:last-child { border-bottom: none; }
.sf-cart-line__thumb { width: 64px; height: 64px; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #fff; }
.sf-cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-cart-line__body { flex: 1; }
.sf-cart-line__title { font-size: 14px; font-weight: 500; margin: 0; }
.sf-cart-line__variant, .sf-cart-line__qty { font-size: 12px; color: var(--color-muted); margin: 2px 0 0; }
.sf-cart-line__price { font-size: 14px; font-weight: 600; }

.sf-empty { padding: 24px; text-align: center; color: var(--color-muted); font-size: 14px; }
.sf-empty .sf-btn { margin-top: 12px; }


/* -------- Shopify-style cart page -------- */
.sc-cart-page { background: #fafafa; min-height: calc(100vh - 200px); padding: 48px 0; }
.sc-cart-page__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sc-cart-page__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.sc-cart-page__header h1 { font-size: 36px; font-weight: 600; letter-spacing: -.02em; margin: 0; color: var(--color-text); }
.sc-cart-page__continue { color: var(--color-text); font-size: 13px; text-decoration: underline; }
.sc-cart-page__continue:hover { color: var(--color-brand); }

.sc-cart-page__empty { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 48px 24px; text-align: center; color: var(--color-muted); font-size: 15px; }
.sc-cart-page__empty .sc-btn { margin-top: 16px; }

.sc-cart-list { width: 100%; }
.sc-cart-list__head { display: grid; grid-template-columns: 1fr 200px 140px; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border); color: var(--color-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.sc-cart-list__head span:nth-child(3) { text-align: right; }
@media (max-width: 700px) { .sc-cart-list__head { display: none; } }

.sc-cart-row { display: grid; grid-template-columns: 1fr 200px 140px; gap: 16px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--color-border); }
@media (max-width: 700px) { .sc-cart-row { grid-template-columns: 1fr 140px; } .sc-cart-row__qty { grid-column: 1 / -1; } }

.sc-cart-row__product { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.sc-cart-row__thumb { width: 96px; height: 96px; flex: 0 0 96px; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; background: #fff; display: block; }
.sc-cart-row__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-cart-row__info { padding-top: 4px; min-width: 0; }
.sc-cart-row__title { font-size: 15px; font-weight: 500; color: var(--color-text); text-decoration: none; }
.sc-cart-row__title:hover { text-decoration: underline; }
.sc-cart-row__variant { font-size: 13px; color: var(--color-muted); margin: 4px 0 0; }
.sc-cart-row__unit-price { font-size: 14px; color: var(--color-text); margin: 8px 0 0; font-weight: 500; }
.sc-cart-row__qty { padding-right: 16px; }
.sc-cart-row__total { text-align: right; font-size: 14px; }
.sc-cart-row__total strong { font-weight: 600; }
.sc-cart-row__remove { display: inline-block; margin-top: 10px; background: none; border: none; padding: 0; color: var(--color-muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
.sc-cart-row__remove:hover { color: var(--color-danger); }

.sc-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: 6px; overflow: hidden; background: #fff; }
.sc-qty-stepper button { width: 36px; height: 38px; border: none; background: #fff; cursor: pointer; font-size: 18px; line-height: 1; color: var(--color-text); }
.sc-qty-stepper button:hover { background: #f3f4f6; }
.sc-qty-stepper input { width: 48px; height: 38px; text-align: center; border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); font-size: 14px; font-weight: 500; -moz-appearance: textfield; }
.sc-qty-stepper input::-webkit-outer-spin-button, .sc-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sc-cart-page__footer { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
@media (min-width: 800px) { .sc-cart-page__footer { grid-template-columns: 1fr 380px; gap: 64px; align-items: start; } }
.sc-cart-page__order-note label { display: block; font-size: 13px; color: var(--color-text); margin-bottom: 8px; }
.sc-cart-page__order-note textarea { width: 100%; padding: 12px; border: 1px solid var(--color-border-strong); border-radius: 6px; font-size: 14px; font-family: inherit; resize: vertical; }
.sc-cart-page__order-note textarea:focus { outline: none; border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(255,107,0,.15); }

.sc-cart-page__subtotal { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); margin-bottom: 12px; font-size: 16px; }
.sc-cart-page__subtotal strong { font-size: 24px; font-weight: 600; }
.sc-cart-page__subtotal small { font-size: 12px; color: var(--color-muted); margin-left: 4px; font-weight: 400; }
.sc-cart-page__taxnote { font-size: 12px; color: var(--color-muted); margin: 12px 0 16px; }
.sc-cart-page__taxnote a { color: var(--color-brand); text-decoration: underline; }
.sc-cart-page__line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.sc-cart-page__line strong { font-weight: 600; }
.sc-cart-page__discount { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.sc-cart-page__discount-row { display: flex; gap: 8px; }
.sc-cart-page__discount-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--color-border-strong); border-radius: 6px; font-size: 14px; }
.sc-cart-page__coupon { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--color-border-strong); border-radius: 6px; font-size: 13px; background: #f9faf7; }
.sc-cart-page__coupon-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; color: var(--color-text); }
.sc-cart-page__coupon-label { color: var(--color-muted); flex: 1; }
.sc-cart-page__coupon-remove { background: transparent; border: none; color: var(--color-muted); font-size: 12px; cursor: pointer; padding: 0 4px; text-decoration: underline; }
.sc-cart-page__coupon-remove:hover { color: #b91c1c; }
.sc-cart-page__coupon-error { color: #b91c1c; font-size: 12px; margin: 0; }

.sc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 6px; border: 1px solid transparent; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s, opacity .15s; }
.sc-btn--primary { background: var(--color-text); color: #fff; }
.sc-btn--primary:hover { background: #000; color: #fff; }
.sc-btn--full { width: 100%; }

/* ==========================================================================
   Checkout result — Shopify-style with Google static map (legacy parity).
   ========================================================================== */
.order-confirmation-map {
  margin: 1.5rem 0; border-radius: var(--radius-md, 6px);
  overflow: hidden; border: 1px solid var(--color-border, #e5e7eb);
  background: #f3f4f6;
}
.order-confirmation-map #map { width: 100%; height: 280px; }
.order-confirmation-map #map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.customer-information-wrapper {
  margin-top: 1.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #e5e7eb);
}
.customer-information-container {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
@media (max-width: 640px) {
  .customer-information-container { grid-template-columns: 1fr; }
}
.customer-information-container > div { color: var(--color-text); font-size: 14px; }
.customer-information-container strong { display: block; margin-bottom: .25rem; }
.customer-information-container p { margin: 0 0 1rem; line-height: 1.5; color: var(--color-muted, #4b5563); }
.payment-confirmation { margin: 1.5rem 0; padding: 1rem; border: 1px solid var(--color-border, #e5e7eb); border-radius: var(--radius-md, 6px); background: #fafafa; }
.payment-confirmation h2 { margin: 0 0 .5rem; font-size: 1rem; }
.payment-confirmation__body { font-size: 14px; color: var(--color-muted, #4b5563); }

/* Thank-you (checkout result) left column — stacked cards beside the grey
   order-summary rail. Order items + totals live in the rail (see
   checkout-order-summary.liquid). */
.thank-you { display: flex; flex-direction: column; gap: 16px; }
.thank-you__head { display: flex; flex-direction: column; gap: 2px; }
.thank-you__order-code { margin: 0; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.thank-you__title { margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
.thank-you > .order-summary,
.thank-you > .customer-information-wrapper { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 20px; margin: 0; }
.thank-you > .order-confirmation-map { margin: 0; }
.thank-you > .payment-confirmation { margin: 0; }
.thank-you__continue { align-self: flex-start; }

/* PR2 — "card saved for next time" confirmation banner on /checkout/thank_you. */
.thank-you__card-saved {
  margin-top: .75rem; padding: .75rem 1rem;
  background: #ecfdf5; color: #065f46;
  border: 1px solid #a7f3d0; border-radius: var(--radius-md, 6px);
  font-size: 14px;
}
.thank-you__card-saved a { color: #047857; text-decoration: underline; }

/* PR4 — /account/cards page. */
.account-page { max-width: 720px; padding: 1.5rem 1rem 3rem; }
.account-page__header { margin-bottom: 1.25rem; }
.account-page__header h1 { margin: 0 0 .25rem; font-size: 1.4rem; font-weight: 600; }
.account-page__sub { margin: 0; color: var(--color-muted, #4b5563); font-size: 14px; }
.account-page__flash {
  margin-bottom: 1rem; padding: .75rem 1rem;
  border-radius: var(--radius-md, 6px); font-size: 14px;
}
.account-page__flash--ok    { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.account-page__flash--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.account-cards__empty {
  border: 1px dashed var(--color-border, #d1d5db); border-radius: var(--radius-md, 6px);
  padding: 1.5rem; color: var(--color-muted, #4b5563); font-size: 14px;
}
.account-cards__empty p { margin: 0 0 .5rem; }
.account-cards__list { list-style: none; padding: 0; margin: 0; }
.account-cards__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem; border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 6px); margin-bottom: .5rem;
  background: #fff;
}
.account-cards__main { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.account-cards__label { font-weight: 600; }
.account-cards__gateway { color: var(--color-muted, #6b7280); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.account-cards__name    { color: var(--color-muted, #6b7280); font-size: 13px; }
.account-cards__name--muted { color: var(--color-muted, #6b7280); font-size: 12px; font-style: italic; }
/* Inline "Change billing currency" picker on the subscriptions list.
   The form lays the label above a compact select so the row stays
   compact even when the cancel button is alongside. */
.account-cards__actions--currency { flex-direction: column; align-items: flex-end; gap: 2px; }
.account-cards__field { display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--color-muted, #6b7280); }
.account-cards__field-label { text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px; }
.account-cards__select { padding: 4px 8px; border: 1px solid var(--color-border, #e5e7eb); border-radius: 4px; font-size: 12px; background: #fff; font-family: inherit; }
.account-cards__tag {
  display: inline-block; padding: .15rem .4rem; border-radius: 999px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.account-cards__tag--default { background: #d1fae5; color: #065f46; }
.account-cards__actions { display: flex; gap: .5rem; flex-shrink: 0; }
.account-cards__action  { margin: 0; }
.account-cards__btn {
  border: 1px solid var(--color-border, #d1d5db); background: #fff;
  padding: .35rem .75rem; border-radius: var(--radius-md, 6px);
  font-size: 13px; cursor: pointer;
}
.account-cards__btn--secondary:hover { background: #f9fafb; }
.account-cards__btn--danger { color: #b91c1c; border-color: #fecaca; }
.account-cards__btn--danger:hover { background: #fef2f2; }
.account-cards__cta { margin-top: 1.5rem; }

/* /pages/testimonials — paginated testimonials list. */
.testimonials-page { max-width: 1100px; padding: 1.5rem 1rem 3rem; }
.testimonials-page__head { margin-bottom: 1.5rem; text-align: center; }
.testimonials-page__title { margin: 0 0 .5rem; font-size: clamp(24px, 3vw, 36px); font-weight: 700; }
.testimonials-page__lede { margin: 0; color: var(--color-muted, #4b5563); font-size: 15px; }
.testimonials-page__lede strong { color: var(--color-text, #111827); }
.testimonials-page__empty { text-align: center; color: var(--color-muted, #6b7280); padding: 3rem 0; font-size: 15px; }
.testimonials-page__grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.testimonial-card {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  background: #fff;
}
.testimonial-card__head { display: flex; align-items: center; gap: .6rem; }
.testimonial-card__avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
/* Stack name above location with a small gap so they don't run together. */
.testimonial-card__head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.testimonial-card__author { font-weight: 600; font-size: 14px; color: var(--color-text, #111827); }
.testimonial-card__location { color: var(--color-muted, #6b7280); font-size: 12px; }
.testimonial-card__rating { margin: 0; color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
.testimonial-card__body { margin: 0; color: var(--color-text, #1f2937); font-size: 14px; line-height: 1.55; }
.testimonial-card__date { margin: .25rem 0 0; color: var(--color-muted, #9ca3af); font-size: 11px; }
.testimonials-page__pagination {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 2rem;
}
.testimonials-page__pagination .pagination__info { color: var(--color-muted, #6b7280); font-size: 13px; }
/* "Write a testimonial" form sits in its own soft-tinted, rounded card so it
   reads as a distinct action area below the testimonials. */
.testimonials-page__submit {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--color-surface-soft, #f8fafc);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 10px);
}
.testimonials-page__submit > h2 { margin-top: 0; }

/* Customer reviews pagination footer — fed by `reviews_pagination`
 * exposed by the storefront route handler. Reviews are capped at 10
 * per page; the `?reviews_page=N` query param drives the slice. */
.product-reviews__pager {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  background: var(--color-surface-soft, #f8fafc);
  border-radius: var(--radius-md, 6px);
  font-size: 14px;
  color: var(--color-muted, #6b7280);
}
.product-reviews__pager-links { display: inline-flex; align-items: center; gap: 1rem; }
.product-reviews__pager-current { font-size: 13px; color: var(--color-muted, #6b7280); }
.product-reviews__pager a {
  color: var(--color-brand, #4f46e5);
  font-size: 18px;
  text-decoration: none;
  line-height: 1;
}
.product-reviews__pager a:hover { color: var(--color-brand-dark, #3730a3); }

/* ─────────────────────────────────────────────────────────────────────
 * Recommendation carousels — rendered by snippets/product-carousel.liquid
 * for cross-sells / related / up-sells (and the canonical
 * "recommendations" band). Eight products per band, four visible at
 * once on wide viewports, scrolled by JS in groups of four; mobile
 * uses native scroll-snap so swiping just works.
 * ───────────────────────────────────────────────────────────────────── */
.product-carousel { margin: 2rem 0; }
.product-carousel__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 0.75rem;
}
.product-carousel__controls { display: inline-flex; gap: 0.25rem; }
.product-carousel__nav {
  width: 2rem; height: 2rem; border-radius: 999px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: #fff; color: var(--color-fg, #111827);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.product-carousel__nav:hover { background: var(--color-surface-soft, #f8fafc); border-color: var(--color-fg, #111827); }
.product-carousel__nav[hidden] { display: none; }
.product-carousel__rail.product-grid--carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 1rem) / 4);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}
.product-carousel__rail.product-grid--carousel::-webkit-scrollbar { display: none; }
.product-carousel__slide { scroll-snap-align: start; list-style: none; }
@media (max-width: 768px) {
  .product-carousel__rail.product-grid--carousel { grid-auto-columns: 70%; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Bought-together bundle band — single best partner + "Buy both for $X"
 * one-click CTA. Posts to /cart/add-bundle which adds both items
 * atomically.
 * ───────────────────────────────────────────────────────────────────── */
.product-bought-together {
  margin: 2rem 0;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-soft, #f8fafc);
  padding: 1.25rem;
}
.product-bought-together__header h2 {
  font-size: 1.125rem; margin: 0 0 1rem;
}
.product-bought-together__body {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.5rem;
}
.product-bought-together__items {
  display: flex; align-items: center; gap: 1rem; flex: 1 1 auto;
}
.product-bought-together__item {
  display: flex; align-items: center; gap: 0.75rem;
  min-width: 0;
}
.product-bought-together__item img {
  width: 64px; height: 64px; border-radius: var(--radius-sm, 6px);
  object-fit: cover; border: 1px solid var(--color-border, #e5e7eb);
}
.product-bought-together__caption {
  display: flex; flex-direction: column; min-width: 0;
}
.product-bought-together__name {
  font-weight: 600; font-size: 0.875rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 14rem;
}
.product-bought-together__price {
  font-size: 0.8125rem; color: var(--color-muted, #6b7280);
}
.product-bought-together__plus {
  font-size: 1.5rem; color: var(--color-muted, #6b7280); font-weight: 300;
}
.product-bought-together__partner-link {
  display: flex; align-items: center; gap: 0.75rem;
  color: inherit; text-decoration: none;
}
.product-bought-together__partner-link:hover .product-bought-together__name { text-decoration: underline; }
.product-bought-together__cta {
  display: flex; align-items: center; gap: 1rem;
  flex: 0 0 auto;
}
.product-bought-together__total {
  display: flex; flex-direction: column; align-items: flex-end;
}
.product-bought-together__total-label {
  font-size: 0.75rem; color: var(--color-muted, #6b7280);
}
.product-bought-together__total-value {
  font-size: 1.25rem; font-weight: 700;
}
.product-bought-together__submit { white-space: nowrap; }
@media (max-width: 640px) {
  .product-bought-together__body { flex-direction: column; align-items: stretch; }
  .product-bought-together__cta { justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   Bought-together purchase-options modal. Opened by the inline "Add both"
   button (assets/bundle-bought-together.js) when either bundled product has
   Schedule & Save, so the customer can pick a cadence (or one-time) per
   product before the bundle is added.
   -------------------------------------------------------------------------- */
.bt-modal {
  width: 92%;
  max-width: 560px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md, 10px);
  background: var(--color-bg, #fff);
  color: var(--color-text, #1a1a1a);
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 38px rgba(15, 23, 42, 0.18);
}
.bt-modal::backdrop { background: rgba(15, 23, 42, 0.5); }
.bt-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 14px 18px;
  background: var(--color-canvas, #f7f7f9);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 10px) var(--radius-md, 10px) 0 0;
}
.bt-modal__head h2 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.3; }
.bt-modal__close {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-pill, 999px);
  background: transparent; color: var(--color-muted, #6b7280);
  cursor: pointer; flex-shrink: 0;
}
.bt-modal__close:hover, .bt-modal__close:focus-visible {
  background: var(--color-bg, #fff); color: var(--color-text, #1a1a1a); outline: none;
}
.bt-modal__form { padding: 16px 18px 18px; }
.bt-modal__row { margin-bottom: 16px; }
.bt-modal__row:last-of-type { margin-bottom: 0; }
.bt-modal__row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.75rem; margin-bottom: 8px;
}
.bt-modal__row-title { font-size: 14px; font-weight: 600; flex: 1 1 auto; }
.bt-modal__row-price { font-size: 14px; font-weight: 700; flex-shrink: 0; }
.bt-modal__row-body {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-canvas, #f7f7f9);
  border-radius: var(--radius-sm, 6px);
}
.bt-modal__row-img {
  width: 72px; height: 72px; object-fit: contain;
  background: var(--color-bg, #fff);
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--color-border, #e5e7eb);
}
.bt-modal__ss { border: 0; padding: 0; margin: 0; min-width: 0; }
.bt-modal__ss legend { font-size: 13px; font-weight: 600; padding: 0; margin: 0 0 4px; }
.bt-modal__opt {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 2px 0;
  font-size: 13px; line-height: 1.3;
  color: var(--color-text, #1a1a1a); cursor: pointer;
}
.bt-modal__opt > input { margin: 0; accent-color: var(--color-brand, #ff6b00); }
/* Product with no Schedule & Save — a plain "one-time purchase" line so the
   row never renders as an empty card. */
.bt-modal__onetime { margin: 0; align-self: center; font-size: 13px; font-weight: 500; }
.bt-modal__actions { margin-top: 18px; display: flex; justify-content: center; }
.bt-modal__btn { min-width: 220px; }
@media (max-width: 540px) {
  .bt-modal__row-body { grid-template-columns: 56px 1fr; padding: 8px 10px; }
  .bt-modal__row-img { width: 56px; height: 56px; }
  .bt-modal__btn { width: 100%; min-width: 0; }
}

/* ==========================================================================
   /account/* shell — sidebar + main column. Used by every customer-facing
   account page (dashboard, details, orders, subscriptions, cards, addresses).
   The sidebar lives in default-theme/snippets/account-shell.liquid.
   ========================================================================== */
.account-shell {
  /* Match the rest of petbucket.com.au — full-width container constrained
     by the same `--container` (1180px) variable used by the header,
     sub-nav and footer. The header / footer / utility-bar all stay at
     100% viewport width above and below; only the inner content here
     is centred. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.5rem 16px 3rem;
  max-width: var(--container, 1180px);
  margin: 0 auto;
  /* Belt-and-braces against rogue inner overflow that would force the
     viewport wider than the device and trigger mobile zoom-out. */
  min-width: 0;
}
@media (min-width: 720px) {
  .account-shell {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.5rem;
  }
}

.account-shell__sidebar {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 1.25rem 1rem;
  align-self: start;
}
@media (min-width: 720px) {
  .account-shell__sidebar {
    position: sticky;
    top: 1rem;
  }
}
.account-shell__sidebar-head { margin-bottom: 1rem; }
.account-shell__sidebar-head h2 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-muted, #6b7280);
}
.account-shell__greeting {
  margin: 0.25rem 0 0; font-size: 16px; font-weight: 600; color: var(--color-text, #111827);
}
.account-shell__nav ul { list-style: none; margin: 0; padding: 0; }
.account-shell__nav li { margin: 0; }
.account-shell__nav a {
  display: block;
  padding: 0.55rem 0.75rem;
  margin: 0.15rem -0.25rem;
  border-radius: 6px;
  color: var(--color-text, #1f2937);
  text-decoration: none;
  font-size: 14px;
}
.account-shell__nav a:hover { background: #f3f4f6; }
.account-shell__nav a.is-active {
  background: var(--color-brand, #ff6b00);
  color: #fff;
  font-weight: 600;
}
.account-shell__credit {
  margin-top: 1rem; padding: 0.75rem 0.85rem;
  background: #ecfdf5; border: 1px solid #a7f3d0;
  border-radius: 6px;
}
.account-shell__credit-label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: #065f46;
}
.account-shell__credit-amount { display: block; font-size: 18px; color: #065f46; }
.account-shell__nav-logout { margin-top: 0.4rem; }
.account-shell__nav-logout form { margin: 0; padding: 0; }
.account-shell__logout-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0.55rem 0.75rem;
  margin: 0.15rem -0.25rem;
  border-radius: 6px;
  color: #b91c1c;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}
.account-shell__logout-link:hover { background: #fef2f2; color: #991b1b; }

.account-shell__main {
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 1.5rem;
  min-width: 0;
  /* Long product titles, URLs in attribution lines, etc. should wrap
     instead of pushing the page wider than the viewport. */
  overflow-wrap: anywhere;
}
.account-shell__page-head {
  display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.account-shell__page-head h1 { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--color-text, #111827); }
.account-shell__page-sub { margin: 0.35rem 0 0; color: var(--color-muted, #6b7280); font-size: 14px; max-width: 560px; }
.account-shell__counter {
  display: inline-flex; align-items: baseline; gap: 0.25rem;
  background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe;
  border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 12px; font-weight: 600;
}
.account-shell__counter strong { font-size: 14px; }

.account-shell__flash {
  margin-bottom: 1rem; padding: 0.7rem 0.9rem;
  border-radius: 6px; font-size: 13px;
}
.account-shell__flash--ok    { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.account-shell__flash--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Empty-state panels — used by every account page */
.account-empty {
  border: 1px dashed var(--color-border, #d1d5db);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--color-muted, #6b7280);
}
.account-empty h2 { margin: 0 0 0.5rem; font-size: 16px; color: var(--color-text, #111827); }
.account-empty p  { margin: 0 0 1rem; font-size: 14px; }

/* Buttons used inside the account shell */
.account-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.85rem; border-radius: 6px;
  border: 1px solid var(--color-border, #d1d5db);
  background: #fff; color: var(--color-text, #1f2937);
  font-size: 13px; font-weight: 500; cursor: pointer;
  text-decoration: none; line-height: 1;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.account-btn:hover { background: #f9fafb; border-color: #9ca3af; }
.account-btn--primary {
  background: var(--color-brand, #ff6b00); border-color: var(--color-brand, #ff6b00);
  color: #fff;
}
.account-btn--primary:hover { background: var(--color-brand-dark, #e55c00); border-color: var(--color-brand-dark, #e55c00); color: #fff; }
.account-btn--ghost { background: #f9fafb; }
.account-btn--ghost:hover { background: #f3f4f6; }
.account-btn--danger-link {
  border-color: transparent; background: transparent; color: #b91c1c;
}
.account-btn--danger-link:hover { background: #fef2f2; color: #991b1b; border-color: transparent; }

/* Dashboard tiles */
.account-tiles {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
}
@media (min-width: 720px) { .account-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .account-tiles { grid-template-columns: repeat(3, 1fr); } }
.account-tile {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.25rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: var(--color-text, #1f2937);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.account-tile:hover {
  border-color: var(--color-brand, #ff6b00);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}
.account-tile__count { font-size: 28px; font-weight: 700; line-height: 1; color: var(--color-text, #111827); }
.account-tile__label { font-size: 13px; font-weight: 600; color: var(--color-muted, #6b7280); text-transform: uppercase; letter-spacing: 0.04em; }
.account-tile__hint  { font-size: 12px; color: var(--color-muted, #9ca3af); }
.account-tile--credit { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.account-tile--credit .account-tile__count { color: #065f46; }
.account-tile--credit .account-tile__label { color: #047857; }
.account-tile--credit .account-tile__hint  { color: #047857; }
.account-tile--loyalty { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.account-tile--loyalty .account-tile__count { color: #1d4ed8; }
.account-tile--loyalty .account-tile__label { color: #1e40af; }
.account-tile--loyalty .account-tile__hint  { color: #1d4ed8; }

/* Generic card-row layout used by /account/cards + /account/addresses */
.card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.card-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem; align-items: center;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
}
.card-row--default { border-color: var(--color-brand, #ff6b00); background: #fff7f0; }
.card-row__icon { font-size: 22px; line-height: 1; }
.card-row__body { min-width: 0; }
.card-row__label { display: block; font-weight: 600; font-size: 14px; }
.card-row__tag {
  display: inline-block; margin-left: 0.4rem;
  background: #d1fae5; color: #065f46;
  padding: 0.1rem 0.45rem; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  vertical-align: middle;
}
.card-row__meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  font-size: 12px; color: var(--color-muted, #6b7280);
  margin-top: 0.2rem;
}
.card-row__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Subscription cards — /account/subscriptions */
.sub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.sub-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  background: #fff;
}
.sub-card--cancelled { opacity: 0.65; }
.sub-card__thumb {
  width: 84px; height: 84px;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f4f6;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sub-card__thumb img { width: 100%; height: 100%; object-fit: contain; }
.sub-card__thumb-placeholder { font-size: 32px; opacity: 0.45; }

.sub-card__body { min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sub-card__top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sub-card__title {
  margin: 0; font-size: 15px; font-weight: 700; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sub-card__title a { color: var(--color-text, #111827); text-decoration: none; }
.sub-card__title a:hover { text-decoration: underline; }
.sub-card__status {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 999px;
}
.sub-card__status--active    { background: #d1fae5; color: #065f46; }
.sub-card__status--paused    { background: #fef9c3; color: #854d0e; }
.sub-card__status--cancelled { background: #fee2e2; color: #991b1b; }

.sub-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 0;
}
.sub-card__meta dt {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-muted, #9ca3af);
}
.sub-card__meta dd { margin: 0.15rem 0 0; font-size: 14px; font-weight: 500; }
@media (max-width: 600px) { .sub-card__meta { grid-template-columns: 1fr; } }

.sub-card__actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  align-items: center;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--color-border, #e5e7eb);
}
.sub-card__action-group {
  display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; margin: 0;
}
.sub-card__action-label {
  font-size: 12px; font-weight: 600; color: var(--color-muted, #6b7280);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-right: 0.25rem;
}
.sub-card__reschedule { margin: 0; }
.sub-card__reschedule summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  cursor: pointer;
}
.sub-card__reschedule summary::-webkit-details-marker { display: none; }
.sub-card__reschedule[open] summary { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }
.sub-card__date-form {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end;
  margin-top: 0.6rem; padding: 0.6rem;
  background: #f9fafb; border: 1px solid var(--color-border, #e5e7eb); border-radius: 6px;
}
.sub-card__date-form label {
  display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 160px;
  min-width: 0;
  font-size: 12px; color: var(--color-muted, #6b7280);
}
.sub-card__date-form input[type="date"] {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px; font-size: 14px;
  width: 100%; min-width: 0;
}
.sub-card__cancel { margin-left: auto; }
@media (max-width: 600px) {
  .sub-card { grid-template-columns: 1fr; }
  .sub-card__cancel { margin-left: 0; }
}

/* ==========================================================================
   /account/login + /account/register — direct port of the legacy
   Views/Member/SignIn.cshtml + SignUp.cshtml two-column layout. New
   customer pitch on the left, returning-customer form on the right;
   the register page reuses the same card style in a single column.
   ========================================================================== */
.pb-auth {
  max-width: var(--container, 1300px);
  margin: 0 auto;
  padding: 1.5rem 16px 3rem;
}
.pb-auth__header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.pb-auth__header h1 {
  margin: 0; font-size: 1.6rem; font-weight: 700;
  color: var(--pb-text-dark, #1a1a1a);
}
.pb-auth__header p {
  margin: 0.4rem 0 0; color: var(--pb-text, #606060); font-size: 14px;
}

.pb-auth__grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  max-width: 880px; margin: 0 auto;
}
.pb-auth__grid--single { max-width: 480px; }
@media (min-width: 720px) {
  .pb-auth__grid:not(.pb-auth__grid--single) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pb-auth__card {
  background: #fff;
  border: 1px solid var(--pb-hairline, #e5e7eb);
  border-radius: 8px;
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.85rem;
}
.pb-auth__card-title {
  margin: 0; font-size: 1.05rem; font-weight: 700;
  color: var(--pb-text-dark, #1a1a1a);
}
.pb-auth__card-sub {
  margin: 0; color: var(--pb-text, #606060); font-size: 14px; line-height: 1.5;
}
.pb-auth__card-foot {
  margin: 0.25rem 0 0; color: var(--pb-text, #606060); font-size: 13px;
}
.pb-auth__card-foot a { color: var(--pb-blue, #567BDA); text-decoration: none; }
.pb-auth__card-foot a:hover { text-decoration: underline; }
.pb-auth__card-foot--actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pb-auth__error {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  padding: 0.6rem 0.75rem; border-radius: 6px; font-size: 13px;
}
.pb-auth__error a { color: inherit; text-decoration: underline; font-weight: 600; }

.pb-auth__form { display: flex; flex-direction: column; gap: 0.85rem; margin: 0; }
.pb-auth__form--register { gap: 0.95rem; }

.pb-auth__field { display: flex; flex-direction: column; gap: 0.3rem; }
.pb-auth__label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--pb-text-dark, #1a1a1a); text-transform: none;
}
.pb-auth__label em { color: var(--pb-danger, #c0392b); font-style: normal; }
.pb-auth__field input[type="email"],
.pb-auth__field input[type="text"],
.pb-auth__field input[type="password"] {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--pb-border, #d1d5db);
  border-radius: 6px;
  font-size: 14px; line-height: 1.4;
  background: #fff;
  width: 100%; min-width: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.pb-auth__field input:focus {
  outline: none;
  border-color: var(--pb-blue, #567BDA);
  box-shadow: 0 0 0 3px rgba(86, 123, 218, 0.18);
}
.pb-auth__hint { font-size: 12px; color: var(--pb-text, #6b7280); }

.pb-auth__row-fields {
  display: grid; gap: 0.85rem;
  grid-template-columns: 1fr;
}
@media (min-width: 480px) { .pb-auth__row-fields { grid-template-columns: 1fr 1fr; } }

.pb-auth__row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
}
.pb-auth__remember {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--pb-text-dark, #1a1a1a); cursor: pointer;
}
.pb-auth__forgot {
  font-size: 13px; color: var(--pb-blue, #567BDA); text-decoration: none;
}
.pb-auth__forgot:hover { text-decoration: underline; }

.pb-auth__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.65rem 1rem; border: 1px solid transparent;
  border-radius: 6px; font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: background 120ms ease, border-color 120ms ease;
}
.pb-auth__btn--primary {
  background: var(--pb-blue, #567BDA); border-color: var(--pb-blue, #567BDA);
  color: #fff;
}
.pb-auth__btn--primary:hover {
  background: var(--pb-blue-dark, #4368c2);
  border-color: var(--pb-blue-dark, #4368c2);
  color: #fff;
}
.pb-auth__btn--secondary {
  background: #fff; border-color: var(--pb-border, #d1d5db);
  color: var(--pb-text-dark, #1a1a1a);
}
.pb-auth__btn--secondary:hover {
  background: #f9fafb; border-color: #9ca3af;
}
.pb-auth__form--secondary { margin-top: 0.6rem; gap: 0; }
.pb-auth__inline-form {
  display: inline; margin: 0; padding: 0;
}
.pb-auth__link-btn {
  background: none; border: 0; padding: 0;
  color: var(--pb-blue, #567BDA);
  font: inherit; cursor: pointer; text-decoration: underline;
}
.pb-auth__link-btn:hover { color: var(--pb-blue-dark, #4368c2); }
.pb-auth__sub {
  margin: 0.4rem 0 0; color: var(--pb-text, #606060); font-size: 14px; line-height: 1.5;
}
.pb-auth__eyebrow {
  margin: 0 0 0.45rem;
  color: var(--pb-blue, #567BDA);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pb-auth__status {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--pb-hairline, #e5e7eb);
  border-radius: 6px;
  background: var(--pb-canvas, #fafafa);
}
.pb-auth__email-pill {
  color: var(--pb-text-dark, #1a1a1a);
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}
.pb-auth__alt {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pb-auth__link-row {
  margin: 0;
  color: var(--pb-text, #606060);
  font-size: 13px;
}
.pb-auth__link-row a {
  color: var(--pb-blue, #567BDA);
  text-decoration: none;
}
.pb-auth__link-row a:hover { text-decoration: underline; }

.pb-search-page {
  max-width: var(--container, 1300px);
  margin: 0 auto;
  padding: 1.5rem 16px 3rem;
}
.pb-search-page__hero {
  background: #fff;
  border: 1px solid var(--pb-hairline);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
}
.pb-search-page__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--pb-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pb-search-page__sub,
.pb-search-page__count {
  color: var(--pb-text);
  font-size: 14px;
}
.pb-search-page__form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.pb-search-page__form input[type="search"] {
  flex: 1 1 280px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--pb-border);
  border-radius: 6px;
  font-size: 15px;
}
.pb-search-page__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pb-search-page__browse {
  color: var(--pb-blue);
  font-size: 14px;
  text-decoration: none;
}
.pb-search-page__browse:hover { text-decoration: underline; }
.pb-search-page__starter,
.pb-search-page__empty {
  background: var(--pb-canvas);
  border: 1px solid var(--pb-hairline);
  border-radius: 8px;
  padding: 24px;
}
.pb-search-page__starter h2,
.pb-search-page__empty h2 {
  margin: 0 0 10px;
  color: var(--pb-text-dark);
}
.pb-search-page__starter-links,
.pb-search-page__actions,
.pb-cart-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pb-search-page__starter-links {
  margin-top: 14px;
}
.pb-search-page__starter-links a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--pb-hairline);
  border-radius: 999px;
  background: #fff;
  color: var(--pb-text-dark);
  font-size: 14px;
  text-decoration: none;
}
.pb-search-page__starter-links a:hover {
  border-color: var(--pb-blue);
  color: var(--pb-blue);
}
.pb-search-page__actions {
  margin-top: 16px;
}
.pb-search-page__results {
  margin-top: 8px;
}
.pb-cart-empty {
  color: var(--pb-text);
}
.pb-cart-empty h2 {
  margin: 0 0 8px;
  color: var(--pb-text-dark);
  font-size: clamp(24px, 3vw, 30px);
}
.pb-cart-empty__actions {
  justify-content: center;
  margin-top: 18px;
}
.pb-cart-empty__links {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}
.pb-cart-empty__links a {
  color: var(--pb-blue);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.pb-cart-empty__links a:hover { text-decoration: underline; }

/* Header live-search dropdown — overrides for `.ashop-search-results`,
   the panel injected by `lib/search-injection.ts` into every rendered
   page. The form ships with `overflow: hidden` to keep its rounded blue
   border tight around the input + button; the dropdown needs to escape
   that, so we flip the form to `overflow: visible` and round the button
   corners directly so the original look survives. The injection script
   sets `position: relative` on the form itself, so we only need the
   overflow + button-radius patch here.

   The injected panel structure:

     <div data-ashop-search-results class="ashop-search-results">
       <ul>
         <li><a href="/products/…">
           <img src="…" />
           <div class="ashop-search-meta">
             <div class="ashop-search-title">…<mark>nex</mark>…</div>
             <div class="ashop-search-sku">…</div>
           </div>
           <div class="ashop-search-price">…</div>
         </a></li>
       </ul>
       <a class="ashop-search-viewall" href="/search?q=…">View all results…</a>
     </div>

   We win specificity over the injected `<style>` (which uses
   single-class selectors) by qualifying every rule with `.pb-search`. */
.pb-search { overflow: visible; }
.pb-search button { border-radius: 0 2px 2px 0; }

/* Tiny "searching…" spinner. The injected runtime toggles `is-loading`
   on the results panel during the fetch; we surface that as a small
   spinner pinned at the left of the input as a leading indicator —
   away from the native search-input clear button on the right. The
   input always reserves left padding so the spinner has a fixed slot
   and the text doesn't reflow when it appears. Pure CSS via `:has()`
   — no markup change needed. */
.pb-search input[type="search"] { padding-left: 32px; }
.pb-search::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 12px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid var(--pb-blue);
  border-top-color: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.pb-search:has(.ashop-search-results.is-loading)::after {
  opacity: 1;
  animation: pb-search-spin 0.7s linear infinite;
}
@keyframes pb-search-spin {
  to { transform: rotate(360deg); }
}

.pb-search .ashop-search-results {
  top: 100%;
  left: -2px;
  right: -2px;
  background: #fff;
  border: 1px solid #d8dde2;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 60;
  min-width: 0;
  color: var(--pb-text-dark);
  font-size: 14px;
}
.pb-search .ashop-search-results ul {
  padding: 0;
  margin: 0;
}
.pb-search .ashop-search-results > ul > li + li {
  border-top: 1px solid #eef0f3;
}
.pb-search .ashop-search-results > ul > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  border-radius: 0;
  color: inherit;
  text-decoration: none;
}
.pb-search .ashop-search-results > ul > li > a:hover,
.pb-search .ashop-search-results > ul > li[aria-selected="true"] > a {
  background: #f4f6fa;
}
.pb-search .ashop-search-results img,
.pb-search .ashop-search-results .ashop-search-thumb-empty {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 2px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #eef0f3;
}
.pb-search .ashop-search-results .ashop-search-thumb-empty {
  background: #f4f6fa;
}
.pb-search .ashop-search-meta {
  flex: 1 1 auto;
  min-width: 0;
}
.pb-search .ashop-search-title {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--pb-text-dark);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}
.pb-search .ashop-search-title::before { content: '"'; }
.pb-search .ashop-search-title::after  { content: '"'; }
.pb-search .ashop-search-title mark {
  background: #fff176;
  color: inherit;
  padding: 0;
}

/* Reference dropdown shows just thumbnail + quoted title — hide the
   SKU and price columns the injected script also renders. The data
   still ships in the JSON for any other theme that wants it. */
.pb-search .ashop-search-sku,
.pb-search .ashop-search-price { display: none; }

.pb-search .ashop-search-empty {
  padding: 10px 12px;
  color: var(--pb-muted);
  font-style: italic;
  text-align: center;
  font-size: 13px;
}
.pb-search .ashop-search-viewall {
  border-top: 1px solid #eef0f3;
  padding: 8px 12px;
  color: var(--pb-blue);
  font-weight: 500;
  background: #fafbfd;
  font-size: 12px;
}
.pb-search .ashop-search-viewall:hover { text-decoration: underline; }

@media (max-width: 880px) {
  .pb-search .ashop-search-results { left: 0; right: 0; }
}



/* ==========================================================================
   Product detail — title row star rating, Q&A + Reviews bands.
   Ported from the petbucket theme so every storefront on the default
   theme gets the richer review/question layout out of the box.
   ========================================================================== */
.pdp {
  --pdp-text:        var(--color-text, #1a1a1a);
  --pdp-text-dark:   var(--color-text, #1a1a1a);
  --pdp-muted:       var(--color-muted, #6b7280);
  --pdp-faint:       var(--color-faint, #9ca3af);
  --pdp-link:        var(--color-brand, #ff6b00);
  --pdp-link-dark:   var(--color-brand-dark, #e35d00);
  --pdp-star:        #f59e0b;
  --pdp-border:      var(--color-border, #e5e7eb);
  --pdp-band-title:  #f3f4f6;
  --pdp-canvas:      var(--color-canvas, #f7f7f9);
  --pdp-bar-track:   #f2f2f2;
  --pdp-bar-fill:    #f59e0b;
  --pdp-cap:         1280px;
}

.pdp-titlerow {
  margin: 4px 0 18px;
}
.pdp-titlerow__title {
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--pdp-text);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
@media (max-width: 640px) {
  .pdp-titlerow__title { font-size: 22px; }
}
.pdp-titlerow__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
}
.pdp-titlerow__rating,
.pdp-titlerow__qa {
  color: var(--pdp-link);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pdp-titlerow__rating:hover,
.pdp-titlerow__qa:hover { color: var(--pdp-link-dark); text-decoration: underline; }
.pdp-titlerow__rating .pdp-stars { color: var(--pdp-star); font-size: 18px; }
.pdp-titlerow__sep { color: var(--pdp-text); opacity: 0.5; }

/* Star widget — used in title row and individual reviews. */
.pdp-stars { color: var(--pdp-star); letter-spacing: 1px; }

/* Band wrapper used for Q&A and Reviews. */
.pdp-band {
  margin-top: 30px;
}
.pdp-band#reviews { margin-top: 40px; }
.pdp-band__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--pdp-band-title);
  border: 1px solid var(--pdp-border);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  padding: 12px 16px;
}
.pdp-band__head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  color: var(--pdp-text);
  line-height: 1.25;
}
@media (max-width: 640px) {
  .pdp-band__head h2 { font-size: 18px; }
}

.pdp-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--pdp-border);
  color: var(--pdp-text);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.pdp-pill:hover {
  background: var(--pdp-link);
  color: #fff;
  border-color: var(--pdp-link);
}

/* Shared body wrapper for description/specs bands — matches qa/reviews. */
.pdp-band__body {
  padding: 20px;
  border: 1px solid var(--pdp-border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #fff;
}
@media (max-width: 640px) {
  .pdp-band__body { padding: 16px; }
}
.pdp-band__body .rte > *:first-child { margin-top: 0; }
.pdp-band__body .rte > *:last-child { margin-bottom: 0; }
.pdp-band__body .pdp-specs__list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
}
.pdp-band__body .pdp-specs__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--pdp-border);
}
.pdp-band__body .pdp-specs__row:first-child { padding-top: 4px; }
.pdp-band__body .pdp-specs__row:last-child { border-bottom: 0; }
.pdp-band__body .pdp-specs__row dt {
  font-weight: 600;
  color: var(--pdp-text);
  font-size: 14px;
  margin: 0;
}
.pdp-band__body .pdp-specs__row dd {
  margin: 0;
  color: var(--pdp-text);
  font-size: 14px;
}
@media (max-width: 640px) {
  .pdp-band__body .pdp-specs__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- Reviews band ---- */
.pdp-reviews-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 20px;
  border: 1px solid var(--pdp-border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #fff;
}
@media (min-width: 1100px) {
  .pdp-reviews-wrapper {
    grid-template-columns: 310px 1fr;
    align-items: start;
  }
}

.pdp-reviews-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--pdp-border);
  width: 100%;
  max-width: 310px;
  box-sizing: border-box;
}
.pdp-reviews-summary__avg {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pdp-reviews-summary__avg strong {
  font-size: 36px;
  line-height: 1;
  color: var(--pdp-text);
  font-weight: 600;
}
.pdp-reviews-summary__avg .pdp-stars { font-size: 22px; line-height: 1; }
.pdp-reviews-summary__caption {
  margin: 0;
  font-size: 14px;
  color: var(--pdp-link);
}
.pdp-reviews-summary__share {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--pdp-text);
}

.pdp-reviews-summary__dist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pdp-reviews-summary__dist li {
  display: grid;
  grid-template-columns: 56px 1fr 40px;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--pdp-text);
}
.pdp-reviews-summary__star { color: var(--pdp-link); font-size: 14px; }
.pdp-reviews-summary__bar {
  height: 10px;
  background: var(--pdp-bar-track);
  border-radius: 999px;
  overflow: hidden;
  width: 100%;
}
.pdp-reviews-summary__bar > span {
  display: block;
  height: 100%;
  background: var(--pdp-bar-fill);
}
.pdp-reviews-summary__cnt { font-size: 14px; color: var(--pdp-text); text-align: right; }

.pdp-write-form { margin-top: 8px; }
.pdp-write-form > summary {
  list-style: none;
  display: block;
  width: 100%;
  background: var(--pdp-link);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 15px;
  border-radius: 4px;
  border: 1px solid var(--pdp-link);
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}
.pdp-write-form > summary::-webkit-details-marker { display: none; }
.pdp-write-form > summary:hover { background: var(--pdp-link-dark); border-color: var(--pdp-link-dark); }
.pdp-write-form form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  max-width: 540px;
}
.pdp-write-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--pdp-text); }
.pdp-write-form input,
.pdp-write-form textarea,
.pdp-write-form select {
  padding: 9px 10px;
  border: 1px solid var(--pdp-border);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
}
.pdp-write-form textarea { resize: vertical; min-height: 88px; }
.pdp-form-note { margin: 4px 0 0; font-size: 12px; color: var(--pdp-muted); }

.pdp-review-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pdp-review {
  display: grid;
  grid-template-columns: 70px 1fr;
  padding: 18px 0;
  border-bottom: 1px solid var(--pdp-border);
}
.pdp-review:first-child { padding-top: 4px; }
.pdp-review:last-child { border-bottom: 0; }
.pdp-review__avatar {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  border: 3px solid #ddd;
  background: var(--pdp-link);
  color: #fff;
  display: inline-block;
  text-align: center;
  font-weight: 500;
  font-size: 22px;
  line-height: 44px;
  text-transform: uppercase;
  box-sizing: border-box;
}
.pdp-review__body-wrap { min-width: 0; }
.pdp-review__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pdp-review__top .pdp-stars { font-size: 16px; }
.pdp-review__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--pdp-text);
}
.pdp-review__meta {
  margin: 4px 0 6px;
  font-size: 12px;
  color: var(--pdp-faint);
}
.pdp-review__meta strong { color: var(--pdp-text); font-weight: 600; }
.pdp-review__sep { margin: 0 4px; opacity: 0.6; }
.pdp-review__body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--pdp-text); }

/* ---- Q&A band ---- */
.pdp-qa-wrapper {
  padding: 20px;
  border: 1px solid var(--pdp-border);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #fff;
}
@media (max-width: 640px) {
  .pdp-qa-wrapper { padding: 16px; }
}

.pdp-qa-list { list-style: none; margin: 0; padding: 0; }
.pdp-qa-item {
  padding: 18px 0;
  border-bottom: 1px solid var(--pdp-border);
}
.pdp-qa-item:first-child { padding-top: 4px; }
.pdp-qa-item:last-child { border-bottom: 0; }
.pdp-qa-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.pdp-qa-row:first-child { margin-top: 0; }
.pdp-qa-row__label { font-weight: 700; font-size: 14px; color: var(--pdp-text); line-height: 1.5; }
.pdp-qa-row__label--answer { color: var(--pdp-link); }
.pdp-qa-row__body { font-size: 14px; line-height: 1.5; color: var(--pdp-text); }
.pdp-qa-row__text { margin: 0; }
.pdp-qa-row__by { margin: 4px 0 0; color: var(--pdp-muted); font-size: 13px; }

.pdp-qa__footer,
.pdp-reviews__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--pdp-canvas);
  font-size: 13px;
  color: var(--pdp-text);
  margin-top: 6px;
}
.pdp-qa__footer a,
.pdp-reviews__footer a {
  color: var(--pdp-link);
  text-decoration: none;
  line-height: 1;
  font-size: 18px;
}
.pdp-qa__footer a:hover,
.pdp-reviews__footer a:hover { color: var(--pdp-link-dark); }

.pdp-empty {
  padding: 28px 0;
  color: var(--pdp-muted);
  text-align: left;
}

/* ─────────────────────────────────────────────────────────────────────
 * Recently viewed — system-wide band rendered above the footer. The
 * list lives in localStorage; the carousel rail is wired via the
 * shared [data-carousel-*] hooks so theme.js's binder drives prev/next.
 *
 * Layout matches the existing product-recommendation carousels (cards
 * with thumb + title + price, no add-to-cart CTA). Arrows float on the
 * left/right edges of the viewport at the centre of the image row so
 * they overlap the card chrome the same way pb-product-carousel does.
 * ───────────────────────────────────────────────────────────────────── */
.recently-viewed {
  margin: 2.5rem auto 1.5rem;
  padding: 0 1rem;
}
.recently-viewed[hidden] { display: none; }
.recently-viewed__inner {
  max-width: var(--container-max, 1200px);
  margin: 0 auto;
}
.recently-viewed__header {
  margin-bottom: 1rem;
  text-align: center;
}
.recently-viewed__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-fg, #111827);
}
.recently-viewed__viewport {
  position: relative;
}
.recently-viewed__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 160px;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  justify-content: safe center;
}
.recently-viewed__rail::-webkit-scrollbar { display: none; }
.recently-viewed__slide {
  scroll-snap-align: start;
  list-style: none;
  width: 160px;
}
.recently-viewed__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 6px);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.recently-viewed__card:hover {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.recently-viewed__image {
  width: 100%;
  height: 160px;
  background: var(--color-surface-soft, #f8fafc);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recently-viewed__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
}
.recently-viewed__card:hover .recently-viewed__image img { transform: scale(1.04); }
.recently-viewed__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}
.recently-viewed__body {
  padding: 0.5rem 0.625rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.recently-viewed__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
  font-size: 0.8125rem;
  line-height: 1.2;
}
.recently-viewed__price {
  font-weight: 600;
  color: var(--color-fg, #111827);
}
.recently-viewed__compare {
  color: var(--color-muted, #6b7280);
  text-decoration: line-through;
  font-size: 0.75rem;
}
.recently-viewed__name {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--color-fg, #111827);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.1125em;
}
.recently-viewed__nav {
  position: absolute;
  top: 80px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: #fff;
  color: var(--color-fg, #111827);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  z-index: 2;
}
.recently-viewed__nav:hover {
  background: var(--color-fg, #111827);
  border-color: var(--color-fg, #111827);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.recently-viewed__nav:focus-visible {
  outline: 2px solid var(--color-accent, #2563eb);
  outline-offset: 2px;
}
.recently-viewed__nav[hidden] { display: none; }
.recently-viewed__nav--prev { left: -14px; }
.recently-viewed__nav--next { right: -14px; }
@media (max-width: 540px) {
  .recently-viewed__nav { width: 30px; height: 30px; }
  .recently-viewed__nav--prev { left: -8px; }
  .recently-viewed__nav--next { right: -8px; }
}
@media (max-width: 480px) {
  .recently-viewed__rail { grid-auto-columns: 140px; gap: 0.75rem; }
  .recently-viewed__slide { width: 140px; }
  .recently-viewed__image { height: 140px; }
  .recently-viewed__nav { top: 70px; }
}