/* ==========================================================================
   Storefront v2 — design tokens + components (Home, Category, Product, Search)
   Loaded after meros-theme.css/site.css; all custom classes are "kx-" prefixed
   so they never collide with Bootstrap or the existing page-specific styles
   that other storefront views (Cart, Checkout, Account) still rely on.
   ========================================================================== */

:root {
  --kx-ink: #171a2b;
  --kx-ink-soft: #52567a;
  --kx-ink-faint: #8589ab;
  --kx-canvas: #f3f4fa;
  --kx-paper: #ffffff;
  --kx-surface: #ffffff;
  --kx-line: #e4e5f1;
  --kx-line-soft: #edeef7;

  --kx-accent: #4d3fe0;
  --kx-accent-deep: #372ab0;
  --kx-accent-soft: #edebfc;
  --kx-accent-ink: #2a2066;

  --kx-gold: #b8822a;
  --kx-gold-soft: #fbf1df;
  --kx-success: #1f9d64;
  --kx-success-soft: #e7f7ef;
  --kx-danger: #d2483f;
  --kx-danger-soft: #fdeceb;

  --kx-radius-s: 8px;
  --kx-radius-m: 14px;
  --kx-radius-l: 22px;

  --kx-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --kx-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kx-font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;
}

/* ===== Breadcrumbs ===== */
.kx-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--kx-ink-faint); margin-bottom: 1.25rem; }
.kx-crumbs a { color: var(--kx-ink-faint); text-decoration: none; }
.kx-crumbs a:hover { color: var(--kx-accent); }
.kx-crumbs .sep { opacity: .45; }
.kx-crumbs .current { color: var(--kx-ink); font-weight: 600; }

/* ===== Hero (Home) ===== */
.kx-hero { background: radial-gradient(640px 320px at 86% -10%, var(--kx-accent-soft), transparent 70%), var(--kx-paper); border-bottom: 1px solid var(--kx-line); }
/* Wider than the 1240px the sections below use, and weighted toward the catalog panel: that
   buys the third tile column while leaving the headline column the width it had at 2 columns,
   so the tiles keep roughly their original size instead of shrinking by a third. */
.kx-hero-inner { max-width: 1440px; margin: 0 auto; padding: 56px 24px 48px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: center; }
.kx-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kx-font-mono); font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--kx-accent-ink); background: var(--kx-accent-soft); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.kx-hero h1 { font-family: var(--kx-font-display); font-size: 46px; line-height: 1.07; font-weight: 800; color: var(--kx-ink); margin-bottom: 18px; text-wrap: balance; }
.kx-hero h1 em { font-style: italic; color: var(--kx-accent); }
.kx-hero p.kx-lede { font-size: 16px; line-height: 1.6; color: var(--kx-ink-soft); max-width: 460px; margin-bottom: 28px; }
.kx-hero-ctas { display: flex; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; }
.kx-btn { font-family: var(--kx-font-body); font-weight: 700; font-size: 14px; border-radius: 999px; padding: 13px 24px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
.kx-btn-primary { background: var(--kx-accent); color: #fff; }
.kx-btn-primary:hover { background: var(--kx-accent-deep); color: #fff; }
.kx-btn-ghost { background: transparent; border-color: var(--kx-line); color: var(--kx-ink); }
.kx-btn-ghost:hover { border-color: var(--kx-accent); color: var(--kx-accent); }
.kx-btn-sm { padding: 10px 18px; font-size: 13px; }
.kx-trust-row { display: flex; gap: 22px; flex-wrap: wrap; }
.kx-trust-row span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--kx-ink-soft); }
.kx-trust-row svg { flex: none; }
.kx-hero-visual { position: relative; }
.kx-hero-card { background: var(--kx-surface); border: 1px solid var(--kx-line); border-radius: var(--kx-radius-l); padding: 22px; box-shadow: 0 24px 48px -24px rgba(23,22,43,.3); }
.kx-hero-card .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kx-hero-card .pill { font-family: var(--kx-font-mono); font-size: 10.5px; color: var(--kx-success); background: var(--kx-success-soft); padding: 4px 9px; border-radius: 999px; font-weight: 600; }
.kx-hero-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.kx-hero-tile { aspect-ratio: 1/1; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: var(--kx-font-display); font-weight: 800; font-size: 38px; color: #fff; position: relative; overflow: hidden; text-decoration: none; }
.kx-hero-tile .cap { position: absolute; left: 14px; bottom: 12px; right: 14px; z-index: 2; font-family: var(--kx-font-body); font-size: 12px; font-weight: 700; color: #fff; }
/* Photo-backed tiles need the same scrim treatment as the cards so the caption stays legible. */
.kx-hero-tile.has-image::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,25,.12) 35%, rgba(10,10,25,.84)); }

/* ===== Section scaffold ===== */
.kx-section { padding: 52px 24px; }
.kx-section-inner { max-width: 1240px; margin: 0 auto; }
.kx-section.kx-canvas { background: var(--kx-canvas); }
.kx-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 26px; gap: 20px; flex-wrap: wrap; }
.kx-section-head .kx-kicker { font-family: var(--kx-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--kx-gold); margin-bottom: 8px; display: block; }
.kx-section-head h2 { font-family: var(--kx-font-display); font-size: 27px; font-weight: 700; color: var(--kx-ink); margin: 0; }
.kx-section-head .kx-view-all { font-size: 13px; font-weight: 700; color: var(--kx-accent); display: flex; align-items: center; gap: 5px; white-space: nowrap; text-decoration: none; }

/* ===== Trust strip ===== */
.kx-trust-strip { background: var(--kx-ink); }
.kx-trust-strip .kx-section-inner { padding: 0; display: grid; grid-template-columns: repeat(4,1fr); }
.kx-trust-strip .cell { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-right: 1px solid rgba(255,255,255,.08); color: #e7e8f6; }
.kx-trust-strip .cell:last-child { border-right: 0; }
.kx-trust-strip .cell svg { flex: none; color: #f2b544; }
.kx-trust-strip .cell b { display: block; font-size: 13.5px; font-weight: 700; }
.kx-trust-strip .cell small { display: block; font-size: 11.5px; color: #9b9ec4; margin-top: 2px; }

/* ===== Category grid ===== */
.kx-cat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.kx-cat-grid > * { min-width: 0; }
@media (min-width: 1500px) { .kx-cat-grid { grid-template-columns: repeat(5,1fr); } }

.kx-cat-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 200px; padding: 24px 22px 22px;
  border: 1px solid var(--kx-line); border-radius: var(--kx-radius-m);
  background: var(--kx-surface); overflow: hidden; text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.kx-cat-card:hover { border-color: var(--kx-accent); box-shadow: 0 18px 34px -22px rgba(23,22,43,.45); transform: translateY(-2px); }

/* Oversized initial as a watermark, vertically centred on the right edge. */
.kx-cat-card .big-letter {
  position: absolute; right: -4px; top: 50%; transform: translateY(-54%);
  font-family: var(--kx-font-display); font-weight: 900; font-size: 120px; line-height: 1;
  color: var(--kx-accent-soft); z-index: 0; user-select: none; pointer-events: none;
  transition: color .18s ease;
}
.kx-cat-card:hover .big-letter { color: #e2defa; }

.kx-cat-card .bar { position: relative; width: 28px; height: 3px; background: var(--kx-accent); border-radius: 2px; margin-bottom: 12px; }
.kx-cat-card .name { position: relative; font-weight: 700; font-size: 15.5px; line-height: 1.35; color: var(--kx-ink); margin-bottom: 8px; }
.kx-cat-card .count { position: relative; font-family: var(--kx-font-mono); font-size: 11.5px; color: var(--kx-ink-faint); }
.kx-cat-card .count b { color: var(--kx-accent); font-weight: 600; }

.kx-cat-card .go {
  position: absolute; right: 18px; bottom: 20px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--kx-accent-soft); color: var(--kx-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; z-index: 1; transition: background .18s ease, color .18s ease, transform .18s ease;
}
.kx-cat-card:hover .go { background: var(--kx-accent); color: #fff; transform: translateX(2px); }

/* Photo-backed cards — either the category's own image or a product mosaic.
   Layering: photos (0) < scrim (1) < text/arrow (2). */
.kx-cat-card.has-image { background-size: cover; background-position: center; }
.kx-cat-card.has-image::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,10,25,.12) 30%, rgba(10,10,25,.84)); }
.kx-cat-card.has-image .name, .kx-cat-card.has-image .count { color: #fff; z-index: 2; }
.kx-cat-card.has-image .count b { color: #fff; }
.kx-cat-card.has-image .bar { background: #fff; z-index: 2; }
.kx-cat-card.has-image .go { background: rgba(255,255,255,.22); color: #fff; z-index: 2; }
.kx-cat-card.has-image:hover .go { background: #fff; color: var(--kx-ink); }

/* Product-image mosaic, used wherever a category has no image of its own (category cards and
   hero tiles). Layouts fill the tile edge-to-edge at every count: 1 full-bleed, 2 side by side,
   3 tall-left + two stacked, 4 as an even 2x2. */
.kx-mosaic { position: absolute; inset: 0; z-index: 0; display: grid; gap: 2px; }
.kx-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.kx-cat-card:hover .kx-mosaic img,
.kx-hero-tile:hover .kx-mosaic img { transform: scale(1.04); }

.kx-mosaic[data-count="1"] { grid-template-columns: 1fr; }
.kx-mosaic[data-count="2"] { grid-template-columns: 1fr 1fr; }
.kx-mosaic[data-count="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.kx-mosaic[data-count="3"] img:first-child { grid-row: span 2; }
.kx-mosaic[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* ===== Brand strip ===== */
.kx-brand-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.kx-brand-chip { display: flex; align-items: center; gap: 10px; border: 1px solid var(--kx-line); border-radius: 999px; padding: 9px 18px 9px 10px; background: var(--kx-surface); font-weight: 700; font-size: 13.5px; color: var(--kx-ink); text-decoration: none; }
.kx-brand-chip:hover { border-color: var(--kx-accent); color: var(--kx-accent); }
.kx-brand-chip .sw { width: 26px; height: 26px; border-radius: 50%; flex: none; background: linear-gradient(150deg, var(--kx-accent), var(--kx-accent-deep)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--kx-font-display); font-weight: 800; font-size: 12px; }

/* ===== Product grid / card ===== */
/* Mobile-first, and every breakpoint restates .kx-cols-3 alongside the base selector.
   Previously the column count lived on .kx-prod-grid.kx-cols-3 (two classes) while the
   responsive overrides targeted .kx-prod-grid (one class) — media queries add no
   specificity, so the 3-column rule won at every width and the grid never collapsed. */
.kx-prod-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 576px) {
  .kx-prod-grid, .kx-prod-grid.kx-cols-3 { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 768px) {
  .kx-prod-grid, .kx-prod-grid.kx-cols-3 { grid-template-columns: repeat(3,1fr); }
}
@media (min-width: 992px) {
  .kx-prod-grid { grid-template-columns: repeat(4,1fr); }
  .kx-prod-grid.kx-cols-3 { grid-template-columns: repeat(3,1fr); }
}
/* Grid items must be free to shrink below their content's min-content width. */
.kx-prod-grid > * { min-width: 0; }
.kx-prod-card { width: 100%; background: var(--kx-surface); border: 1px solid var(--kx-line); border-radius: var(--kx-radius-m); overflow: hidden; height: 100%; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow .2s ease, transform .2s ease; }
.kx-prod-card:hover { box-shadow: 0 16px 32px -20px rgba(23,22,43,.35); transform: translateY(-2px); color: inherit; }
/* display/width are explicit because this is an <a> (inline by default) carrying an aspect-ratio. */
.kx-prod-img { display: block; width: 100%; flex: none; aspect-ratio: 1/.92; position: relative; overflow: hidden; background: var(--kx-canvas); }
.kx-prod-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kx-prod-img .tag { position: absolute; top: 10px; left: 10px; font-family: var(--kx-font-mono); font-size: 10px; font-weight: 600; padding: 4px 8px; border-radius: 6px; letter-spacing: .02em; }
.kx-tag-new { background: var(--kx-accent); color: #fff; }
.kx-tag-sale { background: var(--kx-danger); color: #fff; }
.kx-tag-stock { background: rgba(255,255,255,.92); color: var(--kx-ink); }
.kx-prod-body { padding: 14px 15px 16px; flex: 1; display: flex; flex-direction: column; }
.kx-prod-vendor { font-size: 11px; color: var(--kx-ink-faint); margin-bottom: 6px; font-weight: 600; }
.kx-prod-name { font-size: 13.5px; font-weight: 600; color: var(--kx-ink); line-height: 1.4; margin-bottom: 8px; min-height: 37px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kx-prod-rating { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--kx-ink-faint); margin-bottom: 10px; }
.kx-prod-rating .stars { color: var(--kx-gold); letter-spacing: 1px; }
.kx-prod-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; }
.kx-prod-price { font-family: var(--kx-font-mono); font-weight: 600; font-size: 16px; color: var(--kx-ink); font-variant-numeric: tabular-nums; }
.kx-prod-price .was { font-family: var(--kx-font-mono); font-size: 11.5px; color: var(--kx-ink-faint); text-decoration: line-through; margin-left: 6px; }
.kx-prod-add { width: 30px; height: 30px; border-radius: 50%; background: var(--kx-accent-soft); color: var(--kx-accent); display: flex; align-items: center; justify-content: center; flex: none; border: 0; }
.kx-prod-add:hover { background: var(--kx-accent); color: #fff; }
.kx-prod-add:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Blog teaser ===== */
.kx-blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.kx-blog-card { background: var(--kx-surface); border: 1px solid var(--kx-line); border-radius: var(--kx-radius-m); overflow: hidden; text-decoration: none; color: inherit; display: block; }
.kx-blog-card:hover { color: inherit; box-shadow: 0 16px 32px -20px rgba(23,22,43,.35); }
.kx-blog-img { position: relative; aspect-ratio: 16/9; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: var(--kx-font-display); font-size: 20px; font-weight: 800; color: #fff; }
.kx-blog-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.kx-blog-card:hover .kx-blog-img img { transform: scale(1.04); }
.kx-blog-body { padding: 16px 17px 18px; }
.kx-blog-meta { display: flex; align-items: center; gap: 8px; font-family: var(--kx-font-mono); font-size: 10.5px; color: var(--kx-ink-faint); margin-bottom: 9px; }
.kx-blog-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--kx-ink-faint); }
.kx-blog-title { font-weight: 700; font-size: 15px; line-height: 1.4; color: var(--kx-ink); margin-bottom: 8px; }
.kx-blog-excerpt { font-size: 12.5px; color: var(--kx-ink-soft); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== Newsletter ===== */
.kx-newsletter { background: linear-gradient(120deg, var(--kx-accent-deep), var(--kx-accent)); color: #fff; border-radius: var(--kx-radius-l); margin: 0 24px 52px; padding: 32px 36px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.kx-newsletter h3 { font-family: var(--kx-font-display); font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.kx-newsletter p { font-size: 13.5px; color: rgba(255,255,255,.82); margin: 0; }
.kx-newsletter form { display: flex; gap: 10px; flex: 0 1 auto; max-width: 100%; min-width: 0; }
.kx-newsletter input { border: 0; border-radius: 999px; padding: 12px 18px; font: inherit; font-size: 13.5px; width: 220px; min-width: 0; }
.kx-newsletter button { background: var(--kx-ink); color: #fff; border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; flex: none; }

/* Below ~768px the card's inner width is narrower than the fixed input + button, which
   pushed Subscribe past the edge. Give the form its own full-width row and let the input
   take the remaining space instead of holding a fixed 220px. */
@media (max-width: 767.98px) {
  .kx-newsletter { margin-left: 16px; margin-right: 16px; padding: 24px 20px; gap: 18px; }
  .kx-newsletter h3 { font-size: 19px; }
  .kx-newsletter p { font-size: 12.5px; }
  .kx-newsletter form, .kx-newsletter #newsletterForm { flex: 1 1 100%; width: 100%; }
  .kx-newsletter input { flex: 1 1 auto; width: auto; }
}

/* Very narrow phones: stack the button under the field rather than squeezing both. */
@media (max-width: 420px) {
  .kx-newsletter form, .kx-newsletter #newsletterForm { flex-wrap: wrap; }
  .kx-newsletter input { flex: 1 1 100%; }
  .kx-newsletter button { width: 100%; }
}

/* ===== Category head ===== */
.kx-cat-head h1 { font-family: var(--kx-font-display); font-size: 29px; font-weight: 800; margin: 0 0 10px; color: var(--kx-ink); }
.kx-cat-head p { font-size: 13.5px; line-height: 1.65; color: var(--kx-ink-soft); max-width: 700px; margin: 0 0 8px; }
.kx-cat-head .meta { font-family: var(--kx-font-mono); font-size: 11.5px; color: var(--kx-ink-faint); }

.kx-subcat-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 0; }
.kx-subcat-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--kx-line); background: var(--kx-surface); border-radius: 999px; padding: 9px 16px; font-size: 13px; font-weight: 600; color: var(--kx-ink-soft); text-decoration: none; }
.kx-subcat-chip:hover { border-color: var(--kx-accent); color: var(--kx-accent); }
.kx-subcat-chip b { color: var(--kx-accent); font-family: var(--kx-font-mono); font-weight: 600; }
.kx-subcat-chip.active { background: var(--kx-ink); color: #fff; border-color: var(--kx-ink); }
.kx-subcat-chip.active b { color: #f2b544; }

/* ===== Filter sidebar + split layout ===== */
.kx-layout-split { display: grid; grid-template-columns: 230px 1fr; gap: 32px; align-items: start; }
.kx-filter-box { border: 1px solid var(--kx-line); border-radius: var(--kx-radius-m); background: var(--kx-surface); padding: 18px; position: sticky; top: 90px; }
.kx-filter-box .f-group { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--kx-line-soft); }
.kx-filter-box .f-group:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.kx-filter-box .f-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--kx-ink); margin-bottom: 10px; }
.kx-f-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--kx-ink-soft); margin-bottom: 8px; text-decoration: none; }
.kx-f-row:hover { color: var(--kx-accent); }
.kx-f-row.active { color: var(--kx-ink); font-weight: 700; }
.kx-f-row input { accent-color: var(--kx-accent); pointer-events: none; }
.kx-f-row .cnt { margin-left: auto; font-family: var(--kx-font-mono); font-size: 11px; color: var(--kx-ink-faint); }
.kx-filter-clear { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--kx-danger); margin-top: 6px; text-decoration: none; }

/* Sheet chrome and the trigger bar are desktop-hidden; the sidebar is just a sidebar there. */
.kx-sheet-head, .kx-sheet-apply, .kx-sheet-scrim, .kx-filter-bar { display: none; }

.kx-result-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.kx-result-bar .count { font-size: 13.5px; color: var(--kx-ink-soft); }
.kx-result-bar .count b { color: var(--kx-ink); }
.kx-sort-select { font-family: var(--kx-font-mono); font-size: 12px; border: 1px solid var(--kx-line); border-radius: 8px; padding: 7px 12px; background: var(--kx-surface); color: var(--kx-ink-soft); }

.kx-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 34px; list-style: none; padding: 0; }
.kx-pagination a, .kx-pagination span { min-width: 34px; height: 34px; padding: 0 8px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--kx-line); border-radius: 9px; font-family: var(--kx-font-mono); font-size: 12.5px; color: var(--kx-ink-soft); text-decoration: none; }
.kx-pagination a:hover { border-color: var(--kx-accent); color: var(--kx-accent); }
.kx-pagination .active span, .kx-pagination .active a { background: var(--kx-ink); color: #fff; border-color: var(--kx-ink); }
.kx-pagination .disabled span { opacity: .4; }

/* ===== Search ===== */
.kx-search-head h1 { font-family: var(--kx-font-display); font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--kx-ink); }
.kx-search-head p { font-size: 13px; color: var(--kx-ink-faint); margin: 0; }
.kx-search-head .q { color: var(--kx-accent); font-weight: 700; }
.kx-fallback-box { margin-top: 30px; border: 1px dashed var(--kx-line); border-radius: var(--kx-radius-m); padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--kx-canvas); flex-wrap: wrap; }
.kx-fallback-box p { font-size: 13px; color: var(--kx-ink-soft); margin: 0; }
.kx-fallback-box p b { color: var(--kx-ink); }

/* ===== Product detail page ===== */
.kx-pdp { display: grid; grid-template-columns: .85fr 1fr; gap: 48px; }
.kx-gallery { display: grid; grid-template-columns: 74px 1fr; gap: 14px; }
.kx-gallery .thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; }
.kx-gallery .thumb { aspect-ratio: 1/1; border-radius: 10px; border: 1.5px solid var(--kx-line); overflow: hidden; cursor: pointer; padding: 0; background: var(--kx-canvas); }
.kx-gallery .thumb img { width: 100%; height: 100%; object-fit: cover; }
.kx-gallery .thumb.active { border-color: var(--kx-accent); box-shadow: 0 0 0 2px var(--kx-accent-soft); }
.kx-gallery .main-img { aspect-ratio: 1/1; border-radius: var(--kx-radius-m); overflow: hidden; background: var(--kx-canvas); }
.kx-gallery .main-img img { width: 100%; height: 100%; object-fit: cover; }

.kx-buy-box .vendor-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--kx-accent); margin-bottom: 12px; text-decoration: none; }
.kx-buy-box h1 { font-family: var(--kx-font-display); font-size: 25px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; color: var(--kx-ink); }
.kx-rating-summary { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; color: var(--kx-ink-soft); }
.kx-rating-summary .stars { color: var(--kx-gold); letter-spacing: 2px; }
.kx-price-block { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.kx-price-block .now { font-family: var(--kx-font-mono); font-size: 30px; font-weight: 600; color: var(--kx-ink); font-variant-numeric: tabular-nums; }
.kx-price-block .was { font-family: var(--kx-font-mono); font-size: 15px; color: var(--kx-ink-faint); text-decoration: line-through; }
.kx-price-block .off { font-family: var(--kx-font-mono); font-size: 11.5px; font-weight: 700; color: var(--kx-danger); background: var(--kx-danger-soft); padding: 3px 8px; border-radius: 6px; }
.kx-stock-line { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--kx-success); margin-bottom: 22px; }
.kx-stock-line.out { color: var(--kx-danger); }
.kx-stock-line svg { flex: none; }
.kx-buy-actions { display: flex; gap: 10px; margin-bottom: 22px; align-items: center; flex-wrap: wrap; }
.kx-qty-stepper { display: flex; align-items: center; border: 1px solid var(--kx-line); border-radius: 999px; overflow: hidden; flex: none; }
.kx-qty-stepper input { width: 40px; height: 46px; border: 0; text-align: center; font-family: var(--kx-font-mono); font-size: 13px; background: transparent; -moz-appearance: textfield; }
.kx-qty-stepper input::-webkit-outer-spin-button, .kx-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kx-qty-stepper button { width: 34px; height: 46px; border: 0; background: var(--kx-canvas); font-size: 15px; cursor: pointer; color: var(--kx-ink-soft); }
.kx-vendor-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-m); padding: 14px 16px; }
.kx-vendor-card .av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, var(--kx-accent), var(--kx-accent-deep)); flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-family: var(--kx-font-display); }
.kx-vendor-card .name { font-size: 13.5px; font-weight: 700; color: var(--kx-ink); }
.kx-vendor-card .meta { font-size: 11.5px; color: var(--kx-ink-faint); }
.kx-vendor-card a.go { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--kx-accent); text-decoration: none; }

.kx-pdp-lower { margin-top: 44px; }

.kx-pdp-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--kx-line); margin-bottom: 26px; flex-wrap: wrap; }
.kx-pdp-tabs button {
  appearance: none; background: none; border: 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: 0 0 12px; cursor: pointer;
  font-family: var(--kx-font-body); font-size: 13.5px; font-weight: 700; color: var(--kx-ink-faint);
  transition: color .15s ease, border-color .15s ease;
}
.kx-pdp-tabs button:hover { color: var(--kx-ink); }
.kx-pdp-tabs button.active { color: var(--kx-ink); border-bottom-color: var(--kx-accent); }
.kx-pdp-tabs button:focus-visible { outline: 2px solid var(--kx-accent); outline-offset: 3px; }

.kx-pdp-panel[hidden] { display: none !important; }
.kx-pdp-desc { font-size: 13.5px; line-height: 1.8; color: var(--kx-ink-soft); max-width: 760px; margin: 0 0 36px; white-space: pre-line; }
.kx-pdp-empty { font-size: 13.5px; color: var(--kx-ink-faint); margin: 0 0 36px; }

/* Section heading per attribute group (Composition, Origin, …) inside the Specifications tab. */
.kx-spec-group {
  font-family: var(--kx-font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--kx-gold);
  margin: 0 0 10px; padding-top: 4px;
}
.kx-spec-group + .kx-spec-table { margin-bottom: 28px; }
.kx-spec-prose { max-width: 600px; margin-bottom: 28px; }
.kx-spec-prose h4 { font-family: var(--kx-font-body); font-size: 13px; font-weight: 700; color: var(--kx-ink); margin: 0 0 6px; }
.kx-spec-prose p { font-size: 13px; line-height: 1.75; color: var(--kx-ink-soft); margin: 0; }

.kx-spec-table { width: 100%; max-width: 600px; border-collapse: collapse; font-size: 13px; margin-bottom: 40px; }
.kx-spec-table tr { border-bottom: 1px solid var(--kx-line-soft); }
.kx-spec-table td { padding: 11px 0; }
.kx-spec-table td:first-child { color: var(--kx-ink-faint); width: 190px; font-weight: 600; }

.kx-review-summary { display: flex; gap: 40px; padding: 22px 24px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-m); margin-bottom: 8px; max-width: 640px; flex-wrap: wrap; }
.kx-review-summary .big { text-align: center; flex: none; }
.kx-review-summary .big .num { font-family: var(--kx-font-mono); font-size: 36px; font-weight: 600; color: var(--kx-ink); }
.kx-review-summary .big .stars { color: var(--kx-gold); letter-spacing: 2px; margin: 4px 0; display: block; }
.kx-review-summary .big small { font-size: 11px; color: var(--kx-ink-faint); }

.kx-review-list { max-width: 640px; margin-top: 22px; }
.kx-review-card { padding: 18px 0; border-bottom: 1px solid var(--kx-line-soft); }
.kx-review-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.kx-review-card .av { width: 28px; height: 28px; border-radius: 50%; background: var(--kx-accent-soft); color: var(--kx-accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; flex: none; }
.kx-review-card .who { font-size: 13px; font-weight: 700; color: var(--kx-ink); }
.kx-review-card .when { font-size: 11px; color: var(--kx-ink-faint); margin-left: auto; font-family: var(--kx-font-mono); }
.kx-review-card .stars { color: var(--kx-gold); font-size: 12px; letter-spacing: 1px; margin-bottom: 6px; display: block; }
.kx-review-card p { font-size: 13px; color: var(--kx-ink-soft); line-height: 1.6; margin: 0; }

/* ===== Footer ===== */
.kx-footer { background: var(--kx-ink); color: #c6c8e4; margin-top: 52px; }
.kx-foot-inner { max-width: 1240px; margin: 0 auto; padding: 48px 24px 26px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; }
.kx-foot-brand .logo { color: #fff; font-family: var(--kx-font-display); font-weight: 900; font-size: 20px; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; }
.kx-foot-brand .logo .mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(145deg, var(--kx-accent), var(--kx-accent-deep)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--kx-font-display); font-weight: 900; font-size: 15px; }
.kx-foot-brand p { font-size: 13px; line-height: 1.7; color: #9fa2c4; max-width: 280px; margin-bottom: 18px; }
.kx-nap { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; }
.kx-nap div { display: flex; gap: 9px; color: #b3b6d8; }
.kx-nap svg { flex: none; margin-top: 2px; color: #f2b544; }
.kx-nap a { color: #b3b6d8; text-decoration: none; }
.kx-nap a:hover { color: #fff; }
.kx-footer h4 { font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #8a8dba; margin-bottom: 16px; }
.kx-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kx-footer ul a { font-size: 13.5px; color: #cdcfe8; text-decoration: none; }
.kx-footer ul a:hover { color: #fff; }
.kx-foot-bottom { border-top: 1px solid rgba(255,255,255,.09); }
.kx-foot-bottom-inner { max-width: 1240px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; color: #8689af; flex-wrap: wrap; }
.kx-foot-bottom-inner .crawl-links { display: flex; gap: 16px; font-family: var(--kx-font-mono); }
.kx-foot-bottom-inner .crawl-links a { color: #a7aad2; text-decoration: none; }
.kx-foot-bottom-inner .crawl-links a:hover { color: #fff; }
.kx-pay-icons { display: flex; gap: 8px; }
.kx-pay-icons span { font-family: var(--kx-font-mono); font-size: 9.5px; border: 1px solid rgba(255,255,255,.18); color: #c6c8e4; padding: 4px 7px; border-radius: 5px; }

@media (max-width: 991.98px) {
  .kx-hero-inner, .kx-pdp, .kx-layout-split { grid-template-columns: 1fr; }
  .kx-cat-grid { grid-template-columns: repeat(3,1fr); }
  /* .kx-prod-grid columns are handled mobile-first above */
  .kx-blog-grid { grid-template-columns: 1fr; }
  .kx-foot-inner { grid-template-columns: 1fr 1fr; }
  .kx-trust-strip .kx-section-inner { grid-template-columns: 1fr 1fr; }

  /* ===== Filters become a bottom sheet =====
     Collapsing .kx-layout-split to one column would otherwise stack the whole sidebar
     above the results, so every filter has to be scrolled past to reach a product. */
  .kx-filter-bar {
    display: flex; gap: 10px; position: sticky; top: 0; z-index: 30;
    padding: 11px 0; margin-bottom: 4px;
    background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--kx-line);
  }
  .kx-filter-bar button, .kx-filter-bar .sortwrap {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--kx-line); border-radius: 10px; padding: 10px;
    font-family: var(--kx-font-body); font-size: 12.5px; font-weight: 700; color: var(--kx-ink);
    background: var(--kx-surface); cursor: pointer;
  }
  .kx-filter-bar button.has-filters { border-color: var(--kx-accent); color: var(--kx-accent); background: var(--kx-accent-soft); }
  .kx-filter-bar .cnt { font-family: var(--kx-font-mono); font-size: 9.5px; background: var(--kx-accent); color: #fff; border-radius: 999px; padding: 1px 6px; }
  .kx-filter-bar .sortwrap { padding: 0; overflow: hidden; }
  .kx-filter-bar .sortwrap select { border: 0; background: none; width: 100%; padding: 10px; font: inherit; color: inherit; }

  .kx-sheet-scrim {
    display: none; position: fixed; inset: 0; z-index: 1040;
    background: rgba(16,17,30,.45);
  }
  body.kx-filters-open .kx-sheet-scrim { display: block; }

  .kx-filter-box {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1041;
    max-height: 82vh; overflow-y: auto;
    border: 0; border-radius: 20px 20px 0 0; padding: 8px 16px 18px;
    box-shadow: 0 -14px 40px -16px rgba(16,17,30,.5);
    transform: translateY(100%); transition: transform .24s ease; visibility: hidden;
  }
  body.kx-filters-open .kx-filter-box { transform: translateY(0); visibility: visible; }

  .kx-sheet-head { display: block; position: sticky; top: 0; background: var(--kx-surface); padding-top: 4px; z-index: 1; }
  .kx-sheet-head .grab { display: block; width: 38px; height: 4px; background: var(--kx-line); border-radius: 3px; margin: 0 auto 13px; }
  .kx-sheet-head .row { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
  .kx-sheet-head h3 { font-family: var(--kx-font-body); font-size: 15px; font-weight: 700; color: var(--kx-ink); margin: 0; }
  .kx-sheet-head .close { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--kx-ink-faint); cursor: pointer; padding: 0 4px; }
  .kx-sheet-apply { display: flex; width: 100%; justify-content: center; margin-top: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .kx-filter-box { transition: none; }
}

@media (max-width: 575.98px) {
  .kx-cat-grid { grid-template-columns: repeat(2,1fr); }
  /* Three square tiles at phone width leaves no room for the category caption. */
  .kx-hero-grid { grid-template-columns: repeat(2,1fr); }
  .kx-hero h1 { font-size: 32px; }
}

/* ==========================================================================
   Header reskin — same markup/IDs as before (#cartCount, #mobileMenu,
   .menu-toggle[data-bs-toggle="offcanvas"]), new indigo/gold look on top.
   ========================================================================== */
.brand-logo { color: var(--kx-ink) !important; letter-spacing: .08em; }
.brand-logo:hover { color: var(--kx-accent) !important; }
.elegant-nav .nav-link:hover,
.elegant-nav .nav-link.active { color: var(--kx-accent) !important; }
.elegant-nav .nav-link::after { background: var(--kx-accent) !important; }
.elegant-nav .dropdown-menu { border-top-color: var(--kx-accent) !important; }
.header-auth-link:hover { color: var(--kx-accent) !important; }
.header-auth-btn { background: var(--kx-accent) !important; }
.header-auth-btn:hover { background: var(--kx-accent-deep) !important; }
.header-icon:hover { color: var(--kx-accent) !important; }
.cart-badge { background: var(--kx-accent) !important; }

.kx-nav-search { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--kx-canvas); border: 1px solid var(--kx-line); border-radius: 999px; padding: 9px 16px; min-width: 0; }
.kx-nav-search svg { flex: none; color: var(--kx-ink-faint); }
.kx-nav-search input { border: 0; background: none; outline: 0; flex: 1; min-width: 0; font-family: var(--kx-font-body); color: var(--kx-ink); font-size: 13.5px; }
.kx-nav-search input::placeholder { color: var(--kx-ink-faint); }

/* Autosuggest panel (see site.js) — anchored to the search pill it belongs to. */
.kx-nav-search { position: relative; }
.kx-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1040;
  background: var(--kx-surface); border: 1px solid var(--kx-line); border-radius: 12px;
  box-shadow: 0 18px 38px -18px rgba(23,22,43,.35); overflow: hidden auto; max-height: 300px;
}
.kx-suggest[hidden] { display: none !important; }
.kx-suggest-item {
  display: block; padding: 10px 15px; font-size: 13px; color: var(--kx-ink); text-decoration: none;
  border-bottom: 1px solid var(--kx-line-soft);
}
.kx-suggest-item:last-child { border-bottom: 0; }
.kx-suggest-item:hover, .kx-suggest-item:focus { background: var(--kx-accent-soft); color: var(--kx-accent-ink); }

/* Keep the desktop nav on one line — it sits in a flex row alongside the search bar now,
   not a fixed-width Bootstrap column, so it must never wrap. */
.kx-header-row .elegant-nav .nav { flex-wrap: nowrap; white-space: nowrap; }
.kx-header-row .elegant-nav .nav-link { padding: 0.5rem 0.9rem; font-size: 0.85rem; }
@media (min-width: 1200px) {
  .kx-header-row .elegant-nav .nav-link { padding: 0.5rem 1.1rem; font-size: 0.9rem; }
}

/* (The footer's #newsletterForm is covered by the .kx-newsletter form rules above.) */

/* ==========================================================================
   PRIMITIVES — shared by cart, checkout, account, content and legal pages.
   Added so those templates can be converted off the old Bootstrap theme
   without each one inventing its own form, panel and table styling.
   ========================================================================== */

/* --- page shell --- */
.kx-page { max-width: 1240px; margin: 0 auto; padding: 24px 24px 56px; }
.kx-page-head { margin-bottom: 22px; }
.kx-page-head h1 { font-family: var(--kx-font-display); font-size: 29px; font-weight: 800; color: var(--kx-ink); margin: 0 0 6px; }
.kx-page-head .meta { font-family: var(--kx-font-mono); font-size: 11.5px; color: var(--kx-ink-faint); }
.kx-page-head p.lead { font-size: 14px; line-height: 1.7; color: var(--kx-ink-soft); max-width: 65ch; margin: 8px 0 0; }

/* --- split: content + sticky rail --- */
.kx-split { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: start; }
.kx-split.kx-split-nav { grid-template-columns: 220px 1fr; }
.kx-rail-sticky { position: sticky; top: 90px; }

/* --- panel --- */
.kx-panel { border: 1px solid var(--kx-line); border-radius: var(--kx-radius-m); background: var(--kx-surface); padding: 18px 19px; }
.kx-panel + .kx-panel { margin-top: 16px; }
.kx-panel h2, .kx-panel h3 { font-family: var(--kx-font-body); font-size: 13.5px; font-weight: 700; color: var(--kx-ink); margin: 0 0 14px; }

/* --- forms --- */
.kx-field { margin-bottom: 14px; }
.kx-field:last-child { margin-bottom: 0; }
.kx-field label, .kx-label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--kx-ink-soft); margin-bottom: 6px; }
.kx-input, .kx-field input[type="text"], .kx-field input[type="email"], .kx-field input[type="password"],
.kx-field input[type="tel"], .kx-field input[type="number"], .kx-field select, .kx-field textarea {
  width: 100%; border: 1px solid var(--kx-line); border-radius: 10px; padding: 11px 13px;
  font-family: var(--kx-font-body); font-size: 13.5px; color: var(--kx-ink); background: var(--kx-surface);
}
.kx-input:focus, .kx-field input:focus, .kx-field select:focus, .kx-field textarea:focus {
  outline: 0; border-color: var(--kx-accent); box-shadow: 0 0 0 3px var(--kx-accent-soft);
}
.kx-field textarea { min-height: 110px; resize: vertical; }
.kx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kx-field .hint { font-size: 11.5px; color: var(--kx-ink-faint); margin-top: 5px; }
.kx-field .err, .field-validation-error, .validation-summary-errors { font-size: 11.5px; color: var(--kx-danger); margin-top: 5px; display: block; }
.kx-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--kx-ink-soft); }
.kx-check input { accent-color: var(--kx-accent); width: 16px; height: 16px; }

/* --- auth card (login, register, both password-reset pairs, confirmations) --- */
.kx-auth-wrap { background: var(--kx-canvas); min-height: 60vh; display: flex; align-items: flex-start; justify-content: center; padding: 44px 20px 60px; }
/* Several auth views still nest a Bootstrap .row/.container inside the wrap; as flex items
   those would shrink to content width, so force them to span and centre their own child. */
.kx-auth-wrap > .row, .kx-auth-wrap > .container { width: 100%; margin: 0; }
.kx-auth-wrap > .row > [class^="col-"], .kx-auth-wrap > .container > .row > [class^="col-"] { display: flex; justify-content: center; }
.kx-auth { width: 100%; max-width: 420px; background: var(--kx-surface); border: 1px solid var(--kx-line); border-radius: 16px; padding: 28px 26px; }
.kx-auth h1 { font-family: var(--kx-font-display); font-size: 24px; font-weight: 800; color: var(--kx-ink); text-align: center; margin: 0 0 6px; }
.kx-auth .sub { font-size: 12.5px; color: var(--kx-ink-soft); text-align: center; margin: 0 0 22px; }
.kx-auth .alt { text-align: center; font-size: 12.5px; color: var(--kx-ink-soft); margin-top: 16px; }
.kx-auth .alt a { color: var(--kx-accent); font-weight: 700; text-decoration: none; }
.kx-or { display: flex; align-items: center; gap: 11px; margin: 17px 0; font-family: var(--kx-font-mono); font-size: 10.5px; color: var(--kx-ink-faint); }
.kx-or::before, .kx-or::after { content: ''; flex: 1; height: 1px; background: var(--kx-line); }
.kx-btn-block { width: 100%; justify-content: center; }

/* --- line items (cart, order summaries) --- */
.kx-line { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--kx-line-soft); }
.kx-line:last-child { border-bottom: 0; }
.kx-line .thumb { width: 66px; height: 66px; border-radius: 10px; flex: none; object-fit: cover; background: var(--kx-canvas); }
.kx-line .thumb.sm { width: 42px; height: 42px; border-radius: 8px; }
.kx-line .info { flex: 1; min-width: 0; }
.kx-line .nm { font-size: 13px; font-weight: 600; color: var(--kx-ink); line-height: 1.35; margin-bottom: 3px; text-decoration: none; display: block; }
.kx-line .nm:hover { color: var(--kx-accent); }
.kx-line .vn { font-size: 10.5px; color: var(--kx-ink-faint); }
.kx-line .amt { font-family: var(--kx-font-mono); font-size: 14px; font-weight: 600; color: var(--kx-ink); text-align: right; white-space: nowrap; }
.kx-line .rm { color: var(--kx-ink-faint); font-size: 15px; text-decoration: none; padding: 4px; line-height: 1; }
.kx-line .rm:hover { color: var(--kx-danger); }

/* --- quantity stepper --- */
.kx-stepper { display: inline-flex; align-items: center; border: 1px solid var(--kx-line); border-radius: 999px; overflow: hidden; flex: none; }
.kx-stepper button { width: 32px; height: 34px; border: 0; background: var(--kx-canvas); color: var(--kx-ink-soft); font-size: 15px; cursor: pointer; line-height: 1; }
.kx-stepper button:hover { background: var(--kx-accent-soft); color: var(--kx-accent); }
.kx-stepper input { width: 38px; height: 34px; border: 0; text-align: center; font-family: var(--kx-font-mono); font-size: 12.5px; background: transparent; -moz-appearance: textfield; }
.kx-stepper input::-webkit-outer-spin-button, .kx-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --- totals --- */
.kx-sumrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--kx-ink-soft); margin-bottom: 10px; }
.kx-sumrow span.v { font-family: var(--kx-font-mono); color: var(--kx-ink); }
.kx-sumrow.free span.v { color: var(--kx-success); font-weight: 700; font-family: var(--kx-font-body); }
.kx-sumrow.total { font-size: 15px; font-weight: 700; color: var(--kx-ink); padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--kx-line); }
.kx-sumrow.total span.v { font-size: 17px; font-weight: 600; }
.kx-reassure { font-size: 11.5px; color: var(--kx-ink-faint); text-align: center; margin-top: 12px; line-height: 1.6; }

/* --- checkout steps --- */
.kx-steps { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--kx-line); flex-wrap: wrap; }
.kx-steps .s { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: var(--kx-ink-faint); }
.kx-steps .s .d { width: 20px; height: 20px; border-radius: 50%; background: var(--kx-canvas); color: var(--kx-ink-faint); display: flex; align-items: center; justify-content: center; font-family: var(--kx-font-mono); font-size: 10px; }
.kx-steps .s.on { color: var(--kx-ink); }
.kx-steps .s.on .d { background: var(--kx-accent); color: #fff; }
.kx-steps .s.done .d { background: var(--kx-success); color: #fff; }
.kx-steps .ln { width: 56px; height: 1px; background: var(--kx-line); }

/* --- payment options --- */
.kx-payopt { display: flex; align-items: center; gap: 11px; border: 1px solid var(--kx-line); border-radius: 11px; padding: 13px 14px; margin-bottom: 10px; font-size: 13px; color: var(--kx-ink); cursor: pointer; }
.kx-payopt:last-child { margin-bottom: 0; }
.kx-payopt.on, .kx-payopt:has(input:checked) { border-color: var(--kx-accent); background: var(--kx-accent-soft); font-weight: 700; }
.kx-payopt input { accent-color: var(--kx-accent); width: 16px; height: 16px; }

/* --- account --- */
.kx-acct-nav { display: flex; flex-direction: column; gap: 3px; }
.kx-acct-nav a { font-size: 13px; color: var(--kx-ink-soft); padding: 10px 13px; border-radius: 9px; text-decoration: none; }
.kx-acct-nav a:hover { background: var(--kx-canvas); color: var(--kx-ink); }
.kx-acct-nav a.on { background: var(--kx-accent-soft); color: var(--kx-accent-ink); font-weight: 700; }
.kx-acct-nav a.danger { color: var(--kx-danger); }

.kx-order { border: 1px solid var(--kx-line); border-radius: var(--kx-radius-m); padding: 15px 16px; margin-bottom: 12px; text-decoration: none; display: block; }
.kx-order:hover { border-color: var(--kx-accent); }
.kx-order .t { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.kx-order .onum { font-family: var(--kx-font-mono); font-size: 11px; color: var(--kx-ink-faint); }
.kx-order .b { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.kx-order .items { font-size: 12.5px; color: var(--kx-ink-soft); }
.kx-order .amt { font-family: var(--kx-font-mono); font-size: 15px; font-weight: 600; color: var(--kx-ink); }

.kx-status { font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.kx-status.ok { background: var(--kx-success-soft); color: var(--kx-success); }
.kx-status.pending { background: var(--kx-gold-soft); color: var(--kx-gold); }
.kx-status.bad { background: var(--kx-danger-soft); color: var(--kx-danger); }
.kx-status.info { background: var(--kx-accent-soft); color: var(--kx-accent-ink); }

/* --- prose: legal, about, careers, errors --- */
.kx-prose-layout { display: grid; grid-template-columns: 210px 1fr; gap: 40px; align-items: start; }
.kx-toc { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 7px; }
.kx-toc .tl { font-family: var(--kx-font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--kx-ink-faint); margin-bottom: 5px; }
.kx-toc a { font-size: 12.5px; color: var(--kx-ink-soft); text-decoration: none; padding: 3px 0; }
.kx-toc a:hover, .kx-toc a.on { color: var(--kx-accent); font-weight: 700; }
.kx-prose { max-width: 65ch; }
.kx-prose .updated { font-family: var(--kx-font-mono); font-size: 11px; color: var(--kx-ink-faint); margin-bottom: 20px; }
.kx-prose h2 { font-family: var(--kx-font-display); font-size: 21px; font-weight: 700; color: var(--kx-ink); margin: 32px 0 12px; }
.kx-prose h2:first-child { margin-top: 0; }
.kx-prose h3 { font-family: var(--kx-font-body); font-size: 15px; font-weight: 700; color: var(--kx-ink); margin: 24px 0 9px; }
.kx-prose p, .kx-prose li { font-size: 13.5px; line-height: 1.8; color: var(--kx-ink-soft); }
.kx-prose p { margin: 0 0 15px; }
.kx-prose ul, .kx-prose ol { margin: 0 0 15px; padding-left: 20px; }
.kx-prose li { margin-bottom: 7px; }
.kx-prose a { color: var(--kx-accent); }
.kx-prose strong { color: var(--kx-ink); }

/* --- empty states --- */
.kx-empty { text-align: center; padding: 56px 20px; }
.kx-empty .ic { font-size: 34px; color: var(--kx-line); margin-bottom: 14px; }
.kx-empty h2 { font-family: var(--kx-font-display); font-size: 21px; font-weight: 700; color: var(--kx-ink); margin: 0 0 8px; }
.kx-empty p { font-size: 13.5px; color: var(--kx-ink-soft); margin: 0 0 20px; }

/* ==========================================================================
   BOOTSTRAP COMPATIBILITY LAYER
   Scoped to .kx-page only. Pages like Checkout carry a lot of behaviour bound
   to their existing markup (shipping zones, WhatsApp capture, billing toggles),
   so they get the new look by restyling the Bootstrap classes they already use
   rather than having their DOM rewritten underneath the JS.
   ========================================================================== */
main .form-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--kx-ink-soft); margin-bottom: 6px; }
main .form-control, main .form-select {
  border: 1px solid var(--kx-line); border-radius: 10px; padding: 11px 13px;
  font-family: var(--kx-font-body); font-size: 13.5px; color: var(--kx-ink); background-color: var(--kx-surface);
}
main .form-control:focus, main .form-select:focus {
  border-color: var(--kx-accent); box-shadow: 0 0 0 3px var(--kx-accent-soft);
}
main .form-control::placeholder { color: var(--kx-ink-faint); }
main .form-check-input { accent-color: var(--kx-accent); }
main .form-check-input:checked { background-color: var(--kx-accent); border-color: var(--kx-accent); }
main .form-check-label { font-size: 13px; color: var(--kx-ink-soft); }

main .card {
  border: 1px solid var(--kx-line) !important; border-radius: var(--kx-radius-m) !important;
  background: var(--kx-surface) !important; box-shadow: none !important;
}
main .card-body { padding: 18px 19px; }
main .card-title { font-family: var(--kx-font-body); font-size: 13.5px; font-weight: 700; color: var(--kx-ink); }

main .btn { border-radius: 999px; font-weight: 700; font-size: 13.5px; padding: 11px 22px; }
main .btn-primary { background: var(--kx-accent); border-color: var(--kx-accent); }
main .btn-primary:hover, main .btn-primary:focus { background: var(--kx-accent-deep); border-color: var(--kx-accent-deep); }
main .btn-outline-primary { color: var(--kx-accent); border-color: var(--kx-line); }
main .btn-outline-primary:hover { background: var(--kx-accent); border-color: var(--kx-accent); }
main .btn-outline-secondary { color: var(--kx-ink-soft); border-color: var(--kx-line); }
main .btn-outline-secondary:hover { background: var(--kx-canvas); color: var(--kx-ink); border-color: var(--kx-line); }
main .btn-sm { padding: 8px 16px; font-size: 12.5px; }

main .table { font-size: 13px; color: var(--kx-ink-soft); }
main .table > :not(caption) > * > * { padding: 11px 10px; border-bottom-color: var(--kx-line-soft); }
main .table > thead th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--kx-ink-faint); font-weight: 700; border-bottom-color: var(--kx-line); }

main .alert { border-radius: var(--kx-radius-m); border-width: 1px; font-size: 13px; }
main .badge { font-weight: 700; border-radius: 999px; padding: 4px 9px; }
main hr { border-color: var(--kx-line); opacity: 1; }

/* Old Bootstrap breadcrumbs on not-yet-converted pages read like .kx-crumbs. */
main .breadcrumb { background: transparent; padding: 0; margin-bottom: 0; font-size: 12.5px; }
main .breadcrumb .breadcrumb-item, main .breadcrumb a { color: var(--kx-ink-faint); text-decoration: none; }
main .breadcrumb a:hover { color: var(--kx-accent); }
main .breadcrumb .breadcrumb-item.active { color: var(--kx-ink); font-weight: 600; }
main nav[aria-label="breadcrumb"].bg-light { background: transparent !important; }

/* Legal and content pages (body.kx-prose-page, set in _Layout): hold running text to a
   readable measure and give it the same type rhythm as .kx-prose, without each of the
   eight templates needing to be rewritten. */
body.kx-prose-page main p,
body.kx-prose-page main ul,
body.kx-prose-page main ol { max-width: 68ch; }
body.kx-prose-page main p,
body.kx-prose-page main li { font-size: 13.5px; line-height: 1.8; color: var(--kx-ink-soft); }
body.kx-prose-page main li { margin-bottom: 7px; }
body.kx-prose-page main h1 { font-family: var(--kx-font-display); font-size: 29px; font-weight: 800; color: var(--kx-ink); }
body.kx-prose-page main h2 { font-family: var(--kx-font-display); font-size: 21px; font-weight: 700; color: var(--kx-ink); margin-top: 32px; }
body.kx-prose-page main h3, body.kx-prose-page main h4 { font-family: var(--kx-font-body); font-size: 15px; font-weight: 700; color: var(--kx-ink); margin-top: 24px; }
body.kx-prose-page main h5, body.kx-prose-page main h6 { color: var(--kx-ink); }
body.kx-prose-page main a { color: var(--kx-accent); }
body.kx-prose-page main strong { color: var(--kx-ink); }

/* Headings on pages still using plain containers pick up the display face. */
main > .container > h1, main > .container > h2,
main section > .container > h1, main section > .container > h2 {
  font-family: var(--kx-font-display); font-weight: 800; color: var(--kx-ink);
}
main .text-primary { color: var(--kx-accent) !important; }
main .bg-light { background: var(--kx-canvas) !important; }

/* Wide tables are the main mobile failure on order/account pages. */
@media (max-width: 767.98px) {
  main .table-responsive, main .table { font-size: 12px; }
}

/* --- sticky action bar (mobile commerce) --- */
.kx-stickybar { display: none; }

@media (max-width: 991.98px) {
  .kx-split, .kx-split.kx-split-nav, .kx-prose-layout { grid-template-columns: 1fr; }
  .kx-rail-sticky, .kx-toc { position: static; }
  .kx-toc { flex-direction: row; flex-wrap: wrap; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--kx-line); }
  .kx-toc .tl { width: 100%; margin-bottom: 0; }
  .kx-acct-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 14px; }
  .kx-acct-nav a { white-space: nowrap; }
}

@media (max-width: 575.98px) {
  .kx-page { padding: 18px 16px 44px; }
  .kx-page-head h1 { font-size: 24px; }
  .kx-field-row { grid-template-columns: 1fr; gap: 0; }
  .kx-steps { gap: 7px; padding: 13px 14px; }
  .kx-steps .ln { width: 22px; }
  .kx-steps .s { font-size: 10px; }
  .kx-auth-wrap { padding: 24px 14px 44px; }
  .kx-auth { padding: 24px 18px; }

  /* Line items stack: thumbnail + detail, with the stepper on its own row at full tap size. */
  .kx-line { align-items: flex-start; gap: 11px; }
  .kx-line .thumb { width: 62px; height: 62px; }
  .kx-line .info { display: flex; flex-direction: column; }
  .kx-line .controls { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 9px; }
  .kx-line .amt { text-align: left; font-size: 13px; }

  /* Sticky total + primary action, so the CTA is always reachable. */
  .kx-stickybar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
    align-items: center; gap: 12px; padding: 11px 14px;
    background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--kx-line);
  }
  .kx-stickybar .pz { display: flex; flex-direction: column; line-height: 1.25; }
  .kx-stickybar .pz b { font-family: var(--kx-font-mono); font-size: 17px; font-weight: 600; color: var(--kx-ink); }
  .kx-stickybar .pz small { font-size: 10px; color: var(--kx-ink-faint); }
  .kx-stickybar .act { flex: 1; justify-content: center; }
  body.kx-has-stickybar { padding-bottom: 76px; }
  /* The rail's own button is redundant once the sticky bar carries it. */
  .kx-rail-sticky .kx-hide-on-sticky { display: none; }
}