/* ==========================================================================
   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: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--gap-5);
  padding-block: var(--gap-3);
}
.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: 18px;
  text-align: 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; }

/* -------- Section header -------- */
.section-header {
  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: 8px; font-weight: 700; }
.price--lg { font-size: 22px; }
.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: .9em; }
/* 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; }

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

/* -------- 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__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; }
  .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: 28px; }
.sf-step__section { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 24px; }
.sf-step__heading { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 12px; }
.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; }
.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;
}
.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; }

/* 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. */
.sf-quick-recognise {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 8px;
}
.sf-quick-recognise[hidden] { display: none; }
.sf-quick-recognise__intro {
  display: flex; gap: 0.6rem; align-items: flex-start;
}
.sf-quick-recognise__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 999px;
  background: #10b981; color: #fff;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.sf-quick-recognise__text { flex: 1; min-width: 0; }
.sf-quick-recognise__text strong {
  display: block; color: #065f46; font-size: 14px;
}
.sf-quick-recognise__sub {
  display: block; color: #047857; font-size: 13px; margin-top: 0.15rem; line-height: 1.4;
}
.sf-quick-recognise__form {
  display: flex; gap: 0.5rem; margin-top: 0.7rem;
  flex-wrap: wrap;
}
.sf-quick-recognise__code {
  flex: 1; min-width: 120px;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border, #d1d5db);
  border-radius: 6px;
  font-size: 16px; font-variant-numeric: tabular-nums;
  letter-spacing: 0.15em; text-align: center;
  background: #fff;
}
.sf-quick-recognise__verify { white-space: nowrap; }
.sf-quick-recognise__hint {
  margin: 0.55rem 0 0;
  font-size: 12px; color: #047857;
}
.sf-quick-recognise--done {
  background: #ecfdf5; border-color: #a7f3d0;
}
.sf-quick-recognise--done .sf-quick-recognise__icon {
  background: #34d399;
}

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

.sf-checkbox, .sf-radio { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-text); margin-top: 8px; cursor: pointer; }
.sf-radio { padding: 14px; border: 1px solid var(--color-border-strong); border-radius: 6px; margin-bottom: 8px; }
.sf-radio:has(input:checked) { border-color: var(--color-brand); background: rgba(255,107,0,.05); }

.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: 16px 18px; cursor: pointer; background: #fff; }
.sf-payment-method__title { font-size: 14px; font-weight: 500; }
.sf-payment-method__panel { padding: 0 18px 18px; background: #fff; }
.sf-payment-method__panel-help { font-size: 12px; color: var(--color-muted); margin: 0 0 12px; }
.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; }

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