/*
 * Klinikar Workshop OS — Shop page V2 ("the app layout")
 * V8.3.0
 *
 * Everything is scoped under .kws60-shopfront-v2 so V1 and Classic are untouched.
 * Light is the default; dark follows the customer's phone.
 */

.kws60-shopfront-v2 {
  --v2-accent: #d91f35;
  --v2-accent-ink: var(--kws-v2-accent, #d91f35);
  --v2-accent-soft: rgba(217, 31, 53, .1);
  --v2-bg: #f2f4f7;
  --v2-card: #ffffff;
  --v2-ink: #0b0f14;
  --v2-mut: #667085;
  --v2-faint: #98a2ae;
  --v2-line: rgba(11, 15, 20, .08);
  --v2-well: #eef1f5;
  --v2-wa: #008069;
  --v2-okbg: #ecfdf3;
  --v2-okink: #027a48;
  --v2-okdot: #12b76a;
  --v2-ambbg: #fffaeb;
  --v2-ambink: #b54708;
  --v2-ambdot: #f79009;
  --v2-sh: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 30px -18px rgba(16, 24, 40, .35);
  --v2-r-sheet: 28px;
  --v2-r-card: 22px;
  --v2-r-tile: 18px;

  background: var(--v2-bg);
  color: var(--v2-ink);
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -.008em;
  position: relative;
  /* V1 centres this wrapper with the classic full-bleed trick
     (margin-left:50% + translateX(-50%)). V2 is edge to edge and owns its own
     widths, and that transform would trap the fixed action bar inside the
     wrapper, so the whole trick is undone here. */
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  filter: none !important;
  perspective: none !important;
}

.kws60-shopfront-v2[style*="--kws-v2-accent"] {
  --v2-accent: var(--kws-v2-accent);
  --v2-accent-soft: color-mix(in srgb, var(--kws-v2-accent) 10%, transparent);
}

@media (prefers-color-scheme: dark) {
  .kws60-shopfront-v2 {
    --v2-bg: #0a0d10;
    --v2-card: #151a1f;
    --v2-ink: #edf1f4;
    --v2-mut: #94a0ac;
    --v2-faint: #6d7883;
    --v2-line: rgba(255, 255, 255, .09);
    --v2-well: #1e242b;
    --v2-wa: #009b80;
    --v2-okbg: rgba(61, 220, 151, .14);
    --v2-okink: #3ddc97;
    --v2-okdot: #3ddc97;
    --v2-ambbg: rgba(253, 176, 34, .15);
    --v2-ambink: #fdb022;
    --v2-ambdot: #fdb022;
    --v2-accent-soft: rgba(255, 92, 107, .16);
    --v2-sh: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 30px -18px rgba(0, 0, 0, .8);
  }
}

.kws60-shopfront-v2 *,
.kws60-shopfront-v2 *::before,
.kws60-shopfront-v2 *::after { box-sizing: border-box; }

.kws60-shopfront-v2 .kws60-v2-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.kws60-shopfront-v2 .kws60-v2-i {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.kws60-shopfront-v2 .kws60-v2-shell { position: relative; }
.kws60-shopfront-v2 .kws60-v2-anchor { position: relative; top: -70px; height: 0; }

/* ------------------------------------------------ hero */
/* z-index 0 keeps the hero's own glass chips inside the hero, so the sheet
   and its scrim can sit above them without a z-index arms race. */
.kws60-shopfront-v2 .kws60-v2-hero { position: relative; z-index: 0; height: 252px; }
.kws60-shopfront-v2 .kws60-v2-hero-media {
  position: absolute; inset: 0;
  background: var(--kws-v2-hero, none) center 52% / cover no-repeat, var(--v2-well);
  display: grid; place-items: center;
}
.kws60-shopfront-v2 .kws60-v2-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 9, 12, .5) 0%, rgba(6, 9, 12, 0) 34%, rgba(6, 9, 12, .12) 72%, rgba(6, 9, 12, .3) 100%);
}
.kws60-shopfront-v2 .kws60-v2-hero-fallback {
  font-size: 72px; font-weight: 800; letter-spacing: -.04em; color: var(--v2-faint); opacity: .5;
}
.kws60-shopfront-v2 .kws60-v2-hero-top {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 3;
  display: flex; justify-content: space-between; gap: 8px;
}
.kws60-shopfront-v2 .kws60-v2-glass {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(16, 20, 25, .42);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff; font-size: 13px; font-weight: 600; line-height: 1;
  padding: 9px 14px; border-radius: 999px; text-decoration: none; cursor: pointer;
  font-family: inherit;
}
.kws60-shopfront-v2 .kws60-v2-glass .kws60-v2-i { width: 15px; height: 15px; stroke: #fff; }
.kws60-shopfront-v2 .kws60-v2-glass:hover { background: rgba(16, 20, 25, .58); color: #fff; }
.kws60-shopfront-v2 .kws60-v2-glass:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kws60-shopfront-v2 .kws60-v2-share.is-copied { background: var(--v2-okink); border-color: transparent; }
.kws60-shopfront-v2 .kws60-v2-langs.is-hero {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
  background: rgba(16,20,25,.48); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
}
.kws60-shopfront-v2 .kws60-v2-langs.is-hero a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 36px;
  padding: 0 11px; border-radius: 999px; background: transparent; color: rgba(255,255,255,.82);
  font-size: 12.5px; font-weight: 750; line-height: 1; text-decoration: none;
}
.kws60-shopfront-v2 .kws60-v2-langs.is-hero a.is-on { background: #fff; color: #15171a; }
.kws60-shopfront-v2 .kws60-v2-langs.is-hero a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 359px) {
  .kws60-shopfront-v2 .kws60-v2-hero-top { left: 10px; right: 10px; }
  .kws60-shopfront-v2 .kws60-v2-langs.is-hero a { min-width: 37px; padding: 0 8px; }
  .kws60-shopfront-v2 .kws60-v2-share { padding-left: 11px; padding-right: 11px; }
  .kws60-shopfront-v2 .kws60-v2-share span { display: none; }
}

/* ------------------------------------------------ sheet */
.kws60-shopfront-v2 .kws60-v2-sheet {
  /* No z-index: a stacking context here would trap the booking sheet and its
     scrim below the floating bar and the hero chips. DOM order is enough. */
  position: relative; margin-top: -30px;
  background: var(--v2-bg);
  border-radius: var(--v2-r-sheet) var(--v2-r-sheet) 0 0;
  padding: 14px 14px 0;
}
.kws60-shopfront-v2 .kws60-v2-grab {
  display: block; width: 38px; height: 4px; border-radius: 999px;
  background: var(--v2-line); margin: 0 auto 12px;
}

/* ------------------------------------------------ identity */
.kws60-shopfront-v2 .kws60-v2-id { display: grid; gap: 12px; margin-bottom: 14px; }
.kws60-shopfront-v2 .kws60-v2-id-row { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; }
.kws60-shopfront-v2 .kws60-v2-logo {
  width: 58px; height: 58px; border-radius: var(--v2-r-tile);
  background: var(--v2-card); box-shadow: var(--v2-sh);
  display: grid; place-items: center; overflow: hidden; padding: 5px;
}
.kws60-shopfront-v2 .kws60-v2-logo img { width: 100%; height: 100%; object-fit: contain; }
.kws60-shopfront-v2 .kws60-v2-logo span { font-size: 22px; font-weight: 800; color: var(--v2-accent-ink); }
.kws60-shopfront-v2 .kws60-v2-id-copy h1 {
  margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; color: var(--v2-ink);
}
.kws60-shopfront-v2 .kws60-v2-meta {
  margin: 5px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--v2-mut);
}
.kws60-shopfront-v2 .kws60-v2-meta b { color: var(--v2-ink); font-weight: 700; }
.kws60-shopfront-v2 .kws60-v2-star .kws60-v2-i { width: 14px; height: 14px; fill: #f0a020; stroke: none; }
.kws60-shopfront-v2 .kws60-v2-star { display: inline-flex; }

.kws60-shopfront-v2 .kws60-v2-status {
  margin: 0; justify-self: start; display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  padding: 9px 15px; border-radius: 999px;
  background: var(--v2-okbg); color: var(--v2-okink); width: -moz-fit-content; width: fit-content;
}
.kws60-shopfront-v2 .kws60-v2-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--v2-okdot); position: relative; flex: none; }
.kws60-shopfront-v2 .kws60-v2-status i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--v2-okdot); opacity: .32;
}
.kws60-shopfront-v2 .kws60-v2-status.is-shut { background: var(--v2-ambbg); color: var(--v2-ambink); }
.kws60-shopfront-v2 .kws60-v2-status.is-shut i { background: var(--v2-ambdot); }
.kws60-shopfront-v2 .kws60-v2-status.is-shut i::after { border-color: var(--v2-ambdot); }
@media (prefers-reduced-motion: no-preference) {
  .kws60-shopfront-v2 .kws60-v2-status i::after { animation: kws60v2pulse 2.6s ease-out infinite; }
  @keyframes kws60v2pulse {
    0%   { transform: scale(.6); opacity: .55; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { opacity: 0; }
  }
}

.kws60-shopfront-v2 .kws60-v2-does { margin: 0; font-size: 13.5px; font-weight: 500; color: var(--v2-mut); }

.kws60-shopfront-v2 .kws60-v2-actions,
.kws60-shopfront-v2 .kws60-v2-two { display: grid; grid-template-columns: 1.5fr 1fr; gap: 9px; }
.kws60-shopfront-v2 .kws60-v2-two { grid-template-columns: 1fr 1fr; }
.kws60-shopfront-v2 .kws60-v2-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em; text-decoration: none;
  background: var(--v2-wa); color: #fff; border: 0; cursor: pointer; font-family: inherit;
}
.kws60-shopfront-v2 .kws60-v2-btn .kws60-v2-i { width: 18px; height: 18px; }
.kws60-shopfront-v2 .kws60-v2-btn:hover { color: #fff; filter: brightness(1.06); }
.kws60-shopfront-v2 .kws60-v2-btn:focus-visible { outline: 2px solid var(--v2-accent-ink); outline-offset: 2px; }
.kws60-shopfront-v2 .kws60-v2-btn-alt { background: var(--v2-card); color: var(--v2-ink); box-shadow: var(--v2-sh); }
.kws60-shopfront-v2 .kws60-v2-btn-alt:hover { color: var(--v2-ink); }
.kws60-shopfront-v2 .kws60-v2-btn-accent { background: var(--v2-accent); }

/* ------------------------------------------------ today */
.kws60-shopfront-v2 .kws60-v2-today {
  background: var(--v2-card); border-radius: var(--v2-r-card);
  padding: 13px 16px; margin-bottom: 14px; box-shadow: var(--v2-sh);
  display: grid; gap: 4px;
}
.kws60-shopfront-v2 .kws60-v2-today b {
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--v2-accent-ink); font-weight: 700;
}
.kws60-shopfront-v2 .kws60-v2-today span { font-size: 13.5px; font-weight: 500; line-height: 1.4; }

/* ------------------------------------------------ section heads */
.kws60-shopfront-v2 .kws60-v2-sechead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 10px; padding: 0 2px;
}
.kws60-shopfront-v2 .kws60-v2-sechead b { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.kws60-shopfront-v2 .kws60-v2-sechead a { font-size: 13px; font-weight: 700; color: var(--v2-accent-ink); text-decoration: none; }

/* ------------------------------------------------ quick tiles */
.kws60-shopfront-v2 .kws60-v2-quick { margin-bottom: 18px; }
.kws60-shopfront-v2 .kws60-v2-rail {
  display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
  margin-inline: -14px; padding: 2px 14px 6px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.kws60-shopfront-v2 .kws60-v2-rail::-webkit-scrollbar { display: none; }
.kws60-shopfront-v2 .kws60-v2-tile {
  flex: none; width: 104px; scroll-snap-align: start; text-decoration: none;
  background: var(--v2-card); border-radius: 20px; padding: 13px 12px 14px;
  display: grid; gap: 9px; box-shadow: var(--v2-sh); color: var(--v2-ink);
}
.kws60-shopfront-v2 .kws60-v2-tile:hover { color: var(--v2-ink); transform: translateY(-1px); }
.kws60-shopfront-v2 .kws60-v2-well {
  width: 38px; height: 38px; border-radius: 13px; background: var(--v2-accent-soft);
  display: grid; place-items: center; color: var(--v2-accent-ink);
}
.kws60-shopfront-v2 .kws60-v2-well .kws60-v2-i { width: 20px; height: 20px; }
.kws60-shopfront-v2 .kws60-v2-tile-t { font-size: 13px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; min-height: 2.4em; }
.kws60-shopfront-v2 .kws60-v2-tile-p { font-size: 11.5px; font-weight: 600; color: var(--v2-mut); }
.kws60-shopfront-v2 .kws60-v2-tile-p b { color: var(--v2-ink); font-weight: 800; }

/* ------------------------------------------------ main columns */
.kws60-shopfront-v2 .kws60-v2-main { display: grid; gap: 18px; }
.kws60-shopfront-v2 .kws60-v2-col,
.kws60-shopfront-v2 .kws60-v2-side { display: grid; gap: 18px; align-content: start; min-width: 0; }

/* ------------------------------------------------ proof + find us */
.kws60-shopfront-v2 .kws60-v2-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 14px; }
.kws60-shopfront-v2 .kws60-v2-fact {
  background: var(--v2-card); border-radius: var(--v2-r-tile); padding: 13px 12px;
  box-shadow: var(--v2-sh); display: grid; gap: 2px;
}
.kws60-shopfront-v2 .kws60-v2-fact b { font-size: 22px; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.kws60-shopfront-v2 .kws60-v2-fact small { font-size: 11px; font-weight: 600; color: var(--v2-mut); line-height: 1.25; }

.kws60-shopfront-v2 .kws60-v2-find { display: grid; gap: 10px; }
.kws60-shopfront-v2 .kws60-v2-find .kws60-v2-sechead { margin-bottom: 0; }
.kws60-shopfront-v2 .kws60-v2-addr { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; }
.kws60-shopfront-v2 .kws60-v2-landmark {
  margin: 0; font-size: 13px; font-weight: 500; color: var(--v2-mut);
  border-left: 2px solid var(--v2-accent); padding-left: 10px;
}
.kws60-shopfront-v2 .kws60-v2-hours {
  background: var(--v2-card); border-radius: var(--v2-r-card); padding: 4px 16px; box-shadow: var(--v2-sh);
}
.kws60-shopfront-v2 .kws60-v2-hour {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-top: 1px solid var(--v2-line); font-size: 13.5px; color: var(--v2-mut); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.kws60-shopfront-v2 .kws60-v2-hour:first-child { border-top: 0; }
.kws60-shopfront-v2 .kws60-v2-hour b { margin-left: auto; font-weight: 500; }
.kws60-shopfront-v2 .kws60-v2-hour.is-today { color: var(--v2-ink); font-weight: 700; }
.kws60-shopfront-v2 .kws60-v2-hour.is-today b { font-weight: 700; }
.kws60-shopfront-v2 .kws60-v2-hour em {
  font-style: normal; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--v2-accent-ink); font-weight: 700;
}

/* ------------------------------------------------ footer */
.kws60-shopfront-v2 .kws60-v2-foot {
  margin: 20px -14px 0; background: var(--v2-card);
  border-radius: 26px 26px 0 0; padding: 20px 18px calc(22px + 84px);
  display: grid; gap: 12px;
}
.kws60-shopfront-v2 .kws60-v2-verified {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; color: var(--v2-mut);
}
.kws60-shopfront-v2 .kws60-v2-verified .kws60-v2-i { width: 17px; height: 17px; color: var(--v2-okink); }
.kws60-shopfront-v2 .kws60-v2-langs { display: flex; gap: 7px; }
.kws60-shopfront-v2 .kws60-v2-langs a {
  font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  background: var(--v2-well); color: var(--v2-mut); text-decoration: none;
}
.kws60-shopfront-v2 .kws60-v2-langs a.is-on { background: var(--v2-ink); color: var(--v2-bg); }
.kws60-shopfront-v2 .kws60-v2-getpage {
  font-size: 13.5px; font-weight: 700; color: #c4471a; text-decoration: none; letter-spacing: -.02em;
}
@media (prefers-color-scheme: dark) {
  .kws60-shopfront-v2 .kws60-v2-getpage { color: #ff8b52; }
}

/* ------------------------------------------------ floating action bar */
.kws60-shopfront-v2 .kws60-v2-fab {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px;
  background: rgba(12, 16, 20, .76);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 7px;
  padding-bottom: calc(7px + env(safe-area-inset-bottom, 0px));
  transition: transform .22s ease, opacity .22s ease;
}
.kws60-shopfront-v2 .kws60-v2-fab.is-hidden { transform: translateY(150%); opacity: 0; pointer-events: none; }
.kws60-shopfront-v2 .kws60-v2-fab a {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; border-radius: 999px; text-decoration: none;
  color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: -.02em;
  background: rgba(255, 255, 255, .14);
}
.kws60-shopfront-v2 .kws60-v2-fab a:hover { color: #fff; filter: brightness(1.1); }
.kws60-shopfront-v2 .kws60-v2-fab a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kws60-shopfront-v2 .kws60-v2-fab .kws60-v2-i { width: 17px; height: 17px; stroke: #fff; }
.kws60-shopfront-v2 .kws60-v2-fab-wa { background: var(--v2-wa) !important; }
.kws60-shopfront-v2 .kws60-v2-fab-bk { background: var(--v2-accent) !important; }
.kws60-shopfront-v2 .kws60-v2-fab-nav { width: 50px; }
@media (prefers-reduced-motion: reduce) {
  .kws60-shopfront-v2 .kws60-v2-fab { transition: none; }
}

/* =========================================================
 * Restyle of the shared V1 sections rendered inside V2
 * ========================================================= */
.kws60-shopfront-v2 .kws60-section {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: 0; margin: 0; max-width: none;
}
.kws60-shopfront-v2 .kws60-section > h2,
.kws60-shopfront-v2 .kws60-section > .kws60-section-head h2 {
  font-size: 17px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 10px; color: var(--v2-ink);
}
.kws60-shopfront-v2 .kws60-section .kws60-eyebrow,
.kws60-shopfront-v2 .kws60-section-head .kws60-eyebrow {
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--v2-accent-ink); font-weight: 700;
}
.kws60-shopfront-v2 .kws60-section p { color: var(--v2-mut); }

/* service + tyre cards become rows on one card */
.kws60-shopfront-v2 .kws60-service-grid,
.kws60-shopfront-v2 .kws60-product-grid {
  display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important;
  background: var(--v2-card); border-radius: var(--v2-r-card);
  padding: 2px 18px; box-shadow: var(--v2-sh);
}
.kws60-shopfront-v2 .kws60-service-grid > .kws60-service-card,
.kws60-shopfront-v2 .kws60-product-grid > .kws60-product-card,
.kws60-shopfront-v2 .kws60-service-card,
.kws60-shopfront-v2 .kws60-product-card {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center; gap: 14px;
  background: transparent; border: 0; border-top: 1px solid var(--v2-line);
  border-radius: 0; box-shadow: none; padding: 14px 0; margin: 0; min-height: 0;
}
.kws60-shopfront-v2 .kws60-service-grid > *:first-child,
.kws60-shopfront-v2 .kws60-product-grid > *:first-child { border-top: 0; }
.kws60-shopfront-v2 .kws60-row-main {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0;
}
.kws60-shopfront-v2 .kws60-icon-bubble {
  width: 38px; height: 38px; border-radius: 13px; background: var(--v2-accent-soft);
  color: var(--v2-accent-ink); display: grid; place-items: center; font-size: 15px; flex: none;
}
.kws60-shopfront-v2 .kws60-row-copy { min-width: 0; }
.kws60-shopfront-v2 .kws60-service-card h3,
.kws60-shopfront-v2 .kws60-product-card h3 {
  font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 2px; color: var(--v2-ink);
}
.kws60-shopfront-v2 .kws60-service-card p,
.kws60-shopfront-v2 .kws60-product-card p {
  font-size: 12.5px; color: var(--v2-mut); margin: 0; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kws60-shopfront-v2 .kws60-row-action {
  display: flex; align-items: center; gap: 10px; flex: none; position: static;
}
.kws60-shopfront-v2 .kws60-price-text,
.kws60-shopfront-v2 .kws60-staff-pill {
  font-size: 14.5px; font-weight: 800; letter-spacing: -.03em; font-style: normal;
  color: var(--v2-accent-ink); background: var(--v2-accent-soft);
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  font-variant-numeric: tabular-nums; position: static; margin: 0;
}
.kws60-shopfront-v2 .kws60-price-text .kws60-price-unit {
  font-size: 10.5px; font-weight: 600; opacity: .8; letter-spacing: 0;
}
.kws60-shopfront-v2 .kws60-price-text.kws60-price-ask,
.kws60-shopfront-v2 .kws60-staff-pill {
  color: var(--v2-mut); background: var(--v2-well); font-size: 12px; font-weight: 700;
}
.kws60-shopfront-v2 .kws60-mini-action,
.kws60-shopfront-v2 .kws60-add-item {
  background: var(--v2-accent); color: #fff; border: 0; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: -.02em; padding: 10px 16px;
  min-height: 40px; white-space: nowrap; cursor: pointer; position: static;
}
.kws60-shopfront-v2 .kws60-mini-action:hover { color: #fff; filter: brightness(1.07); }
.kws60-shopfront-v2 .kws60-btn,
.kws60-shopfront-v2 button.kws60-btn,
.kws60-shopfront-v2 a.kws60-btn {
  border-radius: 999px; font-weight: 700; letter-spacing: -.02em;
  min-height: 42px; padding: 10px 18px; border: 0; font-size: 14px;
}
.kws60-shopfront-v2 .kws60-btn-primary,
.kws60-shopfront-v2 .kws60-btn-large { background: var(--v2-accent); color: #fff; }
.kws60-shopfront-v2 .kws60-btn-whatsapp { background: var(--v2-wa); color: #fff; }
.kws60-shopfront-v2 .kws60-btn-ghost,
.kws60-shopfront-v2 .kws60-btn-secondary {
  background: var(--v2-card); color: var(--v2-ink); box-shadow: var(--v2-sh);
}

/* cart + booking card */
.kws60-shopfront-v2 .kws60-desktop-conversion { display: grid; gap: 16px; }
.kws60-shopfront-v2 .kws60-cart-panel,
.kws60-shopfront-v2 .kws60-booking-panel,
.kws60-shopfront-v2 .kws60-card,
.kws60-shopfront-v2 .kws60-info-card,
.kws60-shopfront-v2 .kws60-reviews-card,
.kws60-shopfront-v2 .kws60-faq-card {
  background: var(--v2-card); border: 0; border-radius: var(--v2-r-card);
  box-shadow: var(--v2-sh); padding: 18px;
}
.kws60-shopfront-v2 input[type="text"],
.kws60-shopfront-v2 input[type="tel"],
.kws60-shopfront-v2 input[type="email"],
.kws60-shopfront-v2 input[type="date"],
.kws60-shopfront-v2 select,
.kws60-shopfront-v2 textarea {
  background: var(--v2-bg); color: var(--v2-ink);
  border: 1.5px solid var(--v2-line); border-radius: 14px;
  padding: 12px 14px; font-size: 14.5px; font-family: inherit; width: 100%;
}
.kws60-shopfront-v2 input:focus,
.kws60-shopfront-v2 select:focus,
.kws60-shopfront-v2 textarea:focus {
  outline: 2px solid var(--v2-accent-ink); outline-offset: 1px; border-color: transparent;
}
.kws60-shopfront-v2 label { font-size: 12.5px; font-weight: 600; color: var(--v2-mut); }

/* gallery, FAQ, reviews */
.kws60-shopfront-v2 .kws60-shop-gallery img,
.kws60-shopfront-v2 .kws60-gallery-grid img { border-radius: var(--v2-r-tile); }
.kws60-shopfront-v2 details { background: var(--v2-card); border-radius: var(--v2-r-tile); padding: 14px 16px; box-shadow: var(--v2-sh); }
.kws60-shopfront-v2 details + details { margin-top: 8px; }
.kws60-shopfront-v2 summary { font-weight: 700; font-size: 14px; letter-spacing: -.02em; cursor: pointer; }

/* things V2 replaces — never render twice */
.kws60-shopfront-v2 .kws60-shopfront-hero-banner,
.kws60-shopfront-v2 .kws60-shopfront-brand-strip-v79,
.kws60-shopfront-v2 .kws60-sales-trust-strip,
.kws60-shopfront-v2 .kws60-shopfront-info-card,
.kws60-shopfront-v2 .kws60-shopfront-toolbar,
.kws60-shopfront-v2 .kws60-sales-need-nav,
.kws60-shopfront-v2 .kws60-shortcut-nav,
.kws60-shopfront-v2 .kws60-trust-grid,
.kws60-shopfront-v2 .kwspro-task-chooser,
.kws60-shopfront-v2 .kws60-seo-keyword-chips,
.kws60-shopfront-v2 .kws60-sticky-actions { display: none !important; }

/* Blueprint 3 §2.3 / Blueprint 5 R1 — the shop's page starts with the shop.
   The theme header and footer step aside on a V2 shop page only. */
body:has(.kws60-shopfront-v2) > header.site-header,
body:has(.kws60-shopfront-v2) > .site-header,
body:has(.kws60-shopfront-v2) .elementor-location-header,
body:has(.kws60-shopfront-v2) > footer.site-footer,
body:has(.kws60-shopfront-v2) .elementor-location-footer { display: none !important; }
body:has(.kws60-shopfront-v2) .site-main,
body:has(.kws60-shopfront-v2) .site-content,
body:has(.kws60-shopfront-v2) .page-content,
body:has(.kws60-shopfront-v2) .entry-content { margin: 0 !important; padding: 0 !important; max-width: none !important; }
body:has(.kws60-shopfront-v2) .entry-header,
body:has(.kws60-shopfront-v2) .page-header { display: none !important; }

/* ------------------------------------------------ desktop */
@media (min-width: 900px) {
  .kws60-shopfront-v2 .kws60-v2-hero { height: 340px; }
  .kws60-shopfront-v2 .kws60-v2-sheet {
    max-width: 1120px; margin: -46px auto 0; padding: 22px 28px 0;
    border-radius: 34px 34px 0 0;
  }
  .kws60-shopfront-v2 .kws60-v2-grab { display: none; }
  .kws60-shopfront-v2 .kws60-v2-id-copy h1 { font-size: 34px; }
  .kws60-shopfront-v2 .kws60-v2-logo { width: 74px; height: 74px; }
  .kws60-shopfront-v2 .kws60-v2-id { grid-template-columns: 1fr auto; align-items: center; column-gap: 24px; }
  .kws60-shopfront-v2 .kws60-v2-id-row { grid-column: 1; grid-row: 1; }
  .kws60-shopfront-v2 .kws60-v2-status { grid-column: 1; grid-row: 2; }
  .kws60-shopfront-v2 .kws60-v2-does { grid-column: 1; grid-row: 3; }
  .kws60-shopfront-v2 .kws60-v2-actions { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: 1fr 1fr; min-width: 320px; align-self: center; }
  .kws60-shopfront-v2 .kws60-v2-main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; }
  .kws60-shopfront-v2 .kws60-v2-side { position: sticky; top: 20px; }
  .kws60-shopfront-v2 .kws60-v2-rail { margin-inline: 0; padding-inline: 0; }
  .kws60-shopfront-v2 .kws60-v2-foot { margin-inline: -28px; padding: 26px 28px 30px; border-radius: 30px 30px 0 0; }
  .kws60-shopfront-v2 .kws60-v2-fab { display: none; }
  .kws60-shopfront-v2 .kws60-services-grid,
  .kws60-shopfront-v2 .kws60-products-grid,
  .kws60-shopfront-v2 .kws60-service-grid,
  .kws60-shopfront-v2 .kws60-product-grid { padding: 4px 22px; }
}

@media (max-width: 480px) {
  .kws60-shopfront-v2 .kws60-v2-facts { grid-template-columns: repeat(2, 1fr); }
  .kws60-shopfront-v2 .kws60-v2-id-copy h1 { font-size: 21px; }
}

.kws60-shopfront-v2 .kws60-demo-return {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: min(1120px, calc(100% - 28px)); margin: 14px auto 8px; padding: 11px 14px;
  border: 1px solid rgba(17,24,39,.12); border-radius: 14px; background: #fff; color: #17191d;
  box-shadow: 0 8px 24px rgba(17,24,39,.07);
}
.kws60-shopfront-v2 .kws60-demo-return a { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; color: #17191d; font-size: 13px; font-weight: 740; text-decoration: none; }
.kws60-shopfront-v2 .kws60-demo-return a > span:first-child { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #17191d; color: #fff; font-size: 16px; }
.kws60-shopfront-v2 .kws60-demo-return strong { font-size: 16px; letter-spacing: -.04em; }
.kws60-shopfront-v2 .kws60-demo-return a > span:last-child { padding-left: 9px; border-left: 1px solid rgba(17,24,39,.14); }
.kws60-shopfront-v2 .kws60-demo-return small { color: #6d737b; font-size: 12px; font-weight: 650; }
.kws60-shopfront-v2 .kws60-demo-return a:hover > span:last-child,
.kws60-shopfront-v2 .kws60-demo-return a:focus-visible > span:last-child { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 620px) {
  .kws60-shopfront-v2 .kws60-demo-return { align-items: flex-start; margin-top: 10px; }
  .kws60-shopfront-v2 .kws60-demo-return a { flex-wrap: wrap; }
  .kws60-shopfront-v2 .kws60-demo-return a > span:last-child { flex-basis: 100%; margin-left: 39px; margin-top: -6px; padding-left: 0; border-left: 0; }
  .kws60-shopfront-v2 .kws60-demo-return small { max-width: 130px; text-align: right; line-height: 1.35; }
}

.kws60-shopfront-v2 .kws60-demo-reset-button {
  border: 0;
  background: transparent;
  color: #5f6673;
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.kws60-shopfront-v2 .kwspro-source-chip {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 7px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1457a6;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .01em;
}

.kws60-shopfront-v2 .kwspro-source-chip.is-network {
  background: #f1edff;
  color: #5b36a8;
}

.kws60-shopfront-v2 .kwspro-demo-pitch {
  margin: 7px 0 0;
  color: #596170;
  font-size: 13px;
  line-height: 1.45;
}

/* the demo coat sits above the hero, never over it */
.kws60-shopfront-v2 .kws60-demo-coat { margin: 12px 14px; border-radius: var(--v2-r-card); }
@media (min-width: 900px) {
  .kws60-shopfront-v2 .kws60-demo-coat { max-width: 1120px; margin: 16px auto; }
}

/* keyword cloud never faces a human */
.kws60-shopfront-v2 .kws60-keyword-cloud { display: none !important; }

/* proof: bio + the folded review form */
.kws60-shopfront-v2 .kws60-v2-bio {
  margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--v2-mut);
}
.kws60-shopfront-v2 .kws60-v2-revfold { padding: 0; }
.kws60-shopfront-v2 .kws60-v2-revfold > summary {
  font-size: 13.5px; font-weight: 700; color: var(--v2-mut); padding: 4px 0;
}
.kws60-shopfront-v2 .kws60-v2-revfold[open] > summary { margin-bottom: 10px; }

/* ------------------------------------------------ phone density */
@media (max-width: 640px) {
  /* A menu row is a name and a price. The sentence belongs to the detail view. */
  .kws60-shopfront-v2 .kws60-service-card .kws60-row-copy p,
  .kws60-shopfront-v2 .kws60-product-card .kws60-row-copy p { display: none; }
  .kws60-shopfront-v2 .kws60-service-card,
  .kws60-shopfront-v2 .kws60-product-card { padding: 11px 0; gap: 10px; }
  .kws60-shopfront-v2 .kws60-icon-bubble { width: 34px; height: 34px; border-radius: 11px; font-size: 13px; }
  .kws60-shopfront-v2 .kws60-service-card h3,
  .kws60-shopfront-v2 .kws60-product-card h3 { margin: 0; }
  .kws60-shopfront-v2 .kws60-price-text { font-size: 13.5px; padding: 6px 11px; }
  .kws60-shopfront-v2 .kws60-mini-action { font-size: 12.5px; padding: 9px 13px; min-height: 36px; }
  .kws60-shopfront-v2 .kws60-service-grid,
  .kws60-shopfront-v2 .kws60-product-grid { padding: 2px 14px; }
}

/* the assistant button rides above the action bar, never over the copy.
 * 8.5.4: this used to say [class*="oleo2"][class*="launch"], which also caught
 * .oleo2-launch-icon inside the button and pushed the icon 20px out of its own
 * pill. Name the button, not a pattern. */
.kws60-shopfront-v2 ~ .oleo2-launcher,
.kws60-shopfront-v2 ~ .oleo2-root .oleo2-launcher,
body:has(.kws60-shopfront-v2) .oleo2-launcher,
body:has(.kws60-shopfront-v2) button.oleo2-launch {
  bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 900px) {
  body:has(.kws60-shopfront-v2) .oleo2-launcher,
  body:has(.kws60-shopfront-v2) button.oleo2-launch { bottom: 20px !important; }
}

/* the shop's colour books, everywhere */
.kws60-shopfront-v2 .kws60-btn.kws60-btn-block,
.kws60-shopfront-v2 .kws60-btn-block,
.kws60-shopfront-v2 button.kws60-btn:not(.kws60-btn-ghost):not(.kws60-btn-secondary):not(.kws60-btn-whatsapp) {
  background: var(--v2-accent) !important; color: #fff !important;
  border-radius: 999px; min-height: 50px; font-weight: 700; letter-spacing: -.02em; border: 0;
}
.kws60-shopfront-v2 .kws60-btn-whatsapp { background: var(--v2-wa) !important; color: #fff !important; }

/* nothing pale hangs below the footer */
.kws60-shopfront-v2 .kws60-v2-foot { margin-bottom: 0; }
body:has(.kws60-shopfront-v2) .site-footer,
body:has(.kws60-shopfront-v2) .site-footer-inner { display: none !important; }

/* =========================================================
 * V8.4.0 — the booking sheet
 * On a phone the cart and booking card are not a wall of page;
 * they are a sheet the Book button pulls up.
 * ========================================================= */
.kws60-shopfront-v2 .kws60-v2-sheet-bar { display: none; }
.kws60-shopfront-v2 .kws60-v2-scrim { display: none; }
.kws60-shopfront-v2 .kws60-v2-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #fff; color: var(--v2-accent); font-size: 12px; font-weight: 800;
  display: inline-grid; place-items: center; line-height: 1; margin-left: 2px;
  font-variant-numeric: tabular-nums;
}
.kws60-shopfront-v2 .kws60-v2-count[hidden] { display: none; }

@media (max-width: 899px) {
  .kws60-shopfront-v2 .kws60-v2-side {
    position: fixed; inset: auto 0 0 0; z-index: 70;
    max-height: min(88vh, 760px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--v2-bg);
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -18px 50px -20px rgba(0, 0, 0, .45);
    padding: 0 14px calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateY(102%);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    visibility: hidden;
  }
  .kws60-shopfront-v2 .kws60-v2-side.is-open { transform: none; visibility: visible; }
  .kws60-shopfront-v2 .kws60-v2-sheet-bar {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    position: sticky; top: 0; z-index: 2; background: var(--v2-bg);
    padding: 10px 0 8px; margin-bottom: 4px;
  }
  .kws60-shopfront-v2 .kws60-v2-sheet-bar .kws60-v2-grab { grid-column: 1 / -1; margin: 0 auto 6px; }
  .kws60-shopfront-v2 .kws60-v2-sheet-close {
    grid-column: 2; grid-row: 2; justify-self: end;
    width: 34px; height: 34px; border-radius: 50%; border: 0;
    background: var(--v2-well); color: var(--v2-mut);
    font-size: 21px; line-height: 1; cursor: pointer;
  }
  .kws60-shopfront-v2 .kws60-v2-scrim {
    display: block; position: fixed; inset: 0; z-index: 65;
    background: rgba(8, 11, 14, .5);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .28s ease;
  }
  .kws60-shopfront-v2 .kws60-v2-scrim[hidden] { display: none; }
  .kws60-shopfront-v2 .kws60-v2-scrim.is-open { opacity: 1; }
  /* the page does not scroll behind an open sheet */
  body.kws60-v2-sheet-open { overflow: hidden; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .kws60-shopfront-v2 .kws60-v2-side,
  .kws60-shopfront-v2 .kws60-v2-scrim { transition: none; }
}

/* while the sheet is up, the bar underneath it has nothing left to say */
body.kws60-v2-sheet-open .kws60-shopfront-v2 .kws60-v2-fab {
  transform: translateY(150%); opacity: 0; pointer-events: none;
}

/* =========================================================
 * V8.5.0 — tyres
 * The shop's own stock first, then the Klinikar network. Per tyre big,
 * because that is what a driver compares; four beside it, because that
 * is what he pays.
 * ========================================================= */

/* the Pro chooser's task gating does not apply on a one-page layout */
.kws60-shopfront-v2 .kwspro-fitment-search,
.kws60-shopfront-v2 .kwspro-tyre-tool,
.kws60-shopfront-v2 [data-kwspro-module="tyres"],
.kws60-shopfront-v2 [data-kwspro-module="services"],
.kws60-shopfront-v2 .kwspro-service-section,
.kws60-shopfront-v2 .kwspro-tyre-section { display: revert; }

.kws60-shopfront-v2 .kws60-product-card { align-items: start; }
.kws60-shopfront-v2 .kws60-product-card .kws60-row-main {
  display: grid; grid-template-columns: 1fr; gap: 3px; align-items: start;
}
.kws60-shopfront-v2 .kws60-stock-label,
.kws60-shopfront-v2 .kws60-source-chip {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; justify-self: start; line-height: 1.2;
}
.kws60-shopfront-v2 .kws60-stock-label { background: var(--v2-well); color: var(--v2-mut); }
.kws60-shopfront-v2 .kws60-source-chip.kws60-source-own { background: var(--v2-okbg); color: var(--v2-okink); }
.kws60-shopfront-v2 .kws60-source-chip.kws60-source-network { background: var(--v2-accent-soft); color: var(--v2-accent-ink); }
.kws60-shopfront-v2 .kws60-product-card h3 { font-size: 15px; letter-spacing: -.025em; margin: 4px 0 0; }
.kws60-shopfront-v2 .kws60-product-brand {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--v2-mut);
}
.kws60-shopfront-v2 .kws60-product-model { font-style: normal; font-weight: 800; }
.kws60-shopfront-v2 .kws60-product-size {
  font-size: 12px; color: var(--v2-mut); font-weight: 600; margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
}
.kws60-shopfront-v2 .kws60-product-card .kws60-row-action {
  display: grid; gap: 7px; justify-items: end; align-content: start;
}
.kws60-shopfront-v2 .kws60-product-card .kws60-price-text {
  font-size: 19px; font-weight: 800; letter-spacing: -.04em;
  background: transparent; color: var(--v2-ink); padding: 0;
}
.kws60-shopfront-v2 .kws60-product-card .kws60-price-text .kws60-price-unit {
  font-size: 10.5px; font-weight: 600; color: var(--v2-mut); letter-spacing: 0;
}
.kws60-shopfront-v2 .kws60-price-four {
  font-size: 12px; font-weight: 700; color: var(--v2-accent-ink);
  background: var(--v2-accent-soft); padding: 5px 10px; border-radius: 999px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.kws60-shopfront-v2 .kws60-product-card del { font-size: 11px; color: var(--v2-faint); }
.kws60-shopfront-v2 .kws60-qty-control {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--v2-mut);
}
.kws60-shopfront-v2 .kws60-qty-control .kws60-item-qty {
  width: 58px; padding: 8px 8px; text-align: center; border-radius: 12px;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.kws60-shopfront-v2 .kws60-pattern-button {
  background: none; border: 0; padding: 2px 0; margin-top: 2px;
  font-size: 12px; font-weight: 700; color: var(--v2-accent-ink); cursor: pointer;
  justify-self: start; text-decoration: underline; text-underline-offset: 3px;
}

/* the search sits at the top of the section, where a driver looks first */
.kws60-shopfront-v2 .kws60-v2-tyrehead { display: grid; gap: 10px; margin-bottom: 12px; }
.kws60-shopfront-v2 .kws60-v2-tyrehint { margin: 0; font-size: 13px; color: var(--v2-mut); }
.kws60-shopfront-v2 .kwspro-fitment-search,
.kws60-shopfront-v2 .kws60-product-search,
.kws60-shopfront-v2 .kws60-tyre-search {
  background: var(--v2-card); border-radius: var(--v2-r-card);
  padding: 14px 16px; box-shadow: var(--v2-sh); border: 0;
}

@media (max-width: 640px) {
  /* A tyre card is one glance: what it is on the left, what it costs and how to
     add it on the right. Eight of these must not be six screens of scrolling. */
  /* Four classes on purpose. The Pro extension stacks tyre cards under 782px
     with its own !important, and its stylesheet loads after this one, so an
     equal-specificity rule here would silently lose. */
  .kws60-shopfront-v2.kws60-shopfront .kws60-product-grid > .kws60-product-card,
  .kws60-shopfront-v2.kws60-shopfront .kws60-product-card {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 148px) !important;
    align-items: start; gap: 10px; padding: 12px 0;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-row-main { min-width: 0; gap: 2px; }
  .kws60-shopfront-v2 .kws60-product-card .kws60-row-action {
    display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
    gap: 6px 8px; min-width: 0;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-price-text { font-size: 17px; width: 100%; text-align: right; }
  .kws60-shopfront-v2 .kws60-product-card .kws60-stock-label { display: none; }
  .kws60-shopfront-v2 .kws60-product-card small,
  .kws60-shopfront-v2 .kws60-product-card del,
  .kws60-shopfront-v2 .kws60-product-card .kws60-row-action > span:not(.kws60-price-four),
  .kws60-shopfront-v2 .kws60-product-card .kws60-pattern-button { display: none; }
  .kws60-shopfront-v2 .kws60-price-four { font-size: 11px; padding: 4px 9px; }
  .kws60-shopfront-v2 .kws60-product-card .kws60-qty-control { font-size: 0; gap: 0; }
  .kws60-shopfront-v2 .kws60-product-card .kws60-qty-control .kws60-item-qty {
    width: 46px; padding: 7px 4px; font-size: 13px;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-add-item { padding: 9px 12px; font-size: 12px; }
}


/* the tyre tile leads the rail and wears the shop's colour */
.kws60-shopfront-v2 .kws60-v2-tile.is-tyres { background: var(--v2-ink); }
.kws60-shopfront-v2 .kws60-v2-tile.is-tyres .kws60-v2-tile-t { color: var(--v2-bg); }
.kws60-shopfront-v2 .kws60-v2-tile.is-tyres .kws60-v2-tile-p { color: var(--v2-faint); }
.kws60-shopfront-v2 .kws60-v2-tile.is-tyres .kws60-v2-well {
  background: var(--v2-accent); color: #fff;
}

/* a chip never reads one letter per line */
.kws60-shopfront-v2 .kws60-source-chip,
.kws60-shopfront-v2 .kws60-stock-label { white-space: nowrap; }

/* ================================================================
 * V8.5.1 — the tyre search
 * A searched tyre and a listed tyre are the same product, so they get the
 * same card. The Pro extension draws its results with its own markup and a
 * hard white background; these rules fold that markup into ours. Only the
 * look changes — the plugin's data attributes, quantity box and add button
 * are left exactly where they are, so the cart keeps working.
 * ================================================================ */
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-list {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: var(--v2-card); border-radius: var(--v2-r-card);
  padding: 2px 18px; box-shadow: var(--v2-sh); margin-top: 14px;
}
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-row {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start; gap: 14px;
  background: transparent !important; border: 0; border-top: 1px solid var(--v2-line);
  border-radius: 0; box-shadow: none; padding: 14px 0; margin: 0; min-height: 0; color: var(--v2-ink);
}
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-row:first-child { border-top: 0; }
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-main {
  display: grid; grid-template-columns: 1fr; gap: 3px; align-items: start; min-width: 0;
}
.kws60-shopfront-v2 .kws60-v2-resulthead { display: grid; gap: 3px; justify-items: start; }
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-main > b { font-size: 14.5px; font-weight: 700; }
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-main small,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-inclusion-note {
  font-size: 11.5px; color: var(--v2-mut); margin: 2px 0 0; line-height: 1.35; background: none; padding: 0;
}
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side {
  display: grid; gap: 7px; justify-items: end; align-content: start; text-align: right;
}
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > strong {
  font-size: 19px; font-weight: 800; letter-spacing: -.04em;
  background: transparent; color: var(--v2-ink); padding: 0;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > strong .kws60-price-unit {
  font-size: 10.5px; font-weight: 600; color: var(--v2-mut); letter-spacing: 0;
}
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; color: var(--v2-mut);
}
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side input[type="number"] {
  width: 58px; padding: 8px; text-align: center; border-radius: 12px;
  border: 1px solid var(--v2-line); background: var(--v2-well); color: var(--v2-ink);
  font-weight: 700; font-size: 13px;
}
/* The Pro stylesheet loads after this one and paints its own button dark,
 * so the searched tyre and the listed tyre would not even share a button. */
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side button,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-row button[data-kws60-cart-add] {
  min-height: 44px !important; padding: 0 16px !important; border-radius: 13px !important; border: 0 !important;
  background: var(--v2-accent, #e8442f) !important; color: #fff !important;
  font-weight: 700 !important; font-size: 13px; letter-spacing: -.01em; cursor: pointer; white-space: nowrap;
}
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-staff-note { font-size: 10.5px; color: var(--v2-faint); }
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-empty {
  background: var(--v2-card); border-radius: var(--v2-r-card); box-shadow: var(--v2-sh);
  padding: 22px 18px; margin-top: 14px; color: var(--v2-mut);
}
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-empty strong { color: var(--v2-ink); display: block; font-size: 15px; }

/* The workshop's own stock, lifted to the top of the results. */
.kws60-shopfront-v2 .kws60-v2-ownhead {
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--v2-okink); margin: 14px 0 0; padding: 0;
}
.kws60-shopfront-v2 .kwspro-product-list > .kws60-product-card[data-kws60-v2-own] { border-top: 0; }
.kws60-shopfront-v2 .kwspro-product-list > .kws60-product-card[data-kws60-v2-own] ~ .kwspro-product-row:first-of-type { border-top: 1px solid var(--v2-line); }

/* ---------------------------------------------- tap targets (44px)
 * Both tyre tabs, the language buttons and the sheet's close control were
 * between 32px and 34px. Thumbs are not that accurate. */
/* Same specificity as the Pro rule that sets these to 34px, and the Pro
 * stylesheet loads after this one — so it has to be stated outright. */
.kws60-shopfront-v2 .kwspro-tyre-mode button {
  min-height: 44px !important; padding: 0 16px !important;
}
.kws60-shopfront-v2 .kws60-v2-langs a { min-height: 44px; display: inline-flex; align-items: center; }
.kws60-shopfront-v2 .kws60-v2-sheet-close { min-width: 44px; min-height: 44px; }
.kws60-shopfront-v2 .kws60-v2-sechead > a,
.kws60-shopfront-v2 .kws60-section-head > a { min-height: 44px; display: inline-flex; align-items: center; }

@media (max-width: 899px) {
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-list { padding: 2px 14px; }
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-row {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 148px) !important;
  }
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > strong { font-size: 17px; }
}

/* ================================================================
 * V8.5.2 — the taste pass
 *
 * Nothing here changes a word, a price or a behaviour. It is rhythm,
 * restraint and room: one red instead of four, rows that hold their shape at
 * 390px instead of breaking a service name one letter to a line, and a
 * desktop that stops leaving half the screen empty below the booking card.
 * ================================================================ */

/* ---------------------------------------------- one red, used sparingly
 * The page was carrying an orange demo button, a navy search button, a red
 * price, a pink pill and a red button, all in one screen. Money reads as ink;
 * the accent is kept for the thing you are meant to press. */
.kws60-shopfront-v2 .kws60-product-card .kws60-price-text,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > strong {
  color: var(--v2-ink) !important;
}
.kws60-shopfront-v2 .kws60-price-four {
  background: var(--v2-well) !important;
  color: var(--v2-mut) !important;
  font-weight: 650;
}
.kws60-shopfront-v2 .kws60-service-card .kws60-price-text,
.kws60-shopfront-v2 .kws60-staff-pill {
  background: var(--v2-well) !important; color: var(--v2-ink) !important;
  font-weight: 700; font-size: 13px;
}
.kws60-shopfront-v2 .kws60-service-card .kws60-price-text .kws60-price-unit,
.kws60-shopfront-v2 .kws60-service-card .kws60-price-text small,
.kws60-shopfront-v2 .kws60-service-card .kws60-price-text b {
  color: inherit !important;
}
.kws60-shopfront-v2 .kwspro-fitment-search [data-kwspro-fitment-submit],
.kws60-shopfront-v2 .kwspro-fitment-search [data-kwspro-size-submit] {
  background: var(--v2-accent, #e8442f) !important;
  border-color: var(--v2-accent, #e8442f) !important;
  color: #fff !important; min-height: 46px; border-radius: 13px; font-weight: 700;
}
.kws60-shopfront-v2 .kws60-demo-coat-cta {
  background: var(--v2-accent, #e8442f) !important; border-radius: 12px;
}
/* Waze was shouting and Google Maps was whispering; they are the same choice. */
.kws60-shopfront-v2 .kws60-v2-find .kws60-v2-btn-accent {
  background: transparent; color: var(--v2-ink);
  border: 1px solid var(--v2-line2, rgba(0,0,0,.14));
}
.kws60-shopfront-v2 .kws60-v2-find .kws60-v2-btn-accent:hover {
  background: var(--v2-well);
}

/* ---------------------------------------------- surfaces
 * A hairline and a whisper of shadow, instead of a drop shadow doing the work
 * of a border. Cards stop looking like they are floating off the page. */
.kws60-shopfront-v2 .kws60-card,
.kws60-shopfront-v2 .kws60-section,
.kws60-shopfront-v2 .kws60-product-grid,
.kws60-shopfront-v2 .kws60-service-grid,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-list,
.kws60-shopfront-v2 .kwspro-fitment-search {
  border: 1px solid var(--v2-line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 24px -20px rgba(16, 24, 40, .18);
}

/* ---------------------------------------------- rows that keep their shape
 * At 390px the action side took whatever it wanted and the name column was
 * left with about forty pixels, so "Wheel Alignment" came out one letter to a
 * line. The action column is now a fixed track and the name gets the rest. */
.kws60-shopfront-v2 .kws60-service-grid > .kws60-service-card,
.kws60-shopfront-v2 .kws60-product-grid > .kws60-product-card,
.kws60-shopfront-v2 .kws60-service-card,
.kws60-shopfront-v2 .kws60-product-card,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-row {
  grid-template-columns: minmax(0, 1fr) 176px !important;
  gap: 16px; padding: 16px 0;
}
.kws60-shopfront-v2 .kws60-row-main,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-main { min-width: 0; }
.kws60-shopfront-v2 .kws60-service-card h3,
.kws60-shopfront-v2 .kws60-product-card h3,
.kws60-shopfront-v2 .kws60-v2-resulthead h3 {
  overflow-wrap: break-word; word-break: normal; hyphens: none;
}
/* The action side reads as two lines: what it costs, then what to press. */
.kws60-shopfront-v2 .kws60-product-card .kws60-row-action,
.kws60-shopfront-v2 .kws60-service-card .kws60-row-action,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side {
  display: grid !important; gap: 8px; justify-items: stretch !important;
  align-content: start; text-align: right; width: 100%;
}
.kws60-shopfront-v2 .kws60-product-card .kws60-add-item,
.kws60-shopfront-v2 .kws60-service-card .kws60-add-item,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side button {
  width: 100%; justify-content: center;
}
.kws60-shopfront-v2 .kws60-qty-control,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side label {
  justify-content: flex-end; width: 100%;
}
.kws60-shopfront-v2 .kws60-price-four,
.kws60-shopfront-v2 .kws60-product-card .kws60-price-text,
.kws60-shopfront-v2 .kws60-service-card .kws60-price-text {
  justify-self: end;
}
/* Two stock chips in a stack was one chip too many. */
.kws60-shopfront-v2 .kws60-product-card .kws60-stock-label { display: none; }
.kws60-shopfront-v2 .kws60-product-card del,
.kws60-shopfront-v2 .kwspro-fitment-results del { display: none; }

/* ---------------------------------------------- the tiles
 * The tyre tile is meant to lead; it was reading as the one that went wrong,
 * because its label sat in the same grey as the others on a black card. */
.kws60-shopfront-v2 .kws60-v2-tile {
  min-width: 164px; border-radius: 16px; padding: 15px 14px;
  border: 1px solid var(--v2-line); box-shadow: none;
}
.kws60-shopfront-v2 .kws60-v2-tile-t {
  font-size: 13.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em;
}
.kws60-shopfront-v2 .kws60-v2-tile-p { font-size: 11.5px; }
.kws60-shopfront-v2 .kws60-v2-tile.is-tyres { border-color: transparent; }
.kws60-shopfront-v2 .kws60-v2-tile.is-tyres .kws60-v2-tile-t { color: #fff; }
.kws60-shopfront-v2 .kws60-v2-tile.is-tyres .kws60-v2-tile-p { color: rgba(255,255,255,.72); }

/* ---------------------------------------------- headings and rhythm
 * Everything was set a size or two below what a 1120px canvas wants, which is
 * what makes a page feel timid rather than calm. */
.kws60-shopfront-v2 .kws60-v2-sechead h2,
.kws60-shopfront-v2 .kws60-section-head h2,
.kws60-shopfront-v2 .kws60-section h2 {
  font-size: clamp(19px, 2.1vw, 23px); letter-spacing: -.025em; line-height: 1.2;
}
.kws60-shopfront-v2 .kws60-service-card h3,
.kws60-shopfront-v2 .kws60-product-card h3,
.kws60-shopfront-v2 .kws60-v2-resulthead h3 { font-size: 15.5px; }
.kws60-shopfront-v2 .kws60-product-size,
.kws60-shopfront-v2 .kws60-service-card p { font-size: 12.5px; }
.kws60-shopfront-v2 .kws60-v2-sechead,
.kws60-shopfront-v2 .kws60-section-head { align-items: baseline; }
.kws60-shopfront-v2 .kws60-v2-sechead > a,
.kws60-shopfront-v2 .kws60-section-head > a {
  font-size: 13px; font-weight: 650; text-decoration: none;
  color: var(--v2-mut);
}
.kws60-shopfront-v2 .kws60-v2-sechead > a:hover,
.kws60-shopfront-v2 .kws60-section-head > a:hover { color: var(--v2-ink); }

/* The bio was a single unbroken wall of grey. */
.kws60-shopfront-v2 .kws60-v2-bio {
  font-size: 13.5px; line-height: 1.65; max-width: 62ch;
}
.kws60-shopfront-v2 .kws60-v2-facts { gap: 10px; }
.kws60-shopfront-v2 .kws60-v2-fact { border: 1px solid var(--v2-line); box-shadow: none; }

/* ---------------------------------------------- desktop
 * Below the booking card the right-hand four hundred pixels were simply empty,
 * for the whole rest of the page, while everything else was squeezed into the
 * left column. The cart now travels with the reader, which is both the honest
 * use of that space and the thing a customer actually wants within reach. */
@media (min-width: 900px) {
  .kws60-shopfront-v2 .kws60-v2-side {
    position: sticky; top: 18px; align-self: start;
    max-height: calc(100vh - 36px); overflow-y: auto; overscroll-behavior: contain;
  }
  .kws60-shopfront-v2 .kws60-v2-side::-webkit-scrollbar { width: 8px; }
  .kws60-shopfront-v2 .kws60-v2-side::-webkit-scrollbar-thumb {
    background: var(--v2-line2, rgba(0,0,0,.14)); border-radius: 99px;
  }
  /* One firm track for the money and the button, so every row in the list
     lines up and no row opens a canyon down its middle. */
  .kws60-shopfront-v2 .kws60-service-grid > .kws60-service-card,
  .kws60-shopfront-v2 .kws60-product-grid > .kws60-product-card,
  .kws60-shopfront-v2 .kws60-service-card,
  .kws60-shopfront-v2 .kws60-product-card,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-row {
    grid-template-columns: minmax(0, 1fr) 268px !important;
    align-items: center; gap: 24px; padding: 18px 0;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-row-action,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side {
    display: grid !important; grid-template-columns: auto 1fr;
    grid-template-areas: "price four" "qty add"; gap: 10px 12px; align-items: center;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-price-text,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > strong {
    grid-area: price; justify-self: start !important; white-space: nowrap;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-price-four,
  .kws60-shopfront-v2 .kwspro-fitment-results .kws60-price-four {
    grid-area: four; justify-self: end !important;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-qty-control,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side label {
    grid-area: qty; justify-self: start;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-add-item,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side button {
    grid-area: add; justify-self: stretch; width: 100% !important;
  }
  /* A promo line belongs with the tyre, not wedged into the buying column. */
  .kws60-shopfront-v2 .kws60-product-card .kws60-row-action > span:not(.kws60-price-four),
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > small,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > em {
    grid-column: 1 / -1; justify-self: start; text-align: left; font-size: 11.5px;
  }
  .kws60-shopfront-v2 .kws60-service-card .kws60-row-action {
    display: flex !important; align-items: center; justify-content: flex-end; gap: 12px;
  }
  .kws60-shopfront-v2 .kws60-service-card .kws60-add-item { min-width: 132px; }
  .kws60-shopfront-v2 .kws60-product-grid,
  .kws60-shopfront-v2 .kws60-service-grid,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-list { padding: 4px 22px; }
}

/* ---------------------------------------------- phone
 * Room at the bottom so the floating bar covers nothing, a demo banner that
 * scrolls its chips in one row instead of stacking four, and a chat bubble
 * that sits above the bar rather than on top of a price. */
@media (max-width: 899px) {
  .kws60-shopfront-v2 .kws60-v2-shell { padding-bottom: 104px; }
  /* One column, not two. A phone row reads better as a line of identity with
   * a line of money and action under it than as two columns fighting over 390
   * pixels — and it takes a third less height, so more tyres fit on a screen. */
  .kws60-shopfront-v2 .kws60-service-grid > .kws60-service-card,
  .kws60-shopfront-v2 .kws60-product-grid > .kws60-product-card,
  .kws60-shopfront-v2 .kws60-service-card,
  .kws60-shopfront-v2 .kws60-product-card,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-row {
    grid-template-columns: 1fr !important;
    gap: 9px; padding: 13px 0;
  }
  /* The identity block was three loose lines plus a chip. Tightened, it gives
   * back roughly a screen and a half across a long tyre list. */
  .kws60-shopfront-v2 .kws60-product-brand { line-height: 1.15; }
  .kws60-shopfront-v2 .kws60-product-card h3,
  .kws60-shopfront-v2 .kws60-v2-resulthead h3 { margin: 2px 0 0; line-height: 1.25; }
  .kws60-shopfront-v2 .kws60-product-size { margin-top: 1px; }
  .kws60-shopfront-v2 .kws60-source-chip { padding: 3px 8px; font-size: 9.5px; }
  .kws60-shopfront-v2 .kws60-product-card .kws60-row-action,
  .kws60-shopfront-v2 .kws60-service-card .kws60-row-action,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side {
    display: flex !important; flex-wrap: wrap; align-items: center;
    justify-content: flex-start; gap: 8px; text-align: left;
  }
  .kws60-shopfront-v2 .kws60-qty-control,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side label {
    margin-left: auto; width: auto; justify-content: flex-end;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-add-item,
  .kws60-shopfront-v2 .kws60-service-card .kws60-add-item,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side button {
    width: auto !important; min-width: 116px; padding: 0 18px !important;
    min-height: 44px !important; font-size: 13px;
  }
  .kws60-shopfront-v2 .kws60-service-card .kws60-add-item { margin-left: auto; }
  /* A tyre row wants two deliberate lines: what one costs and what four cost,
   * then the quantity and the button. Left to wrap on its own the price ended
   * up stranded on a line of its own. */
  .kws60-shopfront-v2 .kws60-product-card .kws60-row-action,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side {
    display: grid !important; grid-template-columns: auto 1fr;
    grid-template-areas: "price four" "qty add"; gap: 9px 10px; align-items: center;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-price-text,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > strong {
    grid-area: price; justify-self: start !important; white-space: nowrap;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-price-four,
  .kws60-shopfront-v2 .kwspro-fitment-results .kws60-price-four {
    grid-area: four; justify-self: end !important;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-qty-control,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side label {
    grid-area: qty; justify-self: start; margin-left: 0;
  }
  .kws60-shopfront-v2 .kws60-product-card .kws60-add-item,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side button {
    grid-area: add; justify-self: stretch; width: 100% !important;
  }
  /* Promo lines, gift notes and the staff footnote sit under the pair. */
  .kws60-shopfront-v2 .kws60-product-card .kws60-row-action > span:not(.kws60-price-four),
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > small,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > em {
    grid-column: 1 / -1; justify-self: start; text-align: left;
  }

  /* The 8.3.0 rule that beats the Pro stylesheet carries four classes, so the
   * single-column phone card has to be stated at the same weight. */
  .kws60-shopfront-v2.kws60-shopfront .kws60-product-grid > .kws60-product-card,
  .kws60-shopfront-v2.kws60-shopfront .kws60-product-card {
    grid-template-columns: 1fr !important;
  }
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-staff-note { flex: 1 0 100%; text-align: left; }
  .kws60-shopfront-v2 .kws60-product-card .kws60-price-text,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side > strong { font-size: 17px; }
  .kws60-shopfront-v2 .kws60-price-four { font-size: 11px; padding: 4px 8px; }
  .kws60-shopfront-v2 .kws60-qty-control .kws60-item-qty,
  .kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side input[type="number"] {
    width: 52px; padding: 7px 4px;
  }
  .kws60-shopfront-v2 .kws60-v2-tile { min-width: 152px; }

  .kws60-shopfront-v2 .kws60-demo-coat { padding: 15px 14px; gap: 10px; }
  .kws60-shopfront-v2 .kws60-demo-coat-try {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px; scrollbar-width: none;
  }
  .kws60-shopfront-v2 .kws60-demo-coat-try::-webkit-scrollbar { display: none; }
  .kws60-shopfront-v2 .kws60-demo-coat-try > span { display: none; }
  .kws60-shopfront-v2 .kws60-demo-coat-try button { flex: 0 0 auto; min-height: 40px; font-size: 12.5px; }
  .kws60-shopfront-v2 .kws60-demo-coat-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .kws60-shopfront-v2 .kws60-demo-coat-actions > * { width: 100%; text-align: center; min-height: 44px; }
  .kws60-shopfront-v2 .kws60-demo-coat-main p { font-size: 12.5px; }
}
/* The chat launcher is outside our shell, so it is lifted by page, not by
   section: on a phone the floating bar owns the bottom of the screen. */
@media (max-width: 899px) {
  body:has(.kws60-shopfront-v2) .oleo2-launch { bottom: 92px !important; }
}

/* ---------------------------------------------- the booking panel
 * Four solid red discs read as four things gone wrong rather than four steps,
 * and the "ask first" note was an amber warning box around an underlined red
 * link. Both are ordinary, reassuring information; they now look like it. */
.kws60-shopfront-v2 .kws60-booking-progress { counter-reset: kws60step; }
.kws60-shopfront-v2 .kws60-booking-progress li { counter-increment: kws60step; align-items: center; }
.kws60-shopfront-v2 .kws60-booking-progress li > span {
  width: 22px !important; height: 22px !important;
  background: var(--v2-well) !important; color: var(--v2-mut) !important;
  border: 1px solid var(--v2-line) !important;
  display: inline-grid !important; place-items: center;
  font-size: 11px; font-weight: 800; line-height: 1;
}
.kws60-shopfront-v2 .kws60-booking-progress li > span::before { content: counter(kws60step); }
.kws60-shopfront-v2 .kws60-booking-progress li > b { font-weight: 650; font-size: 12.5px; }

.kws60-shopfront-v2 .kws60-booking-clarity-note {
  background: var(--v2-well) !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 12px;
}
.kws60-shopfront-v2 .kws60-booking-clarity-note a {
  color: var(--v2-ink) !important; text-decoration: none !important;
  font-weight: 650; border-bottom: 1px solid var(--v2-line2, rgba(0,0,0,.2));
}
.kws60-shopfront-v2 .kws60-booking-clarity-note a:hover { border-bottom-color: currentColor; }

/* The add-on list was a stack of amber boxes with red prices, which made three
 * optional extras look like three warnings. */
.kws60-shopfront-v2 .kws60-addon-row small {
  background: var(--v2-well) !important;
  border-color: var(--v2-line) !important;
  color: var(--v2-mut) !important;
}
.kws60-shopfront-v2 .kws60-addon-row em {
  color: var(--v2-ink) !important; font-style: normal; font-weight: 750;
}

/* ================================================================
 * V8.5.5 — premium white shop
 *
 * The workshop page is a sales surface, so it keeps one predictable light
 * appearance instead of following the visitor's operating-system theme.
 * Larger gutters, quieter borders and shorter service lists make the page
 * easier to scan without changing shop data, prices or cart behaviour.
 * ================================================================ */
.kws60-shopfront-v2 {
  color-scheme: light;
  --v2-bg: #ffffff;
  --v2-card: #ffffff;
  --v2-ink: #101114;
  --v2-mut: #667085;
  --v2-faint: #98a2b3;
  --v2-line: #e6e8ec;
  --v2-line2: #d7dbe1;
  --v2-well: #f5f6f8;
  --v2-wa: #128c7e;
  --v2-okbg: #ecfdf3;
  --v2-okink: #087a4d;
  --v2-okdot: #12b76a;
  --v2-ambbg: #fff7e7;
  --v2-ambink: #9a5b00;
  --v2-ambdot: #f79009;
  --v2-accent-soft: color-mix(in srgb, var(--v2-accent) 9%, white);
  --v2-sh: 0 1px 2px rgba(16, 24, 40, .035), 0 18px 48px -36px rgba(16, 24, 40, .28);
  background: #fff !important;
  color: var(--v2-ink) !important;
}

body:has(.kws60-shopfront-v2),
body:has(.kws60-shopfront-v2) #page,
body:has(.kws60-shopfront-v2) .site-main,
body:has(.kws60-shopfront-v2) .site-content,
body:has(.kws60-shopfront-v2) .page-content,
body:has(.kws60-shopfront-v2) .entry-content {
  background: #fff !important;
}

.kws60-shopfront-v2 .kws60-v2-sheet {
  background: #fff;
}

.kws60-shopfront-v2 .kws60-v2-id {
  padding-bottom: 24px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--v2-line);
}

.kws60-shopfront-v2 .kws60-v2-today {
  padding: 16px 18px;
  margin-bottom: 24px;
  border: 1px solid var(--v2-line);
  box-shadow: none;
}

.kws60-shopfront-v2 .kws60-v2-quick {
  margin-bottom: 30px;
}

.kws60-shopfront-v2 .kws60-v2-main,
.kws60-shopfront-v2 .kws60-v2-col,
.kws60-shopfront-v2 .kws60-v2-side {
  gap: 28px;
}

.kws60-shopfront-v2 .kws60-section,
.kws60-shopfront-v2 .kwspro-fitment-search,
.kws60-shopfront-v2 .kws60-v2-proof,
.kws60-shopfront-v2 .kws60-v2-find {
  padding: 24px;
  border: 1px solid var(--v2-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--v2-sh);
}

.kws60-shopfront-v2 .kwspro-fitment-search {
  margin: 0;
}

.kws60-shopfront-v2 .kws60-section-head,
.kws60-shopfront-v2 .kws60-v2-tyrehead {
  margin-bottom: 20px;
}

.kws60-shopfront-v2 .kws60-section-head h2,
.kws60-shopfront-v2 .kws60-section h2,
.kws60-shopfront-v2 .kws60-v2-sechead h2 {
  color: var(--v2-ink) !important;
}

.kws60-shopfront-v2 .kws60-service-grid,
.kws60-shopfront-v2 .kws60-product-grid,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-list,
.kws60-shopfront-v2 .kws60-v2-hours,
.kws60-shopfront-v2 details,
.kws60-shopfront-v2 .kws60-desktop-cart-panel,
.kws60-shopfront-v2 .kws60-desktop-booking-panel {
  border: 1px solid var(--v2-line);
  box-shadow: none;
}

.kws60-shopfront-v2 .kws60-service-card,
.kws60-shopfront-v2 .kws60-product-card,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-row {
  color: var(--v2-ink) !important;
}

.kws60-shopfront-v2 input[type="text"],
.kws60-shopfront-v2 input[type="tel"],
.kws60-shopfront-v2 input[type="email"],
.kws60-shopfront-v2 input[type="date"],
.kws60-shopfront-v2 input[type="number"],
.kws60-shopfront-v2 select,
.kws60-shopfront-v2 textarea {
  color-scheme: light;
  background: #fff !important;
  color: var(--v2-ink) !important;
  border-color: var(--v2-line2) !important;
}

.kws60-shopfront-v2 .kws60-v2-foot {
  margin-top: 32px;
  border: 1px solid var(--v2-line);
  border-bottom: 0;
  background: #f8f9fb;
}

/* Once a fitment search has real matches, the customer should see that result
 * set only. The general catalogue below otherwise looks like part of the
 * answer and mixes unrelated sizes into the decision. */
.kws60-shopfront-v2 .kws60-v2-col:has(.kwspro-fitment-results .kwspro-product-row)
  .kws60-products-section-v76 {
  display: none !important;
}

@media (min-width: 900px) {
  .kws60-shopfront-v2 .kws60-v2-hero { height: 390px; }

  .kws60-shopfront-v2 .kws60-v2-sheet {
    max-width: 1180px;
    margin-top: -58px;
    padding: 32px 36px 0;
    border: 1px solid var(--v2-line);
    border-bottom: 0;
    border-radius: 36px 36px 0 0;
    box-shadow: 0 -10px 44px -34px rgba(16, 24, 40, .32);
  }

  .kws60-shopfront-v2 .kws60-v2-main {
    grid-template-columns: minmax(0, 1.62fr) minmax(340px, .88fr);
    gap: 34px;
  }

  .kws60-shopfront-v2 .kws60-v2-side {
    top: 28px;
    max-height: calc(100vh - 56px);
    padding-right: 4px;
  }

  .kws60-shopfront-v2 .kws60-services-section-v76 .kws60-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 22px !important;
    padding: 6px 22px;
  }

  .kws60-shopfront-v2 .kws60-services-section-v76 .kws60-service-card {
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: space-between;
    gap: 14px;
    padding: 20px 0;
  }

  .kws60-shopfront-v2 .kws60-services-section-v76 .kws60-service-card:nth-child(2) {
    border-top: 0;
  }

  .kws60-shopfront-v2 .kws60-services-section-v76 .kws60-service-card .kws60-row-action {
    justify-content: space-between;
  }

  .kws60-shopfront-v2 .kws60-services-section-v76 .kws60-service-card .kws60-add-item {
    min-width: 124px;
  }

  .kws60-shopfront-v2 .kws60-v2-foot {
    margin-inline: -36px;
    padding: 28px 36px 32px;
  }
}

/* ================================================================
 * V8.6.2 — modern shop interface
 *
 * The shop now leads with the workshop, keeps the demo controls quiet, and
 * makes the buying path read in three clear moves: choose, review, book.
 * ================================================================ */

.kws60-shopfront-v2 {
  --v2-page-max: 1180px;
  --v2-section-gap: clamp(22px, 3vw, 34px);
  --v2-control: #111317;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

/* Demo chrome is useful context, not the main event. */
.kws60-shopfront-v2 .kws60-demo-return {
  width: min(var(--v2-page-max), calc(100% - 32px));
  margin: 16px auto 8px;
  padding: 8px 12px;
  border-color: var(--v2-line);
  border-radius: 16px;
  box-shadow: none;
}
.kws60-shopfront-v2 .kws60-demo-return a { min-height: 36px; }
.kws60-shopfront-v2 .kws60-demo-return a > span:first-child { width: 28px; height: 28px; }
.kws60-shopfront-v2 .kws60-demo-return small { color: var(--v2-mut); }

.kws60-shopfront-v2 .kws60-demo-coat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 18px;
  width: min(var(--v2-page-max), calc(100% - 32px));
  max-width: var(--v2-page-max) !important;
  margin: 8px auto 12px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--v2-line);
  border-radius: 20px !important;
  background: #f5f6f8 !important;
  color: var(--v2-ink) !important;
  box-shadow: none !important;
}
.kws60-shopfront-v2 .kws60-demo-coat-main { align-items: center; min-width: 0; }
.kws60-shopfront-v2 .kws60-demo-coat-main strong {
  color: var(--v2-ink) !important;
  font-size: 15.5px;
  letter-spacing: -.02em;
}
.kws60-shopfront-v2 .kws60-demo-coat-main p {
  margin-top: 2px;
  color: var(--v2-mut) !important;
  font-size: 12.5px;
  line-height: 1.35;
}
.kws60-shopfront-v2 .kws60-demo-coat-tag {
  background: var(--v2-ink) !important;
  color: #fff !important;
  font-size: 9px;
  padding: 5px 8px;
}
.kws60-shopfront-v2 .kws60-demo-coat-try {
  grid-column: 1 / -1;
  grid-row: 2;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}
.kws60-shopfront-v2 .kws60-demo-coat-try::-webkit-scrollbar { display: none; }
.kws60-shopfront-v2 .kws60-demo-coat-try > span { color: var(--v2-mut); }
.kws60-shopfront-v2 .kws60-demo-coat-try button {
  flex: 0 0 auto;
  min-height: 38px;
  padding-inline: 13px;
  border-color: var(--v2-line2);
  background: #fff;
  color: var(--v2-ink);
  font-size: 12.5px;
  font-weight: 700;
}
.kws60-shopfront-v2 .kws60-demo-coat-try button:hover,
.kws60-shopfront-v2 .kws60-demo-coat-try button:focus-visible {
  background: var(--v2-ink);
  color: #fff;
}
.kws60-shopfront-v2 .kws60-demo-coat-actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}
.kws60-shopfront-v2 .kws60-demo-coat .kws60-demo-owner-button,
.kws60-shopfront-v2 .kws60-demo-reset-button,
.kws60-shopfront-v2 .kws60-demo-coat-cta {
  min-height: 40px;
  margin: 0;
  padding: 0 13px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
}
.kws60-shopfront-v2 .kws60-demo-coat .kws60-demo-owner-button {
  border: 1px solid var(--v2-line2);
  background: #fff;
  color: var(--v2-ink);
}
.kws60-shopfront-v2 .kws60-demo-reset-button { color: var(--v2-mut); }
.kws60-shopfront-v2 .kws60-demo-coat-cta {
  background: var(--v2-ink) !important;
  color: #fff !important;
}

/* The workshop arrives sooner, and the identity panel reads as one unit. */
.kws60-shopfront-v2 .kws60-v2-hero { height: clamp(260px, 27vw, 340px); }
.kws60-shopfront-v2 .kws60-v2-hero-media { background-position: center 54%; }
.kws60-shopfront-v2 .kws60-v2-hero-media::after {
  background: linear-gradient(180deg, rgba(8,10,14,.44), transparent 38%, rgba(8,10,14,.22));
}
.kws60-shopfront-v2 .kws60-v2-sheet {
  max-width: var(--v2-page-max);
  margin-top: -46px;
  border-radius: 32px 32px 0 0;
}
.kws60-shopfront-v2 .kws60-v2-id {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 24px;
  padding-bottom: 22px;
  margin-bottom: 20px;
}
.kws60-shopfront-v2 .kws60-v2-status { padding: 7px 12px; font-size: 12.5px; }
.kws60-shopfront-v2 .kws60-v2-does { max-width: 64ch; line-height: 1.5; }
.kws60-shopfront-v2 .kws60-v2-actions { min-width: 300px; }
.kws60-shopfront-v2[data-kws60-demo="1"] .kws60-v2-id .kws60-v2-btn-alt { display: none; }
.kws60-shopfront-v2[data-kws60-demo="1"] .kws60-v2-id .kws60-v2-actions {
  grid-template-columns: minmax(160px, 1fr);
  min-width: 176px;
}
.kws60-shopfront-v2 .kws60-v2-btn {
  min-height: 48px;
  border-radius: 14px;
  box-shadow: none;
}
.kws60-shopfront-v2 .kws60-v2-btn-wa { background: var(--v2-control); }
.kws60-shopfront-v2 .kws60-v2-btn-alt { border: 1px solid var(--v2-line2); }
.kws60-shopfront-v2 .kws60-v2-today {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
}

/* A quieter content system: one container per section, not cards inside cards. */
.kws60-shopfront-v2 .kws60-v2-main,
.kws60-shopfront-v2 .kws60-v2-col,
.kws60-shopfront-v2 .kws60-v2-side { gap: var(--v2-section-gap); }
.kws60-shopfront-v2 .kws60-section,
.kws60-shopfront-v2 .kwspro-fitment-search,
.kws60-shopfront-v2 .kws60-v2-proof,
.kws60-shopfront-v2 .kws60-v2-find {
  border-radius: 22px;
  box-shadow: none;
}
.kws60-shopfront-v2 .kws60-services-section-v76 .kws60-service-grid,
.kws60-shopfront-v2 .kws60-products-section-v76 .kws60-product-grid {
  border: 0;
  border-radius: 0;
  padding-inline: 0;
  box-shadow: none;
}
.kws60-shopfront-v2 .kws60-section-head { gap: 20px; }
.kws60-shopfront-v2 .kws60-section-head > div { min-width: 0; }
.kws60-shopfront-v2 .kws60-section-head p { max-width: 62ch; line-height: 1.55; }

/* Repeated add buttons stay calm; the selected state carries the brand colour. */
.kws60-shopfront-v2 .kws60-service-card .kws60-add-item,
.kws60-shopfront-v2 .kws60-product-card .kws60-add-item,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side button {
  border: 1px solid var(--v2-line2) !important;
  background: #fff !important;
  color: var(--v2-ink) !important;
  box-shadow: none !important;
}
.kws60-shopfront-v2 .kws60-service-card .kws60-add-item:hover,
.kws60-shopfront-v2 .kws60-product-card .kws60-add-item:hover,
.kws60-shopfront-v2 .kwspro-fitment-results .kwspro-product-side button:hover {
  border-color: var(--v2-ink) !important;
  background: var(--v2-ink) !important;
  color: #fff !important;
}
.kws60-shopfront-v2 .kws60-add-item.is-added,
.kws60-shopfront-v2 [data-kws60-cart-add].is-added {
  border-color: var(--v2-okink) !important;
  background: var(--v2-okbg) !important;
  color: var(--v2-okink) !important;
}

/* The quote column is a compact decision panel rather than a narrow webpage. */
.kws60-shopfront-v2 .kws60-v2-side { scrollbar-gutter: stable; }
.kws60-shopfront-v2 .kws60-desktop-conversion {
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--v2-line);
  border-radius: 22px;
  background: #fbfbfc;
}
.kws60-shopfront-v2 .kws60-desktop-conversion > .kws60-section-head { margin-bottom: 2px; }
.kws60-shopfront-v2 .kws60-desktop-cart-panel,
.kws60-shopfront-v2 .kws60-desktop-booking-panel {
  padding: 18px;
  border-radius: 18px;
  background: #fff;
}
.kws60-shopfront-v2 .kws60-basket-total {
  border-radius: 14px;
  background: var(--v2-ink);
}
.kws60-shopfront-v2 .kws60-basket-disclaimer {
  border-color: var(--v2-line);
  background: var(--v2-well);
  color: var(--v2-mut);
  font-weight: 650;
}
.kws60-shopfront-v2 .kws60-v2-side .kws60-booking-progress {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.kws60-shopfront-v2 .kws60-v2-side .kws60-booking-progress li {
  align-items: center;
  font-size: 12px;
  line-height: 1.25;
}
.kws60-shopfront-v2 .kws60-v2-side .kws60-booking-progress li > b {
  overflow-wrap: normal;
  word-break: normal;
}
.kws60-shopfront-v2 .kws60-v2-side input,
.kws60-shopfront-v2 .kws60-v2-side select,
.kws60-shopfront-v2 .kws60-v2-side textarea { border-radius: 12px; }

/* OLEO remains available without covering the page. */
body:has(.kws60-shopfront-v2) button.oleo2-launch {
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  justify-content: center !important;
}
body:has(.kws60-shopfront-v2) button.oleo2-launch .oleo2-launch-text { display: none !important; }

@media (min-width: 900px) {
  .kws60-shopfront-v2 .kws60-v2-sheet { padding: 28px 34px 0; }
  .kws60-shopfront-v2 .kws60-v2-main {
    grid-template-columns: minmax(0, 1.7fr) minmax(360px, .82fr);
    gap: 36px;
  }
  .kws60-shopfront-v2 .kws60-v2-side { top: 20px; max-height: calc(100vh - 40px); }
  .kws60-shopfront-v2 .kws60-v2-foot { margin-inline: -34px; }
}

@media (max-width: 899px) {
  .kws60-shopfront-v2 .kws60-demo-return {
    width: calc(100% - 24px);
    margin-top: 8px;
  }
  .kws60-shopfront-v2 .kws60-demo-return small { max-width: 118px; }
  .kws60-shopfront-v2 .kws60-demo-coat {
    width: calc(100% - 24px);
    grid-template-columns: 1fr;
    gap: 9px;
    margin-block: 6px 10px !important;
    padding: 12px !important;
    border-radius: 17px !important;
  }
  .kws60-shopfront-v2 .kws60-demo-coat-main { padding-right: 38px; }
  .kws60-shopfront-v2 .kws60-demo-coat-main p { display: none; }
  .kws60-shopfront-v2 .kws60-demo-coat-try { grid-column: 1; grid-row: 2; }
  .kws60-shopfront-v2 .kws60-demo-coat-try > span { display: none; }
  .kws60-shopfront-v2 .kws60-demo-coat-try button { min-height: 36px; }
  .kws60-shopfront-v2 .kws60-demo-coat-actions {
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .kws60-shopfront-v2 .kws60-demo-coat-actions > * { min-width: 0; width: 100%; }
  .kws60-shopfront-v2 .kws60-demo-reset-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border: 1px solid var(--v2-line2);
    background: #fff;
    font-size: 0;
    text-decoration: none;
  }
  .kws60-shopfront-v2 .kws60-demo-reset-button::before { content: "↻"; font-size: 18px; }

  .kws60-shopfront-v2 .kws60-v2-hero { height: 235px; }
  .kws60-shopfront-v2 .kws60-v2-sheet {
    margin-top: -28px;
    padding: 18px 16px 0;
    border-radius: 28px 28px 0 0;
  }
  .kws60-shopfront-v2 .kws60-v2-id {
    grid-template-columns: 1fr;
    padding-bottom: 18px;
    margin-bottom: 18px;
  }
  .kws60-shopfront-v2 .kws60-v2-actions { min-width: 0; }
  .kws60-shopfront-v2[data-kws60-demo="1"] .kws60-v2-id .kws60-v2-btn-alt,
  .kws60-shopfront-v2[data-kws60-demo="1"] .kws60-v2-fab-wa { display: none; }
  .kws60-shopfront-v2[data-kws60-demo="1"] .kws60-v2-actions,
  .kws60-shopfront-v2[data-kws60-demo="1"] .kws60-v2-fab { grid-template-columns: 1fr auto; }
  .kws60-shopfront-v2 .kws60-v2-today {
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 20px;
  }
  .kws60-shopfront-v2 .kws60-v2-quick { margin-bottom: 24px; }
  .kws60-shopfront-v2 .kws60-section,
  .kws60-shopfront-v2 .kwspro-fitment-search,
  .kws60-shopfront-v2 .kws60-v2-proof,
  .kws60-shopfront-v2 .kws60-v2-find { padding: 17px; border-radius: 20px; }
  .kws60-shopfront-v2 .kws60-desktop-conversion { padding: 14px; border-radius: 20px; }
  body:has(.kws60-shopfront-v2) button.oleo2-launch {
    bottom: 88px !important;
    right: 14px !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
  }
  body:has(.kws60-shopfront-v2):not(.kws60-v2-scrolled) button.oleo2-launch {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(8px) scale(.94) !important;
  }
  .kws60-shopfront-v2 .kws60-v2-fab button.oleo2-launch.is-kws60-docked {
    position: static !important;
    inset: auto !important;
    order: 3;
    width: 48px !important;
    min-width: 48px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    box-shadow: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .kws60-shopfront-v2 .kws60-v2-fab button.oleo2-launch.is-kws60-docked .oleo2-launch-icon {
    width: 22px !important;
    height: 22px !important;
    background: transparent !important;
    color: #fff !important;
  }
  .kws60-shopfront-v2 .kws60-v2-fab button.oleo2-launch.is-kws60-docked .oleo2-pulse { display: none !important; }
  .kws60-shopfront-v2 .kws60-v2-fab:has(.is-kws60-docked) {
    grid-template-columns: 1fr 1fr auto auto;
  }
  .kws60-shopfront-v2[data-kws60-demo="1"] .kws60-v2-fab:has(.is-kws60-docked) {
    grid-template-columns: 1fr auto auto;
  }
}

@media (max-width: 480px) {
  .kws60-shopfront-v2 .kws60-demo-return a > span:last-child { display: none; }
  .kws60-shopfront-v2 .kws60-demo-return small { font-size: 11px; }
  .kws60-shopfront-v2 .kws60-demo-coat .kws60-demo-owner-button,
  .kws60-shopfront-v2 .kws60-demo-coat-cta { padding-inline: 9px; white-space: normal; line-height: 1.15; }
  .kws60-shopfront-v2 .kws60-v2-logo { width: 52px; height: 52px; }
  .kws60-shopfront-v2 .kws60-v2-id-copy h1 { font-size: 22px; }
  .kws60-shopfront-v2 .kws60-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .kws60-shopfront-v2 .kws60-section-head > a { min-height: 32px; }
}

@media (max-width: 899px) {
  .kws60-shopfront-v2 .kws60-v2-sheet {
    padding: 20px 18px 0;
  }

  .kws60-shopfront-v2 .kws60-v2-hero {
    height: 290px;
  }

  .kws60-shopfront-v2 .kws60-v2-main,
  .kws60-shopfront-v2 .kws60-v2-col,
  .kws60-shopfront-v2 .kws60-v2-side {
    gap: 20px;
  }

  .kws60-shopfront-v2 .kws60-section,
  .kws60-shopfront-v2 .kwspro-fitment-search,
  .kws60-shopfront-v2 .kws60-v2-proof,
  .kws60-shopfront-v2 .kws60-v2-find {
    padding: 18px;
    border-radius: 20px;
  }

  .kws60-shopfront-v2 .kws60-v2-side,
  .kws60-shopfront-v2 .kws60-v2-sheet-bar {
    background: #fff;
  }

  .kws60-shopfront-v2 .kws60-v2-foot {
    margin-inline: -18px;
  }
}

@media (max-width: 480px) {
  .kws60-shopfront-v2 .kws60-v2-sheet {
    padding-inline: 14px;
  }

  .kws60-shopfront-v2 .kws60-section,
  .kws60-shopfront-v2 .kwspro-fitment-search,
  .kws60-shopfront-v2 .kws60-v2-proof,
  .kws60-shopfront-v2 .kws60-v2-find {
    padding: 16px;
  }

  .kws60-shopfront-v2 .kws60-v2-foot {
    margin-inline: -14px;
  }
}