/* ==========================================================================
   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); }
label > span { display: block; font-size: 13px; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
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); }
.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; }
.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: 600; 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; }

/* -------- 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: #fafafa; }
.sf-checkout { display: flex; flex-direction: column; min-height: 100vh; }
.sf-checkout__container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 24px; }

.sf-checkout__header {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.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); }
.sf-checkout__logo img { display: block; max-width: 240px; 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) 380px; gap: 64px; }
  /* Summary card stays at the top of the right column; it only contains
     the totals (Pay-now lives at the END of the form in the left column,
     not in this aside). Use sticky so the totals follow the customer as
     they scroll the form down. */
  .sf-checkout__summary-col { position: sticky; top: 24px; align-self: flex-start; }
}
.sf-checkout__main-col { min-width: 0; }

.sf-checkout__footer { background: #fff; border-top: 1px solid var(--color-border); padding: 16px 0; color: var(--color-muted); font-size: 12px; }

.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-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 {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
  margin: 0;
  cursor: pointer;
}
.sf-checkbox > input,
.sf-checkbox > span,
.sf-radio > input,
.sf-radio > span {
  display: inline-block;
  vertical-align: middle;
}
.sf-checkbox > span,
.sf-radio > span {
  margin-left: 10px;
  line-height: 1;
  transform: translateY(3px);
}

.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; gap: 10px; 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: 10px;
  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: 14px; 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; }

/* 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: 12px; 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 */
.sf-summary { background: #fafafa; border-left: 1px solid var(--color-border); padding: 24px; border-radius: 0; }
@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; list-style: none; }
.sf-line { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.sf-line:last-child { border-bottom: none; }
.sf-line__thumb { position: relative; width: 56px; height: 56px; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #fff; }
.sf-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sf-line__qty { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(15,23,42,.7); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.sf-line__info { flex: 1; min-width: 0; }
.sf-line__title { font-size: 13px; font-weight: 500; color: var(--color-text); margin: 0; }
.sf-line__variant { font-size: 12px; color: var(--color-muted); margin: 2px 0 0; }
.sf-line__price { font-size: 13px; font-weight: 600; color: var(--color-text); margin: 0; }

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

.sf-summary__totals { padding: 0; margin: 0 0 12px; }
.sf-summary__totals > div { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.sf-summary__totals dt { color: var(--color-text); 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: 0; font-size: 16px; }
.sf-summary__total strong { font-size: 22px; font-weight: 700; }
.sf-summary__total small { font-size: 11px; color: var(--color-muted); display: block; margin-top: 2px; }
/* 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); }

/* 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; flex-direction: column; gap: .15rem; }
.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; }

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

/* ==========================================================================
   /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: 0.4rem;
  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; }
}