/** Shopify CDN: Minification failed

Line 5202:3 Unexpected "("

**/
/* ============================================================
   kevlts - Maison - design layer
   Editorial luxury identity applied on top of the base theme.
   Loaded site-wide from layout/theme.liquid (after theme.css).
   Custom homepage sections use the .kv-* atoms defined here.
   Tokens are namespaced --kv-* so they never collide with the
   theme's own CSS variables.
   ============================================================ */

:root {
  /* ---- palette ---- */
  --kv-ink: #141210;          /* near-black warm text */
  --kv-ink-soft: #5b554d;     /* muted body */
  --kv-paper: #ffffff;
  --kv-paper-deep: #f3f1ed;   /* whisper-warm band */
  --kv-black: #0f0f0f;        /* editorial black sections */
  --kv-white: #ffffff;
  --kv-line: #cfc8bc;         /* hairline on paper */
  --kv-line-dark: rgba(255, 255, 255, .16);

  /* ---- accent ---- */
  --kv-accent: #141210;
  --kv-accent-soft: #5b554d;
  --kv-frame: #c4b291;        /* warm gold ornament/frame */

  /* ---- type ---- */
  --kv-display: 'Cormorant Garamond', Georgia, serif;
  --kv-sans: 'Jost', system-ui, sans-serif;
  --kv-display-wght: 500;

  /* ---- tracking ---- */
  --kv-track-brand: .34em;
  --kv-track-eyebrow: .42em;
  --kv-track-nav: .06em;

  /* ---- rhythm ---- */
  --kv-gutter: clamp(20px, 5vw, 68px);
  --kv-section-y: clamp(76px, 11vw, 156px);

  /* ---- motion ---- */
  --kv-ease: cubic-bezier(.22, .61, .36, 1);
  --kv-reveal: 1; /* set to 0 to disable reveals */
}

/* ============================================================
   Redesign design-system tokens (T02)
   Source: Kevlts-design-reference/DESIGN_TOKENS.json (canvas
   "kevlts - Master File", incl. T01 decisions). The legacy --kv-*
   tokens above stay unchanged until each section is migrated.
   Breakpoints (media queries cannot read custom properties):
   1199 / 767-768 / 480 / 420px, hover:none, prefers-reduced-motion.
   ============================================================ */
:root {
  /* ---- colour ---- */
  --kv-color-white: #ffffff;
  --kv-color-ink: #18191b;
  --kv-color-ink-72: rgba(24, 25, 27, .72);
  --kv-color-ink-66: rgba(24, 25, 27, .66);
  --kv-color-petrol: #29484b;
  --kv-color-pearl: #f6f4ee;
  --kv-color-mineral: #93a5a5;
  --kv-color-soft-metal: #a4a09a;
  --kv-color-line: rgba(164, 160, 154, .45);
  --kv-color-line-soft: rgba(164, 160, 154, .32);
  --kv-color-line-strong: rgba(164, 160, 154, .8);
  --kv-color-mist: #ededed;
  --kv-color-scrim: rgba(24, 25, 27, .5);
  --kv-color-error: #b3392f;

  /* ---- font families ---- */
  --kv-font-display: 'Cormorant Garamond', Georgia, serif;
  --kv-font-sans: Manrope, system-ui, sans-serif;

  /* ---- type styles: size / line-height / weight / tracking ---- */
  --kv-type-hero-caps-size: 50px;
  --kv-type-hero-caps-lh: 1.05;
  --kv-type-hero-caps-wght: 400;
  --kv-type-hero-caps-track: .12em;
  --kv-type-display-xl-size: 62px;
  --kv-type-display-xl-lh: 1.02;
  --kv-type-display-xl-wght: 500;
  --kv-type-display-l-size: 56px;
  --kv-type-display-l-lh: 1.02;
  --kv-type-display-l-wght: 400;
  --kv-type-product-title-size: 38px;
  --kv-type-product-title-size-mobile: 30px;
  --kv-type-product-title-lh: 1.08;
  --kv-type-product-title-wght: 500;
  --kv-type-card-name-size: 21px;
  --kv-type-card-name-size-mobile: 17px;
  --kv-type-card-name-size-bag: 18px;
  --kv-type-card-name-lh: 1.22;
  --kv-type-card-name-wght: 500;
  --kv-type-menu-row-size: 26px;
  --kv-type-menu-row-size-mega: 21px;
  --kv-type-menu-row-lh: 1.2;
  --kv-type-menu-row-wght: 500;
  --kv-type-eyebrow-size: 12px;
  --kv-type-eyebrow-lh: 1.4;
  --kv-type-eyebrow-wght: 300;
  --kv-type-eyebrow-track: .42em;
  --kv-type-nav-size: 11.5px;
  --kv-type-nav-lh: 1.4;
  --kv-type-nav-wght: 400;
  --kv-type-nav-track: .22em;
  --kv-type-brand-label-size: 11px;
  --kv-type-brand-label-lh: 1.4;
  --kv-type-brand-label-wght: 400;
  --kv-type-brand-label-track: .26em;
  --kv-type-button-size: 12.5px;
  --kv-type-button-lh: 1.2;
  --kv-type-button-wght: 400;
  --kv-type-button-track: .18em;
  --kv-type-body-size: 15.5px;
  --kv-type-body-lh: 1.7;
  --kv-type-body-wght: 300;
  --kv-type-ui-size: 13.5px;
  --kv-type-ui-lh: 1.45;
  --kv-type-ui-wght: 400;
  --kv-type-price-size: 14px;
  --kv-type-price-lh: 1.4;
  --kv-type-price-wght: 400;
  --kv-type-price-track: .06em;
  --kv-type-caption-size: 12px;
  --kv-type-caption-lh: 1.5;
  --kv-type-caption-wght: 300;
  --kv-type-caption-track: .06em;

  /* ---- spacing ---- */
  --kv-space-gutter: clamp(20px, 5vw, 68px);
  --kv-space-gutter-mobile: 20px;
  --kv-space-section-y: 110px;
  --kv-space-section-y-mobile: 72px;
  --kv-space-section-y-l: 150px;
  --kv-space-grid-col-gap: 24px;
  --kv-space-grid-col-gap-mobile: 10px;
  --kv-space-grid-row-gap: 60px;
  --kv-space-grid-row-gap-mobile: 28px;
  --kv-space-card-gap: 16px;
  --kv-space-text-gap: 7px;
  --kv-size-header-h: 88px;
  --kv-size-header-h-compact: 60px;
  --kv-size-header-h-mobile: 64px;
  --kv-size-control-h: 46px;
  --kv-size-chip-h: 42px;
  --kv-size-button-h: 56px;
  --kv-size-tap-min: 44px;

  /* ---- space scale ---- */
  --kv-sp-1: 4px;
  --kv-sp-2: 8px;
  --kv-sp-3: 12px;
  --kv-sp-4: 16px;
  --kv-sp-5: 20px;
  --kv-sp-6: 24px;
  --kv-sp-8: 32px;
  --kv-sp-10: 40px;
  --kv-sp-12: 48px;
  --kv-sp-14: 56px;
  --kv-sp-16: 64px;
  --kv-sp-18: 72px;
  --kv-sp-20: 80px;
  --kv-sp-24: 96px;
  --kv-sp-28: 112px;
  --kv-sp-30: 120px;
  --kv-sp-36: 144px;

  /* ---- grid values (utilities come in T03) ---- */
  --kv-grid-columns: 12;
  --kv-grid-max: 1296px;
  --kv-grid-margin: 72px;
  --kv-grid-gutter: 48px;
  --kv-grid-columns-mobile: 4;
  --kv-grid-gutter-mobile: 16px;
  --kv-grid-margin-mobile: 20px;

  /* ---- radius ---- */
  --kv-radius-none: 0;
  --kv-radius-count: 9px;
  --kv-radius-round: 50%;
  --kv-radius-pill: 999px;

  /* ---- shadow ---- */
  --kv-shadow-pop: 0 18px 40px rgba(0, 0, 0, .18);
  --kv-shadow-overlay: 0 24px 50px rgba(0, 0, 0, .18);

  /* ---- motion ---- */
  --kv-motion-button: .3s ease;
  --kv-motion-menu-open-delay: 110ms;
  --kv-motion-menu-leave-delay: 180ms;

  /* ---- component tokens (T01 decisions) ---- */
  --kv-btn-primary-bg: var(--kv-color-ink);
  --kv-btn-primary-fg: var(--kv-color-white);
  --kv-btn-primary-bg-hover: var(--kv-color-petrol);
  --kv-btn-secondary-bg: var(--kv-color-white);
  --kv-btn-secondary-fg: var(--kv-color-ink);
  --kv-btn-secondary-bg-hover: var(--kv-color-ink);
  --kv-badge-radius: var(--kv-radius-pill);
  --kv-badge-h: 24px;
  --kv-badge-h-mobile: 21px;
  --kv-badge-offset: 8px;
  --kv-badge-offset-mobile: 6px;
  --kv-badge-new-bg: var(--kv-color-ink);
  --kv-badge-new-fg: var(--kv-color-white);
  --kv-badge-best-bg: var(--kv-color-white);
  --kv-badge-best-fg: var(--kv-color-ink);
  --kv-badge-best-ring: inset 0 0 0 1px rgba(24, 25, 27, .16);
  --kv-grid-divider: 1px solid rgba(24, 25, 27, .1);
  --kv-card-add-bg: var(--kv-color-petrol);
  --kv-card-add-bg-grid: var(--kv-color-ink);
  --kv-card-add-bg-mobile: rgba(24, 25, 27, .88);
  --kv-focus-ring: 1px solid var(--kv-color-petrol);
  --kv-focus-offset: 3px;
}

/* ============================================================
   Grid, container & responsive wiring (T03)
   Source: Home-Split grid system (shared by every Final Website
   board): 12 cols / 72px margin / 48px gutter / 1296px max;
   <=1199px 8 / 40 / 24; <=767px 4 / 20 / 16.
   Base tokens below are the *active* values; the -tablet /
   -mobile tokens hold the per-tier values.
   ============================================================ */
:root {
  --kv-grid-columns-tablet: 8;
  --kv-grid-margin-tablet: 40px;
  --kv-grid-gutter-tablet: 24px;
  --kv-motion-ease: cubic-bezier(.22, .61, .36, 1);
  --kv-motion-scale: 1;
}

@media (max-width: 1199px) {
  :root {
    --kv-grid-columns: var(--kv-grid-columns-tablet);
    --kv-grid-margin: var(--kv-grid-margin-tablet);
    --kv-grid-gutter: var(--kv-grid-gutter-tablet);
  }
}

@media (max-width: 767px) {
  :root {
    --kv-grid-columns: var(--kv-grid-columns-mobile);
    --kv-grid-margin: var(--kv-grid-margin-mobile);
    --kv-grid-gutter: var(--kv-grid-gutter-mobile);
    --kv-space-gutter: var(--kv-space-gutter-mobile);
    --kv-space-section-y: var(--kv-space-section-y-mobile);
    --kv-space-grid-col-gap: var(--kv-space-grid-col-gap-mobile);
    --kv-space-grid-row-gap: var(--kv-space-grid-row-gap-mobile);
    --kv-size-header-h: var(--kv-size-header-h-mobile);
  }
}

/* derived container + column spans (re-evaluated per tier) */
:root {
  --kv-grid-pad: max(var(--kv-grid-margin), calc((100vw - var(--kv-grid-max)) / 2));
  --kv-grid-cw: calc(100vw - 2 * var(--kv-grid-pad));
  --kv-grid-col: calc((var(--kv-grid-cw) - (var(--kv-grid-columns) - 1) * var(--kv-grid-gutter)) / var(--kv-grid-columns));
  --kv-grid-s1: calc(1 * var(--kv-grid-col) + 0 * var(--kv-grid-gutter));
  --kv-grid-s2: calc(2 * var(--kv-grid-col) + 1 * var(--kv-grid-gutter));
  --kv-grid-s3: calc(3 * var(--kv-grid-col) + 2 * var(--kv-grid-gutter));
  --kv-grid-s4: calc(4 * var(--kv-grid-col) + 3 * var(--kv-grid-gutter));
  --kv-grid-s5: calc(5 * var(--kv-grid-col) + 4 * var(--kv-grid-gutter));
  --kv-grid-s6: calc(6 * var(--kv-grid-col) + 5 * var(--kv-grid-gutter));
  --kv-grid-s7: calc(7 * var(--kv-grid-col) + 6 * var(--kv-grid-gutter));
  --kv-grid-s8: calc(8 * var(--kv-grid-col) + 7 * var(--kv-grid-gutter));
  --kv-grid-s9: calc(9 * var(--kv-grid-col) + 8 * var(--kv-grid-gutter));
  --kv-grid-s10: calc(10 * var(--kv-grid-col) + 9 * var(--kv-grid-gutter));
  --kv-grid-s11: calc(11 * var(--kv-grid-col) + 10 * var(--kv-grid-gutter));
  --kv-grid-s12: calc(12 * var(--kv-grid-col) + 11 * var(--kv-grid-gutter));
  --kv-grid-l-wide: var(--kv-grid-s10);
  --kv-grid-l-main: var(--kv-grid-s6);
  --kv-grid-l-aside: var(--kv-grid-s4);
  --kv-grid-l-media: var(--kv-grid-s7);
  --kv-grid-l-split: calc(var(--kv-grid-col) + 2 * var(--kv-grid-gutter));
}

@media (max-width: 1199px) {
  :root {
    --kv-grid-l-wide: var(--kv-grid-s8);
    --kv-grid-l-main: var(--kv-grid-s5);
    --kv-grid-l-aside: var(--kv-grid-s3);
    --kv-grid-l-media: var(--kv-grid-s5);
    --kv-grid-l-split: var(--kv-grid-gutter);
  }
}

/* reduced motion: DS-05 "all animation off" for token consumers */
@media (prefers-reduced-motion: reduce) {
  :root {
    --kv-motion-scale: 0;
    --kv-motion-button: 0s linear;
  }
}

.kv-g-wrap {
  box-sizing: border-box;
  padding-left: var(--kv-grid-pad);
  padding-right: var(--kv-grid-pad);
}
.kv-g-grid {
  display: grid;
  grid-template-columns: repeat(var(--kv-grid-columns), minmax(0, 1fr));
  column-gap: var(--kv-grid-gutter);
}
.kv-g-span-1 { grid-column: span 1; }
.kv-g-span-2 { grid-column: span 2; }
.kv-g-span-3 { grid-column: span 3; }
.kv-g-span-4 { grid-column: span 4; }
.kv-g-span-5 { grid-column: span 5; }
.kv-g-span-6 { grid-column: span 6; }
.kv-g-span-7 { grid-column: span 7; }
.kv-g-span-8 { grid-column: span 8; }
.kv-g-span-9 { grid-column: span 9; }
.kv-g-span-10 { grid-column: span 10; }
.kv-g-span-11 { grid-column: span 11; }
.kv-g-span-12 { grid-column: span 12; }

/* ============================================================
   Actions, badges & forms (T05)
   Source: Final Website board CSS (Home-Split .btn/.lnk/.ib/.bdg,
   unified 11 Oct button rule, SignIn .gx-* form set) and DS-09
   .u-lk/.cw/.st/.cnt. New class names only: the legacy .kv-btn and
   .kv-link used by existing sections are left untouched.
   ============================================================ */
:root {
  --kv-status-transit-bg: #e8efef;
  --kv-status-transit-fg: var(--kv-color-petrol);
  --kv-status-delivered-bg: #f1f1ef;
  --kv-status-delivered-fg: #4a4b4e;
  --kv-color-ink-56: rgba(24, 25, 27, .56);
  --kv-color-ink-42: rgba(24, 25, 27, .42);
}

/* ---- buttons: one primary (Ink, Petrol on hover/focus), one secondary (outline) ---- */
.kv-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
  min-height: var(--kv-size-button-h);
  padding: 16px 32px;
  border: 1px solid var(--kv-btn-primary-bg);
  border-radius: var(--kv-radius-none);
  background: var(--kv-btn-primary-bg);
  color: var(--kv-btn-primary-fg);
  font-family: var(--kv-font-sans);
  font-size: var(--kv-type-button-size);
  font-weight: var(--kv-type-button-wght);
  line-height: var(--kv-type-button-lh);
  letter-spacing: var(--kv-type-button-track);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--kv-motion-button), border-color var(--kv-motion-button), color var(--kv-motion-button);
}
.kv-button:hover,
.kv-button:focus-visible {
  background: var(--kv-btn-primary-bg-hover);
  border-color: var(--kv-btn-primary-bg-hover);
  color: var(--kv-btn-primary-fg);
}
.kv-button--secondary {
  background: var(--kv-btn-secondary-bg);
  border-color: var(--kv-color-ink);
  color: var(--kv-btn-secondary-fg);
}
.kv-button--secondary:hover,
.kv-button--secondary:focus-visible {
  background: var(--kv-btn-secondary-bg-hover);
  border-color: var(--kv-color-ink);
  color: var(--kv-color-white);
}
.kv-button--block { display: flex; width: 100%; }

/* ---- links ---- */
.kv-text-link {
  font-family: var(--kv-font-sans);
  font-size: 13px;
  color: var(--kv-color-ink);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.kv-text-link:hover,
.kv-text-link:focus-visible {
  color: var(--kv-color-petrol);
  text-decoration-thickness: 2px;
}
.kv-section-link {
  font-family: var(--kv-font-sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 8px;
}
.kv-section-link:hover { opacity: .78; }

/* drawers and modals close with the word "Close" */
.kv-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--kv-size-tap-min);
  min-height: var(--kv-size-tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.kv-close:hover,
.kv-close:focus-visible { text-decoration-thickness: 2px; }

/* ---- icon button: 44 x 44 target whatever the icon size ---- */
.kv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: var(--kv-size-tap-min);
  min-height: var(--kv-size-tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: var(--kv-font-sans);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
}
.kv-icon-btn:hover { color: var(--kv-color-petrol); }

.kv-button:focus-visible,
.kv-text-link:focus-visible,
.kv-section-link:focus-visible,
.kv-close:focus-visible,
.kv-icon-btn:focus-visible {
  outline: var(--kv-focus-ring);
  outline-offset: var(--kv-focus-offset);
}

/* ---- badges, order status, count (pills; everything else stays square) ---- */
.kv-badge {
  display: inline-flex;
  align-items: center;
  height: var(--kv-badge-h);
  padding: 0 16px;
  border-radius: var(--kv-badge-radius);
  font-family: var(--kv-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
}
.kv-badge--new { background: var(--kv-badge-new-bg); color: var(--kv-badge-new-fg); }
.kv-badge--best { background: var(--kv-badge-best-bg); color: var(--kv-badge-best-fg); box-shadow: var(--kv-badge-best-ring); }

.kv-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 11px;
  border-radius: var(--kv-radius-pill);
  font-family: var(--kv-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
}
.kv-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--kv-radius-round);
  background: currentColor;
}
.kv-status--transit { background: var(--kv-status-transit-bg); color: var(--kv-status-transit-fg); }
.kv-status--delivered { background: var(--kv-status-delivered-bg); color: var(--kv-status-delivered-fg); }

.kv-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--kv-radius-count);
  background: var(--kv-color-petrol);
  color: var(--kv-color-pearl);
  font-family: var(--kv-font-sans);
  font-size: 10px;
  line-height: 1;
}
.kv-count:empty { display: none; }

/* ---- forms: underline inputs ---- */
.kv-form { display: flex; flex-direction: column; gap: 24px; }
.kv-field { position: relative; display: flex; flex-direction: column; gap: 8px; }
.kv-field__label {
  font-family: var(--kv-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--kv-color-ink);
}
.kv-field__label small { font-size: 12px; font-weight: 300; color: var(--kv-color-ink-56); }
.kv-input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--kv-color-ink);
  border-radius: var(--kv-radius-none);
  background: transparent;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 14px;
  outline: none;
}
.kv-input::placeholder { color: var(--kv-color-ink-42); }
.kv-input:focus { border-bottom-color: var(--kv-color-petrol); }
.kv-input.is-error,
.kv-input[aria-invalid="true"] { border-bottom-color: var(--kv-color-error); }
.kv-field__hint { margin: 0; font-family: var(--kv-font-sans); font-size: 11.5px; color: var(--kv-color-ink-56); }
.kv-field__error { margin: 0; font-family: var(--kv-font-sans); font-size: 12px; color: var(--kv-color-error); }

.kv-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--kv-font-sans);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(24, 25, 27, .8);
  cursor: pointer;
}
.kv-check input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  border: 1px solid var(--kv-color-ink);
  border-radius: var(--kv-radius-none);
  background: var(--kv-color-white);
  cursor: pointer;
}
.kv-check input:checked { background: var(--kv-color-ink); box-shadow: inset 0 0 0 3px var(--kv-color-white); }
.kv-check input:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }

/* ============================================================
   Header (T10) - sections/kevlts-header.liquid + <kv-header> in kevlts.js
   Source: Home-Split header. Solid white bar, fixed; states set by
   scroll: top (y < 40) 88px, no hairline; compact (scrolling up)
   60px + hairline; hidden (scrolling down past 160px) slides up.
   Mobile header (DS-05: below 760px): 64 / 54px, Menu + Search +
   logo + Cart. Mega menus T11, search panel T12, account/ship-to
   T13, mobile drawer restyle T14.
   ============================================================ */
:root {
  --kv-hdr-h-top: 88px;
  --kv-hdr-h-compact: var(--kv-size-header-h-compact);
  --kv-hdr-logo-top: 28px;
  --kv-hdr-logo-compact: 21px;
  --kv-hdr-line: rgba(164, 160, 154, .55);
}
@media (max-width: 760px) {
  :root {
    --kv-hdr-h-top: var(--kv-size-header-h-mobile);
    --kv-hdr-h-compact: 54px;
    --kv-hdr-logo-top: 22px;
    --kv-hdr-logo-compact: 19px;
  }
}

.kv-hdr-space { height: var(--kv-hdr-h-top); }

.kv-hdr {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: block;
  color: var(--kv-color-ink);
  transform: translateY(0);
  transition: transform calc(.5s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-hdr[data-state="hidden"] { transform: translateY(-101%); }

.kv-hdr__bar {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  height: var(--kv-hdr-h-top);
  padding: 0 var(--kv-grid-pad);
  background: var(--kv-color-white);
  border-bottom: 1px solid transparent;
  transition:
    height calc(.45s * var(--kv-motion-scale)) var(--kv-motion-ease),
    border-color calc(.4s * var(--kv-motion-scale)) ease;
}
.kv-hdr:not([data-state="top"]) .kv-hdr__bar {
  height: var(--kv-hdr-h-compact);
  border-bottom-color: var(--kv-hdr-line);
}

.kv-hdr__start {
  display: flex;
  align-items: center;
  justify-self: start;
}
.kv-hdr__nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 40px);
}
.kv-hdr__link {
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: var(--kv-type-nav-size);
  font-weight: var(--kv-type-nav-wght);
  line-height: var(--kv-type-nav-lh);
  letter-spacing: var(--kv-type-nav-track);
  text-transform: uppercase;
  text-decoration: none;
}
.kv-hdr__link:hover,
.kv-hdr__link:focus-visible,
.kv-hdr__link.is-current { border-bottom-color: var(--kv-color-ink); }
.kv-hdr__link:focus-visible,
.kv-hdr__item:focus-visible {
  outline: var(--kv-focus-ring);
  outline-offset: var(--kv-focus-offset);
}

.kv-hdr__logo { display: flex; padding: 0 24px; }
.kv-hdr__logo-img {
  display: block;
  width: auto;
  height: var(--kv-hdr-logo-top);
  transition: height calc(.45s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-hdr:not([data-state="top"]) .kv-hdr__logo-img { height: var(--kv-hdr-logo-compact); }

.kv-hdr__end {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: clamp(16px, 1.9vw, 32px);
}
.kv-hdr__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--kv-size-tap-min);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: var(--kv-type-nav-size);
  font-weight: var(--kv-type-nav-wght);
  letter-spacing: var(--kv-type-nav-track);
  text-transform: uppercase;
  text-decoration: none;
}
.kv-hdr__item:hover,
.kv-hdr__item:focus-visible { color: var(--kv-color-petrol); }

.kv-hdr__bag { position: relative; display: inline-flex; line-height: 0; }
.kv-hdr__count {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translate(-50%, -50%);
  color: currentColor;
  font-family: var(--kv-font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  pointer-events: none;
}
.kv-hdr__count[hidden] { display: none; }
/* wishlist count (Halo Pop): red circle with a soft red halo over the heart's top-right corner; the heart beats
   and the circle pops in when a piece is saved */
.kv-hdr__fav { position: relative; display: inline-flex; line-height: 0; }
.kv-hdr__fav-n {
  position: absolute;
  top: -7px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--kv-color-error);
  color: var(--kv-color-white);
  font-family: var(--kv-font-sans);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 3px rgba(179, 57, 47, .18);
  pointer-events: none;
}
.kv-hdr__fav-n[hidden] { display: none; }
.kv-hdr__fav-n.is-pop { animation: kvFavPop calc(.5s * var(--kv-motion-scale)) cubic-bezier(.22, .61, .36, 1); }
.kv-hdr__fav .kv-icon.is-pop { animation: kvFavBeat calc(.5s * var(--kv-motion-scale)) ease; }
@keyframes kvFavPop { 0% { transform: scale(.4); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes kvFavBeat { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .kv-hdr__fav-n.is-pop,
  .kv-hdr__fav .kv-icon.is-pop { animation: none; }
}

.kv-hdr__mobile-only { display: none; }
@media (max-width: 760px) {
  .kv-hdr__nav,
  .kv-hdr__desktop-only { display: none; }
  .kv-hdr__mobile-only { display: inline-flex; }
  .kv-hdr__end { gap: 0; }
}

/* ============================================================
   Mega menu (T11) - panels under the header bar, one per top-level
   menu link that has child links. Source: Home-Split .mega/.mg-*
   (later overrides applied: links Manrope 15px, card titles 16px).
   Open on hover (110ms) or click; close 180ms after leaving, on
   Escape, outside click, focus leaving the header or a scroll-state
   change. Phones use the menu drawer (T14).
   ============================================================ */
button.kv-hdr__link {
  margin: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: none;
  cursor: pointer;
}
.kv-hdr__trigger[aria-expanded="true"] { border-bottom-color: var(--kv-color-ink); }
.kv-hdr.is-mega-open .kv-hdr__bar { border-bottom-color: var(--kv-hdr-line); }

.kv-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  border-bottom: 1px solid var(--kv-hdr-line);
  animation: kvMegaIn calc(.3s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
.kv-mega[hidden] { display: none; }
@keyframes kvMegaIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.kv-mega__body {
  display: grid;
  grid-template-columns: var(--kv-mega-grid, minmax(150px, 190px));
  gap: clamp(28px, 3.4vw, 52px);
  padding: 36px var(--kv-grid-pad) 40px;
}
.kv-mega__col { min-width: 0; }
.kv-mega__h {
  margin: 0 0 16px;
  font-family: var(--kv-font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--kv-color-petrol);
}
.kv-mega__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.kv-mega__list--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3.4vw, 52px); }
/* A column of more than four links runs down two columns (Women / Men "Shop by category"). */
.kv-mega__list--down { grid-auto-flow: column; grid-template-rows: repeat(var(--kv-rows, 4), auto); }
/* Brands panel: a brand is selected only over its name, not anywhere along its half of the panel. */
.kv-mega__list--2 .kv-mega__a { display: inline-flex; max-width: 100%; vertical-align: top; }
.kv-mega__a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .01em;
  text-decoration: none;
  transition: color calc(.25s * var(--kv-motion-scale)) ease, padding-left calc(.3s * var(--kv-motion-scale)) ease;
}
.kv-mega__a:hover,
.kv-mega__a:focus-visible { color: var(--kv-color-petrol); padding-left: 8px; }
.kv-mega__n { flex: none; font-size: 11px; letter-spacing: .06em; color: rgba(24, 25, 27, .62); }
.kv-menu__row .kv-mega__n { margin-left: auto; }

.kv-mega__feat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  color: var(--kv-color-ink);
  text-decoration: none;
}
.kv-mega__feat-img {
  display: block;
  height: 228px;
  overflow: hidden;
  background: var(--kv-color-white);
  box-shadow: inset 0 0 0 1px var(--kv-color-line-soft);
}
.kv-mega__feat-img--contain {
  box-sizing: border-box;
  border: 1px solid var(--kv-color-line-soft);
  box-shadow: none;
}
.kv-mega__feat-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform calc(1.2s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-mega__feat-img--contain img { object-fit: contain; }
.kv-mega__feat-img img.is-swap { animation: kvFeatIn calc(.35s * var(--kv-motion-scale)) ease both; }
@keyframes kvFeatIn { from { opacity: 0; } to { opacity: 1; } }
.kv-mega__feat:hover .kv-mega__feat-img img { transform: scale(1.04); }
.kv-mega__eyebrow {
  margin-top: 8px;
  font-family: var(--kv-font-sans);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--kv-color-petrol);
}
.kv-mega__feat-title {
  font-family: var(--kv-font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .01em;
}
.kv-mega__feat-link {
  font-family: var(--kv-font-sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kv-color-ink-72);
}

.kv-mega__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.kv-mega__tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  text-decoration: none;
}
.kv-mega__tile-img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 196px;
  background: var(--kv-color-white);
  border: 1px solid var(--kv-color-line-soft);
}
.kv-mega__tile-img img {
  max-width: 76%;
  max-height: 76%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform calc(1s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-mega__tile:hover .kv-mega__tile-img img { transform: translateY(-4px); }
.kv-mega__tile-name { font-size: 13px; line-height: 1.35; }
.kv-mega__tile-price { font-size: 12px; color: rgba(24, 25, 27, .7); }

.kv-mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 58px;
  padding: 0 var(--kv-grid-pad);
  border-top: 1px solid rgba(164, 160, 154, .4);
}
.kv-mega__all {
  display: inline-flex;
  gap: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--kv-color-ink);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
}
.kv-mega__all span { letter-spacing: 0; }
.kv-mega__all:hover { color: var(--kv-color-petrol); border-color: var(--kv-color-petrol); }
.kv-mega__note { font-family: var(--kv-font-sans); font-size: 12px; color: rgba(24, 25, 27, .62); }

.kv-mega a:focus-visible {
  outline: var(--kv-focus-ring);
  outline-offset: var(--kv-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .kv-mega { animation: none; }
}
@media (max-width: 760px) {
  .kv-mega { display: none; }
}

/* ============================================================
   Search panel + predictive results (T12)
   sections/kevlts-header.liquid <dialog id="kv-search"> and
   sections/kevlts-predictive-search.liquid (.kv-ps). Source:
   Home-Split search overlay: scrim + sheet dropping from the top
   (shadow-overlay), 56px Petrol field, trending chips + browse rows,
   result groups and product rows; full screen on phones (DS-05).
   ============================================================ */
.kv-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
html.kv-search-open { overflow: hidden; }

.kv-search {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  z-index: 70;
}
.kv-search::backdrop { background: transparent; }
.kv-search:not([open]) { display: none; }

.kv-search__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--kv-color-scrim);
  cursor: pointer;
  animation: kvFadeIn calc(.4s * var(--kv-motion-scale)) ease both;
}
.kv-search__sheet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  box-shadow: var(--kv-shadow-overlay);
  animation: kvInTop calc(.5s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
@keyframes kvFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kvInTop { from { transform: translateY(-100%); } to { transform: none; } }

.kv-search__top {
  flex: none;
  padding: 32px var(--kv-grid-pad) 28px;
  border-bottom: 1px solid var(--kv-color-soft-metal);
}
.kv-search__title {
  max-width: 1100px;
  margin: 0 auto 20px;
  font-family: var(--kv-font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kv-search__row {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.kv-search__form {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 56px;
  padding: 0 8px 0 20px;
  border: 1px solid var(--kv-color-petrol);
  background: var(--kv-color-white);
}
.kv-search__form:focus-within { box-shadow: inset 0 0 0 1px var(--kv-color-petrol); }
.kv-search__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 52px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 16px;
  font-weight: 400;
  -webkit-appearance: none;
  appearance: none;
}
.kv-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kv-search__clear[hidden] { display: none; }
.kv-search__close {
  padding: 0 8px;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.kv-search__body {
  flex: 1;
  overflow-y: auto;
  padding: 32px var(--kv-grid-pad) 44px;
}
.kv-search__inner { max-width: 1100px; margin: 0 auto; }
.kv-search__start {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 40px;
}
.kv-search__start[hidden],
.kv-search__results[hidden] { display: none; }
.kv-search__eb {
  margin: 0 0 16px;
  font-family: var(--kv-font-sans);
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--kv-color-ink-72);
}
.kv-search__eb--tight { margin-bottom: 4px; }
.kv-search__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kv-search__chip {
  min-height: 40px;
  padding: 12px 16px;
  border: 1px solid var(--kv-color-soft-metal);
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.kv-search__row-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--kv-color-soft-metal);
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.kv-search__row-btn span {
  font-family: var(--kv-font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.02;
}
.kv-search__row-btn:hover { color: var(--kv-color-petrol); }

.kv-ps__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 12px 40px;
  margin-bottom: 32px;
}
.kv-ps__h {
  margin: 0 0 4px;
  font-family: var(--kv-font-sans);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--kv-color-petrol);
}
.kv-ps__h--products { margin-bottom: 2px; }
.kv-ps__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 48px;
  border-bottom: 1px solid var(--kv-color-line);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .01em;
  text-decoration: none;
}
.kv-ps__group small { font-size: 11px; letter-spacing: .08em; color: rgba(24, 25, 27, .6); }
.kv-ps__group:hover { color: var(--kv-color-petrol); }
.kv-ps__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  column-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kv-ps__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--kv-color-soft-metal);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  text-decoration: none;
}
.kv-ps__img {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: var(--kv-color-white);
}
.kv-ps__img img { width: 66px; height: 66px; object-fit: contain; }
.kv-ps__row.is-sold-out .kv-ps__img img { opacity: .45; filter: grayscale(1); }
.kv-ps__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kv-ps__name { font-size: 14px; font-weight: 400; line-height: 1.45; letter-spacing: .01em; }
.kv-ps__meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--kv-color-ink-72); }
.kv-ps__price { font-size: 13px; letter-spacing: .04em; }
.kv-ps__sold {
  margin-left: 8px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kv-color-error);
}
.kv-ps__none {
  margin: 0 0 8px;
  font-family: var(--kv-font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.02;
}
.kv-ps__hint { margin: 0 0 20px; font-family: var(--kv-font-sans); font-size: 14px; line-height: 1.6; color: var(--kv-color-ink-72); }

.kv-search__chip:focus-visible,
.kv-search__row-btn:focus-visible,
.kv-ps__group:focus-visible,
.kv-ps__row:focus-visible {
  outline: var(--kv-focus-ring);
  outline-offset: var(--kv-focus-offset);
}

@media (max-width: 760px) {
  .kv-search__sheet { bottom: 0; }
}

/* ============================================================
   Account dropdown + ship-to / language (T13)
   Source: Home-Split .acct / .arow and .loc / .ccl / .cco / .flg.
   Click-to-open popovers handled by <kv-header> together with the
   mega menu (one open at a time). Ship-to hidden at <= 1180px
   (.hide-md); phones use the menu drawer (T14).
   ============================================================ */
.kv-acct {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  width: 300px;
  padding: 24px;
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  border: 1px solid var(--kv-hdr-line);
  animation: kvMegaIn calc(.28s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
.kv-acct[hidden] { display: none; }
.kv-acct__h { margin: 0; }
.kv-acct__intro {
  margin: 0 0 8px;
  font-family: var(--kv-font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(24, 25, 27, .74);
}
.kv-acct__rows { margin-top: 8px; border-top: 1px solid var(--kv-color-line); }
.kv-acct__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 46px;
  border-bottom: 1px solid var(--kv-color-line);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: none;
}
.kv-acct__row:hover { color: var(--kv-color-petrol); }

.kv-loc { position: relative; display: inline-flex; align-items: center; }
.kv-loc__form { display: inline-flex; align-items: center; gap: 16px; margin: 0; }
button.kv-hdr__item { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.kv-loc__btn { gap: 8px; }
.kv-loc__btn .kv-icon { transition: transform calc(.3s * var(--kv-motion-scale)) ease; }
.kv-loc__btn[aria-expanded="true"] .kv-icon { transform: rotate(180deg); }
.kv-loc__sep { flex: none; width: 1px; height: 14px; background: rgba(164, 160, 154, .75); }
.kv-loc__lang { font-size: 13.5px; letter-spacing: 0; text-transform: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* the other language is not published in Shopify yet: same look as the board, but it cannot be used */
.kv-loc__lang.is-unavailable,
.kv-menu__chip--lang.is-unavailable { cursor: default; }
.kv-loc__lang.is-unavailable:hover { color: var(--kv-color-ink); }
.kv-menu__chip--lang { letter-spacing: 0; font-size: 13.5px; }
.kv-menu__chip--lang.is-unavailable:hover { border-color: rgba(164, 160, 154, .7); }
.kv-loc__list {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  z-index: 7;
  width: 272px;
  margin-left: -136px;
  padding: 8px 0;
  background: var(--kv-color-white);
  box-shadow: 0 10px 30px rgba(24, 25, 27, .12), 0 0 0 1px rgba(164, 160, 154, .25);
  animation: kvMegaIn calc(.24s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
.kv-loc__list[hidden] { display: none; }
.kv-loc__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
}
.kv-loc__opt:hover,
.kv-loc__opt.is-current { background: #f4f4f3; }
.kv-loc__flag {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: var(--kv-radius-round);
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(24, 25, 27, .1);
}
.kv-loc__cur { margin-left: auto; color: rgba(24, 25, 27, .8); }

.kv-acct__row:focus-visible,
.kv-loc__opt:focus-visible {
  outline: var(--kv-focus-ring);
  outline-offset: calc(-1 * var(--kv-focus-offset));
}

@media (prefers-reduced-motion: reduce) {
  .kv-acct,
  .kv-loc__list { animation: none; }
}
/* "QAT ⌄ | العربية" fits beside the centred logo down to 1140px (measured: 42px clear at 1180, 8px at 1100,
   overlap at 1024); narrower headers drop it, and the menu (phones) has Ship to + language chips */
@media (max-width: 1139px) {
  .kv-loc { display: none; }
}

/* ============================================================
   Mobile header + menu drawer + account sheet (T14)
   Source: Home-Split-Mobile header (padding 0 8px; Menu + Search |
   logo | Wishlist + Bag) and its menu: left drawer 86% (fade .4s,
   shadow), 64px top bar, Shop rows -> one level at a time (Back,
   38px title, columns, tiles, feature, View all), Services rows,
   Search / Account / Wishlist grid, Ship-to chips; account opens a
   bottom sheet (DS-05).
   ============================================================ */
@media (max-width: 760px) {
  .kv-hdr__bar { padding: 0 8px; }
  .kv-hdr__logo { padding: 0 8px; }
}
html.kv-menu-open { overflow: hidden; }

.kv-menu,
.kv-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.kv-menu::backdrop,
.kv-sheet::backdrop { background: transparent; }
.kv-menu:not([open]),
.kv-sheet:not([open]) { display: none; }

.kv-menu__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(24, 25, 27, .42);
  cursor: pointer;
  animation: kvFadeIn calc(.35s * var(--kv-motion-scale)) ease both;
}
.kv-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 86%;
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  box-shadow: 0 0 50px rgba(24, 25, 27, .22);
  animation: kvFadeIn calc(.4s * var(--kv-motion-scale)) ease both;
}
.kv-menu__top {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 8px 0 24px;
  border-bottom: 1px solid var(--kv-hdr-line);
}
.kv-menu__logo { display: block; width: auto; height: 20px; }
.kv-menu__body { flex: 1; overflow-x: hidden; overflow-y: auto; }

.kv-menu__root {
  display: flex;
  flex-direction: column;
  padding: 28px 24px 36px;
  animation: kvMenuRootIn calc(.34s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
.kv-menu__root[hidden],
.kv-menu__level[hidden] { display: none; }
.kv-menu__h { margin: 0 0 4px; }
.kv-menu__h--gap { margin-top: 36px; }
.kv-menu__h--ship { margin: 32px 0 12px; }

.kv-menu__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--kv-color-line);
  background: none;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .01em;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.kv-menu__row--s { min-height: 52px; font-size: 14.5px; }

.kv-menu__quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 36px;
  border-top: 1px solid var(--kv-color-line);
  border-bottom: 1px solid var(--kv-color-line);
}
.kv-menu__quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.kv-menu__quick-item + .kv-menu__quick-item { border-left: 1px solid var(--kv-color-line); }

.kv-menu__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.kv-menu__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(164, 160, 154, .7);
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 12px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color calc(.25s * var(--kv-motion-scale)) ease;
}
.kv-menu__chip:hover { border-color: var(--kv-color-ink); }
.kv-menu__chip.is-current { background: var(--kv-color-ink); border-color: var(--kv-color-ink); color: var(--kv-color-white); }
.kv-menu__flag {
  display: block;
  flex: none;
  width: 18px;
  height: 12px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(24, 25, 27, .14);
}
.kv-menu__chip.is-current .kv-menu__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }

.kv-menu__level {
  display: flex;
  flex-direction: column;
  padding: 12px 24px 36px;
  animation: kvMenuLevelIn calc(.34s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
.kv-menu__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--kv-size-tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
}
.kv-menu__title {
  margin: 8px 0 24px;
  font-family: var(--kv-font-display);
  font-size: 38px;
  font-weight: 400;
  line-height: 1.02;
}
/* A level title that opens the landing page (Women, Men) looks like the plain title. */
.kv-menu__title--link { display: block; color: inherit; text-decoration: none; }
.kv-menu__col { margin-bottom: 28px; }
.kv-menu__col .kv-menu__h { margin-bottom: 2px; }
.kv-menu__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kv-menu__tiles .kv-mega__tile-img { height: 150px; }
.kv-menu__feat { margin-bottom: 28px; }
.kv-menu__feat .kv-mega__feat-img { height: 210px; }

@keyframes kvMenuRootIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes kvMenuLevelIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

.kv-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  padding: 12px 24px 32px;
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  animation: kvSheetUp calc(.36s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
@keyframes kvSheetUp { from { transform: translateY(100%); } to { transform: none; } }
.kv-sheet__handle {
  align-self: center;
  width: 36px;
  height: 3px;
  margin-bottom: 8px;
  border-radius: 2px;
  background: rgba(164, 160, 154, .8);
}
.kv-sheet__head { display: flex; justify-content: space-between; align-items: center; }
.kv-sheet__title {
  margin: 0;
  font-family: var(--kv-font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.02;
}
.kv-sheet__intro {
  margin: 0 0 4px;
  font-family: var(--kv-font-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(24, 25, 27, .74);
}

.kv-menu__row:focus-visible,
.kv-menu__quick-item:focus-visible,
.kv-menu__chip:focus-visible,
.kv-menu__back:focus-visible {
  outline: var(--kv-focus-ring);
  outline-offset: calc(-1 * var(--kv-focus-offset));
}
@media (prefers-reduced-motion: reduce) {
  .kv-menu__scrim,
  .kv-menu__panel,
  .kv-menu__root,
  .kv-menu__level,
  .kv-sheet__panel { animation: none; }
}

/* ============================================================
   Footer + pre-footer (T15) - sections/kevlts-site-footer.liquid
   Source: Home-Split / Home-Split-Mobile <footer class="kf">:
   newsletter row, feature card + 6 link columns, trust row,
   social / payments / legal row. All rules scoped to .kv-ft.
   Phones (<= 760px) follow the mobile board; 761-1199px stacks the
   feature card above the columns (not specified by the boards).
   ============================================================ */
.kv-ft {
  box-sizing: border-box;
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  border-top: 1px solid rgba(164, 160, 154, .4);
  font-family: var(--kv-font-sans);
  font-weight: 300;
  line-height: normal;
}
.kv-ft *,
.kv-ft *::before,
.kv-ft *::after { box-sizing: border-box; }
.kv-ft p { margin: 0; }
.kv-ft__h {
  font-family: var(--kv-font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--kv-color-ink);
}

.kv-ft__news {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 48px;
  padding: 64px var(--kv-grid-pad);
  border-bottom: 1px solid rgba(164, 160, 154, .35);
}
.kv-ft__logo { display: block; }
.kv-ft__logo img { display: block; width: auto; height: 39px; }
.kv-ft__rule { width: 1px; height: 80px; background: rgba(164, 160, 154, .5); }
.kv-ft__news-copy { display: flex; flex-direction: column; gap: 16px; }
.kv-ft__news-h { font-size: 33px; white-space: nowrap; }
.kv-ft__news-text,
.kv-ft__news-text p { font-size: 15px; color: rgba(24, 25, 27, .7); }
.kv-ft__form { display: flex; align-items: center; gap: 48px; margin: 0; }
.kv-ft__field { width: 300px; }
.kv-ft__input {
  width: 100%;
  height: 48px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid var(--kv-color-ink);
  border-radius: 0;
  background: transparent;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 14px;
  font-weight: 300;
}
.kv-ft__input::placeholder { color: rgba(24, 25, 27, .62); }
.kv-ft__input:focus { outline: none; border-bottom-color: var(--kv-color-petrol); }
.kv-ft__input[aria-invalid="true"] { border-bottom-color: var(--kv-color-error); }
.kv-ft__error,
.kv-ft__error ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--kv-color-error); }
.kv-ft__submit { padding: 0 32px; height: var(--kv-size-button-h); }
.kv-ft__submit span { font-size: 18px; letter-spacing: 0; }
.kv-ft__done { font-size: 14px; line-height: 1.6; }

.kv-ft__main {
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr);
  gap: 56px;
  padding: 40px var(--kv-grid-pad) 32px;
}
.kv-ft__feature {
  position: relative;
  display: block;
  height: 362px;
  overflow: hidden;
  color: var(--kv-color-white);
  text-decoration: none;
}
.kv-ft__feature img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kv-ft-pos, center);
  transition: transform calc(1.2s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
a.kv-ft__feature:hover img { transform: scale(1.04); }
/* board .kf-img: the linked image also dims (a:hover opacity .78) as the photo zooms */
a.kv-ft__feature { cursor: pointer; transition: opacity calc(.3s * var(--kv-motion-scale)) ease; }
a.kv-ft__feature:hover { opacity: .78; }
.kv-ft__feature-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(24, 25, 27, .42), rgba(24, 25, 27, 0) 52%);
}
.kv-ft__feature-copy {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.kv-ft__feature-h { font-size: 28px; line-height: 1.12; color: var(--kv-color-white); }
.kv-ft__feature-link {
  align-self: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .9);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.kv-ft__nav {
  display: grid;
  grid-template-columns: repeat(6, auto);
  justify-content: space-between;
  align-items: start;
  gap: 24px;
  padding-top: 48px;
}
.kv-ft__col { display: flex; flex-direction: column; gap: 24px; }
.kv-ft__col-h { margin-bottom: 8px; font-size: 20px; }
.kv-ft__link {
  align-self: flex-start;
  font-size: 14.5px;
  color: rgba(24, 25, 27, .68);
  text-decoration: none;
  transition: color calc(.25s * var(--kv-motion-scale)) ease;
}
.kv-ft__link:hover,
.kv-ft__link:focus-visible { color: var(--kv-color-petrol); }

.kv-ft__trust {
  display: flex;
  margin: 0 64px;
  padding: 32px 0;
  border-top: 1px solid rgba(164, 160, 154, .35);
  border-bottom: 1px solid rgba(164, 160, 154, .35);
}
.kv-ft__trust-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}
.kv-ft__trust-item + .kv-ft__trust-item { border-left: 1px solid rgba(164, 160, 154, .5); }
.kv-ft__trust-copy { display: flex; flex-direction: column; gap: 8px; }
.kv-ft__trust-h { font-size: 19px; }
.kv-ft__trust-sub { font-size: 13px; color: rgba(24, 25, 27, .62); }
.kv-ft__trust-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--kv-color-ink);
  text-decoration: none;
}
.kv-ft__trust-link span { text-decoration: underline; text-underline-offset: 3px; }

.kv-ft__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px var(--kv-grid-pad) 32px;
}
.kv-ft__social { display: flex; align-items: center; gap: 40px; }
.kv-ft__label { font-size: 13.5px; color: rgba(24, 25, 27, .62); }
.kv-ft__social-links { display: flex; align-items: center; gap: 40px; }
.kv-ft__social-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: var(--kv-size-tap-min);
  font-size: 14px;
  font-weight: 400;
  color: var(--kv-color-ink);
  text-decoration: none;
}
.kv-ft__social-link:hover,
.kv-ft__social-link:focus-visible { color: var(--kv-color-petrol); }
.kv-ft__pay { display: flex; align-items: center; gap: 24px; }
.kv-ft__pay-items { display: flex; align-items: center; gap: 24px; }
.kv-ft__pay-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kv-color-ink); }
.kv-ft__pay-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 24px;
  border: 1px solid rgba(164, 160, 154, .75);
  border-radius: 4px;
}
.kv-ft__pay-icon { display: block; width: 38px; height: 24px; }
.kv-ft__legal { display: flex; align-items: center; gap: 48px; }
.kv-ft__legal-rule { width: 1px; height: 48px; background: rgba(164, 160, 154, .5); }
.kv-ft__legal-copy { display: flex; flex-direction: column; gap: 8px; }
.kv-ft__copy { font-size: 16.5px; }
.kv-ft__fine,
.kv-ft__fine p { font-size: 11px; color: rgba(24, 25, 27, .6); }

.kv-ft a:focus-visible,
.kv-ft__input:focus-visible {
  outline: var(--kv-focus-ring);
  outline-offset: var(--kv-focus-offset);
}
@media (prefers-reduced-motion: reduce) {
  .kv-ft__feature img { transition: none; }
}

@media (max-width: 1199px) and (min-width: 761px) {
  .kv-ft__news { grid-template-columns: auto 1px minmax(0, 1fr); row-gap: 28px; }
  .kv-ft__form { grid-column: 1 / -1; }
  .kv-ft__news-h { white-space: normal; }
  .kv-ft__main { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv-ft__nav { grid-template-columns: repeat(3, auto); row-gap: 36px; }
  .kv-ft__base { flex-wrap: wrap; }
}

@media (max-width: 760px) {
  .kv-ft__news {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 44px var(--kv-grid-pad) 40px;
  }
  .kv-ft__logo { align-self: flex-start; }
  .kv-ft__logo img { height: 31px; }
  .kv-ft__rule { width: 48px; height: 1px; }
  .kv-ft__news-copy { gap: 8px; }
  .kv-ft__news-h { font-size: 26px; white-space: normal; }
  .kv-ft__news-text,
  .kv-ft__news-text p { font-size: 14px; line-height: 1.6; }
  .kv-ft__form { flex-direction: column; align-items: stretch; gap: 20px; }
  .kv-ft__field { width: 100%; }
  .kv-ft__submit { width: 100%; }

  .kv-ft__main { display: block; padding: 28px var(--kv-grid-pad) 0; }
  .kv-ft__feature { height: 300px; }
  .kv-ft__feature-copy { left: 22px; right: 22px; bottom: 22px; gap: 20px; }
  .kv-ft__feature-h { font-size: 25px; }
  .kv-ft__nav {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    gap: 36px 20px;
    padding: 36px 0 32px;
  }
  .kv-ft__col { gap: 16px; }
  .kv-ft__col-h { margin-bottom: 4px; font-size: 19px; }
  .kv-ft__link { font-size: 14px; }

  .kv-ft__trust { flex-direction: column; margin: 0 20px; padding: 0; }
  .kv-ft__trust-item { justify-content: flex-start; gap: 12px; padding: 20px 0; }
  .kv-ft__trust-item + .kv-ft__trust-item { border-left: 0; border-top: 1px solid rgba(164, 160, 154, .35); }
  .kv-ft__trust-item .kv-icon { width: 26px; height: 26px; }
  .kv-ft__trust-copy { gap: 3px; }
  .kv-ft__trust-h { font-size: 16px; }
  .kv-ft__trust-sub { font-size: 11.5px; line-height: 1.4; }

  .kv-ft__base { display: block; padding: 0; }
  .kv-ft__social,
  .kv-ft__pay { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px var(--kv-grid-pad) 0; }
  .kv-ft__label { font-size: 13px; }
  .kv-ft__social-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .kv-ft__pay-items { gap: 28px; flex-wrap: wrap; }
  .kv-ft__legal { margin: 24px 20px 0; padding: 24px 0 32px; border-top: 1px solid rgba(164, 160, 154, .35); }
  .kv-ft__legal-rule { display: none; }
  .kv-ft__copy { font-size: 16px; }
  .kv-ft__fine,
  .kv-ft__fine p { line-height: 1.55; }
}

/* ============================================================
   Drawer primitive (T16) - used by the cart drawer (T17) and the
   filter/sort drawers (T22). Source: Home-Split .inR / .inLF + .cd-h
   + .cwb/.cw, Home-Split-Mobile .mdrw, DS-09 drawer rules.
   Markup contract (native modal <dialog>, opened by any
   [aria-controls="<id>"] trigger or window.kvDrawer.open(id)):
   <dialog class="kv-drawer [kv-drawer--left]" id aria-labelledby>
     <button class="kv-drawer__scrim" data-kv-drawer-close tabindex="-1" aria-label>
     <div class="kv-drawer__panel" [style="--kv-drawer-w: 560px"]>
       <div class="kv-drawer__head"><p class="kv-drawer__title" id>..</p>
         <button class="kv-close" data-kv-drawer-close>Close</button></div>
       <div class="kv-drawer__body">..</div> <div class="kv-drawer__foot">..</div>
   Width: 460px default (board cart drawer; DS-09 prose says 480px,
   the shipped board wins); 86% on phones.
   ============================================================ */
html.kv-drawer-open { overflow: hidden; scrollbar-gutter: stable; }

.kv-drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.kv-drawer::backdrop { background: transparent; }
.kv-drawer:not([open]) { display: none; }

.kv-drawer__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--kv-color-scrim);
  cursor: pointer;
  animation: kvFadeIn calc(.4s * var(--kv-motion-scale)) ease both;
}
.kv-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: var(--kv-drawer-w, 460px);
  max-width: 100%;
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  will-change: transform;
  backface-visibility: hidden;
  animation: kvInRight calc(.5s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
.kv-drawer--left .kv-drawer__panel {
  right: auto;
  left: 0;
  animation-name: kvInLeft;
}
@keyframes kvInRight { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes kvInLeft { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
/* closing (kevlts.js adds .is-closing, then closes the dialog when the panel has slid out) */
.kv-drawer.is-closing .kv-drawer__scrim { animation: kvFadeOut calc(.36s * var(--kv-motion-scale)) ease both; }
.kv-drawer.is-closing .kv-drawer__panel { animation: kvOutRight calc(.38s * var(--kv-motion-scale)) cubic-bezier(.4, 0, .2, 1) both; }
.kv-drawer--left.is-closing .kv-drawer__panel { animation-name: kvOutLeft; }
.kv-drawer.is-closing { pointer-events: none; }
@keyframes kvOutRight { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes kvOutLeft { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@keyframes kvFadeOut { from { opacity: 1; } to { opacity: 0; } }

.kv-drawer__head {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 32px;
  font-family: var(--kv-font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .01em;
}
.kv-drawer__title { margin: 0; font: inherit; letter-spacing: inherit; }
.kv-drawer__head .kv-close { margin-right: -2px; }
.kv-drawer__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.kv-drawer__foot { flex: none; }

@media (max-width: 760px) {
  .kv-drawer__scrim {
    background: rgba(24, 25, 27, .42);
    animation-duration: calc(.35s * var(--kv-motion-scale));
  }
  .kv-drawer__panel {
    width: 86%;
    max-width: 86%;
    box-shadow: 0 0 50px rgba(24, 25, 27, .22);
  }
}
@media (max-width: 480px) {
  .kv-drawer__head { padding: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-drawer__scrim,
  .kv-drawer__panel,
  .kv-drawer.is-closing .kv-drawer__scrim,
  .kv-drawer.is-closing .kv-drawer__panel { animation: none; }
}

/* ============================================================
   Cart drawer (T17) - sections/kevlts-cart-drawer.liquid on the
   T16 drawer. Source: Drawer / Drawer-empty / Drawer-mobile(-empty)
   boards (final !important overrides): grey note, 104x128 rows,
   34/38/34 stepper, underlined Remove, shadowed footer with order
   note, delivery line and 56px Ink "Checkout - subtotal".
   ============================================================ */
.kv-cart__content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kv-cart__note {
  flex: none;
  margin: 0 32px;
  padding: 16px;
  background: #f5f5f5;
  color: var(--kv-color-ink-72);
  font-family: var(--kv-font-sans);
  font-size: 12.5px;
  font-weight: 300;
  text-align: center;
}
.kv-cart__list { margin: 0; padding: 24px 32px; list-style: none; }
.kv-cart__item { display: flex; gap: 24px; }
.kv-cart__item + .kv-cart__item { margin-top: 24px; }
.kv-cart__item.is-busy { opacity: .5; pointer-events: none; }
.kv-cart__img {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 128px;
  background: var(--kv-color-white);
}
.kv-cart__img img { display: block; width: 80%; height: 80%; object-fit: contain; }
.kv-cart__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  font-family: var(--kv-font-sans);
}
.kv-cart__name {
  color: var(--kv-color-ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .005em;
  text-decoration: none;
}
.kv-cart__meta { font-size: 12.5px; color: var(--kv-color-ink-56); }
.kv-cart__price { margin-top: 4px; font-size: 14px; color: var(--kv-color-ink); }
.kv-cart__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
.kv-cart__qty {
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: 34px 38px 34px;
  align-items: stretch;
  height: 40px;
  border: 1px solid #e2e2e2;
  background: var(--kv-color-white);
}
.kv-cart__qty button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(24, 25, 27, .7);
  cursor: pointer;
}
.kv-cart__qty button:hover { background: #f5f5f5; color: var(--kv-color-ink); }
.kv-cart__qty span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--kv-color-ink);
}
.kv-cart__remove {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink-56);
  font-family: var(--kv-font-sans);
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.kv-cart__remove:hover,
.kv-cart__remove:focus-visible { color: var(--kv-color-ink); }

.kv-cart__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 24px 32px 32px;
  box-shadow: 0 -12px 28px rgba(24, 25, 27, .06);
  font-family: var(--kv-font-sans);
}
.kv-cart__note-field summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 300;
  color: var(--kv-color-ink);
}
.kv-cart__note-field summary::-webkit-details-marker { display: none; }
.kv-cart__note-field textarea {
  box-sizing: border-box;
  width: 100%;
  height: 72px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--kv-color-soft-metal);
  border-radius: 0;
  font-family: var(--kv-font-sans);
  font-size: 13px;
  resize: none;
}
.kv-cart__delivery { margin: 0; font-size: 14px; font-weight: 300; color: var(--kv-color-ink-72); }
.kv-cart__checkout {
  gap: 16px;
  min-height: 56px;
  margin-top: 16px;
  padding-top: 0;
  padding-bottom: 0;
  font-weight: 500;
  letter-spacing: .14em;
}
.kv-cart__continue { margin-top: 0; }

.kv-cart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 32px;
  text-align: center;
  font-family: var(--kv-font-sans);
}
.kv-cart__empty-h { margin: 0; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.kv-cart__empty-text { margin: 0; font-size: 14px; color: var(--kv-color-ink-72); }

.kv-cart__name:focus-visible,
.kv-cart__qty button:focus-visible,
.kv-cart__remove:focus-visible,
.kv-cart__note-field summary:focus-visible,
.kv-cart__note-field textarea:focus-visible {
  outline: var(--kv-focus-ring);
  outline-offset: var(--kv-focus-offset);
}

@media (max-width: 480px) {
  .kv-cart__note { margin: 0 24px; }
  .kv-cart__list { padding: 24px; }
  .kv-cart__foot { padding: 24px; }
}

/* ============================================================
   Back-to-top + toasts / notices (T18) - snippets/kv-overlays.liquid
   Source: Home-Split / Home-Split-Mobile .kv-top + .kv-ring (DS-09:
   "small round arrow bottom-right, appears after the hero"), DS-04
   "Toasts & notices": added-to-cart toast (top-right under the
   header, 4s, slides down 12px), confirmation toast (Ink + Pearl),
   inline notice (drawers / forms; errors #B3392F).
   ============================================================ */
.kv-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(24, 25, 27, .16);
  border-radius: 4px;
  overflow: visible;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--kv-color-ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity calc(.45s * var(--kv-motion-scale)) ease,
    visibility calc(.45s * var(--kv-motion-scale)) ease,
    transform calc(.45s * var(--kv-motion-scale)) var(--kv-motion-ease),
    background-color calc(.3s * var(--kv-motion-scale)) ease,
    color calc(.3s * var(--kv-motion-scale)) ease,
    border-color calc(.3s * var(--kv-motion-scale)) ease;
}
.kv-top.is-on { opacity: 1; visibility: visible; transform: none; }
.kv-top.is-on:hover { background: var(--kv-color-ink); color: var(--kv-color-white); border-color: var(--kv-color-ink); transform: translateY(-2px); }
.kv-top:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-top__ring {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  pointer-events: none;
}
.kv-top__ring path {
  fill: none;
  stroke: var(--kv-color-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset calc(.15s * var(--kv-motion-scale)) linear, stroke calc(.3s * var(--kv-motion-scale)) ease;
}
.kv-top.is-on:hover .kv-top__ring path { stroke: #b8913f; }

.kv-toasts {
  position: fixed;
  top: calc(var(--kv-hdr-h-top) + 12px);
  right: var(--kv-grid-pad);
  z-index: 160;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: min(400px, calc(100vw - 2 * var(--kv-grid-pad)));
  pointer-events: none;
}
.kv-toast {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  pointer-events: auto;
  font-family: var(--kv-font-sans);
  animation: kvToastIn calc(.3s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
.kv-toast.is-leaving { animation: kvToastOut calc(.25s * var(--kv-motion-scale)) ease both; }
@keyframes kvToastIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes kvToastOut { from { opacity: 1; } to { opacity: 0; } }

.kv-toast--added {
  gap: 14px;
  padding: 14px 16px;
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  box-shadow: var(--kv-shadow-pop);
}
.kv-toast__img { flex: none; width: 48px; height: 48px; object-fit: contain; mix-blend-mode: multiply; }
.kv-toast__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kv-toast__eyebrow { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--kv-color-petrol); }
.kv-toast__name {
  overflow: hidden;
  font-family: var(--kv-font-display);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.02;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kv-toast__view {
  flex: none;
  border-bottom: 1px solid var(--kv-color-ink);
  color: var(--kv-color-ink);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
}
.kv-toast__view:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }

.kv-toast--confirm {
  gap: 12px;
  padding: 14px 18px;
  background: var(--kv-color-ink);
  color: var(--kv-color-pearl);
  font-size: 13.5px;
  font-weight: 400;
}

.kv-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--kv-color-line);
  color: var(--kv-color-petrol);
  font-family: var(--kv-font-sans);
  font-size: 12.5px;
}
.kv-notice--error { color: var(--kv-color-error); }

@media (max-width: 760px) {
  .kv-top { right: 16px; bottom: 20px; width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-top { transition: none; }
  .kv-toast,
  .kv-toast.is-leaving { animation: none; }
}

/* ============================================================
   Product card + hairline grid (T20) - snippets/kv-product-card.liquid
   Source: Home-Split / Shop-Grid .pc (final overrides), .g4 / .sb-g
   hairline grids (T01), DS-09 card rules. Wishlist heart top right
   (.pc-fav, new edits 10/26).
   ============================================================ */
.kv-pc { display: flex; flex-direction: column; gap: 24px; min-width: 0; font-family: var(--kv-font-sans); }
.kv-pc__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--kv-color-white); }
.kv-pc__front,
.kv-pc__side {
  position: absolute;
  display: block;
  transition: opacity calc(.6s * var(--kv-motion-scale)) var(--kv-motion-ease), transform calc(1.2s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-pc__front { inset: 10%; width: 80%; height: 80%; object-fit: contain; }
.kv-pc__placeholder { fill: var(--kv-color-soft-metal); background: var(--kv-color-mist); }
.kv-pc__side { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.kv-pc:hover .kv-pc__side { opacity: 1; }
.kv-pc:hover .kv-pc__front { transform: scale(1.03); }
.kv-pc:hover .kv-pc__side ~ .kv-pc__qv { cursor: pointer; }
.kv-pc__badge { position: absolute; left: var(--kv-badge-offset); top: var(--kv-badge-offset); z-index: 2; pointer-events: none; }
.kv-pc__qv { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: transparent; cursor: pointer; }
.kv-pc__add {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  min-height: var(--kv-size-tap-min);
  border: 0;
  background: var(--kv-card-add-bg);
  color: var(--kv-color-pearl);
  font-family: var(--kv-font-sans);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity calc(.4s * var(--kv-motion-scale)) ease, transform calc(.5s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-pc__media:hover .kv-pc__add,
.kv-pc__add:focus-visible { opacity: 1; transform: none; }
.kv-pc__d { display: flex; flex-direction: column; gap: 8px; }
.kv-pc__n {
  color: var(--kv-color-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: .01em;
  text-decoration: none;
}
.kv-pc__p { font-size: 13px; font-weight: 300; letter-spacing: .02em; color: var(--kv-color-ink-72); }
.kv-pc__so { margin-left: 8px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--kv-color-error); }
.kv-pc__swr { display: flex; align-items: center; gap: 16px; min-height: 22px; margin-top: 8px; }
.kv-pc__swl {
  display: flex;
  gap: 16px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity calc(.35s * var(--kv-motion-scale)) ease, transform calc(.45s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-pc:hover .kv-pc__swl,
.kv-pc:focus-within .kv-pc__swl { opacity: 1; transform: none; }
.kv-pc:hover .kv-pc__cn,
.kv-pc:focus-within .kv-pc__cn { display: none; }
.kv-pc__cn { font-size: 12px; letter-spacing: .06em; color: rgba(24, 25, 27, .7); }
.kv-pc__sw {
  position: relative;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid rgba(24, 25, 27, .25);
  border-radius: var(--kv-radius-round);
  background-size: cover;
  cursor: pointer;
}
.kv-pc__sw::before { content: ""; position: absolute; inset: -14px; }
.kv-pc__sw.is-on { box-shadow: 0 0 0 2px var(--kv-color-white), 0 0 0 3px var(--kv-color-ink); }
.kv-pc:has(.kv-pc__swr:hover) .kv-pc__side,
.kv-pc:has(.kv-pc__swr:focus-within) .kv-pc__side { opacity: 0; }
.kv-pc__n:focus-visible,
.kv-pc__qv:focus-visible,
.kv-pc__sw:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }

/* hairline product grid: 4-up / 3-up / 2-up, lines in the gutters */
.kv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: var(--kv-grid-divider);
}
.kv-grid > * {
  box-sizing: border-box;
  padding: 40px 32px;
  border-right: var(--kv-grid-divider);
  border-bottom: var(--kv-grid-divider);
  background: var(--kv-color-white);
  transition: background-color calc(.5s * var(--kv-motion-scale)) ease;
}
.kv-grid > *:nth-child(4n) { border-right: 0; }
.kv-grid > .kv-pc:hover { background: #fbfbfa; }
.kv-grid .kv-pc__media { background: transparent; }
.kv-grid .kv-pc__d { align-items: center; text-align: center; gap: 8px; }
.kv-grid .kv-pc__n { max-width: 260px; font-size: 13.5px; letter-spacing: .02em; }
.kv-grid .kv-pc__p { font-size: 13px; letter-spacing: .04em; color: rgba(24, 25, 27, .62); }
.kv-grid .kv-pc__swr { justify-content: center; }
.kv-grid .kv-pc__add { left: 0; right: 0; bottom: 0; background: var(--kv-card-add-bg-grid); }
.kv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv-grid--3 > *:nth-child(4n) { border-right: var(--kv-grid-divider); }
.kv-grid--3 > *:nth-child(3n) { border-right: 0; }
@media (hover: none) {
  .kv-pc__add { opacity: 1; transform: none; }
  .kv-pc__swl { opacity: 1; transform: none; }
  .kv-pc__cn { display: none; }
}
@media (max-width: 1100px) {
  .kv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv-grid > *:nth-child(4n) { border-right: var(--kv-grid-divider); }
  .kv-grid > *:nth-child(3n) { border-right: 0; }
}
@media (max-width: 760px) {
  .kv-grid,
  .kv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-grid > *,
  .kv-grid > *:nth-child(3n),
  .kv-grid > *:nth-child(4n) { border-right: var(--kv-grid-divider); }
  .kv-grid > *:nth-child(2n) { border-right: 0; }
  .kv-grid > *:nth-child(odd) { padding: 20px 12px 24px 20px; }
  .kv-grid > *:nth-child(even) { padding: 20px 20px 24px 12px; }
  .kv-grid .kv-pc { gap: 16px; }
  .kv-grid .kv-pc__d { gap: 5px; }
  .kv-grid .kv-pc__n { font-size: 12.5px; }
  .kv-pc__badge { left: var(--kv-badge-offset-mobile); top: var(--kv-badge-offset-mobile); height: var(--kv-badge-h-mobile); padding: 0 8px; font-size: 10px; }
  .kv-pc__add { background: var(--kv-card-add-bg-mobile); }
}
@media (prefers-reduced-motion: reduce) {
  .kv-pc__front,
  .kv-pc__side,
  .kv-pc__swl,
  .kv-pc__add { transition: none; }
}

/* ============================================================
   Accordion (T23) - snippets/kv-accordion.liquid
   Source: FAQs board .gx-faq / .gx-faq2 (Final Website), DS-04.
   ============================================================ */
.kv-acc { border-bottom: 1px solid var(--kv-color-line); font-family: var(--kv-font-sans); }
.kv-acc__sum {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  color: var(--kv-color-ink);
  font-size: 15px;
  font-weight: 400;
  list-style: none;
  cursor: pointer;
}
.kv-acc__sum::-webkit-details-marker { display: none; }
.kv-acc__sum .kv-icon { flex: none; transition: transform calc(.3s * var(--kv-motion-scale)) ease; }
.kv-acc--plus[open] .kv-acc__sum .kv-icon { transform: rotate(45deg); }
.kv-acc--chevron-bottom[open] .kv-acc__sum .kv-icon { transform: rotate(180deg); }
.kv-acc__sum:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-acc__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 24px;
  color: rgba(24, 25, 27, .74);
  font-size: 14.5px;
  line-height: 1.6;
}
.kv-acc__body > :first-child { margin-top: 0; }
.kv-acc__body > :last-child { margin-bottom: 0; }

/* ============================================================
   Filter + sort (T22) - snippets/kv-facets.liquid
   Source: Shop-Grid .sb-tb / .sb-so / .sb-sl / .sb-v and the left
   filter drawer (.gx-dr.left: 480px, sticky 78px top, 28px display
   title, chip groups .gfl-g / .gfl-o, Clear all + Show N).
   ============================================================ */
.kv-tb {
  position: sticky;
  top: 0;
  z-index: 20;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 var(--kv-grid-pad);
  background: rgba(255, 255, 255, .96);
  border-top: var(--kv-grid-divider);
  border-bottom: var(--kv-grid-divider);
  font-family: var(--kv-font-sans);
}
.kv-tb > * { flex: none; white-space: nowrap; }
.kv-tb__filter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--kv-size-tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.kv-tb__filter small { font-size: 12px; color: rgba(24, 25, 27, .5); }
.kv-tb__right { display: flex; align-items: center; gap: 28px; }
.kv-sort { position: relative; }
.kv-sort__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--kv-size-tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.kv-sort__btn span { color: rgba(24, 25, 27, .5); }
.kv-sort__btn .kv-icon { transition: transform calc(.3s * var(--kv-motion-scale)) ease; }
.kv-sort__btn[aria-expanded="true"] .kv-icon { transform: rotate(180deg); }
.kv-sort__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 220px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--kv-color-white);
  box-shadow: 0 12px 36px rgba(24, 25, 27, .14);
}
.kv-sort__list[hidden] { display: none; }
.kv-sort__opt {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.kv-sort__opt:hover { background: #f6f6f6; }
.kv-sort__opt.is-on { font-weight: 500; }
.kv-tb__view { display: flex; gap: 8px; }
.kv-tb__view button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(24, 25, 27, .3);
  cursor: pointer;
}
.kv-tb__view button.is-on,
.kv-tb__view button:hover { color: var(--kv-color-ink); }
.kv-tb__filter:focus-visible,
.kv-sort__btn:focus-visible,
.kv-sort__opt:focus-visible,
.kv-tb__view button:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }

/* filter drawer = T16 drawer, "panel" variant */
.kv-drawer--panel { --kv-drawer-w: 480px; }
.kv-drawer--panel .kv-drawer__panel { box-shadow: 24px 0 60px -30px rgba(24, 25, 27, .35); }
.kv-drawer--panel .kv-drawer__head { height: 78px; padding: 0 36px; }
.kv-drawer--panel .kv-drawer__title {
  font-family: var(--kv-font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}
.kv-facets__form { margin: 0; padding: 0 36px; }
.kv-facets__group { margin: 0; padding: 20px 0; border: 0; border-top: 1px solid var(--kv-color-line); }
.kv-facets__group legend { float: left; width: 100%; margin: 0; padding: 0; }
.kv-facets__chips { clear: both; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
.kv-chip { position: relative; display: inline-flex; cursor: pointer; }
.kv-chip span {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(164, 160, 154, .7);
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 12.5px;
}
.kv-chip input:checked + span { background: var(--kv-color-ink); border-color: var(--kv-color-ink); color: var(--kv-color-white); }
.kv-chip input:focus-visible + span { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-chip.is-disabled { opacity: .4; cursor: not-allowed; }
.kv-facets__foot {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  padding: 20px 36px 28px;
}
.kv-facets__foot .kv-button { padding-left: 12px; padding-right: 12px; }
@media (max-width: 480px) {
  .kv-drawer--panel .kv-drawer__panel { width: 100%; max-width: 100%; }
  .kv-drawer--panel .kv-drawer__head { height: 64px; padding: 0 20px; }
  .kv-drawer--panel .kv-drawer__title { font-size: 24px; }
  .kv-facets__form { padding: 0 20px; }
  .kv-facets__foot { padding: 20px 20px 24px; }
}
@media (max-width: 760px) {
  .kv-tb { padding: 0 20px; }
  .kv-tb__view { display: none; }
}

/* ============================================================
   Quick view (T21) - sections/kevlts-quick-view(-content).liquid
   Source: Home-Split quick view (.pop: 980px centred, image half +
   info half, 38px title, note rows, Ink add-to-cart, details link);
   DS-05: modal .5s fade + 24px rise + .98 scale.
   ============================================================ */
html.kv-modal-open { overflow: hidden; }
.kv-modal {
  position: fixed;
  inset: 0;
  z-index: 75;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.kv-modal::backdrop { background: transparent; }
.kv-modal:not([open]) { display: none; }
.kv-modal__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--kv-color-scrim);
  cursor: pointer;
  animation: kvFadeIn calc(.4s * var(--kv-motion-scale)) ease both;
}
.kv-modal__box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 980px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
}
.kv-modal__content { animation: kvPop calc(.5s * var(--kv-motion-scale)) var(--kv-motion-ease) both; }
@keyframes kvPop { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
.kv-modal__close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.kv-qv { display: flex; min-height: 520px; font-family: var(--kv-font-sans); }
.kv-qv__media {
  position: relative;
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  background: var(--kv-color-white);
}
.kv-qv__media img,
.kv-qv__media svg { width: 78%; height: 78%; max-height: 460px; object-fit: contain; mix-blend-mode: multiply; }
.kv-qv__info { flex: 1 1 50%; box-sizing: border-box; display: flex; flex-direction: column; gap: 20px; padding: 44px 44px 40px; }
.kv-qv__eb { margin: 0; font-size: 11px; font-weight: 300; letter-spacing: .42em; text-transform: uppercase; color: var(--kv-color-ink-72); }
.kv-qv__title { margin: 0; font-family: var(--kv-font-display); font-size: 38px; font-weight: 500; line-height: 1.08; }
.kv-qv__price { font-size: 17px; letter-spacing: .06em; }
.kv-qv__notes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 16px 0;
  list-style: none;
  border-top: 1px solid var(--kv-color-soft-metal);
  border-bottom: 1px solid var(--kv-color-soft-metal);
  font-size: 13.5px;
  line-height: 1.5;
}
.kv-qv__notes li { display: flex; align-items: center; gap: 12px; }
.kv-qv__soldout { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.kv-qv__more { align-self: flex-start; }
@media (max-width: 760px) {
  .kv-qv { flex-direction: column; min-height: 0; }
  .kv-qv__media { min-height: 320px; }
  .kv-qv__info { padding: 28px 20px 28px; }
  .kv-qv__title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-modal__scrim,
  .kv-modal__content { animation: none; }
}

/* ============================================================
   Home sections (T30) - kevlts-split-hero, -product-grid,
   -category-tabs, -shop-the-look, -campaign-band, -style-tiles,
   -lookbook-rail, -brands, -statement, -instagram.
   Source: Home-Split (+ Home-Split-Mobile) sections 1-11.
   ============================================================ */
.kv-placeholder { display: block; width: 100%; height: 100%; background: var(--kv-color-mist); fill: var(--kv-color-soft-metal); }
.kv-sec {
  box-sizing: border-box;
  padding: 112px var(--kv-grid-pad);
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  border-top: 1px solid rgba(164, 160, 154, .4);
}
.kv-sec__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 48px;
}
.kv-sec__titles { display: flex; flex-direction: column; gap: 16px; }
.kv-sec__eb {
  margin: 0;
  font-family: var(--kv-font-sans);
  font-size: var(--kv-type-eyebrow-size);
  font-weight: var(--kv-type-eyebrow-wght);
  letter-spacing: var(--kv-type-eyebrow-track);
  text-transform: uppercase;
  color: var(--kv-color-petrol);
}
.kv-sec__h {
  margin: 0;
  font-family: var(--kv-font-display);
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: .005em;
}
.kv-sec__h em,
.kv-hero__h em,
.kv-statement__text em { font-style: italic; }
.kv-sec .kv-grid { margin-left: calc(-1 * var(--kv-grid-pad)); margin-right: calc(-1 * var(--kv-grid-pad)); }
.kv-sec__more { display: flex; justify-content: center; margin-top: 72px; }
.kv-sec__more .kv-button { min-width: 260px; }

/* split hero */
.kv-hero { position: relative; background: var(--kv-color-white); }
.kv-hero__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px clamp(16px, 1.6vw, 24px) 0; }
.kv-hero__tile { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; color: var(--kv-color-ink); text-decoration: none; }
.kv-hero__img { display: block; width: 100%; height: clamp(520px, calc(100vh - var(--kv-hdr-h-top) - 70px), 900px); overflow: hidden; background: var(--kv-color-mist); }
.kv-hero__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.6s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-hero__tile:hover .kv-hero__img img { transform: scale(1.03); }
.kv-hero__label {
  padding-bottom: 4px;
  line-height: normal;
  border-bottom: 1px solid transparent;
  font-family: var(--kv-font-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: border-color calc(.3s * var(--kv-motion-scale)) ease;
}
.kv-hero__tile:hover .kv-hero__label,
.kv-hero__tile:focus-visible .kv-hero__label { border-bottom-color: var(--kv-color-ink); }
.kv-hero__box {
  position: absolute;
  left: 50%;
  top: calc(14px + clamp(520px, calc(100vh - var(--kv-hdr-h-top) - 70px), 900px) / 2);
  z-index: 3;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 48px;
  transform: translate(-50%, -50%);
  background: var(--kv-color-white);
  text-align: center;
}
.kv-hero__eb { margin: 0; padding-left: .5em; font-family: var(--kv-font-sans); font-size: 11px; letter-spacing: .5em; text-transform: uppercase; color: var(--kv-color-ink-66); }
.kv-hero__h {
  margin: 0;
  padding-left: .12em;
  font-family: var(--kv-font-display);
  font-size: clamp(34px, 3.4vw, 50px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kv-hero__box .kv-section-link { margin-top: 4px; color: var(--kv-color-ink); }

/* category tabs */
.kv-tabs__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 56px; }
.kv-tabs__list { display: flex; flex-wrap: wrap; gap: 8px 40px; }
.kv-tabs__tab {
  height: 40px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: rgba(24, 25, 27, .5);
  font-family: var(--kv-font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
}
.kv-tabs__tab:hover { color: var(--kv-color-ink); }
.kv-tabs__tab.is-on { color: var(--kv-color-ink); border-bottom-color: var(--kv-color-ink); }
.kv-tabs__tab:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-tabs__panel[hidden] { display: none; }
.kv-tabs .kv-sec__more { margin-top: 56px; }

/* shop the look */
.kv-look { display: flex; flex-wrap: wrap; background: var(--kv-color-white); color: var(--kv-color-ink); border-top: 1px solid rgba(164, 160, 154, .4); }
.kv-look__copy {
  flex: 1 1 380px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 112px var(--kv-grid-pad);
}
.kv-look__h { font-size: clamp(40px, 4.6vw, 66px); }
.kv-look__text,
.kv-look__text p { max-width: 380px; margin: 0; font-family: var(--kv-font-sans); font-size: var(--kv-type-body-size); font-weight: 300; line-height: var(--kv-type-body-lh); color: rgba(24, 25, 27, .74); }
.kv-look__list { display: flex; flex-direction: column; max-width: 440px; margin: 12px 0 0; padding: 0; list-style: none; }
.kv-look__row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(164, 160, 154, .5); }
.kv-look__item { display: flex; flex: 1; align-items: center; gap: 16px; min-height: 56px; color: var(--kv-color-ink); text-decoration: none; }
.kv-look__thumb { display: flex; flex: none; align-items: center; justify-content: center; width: 56px; height: 56px; background: var(--kv-color-white); }
.kv-look__thumb img { width: 46px; height: 46px; object-fit: contain; mix-blend-mode: multiply; }
.kv-look__name { flex: 1; font-family: var(--kv-font-sans); font-size: 14px; font-weight: 300; line-height: 1.4; }
.kv-look__price { font-size: 12.5px; letter-spacing: .06em; }
.kv-look__add { width: 44px; height: 44px; border: 1px solid rgba(24, 25, 27, .3); }
.kv-look__set { align-self: flex-start; max-width: 100%; margin-top: 24px; }
/* the full-set label is one line of text (design: "Add the full set · QAR 5,850"); where the copy column is
   narrow it keeps that line by tightening the tracking, and only wraps as a whole on the smallest phones */
.kv-look__copy { container-type: inline-size; }
.kv-look__set-l { text-align: center; text-wrap: balance; }
@container (max-width: 420px) {
  .kv-look__set { padding-inline: 22px; letter-spacing: .06em; }
}
.kv-look__media { flex: 1.3 1 520px; display: flex; align-items: center; justify-content: center; background: var(--kv-color-mist); }
.kv-look__frame { position: relative; width: 100%; max-width: 760px; aspect-ratio: 971 / 1300; }
.kv-look__frame > img,
.kv-look__frame > svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.kv-look__spot { position: absolute; z-index: 1; }
.kv-look__spot.is-open { z-index: 3; }
.kv-look__hs {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.kv-look__hs::before,
.kv-look__hs::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
}
.kv-look__hs::before {
  background: var(--kv-color-white);
  box-shadow: 0 0 0 1.5px rgba(24, 25, 27, .32), 0 2px 8px rgba(24, 25, 27, .28);
  transition: transform calc(.25s * var(--kv-motion-scale)) ease, background-color calc(.25s * var(--kv-motion-scale)) ease;
}
.kv-look__hs::after { border: 1px solid rgba(255, 255, 255, .9); animation: kvPulse calc(2.4s * var(--kv-motion-scale)) ease-out infinite; }
.kv-look__hs:hover::before { transform: scale(1.2); }
.kv-look__hs[aria-expanded="true"]::before { background: var(--kv-color-petrol); box-shadow: 0 0 0 1.5px var(--kv-color-white), 0 2px 8px rgba(24, 25, 27, .35); transform: scale(1.2); }
.kv-look__hs:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
@keyframes kvPulse { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.kv-look__pop {
  position: absolute;
  top: 12px;
  left: 0;
  box-sizing: border-box;
  display: flex;
  gap: 16px;
  width: 260px;
  margin-top: 16px;
  padding: 12px;
  background: var(--kv-color-white);
  box-shadow: var(--kv-shadow-pop);
  animation: kvPop calc(.5s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
.kv-look__pop--left { left: auto; right: 0; }
.kv-look__pop[hidden] { display: none; }
.kv-look__pop-img { display: flex; flex: none; align-items: center; justify-content: center; width: 68px; height: 68px; }
.kv-look__pop-img img { width: 58px; height: 58px; object-fit: contain; mix-blend-mode: multiply; }
.kv-look__pop-d { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-family: var(--kv-font-sans); }
.kv-look__pop-n { font-size: 14px; line-height: 1.45; letter-spacing: .01em; }
.kv-look__pop-a { display: flex; gap: 16px; }
.kv-look__pop-a a,
.kv-look__pop-a button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink-72);
  font-family: var(--kv-font-sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.kv-look__pop-a button { color: var(--kv-color-ink); border-bottom: 1px solid var(--kv-color-ink); }

/* campaign band */
.kv-band { position: relative; height: 720px; overflow: hidden; background: var(--kv-color-ink); color: var(--kv-color-pearl); }
.kv-band__img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.kv-band__shade { position: absolute; inset: 0; background: rgba(24, 25, 27, .38); }
.kv-band__copy {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 24px;
  max-width: 980px;
  height: 100%;
  padding: 0 var(--kv-grid-pad) 92px;
}
.kv-band__eb { color: var(--kv-color-pearl); }
.kv-band__h { margin: 0; font-family: var(--kv-font-display); font-size: clamp(48px, 7.4vw, 112px); font-weight: 500; line-height: 1.02; }
.kv-band__h em { display: inline-block; padding: .02em .22em .1em; background: var(--kv-color-petrol); color: var(--kv-color-white); line-height: 1; }
.kv-band .kv-section-link { align-self: flex-start; }

/* style tiles */
.kv-style__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: var(--kv-grid-divider);
  border-bottom: var(--kv-grid-divider);
}
.kv-style__tile {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 20px 32px;
  border-left: var(--kv-grid-divider);
  color: var(--kv-color-ink);
  text-decoration: none;
}
.kv-style__tile:first-child { padding-left: 0; border-left: 0; }
.kv-style__tile:last-child { padding-right: 0; }
.kv-style__img { position: relative; display: block; width: 100%; height: 460px; overflow: hidden; background: #f4f4f2; }
.kv-style__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.4s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-style__tile:hover .kv-style__img img { transform: scale(1.04); }
.kv-style__n { display: flex; justify-content: space-between; align-items: center; font-family: var(--kv-font-sans); font-size: 13px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.kv-style__n .kv-icon { opacity: .55; transition: transform calc(.4s * var(--kv-motion-scale)) var(--kv-motion-ease), opacity calc(.3s * var(--kv-motion-scale)) ease; }
.kv-style__tile:hover .kv-style__n .kv-icon { transform: translateX(5px); opacity: 1; }
.kv-style__d { margin-top: -12px; font-family: var(--kv-font-sans); font-size: 13px; font-weight: 300; color: rgba(24, 25, 27, .62); }

/* lookbook rail */
.kv-rail-sec { padding-right: 0; }
.kv-rail-sec__head { padding-right: var(--kv-grid-pad); margin-bottom: 48px; }
.kv-rail-sec__nav { display: flex; gap: 12px; }
.kv-rail-sec__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(24, 25, 27, .3);
  border-radius: var(--kv-radius-round);
  background: none;
  color: var(--kv-color-ink);
  cursor: pointer;
}
.kv-rail-sec__btn:focus-visible,
.kv-rail:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-rail {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0 var(--kv-grid-pad) 20px 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.kv-rail__item { flex: none; display: flex; flex-direction: column; gap: 16px; width: 340px; scroll-snap-align: start; }
.kv-rail__link { display: contents; color: inherit; text-decoration: none; }
.kv-rail__img { display: block; height: 440px; overflow: hidden; background: var(--kv-color-white); }
.kv-rail__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform calc(.9s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-rail__item:hover .kv-rail__img img { transform: scale(1.05); }
.kv-rail__no { font-family: var(--kv-font-sans); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--kv-color-petrol); }
.kv-rail__title { margin-top: -8px; font-family: var(--kv-font-display); font-size: 26px; font-weight: 500; line-height: 1.02; }

/* brands */
.kv-brands { padding-top: 120px; }
.kv-brands__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
.kv-brands__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  padding: 0 12px;
  box-shadow: inset 0 0 0 1px var(--kv-color-line);
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  text-decoration: none;
  transition: box-shadow calc(.35s * var(--kv-motion-scale)) ease;
}
.kv-brands__tile:hover,
.kv-brands__tile:focus-visible { box-shadow: inset 0 0 0 1px var(--kv-color-ink); }
.kv-brands__logo { display: block; width: auto; max-width: 100%; height: 30px; object-fit: contain; transition: transform calc(.9s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-brands__tile:hover .kv-brands__logo { transform: scale(1.06); }
.kv-brands__name { font-family: var(--kv-font-display); font-size: 18px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-align: center; }

/* statement */
.kv-statement { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-top: 152px; padding-bottom: 152px; text-align: center; }
.kv-statement__text { max-width: 1040px; margin: 0; font-family: var(--kv-font-display); font-size: clamp(34px, 4.2vw, 60px); font-weight: 500; line-height: 1.15; }
.kv-statement__text em { color: #1a565b; }

/* instagram */
.kv-ig { padding-top: 0; padding-bottom: 120px; }
.kv-ig__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  padding-top: 40px;
  border-top: 1px solid rgba(164, 160, 154, .5);
}
.kv-ig__handle { font-family: var(--kv-font-display); font-size: 34px; font-weight: 500; }
.kv-ig__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.kv-ig__tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.kv-ig__tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kv-ig__ov {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 25, 27, .45);
  color: var(--kv-color-pearl);
  opacity: 0;
  transition: opacity calc(.4s * var(--kv-motion-scale)) ease;
}
.kv-ig__tile:hover .kv-ig__ov,
.kv-ig__tile:focus-visible .kv-ig__ov { opacity: 1; }

@media (max-width: 1024px) {
  .kv-style__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-style__tile:nth-child(odd) { padding-left: 0; border-left: 0; }
  .kv-style__tile:nth-child(even) { padding-right: 0; }
  .kv-style__tile:nth-child(n+3) { border-top: var(--kv-grid-divider); }
  .kv-style__img { height: 420px; }
}
@media (max-width: 760px) {
  .kv-sec { padding: 72px var(--kv-grid-pad); }
  .kv-sec__h { font-size: 34px; }
  .kv-hero__grid { gap: 8px; padding: 12px 8px 0; }
  .kv-hero__tile { gap: 12px; }
  .kv-hero__img { height: 520px; }
  .kv-hero__label { font-size: 10.5px; }
  .kv-hero__box { top: 270px; width: 206px; gap: 8px; padding: 20px 20px 16px; }
  .kv-hero__eb { font-size: 9.5px; letter-spacing: .42em; padding-left: .42em; }
  .kv-hero__h { font-size: 25px; letter-spacing: .1em; line-height: 1.1; }
  .kv-hero__box .kv-section-link { font-size: 10.5px; }
  .kv-look__copy { padding: 72px var(--kv-grid-pad); }
  .kv-look__media { flex-basis: 100%; }
  .kv-band { height: 560px; }
  .kv-band__copy { padding-bottom: 56px; }
  .kv-brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .kv-brands__tile { height: 84px; }
  .kv-brands__logo { height: 17px; }
  .kv-brands__name { font-size: 12px; }
  .kv-rail__item { width: 78vw; }
  .kv-rail__img { height: 380px; }
  .kv-rail-sec__nav { display: none; }
  .kv-statement { padding-top: 96px; padding-bottom: 96px; }
  .kv-ig { padding-bottom: 72px; }
  .kv-ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-look__hs::after,
  .kv-look__pop { animation: none; }
}

/* ============================================================
   Shared page parts (T31-T35): breadcrumb, prose, arrow link.
   Source: Shop-Grid / ClientCare breadcrumb (11px, #646568, #A4A09A
   slashes); ClientCare prose (32px display h2, 15px / 1.75 text,
   Petrol-dash list rows with hairlines); Campaign .cp-a link.
   ============================================================ */
.kv-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--kv-font-sans); font-size: 11px; color: #646568; }
.kv-crumbs a { color: #646568; text-decoration: none; }
.kv-crumbs a:hover { color: var(--kv-color-ink); text-decoration: underline; text-underline-offset: 3px; }
.kv-crumbs [aria-hidden="true"] { color: var(--kv-color-soft-metal); }
.kv-crumbs [aria-current] { color: var(--kv-color-ink); }

.kv-prose { font-family: var(--kv-font-sans); font-size: 15px; line-height: 1.75; color: rgba(24, 25, 27, .74); }
.kv-prose > * { margin: 0; }
.kv-prose > * + * { margin-top: 20px; }
.kv-prose > * + h2 { margin-top: 56px; }
.kv-prose h2 { font-family: var(--kv-font-display); font-size: 32px; font-weight: 500; line-height: 1.1; color: var(--kv-color-ink); }
.kv-prose h3 { font-family: var(--kv-font-display); font-size: 24px; font-weight: 500; line-height: 1.15; color: var(--kv-color-ink); }
.kv-prose p,
.kv-prose ul,
.kv-prose ol { max-width: 680px; }
.kv-prose ul { padding: 0; list-style: none; }
.kv-prose ul > li {
  display: flex;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kv-color-line);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--kv-color-ink);
}
.kv-prose ul > li::before { content: "\2014"; flex: none; color: var(--kv-color-petrol); }
.kv-prose ol { padding-left: 1.2em; }
.kv-prose a { color: var(--kv-color-ink); text-decoration: underline; text-underline-offset: 3px; }
.kv-prose strong { font-weight: 500; color: var(--kv-color-ink); }
.kv-prose table { width: 100%; border-collapse: collapse; border: 1px solid rgba(164, 160, 154, .4); font-size: 13px; text-align: center; }
.kv-prose th { padding: 16px 8px; background: #f4f2ee; font-size: 12px; font-weight: 500; color: var(--kv-color-ink); }
.kv-prose td { padding: 12px 8px; border-top: 1px solid rgba(164, 160, 154, .28); color: rgba(24, 25, 27, .82); }
.kv-prose img { max-width: 100%; height: auto; }

.kv-arrow-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--kv-color-ink);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
}
.kv-arrow-link .kv-icon { transition: transform calc(.4s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-arrow-link:hover .kv-icon { transform: translateX(4px); }
.kv-arrow-link:focus-visible,
.kv-crumbs a:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
@media (max-width: 760px) {
  .kv-prose h2 { font-size: 26px; }
  .kv-prose > * + h2 { margin-top: 44px; }
}

/* ============================================================
   Gender landing hero (T31) - sections/kevlts-landing-hero.liquid
   Source: Women / Men #top (.lh, .lh-chips, .lchip); mobile: copy
   under a 500px image in Ink, swipeable Ink chips.
   ============================================================ */
.kv-lh { position: relative; background: var(--kv-color-white); }
.kv-lh__media {
  position: relative;
  height: clamp(520px, calc(100vh - var(--kv-hdr-h-top) - 70px), 900px);
  margin: 16px clamp(16px, 1.6vw, 24px) 0;
  overflow: hidden;
  background: #232325;
}
.kv-lh__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform calc(1.8s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-lh:hover .kv-lh__img { transform: scale(1.02); }
.kv-lh__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(24, 25, 27, .66) 0%, rgba(24, 25, 27, .34) 30%, rgba(24, 25, 27, 0) 58%),
    linear-gradient(to right, rgba(24, 25, 27, .3) 0%, rgba(24, 25, 27, 0) 42%);
}
.kv-lh__copy {
  position: absolute;
  left: clamp(16px, 1.6vw, 24px);
  right: clamp(16px, 1.6vw, 24px);
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  padding: 0 clamp(24px, 4.4vw, 64px) clamp(36px, 4.4vw, 60px);
  color: var(--kv-color-pearl);
  text-shadow: 0 1px 18px rgba(24, 25, 27, .28);
}
.kv-lh__text { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.kv-lh__eb { color: var(--kv-color-pearl); }
.kv-lh__h { margin: 0; font-family: var(--kv-font-display); font-size: clamp(64px, 7.6vw, 112px); font-weight: 400; line-height: .92; }
.kv-lh__p { max-width: 420px; margin: 0; font-family: var(--kv-font-sans); font-size: 15px; line-height: 1.7; color: rgba(246, 244, 238, .86); }
.kv-lh__chips { display: flex; flex-wrap: wrap; gap: 12px; }
.kv-lchip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--kv-size-tap-min);
  padding: 0 20px;
  border: 1px solid rgba(246, 244, 238, .62);
  color: var(--kv-color-pearl);
  font-family: var(--kv-font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  transition: background-color calc(.3s * var(--kv-motion-scale)) ease, color calc(.3s * var(--kv-motion-scale)) ease;
}
.kv-lchip:hover,
.kv-lchip:focus-visible { background: var(--kv-color-pearl); border-color: var(--kv-color-pearl); color: var(--kv-color-ink); }
.kv-lchip:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
@media (max-width: 760px) {
  .kv-lh__media { height: 500px; margin: 12px 8px 0; }
  .kv-lh__img { object-position: var(--kv-lh-pos-m, 37% 50%) !important; }
  .kv-lh__shade { display: none; }
  .kv-lh__copy {
    position: static;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    padding: 32px 20px 8px;
    color: var(--kv-color-ink);
    text-shadow: none;
  }
  .kv-lh__text { gap: 16px; }
  .kv-lh__eb { font-size: 11px; color: var(--kv-color-petrol); }
  .kv-lh__h { font-size: 58px; line-height: .95; }
  .kv-lh__p { font-size: 14px; line-height: 1.65; color: rgba(24, 25, 27, .74); }
  .kv-lh__chips { flex-wrap: nowrap; gap: 8px; margin: 8px -20px 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .kv-lh__chips::-webkit-scrollbar { display: none; }
  .kv-lchip { flex: none; padding: 0 16px; border-color: rgba(24, 25, 27, .35); color: var(--kv-color-ink); white-space: nowrap; scroll-snap-align: start; }
  .kv-lchip:hover,
  .kv-lchip:focus-visible { background: var(--kv-color-ink); border-color: var(--kv-color-ink); color: var(--kv-color-white); }
}
@media (prefers-reduced-motion: reduce) {
  .kv-lh__img { transition: none; }
}

/* ============================================================
   Collection listing (T32) - sections/kevlts-main-collection.liquid
   Source: Shop-Grid (+ mobile) final overrides: 40px centred title
   (30px left on phones), 13px category links, square card media in
   the hairline grid (inset to the column edge from 768px), numbered
   pagination, editorial block (7fr / 5fr, 600px image).
   The sticky toolbar sits under the compact header while the header
   is showing (the board's prototype had no returning header).
   ============================================================ */
.kv-tb { transition: top calc(.5s * var(--kv-motion-scale)) var(--kv-motion-ease); }
html:has(.kv-hdr:not([data-state="hidden"])) .kv-tb { top: var(--kv-hdr-h-compact); }
.kv-coll { background: var(--kv-color-white); color: var(--kv-color-ink); }
.kv-coll__hd { padding: 20px var(--kv-grid-pad) 0; }
.kv-coll__hd--crumbs { padding-bottom: 16px; } /* collection title hidden: the breadcrumb sits above the toolbar */
.kv-coll__ti { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0 16px; text-align: center; }
.kv-coll__h1 { margin: 0; font-family: var(--kv-font-display); font-size: 40px; font-weight: 400; line-height: 1.05; }
.kv-coll__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-top: 8px; }
.kv-coll__cat {
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  color: rgba(24, 25, 27, .56);
  font-family: var(--kv-font-sans);
  font-size: 13px;
  text-decoration: none;
  transition: color calc(.25s * var(--kv-motion-scale)) ease, border-color calc(.25s * var(--kv-motion-scale)) ease;
}
.kv-coll__cat:hover { color: var(--kv-color-ink); }
.kv-coll__cat.is-on { color: var(--kv-color-ink); border-bottom-color: var(--kv-color-ink); }
.kv-coll__cat:focus-visible,
.kv-pag a:focus-visible,
.kv-ed__cta:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-grid--sq .kv-pc__media { aspect-ratio: 1 / 1; }
.kv-coll .kv-grid { margin-top: 28px; }
@media (min-width: 768px) {
  .kv-coll .kv-grid {
    margin-left: calc(var(--kv-grid-pad) - var(--kv-grid-gutter) / 2);
    margin-right: calc(var(--kv-grid-pad) - var(--kv-grid-gutter) / 2);
    border-top: 0;
    border-left: var(--kv-grid-divider);
  }
}
.kv-coll__empty { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 96px var(--kv-grid-pad); font-family: var(--kv-font-sans); font-size: 15px; text-align: center; }
.kv-coll__empty p { margin: 0; }
.kv-pag { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 56px var(--kv-grid-pad) 0; font-family: var(--kv-font-sans); }
.kv-pag__n,
.kv-pag__step {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-bottom: 1px solid transparent;
  color: rgba(24, 25, 27, .62);
  font-size: 13px;
  text-decoration: none;
}
.kv-pag__n:hover,
.kv-pag__step:hover { color: var(--kv-color-ink); }
.kv-pag__n.is-on { color: var(--kv-color-ink); border-bottom-color: var(--kv-color-ink); }
.kv-pag__step { color: var(--kv-color-ink); }

.kv-ed {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  margin-top: 96px;
  border-top: var(--kv-grid-divider);
  border-bottom: var(--kv-grid-divider);
}
.kv-ed__img { position: relative; display: block; min-height: 600px; overflow: hidden; background: var(--kv-color-white); }
/* wide screens: the band grows with the width (portrait photos keep the face and the bag in frame) */
@media (min-width: 1500px) { .kv-ed__img { min-height: min(40vw, 800px); } }
.kv-ed__img img,
.kv-ed__img svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--kv-ed-pos, center 30%);
  transition: transform calc(1.4s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-ed:hover .kv-ed__img img { transform: scale(1.03); }
.kv-ed__img--still { background: #f7f7f5; }
.kv-ed__img--still img { inset: 12%; width: 76%; height: 76%; object-fit: contain; mix-blend-mode: multiply; }
.kv-ed__t { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 56px var(--kv-grid-pad) 56px 56px; font-family: var(--kv-font-sans); }
.kv-ed__h { margin: 0; font-family: var(--kv-font-display); font-size: 44px; font-weight: 400; line-height: 1.05; }
.kv-ed__p,
.kv-ed__p p { max-width: 380px; margin: 0; font-size: 14.5px; line-height: 1.75; color: rgba(24, 25, 27, .7); }
.kv-ed__pr { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 8px; font-size: 13px; color: var(--kv-color-ink); }
.kv-ed__pr span + span { color: rgba(24, 25, 27, .6); }
.kv-ed__cta {
  box-sizing: border-box;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 28px;
  border: 1px solid var(--kv-color-ink);
  background: var(--kv-color-ink);
  color: var(--kv-color-white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color calc(.3s * var(--kv-motion-scale)) ease, border-color calc(.3s * var(--kv-motion-scale)) ease;
}
.kv-ed__cta:hover { background: var(--kv-color-petrol); border-color: var(--kv-color-petrol); }
.kv-ed__cta .kv-icon { transition: transform calc(.3s * var(--kv-motion-scale)) ease; }
.kv-ed__cta:hover .kv-icon { transform: translateX(4px); }
@media (max-width: 760px) {
  .kv-coll__hd { padding: 12px 20px 0; }
  .kv-coll__hd--crumbs { padding-bottom: 12px; }
  .kv-coll__ti { align-items: flex-start; gap: 8px; padding: 16px 0 12px; text-align: left; }
  .kv-coll__h1 { font-size: 30px; }
  .kv-coll__cats { align-self: stretch; flex-wrap: nowrap; justify-content: flex-start; gap: 24px; margin: 4px -20px 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
  .kv-coll__cats::-webkit-scrollbar { display: none; }
  .kv-coll__cat { flex: none; white-space: nowrap; }
  .kv-coll .kv-grid { margin-top: 20px; }
  .kv-ed { grid-template-columns: minmax(0, 1fr); margin-top: 64px; }
  .kv-ed__img { min-height: 380px; }
  .kv-ed__t { gap: 16px; padding: 28px 20px 36px; }
  .kv-ed__h { font-size: 32px; }
  .kv-ed__cta { align-self: stretch; justify-content: center; }
}

/* ============================================================
   Product page, option B (T33) - sections/kevlts-main-product.liquid
   Source: ProductB-constance (current snapshot) + ProductB-clic-h,
   desktop + mobile, final overrides: 780px stage with two image
   panels, floating 4-column card, 52px square swatches (texture
   image, or the colour under the SVG leather grain), 36px size chips,
   Ink add-to-cart, Description / Delivery & returns, size guide
   drawer, white full-screen lightbox. No heart (wishlist is T39).
   ============================================================ */
html.kv-lb-open { overflow: hidden; }
.kv-pb { position: relative; background: var(--kv-color-white); color: var(--kv-color-ink); font-family: var(--kv-font-sans); }
.kv-pb__stage { position: relative; height: 780px; overflow: hidden; background: var(--kv-color-white); }
.kv-pb__track {
  display: flex;
  gap: 2px;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: var(--kv-color-white);
}
.kv-pb__track::-webkit-scrollbar { display: none; }
.kv-pb__track.is-drag { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.kv-pb__track:focus-visible { outline: var(--kv-focus-ring); outline-offset: -2px; }
.kv-pb__pan { display: flex; flex: 0 0 calc(50% - 1px); height: 100%; scroll-snap-align: start; background: var(--kv-color-white); }
.kv-pb__open { display: flex; flex: 1; align-items: center; justify-content: center; padding: 0; border: 0; background: none; overflow: hidden; cursor: zoom-in; }
.kv-pb__track.is-drag .kv-pb__open { cursor: grabbing; }
.kv-pb__open img { display: block; user-select: none; -webkit-user-drag: none; transition: transform calc(1.2s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-pb__open:hover img { transform: scale(1.02); }
.kv-pb__pan--contain img,
.kv-pb__pan--contain svg { width: 76%; height: 76%; object-fit: contain; }
.kv-pb__pan--cover img { width: 100%; height: 100%; object-fit: cover; }
.kv-pb__open:focus-visible { outline: var(--kv-focus-ring); outline-offset: -4px; }
.kv-pb__back {
  position: absolute;
  left: var(--kv-grid-pad);
  top: 22px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  color: var(--kv-color-ink);
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.kv-pb__back:hover,
.kv-pb__back:focus-visible { color: var(--kv-color-petrol); text-decoration-thickness: 2px; }
.kv-pb__th { position: absolute; left: var(--kv-grid-pad); bottom: 22px; z-index: 4; display: flex; gap: 8px; }
.kv-pb__th button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  background: var(--kv-color-white);
  box-shadow: 0 1px 4px rgba(24, 25, 27, .1);
  cursor: pointer;
}
.kv-pb__th img { width: 36px; height: 36px; object-fit: contain; }
.kv-pb__th button.is-on { border-color: var(--kv-color-ink); }
.kv-pb__th button:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-pb__dots { display: none; }
.kv-pb__card {
  position: absolute;
  right: var(--kv-grid-pad);
  bottom: 32px;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: max(var(--kv-grid-s4), 340px);
  max-height: calc(100% - 64px);
  padding: 24px 24px 20px;
  overflow-y: auto;
  background: var(--kv-color-white);
  box-shadow: 0 12px 40px rgba(24, 25, 27, .12);
}
.kv-pb__n { margin: 0; font-family: var(--kv-font-sans); font-size: 16px; font-weight: 500; line-height: 1.35; }
.kv-rv { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; margin-top: -8px; color: var(--kv-color-ink); text-decoration: none; }
.kv-rv__s { display: inline-flex; gap: 2px; font-size: 13px; line-height: 1; }
.kv-rv__star { color: rgba(24, 25, 27, .2); }
.kv-rv__star.is-on { color: var(--kv-color-ink); }
.kv-rv__n { font-size: 12.5px; color: var(--kv-color-ink-72); text-decoration: underline; text-underline-offset: 3px; }
.kv-rv:hover .kv-rv__n { color: var(--kv-color-ink); }
/* reviews summary popover on the stars (board .rvw / .rvp) */
.kv-pb__card .kv-rv__star.is-on { color: #b8913f; }
/* the card scrolls on short screens; let the reviews popover overflow it while open (card lists float: kevlts.js) */
.kv-pb__card:has(.kv-rvw:hover),
.kv-pb__card:has(.kv-rvw:focus-within) { overflow: visible; }
.kv-rvw { position: relative; align-self: flex-start; margin-top: -8px; }
.kv-rvw .kv-rv { margin-top: 0; }
.kv-rvp {
  position: absolute;
  left: -14px;
  top: calc(100% + 14px);
  z-index: 40;
  width: 320px;
  box-sizing: border-box;
  padding: 20px 24px;
  background: var(--kv-color-white);
  border: 1px solid var(--kv-color-line);
  box-shadow: 0 24px 48px -24px rgba(24, 25, 27, .28);
  font-family: var(--kv-font-sans);
  color: var(--kv-color-ink);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity calc(.3s * var(--kv-motion-scale)) ease, transform calc(.35s * var(--kv-motion-scale)) var(--kv-motion-ease), visibility 0s linear calc(.35s * var(--kv-motion-scale));
}
.kv-rvp::before { content: ""; position: absolute; left: 30px; top: -6px; width: 10px; height: 10px; background: var(--kv-color-white); border-left: 1px solid var(--kv-color-line); border-top: 1px solid var(--kv-color-line); transform: rotate(45deg); }
.kv-rvp::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.kv-rvw:hover .kv-rvp,
.kv-rvw:focus-within .kv-rvp { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kv-rvp__h { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.kv-rvp__a { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; font-size: 12px; color: var(--kv-color-ink-72); }
.kv-rvp__a .kv-rv__s { font-size: 12px; }
.kv-rvp__a .kv-rv__star.is-on { color: #b8913f; }
.kv-rvp__rows[hidden] { display: none; }
.kv-rvp__r { display: grid; grid-template-columns: 54px 1fr 36px; align-items: center; gap: 12px; height: 26px; font-size: 12px; }
.kv-rvp__r i { position: relative; display: block; height: 4px; overflow: hidden; background: #efede8; }
.kv-rvp__r i b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--kv-color-petrol); }
.kv-rvp__r span:last-child { text-align: right; color: rgba(24, 25, 27, .62); }
.kv-rvp__r.is-z { color: rgba(24, 25, 27, .45); }
.kv-rvp__l { display: block; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kv-color-line); text-align: center; font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--kv-color-ink); text-decoration: underline; text-underline-offset: 4px; }
.kv-rvp__l:hover { color: var(--kv-color-petrol); }
@media (max-width: 480px) {
  .kv-rvp { left: 0; width: 300px; }
  .kv-rvp::before { left: 16px; }
}
@media (prefers-reduced-motion: reduce) { .kv-rvp { transition: none; } }
.kv-pb__form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.kv-pb__opt { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.kv-pb__k { display: flex; align-items: baseline; gap: 8px; padding: 0; font-size: 13px; color: var(--kv-color-ink); }
.kv-pb__kn { font-weight: 500; }
.kv-pb__kn::after { content: ":"; }
.kv-pb__k b { font-weight: 400; color: rgba(24, 25, 27, .56); }
.kv-pb__sgl {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.kv-pb__sw { display: flex; flex-wrap: wrap; gap: 12px; }
.kv-pb__s {
  position: relative;
  box-sizing: border-box;
  flex: none;
  width: 52px;
  height: 52px;
  padding: 4px;
  border: 1px solid #e2e2e2;
  background: var(--kv-color-white);
  cursor: pointer;
  transition: border-color calc(.25s * var(--kv-motion-scale)) ease, box-shadow calc(.25s * var(--kv-motion-scale)) ease;
}
.kv-pb__s:hover { border-color: rgba(24, 25, 27, .45); }
.kv-pb__s:has(input:checked) { border-color: var(--kv-color-ink); box-shadow: inset 0 0 0 1px var(--kv-color-ink); }
.kv-pb__tx { display: block; width: 100%; height: 100%; background-position: center; background-size: cover; box-shadow: inset 0 0 0 1px rgba(24, 25, 27, .08); }
.kv-pb__tx--gr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='7' stitchTiles='stitch' result='t'/%3E%3CfeDiffuseLighting in='t' surfaceScale='2.2' diffuseConstant='1' lighting-color='rgb(148,148,148)'%3E%3CfeDistantLight azimuth='225' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23g)'/%3E%3C/svg%3E");
  background-position: 0 0;
  background-size: 96px 96px;
  background-repeat: repeat;
  background-blend-mode: soft-light;
  box-shadow: none;
}
.kv-pb__ch { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.kv-pb__ch::-webkit-scrollbar { display: none; }
.kv-pb__c {
  position: relative;
  box-sizing: border-box;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #e2e2e2;
  background: var(--kv-color-white);
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
}
.kv-pb__c:hover { border-color: rgba(24, 25, 27, .45); }
.kv-pb__c:has(input:checked) { border-color: var(--kv-color-ink); box-shadow: inset 0 0 0 1px var(--kv-color-ink); }
.kv-pb__s.is-na,
.kv-pb__c.is-na { opacity: .38; }
.kv-pb__s.is-na:has(input:checked),
.kv-pb__c.is-na:has(input:checked) { opacity: 1; }
.kv-pb__s:has(input:focus-visible),
.kv-pb__c:has(input:focus-visible),
.kv-pb__sgl:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-pb__err { margin: -4px 0 0; font-size: 12px; color: var(--kv-color-error); }
.kv-pb__err[hidden] { display: none; }
.kv-pb__pr { display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; font-size: 16px; font-weight: 400; }
.kv-pb__pr s { font-size: 13px; color: rgba(24, 25, 27, .42); }
.kv-pb__dv { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 16px 0 4px; border-top: 1px solid rgba(164, 160, 154, .35); }
.kv-pb__dv-r { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.kv-pb__dv-t { color: rgba(24, 25, 27, .62); white-space: nowrap; }
.kv-pb__dv-dd { position: relative; display: inline-flex; align-items: center; }
.kv-pb__dv-s {
  appearance: none;
  -webkit-appearance: none;
  padding: 2px 18px 3px 0;
  border: 0;
  border-bottom: 1px solid rgba(24, 25, 27, .4);
  border-radius: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.kv-pb__dv-s:hover { border-bottom-color: var(--kv-color-ink); }
.kv-pb__dv-s:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-pb__dv-dd .kv-icon { position: absolute; right: 0; pointer-events: none; }
.kv-pb__dv-fee { margin-left: auto; font-size: 14px; font-weight: 500; white-space: nowrap; }
.kv-pb__dv-n { margin: 0; font-size: 12px; line-height: 1.5; color: rgba(24, 25, 27, .6); }
.kv-pb__dv-n[hidden] { display: none; }
/* delivery areas under Delivery to (e.g. Qatar's municipalities) */
.kv-pb__ar { display: flex; flex-direction: column; gap: 4px; }
.kv-pb__ar[hidden] { display: none; }
.kv-pb__ar-h { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(24, 25, 27, .72); }
.kv-pb__ar-h b { font-weight: 500; color: var(--kv-color-ink); }
.kv-pb__ar-r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 12px; line-height: 1.5; color: rgba(24, 25, 27, .6); }
.kv-pb__ar-dd { position: relative; display: inline-flex; }
.kv-pb__ar-b { display: inline-flex; align-items: center; gap: 6px; padding: 0 0 1px; border: 0; border-bottom: 1px solid rgba(24, 25, 27, .4); background: none; font-family: var(--kv-font-sans); font-size: 12px; color: var(--kv-color-ink); cursor: pointer; }
.kv-pb__ar-b:hover { border-bottom-color: var(--kv-color-ink); }
.kv-pb__ar-b:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-pb__ar-b .kv-icon { transition: transform calc(.25s * var(--kv-motion-scale)) ease; }
.kv-pb__ar-b[aria-expanded="true"] .kv-icon { transform: rotate(180deg); }
.kv-pb__ar-l { top: calc(100% + 8px); bottom: auto; min-width: 220px; }
.kv-pb__ar-l .kv-dvp__o { padding: 10px 16px; }
.kv-pb__dv-n b { font-weight: 500; color: var(--kv-color-petrol); }
.kv-pb__act { display: grid; grid-template-columns: minmax(0, 1fr); }
.kv-pb__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  border: 0;
  background: var(--kv-color-ink);
  color: var(--kv-color-white);
  font-family: var(--kv-font-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color calc(.3s * var(--kv-motion-scale)) ease;
}
.kv-pb__add:hover { background: var(--kv-color-petrol); }
.kv-pb__add:disabled { background: var(--kv-color-ink); opacity: .45; cursor: not-allowed; }
.kv-pb__add:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-pb__more {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--kv-grid-gutter);
  padding: 88px var(--kv-grid-pad) 40px;
}
.kv-pb__h { margin: 0 0 20px; font-family: var(--kv-font-display); font-size: 30px; font-weight: 400; }
.kv-pb__p { max-width: 500px; font-size: 14.5px; line-height: 1.8; }
.kv-dv { display: flex; flex-direction: column; }
.kv-dv__tabs { display: flex; gap: 40px; margin: 2px 0 28px; border-bottom: 1px solid var(--kv-color-line); }
.kv-dv__t {
  margin: 0 0 -1px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: rgba(24, 25, 27, .45);
  font-family: var(--kv-font-sans);
  font-size: 14.5px;
  cursor: pointer;
  transition: color calc(.25s * var(--kv-motion-scale)) ease, border-color calc(.25s * var(--kv-motion-scale)) ease;
}
.kv-dv__t:hover { color: var(--kv-color-ink); }
.kv-dv__t.is-on { color: var(--kv-color-ink); border-bottom-color: var(--kv-color-ink); }
.kv-dv__t:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-dv__p { font-size: 14.5px; line-height: 1.8; }
.kv-dv__p[hidden] { display: none; }
.kv-dv__p .kv-section-link { display: inline-block; margin-top: 24px; }
/* Deliver to in the Delivery tab (board .dv .ed): the chosen country (read only), Arrives + Delivery fee rows */
.kv-dvb { display: flex; flex-direction: column; gap: 12px; margin: 0 0 24px; }
.kv-dvb__h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: rgba(24, 25, 27, .6); }
.kv-dvb__i { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: rgba(24, 25, 27, .5); cursor: pointer; }
.kv-dvb__i:hover,
.kv-dvb__i[aria-expanded="true"] { color: var(--kv-color-ink); }
.kv-dvb__i:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-dvb__tip { margin: 0; font-size: 12px; line-height: 1.6; color: rgba(24, 25, 27, .62); }
.kv-dvb__tip[hidden] { display: none; }
/* read only: the country chosen in the purchase card */
.kv-dvb__show { display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 52px; margin: 0; padding: 0 20px; border: 1px solid rgba(164, 160, 154, .6); font-size: 14.5px; color: var(--kv-color-ink); }
.kv-dvb__show img[hidden] { display: none; }
.kv-dvb__r { display: flex; flex-direction: column; margin-top: 8px; }
.kv-dvb__rw { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid #ededed; font-size: 14.5px; }
.kv-dvb__rw[hidden] { display: none; } /* Delivery fee row outside Qatar (setting delivery_fees_qatar_only) */
.kv-dvb__rw > span { color: rgba(24, 25, 27, .6); }
.kv-dvb__rw b { font-weight: 400; color: var(--kv-color-ink); }
.kv-dvb__fee { font-family: var(--kv-font-display); font-size: 22px; line-height: 1; }
.kv-dv__p .kv-prose { margin: 0 0 12px; }
.kv-dvb__n { margin: 0; font-size: 13px; line-height: 1.6; color: var(--kv-color-petrol); }
.kv-dv__as { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--kv-color-line); }
.kv-dv__as > span { display: flex; align-items: center; gap: 16px; font-size: 14px; line-height: 1.5; }
.kv-dv__as > span + span { padding-inline-start: 28px; border-inline-start: 1px solid var(--kv-color-line); }
.kv-dv__as .kv-icon { flex: none; }
.kv-pb__rv { margin: 0 var(--kv-grid-pad); padding: 56px 0 24px; border-top: 1px solid #ededed; }
.kv-sg__body { padding: 0 36px 48px; font-size: 13.5px; line-height: 1.7; }
.kv-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--kv-color-white);
}
.kv-lb[open] { display: flex; align-items: center; justify-content: center; }
.kv-lb::backdrop { background: var(--kv-color-white); }
.kv-lb__i {
  width: auto;
  height: auto;
  max-width: 86%;
  max-height: 86%;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform calc(.45s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-lb__i.is-z { cursor: zoom-out; transform: scale(2); }
.kv-lb__hint { position: absolute; left: 50%; top: 26px; z-index: 2; margin: 0; transform: translateX(-50%); font-family: var(--kv-font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(24, 25, 27, .56); pointer-events: none; }
.kv-lb__x { position: absolute; right: 28px; top: 22px; z-index: 2; }
.kv-lb .kv-lb__th { left: 28px; bottom: 26px; }
@media (min-width: 761px) and (max-width: 1100px) {
  .kv-pb__more { column-gap: 64px; padding-top: 72px; }
}
@media (max-width: 760px) {
  .kv-pb__stage { height: auto; overflow: visible; }
  .kv-pb__track { height: 470px; gap: 0; }
  .kv-pb__pan { flex: 0 0 100%; }
  .kv-pb__back { top: 14px; }
  .kv-pb__stage > .kv-pb__th { display: none; }
  .kv-pb__dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 0; }
  .kv-pb__dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: rgba(24, 25, 27, .22); }
  .kv-pb__dots i.is-on { background: var(--kv-color-ink); }
  .kv-pb__card { position: static; width: auto; max-height: none; padding: 24px 20px 8px; overflow: visible; box-shadow: none; }
  .kv-pb__act { position: sticky; bottom: 0; z-index: 7; padding: 12px 0 16px; background: var(--kv-color-white); }
  .kv-pb__more { display: block; padding: 36px 20px 20px; }
  .kv-pb__more > div + div { margin-top: 40px; }
  .kv-pb__h { font-size: 26px; }
  .kv-dv__as { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .kv-dv__as > span + span { padding-inline-start: 0; border-inline-start: 0; }
  .kv-pb__rv { margin: 0 20px; }
  .kv-sg__body { padding: 0 20px 40px; }
  .kv-lb .kv-lb__th { left: 16px; bottom: 22px; }
  .kv-lb__x { right: 18px; top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-pb__track { scroll-behavior: auto; }
  .kv-pb__open img,
  .kv-lb__i { transition: none; }
}

/* ============================================================
   Campaign page (T34) - band hero style, statement medium size,
   kevlts-chapter, kevlts-duo; products use kevlts-product-grid.
   Source: Campaign (+ mobile): 780px hero (112px h1, bottom
   gradient), 44px manifesto, chapters (7-column image, 720px; 52px
   heading; Petrol number), 820px image duo with captions.
   ============================================================ */
.kv-band--hero { height: 780px; }
.kv-band--hero .kv-band__shade { background: linear-gradient(180deg, rgba(24, 25, 27, .05) 30%, rgba(24, 25, 27, .55) 100%); }
.kv-band--hero .kv-band__copy { max-width: 1000px; padding-bottom: 84px; }
.kv-band--hero .kv-band__h { font-size: clamp(56px, 7.8vw, 112px); font-weight: 400; line-height: 1; }
.kv-statement--md { gap: 28px; padding-top: 140px; padding-bottom: 140px; }
.kv-statement--md .kv-statement__text { max-width: var(--kv-grid-s10); font-size: 44px; font-weight: 400; line-height: 1.25; }
.kv-statement__p,
.kv-statement__p p { max-width: 620px; margin: 0; font-family: var(--kv-font-sans); font-size: 15px; line-height: 1.8; color: rgba(24, 25, 27, .74); }
.kv-ch {
  display: grid;
  grid-template-columns: var(--kv-grid-l-media) minmax(0, 1fr);
  align-items: center;
  gap: var(--kv-grid-l-split);
  padding: 0 var(--kv-grid-pad) 140px;
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
}
.kv-ch--r { grid-template-columns: minmax(0, 1fr) var(--kv-grid-l-media); }
.kv-ch--r .kv-ch__fig { order: 2; }
.kv-ch__fig { height: 720px; margin: 0; overflow: hidden; background: #f4f4f3; }
.kv-ch__fig img,
.kv-ch__fig svg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.4s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-ch:hover .kv-ch__fig img { transform: scale(1.03); }
.kv-ch__tx { display: flex; flex-direction: column; gap: 24px; max-width: 440px; }
.kv-ch__n { font-family: var(--kv-font-display); font-size: 40px; line-height: 1; color: var(--kv-color-petrol); }
.kv-ch__h { margin: 0; font-family: var(--kv-font-display); font-size: 52px; font-weight: 400; line-height: 1.05; }
.kv-ch__p,
.kv-ch__p p { margin: 0; font-family: var(--kv-font-sans); font-size: 15px; line-height: 1.8; color: rgba(24, 25, 27, .74); }
.kv-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kv-grid-gutter); padding: 0 var(--kv-grid-pad) 120px; background: var(--kv-color-white); }
.kv-duo__fig { margin: 0; }
.kv-duo__img { display: block; height: 820px; overflow: hidden; }
.kv-duo__img img,
.kv-duo__img svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.kv-duo figcaption { margin-top: 16px; font-family: var(--kv-font-sans); font-size: 12px; letter-spacing: .06em; color: rgba(24, 25, 27, .6); }
@media (max-width: 760px) {
  .kv-band--hero { height: 620px; }
  .kv-band--hero .kv-band__copy { gap: 16px; padding: 0 20px 44px; }
  .kv-band--hero .kv-band__h { font-size: 48px; }
  .kv-statement--md { gap: 20px; padding: 72px 20px; }
  .kv-statement--md .kv-statement__text { font-size: 26px; }
  .kv-ch,
  .kv-ch--r { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0 20px 72px; }
  .kv-ch--r .kv-ch__fig { order: 0; }
  .kv-ch__fig { height: 460px; }
  .kv-ch__tx { gap: 16px; }
  .kv-ch__n { font-size: 30px; }
  .kv-ch__h { font-size: 34px; }
  .kv-duo { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 20px 72px; }
  .kv-duo__img { height: 480px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-ch__fig img { transition: none; }
}

/* ============================================================
   Content / service page (T35) - sections/kevlts-content-page.liquid
   Source: ClientCare (+ mobile): 3-column side navigation (10px
   Petrol group titles, 14px hairline rows, Petrol dash on the current
   page), 56px title, prose; on phones a swipeable uppercase strip
   under a 36px title.
   ============================================================ */
.kv-cp { padding: 20px var(--kv-grid-pad) 112px; background: var(--kv-color-white); color: var(--kv-color-ink); }
.kv-cp__grid {
  display: grid;
  grid-template-columns: var(--kv-grid-s3) minmax(0, 1fr);
  grid-template-areas: "nav head" "nav body";
  align-items: start;
  column-gap: var(--kv-grid-gutter);
  row-gap: 56px;
  padding-top: 48px;
}
.kv-cp__head { grid-area: head; display: flex; flex-direction: column; gap: 16px; }
.kv-cp__h1 { margin: 0; font-family: var(--kv-font-display); font-size: 56px; font-weight: 400; line-height: 1.04; }
.kv-cp__nav { grid-area: nav; display: flex; flex-direction: column; gap: 32px; padding-top: 8px; font-family: var(--kv-font-sans); }
.kv-cp__group { display: flex; flex-direction: column; }
.kv-cp__gt { padding-bottom: 12px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--kv-color-petrol); }
.kv-cp__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--kv-color-line);
  color: rgba(24, 25, 27, .74);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
}
.kv-cp__link:hover { color: var(--kv-color-ink); }
.kv-cp__link[aria-current="page"] { color: var(--kv-color-ink); font-weight: 500; }
.kv-cp__link:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-cp__dash { color: var(--kv-color-petrol); }
.kv-cp__body { grid-area: body; min-width: 0; }
@media (max-width: 760px) {
  .kv-cp { padding: 12px 20px 72px; }
  .kv-cp__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "nav" "body"; row-gap: 28px; padding-top: 28px; }
  .kv-cp__h1 { font-size: 36px; }
  .kv-cp__nav {
    flex-direction: row;
    gap: 24px;
    margin: 0 -20px;
    padding: 4px 20px 2px;
    overflow-x: auto;
    border-bottom: 1px solid var(--kv-color-line);
    scrollbar-width: none;
  }
  .kv-cp__nav::-webkit-scrollbar { display: none; }
  .kv-cp__group { display: contents; }
  .kv-cp__gt,
  .kv-cp__dash { display: none; }
  .kv-cp__link {
    flex: none;
    padding: 12px 0;
    border-bottom: 1px solid transparent;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .kv-cp__link[aria-current="page"] { font-weight: 400; border-bottom-color: var(--kv-color-ink); }
}

/* ============================================================
   FAQ / Privacy / Terms (T36) - kevlts-content-page accordion mode
   (kv-accordion rows inside the prose; Heading 2 stays a group title)
   and Shopify's own /policies/* pages (theme can style, not template).
   Source: FAQs / Privacy / Terms (+ mobile) .gx-faq2 rows.
   ============================================================ */
.kv-prose > .kv-acc + .kv-acc { margin-top: 0; }
.kv-prose > .kv-acc .kv-acc__body > :first-child { margin-top: 0; }
.kv-prose .kv-acc__body p { margin: 0; }
.shopify-policy__container {
  box-sizing: border-box;
  max-width: calc(var(--kv-grid-s8) + 2 * var(--kv-grid-pad)) !important;
  margin: 0 auto;
  padding: 48px var(--kv-grid-pad) 112px !important;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
}
.shopify-policy__title h1 { margin: 0 0 40px; font-family: var(--kv-font-display); font-size: 56px; font-weight: 400; line-height: 1.04; text-align: left; }
.shopify-policy__body { font-size: 15px; line-height: 1.75; color: rgba(24, 25, 27, .74); }
.shopify-policy__body h2,
.shopify-policy__body h3 { margin: 48px 0 16px; font-family: var(--kv-font-display); font-weight: 500; line-height: 1.1; color: var(--kv-color-ink); }
.shopify-policy__body h2 { font-size: 32px; }
.shopify-policy__body h3 { font-size: 24px; }
.shopify-policy__body a { color: var(--kv-color-ink); text-underline-offset: 3px; }
@media (max-width: 760px) {
  .shopify-policy__container { padding: 28px 20px 72px !important; }
  .shopify-policy__title h1 { font-size: 36px; }
  .shopify-policy__body h2 { font-size: 26px; }
}

/* ============================================================
   About (Contact / About work item) - sections/kevlts-about.liquid
   Source: AboutUs (+ mobile): centred 84px title, 30px display
   paragraphs on the 10-column measure, 660px image (4:5 on phones).
   Contact uses kevlts-content-page (its board is the ClientCare frame).
   ============================================================ */
.kv-ab { padding-bottom: 96px; background: var(--kv-color-white); color: var(--kv-color-ink); }
.kv-ab__crumbs { padding: 20px var(--kv-grid-pad) 0; }
.kv-ab__head { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 64px var(--kv-grid-pad) 72px; text-align: center; }
.kv-ab__h1 { margin: 0; font-family: var(--kv-font-display); font-size: 84px; font-weight: 400; line-height: 1.02; letter-spacing: -.005em; }
.kv-ab__text { box-sizing: content-box; display: flex; flex-direction: column; gap: 24px; max-width: var(--kv-grid-s10); margin: 0 auto; padding: 8px 0 88px; }
.kv-ab__text > * { margin: 0; font-family: var(--kv-font-display); font-size: 30px; font-weight: 400; line-height: 1.35; color: var(--kv-color-ink); }
.kv-ab__fig { height: 660px; margin: 0 var(--kv-grid-pad); overflow: hidden; background: #f4f4f3; }
.kv-ab__fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.4s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-ab__fig:hover img { transform: scale(1.025); }
@media (max-width: 760px) {
  .kv-ab { padding-bottom: 56px; }
  .kv-ab__crumbs { padding-top: 12px; }
  .kv-ab__head { align-items: flex-start; padding: 36px var(--kv-grid-pad) 40px; text-align: left; }
  .kv-ab__h1 { font-size: 44px; }
  .kv-ab__text { gap: 20px; padding: 8px var(--kv-grid-pad) 48px; }
  .kv-ab__text > * { font-size: 22px; }
  .kv-ab__fig { height: auto; aspect-ratio: 4 / 5; }
}

/* ============================================================
   Sign in / create account (T37) - kevlts-login, kevlts-register,
   snippets/kv-register-form (classic customer accounts).
   Source: SignIn (+ mobile): two 4-column panels, boxed 46px inputs,
   52px Ink Continue, OR rule, 40px title, bordered "New to kevlts?"
   panel; create-account drawer = T16 drawer with underline fields.
   ============================================================ */
.kv-auth { padding: 20px var(--kv-grid-pad) 112px; background: var(--kv-color-white); color: var(--kv-color-ink); font-family: var(--kv-font-sans); }
.kv-auth__grid {
  display: grid;
  grid-template-columns: max(var(--kv-grid-s4), 340px) max(var(--kv-grid-s4), 340px);
  justify-content: center;
  align-items: start;
  gap: var(--kv-grid-gutter);
  padding-top: 48px;
}
.kv-auth--single .kv-auth__grid { grid-template-columns: max(var(--kv-grid-s4), 340px); }
.kv-auth__main,
.kv-auth__panel,
.kv-auth__form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.kv-auth__h1 { margin: 0; font-family: var(--kv-font-display); font-size: 40px; font-weight: 400; line-height: 1.05; }
.kv-auth__h2 { margin: 0; font-family: var(--kv-font-display); font-size: 34px; font-weight: 400; line-height: 1.05; }
.kv-auth__h3 { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.kv-auth__intro { margin: 0; font-size: 13px; line-height: 1.6; color: #646568; }
.kv-auth__main .kv-input { height: 46px; padding: 0 12px; border: 1px solid var(--kv-color-soft-metal); background: var(--kv-color-white); font-size: 13px; }
.kv-auth__main .kv-input:focus { border-color: var(--kv-color-petrol); }
.kv-auth__main .kv-input[aria-invalid="true"] { border-color: var(--kv-color-error); }
.kv-auth__main .kv-field__label { font-weight: 400; letter-spacing: .06em; }
.kv-auth__main .kv-button { height: 52px; }
.kv-auth__lnk { align-self: flex-start; color: var(--kv-color-ink); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.kv-auth__forgot { margin-top: -8px; }
.kv-auth__or { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #646568; }
.kv-auth__or span { flex-grow: 1; height: 1px; background: var(--kv-color-line); }
.kv-auth__shop { display: flex; justify-content: center; min-height: 52px; }
.kv-auth__legal { margin: 0; font-size: 11px; line-height: 1.6; color: #646568; }
.kv-auth__legal a,
.kv-auth__aside a:not(.kv-button) { color: var(--kv-color-ink); }
.kv-auth__guest { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--kv-color-line); }
.kv-auth__recover { display: none; }
.kv-auth__recover:target,
.kv-auth__recover:has(.kv-notice) { display: flex; }
.kv-auth__recover:target ~ .kv-auth__login,
.kv-auth__recover:has(.kv-notice) ~ .kv-auth__login,
.kv-auth__login.is-hidden { display: none; }
.kv-auth__aside { display: flex; flex-direction: column; gap: 20px; padding: 40px; border: 1px solid var(--kv-color-line); background: var(--kv-color-white); }
.kv-auth__list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 8px 0; list-style: none; }
.kv-auth__list li { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.kv-auth__list .kv-icon { flex: none; }
.kv-auth__drawer { display: flex; flex-direction: column; gap: 24px; padding: 0 36px 48px; }
.kv-reg { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.kv-reg__2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kv-pw { position: relative; }
.kv-pw__toggle {
  position: absolute;
  top: 34px;
  right: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: rgba(24, 25, 27, .7);
  font-family: var(--kv-font-sans);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.kv-auth__main .kv-pw__toggle { top: 32px; right: 12px; }
.kv-pw .kv-input { padding-right: 56px; }
.kv-reg__sm { margin: 0; font-size: 13px; color: rgba(24, 25, 27, .7); text-align: center; }
.kv-reg__sm a,
.kv-check a { color: var(--kv-color-ink); text-decoration: underline; text-underline-offset: 3px; }
.kv-auth__lnk:focus-visible,
.kv-pw__toggle:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
@media (max-width: 760px) {
  .kv-auth { padding: 12px var(--kv-grid-pad) 72px; }
  .kv-auth__grid,
  .kv-auth--single .kv-auth__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px; }
  .kv-auth__aside { padding: 24px 16px; }
}
@media (max-width: 480px) {
  .kv-auth__drawer { padding: 0 20px 40px; }
  .kv-reg__2 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Account, order, addresses (T38) - kevlts-account / -order /
   -addresses, snippets kv-account-nav, kv-order-row,
   kv-address-fields (classic customer accounts).
   Source: Account (+ mobile .ac.m): 48px greeting, 3-column nav,
   uppercase 13px section titles, #F7F7F5 tiles and forms, order rows
   with 76x92 thumbnails, status pills, progress line, delivery /
   payment boxes, address cards.
   ============================================================ */
.kv-ac { padding: 20px var(--kv-grid-pad) 112px; background: var(--kv-color-white); color: var(--kv-color-ink); font-family: var(--kv-font-sans); }
.kv-ac__hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 40px 0 36px; border-bottom: 1px solid var(--kv-color-line); }
.kv-ac__hd .kv-sec__eb { margin-bottom: 16px; }
.kv-ac__h1 { margin: 0; font-family: var(--kv-font-display); font-size: 48px; font-weight: 400; line-height: 1.04; }
.kv-ac__sub { margin: 12px 0 0; font-size: 14.5px; color: rgba(24, 25, 27, .66); }
.kv-ac__out { color: var(--kv-color-ink); font-size: 13px; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.kv-ac__out:hover { text-decoration-thickness: 2px; }
.kv-ac__grid { display: grid; grid-template-columns: var(--kv-grid-s3) minmax(0, 1fr); align-items: start; column-gap: var(--kv-grid-gutter); padding-top: 44px; }
.kv-ac__nav { display: flex; flex-direction: column; }
.kv-ac__tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--kv-color-line);
  color: rgba(24, 25, 27, .72);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color calc(.25s * var(--kv-motion-scale)) ease;
}
.kv-ac__tab:hover { color: var(--kv-color-ink); }
.kv-ac__tab[aria-current="page"] { color: var(--kv-color-ink); font-weight: 500; }
.kv-ac__tab[aria-current="page"] .kv-ac__tc { color: var(--kv-color-petrol); }
.kv-ac__tc { font-size: 12px; color: rgba(24, 25, 27, .5); }
.kv-ac__main { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.kv-ac__panel { display: flex; flex-direction: column; gap: 40px; }
.kv-ac__panel[hidden] { display: none; }
.kv-ac__block { display: flex; flex-direction: column; }
.kv-ac__h2 { margin: 0; font-family: var(--kv-font-sans); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--kv-color-ink); }
.kv-ac__block > .kv-ac__h2 { margin-bottom: 20px; }
.kv-ac__rowh { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.kv-ac__lk {
  padding: 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 13px;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  cursor: pointer;
}
.kv-ac__lk:hover,
.kv-ac__lk:focus-visible { color: var(--kv-color-petrol); text-decoration-thickness: 2px; }
.kv-ac__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kv-ac__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; background: #f7f7f5; color: var(--kv-color-ink); text-decoration: none; transition: background-color calc(.3s * var(--kv-motion-scale)) ease; }
.kv-ac__tile:hover,
.kv-ac__tile:focus-visible { background: #efeeea; }
.kv-ac__tk { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(24, 25, 27, .56); }
.kv-ac__tv { font-family: var(--kv-font-display); font-size: 30px; line-height: 1.1; }
.kv-ac__tn { font-size: 13px; color: rgba(24, 25, 27, .66); }
.kv-ac__or { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 24px 0; border-top: 1px solid var(--kv-color-line); }
.kv-ac__or:last-of-type { border-bottom: 1px solid var(--kv-color-line); }
.kv-ac__th { display: flex; gap: 8px; }
.kv-ac__th > span { display: flex; align-items: center; justify-content: center; width: 76px; height: 92px; background: var(--kv-color-white); box-shadow: inset 0 0 0 1px rgba(164, 160, 154, .32); }
.kv-ac__th img { display: block; width: 82%; height: 82%; object-fit: contain; }
.kv-ac__om { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kv-ac__on { font-size: 15px; font-weight: 500; }
.kv-ac__od { font-size: 13px; color: rgba(24, 25, 27, .62); }
.kv-ac__oe { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.kv-ac__tot { font-size: 14px; }
.kv-ac__st { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 24px; padding: 0 12px; border-radius: 999px; background: #e8efef; color: var(--kv-color-petrol); font-size: 11px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.kv-ac__st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kv-ac__st--fulfilled { background: #f1f1ef; color: #4a4b4e; }
.kv-ac__st--cancelled { background: #f6eceb; color: var(--kv-color-error); }
.kv-ac__empty { margin: 0; padding: 28px; background: #f7f7f5; font-size: 14px; line-height: 1.6; color: rgba(24, 25, 27, .7); }
.kv-ac__note { margin: 12px 0 0; font-size: 13px; color: rgba(24, 25, 27, .62); }
.kv-ac__dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 28px; background: #f7f7f5; }
.kv-ac__dl > div { display: flex; flex-direction: column; gap: 8px; }
.kv-ac__dl dt { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(24, 25, 27, .6); }
.kv-ac__dl dd { display: flex; align-items: center; min-height: 44px; margin: 0; border-bottom: 1px solid var(--kv-color-line); font-size: 14px; overflow-wrap: anywhere; }
.kv-ac__inline { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 0; padding: 28px; background: #f7f7f5; }
.kv-ac__inline .kv-ac__empty { flex: 1 1 280px; padding: 0; background: none; }
.kv-ac__inline .kv-notice { margin: 0; }
.kv-ac__back { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; color: rgba(24, 25, 27, .66); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.kv-ac__back:hover,
.kv-ac__back:focus-visible { color: var(--kv-color-ink); }
.kv-ac__order { display: flex; flex-direction: column; gap: 40px; max-width: var(--kv-grid-s9); padding-top: 40px; }
.kv-ac__dh { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.kv-ac__dh .kv-sec__eb { margin-bottom: 12px; }
.kv-ac__dt { margin: 0; font-family: var(--kv-font-display); font-size: 36px; font-weight: 400; line-height: 1.05; }
.kv-ac__tl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.kv-ac__tl li { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 28px 12px 0 0; }
.kv-ac__tl li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 1px; background: rgba(164, 160, 154, .55); }
.kv-ac__tl li.is-done::before { background: var(--kv-color-ink); }
.kv-ac__tl li::after { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--kv-color-white); box-shadow: inset 0 0 0 1px var(--kv-color-soft-metal); }
.kv-ac__tl li.is-done::after { background: var(--kv-color-ink); box-shadow: none; }
.kv-ac__tl li.is-now::after { background: var(--kv-color-petrol); box-shadow: 0 0 0 5px rgba(41, 72, 75, .16); }
.kv-ac__tl b { font-size: 13px; font-weight: 500; }
.kv-ac__tl li:not(.is-done):not(.is-now) b { font-weight: 400; color: rgba(24, 25, 27, .5); }
.kv-ac__tl span { font-size: 12px; color: rgba(24, 25, 27, .6); }
.kv-ac__it { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 16px 0; border-top: 1px solid var(--kv-color-line); }
.kv-ac__in { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.kv-ac__in a { color: var(--kv-color-ink); text-decoration: none; }
.kv-ac__in a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kv-ac__in em { font-size: 12.5px; font-style: normal; color: rgba(24, 25, 27, .58); }
.kv-ac__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kv-ac__box,
.kv-ac__ad { display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--kv-color-line); font-size: 14px; line-height: 1.6; color: rgba(24, 25, 27, .78); }
.kv-ac__box .kv-ac__h2 { margin-bottom: 8px; }
.kv-ac__addr { font-style: normal; }
.kv-ac__addr p { margin: 0; }
.kv-ac__strong { color: var(--kv-color-ink); }
.kv-ac__sum { display: flex; justify-content: space-between; gap: 12px; }
.kv-ac__sum--t { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--kv-color-line); color: var(--kv-color-ink); font-weight: 500; }
.kv-ac__acts { display: flex; flex-wrap: wrap; gap: 12px; }
.kv-ac__ads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kv-ac__ad.is-default { border-color: var(--kv-color-ink); }
.kv-ac__pill { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--kv-color-petrol); }
.kv-ac__ada { display: flex; align-items: center; gap: 20px; margin-top: 12px; }
.kv-ac__del { display: inline; margin: 0; }
.kv-ac__collapse { display: none; }
.kv-ac__collapse:target,
.kv-ac__collapse:has(.kv-notice--error) { display: flex; flex-direction: column; gap: 16px; }
.kv-ac__edit { margin-top: 24px; }
.kv-ac__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 28px; background: #f7f7f5; }
.kv-ac__w { grid-column: 1 / -1; }
.kv-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 32 32' fill='none' stroke='%2318191B' stroke-width='3'%3E%3Cpath d='M2 10 L16 24 30 10'/%3E%3C/svg%3E") no-repeat right 4px center;
  cursor: pointer;
}
.kv-ac__out:focus-visible,
.kv-ac__tab:focus-visible,
.kv-ac__tile:focus-visible,
.kv-ac__back:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
@media (max-width: 760px) {
  .kv-ac { padding: 12px var(--kv-grid-pad) 72px; }
  .kv-ac__hd { flex-direction: column; align-items: flex-start; padding: 28px 0 24px; }
  .kv-ac__h1 { font-size: 34px; }
  .kv-ac__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 0; }
  .kv-ac__nav { flex-direction: row; gap: 24px; margin: 0 -20px; padding: 0 20px; overflow-x: auto; border-bottom: 1px solid var(--kv-color-line); scrollbar-width: none; }
  .kv-ac__nav::-webkit-scrollbar { display: none; }
  .kv-ac__tab { flex: none; padding: 16px 0 12px; border-bottom: 1px solid transparent; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
  .kv-ac__tab[aria-current="page"] { border-bottom-color: var(--kv-color-ink); }
  .kv-ac__tc { display: none; }
  .kv-ac__tiles { grid-template-columns: minmax(0, 1fr); }
  .kv-ac__tile { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; padding: 20px; }
  .kv-ac__tv { font-size: 24px; }
  .kv-ac__or { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; }
  .kv-ac__or .kv-ac__th { grid-column: 1 / -1; }
  .kv-ac__th > span { width: 64px; height: 78px; }
  .kv-ac__tl { grid-template-columns: minmax(0, 1fr); }
  .kv-ac__tl li { padding: 0 0 20px 28px; }
  .kv-ac__tl li::before { top: 11px; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
  .kv-ac__tl li:last-child::before { display: none; }
  .kv-ac__it { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; }
  .kv-ac__cols,
  .kv-ac__ads,
  .kv-ac__form,
  .kv-ac__dl { grid-template-columns: minmax(0, 1fr); }
  .kv-ac__form,
  .kv-ac__dl,
  .kv-ac__inline { padding: 20px; }
  .kv-ac__acts { flex-direction: column; }
  .kv-ac__acts .kv-button { width: 100%; }
  .kv-ac__dt { font-size: 30px; }
}

/* ============================================================
   Wishlist (T39) - sections/kevlts-wishlist.liquid, card Remove link,
   product-page heart (.kv-fav). Storage and the wishlist URL are the
   theme's own (local: browser storage key theme4:wishlist:id;
   account: EcomRise app). Source: Wishlist (+ mobile), ProductB
   .pb-fav (48px square, heart filled when saved).
   ============================================================ */
.kv-wl { background: var(--kv-color-white); color: var(--kv-color-ink); font-family: var(--kv-font-sans); }
.kv-wl__hd { display: flex; flex-direction: column; gap: 20px; padding: 20px var(--kv-grid-pad) 0; }
.kv-wl__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; }
.kv-wl__title { display: flex; align-items: baseline; gap: 16px; }
.kv-wl__h1 { margin: 0; font-family: var(--kv-font-display); font-size: 52px; font-weight: 400; line-height: 1.05; }
.kv-wl__n,
.kv-wl__note { font-size: 13px; color: #646568; }
.kv-wl__note a { color: var(--kv-color-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.kv-wl__body { padding-top: 24px; }
.kv-wl .kv-grid { margin-top: 0; }
@media (min-width: 768px) {
  .kv-wl .kv-grid {
    margin-left: calc(var(--kv-grid-pad) - var(--kv-grid-gutter) / 2);
    margin-right: calc(var(--kv-grid-pad) - var(--kv-grid-gutter) / 2);
    border-left: var(--kv-grid-divider);
  }
}
.kv-wl__empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 96px var(--kv-grid-pad); text-align: center; color: var(--kv-color-ink); }
.kv-wl__empty[hidden] { display: none; }
.kv-wl__eh { margin: 0; font-family: var(--kv-font-display); font-size: 30px; line-height: 1.1; }
.kv-wl__et { margin: 0; font-size: 14px; color: rgba(24, 25, 27, .66); }
.kv-pc__act { display: flex; gap: 20px; margin-top: 8px; }
.kv-grid .kv-pc__act { justify-content: center; }
.kv-pc__act button {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 12px;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.kv-pc__act button:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-pb__act--fav { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
.kv-fav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0;
  border: 1px solid #e2e2e2;
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  cursor: pointer;
  transition: border-color calc(.25s * var(--kv-motion-scale)) ease;
}
.kv-fav:hover { border-color: var(--kv-color-ink); }
.kv-fav svg { transition: transform calc(.3s * var(--kv-motion-scale)) var(--kv-motion-ease), fill calc(.25s * var(--kv-motion-scale)) ease; }
.kv-fav:hover svg { transform: scale(1.08); }
.kv-fav[aria-pressed="true"] svg,
.kv-fav[action="added"] svg { fill: currentColor; }
.kv-fav:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
@media (max-width: 760px) {
  .kv-wl__hd { padding-top: 12px; }
  .kv-wl__h1 { font-size: 36px; }
  .kv-wl__empty { padding: 64px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-ab__fig img,
  .kv-fav svg { transition: none; }
}

/* ============================================================
   Design imagery + homepage gaps (Batch 4, G03-G05)
   Theme design images (snippets/kv-asset-img) fill picker-less
   slots; brand logos keep the board's optical sizes (--bh x factor);
   phone focal points for the hero tiles and the look image; tiles
   without a link render as plain blocks.
   ============================================================ */
/* ---------- Batch 5 (G07-G10) ---------- */
/* G07 "View" cursor (Home-Split .cursor, final "unified product card (v4)" values): a 56px translucent
   circle over product images; "Add" (ink) over the add button; "Drag" (light) over the lookbook rail */
.kv-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: rgba(41, 72, 75, .58);
  color: var(--kv-color-white);
  font-family: var(--kv-font-sans);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
  will-change: transform;
}
.kv-cursor[hidden] { display: none; }
.kv-cursor--add { background: rgba(24, 25, 27, .55); }
.kv-cursor--light { background: rgba(147, 165, 165, .5); color: var(--kv-color-ink); }
html.kv-has-cursor .kv-grid .kv-pc__add { cursor: none; }
/* G08 flag crops (board: hoist-band flags cropped from the left) */
:is(.kv-loc__flag, .kv-menu__flag)[data-iso="QA"],
:is(.kv-loc__flag, .kv-menu__flag)[data-iso="AE"],
:is(.kv-loc__flag, .kv-menu__flag)[data-iso="KW"],
:is(.kv-loc__flag, .kv-menu__flag)[data-iso="BH"],
:is(.kv-loc__flag, .kv-menu__flag)[data-iso="OM"] { object-position: left center; }
/* G08 product delivery picker with flags (ProductB .pb-dv-b / .ed-l / .ed-f) */
.kv-pb__dv-dd.is-enhanced > .kv-pb__dv-s,
.kv-pb__dv-dd.is-enhanced > .kv-icon { display: none; }
.kv-dvp__b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 3px;
  border: 0;
  border-bottom: 1px solid rgba(24, 25, 27, .4);
  background: none;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.kv-dvp__b[hidden] { display: none; }
.kv-dvp__b:hover { border-bottom-color: var(--kv-color-ink); }
.kv-dvp__b .kv-icon { position: static; transition: transform calc(.25s * var(--kv-motion-scale)) ease; }
.kv-dvp__b[aria-expanded="true"] .kv-icon { transform: rotate(180deg); }
.kv-dvp__cur { display: inline-flex; align-items: center; gap: 8px; }
.kv-dvp__l {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 41;
  min-width: 260px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--kv-color-white);
  box-shadow: 0 12px 36px rgba(24, 25, 27, .14);
}
.kv-dvp__l[hidden] { display: none; }
.kv-dvp__o { display: flex; align-items: center; gap: 12px; padding: 8px 16px; font-family: var(--kv-font-sans); font-size: 14px; color: var(--kv-color-ink); cursor: pointer; }
.kv-dvp__o:hover,
.kv-dvp__o:focus { background: #f6f6f6; outline: none; }
.kv-dvp__o:focus-visible { outline: var(--kv-focus-ring); outline-offset: -2px; }
.kv-dvp__o[aria-selected="true"] { font-weight: 500; }
.kv-dvp__o em { margin-left: auto; font-size: 12px; font-style: normal; color: rgba(24, 25, 27, .56); }
.kv-dvp__f { display: block; flex: none; width: 20px; height: 14px; object-fit: cover; box-shadow: 0 0 0 1px rgba(24, 25, 27, .08); }
.kv-dvp__b:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
/* G09 sold out + get notified (Product-soldout / -notify: .so, .gn, .nt) */
.kv-pb__so { margin: -4px 0 0; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--kv-color-ink); }
.kv-pb__so[hidden],
.kv-pb__add[hidden],
.kv-pb__notify[hidden] { display: none; }
.kv-pb__notify {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 1px solid var(--kv-color-ink);
  background: var(--kv-color-white);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color calc(.3s * var(--kv-motion-scale)) ease, color calc(.3s * var(--kv-motion-scale)) ease;
}
.kv-pb__notify:hover,
.kv-pb__notify:focus-visible { background: var(--kv-color-ink); color: var(--kv-color-white); }
.kv-pb__notify:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-nt { --kv-drawer-w: 520px; }
.kv-nt .kv-drawer__head { height: 88px; padding: 0 48px; }
.kv-nt__b { padding: 32px 48px 40px; }
.kv-nt__form { margin: 0; }
.kv-nt__g { display: flex; flex-direction: column; gap: 30px; }
.kv-nt__h { margin: 0; font-family: var(--kv-font-display); font-size: 32px; font-weight: 500; line-height: 1.1; }
.kv-nt__t { margin: 0; font-family: var(--kv-font-sans); font-size: 13.5px; line-height: 1.65; letter-spacing: .01em; color: var(--kv-color-ink); }
.kv-nt__t a,
.kv-nt .kv-check a { color: var(--kv-color-ink); text-decoration: underline; text-underline-offset: 3px; }
.kv-nt__m { color: rgba(24, 25, 27, .62); }
.kv-nt__p { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--kv-color-line); border-bottom: 1px solid var(--kv-color-line); }
.kv-nt__p img { display: block; width: 56px; height: 56px; object-fit: contain; }
.kv-nt__adv { display: flex; flex-direction: column; gap: 10px; }
.kv-nt__wa { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; color: var(--kv-color-ink); font-size: 13.5px; text-decoration: underline; text-underline-offset: 4px; }
.kv-nt__btn {
  height: 50px;
  border: 0;
  background: var(--kv-color-soft-metal);
  color: var(--kv-color-white);
  font-family: var(--kv-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: not-allowed;
  transition: background-color calc(.3s * var(--kv-motion-scale)) ease;
}
.kv-nt__btn[aria-disabled="false"] { background: var(--kv-color-petrol); cursor: pointer; }
.kv-nt__btn[aria-disabled="false"]:hover { background: var(--kv-color-ink); }
.kv-nt__btn:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
@media (max-width: 480px) {
  .kv-nt .kv-drawer__head { height: 64px; padding: 0 20px; }
  .kv-nt__b { padding: 24px 20px 36px; }
  .kv-nt__g { gap: 26px; }
}
/* G10 account details (Account board .ac-st.go / .ok, .ac-ck, .ac-adt, .ac-empty + .ac-lk) */
.kv-ac__st--go { background: #e8efef; color: var(--kv-color-petrol); }
.kv-ac__st--ok { background: #f1f1ef; color: #4a4b4e; }
.kv-ac__prefs { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.kv-ac__ck { display: flex; align-items: center; gap: 12px; font-family: var(--kv-font-sans); font-size: 14px; color: var(--kv-color-ink); cursor: pointer; }
.kv-ac__ck input { width: 18px; height: 18px; margin: 0; accent-color: var(--kv-color-ink); }
.kv-ac__prefs .kv-ac__note { margin: 0; }
.kv-ac__save { align-self: flex-start; }
.kv-ac__pw { display: block; margin: 0; }
.kv-ac__pw .kv-ac__lk { margin-left: 8px; }
.kv-ac__adt { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--kv-color-ink); }
.kv-ac__ad .kv-ac__ada { flex-wrap: wrap; }
.kv-brands__logo { height: calc(30px * var(--kv-logo-s, 1)); }
.kv-auth__decline { align-self: center; padding: 4px 0; border: 0; background: none; font-family: var(--kv-font-sans); cursor: pointer; }
div.kv-brands__tile:hover { box-shadow: inset 0 0 0 1px var(--kv-color-line); }
div.kv-brands__tile:hover .kv-brands__logo,
div.kv-hero__tile:hover .kv-hero__img img,
div.kv-style__tile:hover .kv-style__img img { transform: none; }
div.kv-style__tile .kv-style__n .kv-icon { display: none; }
div.kv-hero__tile .kv-hero__label { border-bottom-color: transparent; }
.kv-hero__img picture { display: contents; }
@media (max-width: 760px) {
  .kv-brands__logo { height: calc(17px * var(--kv-logo-s, 1)); }
  .kv-hero__img[style] img { object-position: var(--kv-pos-m) !important; }
  .kv-look__frame[style] > img { object-position: var(--kv-pos-m) !important; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --kv-reveal: 0; }
}

/* ============================================================
   Light global identity touches (kept minimal & safe)
   ============================================================ */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--kv-ink); color: var(--kv-paper); }

/* Editorial serif headings read better with a touch of weight + tight leading */
h1, h2, h3, .h1, .h2, .h3 {
  font-weight: var(--kv-display-wght);
}

/* ============================================================
   Shared atoms - used by the custom kevlts homepage sections
   ============================================================ */
.kv-wrap { padding-inline: var(--kv-gutter); }

.kv-eyebrow {
  font-family: var(--kv-sans);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: var(--kv-track-eyebrow);
  text-transform: uppercase;
  color: var(--kv-accent-soft);
  margin: 0;
}

.kv-display {
  font-family: var(--kv-display);
  font-weight: var(--kv-display-wght);
  line-height: 1.02;
  letter-spacing: .005em;
  color: var(--kv-ink);
  margin: 0;
}
.kv-display em { font-style: italic; color: var(--kv-accent); }

/* underline-grow link, lifted from the mockup CTA */
.kv-link {
  position: relative;
  display: inline-block;
  font-family: var(--kv-sans);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: .12em;
  cursor: pointer;
  padding-bottom: 5px;
  color: inherit;
}
.kv-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform .55s var(--kv-ease);
}
.kv-link:hover::after { transform-origin: left; transform: scaleX(.5); }

.kv-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--kv-sans);
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 400;
  padding: 16px 30px;
  border: 1px solid currentColor;
  color: var(--kv-ink);
  background: transparent;
  transition: background .5s var(--kv-ease), color .5s var(--kv-ease);
}
.kv-btn:hover { background: var(--kv-ink); color: var(--kv-paper); }
.kv-btn--light { color: var(--kv-white); }
.kv-btn--light:hover { background: var(--kv-white); color: var(--kv-black); }

/* ---------- reveal on scroll ---------- */
.kv-reveal {
  opacity: calc(1 - var(--kv-reveal));
  transform: translateY(calc(var(--kv-reveal) * 26px));
  transition: opacity 1.1s var(--kv-ease), transform 1.1s var(--kv-ease);
  will-change: opacity, transform;
}
.kv-reveal.is-in { opacity: 1; transform: none; }
.kv-reveal[data-delay="1"] { transition-delay: .12s; }
.kv-reveal[data-delay="2"] { transition-delay: .24s; }
.kv-reveal[data-delay="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .kv-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Header - editorial transparent->solid (kevlts reference)
   Active header = sections/header-inline.liquid (layout logo_left).
   Reuses theme hooks only (NO JS):
   - .hdt-section-header.scrolled-past-header        (solid state)
   - hdt-sticky-header.hdt-header-tranparent-true    (theme misspelling, kept on purpose)
   - .hdt-push-menu-btn[aria-controls=menu_mobile]   (Menu trigger, reused)
   - a[aria-controls=drawer-search-form]             (Search trigger, reused)
   Layout: Menu + Search left, brand centred, account/wishlist/cart right.
   ============================================================ */

/* Brand: serif wordmark */
.hdt-main-header .hdt-logo a {
  font-family: var(--kv-display);
  font-weight: var(--kv-display-wght);
  font-size: 24px;
  line-height: 1;
  letter-spacing: var(--kv-track-brand);
  padding-left: var(--kv-track-brand);   /* optically centre the right-side tracking */
  white-space: nowrap;
  transition: font-size .5s var(--kv-ease), color .5s var(--kv-ease);
}

@media (min-width: 1150px) {
  /* 3-zone bar: left cluster | centred brand | right icons */
  .hdt-header-logo_left [data-header-height] { position: relative; justify-content: space-between; }
  .hdt-header-logo_left .hdt-logo {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    margin: 0; z-index: 2; justify-content: center;
  }
  .hdt-main-header .hdt-logo a { font-size: 30px; }
  .hdt-section-header.scrolled-past-header .hdt-main-header .hdt-logo a { font-size: 26px; }
  /* categories live in the Menu drawer -> hide the inline desktop nav */
  .hdt-header-col { display: none !important; }
}

/* Left cluster: Menu + Search as tracked editorial labels */
.kv-headbar-left { display: flex; align-items: center; gap: 28px; }
.kv-headbar-left .hdt-push-menu-btn,
.kv-headbar-left .kv-head-trigger {
  display: inline-flex; align-items: center; gap: 9px;
  width: auto; background: none; border: 0; padding: 0; margin: 0;
  cursor: pointer; color: currentColor;
  opacity: .72;   /* softer like the reference .nav-item, brightens on hover */
  font-family: var(--kv-sans); font-size: 13px; font-weight: 300;
  letter-spacing: var(--kv-track-nav); text-transform: none;
  transition: opacity .4s var(--kv-ease);
}
.kv-headbar-left svg { width: 19px; height: 19px; }
.kv-headbar-left .hdt-push-menu-btn:hover,
.kv-headbar-left .kv-head-trigger:hover { opacity: 1; }
/* match the reference's softer right-side icons too */
.hdt-main-header .hdt-site-top_nav .hdt-site-nav_icon { opacity: .78; transition: opacity .4s var(--kv-ease); }
.hdt-main-header .hdt-site-top_nav .hdt-site-nav_icon:hover { opacity: 1; }

/* Right cluster: account / wishlist / cart, right-aligned */
.hdt-main-header .hdt-site-top_nav { justify-content: flex-end; gap: 20px; }
/* search now lives in the left cluster -> hide the duplicate in the right group */
.hdt-main-header .hdt-site-top_nav .hdt-site-nav_search { display: none; }

/* Transparent over the hero (homepage, before scroll) = WHITE text + icons.
   header_transparent_colors=scheme-1 makes the theme print INK as an inline
   <style> in the body, so we force white with !important on the vars AND the
   actual nav elements (SVGs use currentColor, so they follow the color). */
body.template-index
  .hdt-section-header:not(.scrolled-past-header)
  hdt-sticky-header.hdt-header-tranparent-true {
  --color-foreground: 255 255 255 !important;
  --color-foreground2: 255 255 255 !important;
  --color-line-border: 255 255 255 !important;
  background-color: transparent !important;
}
body.template-index .hdt-section-header:not(.scrolled-past-header) hdt-sticky-header.hdt-header-tranparent-true .kv-headbar-left .hdt-push-menu-btn,
body.template-index .hdt-section-header:not(.scrolled-past-header) hdt-sticky-header.hdt-header-tranparent-true .kv-headbar-left .kv-head-trigger,
body.template-index .hdt-section-header:not(.scrolled-past-header) hdt-sticky-header.hdt-header-tranparent-true .hdt-logo a,
body.template-index .hdt-section-header:not(.scrolled-past-header) hdt-sticky-header.hdt-header-tranparent-true .hdt-site-top_nav .hdt-site-nav_icon {
  color: #fff !important;
}
/* keep the cart/wishlist count legible over the hero: white pill, ink number */
body.template-index
  .hdt-section-header:not(.scrolled-past-header)
  hdt-sticky-header.hdt-header-tranparent-true .hdt-count-box {
  background: #fff !important; color: var(--kv-black) !important;
}

/* Solid on scroll: paper bar, INK text, hairline. With sticky_type=always the
   header stays visible while scrolling and just swaps to these colors. */
.hdt-main-header { transition: background-color .5s var(--kv-ease), box-shadow .5s var(--kv-ease); }
body.template-index
  .hdt-section-header.scrolled-past-header
  hdt-sticky-header.hdt-header-tranparent-true {
  background-color: var(--kv-paper) !important;
  --color-foreground: 20 18 16 !important;
  --color-foreground2: 91 85 77 !important;
  box-shadow: 0 1px 0 var(--kv-line);
}

/* Mobile (< lg): icons only (hide text labels), brand back in normal flow */
@media (max-width: 1149px) {
  .kv-head-label { display: none; }
  .hdt-header-logo_left .hdt-logo { position: static; transform: none; }
}
@media (max-width: 760px) {
  .hdt-main-header .hdt-logo a { font-size: 22px; letter-spacing: .26em; }
}

/* ============================================================
   Footer - editorial refinement (site-wide)
   ============================================================ */
.hdt-footer .hdt-heading-f h6 {
  font-family: var(--kv-sans);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 400;
  font-size: 12px;
  opacity: .9;
}
.hdt-footer .hdt-footer-menu_item {
  font-family: var(--kv-sans);
  font-weight: 300;
  letter-spacing: .04em;
  opacity: .82;
  transition: opacity .35s var(--kv-ease), letter-spacing .35s var(--kv-ease);
}
.hdt-footer .hdt-footer-menu_item:hover { opacity: 1; letter-spacing: .07em; }
.hdt-footer .hdt-footer-copyright,
.hdt-footer .hdt-footer-payments {
  font-family: var(--kv-sans);
  letter-spacing: .06em;
  font-weight: 300;
}

/* ============================================================
   Menu drawer (#menu_mobile) - editorial (kevlts reference)
   Women / Men tabs, hairline rows, thin +/x expander, warm sub-menus.
   Also used by the desktop "Menu" button.
   ============================================================ */
/* Wider drawer (theme caps it at ~477px) */
@media (min-width: 500px) {
  #menu_mobile.hdt-dialog-drawer { max-width: 540px; }
}

/* Tabs: serif, muted; active gets ink + 2px underline */
#menu_mobile .hdt-mobile-tabs-switcher {
  display: flex;
  border-bottom: 1px solid var(--kv-line);
  margin-bottom: 0;
  background: none;
  padding: 0;
  border-radius: 0;
}
#menu_mobile .hdt-mobile-tab-btn {
  flex: 1;
  padding: 18px 0;
  background: none;
  border: 0;
  position: relative;
  cursor: pointer;
  font-family: var(--kv-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: .02em;
  color: var(--kv-ink-soft);
  transition: color .3s var(--kv-ease);
}
#menu_mobile .hdt-mobile-tab-btn[aria-current="true"],
#menu_mobile .hdt-mobile-tab-btn[aria-selected="true"],
#menu_mobile .hdt-mobile-tab-btn.active { color: var(--kv-ink); }
#menu_mobile .hdt-mobile-tab-btn[aria-current="true"]::after,
#menu_mobile .hdt-mobile-tab-btn[aria-selected="true"]::after,
#menu_mobile .hdt-mobile-tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--kv-ink);
}

/* Category rows: hairline dividers, editorial type, hover wash */
#menu_mobile .hdt-nav__ul-mb > .hdt-menu-item { border-bottom: 1px solid var(--kv-line); }
#menu_mobile .hdt-menu-link {
  padding: 16px 28px;
  font-family: var(--kv-sans);
  font-size: 15px;
  font-weight: 300;
  letter-spacing: .02em;
  color: var(--kv-ink);
  transition: background .3s var(--kv-ease), color .3s var(--kv-ease);
}
#menu_mobile .hdt-menu-link:hover { background: var(--kv-paper-deep); }
#menu_mobile .hdt-menu-link--active { color: var(--kv-ink); }

/* No category thumbnail photos in the drawer */
#menu_mobile .hdt-category-img,
#menu_mobile .hdt-menu-link-text > .hdt-category-img { display: none !important; }

/* Expander: thin 1px "+" that rotates 45deg to a clean "x" (reference-style).
   Every size/position/background is set explicitly so the theme's own
   .hdt-btn-open-sub bar styles can't clip or double it. */
#menu_mobile .hdt-btn-open-sub {
  position: relative;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  transition: transform .35s var(--kv-ease);
}
#menu_mobile .hdt-btn-open-sub > * { display: none; }
#menu_mobile .hdt-btn-open-sub::before,
#menu_mobile .hdt-btn-open-sub::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background-color: var(--kv-ink-soft);
  border-radius: 2px;
}
#menu_mobile .hdt-btn-open-sub::after { width: 14px; height: 1px; }   /* horizontal */
#menu_mobile .hdt-btn-open-sub::before { width: 1px; height: 14px; }  /* vertical */
/* open: keep both bars + rotate the icon 45deg so "+" reads as "x" */
#menu_mobile details[open] > summary .hdt-btn-open-sub,
#menu_mobile .hdt-btn-open-sub.active { transform: rotate(45deg); }
#menu_mobile details[open] > summary .hdt-btn-open-sub::after,
#menu_mobile .hdt-btn-open-sub.active::after { width: 14px; height: 1px; }
#menu_mobile details[open] > summary .hdt-btn-open-sub::before,
#menu_mobile .hdt-btn-open-sub.active::before { width: 1px; height: 14px; }

/* Sub-menus: warm wash, indented, lighter */
#menu_mobile .hdt-mb-sub-menu { background: var(--kv-paper-deep); }
#menu_mobile .hdt-mb-sub-menu .hdt-menu-link {
  padding-left: 44px;
  font-size: 13.5px;
  color: var(--kv-ink-soft);
}

/* ============================================================
   Visual QA pass (2026-10-20): corrections from the rendered board comparison.
   Source rules are the boards' final (later, !important) declarations:
   Home-Split / Women / Men (+ mobile), Shop-Grid, ClientCare, Campaign.
   ============================================================ */
/* Q1 hairline grids, 768px+ (board .g4/.ctgrid/.cp-g/.hlg/.sb-g): the grid sits half a gutter
   outside the content box with a left rule; every cell has half-gutter side padding and top/right rules */
@media (min-width: 768px) {
  .kv-sec .kv-grid {
    margin-left: calc(var(--kv-grid-gutter) / -2);
    margin-right: calc(var(--kv-grid-gutter) / -2);
    border-top: 0;
    border-left: var(--kv-grid-divider);
  }
  .kv-sec .kv-grid > *,
  .kv-sec .kv-grid > *:nth-child(n),
  .kv-coll .kv-grid > *,
  .kv-coll .kv-grid > *:nth-child(n) {
    margin-top: -1px;
    padding-left: calc(var(--kv-grid-gutter) / 2);
    padding-right: calc(var(--kv-grid-gutter) / 2);
    border-top: var(--kv-grid-divider);
    border-right: var(--kv-grid-divider);
  }
}
/* Q2 phone product grids carry no add-to-cart bar (Home-Split-Mobile, Shop-Grid-mobile cards:
   image, name, price; a tap opens the piece). The wishlist keeps its Move to cart. */
@media (max-width: 760px) {
  .kv-sec .kv-grid .kv-pc__add,
  .kv-coll .kv-grid .kv-pc__add { display: none; }
}
/* Q3 category tabs on phones: one swipeable row (board .ctab mobile) */
@media (max-width: 760px) {
  .kv-tabs__list { flex-wrap: nowrap; width: 100%; gap: 28px; overflow-x: auto; scrollbar-width: none; }
  .kv-tabs__list::-webkit-scrollbar { display: none; }
  .kv-tabs__tab { flex: none; height: 38px; font-size: 11px; }
}
/* Q4 brands: one joined hairline grid (board .hob final rules), no hover ring; logo zoom kept */
.kv-brands__grid { gap: 0; }
.kv-brands__tile { box-sizing: border-box; box-shadow: none; }
.kv-brands__tile:hover,
.kv-brands__tile:focus-visible { box-shadow: none; }
@media (min-width: 768px) {
  .kv-brands__grid {
    margin-left: calc(var(--kv-grid-gutter) / -2);
    margin-right: calc(var(--kv-grid-gutter) / -2);
    border-left: var(--kv-grid-divider);
  }
  .kv-brands__tile {
    height: 178px;
    padding: 0 calc(var(--kv-grid-gutter) / 2);
    border-top: var(--kv-grid-divider);
    border-right: var(--kv-grid-divider);
    border-bottom: var(--kv-grid-divider);
  }
}
@media (max-width: 767px) {
  .kv-brands__grid {
    margin-left: calc(-1 * var(--kv-grid-pad));
    margin-right: calc(-1 * var(--kv-grid-pad));
    border-top: var(--kv-grid-divider);
  }
  .kv-brands__tile {
    height: 87px;
    padding: 0;
    border-right: var(--kv-grid-divider);
    border-bottom: var(--kv-grid-divider);
  }
  .kv-brands__tile:nth-child(4n) { border-right: 0; }
  .kv-brands__logo { height: calc(13px * var(--kv-logo-s, 1)); }
}
/* Q5 lookbook rail: hairline-ruled cells that run off the right edge (board #lookbook .rail);
   grab cursor + mouse drag to scroll (JS) and the light "Drag" cursor over the rail */
.kv-rail {
  gap: 0;
  margin-left: calc(var(--kv-grid-gutter) / -2);
  padding: 0;
  border-top: var(--kv-grid-divider);
  border-bottom: var(--kv-grid-divider);
}
.kv-rail__item {
  box-sizing: content-box;
  padding: 32px calc(var(--kv-grid-gutter) / 2) 36px;
  border-right: var(--kv-grid-divider);
}
.kv-rail__title { font-size: 24px; }
@media (hover: hover) and (pointer: fine) {
  .kv-rail { cursor: grab; }
  .kv-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .kv-rail.is-dragging .kv-rail__item { pointer-events: none; }
}
.kv-swp { display: none; }
@media (max-width: 760px) {
  .kv-rail { margin-left: calc(-1 * var(--kv-grid-pad)); scrollbar-width: none; }
  .kv-rail::-webkit-scrollbar { display: none; }
  .kv-rail__item { width: 286px; padding: 20px var(--kv-grid-pad) 24px; }
  .kv-rail__title { font-size: 22px; }
  /* swipe indicator under the rail (board .swp): "01 / 06", progress line, "Swipe" + nudging arrow */
  .kv-swp {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-right: var(--kv-grid-pad);
    font-family: var(--kv-font-sans);
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(24, 25, 27, .62);
  }
  .kv-swp__n { min-width: 52px; letter-spacing: .16em; }
  .kv-swp__t { position: relative; flex: 1; height: 1px; background: rgba(164, 160, 154, .5); }
  .kv-swp__t i { position: absolute; top: 0; height: 1px; background: var(--kv-color-ink); transition: left .25s ease; }
  .kv-swp__l { display: inline-flex; align-items: center; gap: 8px; }
  .kv-swp__l svg { animation: kvSwpN 1.9s ease-in-out infinite; }
}
@keyframes kvSwpN { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) {
  .kv-swp__l svg { animation: none; }
  .kv-swp__t i { transition: none; }
}
/* Q6 style tiles on phones (board .sty mobile) */
@media (max-width: 760px) {
  .kv-style__tile:nth-child(odd) { padding: 20px 12px 24px 0; }
  .kv-style__tile:nth-child(even) { padding: 20px 0 24px 12px; }
  .kv-style__img { height: 230px; }
  .kv-style__n { font-size: 11.5px; letter-spacing: .2em; }
  .kv-style__d { margin-top: -8px; font-size: 12px; }
  .kv-style .kv-section-link { font-size: 11.5px; letter-spacing: .14em; white-space: nowrap; }
}
/* Q7 Instagram on phones (board .igx): centred eyebrow + italic handle, a swipeable 4:5 row, "Follow us" below */
.kv-ig__eb,
.kv-ig__short { display: none; }
@media (max-width: 760px) {
  .kv-ig { display: flex; flex-direction: column; align-items: center; padding: 72px 0 88px; text-align: center; }
  .kv-ig__head { display: contents; }
  .kv-ig__eb { display: block; order: 1; margin: 0; font-family: var(--kv-font-sans); font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase; color: rgba(24, 25, 27, .5); }
  .kv-ig__handle { order: 2; margin: 12px 0 32px; font-size: 32px; font-weight: 400; font-style: italic; letter-spacing: .01em; }
  .kv-ig__grid { order: 3; display: flex; align-self: stretch; gap: 8px; margin: 0; padding: 0 var(--kv-grid-pad); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 var(--kv-grid-pad); scrollbar-width: none; }
  .kv-ig__grid::-webkit-scrollbar { display: none; }
  .kv-ig__grid > li { flex: 0 0 58%; scroll-snap-align: start; }
  .kv-ig__grid .kv-ig__tile { aspect-ratio: 4 / 5; }
  .kv-ig .kv-section-link { order: 4; margin-top: 32px; padding-bottom: 8px; font-size: 11px; letter-spacing: .24em; }
  .kv-ig .kv-section-link > :not(.kv-ig__short) { display: none; }
  .kv-ig__short { display: inline; }
}
/* Q8 header: inner pages show the hairline under the bar at the top (all inner boards:
   1px rgba(164,160,154,.45)); Home, Women and Men open on a hero without it */
body:not(.template-index):not(:has(.kv-lh)) .kv-hdr[data-state="top"] .kv-hdr__bar { border-bottom-color: rgba(164, 160, 154, .45); }
/* Q9 content page: the side navigation spans both rows; keep the title row at its own height */
@media (min-width: 761px) {
  .kv-cp__grid { grid-template-rows: auto 1fr; }
}
/* Q12 "New in" toolbar (board .tb2 / .fbx / .vw) and the larger-card view (.g2l desktop: 2-up, one row;
   .gm1 phone: 1-up) */
.kv-sec__head:has(+ .kv-hb) { margin-bottom: 36px; }
.kv-hb { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 40px; }
.kv-hb__filter {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(164, 160, 154, .85);
  background: var(--kv-color-white);
  font-family: var(--kv-font-sans);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--kv-color-ink);
  text-decoration: none;
  transition: border-color calc(.3s * var(--kv-motion-scale)) ease;
}
.kv-hb__filter i { display: block; width: 1px; height: 16px; background: rgba(164, 160, 154, .85); }
.kv-hb__filter small { font-size: 13px; color: rgba(24, 25, 27, .62); }
.kv-hb__filter:hover,
.kv-hb__filter:focus-visible { border-color: var(--kv-color-ink); }
.kv-hb__view { display: flex; align-items: center; gap: 2px; }
.kv-hb__k { margin-right: 8px; font-family: var(--kv-font-sans); font-size: 12px; color: rgba(24, 25, 27, .56); }
.kv-hb__b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(24, 25, 27, .38);
  cursor: pointer;
  transition: color calc(.25s * var(--kv-motion-scale)) ease;
}
.kv-hb__b:hover,
.kv-hb__b.is-on { color: var(--kv-color-ink); }
.kv-hb__filter:focus-visible,
.kv-hb__b:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-hb__m { display: none; }
.kv-grid.kv-grid--lg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kv-grid--lg .kv-pc__n { font-size: 15px; }
@media (min-width: 761px) {
  .kv-grid--lg > :nth-child(n+3) { display: none; }
}
@media (max-width: 760px) {
  .kv-hb { margin-bottom: 24px; }
  .kv-hb__filter { padding: 0 12px; }
  .kv-hb__k,
  .kv-hb__d { display: none; }
  .kv-hb__m { display: block; }
  .kv-grid.kv-grid--lg { grid-template-columns: minmax(0, 1fr); }
  .kv-grid--lg > *,
  .kv-grid--lg > *:nth-child(n) { padding: 20px 20px 24px; border-right: 0; }
}
/* Q13 Shop the look on phones (Home-Split-Mobile / Women-mobile / Men-mobile): copy with "Add the full set",
   then the photo (660px over a 768px frame with a soft fade), the pieces as frosted swipe cards floating over its foot */
.kv-look__view,
.kv-look__add-l { display: none; }
@media (max-width: 760px) {
  .kv-look { position: relative; }
  .kv-look__copy { gap: 12px; padding: 56px var(--kv-grid-pad) 28px; }
  .kv-look__h { font-size: 38px; }
  .kv-look__text,
  .kv-look__text p { font-size: 14px; line-height: 1.6; }
  .kv-look__set { margin-top: 8px; }
  .kv-look__media { align-items: flex-start; height: var(--kv-look-mh, 768px); background: var(--kv-look-mbg, rgb(228, 226, 227)); }
  .kv-look__frame { max-width: none; height: var(--kv-look-mih, 660px); aspect-ratio: auto; }
  .kv-look__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(to bottom, transparent, var(--kv-look-mbg, rgb(228, 226, 227))); pointer-events: none; }
  .kv-look__list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    z-index: 5;
    flex-direction: row;
    gap: 8px;
    max-width: none;
    margin: 0;
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .kv-look__list::-webkit-scrollbar { display: none; }
  .kv-look__row {
    flex: 0 0 88%;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    box-sizing: border-box;
    min-height: 106px;
    padding: 12px 16px 12px 12px;
    border-top: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .84);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 10px 30px rgba(24, 25, 27, .18);
    scroll-snap-align: start;
  }
  .kv-look__item { display: contents; }
  .kv-look__thumb { grid-row: 1 / span 2; width: 76px; height: 76px; border-radius: 12px; background: var(--kv-color-white); overflow: hidden; }
  .kv-look__thumb img { width: 64px; height: 64px; mix-blend-mode: normal; }
  .kv-look__name { grid-column: 2; font-size: 13px; font-weight: 400; line-height: 1.35; }
  .kv-look__price { font-size: 12.5px; font-weight: 400; color: var(--kv-color-ink); }
  .kv-look__view { display: inline-block; margin-left: 16px; padding: 4px 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(24, 25, 27, .7); text-decoration: underline; text-underline-offset: 3px; }
  .kv-look__add {
    grid-column: 2;
    justify-self: start;
    width: auto;
    height: 30px;
    margin-top: 8px;
    padding: 0 16px;
    border: 0;
    border-radius: 15px;
    background: var(--kv-color-ink);
    color: var(--kv-color-white);
    font-family: var(--kv-font-sans);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .kv-look__add { position: relative; min-width: 0; min-height: 0; }
  .kv-look__add::before { content: ""; position: absolute; inset: -7px 0; }
  .kv-look__add:hover { color: var(--kv-color-white); background: var(--kv-color-petrol); }
  .kv-look__add .kv-icon { display: none; }
  .kv-look__add-l { display: inline; }
}
/* Q14 mega menu scrim (board .mscrim): the page under an open mega menu dims to rgba(24,25,27,.16).
   On body because the fixed header is transformed; the menu still closes on pointer leave / Escape. */
body:has(.kv-hdr.is-mega-open)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(24, 25, 27, .16);
  pointer-events: none;
  animation: kvFadeIn calc(.3s * var(--kv-motion-scale)) ease both;
}
/* the header group sits above the scrim (Ecomus gives its section z-index 23, which trapped the z 40 header) */
body .kv-header-group { position: relative; z-index: 41; }
/* the ship-to list (board .ccl) opens without the mega menu scrim */
body:has(.kv-loc__btn[aria-expanded="true"])::before { content: none; }
/* Q16 collection toolbar on phones (Shop-Grid-mobile .sb-tb/.sb-v): no "Sort by" label; the view switch
   stays, as 2-up / 1-up */
.kv-tb__vm { display: none; }
@media (max-width: 760px) {
  .kv-sort__btn > span:first-child { display: none; }
  .kv-tb__right { gap: 16px; }
  .kv-tb__view { display: flex; gap: 8px; }
  .kv-tb__view button { width: 32px; height: 32px; }
  .kv-tb__vd { display: none; }
  .kv-tb__vm { display: block; }
  .kv-coll .kv-grid.kv-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .kv-coll .kv-grid--3 > *,
  .kv-coll .kv-grid--3 > *:nth-child(n) { padding: 20px 20px 24px; border-right: 0; }
}
/* Q15 phone menu: ship-to chips sit 24px under their heading (board .gmn-cc margin-top) */
.kv-menu__chips { margin-top: 24px; }
/* Q10 footer: "Follow Us:" stays on one line */
.kv-ft__label { white-space: nowrap; }
/* Q11 scroll motion (board .rv / .px): section eyebrows, headings, intro copy and links rise in as
   they enter; the campaign-band image drifts. Scroll-driven only; static without support or with
   reduced motion. */
@keyframes kvRv { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes kvPx { from { transform: translateY(-9%) scale(1.12); } to { transform: translateY(9%) scale(1.12); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kv-tabs .kv-sec__h,
    .kv-look__copy > .kv-sec__eb,
    .kv-look__h,
    .kv-look__text,
    #trending .kv-sec__eb,
    #trending .kv-sec__h,
    .kv-band:not(.kv-band--hero) .kv-band__eb,
    .kv-band:not(.kv-band--hero) .kv-band__h,
    .kv-band:not(.kv-band--hero) .kv-section-link,
    .kv-rail-sec .kv-sec__eb,
    .kv-rail-sec .kv-sec__h,
    .kv-brands .kv-sec__eb,
    .kv-brands .kv-sec__h,
    .kv-statement:not(.kv-statement--md) > * {
      animation: kvRv linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    .kv-band:not(.kv-band--hero) .kv-band__img {
      animation: kvPx linear both;
      animation-timeline: view();
    }
  }
}

   Kev color swatches — shared between the product page block
   (blocks/_product-color-picker.liquid) and product cards
   (snippets/color-list.liquid in color mode). One CSS source so
   the swatches look identical everywhere they appear.
   ============================================================ */
.kev-color-picker {
  margin: 18px 0 0;
}
.kev-color-picker__label {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #171717;
  line-height: 1.4;
}
.kev-color-picker__label-value {
  font-weight: 500;
}
.kev-color-picker__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: auto;
}
.kev-color-picker__swatch {
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  background-color: var(--kev-swatch-color, #cccccc);
  background-image: none !important; /* never show a product image — solid color only */
  padding: 0;
  margin: 0;
  cursor: pointer;
  vertical-align: middle;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.kev-color-picker__swatch:hover {
  border-color: rgba(154, 123, 79, 0.6);
}
/* Selected state — block uses .is-selected / aria-checked, card uses the
   adjacent radio's :checked state. Both render the same gold ring. */
.kev-color-picker__swatch.is-selected,
.kev-color-picker__swatch[aria-checked="true"],
input[type="radio"]:checked + .kev-color-picker__swatch {
  border-color: transparent;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px #9a7b4f;
}
.kev-color-picker__swatch:focus-visible,
input[type="radio"]:focus-visible + .kev-color-picker__swatch {
  outline: 2px solid #9a7b4f;
  outline-offset: 3px;
}
/* Sold-out — block uses .is-sold-out class, card uses
   input.is-disabled / input.is-unavailable / input[disabled].
   Keep the color visible, draw a diagonal strike across the swatch. */
.kev-color-picker__swatch.is-sold-out,
input[type="radio"].is-disabled + .kev-color-picker__swatch,
input[type="radio"].is-unavailable + .kev-color-picker__swatch,
input[type="radio"][disabled] + .kev-color-picker__swatch {
  opacity: 0.6;
  cursor: not-allowed;
}
.kev-color-picker__swatch.is-sold-out::after,
input[type="radio"].is-disabled + .kev-color-picker__swatch::after,
input[type="radio"].is-unavailable + .kev-color-picker__swatch::after,
input[type="radio"][disabled] + .kev-color-picker__swatch::after {
  content: '';
  position: absolute;
  left: -1px;
  top: 50%;
  width: calc(100% + 2px);
  height: 1.5px;
  margin-top: -0.75px;
  background: rgba(0, 0, 0, 0.55);
  transform: rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 2;
}
.kev-color-picker__swatch.is-sold-out.is-selected,
.kev-color-picker__swatch.is-sold-out[aria-checked="true"],
input[type="radio"]:checked.is-disabled + .kev-color-picker__swatch {
  opacity: 0.7;
}
/* "+N more" overflow link on cards. Sized to match a swatch so the row
   stays balanced; warm-tone text so it sits inside the editorial palette. */
.kev-color-picker__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  border-radius: 999px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #5b554d;
  text-decoration: none;
  vertical-align: middle;
  transition: color .15s ease;
}
.kev-color-picker__more:hover { color: #9a7b4f; }
/* Card-mode wrapper hygiene — neutralise card-only legacy color-list CSS
   when the wrapper hosts Kev swatches, so the per-card width/border rules
   from hdt-product-card.scss.css don't fight the shared Kev sizing. */
wrapp-hdt-color-list.kev-color-picker--card { display: block; width: 100%; }
.kev-color-picker--card .hdt-color-list { gap: 12px; }
.kev-color-picker--card .hdt-color-list-item { line-height: 0; }
.kev-color-picker--card .hdt-color-list-item.is--color-link { line-height: 1; }

/* ============================================================
   V1 visual corrections (2026-10-20): footer WhatsApp support link, home hero heading and hero height,
   board section spacing, "Trending now" sort menu, Shop the look photo ratio and phone copy,
   landing hero chips on phones.
   Sources: Home-Split / Women / Men (+ mobile) boards.
   ============================================================ */
/* footer trust row: "Chat with us on WhatsApp" (board 13px desktop, 11.5px / 1.4 on phones) */
.kv-ft__wa { display: block; flex: none; }

/* split hero: the heading is Ink (base.css colours h1 with the colour scheme); hero image height as on the
   boards: max(520, min(900, min(viewport, 1000) - header - 70)) */
.kv-hero__h { color: var(--kv-color-ink); }
@media (min-width: 761px) {
  .kv-hero__img,
  .kv-lh__media { height: clamp(520px, calc(min(100vh, 1000px) - var(--kv-hdr-h-top) - 70px), 900px); }
  .kv-hero__box { top: calc(14px + clamp(520px, calc(min(100vh, 1000px) - var(--kv-hdr-h-top) - 70px), 900px) / 2); }
}

/* section heads (board .cthead / #new-in): category tabs and the New in head sit 40px over the grid,
   the other heads 48px; the New in title is 56px at weight 400 (new edits 10/26) */
.kv-sec__eb { line-height: var(--kv-type-eyebrow-lh); }
#new-in.kv-sec { border-top: 0; }
.kv-tabs__head { margin-bottom: 40px; }
#new-in .kv-sec__head { margin-bottom: 40px; }
#new-in .kv-sec__h { font-size: clamp(38px, 4vw, 56px); font-weight: 400; }

/* "Trending now" sort menu (board .tsrt, "sort control, modern") */
.kv-gs { display: flex; align-items: stretch; }
.kv-gs__k {
  display: flex;
  align-items: center;
  padding-right: 12px;
  font-family: var(--kv-font-sans);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(24, 25, 27, .5);
}
.kv-gs__dd { position: relative; z-index: 5; }
.kv-gs__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 2px 0 0;
  border: 0;
  border-bottom: 1px solid rgba(24, 25, 27, .22);
  background: transparent;
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: border-color calc(.25s * var(--kv-motion-scale)) ease;
}
.kv-gs__btn:hover,
.kv-gs__btn:focus-visible,
.kv-gs__btn[aria-expanded="true"] { border-bottom-color: var(--kv-color-ink); }
.kv-gs__btn svg { width: 10px; height: 10px; opacity: .7; transition: transform calc(.3s * var(--kv-motion-scale)) ease; }
.kv-gs__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.kv-gs__list {
  position: absolute;
  right: 0;
  top: calc(100% + 1px);
  z-index: 6;
  min-width: 230px;
  padding: 8px 0;
  background: var(--kv-color-white);
  box-shadow: 0 18px 44px rgba(24, 25, 27, .14), 0 0 0 1px rgba(24, 25, 27, .06);
  animation: kvGsIn calc(.22s * var(--kv-motion-scale)) var(--kv-motion-ease) both;
}
.kv-gs__list[hidden] { display: none; }
@keyframes kvGsIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.kv-gs__opt {
  position: relative;
  display: block;
  width: 100%;
  padding: 12px 44px 12px 20px;
  border: 0;
  background: none;
  color: rgba(24, 25, 27, .72);
  font-family: var(--kv-font-sans);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.kv-gs__opt:hover { background: #f6f4ee; color: var(--kv-color-ink); }
.kv-gs__opt.is-on { color: var(--kv-color-ink); font-weight: 500; }
.kv-gs__opt.is-on::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 5px;
  margin-top: -4px;
  border-left: 1.5px solid var(--kv-color-ink);
  border-bottom: 1.5px solid var(--kv-color-ink);
  transform: rotate(-45deg);
}
.kv-gs__btn:focus-visible,
.kv-gs__opt:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-grid.is-loading { opacity: .5; transition: opacity calc(.2s * var(--kv-motion-scale)) ease; }

/* Shop the look: the photo keeps its own proportions on desktop (board frame aspect-ratio = photo);
   phones show their own line of copy */
@media (min-width: 761px) {
  .kv-look__text--phone { display: none; }
  .kv-look__frame:has(> img) { aspect-ratio: auto; }
  .kv-look__frame > img { position: relative; inset: auto; height: auto; }
}

@media (max-width: 760px) {
  .kv-ft__trust-link { font-size: 11.5px; line-height: 1.4; }
  #new-in.kv-sec,
  .kv-tabs.kv-sec,
  #trending.kv-sec,
  .kv-brands.kv-sec { padding-bottom: 80px; }
  .kv-sec__titles { gap: 12px; }
  #new-in .kv-sec__h { font-size: 34px; }
  .kv-sec__head:has(+ .kv-hb) { margin-bottom: 24px; }
  #trending .kv-sec__head { margin-bottom: 32px; }
  .kv-tabs__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
  .kv-sec__more { margin-top: 40px; }
  .kv-tabs .kv-sec__more { margin-top: 32px; }
  .kv-sec__more .kv-button { width: 100%; min-width: 0; }
  .kv-gs__list { left: 0; right: auto; }
  .kv-look__text--desk { display: none; }
  /* landing hero chips scroll inside the 20px text margins (board .lh-chips) */
  .kv-lh__chips { margin: 8px 0 0; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-gs__list { animation: none; }
}

/* ============================================================
   V2 interaction fixes (2026-10-20): product cards open the product page (image, title or card body;
   no quick view); split hero tiles and style tiles are links with the DS-05 focus ring (1px Petrol, 3px offset).
   Product image hover = the SAME image zooms slightly, with the hero portraits' motion (scale 1.03,
   1.6s, cubic-bezier(.22,.61,.36,1)); no second image, no other movement. Pointer devices only; none with
   reduced motion.
   ============================================================ */
.kv-pc[data-url] .kv-pc__d { cursor: pointer; }
.kv-hero__tile:focus-visible,
.kv-style__tile:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-hdr__link[aria-current="page"] { border-bottom-color: var(--kv-color-ink); }

.kv-pc__side,
.hdt-card-product__media--hover { display: none !important; }
.kv-pc__front { transition: transform calc(1.6s * var(--kv-motion-scale)) var(--kv-motion-ease); transform-origin: 50% 50%; }
.kv-pc:hover .kv-pc__front { transform: none; }
.hdt-card-product__media--main { transition: transform calc(1.6s * var(--kv-motion-scale)) var(--kv-motion-ease); transform-origin: 50% 50%; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kv-pc:hover .kv-pc__front,
  .hdt-card-product__media:hover .hdt-card-product__media--main { transform: scale(1.03); }
}

/* colour swatches wrap inside the card (products with many colours, e.g. 11) instead of widening it */
.kv-pc__swr { flex-wrap: wrap; max-width: 100%; }
.kv-pc__swl { flex-wrap: wrap; row-gap: 12px; max-width: 100%; }
.kv-grid .kv-pc__swl { justify-content: center; }
/* the swatches and the "N colours" label share one spot and cross-fade, so hovering a card never changes its
   height: the label used to wrap under the hidden swatches and vanish on hover, so the row (and everything below
   the grid) jumped 28px, and with the pointer near a card's foot the hover flipped on and off every frame */
.kv-pc__swr { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.kv-pc__swl,
.kv-pc__cn { grid-area: 1 / 1; }
.kv-grid .kv-pc__swr { justify-items: center; }
.kv-pc__cn { pointer-events: none; transition: opacity calc(.25s * var(--kv-motion-scale)) ease; }
.kv-pc:hover .kv-pc__cn,
.kv-pc:focus-within .kv-pc__cn { display: block; opacity: 0; }

/* Shop the look rows and points (Home-Split section 4 / Home-Split-Mobile):
   the row is a button that opens its point's popover; its price turns Petrol while open; "+" sits in .kv-look__acts
   (phones add the View link); popovers sit 8px past the point (left / right) or centred over it (middle points);
   pieces that need a size or are sold out are named under the set button. Phones: points use their own
   positions on the cropped photo, there is no popover, and the open (or first) card is outlined (board .lkc-i.on). */
.kv-look__item { box-sizing: border-box; margin: 0; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.kv-look__item:focus-visible { outline: var(--kv-focus-ring); outline-offset: var(--kv-focus-offset); }
.kv-look__item .kv-look__price { color: rgba(24, 25, 27, .66); transition: color calc(.25s * var(--kv-motion-scale)) ease; }
.kv-look__item[aria-expanded="true"] .kv-look__price { color: var(--kv-color-petrol); }
.kv-look__acts { display: flex; flex: none; align-items: center; gap: 16px; }
.kv-look__so { margin-left: 10px; font-size: 12.5px; letter-spacing: .06em; color: rgba(24, 25, 27, .55); }
.kv-look__note { max-width: 440px; margin: -8px 0 0; font-family: var(--kv-font-sans); font-size: 13px; font-weight: 300; line-height: 1.6; color: rgba(24, 25, 27, .66); }
.kv-look__pop { left: -8px; }
.kv-look__pop--left { left: auto; right: -8px; }
.kv-look__pop--mid { left: -130px; }
.kv-look__pop-a .kv-look__pop-go { color: var(--kv-color-ink); border-bottom: 1px solid var(--kv-color-ink); }
a.kv-look__add { box-sizing: border-box; color: var(--kv-color-ink); text-decoration: none; }
.kv-look__pop-so { padding: 4px 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--kv-color-ink-72); }
@media (max-width: 760px) {
  .kv-look__spot { left: var(--kv-mx) !important; top: var(--kv-my) !important; }
  .kv-look__pop { display: none !important; }
  .kv-look__row { outline: 1px solid transparent; outline-offset: -1px; transition: outline-color calc(.3s * var(--kv-motion-scale)) ease; }
  .kv-look__row.is-on { outline-color: var(--kv-color-ink); }
  .kv-look__item .kv-look__price { color: var(--kv-color-ink); }
  .kv-look__acts { grid-column: 2; justify-self: start; margin-top: 8px; }
  .kv-look__acts .kv-look__add { margin-top: 0; }
  a.kv-look__add { display: inline-flex; align-items: center; color: var(--kv-color-white); }
  .kv-look__acts .kv-look__view { margin-left: 0; }
}

/* ============================================================
   Home new edits (10/26) - Source: "Kevlt new home page edits"
   Home-Split / Women / Men boards: sections lose their top
   hairline, hero box gets a subtitle, cards get a wishlist heart
   (.pc-fav), "Shop by Category" (.sbc) and "Objects of Desire"
   (.ood) sections.
   ============================================================ */
.kv-sec--flat { border-top: 0; }

.kv-hero__sub { margin: 0; font-family: var(--kv-font-sans); font-size: 14px; font-weight: 300; line-height: 1.6; letter-spacing: .02em; color: rgba(24, 25, 27, .7); }

/* card wishlist heart: outline, filled on hover / focus and once saved */
.kv-pc__fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kv-color-ink);
  cursor: pointer;
}
.kv-pc__fav svg { display: block; transition: fill calc(.25s * var(--kv-motion-scale)) ease; }
.kv-pc__fav:hover svg,
.kv-pc__fav:focus-visible svg,
.kv-pc__fav[aria-pressed="true"] svg { fill: var(--kv-color-ink); }
.kv-pc__fav:focus-visible { outline: var(--kv-focus-ring); outline-offset: -4px; }

/* Shop by Category: the active tile grows to 2.6 shares, shows its link and an underline */
.kv-sbc { box-sizing: border-box; padding: 112px var(--kv-grid-pad); background: var(--kv-color-white); color: var(--kv-color-ink); }
.kv-sbc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; }
.kv-sbc__k { font-family: var(--kv-font-sans); font-size: 12px; font-weight: 300; letter-spacing: .32em; color: rgba(24, 25, 27, .62); }
.kv-sbc__row { display: flex; gap: 16px; height: 600px; }
.kv-sbc__t {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  background: var(--kv-color-white);
  box-shadow: inset 0 0 0 1px rgba(164, 160, 154, .45);
  color: var(--kv-color-ink);
  font-family: var(--kv-font-sans);
  font-weight: 300;
  text-decoration: none;
  transition: flex-grow calc(.7s * var(--kv-motion-scale)) var(--kv-motion-ease), box-shadow calc(.4s * var(--kv-motion-scale)) ease;
}
.kv-sbc__t:hover { opacity: 1; }
.kv-sbc__t::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--kv-color-petrol);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform calc(.6s * var(--kv-motion-scale)) var(--kv-motion-ease);
}
.kv-sbc__t.is-on { flex-grow: 2.6; box-shadow: inset 0 0 0 1px var(--kv-color-ink); }
.kv-sbc__t.is-on::after { transform: scaleX(1); }
.kv-sbc__t:focus-visible { outline: 2px solid var(--kv-color-petrol); outline-offset: 3px; }
.kv-sbc__no { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; font-size: 12px; letter-spacing: .32em; color: var(--kv-color-petrol); }
.kv-sbc__no::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .5; transition: width calc(.6s * var(--kv-motion-scale)) ease; }
.kv-sbc__t.is-on .kv-sbc__no::after { width: 96px; }
.kv-sbc__i { position: absolute; inset: 80px 32px 150px; display: flex; align-items: center; justify-content: center; }
.kv-sbc__i img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(.84); transition: transform calc(.9s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-sbc__t.is-on .kv-sbc__i img { transform: scale(1); }
.kv-sbc__b { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.kv-sbc__n { font-family: var(--kv-font-display); font-size: 32px; font-weight: 400; line-height: 1; white-space: nowrap; transition: font-size calc(.6s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-sbc__t.is-on .kv-sbc__n { font-size: 56px; }
.kv-sbc__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  font-size: 11.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity calc(.4s * var(--kv-motion-scale)) ease, transform calc(.5s * var(--kv-motion-scale)) ease;
}
.kv-sbc__t.is-on .kv-sbc__cta { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .kv-sbc__row { height: auto; flex-direction: column; }
  .kv-sbc__t { flex: none; height: 120px; }
  .kv-sbc__t.is-on { height: 420px; }
  .kv-sbc__i { inset: 64px 24px 120px; }
}

/* Objects of Desire: image 1.15 : copy 1 */
.kv-ood { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; background: var(--kv-color-white); color: var(--kv-color-ink); }
.kv-ood__i { height: 760px; overflow: hidden; background: var(--kv-color-mist); }
.kv-ood__i img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.kv-ood__c { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 96px var(--kv-grid-pad) 96px 96px; }
.kv-ood__h { margin: 0; font-family: var(--kv-font-display); font-size: clamp(44px, 5.4vw, 80px); font-weight: 500; line-height: 1.02; letter-spacing: .005em; }
.kv-ood__h em { font-style: italic; }
.kv-ood__s { max-width: 380px; margin: 0; font-family: var(--kv-font-sans); font-size: 16px; font-weight: 300; line-height: 1.7; color: rgba(24, 25, 27, .74); }
.kv-ood__btn { min-width: 240px; margin-top: 16px; }
@media (max-width: 900px) {
  .kv-ood { grid-template-columns: 1fr; }
  .kv-ood__i { height: 520px; }
  .kv-ood__c { padding: 56px var(--kv-grid-pad) 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-sbc__t,
  .kv-sbc__t::after,
  .kv-sbc__no::after,
  .kv-sbc__i img,
  .kv-sbc__n,
  .kv-sbc__cta { transition: none; }
}

/* board .rv on the new edits: flat-section headings (not New in), the category heading and the feature copy rise in */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kv-sec--flat:not(#new-in) .kv-sec__eb,
    .kv-sec--flat:not(#new-in) .kv-sec__h,
    .kv-sbc .kv-sec__h,
    .kv-ood__h,
    .kv-ood__s {
      animation: kvRv linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}

/* header icons (board .nv-i): on desktop the account / wishlist / bag buttons are as wide as their
   icon, 32px apart; an invisible 44px box keeps the tap target */
@media (min-width: 761px) {
  .kv-hdr__end .kv-icon-btn { position: relative; min-width: 0; }
  .kv-hdr__end .kv-icon-btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
}

/* Women / Men new edits (10/26) - Source: "Kevlt new home page edits (Women / Men)"
   "Complete the Look" is the Shop the look section without the divider; on desktop the list sits 16px under the
   heading, thumbnails and "+" are 48px tall and the popover has 16px padding (board inline styles, no blend);
   the landing hero copy is 32px from the chips row and 24px between lines */
.kv-look--flat { border-top: 0; }
@media (min-width: 761px) {
  .kv-look--flat .kv-look__list { margin-top: 16px; }
  .kv-look--flat .kv-look__thumb img { width: 46px; height: 48px; mix-blend-mode: normal; }
  .kv-look--flat .kv-look__add { height: 48px; }
  .kv-look--flat .kv-look__pop { gap: 16px; padding: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
  .kv-look--flat .kv-look__pop-img { height: 72px; }
  .kv-look--flat .kv-look__pop-img img { height: 56px; mix-blend-mode: normal; }
  .kv-look--flat .kv-look__pop-d { gap: 8px; }
  .kv-lh__copy { gap: 32px; padding-bottom: clamp(40px, 4.4vw, 64px); }
  .kv-lh__text { gap: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kv-look--flat .kv-look__h {
      animation: kvRv linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
  }
}

/* Home / Women / Men new edits on phones (10/26) - Source: "Kevlt new home page edits (unisex - mobile)"
   the new-edit sections use the board's 24px page margin; hairline grid cells are 24 / 16px from the edges;
   the hero box is 250px wide with a 12px subtitle; Shop by Category is a 2-up grid of 4:5 tiles with the
   name under the image (no number, link or growing tile); Objects of Desire has a 460px image and a
   full-width button */
@media (max-width: 760px) {
  .kv-sec--flat,
  .kv-sbc,
  .kv-ood { --kv-grid-pad: 24px; }
  .kv-sec--flat.kv-sec { padding: 72px var(--kv-grid-pad) 80px; }
  .kv-sec--flat .kv-sec__head { margin-bottom: 32px; }
  #new-in.kv-sec--flat .kv-sec__head { margin-bottom: 24px; }
  .kv-sec--flat .kv-grid > *:nth-child(odd) { padding: 24px 16px 24px 24px; }
  .kv-sec--flat .kv-grid > *:nth-child(even) { padding: 24px 24px 24px 16px; }
  .kv-sec--flat .kv-grid .kv-pc__d { gap: 8px; }
  .kv-sec--flat .kv-grid .kv-pc__p { font-size: 12.5px; }

  .kv-hero__grid { padding: 16px 8px 0; }
  .kv-hero__tile { gap: 16px; }
  .kv-hero__box { width: 250px; padding: 24px 20px; }
  .kv-hero__sub { font-size: 12px; line-height: 1.55; }

  .kv-sbc { padding: 72px var(--kv-grid-pad) 80px; }
  .kv-sbc__head { margin-bottom: 32px; }
  .kv-sbc__k,
  .kv-sbc__no,
  .kv-sbc__cta { display: none; }
  .kv-sbc__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; height: auto; }
  .kv-sbc__t,
  .kv-sbc__t.is-on { height: auto; flex: none; justify-content: flex-start; align-items: center; gap: 16px; padding: 0; overflow: visible; box-shadow: none; }
  .kv-sbc__t::after { content: none; }
  .kv-sbc__i { position: relative; inset: auto; order: 1; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #f2f1ee; box-shadow: inset 0 0 0 1px rgba(164, 160, 154, .45); }
  .kv-sbc__i img,
  .kv-sbc__t.is-on .kv-sbc__i img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center 30%; transform: none; }
  .kv-sbc__b { order: 2; align-items: center; }
  .kv-sbc__n,
  .kv-sbc__t.is-on .kv-sbc__n { font-family: var(--kv-font-sans); font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: .04em; text-align: center; white-space: normal; }

  .kv-ood__i { height: 460px; }
  .kv-ood__c { gap: 16px; padding: 40px var(--kv-grid-pad) 80px; }
  .kv-ood__h { font-size: 40px; }
  .kv-ood__s { font-size: 15px; }
  .kv-ood__btn { width: 100%; min-width: 0; margin-top: 16px; }
}
/* new-edit pages on phones: brand tiles 88px + rule, 16px between eyebrow and heading; the footer
   follows the same board (24px margins, 24px trust rows, Follow Us links in two equal columns).
   Scoped to pages carrying the new-edit sections so the other pages keep their own boards. */
@media (max-width: 760px) {
  .kv-sec--flat .kv-sec__titles { gap: 16px; }
  .kv-sec--flat .kv-brands__tile { height: 89px; }
  body:has(.kv-sec--flat) .kv-ft { --kv-grid-pad: 24px; }
  body:has(.kv-sec--flat) .kv-ft__news { padding-top: 48px; }
  body:has(.kv-sec--flat) .kv-ft__form { gap: 24px; }
  body:has(.kv-sec--flat) .kv-ft__main { padding-top: 32px; }
  body:has(.kv-sec--flat) .kv-ft__feature-copy { gap: 24px; }
  body:has(.kv-sec--flat) .kv-ft__nav { gap: 40px 24px; padding-top: 40px; }
  body:has(.kv-sec--flat) .kv-ft p.kv-ft__col-h { margin-bottom: 4px; }
  body:has(.kv-sec--flat) .kv-ft__trust { margin: 0 24px; }
  body:has(.kv-sec--flat) .kv-ft__trust-item { gap: 16px; padding: 24px 0; }
  body:has(.kv-sec--flat) .kv-ft__social { align-items: stretch; }
  body:has(.kv-sec--flat) .kv-ft__social-links { gap: 16px 24px; }
  body:has(.kv-sec--flat) .kv-ft__social-link { min-height: 0; }
  body:has(.kv-sec--flat) .kv-ft__pay-items { gap: 32px; }
  body:has(.kv-sec--flat) .kv-ft__legal { margin: 24px 24px 0; }
}

/* Women / Men on phones (10/26) - Source: "Kevlt new home page edits (Women - Mobile / Men - Mobile)"
   landing photo 16px under the header, copy on the 24px margin, display heading tracked .005em; product names
   (all new-edit grids, board .pc-n) end after two lines and the colour row is left out (board cards have none);
   "Complete the Look" copy is 56 / 24 / 32px and the pieces are board .lkc-i cards: 16px padding and gap, 76 x 80 thumbnail, two-line name, price under it,
   View + 32px Add in Manrope 400, no outline (the open card is a little whiter), lighter shadow; points use
   the board's 40px target offset 24px, and the photo's fade is 24px, 2px above its foot */
@media (max-width: 760px) {
  body:has(.kv-sec--flat) .kv-lh__media { margin-top: 16px; }
  body:has(.kv-sec--flat) .kv-lh__copy { padding-left: 24px; padding-right: 24px; }
  body:has(.kv-sec--flat) .kv-lh__h { letter-spacing: .005em; }
  .kv-sec--flat .kv-grid .kv-pc__n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
  .kv-sec--flat .kv-grid .kv-pc__p { line-height: normal; }
  .kv-sec--flat .kv-grid .kv-pc__swr { display: none; }

  .kv-look--flat { --kv-grid-pad: 24px; }
  .kv-look--flat .kv-look__copy { padding: 56px var(--kv-grid-pad) 32px; }
  .kv-look--flat .kv-look__frame::after { bottom: 2px; height: 24px; }
  .kv-look--flat .kv-look__hs { margin: -24px 0 0 -24px; }
  .kv-look--flat .kv-look__hs::before { box-shadow: 0 0 0 1.5px rgba(24, 25, 27, .32), 0 2px 8px rgba(24, 25, 27, .35); }
  .kv-look--flat .kv-look__row { gap: 0 16px; padding: 16px; box-shadow: 0 10px 30px rgba(24, 25, 27, .14); }
  .kv-look--flat .kv-look__row.is-on { outline-color: transparent; background: rgba(255, 255, 255, .92); }
  .kv-look--flat .kv-look__thumb { height: 80px; }
  .kv-look--flat .kv-look__name { letter-spacing: .005em; }
  .kv-look--flat .kv-look__name br { display: none; }
  .kv-look--flat .kv-look__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .kv-look--flat .kv-look__name .kv-look__price { display: inline-block; margin-top: 4px; line-height: normal; letter-spacing: .02em; }
  .kv-look--flat .kv-look__view,
  .kv-look--flat .kv-look__add { font-family: var(--kv-font-sans); font-weight: 400; }
  .kv-look--flat .kv-look__add { height: 32px; }
}

/* ============================================================
   Light grey page (Home-Split-Grey / Shop-Grid-Grey / ProductB-Grey, "Grey + cards" option, 11/01):
   every page sits on #f5f5f7; product cards, dropdowns, drawers, popovers and the product image stage
   keep their white surface. The kevlts page sections and the base theme's white colour-scheme sections
   (cart, search, 404, ...) take the page colour.
   ============================================================ */
:root { --kv-color-page: #f5f5f7; --kv-card-radius: 18px; }
body { background-color: var(--kv-color-page); }
.kv-hdr__bar,
.kv-hero,
.kv-lh,
.kv-sec,
.kv-sbc,
.kv-ood,
.kv-look,
.kv-coll,
.kv-pb,
.kv-wl,
.kv-cp,
.kv-ab,
.kv-auth,
.kv-ac,
.kv-duo,
.kv-ft { background-color: var(--kv-color-page); }
.kv-tb { background: rgba(245, 245, 247, .96); }
:is([color-scheme="scheme-1"], [color-scheme="scheme-2"], [color-scheme="scheme-3"]):is(.hdt-section-spacing, .hdt-main-cart),
.hdt-policy-page { background: var(--kv-color-page); }

/* Product cards: white with 18px corners on the grey page (board .g4 / .sb-g cards). The hairline grid gives way
   to gaps (20px, 12px on phones) so each card stands on its own; content, padding and image sizes are unchanged. */
.kv-grid,
.kv-sec .kv-grid,
.kv-coll .kv-grid,
.kv-wl .kv-grid {
  gap: 20px;
  margin-left: 0;
  margin-right: 0;
  border: 0;
}
.kv-grid > *,
.kv-grid > *:nth-child(n),
.kv-sec .kv-grid > *:nth-child(n),
.kv-coll .kv-grid > *:nth-child(n) { margin: 0; border: 0; }
.kv-grid > .kv-pc {
  border-radius: var(--kv-card-radius);
  background: var(--kv-color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}
.kv-grid > .kv-pc:hover { background: #fbfbfa; }
/* base-theme cards (search results, cart "You may also like"): the same white 18px card; the image keeps its size
   and meets the rounded top corners, the name and price get an inner margin */
.hdt-card-product {
  overflow: hidden;
  border-radius: var(--kv-card-radius);
  background: var(--kv-color-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}
.hdt-card-product .hdt-card-product__media { border-radius: 0; }
.hdt-card-product .hdt-card-product__info { padding: 0 16px 20px; }
.kv-coll .kv-grid,
.kv-wl .kv-grid { margin-left: var(--kv-grid-pad); margin-right: var(--kv-grid-pad); }
@media (max-width: 760px) {
  .kv-grid,
  .kv-sec .kv-grid,
  .kv-coll .kv-grid,
  .kv-wl .kv-grid { gap: 12px; }
}

/* Image banner below Shop by Category (board #dr-bags .drb): full width, 1670 / 942; 520px tall on phones */
.kv-ib { background: var(--kv-color-page); }
.kv-ib__frame { position: relative; display: block; width: 100%; aspect-ratio: 1670 / 942; overflow: hidden; background: #3e444b; color: var(--kv-color-white); text-decoration: none; }
.kv-ib__frame img,
.kv-ib__frame .kv-placeholder { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.kv-ib__frame--l::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(to top, rgba(24, 25, 27, .42), rgba(24, 25, 27, 0)); pointer-events: none; }
.kv-ib__l { position: absolute; left: 50%; bottom: 48px; z-index: 1; transform: translateX(-50%); padding-bottom: 6px; border-bottom: 1.5px solid currentColor; font-family: var(--kv-font-sans); font-size: 16px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }
a.kv-ib__frame:focus-visible { outline: 2px solid var(--kv-color-petrol); outline-offset: -4px; }
/* light grey veil over the photo (board .drb::before); hover: the photo zooms slowly and the label dims */
.kv-ib__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(24, 25, 27, .16); pointer-events: none; }
.kv-ib__frame--l::after { z-index: 1; }
.kv-ib__l { z-index: 2; transition: opacity calc(.3s * var(--kv-motion-scale)) ease; }
a.kv-ib__frame:hover .kv-ib__l { opacity: .82; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .kv-ib__frame img { transition: transform calc(1.6s * var(--kv-motion-scale)) var(--kv-motion-ease); }
  a.kv-ib__frame:hover img { transform: scale(1.02); }
}

/* "Travel in Style" (Home-Split-Grey #travel): the feature split's photo meets the left edge, rounds on the right
   and carries the same light grey veil; on phones it runs edge to edge, square */
#travel.kv-ood .kv-ood__i { position: relative; border-radius: 0 var(--kv-card-radius) var(--kv-card-radius) 0; }
#travel.kv-ood .kv-ood__i::after { content: ""; position: absolute; inset: 0; background: rgba(24, 25, 27, .16); pointer-events: none; }
@media (max-width: 900px) {
  #travel.kv-ood .kv-ood__i { border-radius: 0; }
}

/* "Objects of Desire" (Men page) and "Timeless Elegance" (Women page): like "Travel in Style", the photo meets the
   left edge of the page and rounds on the right; on phones it runs edge to edge, square */
:is(#objects-of-desire, #timeless-elegance).kv-ood .kv-ood__i { border-radius: 0 var(--kv-card-radius) var(--kv-card-radius) 0; }
@media (max-width: 900px) {
  :is(#objects-of-desire, #timeless-elegance).kv-ood .kv-ood__i { border-radius: 0; }
}

/* House of Brands: as many columns as brands (up to 8), so a shorter list (Men: 6) fills the row; phones keep 4
   across, or 3 for 3 / 6 brands */
@media (min-width: 768px) {
  .kv-brands__grid { grid-template-columns: repeat(var(--kv-brands-n, 8), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .kv-brands__grid[data-cols-m="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv-brands__grid[data-cols-m="3"] .kv-brands__tile:nth-child(4n) { border-right: var(--kv-grid-divider); }
  .kv-brands__grid[data-cols-m="3"] .kv-brands__tile:nth-child(3n) { border-right: 0; }
}

/* split hero on phones: a smaller "The New Season" box so more of the two videos shows */
@media (max-width: 760px) {
  .kv-hero__box { width: 196px; gap: 6px; padding: 16px 14px 14px; }
  .kv-hero__h { font-size: 19px; }
  .kv-hero__sub { font-size: 10.5px; line-height: 1.5; }
}

/* Shop by Category tiles are cards too (Home-Split-Grey .sbc-t): white, 18px corners, the soft card shadow instead of
   the hairline / Ink outline, a deeper shadow on hover; the open tile keeps its Petrol underline */
.kv-sbc__t,
.kv-sbc__t.is-on { border-radius: var(--kv-card-radius); background: var(--kv-color-white); box-shadow: 0 4px 12px rgba(0, 0, 0, .04); }
.kv-sbc__t:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, .1); }

/* Shop by Category on phones: each tile shows its collection's first product as a packshot, so it sits like the
   product cards next to it (one white 18px card, image contained at 80%) instead of filling and cropping the 4:5 frame */
@media (max-width: 760px) {
  .kv-sbc__t,
  .kv-sbc__t.is-on { overflow: hidden; padding-bottom: 20px; border-radius: var(--kv-card-radius); background: var(--kv-color-white); box-shadow: 0 4px 12px rgba(0, 0, 0, .04); }
  .kv-sbc__i { background: transparent; box-shadow: none; }
  .kv-sbc__i img,
  .kv-sbc__t.is-on .kv-sbc__i img { width: 80%; height: 80%; object-fit: contain; object-position: 50% 50%; }
}
@media (max-width: 760px) {
  .kv-ib__frame { aspect-ratio: auto; height: 520px; }
  .kv-ib__frame[style] img { object-position: var(--kv-pos-m) !important; }
  .kv-ib__l { bottom: 32px; font-size: 15px; }
}

/* Split hero video tiles: the video fills the tile like the image (same crop, focal point and hover zoom) */
.kv-hero__img video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform calc(1.6s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-hero__vid--m { display: none !important; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a.kv-hero__tile:hover .kv-hero__img video { transform: scale(1.03); }
}
@media (max-width: 760px) {
  .kv-hero__vid--d { display: none !important; }
  .kv-hero__vid--m { display: block !important; }
  /* phones: hero videos (split-hero tiles and the Women / Men landing heroes) are framed from the centre; the photo
     focal points ("Focal point on phones") stay for the images */
  .kv-hero__img video.kv-hero__vid,
  .kv-lh__media video.kv-hero__vid { object-position: 50% 50% !important; }
}

/* Complete the Look (Men / Women): on desktop the photo fills the whole photo column, no grey border (cover,
   centred, at least clamp(560px, 58vw, 840px) tall). Points are given on the photo (--kv-x / --kv-y, %) and placed on
   the cropped photo from its proportions (--kv-r = width / height). Phones can show their own portrait photo. */
@media (min-width: 761px) {
  .kv-look__media:has(> .kv-look__frame--fill) { position: relative; min-height: clamp(560px, 58vw, 840px); }
  .kv-look__frame--fill { position: absolute; inset: 0; width: auto; max-width: none; aspect-ratio: auto; container-type: size; }
  .kv-look__frame--fill > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .kv-look__frame--fill .kv-look__spot {
    --kv-iw: max(100cqw, 100cqh * var(--kv-r));
    left: calc(50cqw + (var(--kv-x) - 50) * var(--kv-iw) / 100) !important;
    top: calc(50cqh + (var(--kv-y) - 50) * var(--kv-iw) / var(--kv-r) / 100) !important;
  }
  .kv-look__frame > img.kv-look__img--m { display: none; }
}
@media (max-width: 760px) {
  .kv-look__frame > img.kv-look__img--d { display: none; }
}

/* 11/02 fixes ------------------------------------------------------------------------------------------------- */
/* Phone menu "Ship to": equal chips in two aligned columns (flags line up), the language chip in the next cell */
.kv-menu__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kv-menu__chips .kv-menu__chip { justify-content: flex-start; min-width: 0; }
/* Shop the look: "Add the full set" sits in the copy on desktop and under the photo (with its swipe cards) on phones */
.kv-look__buy { display: contents; }
.kv-look-buy { display: none; container-type: inline-size; } /* a container like the copy column, so the label keeps its one line */
@media (max-width: 760px) {
  .kv-look__buy { display: none; }
  /* phones: the button alone, centred (no note) */
  .kv-look-buy { display: flex; flex-direction: column; align-items: center; padding: 24px var(--kv-grid-pad) 40px; background: var(--kv-color-page); }
  .kv-look-buy .kv-look__set { align-self: center; margin-top: 0; }
  .kv-look-buy .kv-look__note { display: none; }
}
/* Back-to-top beside the WhatsApp chat bubble (app embed, bottom right) instead of under it */
html:has(whatsapp-chat-by-squadkin) .kv-top { right: 56px; bottom: 15px; }
@media (max-width: 760px) {
  html:has(whatsapp-chat-by-squadkin) .kv-top { right: 58px; bottom: 16px; }
}
/* Collection Filter / Sort bar: solid, so cards no longer show through it while it sticks under the header */
.kv-tb { background: var(--kv-color-page); }
/* Filter / Sort bar under the header: it always sticks at the compact header line and, while the header is hidden,
   the stuck bar slides up by transform on the header's own timing (no animated "top", which re-laid out the whole
   grid on every frame). A page-coloured strip above the stuck bar (under the header) covers any sub-pixel gap. */
.kv-tb,
html:has(.kv-hdr:not([data-state="hidden"])) .kv-tb { top: var(--kv-hdr-h-compact); }
.kv-tb { transition: transform calc(.5s * var(--kv-motion-scale)) var(--kv-motion-ease); }
.kv-tb.is-stuck { will-change: transform; }
html:has(.kv-hdr[data-state="hidden"]) .kv-tb.is-stuck { transform: translateY(calc(-1 * var(--kv-hdr-h-compact))); }
.kv-tb.is-stuck::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--kv-hdr-h-top) + 8px); background: var(--kv-color-page); pointer-events: none; }