/* KidzViz Shirt Builder — assets/shirt-builder.css */
.kv-section { padding: 0 !important; margin: 0 !important; }
.kv-outer { width: 100%; background: #eeeeee; padding-bottom: 80px; }
.kv-outer *, .kv-outer *::before, .kv-outer *::after { box-sizing: border-box; }

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

.kv-outer {
  --kv-yellow: #FFD000;
  --kv-orange: #F56E00;
  --kv-pink: #E0507A;
  --kv-dark: #1a1a2e;
  --kv-accent: #ff6b00;
  --kv-teal: #1785b2;
  --kv-teal-dark: #146789;
  --kv-text-on-teal: #f4fbff;
  --kv-shell-bg: #eeeeee;
  --kv-design-selected: #3d5280;
  --kv-design-selected-ring: #5a6f9a;
  --kv-r: 12px;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1a1a2e;
}

/* ── Page wrapper ────────────────────────────────────── */
.kv-wrap {
  max-width: min(1200px, calc(80vh * 21 / 10));
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kv-retail-main > .kv-section > .kv-outer > .kv-wrap {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 16px 0;
}

/* ── Shared card ─────────────────────────────────────── */
.kv-row4 {
  margin-top: 14px;
  width: 100%;
}

.kv-card {
  background: white;
  border-radius: var(--kv-r);
  padding: 14px 16px;
  flex: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ══════════════════════════════════════════════════════
   MAIN ROW — Left 4 · Centre 10 · Right 7
   The CENTRE square sets the row height.
   Left & right columns must not exceed it.
   ══════════════════════════════════════════════════════ */
/* ── MAIN ROW ─────────────────────────────────────── */
.kv-main-row {
  display: grid;
  grid-template-columns: 4fr 10fr 7fr;
  gap: 14px;
  /* The centre column's aspect-ratio square defines row height. Left and right must not exceed it. */
  align-items: start;
}

/* Centre square is the height authority — no changes needed */
.kv-col-centre {
  position: relative;
  min-width: 0;
}

.kv-prev-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  cursor: pointer;
}

/* Left column: stretch to row height, clip overflow */
.kv-col-left {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
  /* CRITICAL: allow grid column to shrink below content's intrinsic min-width
     (chips have white-space: nowrap and would otherwise force the 4fr column wide) */
  min-width: 0;
}

/*
   RIGHT COLUMN — the key fix.
   Stretch to grid row height but contribute ZERO intrinsic height.
*/
.kv-col-right {
  align-self: stretch;
  position: relative;
  overflow: hidden;
  min-height: 0;
  max-height: 100%;
  min-width: 0;
}

.kv-col-right-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  min-width: 0;
}

/* Builder: right column is a flex scrollport on desktop (see min-width 768px rules) */
.kv-main-row--builder .kv-col-right {
  position: static;
  width: 100%;
  min-width: 0;
}

/* ── LEFT COLUMN: stacked controls ─────────────────── */
.kv-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
}

.kv-ctrl-name {}
.kv-ctrl-colour { display: flex; justify-content: center; }
.kv-ctrl-sizes {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 6;
  padding-top: 4px;
}
.kv-ctrl-cart { margin-top: 0; }

.kv-price-line {
  font-size: 22px;
  font-weight: 900;
  color: #1a1a2e;
  margin-bottom: 8px;
  font-family: 'Montserrat', 'Arial Black', sans-serif;
}

.kv-swatches { display: flex; gap: 10px; }
.kv-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  outline: none; padding: 0;
}
.kv-yellow { background: var(--kv-yellow); }
.kv-orange { background: var(--kv-orange); }
.kv-pink { background: var(--kv-pink); }
.kv-black { background: #1a1a2e; }
.kv-blue { background: #3b82f6; }
.kv-swatch.active, .kv-swatch:hover { border-color: var(--kv-dark); transform: scale(1.10); }
.kv-swatch.kv-black.active,
.kv-swatch.kv-black:hover {
  border-color: #64748b;
}

.kv-name-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 16px;
  font-family: 'Montserrat', 'Arial Black', sans-serif;
  font-weight: 700;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  outline: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: border-color .12s;
  color: #1a1a2e;
  background: white;
}
.kv-name-input:focus { border-color: var(--kv-accent); }
.kv-name-input::placeholder {
  font-family: 'Montserrat', 'Arial Black', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #94a3b8;
  font-size: 14px;
}

.kv-sizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 248px;
  margin: 0 auto;
}
.kv-sz {
  width: 100%;
  aspect-ratio: 1;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: white;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Montserrat', 'Arial Black', sans-serif;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  color: #1a1a2e;
  padding: 0;
  position: relative;
}
.kv-sz:hover { border-color: #94a3b8; }
.kv-sz:focus-visible {
  outline: 2px solid var(--kv-accent);
  outline-offset: 2px;
}
.kv-sz.active { background: var(--kv-dark); color: white; border-color: var(--kv-dark); }

/* Size helper bubble (matches www) */
.kv-sz-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--kv-dark);
  color: white;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  padding: 8px 12px;
  border-radius: 10px;
  white-space: normal;
  max-width: min(220px, 70vw);
  min-width: 140px;
  text-align: center;
  z-index: 30;
  pointer-events: none;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.kv-sz-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--kv-dark);
}
.kv-sz:hover .kv-sz-tip {
  display: block;
}

@media (max-width: 767px) {
  .kv-sz:hover .kv-sz-tip,
  .kv-sz:focus .kv-sz-tip {
    display: none !important;
  }
}

/* Add to Cart */
.kv-atc {
  width: 100%;
  padding: 14px 12px;
  background: var(--kv-dark);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px; font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
  transition: background .12s;
  font-family: inherit;
}
.kv-atc:hover:not(:disabled) { background: #2d2d4a; }
.kv-atc:disabled { background: #94a3b8; cursor: not-allowed; }

/* ── CENTRE COLUMN: mockup images ────────────────── */
.kv-base {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.kv-overlay-slot {
  position: absolute; inset: 0;
  pointer-events: none;
}
.kv-overlay-slot .kv-overlay {
  position: absolute;
  display: block;
  pointer-events: none;
  object-fit: contain;
  height: auto;
  max-width: none;
}
.kv-name-layer { position: absolute; inset: 0; pointer-events: none; }
.kv-name-text {
  position: absolute;
  font-family: 'Montserrat', 'Arial Black', sans-serif;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  line-height: 1;
  letter-spacing: .02em;
  transition: none;
}
.kv-flip-hint {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.55);
  color: white;
  font-size: 12px; font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  white-space: nowrap;
  animation: kvPulse 2s ease-in-out infinite;
  transition: opacity .4s;
}
.kv-flip-hint.kv-gone { opacity: 0; pointer-events: none; }

/* Mobile-only preview overlays (desktop uses workspace rail) */
.kv-preview-colour {
  display: none;
}

.kv-mobile-draft-bar,
.kv-size-modal {
  display: none;
}

@keyframes kvPulse { 0%,100%{opacity:.65} 50%{opacity:1} }

.kv-prev-wrap {
  position: relative;
  opacity: 1;
  transition: opacity 0.12s linear;
}

.kv-prev-wrap.is-switching {
  opacity: 0.85;   /* or 0.8 / 0.7 if you want it more noticeable */
}

/* Preview “choose design” hint hidden — controls are in left column */
.kv-design-prompt { display: none !important; }

/* Mobile design search overlay on preview */
.kv-mobile-design-search {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 28;
  max-width: calc(100% - 20px);
  pointer-events: auto;
}

.kv-mobile-design-search-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(260px, calc(100vw - 48px));
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(8, 45, 64, 0.82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  overflow: hidden;
  transition:
    max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    gap 0.35s ease;
  -webkit-tap-highlight-color: transparent;
}

.kv-mobile-design-search-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: block;
}

.kv-mobile-design-search-label {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  opacity: 1;
  max-width: 12rem;
  transition:
    opacity 0.28s ease,
    max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.kv-mobile-design-search--collapsed .kv-mobile-design-search-pill {
  max-width: 46px;
  padding: 10px;
  gap: 0;
}

.kv-mobile-design-search--collapsed .kv-mobile-design-search-label {
  opacity: 0;
  max-width: 0;
}

.kv-prev-wrap--pet .kv-mobile-design-search {
  display: none !important;
}

/* Bottom search bar — covers sticky order dock while typing */
.kv-mobile-design-search-dock {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 115;
  align-items: stretch;
  gap: 8px;
  min-height: var(--kv-mobile-order-dock-h, 80px);
  box-sizing: border-box;
  padding: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--kv-teal, #1785b2);
  border-top: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  --kv-dock-control-bg: rgba(8, 45, 64, 0.78);
  --kv-dock-control-border: rgba(255, 255, 255, 0.22);
  --kv-dock-control-text: #f4fbff;
}

body.kv-mobile-design-search-open .kv-mobile-design-search-dock {
  display: flex;
}

body.kv-mobile-design-search-open .kv-mobile-order-collapsed {
  visibility: hidden;
  pointer-events: none;
}

.kv-mobile-design-search-dock-field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  min-height: 48px;
  border-radius: 10px;
  background: var(--kv-dock-control-bg);
  border: 1px solid var(--kv-dock-control-border);
  color: var(--kv-dock-control-text);
}

.kv-mobile-design-search-dock .kv-mobile-design-search-input {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--kv-dock-control-text);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.kv-mobile-design-search-dock .kv-mobile-design-search-input::placeholder {
  color: rgba(244, 251, 255, 0.55);
  font-weight: 600;
}

.kv-mobile-design-search-done {
  flex: 0 0 auto;
  align-self: stretch;
  min-width: 56px;
  padding: 0 12px;
  border: 1px solid var(--kv-dock-control-border);
  border-radius: 10px;
  background: var(--kv-dock-control-bg);
  color: var(--kv-dock-control-text);
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kv-mobile-design-search-dock .kv-mobile-design-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.kv-mobile-design-search-done:active {
  background: rgba(8, 45, 64, 0.92);
}

@media (max-width: 767px) {
  body.kv-mobile-design-search-open .kv-mobile-order-dock:not(.kv-hidden) {
    pointer-events: none;
  }

  body.kv-mobile-design-search-open .kv-mobile-design-search-dock {
    pointer-events: auto;
  }
}

/* ── RIGHT COLUMN: design picker + rating + testimonies ── */

.kv-col-left-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.kv-col-left-below {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.kv-col-left-below .kv-right-testimonies {
  flex: none;
  min-height: 0;
  overflow: visible;
}

.kv-col-left-below .kv-testi-card {
  height: auto;
  min-height: 0;
}

.kv-left-block-title,
.kv-left-about-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a1a2e;
}

.kv-left-other-products {
  margin-top: 4px;
}

.kv-left-placeholder {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  background: #fafbfc;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
}

.kv-left-about {
  margin-top: 4px;
}

.kv-left-about-body {
  font-size: 12px;
  line-height: 1.5;
  color: #334155;
}

.kv-left-about-body p {
  margin: 0 0 10px;
}

.kv-left-about-body p:last-child {
  margin-bottom: 0;
}

.kv-design-picker {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  flex: 1 1 auto;
  box-sizing: border-box;
  overflow: hidden;
}

.kv-design-picker .kv-design-sidebar {
  flex-shrink: 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #e2e8f0;
}

.kv-design-picker .kv-design-groups {
  margin: 0;
  width: 100%;
  padding: 10px 12px 14px;
  box-sizing: border-box;
}

/* Rating summary line */
.kv-reviews-rating {
  color: inherit;
}

.kv-right-rating {
  text-align: center;
  padding: 2px 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.kv-stars-inline {
  color: #f5c400;
  font-size: 14px;
  letter-spacing: 1px;
}
.kv-rating-num {
  color: #1a1a2e;
  font-weight: 800;
  margin-left: 3px;
}
.kv-rating-from {
  color: #64748b;
  font-weight: 500;
  margin-left: 3px;
  font-size: 12px;
}

/* Testimonies — fills remaining space, text shrinks to fit */
.kv-right-testimonies {
  flex: 1 ; /* grow into remaining space, base size 0 */
  min-height: 0; /* allow flex to shrink below content size */
  overflow: hidden;
}

.kv-testi-card {
  background: #fafbfc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transition: opacity .35s ease;
}



.kv-testi-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  line-height: 1.45;
  color: #1e2937;
}

.kv-testi-quote {
  color: #14b8a6;
  font-size: 18px;
  margin-right: 4px;
  vertical-align: top;
  line-height: 1;
}

.kv-testi-text {
  /* inline with quote */
}

.kv-testi-footer {
  margin-top: 4px;
  flex-shrink: 0;
}

.kv-testi-name {
  font-weight: 700;
  color: #1a1a2e;
  font-size: 12px;
}

.kv-testi-verified {
  background: #e0f2fe;
  color: #0369a1;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 9999px;
  margin-left: 5px;
  vertical-align: middle;
}

/* fade-out / fade-in for testimony rotation */
.kv-testi-card.kv-fade-out { opacity: 0; }

/* ══════════════════════════════════════════════════════
   DESIGN PICKER — search in right column; grid in row 4
   ══════════════════════════════════════════════════════ */
.kv-design-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.kv-design-head {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
  min-width: 0;
}

.kv-design-head .kv-browser-title {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 16px;
}

.kv-design-sidebar .kv-search,
.kv-design-head .kv-search {
  flex: 1 1 auto;
  width: auto;
  min-width: 5.5rem;
  max-width: 100%;
  padding: 8px 12px;
  font-size: 13px;
}

/* Design groups — accordion by category */
.kv-design-groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.kv-design-groups > .kv-design-group {
  flex-shrink: 0;
}

.kv-design-group {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.kv-design-group-head[data-cat] {
  scroll-margin-top: 72px;
}
.kv-design-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  background: #f8fafc;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: #1a1a2e;
  cursor: pointer;
  text-align: left;
  line-height: 1.2;
}

.kv-design-group-head--static {
  cursor: default;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.kv-design-group--open .kv-design-group-head:not(.kv-design-group-head--static) {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
}

.kv-design-group-title {
  flex: 1 1 auto;
  min-width: 0;
}

.kv-design-group-chevron {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  margin-top: -3px;
}

.kv-design-group--open .kv-design-group-chevron {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.kv-design-group-body {
  display: none;
  padding: 10px 10px 12px;
}

.kv-design-group--open .kv-design-group-body {
  display: block;
}

.kv-design-group-body .kv-grid {
  margin: 0;
}
.kv-browser-title {
  font-size: 18px;
  font-weight: 900;
  margin: 0;
  line-height: 1.2;
}
.kv-search {
  width: 100%;
  padding: 9px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  font-family: inherit;
  color: #1a1a2e;
  background: white;
  box-sizing: border-box;
}
.kv-search:focus { border-color: var(--kv-accent); }

.kv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (min-width: 540px) { .kv-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .kv-grid { grid-template-columns: repeat(6, 1fr); } }

.kv-col-right .kv-grid {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

.kv-dcard {
  min-width: 0;
  border: 2px solid #f1f5f9;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: all .12s;
  background: white;
  outline: 3px solid transparent;
  outline-offset: 0;
}
.kv-dcard:hover { border-color: #94a3b8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.kv-dcard.active {
  border: 2px solid var(--kv-design-selected, #3d5280);
  outline: none;
  box-shadow: 0 0 0 2px rgba(90, 111, 154, 0.35);
}

.kv-dcard-name {
  display: none !important;
}

/* Grid viewport 22×14 cm print ratio; square back-tight.png is top-anchored (bottom cropped). */
.kv-dcard-img { position: relative; aspect-ratio: 22 / 14; overflow: hidden; background: #f1f5f9; }
.kv-thumb-stage { position: absolute; inset: 0; }
.kv-thumb-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Print slot on thumb — vars set from config via applyThumbSlotCssVars */
#kvGrid {
  --kv-design-aspect: 22 / 14;
  --kv-thumb-top: 6%;
  --kv-thumb-width: 88%;
  --kv-thumb-left: 50%;
}
.kv-thumb-overlay-slot {
  position: absolute;
  left: var(--kv-thumb-left);
  top: var(--kv-thumb-top);
  width: var(--kv-thumb-width);
  aspect-ratio: 22 / 14;
  height: auto;
  max-height: 94%;
  bottom: auto;
  transform: translateX(-50%);
  overflow: hidden;
  pointer-events: none;
}
.kv-thumb-overlay-slot .kv-thumb-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  display: block;
}
.kv-dcard-img--full .kv-dcard-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  background: #fff;
}
.kv-prev-wrap--pet {
  cursor: default;
}
.kv-prev-wrap--pet .kv-base,
.kv-prev-wrap--pet .kv-overlay-slot,
.kv-prev-wrap--pet .kv-name-layer,
.kv-prev-wrap--pet .kv-flip-hint,
.kv-prev-wrap--pet .kv-design-prompt {
  display: none !important;
}
.kv-pet-preview {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #f8fafc;
}
.kv-pet-slide-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}
.kv-pet-slideshow-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 4px;
}
.kv-pet-slideshow-btn {
  pointer-events: auto;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(26, 26, 46, 0.55);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kv-pet-slideshow-btn:hover {
  background: rgba(26, 26, 46, 0.75);
}
.kv-pet-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
.kv-pet-dot {
  pointer-events: auto;
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(26, 26, 46, 0.25);
  cursor: pointer;
}
.kv-pet-dot.active {
  background: var(--kv-accent, #ff6b00);
}
.kv-no-results { grid-column: 1/-1; text-align: center; padding: 40px 20px; color: #94a3b8; font-size: 15px; }

/* ══════════════════════════════════════════════════════
   Mobile order dock (replaces legacy mob bar)
   ══════════════════════════════════════════════════════ */
.kv-mobile-order-dock {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  pointer-events: none;
}

.kv-mobile-order-dock:not(.kv-hidden) {
  pointer-events: auto;
}

.kv-mobile-order-collapsed {
  position: relative;
  z-index: 110;
  display: grid;
  grid-template-columns: minmax(0, 70%) minmax(0, 30%);
  align-items: stretch;
  gap: 6px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--kv-teal, #1785b2);
  border-top: 3px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  min-height: var(--kv-mobile-order-dock-h, 80px);
  box-sizing: border-box;
  --kv-dock-control-bg: rgba(8, 45, 64, 0.78);
  --kv-dock-control-bg-active: rgba(8, 45, 64, 0.92);
  --kv-dock-control-border: rgba(255, 255, 255, 0.22);
  --kv-dock-control-text: #f4fbff;
}

body.kv-route-shop .kv-mobile-order-collapsed {
  grid-template-columns: minmax(0, 60%) minmax(0, 10%) minmax(0, 30%);
}

.kv-mobile-order-active-mount {
  min-width: 0;
  display: flex;
  align-items: stretch;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.kv-mobile-order-active-wrap {
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 6px;
  overflow: hidden;
}

.kv-mobile-order-active-wrap .kv-mobile-order-active-card {
  width: 100%;
  min-height: 100%;
  pointer-events: none;
  cursor: default;
}

.kv-mobile-order-add {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 1px solid var(--kv-dock-control-border);
  border-radius: 10px;
  background: var(--kv-dock-control-bg);
  color: var(--kv-dock-control-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.kv-route-shop .kv-mobile-order-add {
  display: flex;
}

.kv-mobile-order-add:active {
  background: var(--kv-dock-control-bg-active);
}

.kv-mobile-order-summary {
  position: relative;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 20px 6px 8px;
  border: 1px solid var(--kv-dock-control-border);
  border-radius: 10px;
  background: var(--kv-dock-control-bg);
  color: var(--kv-dock-control-text);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}

.kv-mobile-order-summary:active {
  background: var(--kv-dock-control-bg-active);
}

.kv-mobile-order-summary-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-transform: uppercase;
}

.kv-mobile-order-summary-count {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  color: rgba(244, 251, 255, 0.85);
}

.kv-mobile-order-summary-chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 2px solid var(--kv-dock-control-text);
  border-bottom: 2px solid var(--kv-dock-control-text);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

body.kv-mobile-order-open .kv-mobile-order-summary-chevron {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.kv-mobile-order-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 111;
}

.kv-mobile-order-backdrop[hidden] {
  display: none !important;
}

.kv-mobile-order-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(85dvh, 560px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 112;
}

.kv-mobile-order-sheet[hidden] {
  display: none !important;
}

body.kv-mobile-order-open .kv-mobile-order-collapsed {
  display: none;
}

body.kv-mobile-order-open .kv-mobile-design-search-dock {
  display: none !important;
}

.kv-mobile-order-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 8px;
  border-bottom: 1px solid #e8ecf0;
  flex-shrink: 0;
}

.kv-mobile-order-sheet-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a2e;
}

.kv-mobile-order-sheet-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #f1f5f9;
  color: #1a1a2e;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.kv-mobile-order-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.kv-mobile-order-sheet-body .kv-order-panel {
  border-top: none;
  padding-top: 8px;
  margin-top: 0;
}

.kv-mobile-order-sheet-body .kv-order-heading {
  display: none;
}

.kv-mobile-order-sheet-body .kv-order-build-wrap .kv-order-remove {
  opacity: 1;
  pointer-events: auto;
}

body.kv-mobile-order-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .kv-mobile-order-dock:not(.kv-hidden) {
    display: block;
  }

  body.kv-mobile-order-layout .kv-workspace {
    display: none;
  }

  body.kv-on-home .kv-outer,
  body.kv-route-shop .kv-outer,
  body.kv-view-accessories .kv-outer {
    padding-bottom: calc(var(--kv-mobile-order-dock-h, 80px) + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 768px) {
  .kv-mobile-order-dock {
    display: none !important;
  }
}

/* Legacy mob bar — removed */
.kv-mob-bar {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   MOBILE: stack the 3 columns vertically
   ══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .kv-main-row {
    grid-template-columns: 1fr;
  }
  .kv-col-left {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }
  .kv-ctrl-name { flex: 1 1 100%; }
  .kv-ctrl-colour { flex: 0 0 auto; }
  .kv-ctrl-sizes { flex: 1 1 auto; }

  body.kv-on-home:not(.kv-view-accessories) #kvBuilderControls {
    display: none;
  }

  .kv-workspace-controls .kv-ctrl-colour,
  .kv-workspace-controls .kv-ctrl-sizes {
    display: none;
  }

  .kv-preview-colour {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 12;
    pointer-events: auto;
  }

  .kv-preview-colour .kv-swatches {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 36px;
  }

  .kv-preview-colour .kv-swatch {
    position: relative;
    flex: 0 0 auto;
    display: block;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 2px solid #000;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  }

  .kv-preview-colour .kv-swatch.active,
  .kv-preview-colour .kv-swatch:hover {
    border-color: #000;
    transform: scale(1.08);
  }

  .kv-preview-colour .kv-swatch.kv-black.active,
  .kv-preview-colour .kv-swatch.kv-black:hover {
    border-color: #000;
  }

  .kv-prev-wrap--pet .kv-preview-colour {
    display: none;
  }

  .kv-ctrl-name--desktop {
    display: none !important;
  }

  .kv-retail-shell {
    padding-left: 0;
    padding-right: 0;
  }

  .kv-retail-main > .kv-section > .kv-outer > .kv-wrap {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 0;
    padding-right: 0;
    gap: 6px;
  }

  .kv-mobile-draft-bar,
  .kv-col-left-stack {
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }

  .kv-mobile-draft-bar {
    display: block;
    margin: 0;
  }

  body.kv-view-accessories .kv-mobile-draft-bar,
  body.kv-route-page .kv-mobile-draft-bar {
    display: none !important;
  }

  .kv-mobile-name-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
  }

  .kv-mobile-name-row .kv-name-input--mobile {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    font-size: 15px;
    border: 2px solid #1a1a2e;
    border-radius: 8px;
    background: #fff;
    color: #1a1a2e;
  }

  .kv-mobile-name-row .kv-name-input--mobile:focus {
    border-color: #1a1a2e;
    outline: none;
  }

  .kv-mobile-name-row .kv-name-input--mobile::placeholder {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #94a3b8;
  }

  .kv-size-pick-btn {
    flex: 0 0 auto;
    align-self: stretch;
    min-width: 72px;
    max-width: 42%;
    padding: 8px 10px;
    border: 2px solid #1a1a2e;
    border-radius: 8px;
    background: #fff;
    color: #1a1a2e;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .kv-size-pick-btn:active {
    background: #f1f5f9;
  }

  .kv-sz-tip {
    display: none !important;
  }

  .kv-ctrl-cart { flex: 1 1 100%; }
  body.kv-on-home {
    --kv-top-strip-h: 0px;
    --kv-builder-pad: 8px;
    --kv-mobile-draft-bar-h: 40px;
    --kv-mobile-order-dock-h: 80px;
    --kv-builder-chrome-h: calc(
      var(--kv-top-strip-h) + var(--kv-site-header-h) +
      var(--kv-builder-pad) + var(--kv-mobile-draft-bar-h) +
      var(--kv-mobile-order-dock-h) + 12px
    );
    /* 85% screen width, capped so a square preview does not exceed 70% viewport height */
    --kv-preview-side: min(85vw, 70dvh);
  }

  .kv-main-row--builder {
    grid-template-columns: 1fr;
  }

  .kv-main-row--builder .kv-col-centre {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .kv-main-row--builder .kv-prev-wrap {
    width: min(85vw, 70dvh);
    height: min(85vw, 70dvh);
    max-width: min(85vw, 70dvh);
    max-height: 70dvh;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    flex-shrink: 0;
  }

  .kv-col-left-stack { order: 1; }
  .kv-col-right { order: 2; position: static; max-height: none; }
  .kv-col-right-inner {
    position: static;
    height: auto;
    max-height: none;
  }

  .kv-col-right {
    padding-left: 0;
    padding-right: 0;
  }

  .kv-main-row--builder .kv-design-picker.kv-card {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid #e2e8f0;
  }

  .kv-design-sidebar {
    display: none !important;
  }

  .kv-mobile-design-search {
    display: block;
  }

  body.kv-view-accessories .kv-mobile-design-search {
    display: none !important;
  }

  .kv-design-picker .kv-design-groups {
    padding: 8px 6px;
    gap: 0;
  }

  .kv-design-group {
    border-left: none;
    border-right: none;
    border-radius: 0;
    border-top: none;
    border-bottom: 1px solid #e2e8f0;
  }

  .kv-design-group:last-child {
    border-bottom: none;
  }

  .kv-design-group-head {
    padding: 8px 2px;
    font-size: 12px;
  }

  .kv-design-group-body {
    padding: 4px 0 8px;
  }

  .kv-col-right .kv-grid,
  .kv-design-group-body .kv-grid,
  .kv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .kv-dcard {
    border-radius: 8px;
    border-width: 2px;
  }

  /* Reviews / testimonies — desktop only; preview stays first below the header */
  .kv-main-row--builder .kv-col-left-below {
    display: none;
  }

  .kv-wrap { max-width: 100%; }
}

body.kv-checkout-form--locked .kv-workspace-controls textarea.kv-name-input {
  opacity: 0.65;
  pointer-events: none;
}

/* Checkout form layout (builder page may include these) */
.kv-checkout-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}
.kv-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}
.kv-email-input,
.kv-text-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  outline: none;
  font-family: inherit;
}
.kv-email-input:focus,
.kv-text-input:focus {
  border-color: var(--kv-accent);
}

/* Checkout page — suburb / state / postcode on one row (overrides width:100% on inputs) */
.kv-checkout-form .kv-checkout-address {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kv-checkout-form .kv-checkout-address-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.kv-checkout-form .kv-checkout-address-row > * {
  min-width: 0;
  width: auto;
}
.kv-checkout-form .kv-checkout-address-row > :nth-child(1) {
  flex: 1 1 6rem;
  max-width: 48%;
}
.kv-checkout-form .kv-checkout-address-row > :nth-child(2) {
  flex: 0 0 4.25rem;
}
.kv-checkout-form .kv-checkout-address-row > :nth-child(3) {
  flex: 0 0 6.75rem;
}

.kv-checkout-shipping-note {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 10px;
  line-height: 1.5;
}
.kv-checkout-shipping {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.kv-checkout-form .kv-checkout-shipping-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.kv-checkout-form .kv-checkout-shipping-opt:hover {
  border-color: #cbd5e1;
}
.kv-checkout-form .kv-checkout-shipping-opt--selected {
  border-color: var(--kv-accent, #ff6b00);
  background: #fff8f3;
}
.kv-checkout-shipping-opt-title {
  font-weight: 700;
  font-size: 14px;
  color: #1a1a2e;
}
.kv-checkout-shipping-opt-time {
  font-size: 12px;
  color: #64748b;
}
.kv-checkout-shipping-opt-price {
  font-weight: 600;
  font-size: 14px;
  margin-top: 4px;
  color: #1a1a2e;
}
@media (max-width: 420px) {
  .kv-checkout-shipping {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════
   RETAIL SHELL — persistent order rail + main pane
   ══════════════════════════════════════════════════════ */
body.kv-retail-layout {
  --kv-rail-panel-bg: #ffffff;
  --kv-rail-panel-radius: 12px;
  --kv-rail-panel-radius-top: var(--kv-rail-panel-radius);
  --kv-rail-panel-radius-bottom: var(--kv-rail-panel-radius);
  --kv-rail-panel-shadow: 4px 0 12px rgba(0, 0, 0, 0.08);
  --kv-rail-panel-shadow-right: -4px 0 12px rgba(0, 0, 0, 0.08);
  --kv-rail-panel-pad: 12px;
  --kv-rail-divider: #e2e8f0;
}

.kv-retail-shell {
  display: grid;
  /* Shell: fixed order rail + main pane flexes (designer + design grid live in main pane) */
  grid-template-columns: var(--kv-order-rail-w, clamp(180px, 18%, 280px)) minmax(0, 1fr);
  gap: var(--kv-rail-gap, 14px);
  max-width: var(--kv-page-max-w, min(1400px, 100%));
  margin: 0 auto;
  padding: 0 var(--kv-page-pad-x, 16px) 32px;
  align-items: start;
}
.kv-workspace {
  position: sticky;
  top: 8px;
  align-self: start;
  min-width: 0;
  background: var(--kv-rail-panel-bg);
  border-radius: var(--kv-rail-panel-radius-top) var(--kv-rail-panel-radius-top)
    var(--kv-rail-panel-radius-bottom) var(--kv-rail-panel-radius-bottom);
  box-shadow: var(--kv-rail-panel-shadow);
}
.kv-workspace-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  border-radius: var(--kv-r);
  padding: 12px;
  box-shadow: none;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kv-yellow: #FFD000;
  --kv-orange: #F56E00;
  --kv-pink: #E0507A;
  --kv-dark: #1a1a2e;
  --kv-accent: #ff6b00;
  --kv-teal: #1785b2;
  --kv-teal-dark: #146789;
  --kv-text-on-teal: #f4fbff;
  --kv-r: 12px;
  --kv-builder-controls-min-h: 186px;
  min-width: 0;
  box-sizing: border-box;
}

#kvBuilderControls {
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: var(--kv-builder-controls-min-h);
}

/* Hide shirt controls but keep the locked top slot (accessories, contact, locations) */
body.kv-view-accessories #kvBuilderControls,
body.kv-route-page:not(.kv-route-checkout) #kvBuilderControls {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

/* Checkout: same top slot as accessories/contact/locations + 30px bump for the note. */
body.kv-route-checkout .kv-workspace-controls {
  --kv-builder-controls-min-h: 219px;
}

body.kv-route-checkout #kvBuilderControls {
  visibility: visible;
  pointer-events: auto;
  user-select: auto;
  overflow: visible;
}

body.kv-route-checkout #kvBuilderControls .kv-ctrl-colour,
body.kv-route-checkout #kvBuilderControls .kv-ctrl-sizes {
  display: none;
}

body.kv-route-checkout #kvBuilderControls textarea.kv-name-input {
  height: calc(var(--kv-builder-controls-min-h) - 32px);
  min-height: 120px;
  resize: none;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-family: inherit;
}

body.kv-route-checkout #kvBuilderControls textarea.kv-name-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.kv-workspace-controls .kv-ctrl-name {
  min-width: 0;
  width: 100%;
}
.kv-workspace-controls .kv-label {
  font-size: 11px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.kv-workspace-controls .kv-name-input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: block;
  padding: 10px 10px;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0.03em;
  min-height: 40px;
}
.kv-workspace-controls textarea.kv-name-input {
  resize: vertical;
  min-height: 40px;
}
.kv-workspace-controls .kv-name-input::placeholder {
  font-size: 11px;
  letter-spacing: 0.02em;
}
.kv-workspace-controls .kv-ctrl-colour {
  width: 100%;
  padding: 6px 4px;
  box-sizing: border-box;
}
.kv-workspace-controls .kv-swatches {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 6px;
  box-sizing: border-box;
}
.kv-workspace-controls .kv-ctrl-sizes {
  padding-top: 0;
  margin-top: -2px;
}
.kv-workspace-controls .kv-swatch {
  width: 30px;
  height: 30px;
  border-width: 2px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .kv-workspace-controls .kv-ctrl-colour {
    padding: 8px 6px 10px;
  }

  .kv-workspace-controls .kv-swatches {
    gap: 14px;
    padding: 0 8px;
  }

  .kv-workspace-controls .kv-swatch {
    width: 36px;
    height: 36px;
  }
}

.kv-workspace-controls .kv-swatch.active,
.kv-workspace-controls .kv-swatch:hover {
  transform: scale(1.05);
}
.kv-workspace-controls .kv-sizes {
  max-width: 100%;
  width: 100%;
  padding-top: 0;
  gap: 8px;
}
.kv-workspace-controls .kv-sz {
  min-height: 34px;
  font-size: 12px;
}
.kv-retail-main {
  min-width: 0;
}
.kv-retail-main .kv-page {
  max-width: 720px;
  padding: 16px 0;
}
.kv-retail-main .kv-page h1 {
  margin: 0 0 16px;
  font-size: 1.5rem;
}
/* Builder row: shared chrome tokens (preview sizing is viewport-specific below) */
body.kv-on-home {
  --kv-top-strip-h: 30px;
  --kv-site-header-h: 48px;
  --kv-builder-pad: 16px;
  --kv-builder-chrome-h: calc(
    var(--kv-top-strip-h) + var(--kv-site-header-h) +
    var(--kv-builder-pad) + 12px
  );
}

@media (min-width: 768px) {
  body.kv-on-home {
    --kv-builder-pad: 0;
    --kv-rail-height: calc(100dvh - var(--kv-top-strip-h) - var(--kv-site-header-h));
    --kv-builder-workspace-h: var(--kv-rail-height);
    --kv-rail-panel-radius-top: 0;
    --kv-order-rail-w: clamp(180px, 18%, 280px);
    --kv-rail-gap: 24px;
    --kv-main-gap: var(--kv-rail-gap);
    --kv-shell-content-w: min(1400px, 100vw);
    --kv-main-pane-w: calc(
      var(--kv-shell-content-w) - 2 * var(--kv-page-pad-x) - var(--kv-order-rail-w) - var(--kv-rail-gap)
    );
    /* Designer column = preview block; design grid takes the remainder. */
    /* Wider than before so the preview can grow; grid still gets plenty of room. */
    --kv-designer-col-w: min(calc(var(--kv-main-pane-w) * 0.52), 620px);
    /* Preview is square — capped only by the designer column width and the rail height. */
    /* Reviews flex into whatever is left below (and disappear entirely if there's no room). */
    --kv-preview-side: min(
      var(--kv-designer-col-w),
      calc(var(--kv-rail-height) - var(--kv-preview-pad-top, 28px))
    );
  }

  .kv-main-row--builder {
    grid-template-columns: var(--kv-designer-col-w) minmax(0, 1fr);
    column-gap: var(--kv-rail-gap, 24px);
    align-items: start;
    min-height: 0;
    width: 100%;
  }

  .kv-main-row--builder .kv-col-left-stack {
    width: var(--kv-designer-col-w);
    max-width: var(--kv-designer-col-w);
    flex-shrink: 0;
  }

  .kv-main-row--builder .kv-col-centre {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    width: 100%;
  }

  .kv-main-row--builder .kv-prev-wrap {
    width: var(--kv-preview-side);
    height: var(--kv-preview-side);
    max-width: var(--kv-preview-side);
    max-height: var(--kv-preview-side);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }

  .kv-main-row--builder .kv-col-left-below {
    width: 100%;
  }

  .kv-main-row--builder .kv-col-right {
    align-self: start;
    min-width: 0;
    max-height: none;
    overflow: visible;
    width: 100%;
    display: block;
  }

  .kv-main-row--builder .kv-col-right-inner {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    max-height: none;
    min-width: 0;
    width: 100%;
    overflow: visible;
  }

  .kv-main-row--builder .kv-design-picker,
  .kv-main-row--builder .kv-design-sidebar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .kv-main-row--builder .kv-design-picker {
    flex: none;
    min-height: 0;
    max-height: none;
    min-width: 0;
    overflow: visible;
  }

  /* Shop builder: rails sticky; designer col width fixed; design grid flexes */
  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) {
    --kv-preview-pad-top: 28px;
    --kv-reviews-panel-h: 152px;
    /* Min space below the preview for reviews to be worth showing */
    --kv-reviews-min-space: 140px;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-outer {
    padding-bottom: 0;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-retail-main > .kv-section > .kv-outer > .kv-wrap {
    padding-top: 0;
    padding-bottom: 0;
  }

  body.kv-on-home:not(.kv-mobile-order-layout) .kv-retail-shell {
    padding-top: 0;
    padding-bottom: 0;
  }

  body.kv-on-home:not(.kv-mobile-order-layout) .kv-workspace {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    height: var(--kv-rail-height);
    max-height: var(--kv-rail-height);
    overflow: hidden;
    border-radius: var(--kv-rail-panel-radius-top) var(--kv-rail-panel-radius-top)
      var(--kv-rail-panel-radius-bottom) var(--kv-rail-panel-radius-bottom);
  }

  body.kv-on-home:not(.kv-mobile-order-layout) .kv-workspace-controls {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: 0;
  }

  body.kv-on-home:not(.kv-mobile-order-layout) #kvWorkspaceOrderMount {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.kv-on-home:not(.kv-mobile-order-layout) .kv-order-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.kv-on-home:not(.kv-mobile-order-layout) .kv-order-body {
    flex: 0 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.kv-on-home:not(.kv-mobile-order-layout) #kvOrderCheckoutBottom {
    margin-top: auto;
    flex-shrink: 0;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder {
    align-items: start;
    min-height: var(--kv-rail-height);
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-col-left-stack {
    position: sticky;
    top: 0;
    align-self: start;
    display: flex;
    flex-direction: column;
    height: var(--kv-rail-height);
    max-height: var(--kv-rail-height);
    width: var(--kv-designer-col-w);
    max-width: var(--kv-designer-col-w);
    min-height: 0;
    min-width: 0;
    gap: 0;
    overflow: hidden;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-col-centre {
    flex-shrink: 0;
    padding-top: var(--kv-preview-pad-top);
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-reviews-panel {
    flex: 0 1 auto;
    margin-top: 14px;
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
    padding: var(--kv-rail-panel-pad);
    background: var(--kv-rail-panel-bg);
    border-radius: var(--kv-rail-panel-radius-bottom);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--kv-rail-divider);
    overflow: hidden;
  }

  /* Hide the reviews panel entirely when the rail isn't tall enough for it to be useful */
  /* (preview already eats most of the rail height). */
  @media (max-height: 760px) {
    body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-reviews-panel {
      display: none;
    }
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-reviews-panel .kv-reviews-rating,
  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-reviews-panel .kv-right-rating {
    flex-shrink: 0;
    padding: 0 0 10px;
    margin: 0 0 10px;
    border-bottom: 1px solid var(--kv-rail-divider);
    text-align: center;
    cursor: default;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-reviews-panel .kv-right-testimonies {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-reviews-panel .kv-testi-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-reviews-panel .kv-testi-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.5;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-reviews-panel .kv-testi-text {
    display: inline;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-reviews-panel .kv-testi-footer {
    flex-shrink: 0;
    margin-top: 6px;
    min-height: 1.25em;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-col-right {
    position: sticky;
    top: 0;
    align-self: start;
    height: var(--kv-rail-height);
    max-height: var(--kv-rail-height);
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-col-right-inner {
    position: static;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-picker {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    background: var(--kv-rail-panel-bg);
    border-radius: var(--kv-rail-panel-radius-top) var(--kv-rail-panel-radius-top)
      var(--kv-rail-panel-radius-bottom) var(--kv-rail-panel-radius-bottom);
    box-shadow: var(--kv-rail-panel-shadow-right);
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-picker .kv-design-sidebar {
    flex-shrink: 0;
    padding: var(--kv-rail-panel-pad);
    border-bottom: 1px solid var(--kv-rail-divider);
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-head .kv-browser-title {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #1a1a2e;
    white-space: normal;
    line-height: 1.3;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-head .kv-search {
    width: 100%;
    min-width: 0;
    padding: 10px 10px;
    font-size: 13px;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-picker .kv-design-groups {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--kv-rail-panel-pad) var(--kv-rail-panel-pad);
    gap: 0;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-group {
    border: none;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid var(--kv-rail-divider);
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-group:last-child {
    border-bottom: none;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-group-head {
    padding: 10px 0;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-group--open .kv-design-group-head:not(.kv-design-group-head--static) {
    background: transparent;
    border-bottom: 1px solid var(--kv-rail-divider);
    color: #1a1a2e;
  }

  body.kv-on-home.kv-route-shop:not(.kv-view-accessories) .kv-main-row--builder .kv-design-group-body {
    padding: 10px 0 12px;
  }
}
.kv-order-heading {
  margin: 8px 0 4px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.kv-order-panel {
  border-top: 1px solid #e2e8f0;
  padding-top: 12px;
  margin-top: 4px;
  flex-shrink: 0;
}
.kv-order-checkout {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#kvOrderCheckoutTop:empty {
  display: none;
}
#kvOrderCheckoutTop:not(:empty) {
  margin-bottom: 4px;
}
#kvOrderCheckoutBottom {
  margin-top: 10px;
}
.kv-order-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kv-order-build-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.kv-order-build-wrap:hover .kv-order-remove,
.kv-order-build-wrap:focus-within .kv-order-remove {
  opacity: 1;
  pointer-events: auto;
}
.kv-order-build-wrap .kv-order-remove {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 4px;
  background: rgba(160, 48, 48, 0.42);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  line-height: 1;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  transition: opacity 0.12s, background 0.12s;
}
.kv-order-build-wrap .kv-order-remove:hover {
  background: rgba(160, 48, 48, 0.62);
}
.kv-order-build {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 0;
  padding: 6px 22px 6px 10px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.15;
  min-width: 0;
  box-sizing: border-box;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.kv-order-build:hover {
  border-color: rgba(0, 0, 0, 0.2);
}
.kv-order-build--active {
  border-color: #1a1a2e;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.92),
    0 0 0 4px #1a1a2e,
    0 0 0 6px rgba(255, 107, 0, 0.55);
}
.kv-order-build--black.kv-order-build--active,
.kv-order-build--blue.kv-order-build--active {
  border-color: #fff;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.35),
    0 0 0 4px #fff,
    0 0 0 6px rgba(255, 107, 0, 0.75);
}
.kv-workspace-controls {
  --kv-accent: #ff6b00;
}
.kv-order-build--pending {
  background: #e8ecf0;
  color: #64748b;
  border-color: rgba(0, 0, 0, 0.08);
}
.kv-order-build--pending.kv-order-build--active {
  border-color: #1a1a2e;
  color: #1a1a2e;
}
.kv-order-build--yellow {
  background: #ffd000;
  color: #1a1a2e;
}
.kv-order-build--orange {
  background: #f56e00;
  color: #1a1a2e;
}
.kv-order-build--pink {
  background: #e0507a;
  color: #1a1a2e;
}
.kv-order-build--black {
  background: #1a1a2e;
  color: #fff;
}
.kv-order-build--blue {
  background: #2563eb;
  color: #fff;
}
.kv-order-build--accessory {
  background: #dceef8;
  color: #1a1a2e;
  border-color: rgba(59, 130, 246, 0.22);
}
.kv-order-build--accessory.kv-order-build--active {
  border-color: #1a1a2e;
}
.kv-order-build-design {
  font-size: 1em;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kv-order-build-meta,
.kv-order-build-name {
  margin-top: 2px;
  font-size: 0.933em;
  font-weight: 600;
  line-height: 1.15;
  opacity: 0.92;
}
.kv-order-build-price {
  position: absolute;
  right: 6px;
  bottom: 4px;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  opacity: 0.88;
  pointer-events: none;
}
.kv-order-build--pending .kv-order-build-price,
.kv-order-build--black .kv-order-build-price,
.kv-order-build--blue .kv-order-build-price {
  opacity: 0.9;
}
.kv-order-build-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kv-order-build-placeholder {
  opacity: 0.55;
  font-weight: 700;
}
.kv-order-thumb-stage,
.kv-order-thumb-single,
.kv-order-thumb--acc {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #e2e8f0;
}
.kv-order-thumb--acc {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #475569;
}
.kv-order-thumb-base,
.kv-order-thumb-overlay,
.kv-order-thumb-single {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kv-order-thumb-overlay {
  position: absolute;
  inset: 0;
}
.kv-order-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kv-order-row-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  color: #1a1a2e;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kv-order-row-price {
  font-size: 10px;
  color: #64748b;
  font-weight: 600;
}
.kv-order-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.kv-order-add {
  display: none;
  border: 2px dashed #cbd5e1;
  background: #f8fafc;
  color: #1a1a2e;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
body.kv-route-shop .kv-order-add {
  display: block;
}
.kv-order-add:hover:not(:disabled) {
  border-color: var(--kv-accent);
  background: #fff7ed;
}
.kv-order-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kv-order-finalise {
  width: 100%;
  background: var(--kv-teal, #1785b2) !important;
  color: var(--kv-text-on-teal, #f4fbff) !important;
  border: none;
}
.kv-order-finalise:hover:not(:disabled) {
  background: var(--kv-teal-dark, #146789) !important;
}
.kv-order-finalise:disabled {
  background: #94a3b8 !important;
  color: #fff !important;
}
@keyframes kv-order-line-flash {
  0%,
  100% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.9);
  }
}
.kv-order-build-wrap--flash {
  animation: kv-order-line-flash 0.45s ease-in-out 3;
  border-radius: 6px;
}
.kv-order-checkout-error,
.kv-order-checkout-hint {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  color: #9a3412;
}

.kv-order-checkout-fix {
  margin: 8px 0 4px;
  padding: 0 4px 2px;
}

.kv-order-checkout-fix .kv-order-checkout-sizes {
  max-width: none;
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.kv-order-checkout-fix .kv-sz {
  min-height: 36px;
  font-size: 12px;
  border-radius: 8px;
}

.kv-order-checkout-fix .kv-order-checkout-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kv-order-checkout-fix .kv-swatch {
  width: 32px;
  height: 32px;
  border-width: 2px;
}

.kv-order-checkout-hint {
  padding: 0 2px;
}
.kv-order-subtotal {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}
.kv-order-subtotal:empty {
  display: none;
}
.kv-acc-card--active {
  outline: 3px solid var(--kv-accent);
  outline-offset: 2px;
}

@media (max-width: 767px) {
  .kv-retail-shell {
    grid-template-columns: 1fr;
  }
  .kv-workspace {
    position: static;
    order: 2;
    padding-left: 8px;
    padding-right: 8px;
    box-sizing: border-box;
  }
  .kv-retail-main {
    order: 1;
  }
}

/* Size picker modal (mobile) */
.kv-size-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.kv-size-modal[hidden] {
  display: none !important;
}

.kv-size-modal:not([hidden]) {
  display: flex;
}

.kv-size-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.kv-size-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: min(85dvh, 560px);
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.kv-size-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #e8ecf0;
  flex-shrink: 0;
}

.kv-size-modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a2e;
}

.kv-size-modal-close {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #f1f5f9;
  color: #1a1a2e;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.kv-sizes--modal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

.kv-sizes--modal .kv-sz {
  width: 100%;
  min-height: 0;
  height: auto;
  aspect-ratio: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 12px 14px;
  text-align: left;
  border-radius: 10px;
  border: 2px solid #e2e8f0;
}

.kv-sz-modal-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
  width: 100%;
}

.kv-sizes--modal .kv-sz.active {
  border-color: #1a1a2e;
  background: #1a1a2e;
  color: #fff;
}

.kv-sz-modal-label {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.kv-sizes--modal .kv-sz.active .kv-sz-modal-label {
  color: #fff;
}

.kv-sz-modal-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: #64748b;
}

.kv-sizes--modal .kv-sz.active .kv-sz-modal-hint {
  color: rgba(255, 255, 255, 0.88);
}

body.kv-size-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .kv-flip-hint { animation: none; }
  .kv-design-prompt .kv-arrow-down { animation: none; }
}