/* ============================================================
   Homepage Rows V2 — stylesheet (scoped kh-)

   Loaded only by frontend/partials/homepage/layouts/rows_v2.blade.php.
   Every selector starts with .kh- and all design variables live on
   .kh-page, so nothing here reaches the rest of the site.

   THE MODEL
   A row is 4 card columns wide. Every widget occupies a whole
   number of those columns, so a card is always one column and its
   square image is always that column squared: 330 x 330 at 1440.

   Two kinds of paging, never both in one row:
     card rail    the cards inside a widget move  (rows 1,2,3,5,6)
     widget rail  whole widgets move through the row (rows 7,8,9)
                  rows 7,9: arrows at the end of the group title line
                  row 8:    one-product group tiles, arrows on the row sides
                  row 9:    big square shop spotlights, 2 visible
                  rows 10-12: shop blocks (3 / 4 products, or 1 main + 4
                  thumbnails), 2 visible

   BREAKPOINTS
     1280+     as declared
     980-1279  fewer cards per view
     600-979   one widget per row; arrows grow to 44px
     <600      the pager stands down and the browser scrolls
               natively: real swipe, arrows hidden, one unit per
               view plus a peek of the next
   ============================================================ */

/* ---------- full-width background band ---------- */

.kh-band { width: 100%; background:#FBF7EE; }

/* ---------- page wrapper + tokens ---------- */

.kh-page {
  --kh-ink: #17150f;
  --kh-body: #4d4740;
  --kh-muted: #8b857c;
  --kh-line: #e6e4e0;
  --kh-img: #f7f6f4;
  --kh-radius: 8px;       /* card and spotlight corner rounding */
  --kh-link: #1f5f7a;
  --kh-link-hover: #164658;
  --kh-sale: #b3341f;
  --kh-badge-bg: #17a2b8;
  --kh-badge-ink: #fff;

  --kh-max: 1440px;
  --kh-margin: 28px;
  --kh-gutter: 24px;
  --kh-cols: 4;

  max-width: var(--kh-max);
  margin: 0 auto;
  padding: var(--kh-margin);
  display: flex;
  flex-direction: column;
  gap: 40px;

  color: var(--kh-body);
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
}

.kh-page *,
.kh-page *::before,
.kh-page *::after { box-sizing: border-box; }

.kh-page a { color: var(--kh-link); text-decoration: none; }
.kh-page a:hover { color: var(--kh-link-hover); text-decoration: underline; }

.kh-page img { display: block; max-width: 100%; }

/* ---------- row ----------
   Four card columns. Widgets span whole columns. */

.kh-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kh-gutter);
  align-items: stretch;
}
.kh-row--rail { display: block; }

.kh-row--1 { --kh-cols: 2; }   /* square spotlight + standard 2 x 2 */
.kh-row--2 { --kh-cols: 3; }   /* compact, 3 across x 2 rows */
.kh-row--3 { --kh-cols: 2; }   /* two standard 2 x 2 blocks */
.kh-row--5 { --kh-cols: 4; }
.kh-row--4 { --kh-cols: 3; }   /* two compact 3 x 1 rails */
.kh-row--6 { --kh-cols: 2; }

.kh-w1 { grid-column: span 1; }
.kh-w2 { grid-column: span 2; }
.kh-w3 { grid-column: span 3; }
.kh-w4 { grid-column: span 4; }

/* Rows 4 and 7: the rail arrows sit at the right end of the group
   title line. Each widget head keeps room for them on its right. */
.kh-row--widgets { position: relative; }
.kh-nav--head {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  z-index: 3;
}
.kh-row--widgets .kh-widget__head { padding-inline-end: 84px; }

/* Row 8: group tiles, one product each, 4 visible. Round arrows sit
   on the left and right sides of the row and hide at the ends. */
.kh-row--tiles { position: relative; }
.kh-track.kh-rail__track.kh-tiles__track {
  grid-auto-columns: calc((100% - 3 * var(--kh-gutter)) / 4);
}
.kh-page .kh-side {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.kh-side--prev { inset-inline-start: -12px; }
.kh-side--next { inset-inline-end: -12px; }
.kh-page .kh-side:disabled { opacity: 0; pointer-events: none; }
.kh-side svg { width: 18px; height: 18px; }

/* ---------- widget shell ---------- */

.kh-widget { min-width: 0; display: flex; flex-direction: column; }

.kh-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  flex: none;
}
.kh-widget__titlewrap { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kh-widget__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--kh-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kh-widget__tools { display: flex; align-items: center; gap: 14px; flex: none; }
.kh-widget__link { font-size: 14px; white-space: nowrap; }
.kh-widget__body { margin-top: 10px; flex: 1; min-height: 0; display: flex; }

/* ---------- paging control ---------- */

.kh-nav { display: flex; gap: 8px; }
.kh-nav__btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--kh-line);
  border-radius: 0;
  background: #fff;
  color: var(--kh-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.kh-nav__btn:hover:not(:disabled) { border-color: var(--kh-muted); }
.kh-nav__btn:disabled { opacity: .35; cursor: default; }
.kh-nav__btn svg { width: 15px; height: 15px; }
/* RTL: the arrows swap, so next always points at the reading edge. */
[dir="rtl"] .kh-nav__btn svg { transform: scaleX(-1); }

/* ---------- track ----------
   The port clips; the track is offset with `left` by script.
   clip + clip-margin keeps the card hover outline (8px outside
   the card) from being shaved off at the port edges. */

.kh-scroller {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  overflow: clip;
  overflow-clip-margin: 10px;
}

.kh-track {
  position: relative;
  display: grid;
  grid-template-rows: auto;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--kh-cols) - 1) * var(--kh-gutter)) / var(--kh-cols));
  gap: var(--kh-gutter);
}
/* Two card rows moving as one track: a column is one paging step. */
.kh-track--2r { grid-template-rows: repeat(2, auto); }

/* One widget per column in a widget rail. */
.kh-track.kh-rail__track {
  grid-template-rows: auto;
  grid-auto-columns: calc((100% - var(--kh-gutter)) / 2);
  align-items: stretch;
}

/* Fixed card grid inside a rail widget: nothing scrolls at card level. */
.kh-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kh-gutter);
}
.kh-grid--2x1 { grid-template-rows: auto; }

/* ---------- product card ----------
   Square image, one-line title, price on its own line, shipping
   badge beneath it. Badge height is reserved, so every card in a
   row is the same height. The whole card is the link: the title
   link stretches over the card; heart + compare sit above it. */

/*.kh-card { position: relative; min-width: 0; display: flex; flex-direction: column; background: #ffffff; border: 1px solid #00002e; } */
/* .kh-card { position: relative; min-width: 0; display: flex; flex-direction: column; border: 1px solid #00002e; } */
.kh-card { position: relative; min-width: 0; display: flex; flex-direction: column; }
/*.kh-card { position: relative; min-width: 0; display: flex; flex-direction: column; background: #ffffff; } */
.kh-card:hover { outline: 1px solid var(--kh-ink); outline-offset: 8px; }

.kh-card { border-radius: var(--kh-radius); }
.kh-card__media {
  border-radius: var(--kh-radius);
  position: relative;
  aspect-ratio: 1;
  background: var(--kh-img);
  overflow: hidden;
  flex: none;
}
.kh-card__media img { width: 100%; height: 100%; }
.kh-card__media--cover img { object-fit: cover; }
.kh-card__media--contain img { object-fit: contain; }

.kh-card__disc {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  background: var(--kh-sale);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 4px 8px;
}

.kh-card__acts {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
}
.kh-card:hover .kh-card__acts,
.kh-card:focus-within .kh-card__acts { opacity: 1; }
/* Touch has no hover, so the actions are always present there. */
@media (hover: none) {
  .kh-card__acts { opacity: 1; }
}

.kh-card__act {
  width: 36px;
  height: 36px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--kh-line);
  border-radius: 0;
  color: var(--kh-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kh-card__act:hover { border-color: var(--kh-ink); }
.kh-card__act svg { width: 17px; height: 17px; }

.kh-card__title {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--kh-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kh-page .kh-card__link,
.kh-page .kh-card__link:hover { color: inherit; text-decoration: none; }
.kh-page .kh-spot__link,
.kh-page .kh-spot__link:hover,
.kh-page .kh-spot__mediawrap:hover { color: inherit; text-decoration: none; }
/* Stretched link: covers the whole card (positioned against .kh-card). */
.kh-card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.kh-card__line { margin-top: 2px; min-height: 24px; display: flex; align-items: center; }
/* Free shipping tag under the price. Height reserved either way,
   so cards with and without the tag are the same height. */
.kh-card__flags { margin-top: 2px; min-height: 20px; }
.kh-card__price { display: flex; align-items: baseline; gap: 8px; }
.kh-card__now { font-size: 18px; font-weight: 500; color: var(--kh-ink); }
.kh-card__was { font-size: 13px; color: var(--kh-muted); text-decoration: line-through; }

.kh-flag {
  display: inline-block;
  background: var(--kh-badge-bg);
  color: var(--kh-badge-ink);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 3px 6px;
  white-space: nowrap;
}
/* Digital products: navy tag in the same line and size. */
.kh-flag--digital { background: #B0409E; color: #fff; }

.kh-card__title,
.kh-card__line,
.kh-card__flags,
.kh-spot__title,
.kh-spot__info,
.kh-spot__line,
.kh-spot__flags { padding-inline: 6px; }



/* ---------- spotlight ----------
   One product spanning both card rows: portrait image 330 x 500
   centred vertically, title, info line, price, shipping badge,
   call to action. */

.kh-spot { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kh-spot__mediawrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.kh-spot__media {
  border-radius: var(--kh-radius);
  position: relative;
  width: 100%;
  aspect-ratio: 330 / 500;
  max-height: 100%;
  background: var(--kh-img);
  overflow: hidden;
}
.kh-spot__media img { width: 100%; height: 100%; }
/* Square spotlight (row 1): 2 card columns wide, photo is square.
   Its text block equals two card text blocks, so it ends level
   with the 2 x 2 cards beside it. */
.kh-spot--sq .kh-spot__media { aspect-ratio: 1; }
.kh-spot__media--cover img { object-fit: cover; }
.kh-spot__media--contain img { object-fit: contain; }

.kh-spot__disc {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  background: var(--kh-sale);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 5px 10px;
}

.kh-spot__title {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--kh-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: none;
}
/* Store name / local identity. Height reserved so it never reflows. */
.kh-spot__info {
  margin-top: 2px;
  min-height: 19px;
  font-size: 14px;
  color: var(--kh-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: none;
}
.kh-spot__line { margin-top: 2px; min-height: 26px; display: flex; align-items: center; flex: none; }
.kh-spot__flags { margin-top: 4px; min-height: 20px; flex: none; }
.kh-spot__now { font-size: 20px; font-weight: 500; color: var(--kh-ink); }
.kh-spot__was { font-size: 14px; color: var(--kh-muted); text-decoration: line-through; }

.kh-page .kh-spot__cta {
  border-radius: var(--kh-radius);
  margin-top: 8px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 18px;
  background: var(--kh-ink);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-decoration: none;
}
.kh-page .kh-spot__cta:hover { background: #2c2820; color: #fff; text-decoration: none; }
.kh-spot__cta svg { width: 17px; height: 17px; flex: none; }
[dir="rtl"] .kh-spot__cta svg { transform: scaleX(-1); }

/* ---------- compact card ----------
   Used in 2-row widgets (rows 1-4). Same card, tighter details.
   Standard card (rows 5-7) uses the base rules above. */

.kh-compact .kh-card__now { font-size: 16px; }
.kh-compact .kh-card__was { font-size: 12px; }
.kh-compact .kh-card__disc { font-size: 11px; padding: 3px 6px; }
.kh-compact .kh-card__act { width: 30px; height: 30px; }
.kh-compact .kh-card__act svg { width: 15px; height: 15px; }

/* ============================================================
   Shop rows (9-12): shop header, Korners Pick, shop blocks
   ============================================================ */

/* Shop header: logo circle + shop name, links to the shop page. */
.kh-page .kh-shophead,
.kh-page .kh-shophead:hover {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.kh-shophead__logo {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d5dde5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kh-shophead__logo img { width: 100%; height: 100%; object-fit: cover; }
.kh-shophead__logo--initial {
  background: #00002E;
  border-color: #00002E;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

/* Korners Pick badge: deeper gold, white text, square corners.
   On a photo it sits top-right; in a header it sits inline. */
.kh-pick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #A67C00;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 3px 7px;
  white-space: nowrap;
  flex: none;
}
.kh-pick svg { width: 11px; height: 11px; flex: none; }
.kh-spot__media .kh-pick {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
}

/* ---------- Shop blocks (rows 10-12) ----------
   Top: shop identity. Middle: products. Bottom: button.
   Rows 10 and 11 fit their content. Row 12 keeps the same height as a
   Row 9 spotlight card on desktop (fixed shape). */

@media (min-width: 980px) {
  .kh-row--12 .kh-shopblock { aspect-ratio: 10 / 13; }
}

/* Top area: large logo + name, city/province, Korners Pick. Left-aligned. */
.kh-shoptop {
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  min-height: 104px;
  padding-block: 12px;
}
.kh-shoptop__logo {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #d5dde5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kh-shoptop__logo img { width: 100%; height: 100%; object-fit: cover; }
.kh-shoptop__initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00002E;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
}
.kh-shoptop__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.kh-page .kh-shoptop__name,
.kh-page .kh-shoptop__name:hover {
  display: block;
  width: 100%;
  max-width: 280px;       /* long names end with "…" (full name on hover) */
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--kh-ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* City, province + Korners Pick on one line */
.kh-shoptop__meta {
  max-width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.kh-shoptop__place {
  max-width: 100%;
  font-size: 14px;
  color: var(--kh-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Row 11: the shop's top banner behind the top area, with a dark fade
   so the logo and name stay readable. */
.kh-shopblock--banner .kh-shoptop {
  position: relative;
  padding: 16px;
  border-radius: var(--kh-radius);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.kh-shopblock--banner .kh-shoptop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 46, .78) 0%, rgba(0, 0, 46, .45) 60%, rgba(0, 0, 46, .2) 100%);
}
.kh-shopblock--banner .kh-shoptop > * { position: relative; z-index: 1; }
.kh-page .kh-shopblock--banner .kh-shoptop__name,
.kh-page .kh-shopblock--banner .kh-shoptop__name:hover { color: #fff; }
.kh-shopblock--banner .kh-shoptop__place { color: rgba(255, 255, 255, .88); }

/* Body: middle takes the free space, button sits at the bottom. */
.kh-shopblock__body { flex-direction: column; }
.kh-shopblock__mid { flex: 1; min-height: 0; display: flex; align-items: center; }
.kh-grid--n { grid-template-columns: repeat(var(--kh-n, 3), minmax(0, 1fr)); grid-template-rows: auto; }
.kh-page .kh-shopblock__cta { margin-top: 20px; }

/* Row 12: square main photo that fits the space left, centred; the
   caption (title + price) is as wide as the photo and starts at its left
   edge (width set by homepage-rows.js). Thumbnails swap into the photo. */
.kh-swap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.kh-swap [hidden] { display: none !important; }
.kh-shopmain__caption { width: var(--kh-cap, 100%); max-width: 100%; margin-inline: auto; }
.kh-shopmain {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
}
.kh-shopmain__media {
  position: relative;
  display: block;
  height: 100%;
  aspect-ratio: 1;
  max-width: 100%;
  border-radius: var(--kh-radius);
  overflow: hidden;
  background: var(--kh-img);
}
.kh-shopmain__media img { width: 100%; height: 100%; object-fit: cover; }
.kh-thumbs {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.kh-thumbs__item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: var(--kh-img);
}
.kh-thumbs__item img { width: 100%; height: 100%; object-fit: cover; }
.kh-thumbs__item:hover { outline: 1px solid var(--kh-ink); outline-offset: 2px; }

/* ---------- Rows 4 and 6: coloured header bar ----------
   Title, View all and the arrow buttons sit on a navy bar. */
/* Row 4 header bar */
.kh-row--4 .kh-widget__head {
  background: #01430e;
  padding: 6px 10px;
  border-radius: var(--kh-radius);
}
/* Row 6 header bar */
.kh-row--6 .kh-widget__head {
  background: #01430e;
  padding: 6px 10px;
  border-radius: var(--kh-radius);
}
.kh-row--4 .kh-widget__title,
.kh-row--6 .kh-widget__title { color: #fff; }
.kh-page .kh-row--4 .kh-widget__link,
.kh-page .kh-row--6 .kh-widget__link { color: #fff; }
.kh-row--4 .kh-nav__btn,
.kh-row--6 .kh-nav__btn { background: #1a1a4a; border-color: #1a1a4a; color: #fff; }
.kh-row--4 .kh-widget__body,
.kh-row--6 .kh-widget__body { margin-top: 18px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1279px) {
  .kh-row--2 { --kh-cols: 2; }
  .kh-row--5 { --kh-cols: 3; }
  /* Row 4: one 3 x 2 widget per view, so compact cards keep their size */
  .kh-row--4 { --kh-cols: 2; }
  /* Row 8: 3 tiles per view */
  .kh-track.kh-rail__track.kh-tiles__track { grid-auto-columns: calc((100% - 2 * var(--kh-gutter)) / 3); }
}

@media (max-width: 979px) {
  .kh-page { --kh-gutter: 16px; --kh-margin: 22px; gap: 24px; }
  .kh-row { grid-template-columns: 1fr; }
  .kh-w1, .kh-w2, .kh-w3, .kh-w4 { grid-column: auto; }
  .kh-row--1, .kh-row--2, .kh-row--3, .kh-row--4, .kh-row--5, .kh-row--6 { --kh-cols: 2; }
  .kh-track.kh-rail__track { grid-auto-columns: 100%; }
  /* Row 8: 2 tiles per view */
  .kh-track.kh-rail__track.kh-tiles__track { grid-auto-columns: calc((100% - var(--kh-gutter)) / 2); }
  /* Rows 1 and 3: the 2 x 2 card rails become one line of cards */
  .kh-row--1 .kh-track--2r,
  .kh-row--3 .kh-track--2r { grid-template-rows: auto; }
  /* Stacked, the spotlight gets the full width: cap the portrait
     image at its desktop size instead of stretching it. */
  .kh-spot__media { max-width: 330px; max-height: none; }
   .kh-widget__title { font-size: 20px; font-weight: 600; }
  /* Row 12 main photo: cap at desktop size when a block is full width */
  .kh-shopmain__media { height: auto; width: 100%; max-width: 330px; }
}

@media (min-width: 600px) and (max-width: 979px) {
  .kh-nav__btn { width: 44px; height: 44px; }
  .kh-nav__btn svg { width: 18px; height: 18px; }
  .kh-row--widgets .kh-widget__head { min-height: 44px; padding-inline-end: 104px; }
}

/* Phone: the pager stands down and the browser scrolls natively —
   real momentum swipe, RTL included. Arrows hidden; one unit per
   view plus a peek of the next. */
@media (max-width: 599px) {
  .kh-page { --kh-gutter: 12px; --kh-margin: 18px; gap: 24px; }
  .kh-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kh-scroller::-webkit-scrollbar { display: none; }
  .kh-track { left: 0 !important; }
  /* Card rails: about 2 cards plus a peek. Widget rails: one widget. */
  .kh-track { grid-auto-columns: 44%; }
  .kh-track.kh-rail__track { grid-auto-columns: 85%; }
  /* Mobile background */
  .kh-band { background: #ffffff; }
  /* Shop rows on a phone: smaller logo; row 11's 4 products as 2 x 2 */
  .kh-shophead__logo { width: 28px; height: 28px; }
  .kh-shoptop { min-height: 0; gap: 12px; }
  .kh-shoptop__logo { width: 56px; height: 56px; }
  .kh-shoptop__initial { font-size: 22px; }
  .kh-page .kh-shoptop__name { font-size: 18px; }
  .kh-shophead__logo--initial { font-size: 13px; }
  .kh-row--11 .kh-grid--n { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kh-nav { display: none; }
  .kh-widget__head { flex-wrap: wrap; }
  .kh-row--widgets .kh-widget__head { padding-inline-end: 0; }
  /* Row 8: 2 tiles per view plus a peek, free swipe */
  .kh-track.kh-rail__track.kh-tiles__track { grid-auto-columns: 46%; }
  .kh-spot__media { max-width: 70%; }
}