/* =====================================================================
   ZippKart — 2026 storefront UI layer
   ---------------------------------------------------------------------
   Implements the approved homepage visual direction on top of the
   existing markup. This file only ADDS classes and overrides
   presentation; every functional id/class/data-attribute used by
   main.js, compare.js and the PHP layer is untouched.

   Load order: style.css → … → navigation-v6.css → search-autocomplete
   → THIS FILE → page CSS (homepage-v6.css).
   ===================================================================== */

:root {
  --zk-navy:        #0B1F44;   /* panel headers, dark surfaces      */
  --zk-navy-deep:   #04122C;   /* utility bar                        */
  --zk-navy-ink:    #0E1E38;   /* primary text (matches --ink)       */
  --zk-blue:        #1257E5;   /* primary action blue                */
  --zk-blue-dark:   #0B44BC;
  --zk-blue-soft:   #E8F0FE;
  --zk-line:        #E6EAF2;
  --zk-line-soft:   #EEF2F7;
  --zk-muted:       #64748B;
  --zk-canvas:      #FFFFFF;
  --zk-canvas-alt:  #F7F9FC;
  --zk-r-lg:        14px;
  --zk-r:           12px;
  --zk-r-sm:        10px;
  --zk-r-xs:        8px;
  --zk-shadow-sm:   0 1px 2px rgba(11,31,68,.04), 0 2px 6px rgba(11,31,68,.04);
  --zk-shadow:      0 4px 16px rgba(11,31,68,.07);
  --zk-shadow-lg:   0 16px 44px rgba(11,31,68,.14);
  --zk-side-w:      248px;     /* category panel width               */
  --zk-side-gap:    24px;
  --zk-promo-w:     313px;     /* hero-side promo column             */
  /* Height of the homepage hero row. The open category rail is bounded by
     the SAME value, because the rail is absolutely positioned and anything
     taller than the hero hangs over the category tiles underneath it. Change
     it here and both move together. */
  --zk-hero-h:      388px;
}

/* Wider marketplace container (reference content width = 1428px). */
.site-body.zk-ui .container,
.zk-ui .homepage-v6 .container { width: 100%; max-width: 1468px; }

/* =====================================================================
   1. UTILITY BAR
   ===================================================================== */
.zk-ui .topbar {
  background: var(--zk-navy-deep);
  color: #C7D4E8;
  font-size: 12.5px;
  line-height: 1.2;
}
.zk-ui .topbar .container {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 0;
  padding-bottom: 0;
}
.zk-ui .topbar a { color: #C7D4E8; opacity: 1; }
.zk-ui .topbar a:hover { color: #fff; }
.zk-util__side {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.zk-util__side--end { justify-content: flex-end; }
.zk-util__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.zk-util__item svg { flex: 0 0 auto; opacity: .85; }
.zk-util__mid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #E3ECFA;
  font-weight: 600;
  white-space: nowrap;
}
.zk-util__mid svg { color: #4ADE80; }
.zk-util__sep {
  width: 1px;
  height: 13px;
  margin: 0 4px;
  background: rgba(255,255,255,.18);
  flex: 0 0 auto;
}
.zk-ui .topbar .lang-switch { display: inline-flex; align-items: center; gap: 6px; }
.zk-ui .topbar .lang-switch a.active { color: #fff; font-weight: 700; }
.zk-util__link { white-space: nowrap; }

/* =====================================================================
   2. MAIN HEADER ROW  (logo · search · account/wishlist/cart)
   ===================================================================== */
.zk-ui .navbar {
  background: var(--zk-canvas);
  border-bottom: 1px solid var(--zk-line-soft);
  backdrop-filter: none;
}
.zk-ui .navbar .container {
  min-height: 88px;
  display: flex;
  align-items: center;
  gap: 26px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* --- logo: artwork untouched, container only ------------------------ */
.zk-ui .navbar .brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.brand-logo-ic   { height: 46px; width: auto; display: block; flex: 0 0 auto; }
.brand-logo-word { height: 26px; width: auto; display: block; flex: 0 0 auto; }

/* --- search: the strongest element in the header -------------------- */
.zk-ui .navbar .search-form {
  flex: 1 1 auto;
  max-width: 700px;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 10px;
  position: relative;
}
.zk-search__field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 4px 0 14px;
  background: #fff;
  border: 1.5px solid var(--zk-line);
  border-radius: var(--zk-r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-form:focus-within .zk-search__field {
  border-color: var(--zk-blue);
  box-shadow: 0 0 0 3px rgba(18,87,229,.12);
}
.zk-search__icon { flex: 0 0 auto; color: #94A3B8; display: flex; }
.zk-ui .navbar .search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
  color: var(--zk-navy-ink);
  box-shadow: none;
}
.zk-ui .navbar .search-form input[type="search"]:focus { border: 0; box-shadow: none; background: transparent; }
.zk-ui .navbar .search-form input::placeholder { color: #94A3B8; }
.zk-ui .navbar .search-form input::-webkit-search-cancel-button { -webkit-appearance: none; }

.zk-search__scope {
  flex: 0 0 auto;
  align-self: center;
  max-width: 150px;
  height: 30px;
  padding: 0 26px 0 12px;
  border: 0;
  border-left: 1px solid var(--zk-line);
  border-radius: 0;
  background: transparent;
  color: var(--zk-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.zk-search__scope:focus { outline: 2px solid var(--zk-blue); outline-offset: 1px; }

.zk-ui .navbar .search-form button[type="submit"] {
  position: static;
  flex: 0 0 auto;
  width: 78px;
  height: 46px;
  border: 0;
  border-radius: var(--zk-r-sm);
  background: var(--zk-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.zk-ui .navbar .search-form button[type="submit"]:hover { background: var(--zk-blue-dark); }

/* suggestion dropdown keeps its ids/classes — only the frame changes */
.zk-ui .navbar .srch-sug {
  top: calc(100% + 8px);
  left: 0;
  right: 88px;
  border-radius: var(--zk-r);
  border-color: var(--zk-line);
  box-shadow: var(--zk-shadow-lg);
}

/* --- account / wishlist / cart -------------------------------------- */
.zk-ui .navbar .nav-icons {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.zk-ui .navbar .nav-icons .icon-btn,
.zk-ui .navbar .nav-icons #account-toggle {
  width: auto;
  height: auto;
  min-height: 46px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--zk-r-sm);
  color: var(--zk-navy-ink);
  background: transparent;
  box-shadow: none;
}
.zk-ui .navbar .nav-icons .icon-btn:hover { background: var(--zk-canvas-alt); box-shadow: none; }
.zk-act__ic { flex: 0 0 auto; display: flex; position: relative; color: var(--zk-navy-ink); }
.zk-act__txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.zk-act__txt small { font-size: 11.5px; font-weight: 400; color: var(--zk-muted); white-space: nowrap; }
.zk-act__txt b { font-size: 13.5px; font-weight: 700; color: var(--zk-navy-ink); white-space: nowrap; }
.zk-act__caret { flex: 0 0 auto; color: var(--zk-muted); }
.zk-ui .navbar .icon-badge {
  top: -5px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  background: var(--zk-blue);
  border: 2px solid #fff;
  font-family: var(--font-body);
  font-size: 10px;
}
.zk-act__ic .icon-badge { top: -6px; right: -9px; }
.zk-ui .navbar .account-menu { position: relative; }
.zk-ui .navbar .account-dropdown { border-radius: var(--zk-r); border-color: var(--zk-line); box-shadow: var(--zk-shadow-lg); }

/* =====================================================================
   3. NAV ROW + "ALL CATEGORIES" PANEL
   ===================================================================== */
.zk-ui .category-strip {
  background: var(--zk-canvas);
  border-bottom: 1px solid var(--zk-line-soft);
}
.zk-ui .category-strip .container {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--zk-side-gap);
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}

/* the dark "All Categories" control (aligns with the sidebar below) */
.zk-allcats { position: relative; flex: 0 0 var(--zk-side-w); align-self: center; }
.zk-allcats__btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--zk-r) var(--zk-r) 0 0;
  background: var(--zk-navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  text-align: left;
}
.zk-allcats__btn:hover { background: #123058; }
.zk-allcats__btn svg { flex: 0 0 auto; }
.zk-allcats__panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: var(--zk-side-w);
  z-index: 60;
  padding: 6px 0 0;
  background: #fff;
  border: 1px solid var(--zk-line);
  border-top: 0;
  border-radius: 0 0 var(--zk-r) var(--zk-r);
  box-shadow: var(--zk-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}
.zk-allcats:hover .zk-allcats__panel,
.zk-allcats:focus-within .zk-allcats__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.zk-ui .category-strip .zk-cat-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  padding: 3px 13px;
  color: var(--zk-navy-ink);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.25;
}
.zk-ui .category-strip .zk-cat-link:hover { background: var(--zk-blue-soft); color: var(--zk-blue-dark); }
.zk-cat-link__ic {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--zk-navy);
}
.zk-cat-link__ic svg { width: 19px; height: 19px; }
.zk-cat-link__ic img { width: 19px; height: 19px; object-fit: contain; }
.zk-cat-link__t {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zk-cat-link__go { flex: 0 0 auto; color: #9AA7BC; }
.zk-ui .category-strip .zk-cat-link--all {
  margin-top: 5px;
  border-top: 1px solid var(--zk-line-soft);
  border-radius: 0 0 var(--zk-r) var(--zk-r);
  background: #F7F9FC;
  color: var(--zk-blue);
  font-weight: 700;
}
.zk-ui .category-strip .zk-cat-link--all .zk-cat-link__ic,
.zk-ui .category-strip .zk-cat-link--all .zk-cat-link__go { color: var(--zk-blue); }
.zk-ui .category-strip .zk-cat-link--all:hover { background: var(--zk-blue-soft); color: var(--zk-blue-dark); }

/* horizontal links */
.zk-ui .category-strip .zk-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: clamp(6px, 1.6vw, 20px);
  overflow-x: auto;
  scrollbar-width: none;
}
.zk-ui .category-strip .zk-nav::-webkit-scrollbar { display: none; }
.zk-ui .category-strip .zk-nav > a,
.zk-ui .category-strip .zk-nav .nav-dropdown-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 0 6px;
  color: #22364F;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.zk-ui .category-strip .zk-nav > a:hover,
.zk-ui .category-strip .zk-nav .nav-dropdown:hover .nav-dropdown-toggle,
.zk-ui .category-strip .zk-nav .nav-dropdown-toggle.active,
.zk-ui .category-strip .zk-nav > a.active { color: var(--zk-blue); }
.zk-ui .category-strip .zk-nav > a.active::after,
.zk-ui .category-strip .zk-nav .nav-dropdown-toggle.active::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--zk-blue);
}
.zk-ui .category-strip .nav-dropdown { flex: 0 0 auto; display: flex; }
.zk-ui .category-strip .zk-nav .nav-dropdown-menu {
  border-radius: var(--zk-r);
  border-color: var(--zk-line);
  box-shadow: var(--zk-shadow-lg);
}
.zk-hot {
  padding: 2px 6px;
  border-radius: 5px;
  background: #E2372F;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* =====================================================================
   4. HOMEPAGE — TOP GRID (sidebar rail · hero · promo column)
   ===================================================================== */
.zk-home .hx.homepage-v6 { background: var(--zk-canvas); }

/* On the homepage the category panel is permanently open, sitting in the
   rail the hero grid reserves for it. */
.zk-home .zk-allcats__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* The panel is position:absolute, so it does NOT take up space in the rail
     column — it floats over whatever is below. At 470px it stood ~82px taller
     than the 388px hero beside it and covered the first category tile (Car
     Chargers). Bounded to the hero's own height it can never reach them.
     border-box so the padding and border count inside that height. */
  box-sizing: border-box;
  max-height: var(--zk-hero-h);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.zk-home .zk-allcats__panel::-webkit-scrollbar { width: 6px; }
.zk-home .zk-allcats__panel::-webkit-scrollbar-thumb { background: #D5DEEA; border-radius: 99px; }

.zk-top { padding: 10px 0 0; }
.zk-top__grid {
  display: grid;
  grid-template-columns: var(--zk-side-w) minmax(0, 1fr) var(--zk-promo-w);
  gap: var(--zk-side-gap);
  align-items: stretch;
}
.zk-top__rail { grid-column: 1; }   /* reserved for the open category panel */

/* --- hero ----------------------------------------------------------- */
.zk-home .hx-hero {
  grid-column: 2;
  position: relative;
  min-height: var(--zk-hero-h);
  overflow: hidden;
  border: 0;
  border-radius: var(--zk-r-lg);
  background:
    radial-gradient(115% 130% at 88% 20%, rgba(38,110,225,.30) 0%, rgba(38,110,225,0) 55%),
    linear-gradient(112deg, #071B3B 0%, #0A2352 58%, #0C2B66 100%);
  box-shadow: var(--zk-shadow);
}
.zk-home .hx-hero::before { opacity: .10; background-size: 46px 46px; }
.zk-home .hx-hero::after { display: none; }
.zk-home .hx-hero > .container { width: 100%; max-width: none; padding: 0; }
.zk-home .hx-slide {
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: center;
  gap: 18px;
  min-height: var(--zk-hero-h);
  padding: 26px 30px 38px;
}
.zk-home .hx-eyebrow {
  margin-bottom: 4px;
  color: #4FA9FF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: none;
}
.zk-home .hx-eyebrow::before { display: none; }
.zk-home .hx-hero h1 {
  max-width: 460px;
  margin: 6px 0 0;
  font-size: clamp(23px, 2.1vw, 32px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zk-home .hx-hero h1 em { color: #fff; }
.zk-home .hx-lead {
  max-width: 430px;
  margin: 8px 0 0;
  color: rgba(226,238,255,.72);
  font-size: 12.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zk-home .hx-cta { margin-top: 16px; gap: 10px; }
.zk-home .hx-btn-gold {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--zk-r-sm);
  background: var(--zk-blue);
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(11,44,120,.35);
}
.zk-home .hx-btn-gold:hover { background: #2A6BF2; transform: translateY(-1px); }
.zk-home .hx-btn-line {
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--zk-r-sm);
  font-size: 14px;
  font-weight: 650;
}

/* hero feature strip (driven by the admin hero-stats table) */
.zk-home .hx-ticker {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-top: 16px;
}
.zk-home .hx-ticker span {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 14px;
  border-left: 1px solid rgba(255,255,255,.14);
  color: rgba(214,229,250,.66);
  font-size: 11.5px;
  line-height: 1.35;
}
.zk-home .hx-ticker span:first-child { padding-left: 0; border-left: 0; }
.zk-home .hx-ticker b {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zk-hero-ficon {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
  color: #6FB2FF;
}
.zk-hero-ficon svg { width: 100%; height: 100%; }

/* hero product / imagery side */
.zk-home .hx-hero-card {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  align-self: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-align: center;
}
.zk-home .hx-hero-card::before { display: none; }
.zk-home .hx-hero-card img {
  width: 100%;
  max-width: 340px;
  height: 214px;
  margin: 0 auto;
  padding: 0;
  padding: 12px;
  border-radius: var(--zk-r-lg);
  background: #fff;
  object-fit: contain;
  box-shadow: 0 24px 40px rgba(0,0,0,.34);
}
.zk-home .hx-hero-card .hx-brand,
.zk-home .hx-hero-card .hx-specs,
.zk-home .hx-hero-card .hx-stock { display: none; }
.zk-home .hx-hero-card h3 {
  max-width: 300px;
  margin: 10px auto 4px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.3;
  color: rgba(233,242,255,.9);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zk-home .hx-hero-card .hx-price { margin: 0 0 10px; gap: 8px; }
.zk-home .hx-hero-card .hx-price .now { font-family: var(--font-body); font-size: 19px; }
.zk-home .hx-hero-card > .hx-btn-gold {
  width: auto;
  min-height: 40px;
  padding: 0 20px;
  font-size: 13.5px;
}

/* discount medallion, top-right of the hero */
.zk-hero-badge {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 3;
  width: 76px;
  height: 76px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #2F7BF5, #12439E);
  box-shadow: 0 10px 26px rgba(3,20,54,.45);
  color: #fff;
  text-align: center;
  line-height: 1.05;
}
.zk-hero-badge small { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .08em; opacity: .85; }
.zk-hero-badge b { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.zk-hero-badge i { display: block; font-size: 8.5px; font-style: normal; font-weight: 700; letter-spacing: .1em; opacity: .85; }

/* slider chrome */
.zk-home .hx-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  min-height: 0;
  padding: 0;
  z-index: 3;
}
.zk-home .hx-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.32); }
.zk-home .hx-dot.is-on { width: 8px; background: #4E9BFF; }
.zk-home .hx-arrow { width: 36px; height: 36px; background: rgba(255,255,255,.12); }
.zk-home .hx-arrow--prev { left: 10px; }
.zk-home .hx-arrow--next { right: 10px; }

/* --- promo column (3 stacked cards) --------------------------------- */
.zk-promocol {
  grid-column: 3;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-height: var(--zk-hero-h);
}
.zk-pcard {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 122px 16px 18px;
  border-radius: var(--zk-r);
  color: var(--zk-navy-ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.zk-pcard:hover { transform: translateY(-2px); box-shadow: var(--zk-shadow); color: var(--zk-navy-ink); }
.zk-pcard--a { background: #E3EDFD; }
.zk-pcard--b { background: #FDEAEE; }
.zk-pcard--c { background: #DCF4EC; }
.zk-pcard__kick {
  margin-bottom: 5px;
  color: var(--zk-blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.005em;
}
.zk-pcard__title {
  margin: 0 0 9px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.022em;
  line-height: 1.22;
  color: #0F1B2E;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zk-pcard__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--zk-blue);
  font-size: 12.5px;
  font-weight: 700;
}
.zk-pcard__art {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 112px;
  height: 92px;
  transform: translateY(-50%);
  pointer-events: none;
}
.zk-pcard__art {
  padding: 6px;
  background: #fff;
  border-radius: var(--zk-r-sm);
  box-shadow: 0 4px 12px rgba(15,27,46,.10);
}
.zk-pcard__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =====================================================================
   5. CATEGORY SHORTCUT ROW
   ===================================================================== */
.zk-catrow { padding: 16px 0 0; }
.zk-catrow__inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 12px 6px;
  background: #fff;
  border: 1px solid var(--zk-line);
  border-radius: var(--zk-r);
  box-shadow: var(--zk-shadow-sm);
}
.zk-cattile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 6px 4px;
  border-radius: var(--zk-r-sm);
  color: var(--zk-navy-ink);
  text-align: center;
  transition: background .16s ease, transform .16s ease;
}
.zk-cattile:hover { background: var(--zk-canvas-alt); transform: translateY(-2px); color: var(--zk-navy-ink); }
.zk-cattile__art {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--zk-line-soft);
  border-radius: var(--zk-r-sm);
}
.zk-cattile__art img { width: 100%; height: 100%; object-fit: contain; }
.zk-cattile__art svg { width: 30px; height: 30px; color: var(--zk-navy); }
.zk-cattile__t {
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =====================================================================
   6. TRUST / SERVICE STRIP
   ===================================================================== */
.zk-home .home-trust-wrap {
  margin-top: 16px;
  background: transparent;
  border: 0;
}
.zk-home .home-trust {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 4px 8px;
  background: #F8FAFC;
  border: 1px solid var(--zk-line-soft);
  border-radius: var(--zk-r);
}
.zk-home .home-trust-item {
  min-height: 62px;
  gap: 11px;
  padding: 10px 14px;
  border-right: 0;
}
.zk-home .home-trust-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  background: transparent;
  color: var(--zk-blue);
  border-radius: 0;
}
.zk-home .home-trust-icon svg { width: 25px; height: 25px; }
.zk-home .home-trust-item b { font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; }
.zk-home .home-trust-item small { margin-top: 2px; color: var(--zk-muted); font-size: 11px; }

/* =====================================================================
   7. WIDE PROMOTIONAL BANNERS
   ===================================================================== */
.zk-home .promo-band { padding-top: 16px; }
.zk-home .promo-grid,
.zk-banners {
  display: grid;
  grid-template-columns: 1.06fr .97fr 1.01fr;
  gap: 14px;
}
.zk-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 124px;
  padding: 18px 150px 18px 22px;
  border-radius: var(--zk-r);
  color: var(--zk-navy-ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.zk-banner:hover { transform: translateY(-2px); box-shadow: var(--zk-shadow); }
.zk-banner--navy {
  color: #fff;
  background: linear-gradient(105deg, #06183A 0%, #0B2C6B 62%, #10428F 100%);
}
.zk-banner--blue { background: #E9F0FE; }
.zk-banner--warm { background: #F7F2EC; }
.zk-banner__kick {
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--zk-muted);
}
.zk-banner--navy .zk-banner__kick { color: rgba(214,229,250,.82); }
.zk-banner--blue .zk-banner__kick { color: var(--zk-blue); font-weight: 700; }
.zk-banner__title {
  margin: 0 0 5px;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.028em;
  line-height: 1.16;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zk-banner--navy .zk-banner__title { color: #fff; }
.zk-banner__sub {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--zk-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zk-banner--navy .zk-banner__sub { color: rgba(214,229,250,.78); }
.zk-banner__btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 13px;
  border-radius: var(--zk-r-xs);
  background: #fff;
  color: var(--zk-navy-ink);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(11,31,68,.10);
}
.zk-banner__btn:hover { background: var(--zk-blue); color: #fff; }
.zk-banner__art {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 145px;
  height: 108px;
  transform: translateY(-50%);
  pointer-events: none;
}
.zk-banner__art {
  padding: 7px;
  background: #fff;
  border-radius: var(--zk-r-sm);
  box-shadow: 0 6px 16px rgba(6,20,50,.16);
}
.zk-banner__art img { width: 100%; height: 100%; object-fit: contain; }

/* =====================================================================
   8. SECTION HEADS + PRODUCT ROWS
   ===================================================================== */
.zk-home .hx-sec { padding: 30px 0 0; }
.zk-home .hx-sec:last-of-type { padding-bottom: 44px; }
.zk-home .hx-head { align-items: center; margin-bottom: 16px; }
.zk-home .hx-kicker { display: none; }
.zk-home .hx-head h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 750;
  letter-spacing: -.028em;
  color: #0F1B2E;
}
.zk-home .hx-view {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: #33465F;
  font-size: 13px;
  font-weight: 650;
  gap: 8px;
}
.zk-home .hx-view::after {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.zk-home .hx-view:hover { background: none; border: 0; color: var(--zk-blue); }

/* --- product card: same markup, reference proportions --------------- */
.zk-home .product-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.zk-home .pcard {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--zk-line);
  border-radius: var(--zk-r);
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.zk-home .pcard:hover {
  transform: none;
  border-color: #C9D9F2;
  box-shadow: var(--zk-shadow);
}
.zk-home .pthumb {
  aspect-ratio: auto;
  position: static;
  min-height: 158px;
  padding: 12px 4px 12px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 0;
}
.zk-home .pthumb > a {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zk-home .pthumb img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.zk-home .pquick { display: none; }
.zk-home .pbody {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 12px 12px 6px;
  min-width: 0;
}
.zk-home .pbrand { display: none; }
.zk-home .pname {
  margin: 0;
  padding-right: 26px;
  color: #101C2E;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.014em;
  line-height: 1.34;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.zk-home .pname:hover { color: var(--zk-blue); }
.zk-home .prate {
  margin: 7px 0 0;
  color: #F5A623;
  font-size: 12px;
  letter-spacing: .5px;
}
.zk-home .prate span { color: var(--zk-muted); font-size: 11px; letter-spacing: 0; }
.zk-home .pprice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  margin: 8px 0 0;
}
.zk-home .pprice b {
  color: #0F1B2E;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.02em;
}
.zk-home .pprice s { color: #9AA7BC; font-size: 11.5px; }
.zk-home .pcod-off { margin-top: 6px; font-size: 10px; }

/* discount pill sits with the copy, as in the reference */
.zk-home .pcard .pbadge {
  top: 10px;
  left: 8px;
  right: auto;
  z-index: 3;
}
.zk-home .pcard .pbadge-off {
  left: 8px;
  padding: 3px 7px;
  border-radius: 5px;
  background: #FCE38A;
  color: #6B4E00;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.zk-home .pcard .pbadge-new,
.zk-home .pcard .pbadge-5g { display: none; }
.zk-home .pcard .pbadge-oos {
  top: auto;
  bottom: 12px;
  left: 10px;
  right: auto;
  font-size: 9px;
}
.zk-home .pwish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: #33465F;
  box-shadow: none;
}
.zk-home .pwish:hover, .zk-home .pwish.active { color: #E2372F; background: transparent; }
.zk-home .pwish svg { width: 17px; height: 17px; }

.zk-home .pact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}
.zk-home .pact .btn-add {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #C9D9F2;
  border-radius: var(--zk-r-xs);
  background: #F4F8FE;
  color: var(--zk-blue-dark);
  font-size: 11.5px;
  font-weight: 700;
}
.zk-home .pact .btn-add:hover:not([disabled]) { background: var(--zk-blue); border-color: var(--zk-blue); color: #fff; }
.zk-home .pact .btn-add[disabled] { background: #E7ECF4; border-color: #E7ECF4; color: #9AA7BC; }
.zk-home .pact .btn-buy { display: none; }

/* =====================================================================
   9. REMAINING HOMEPAGE SECTIONS — reference visual language
   ===================================================================== */
.zk-home .catsv2 { gap: 14px; }
.zk-home .catv2 { border-radius: var(--zk-r); box-shadow: var(--zk-shadow-sm); }
.zk-home .hx-brandgrid { gap: 12px; }
.zk-home .hx-bcard { border-radius: var(--zk-r); border-color: var(--zk-line); box-shadow: none; }
.zk-home .hx-bcard:hover { box-shadow: var(--zk-shadow); }
.zk-home .hx-prices { gap: 12px; }
.zk-home .hx-pricecard { border-radius: var(--zk-r); border-color: var(--zk-line); box-shadow: none; }
.zk-home .hx-pricecard:hover { box-shadow: var(--zk-shadow); }
.zk-home .hx-wcard { border-radius: var(--zk-r); border-color: var(--zk-line); box-shadow: none; }
.zk-home .hx-wcard:hover { box-shadow: var(--zk-shadow); }
.zk-home .hx-wart { border-radius: var(--zk-r); }
.zk-home .home-repair,
.zk-home .hx-deliver,
.zk-home .hx-promo,
.zk-home .home-alerts { border-radius: var(--zk-r-lg); }
.zk-home .home-repair,
.zk-home .hx-promo,
.zk-home .home-alerts { background: linear-gradient(105deg, #06183A 0%, #0B2C6B 62%, #10428F 100%); }
.zk-home .payv2 { border-radius: var(--zk-r); box-shadow: none; border: 1px solid var(--zk-line); }
.zk-home .hx-btn-gold { background: var(--zk-blue); }

/* =====================================================================
   10. FOOTER
   ===================================================================== */
.site-footer { background: var(--zk-navy-deep); color: #A9BAD3; margin-top: 56px; }
.zk-foot-top { border-bottom: 1px solid rgba(255,255,255,.07); }
.footer-grid {
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: 34px;
  padding: 46px 20px 34px;
}
.footer-grid h5 {
  margin-bottom: 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.footer-grid a { padding: 5px 0; color: #A9BAD3; font-size: 13.5px; }
.footer-grid a:hover { color: #fff; }
/* The official logo keeps its exact artwork; on the dark footer it sits on
   a white plate so the navy half of the wordmark stays legible. */
.zk-foot-brand .brand {
  display: inline-flex;
  padding: 12px 16px;
  background: #fff;
  border-radius: var(--zk-r);
}
.zk-foot-brand img { width: 168px; height: auto; display: block; }
.zk-foot-about { margin-top: 14px; max-width: 300px; color: #9AAECB; font-size: 13px; line-height: 1.65; }
.zk-foot-contact { margin-top: 16px; display: grid; gap: 8px; }
.zk-foot-contact span,
.zk-foot-contact a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  color: #A9BAD3;
  font-size: 13px;
}
.zk-foot-contact svg { flex: 0 0 auto; color: #5E8BD6; }
.footer-bottom {
  align-items: center;
  padding: 18px 20px;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: 12.5px;
  color: #94A9C6;
}
.zk-pay-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zk-pay-strip .pay-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 3px 7px;
  background: #fff;
  border-radius: 5px;
}
.zk-pay-strip .pay-logo img {
  height: 20px;
  width: auto;
  max-width: 68px;
  object-fit: contain;
  display: block;
}
.zk-pay-strip span {
  padding: 4px 9px;
  background: rgba(255,255,255,.08);
  border-radius: 5px;
  color: #CBD8EC;
  font-size: 11px;
  font-weight: 650;
}

/* =====================================================================
   11. RESPONSIVE
   ===================================================================== */
@media (max-width: 1400px) {
  :root { --zk-side-w: 232px; --zk-promo-w: 286px; --zk-side-gap: 18px; }
  .zk-home .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .zk-ui .navbar .search-form { max-width: 620px; }
}

@media (max-width: 1180px) {
  :root { --zk-promo-w: 250px; }
  .zk-home .pcard { grid-template-columns: 88px minmax(0, 1fr); }
  .zk-home .hx-hero-card img { max-width: 250px; height: 230px; }
  .zk-pcard { padding-right: 96px; }
  .zk-pcard__art { width: 88px; height: 74px; }
  .zk-banner { padding-right: 120px; }
  .zk-banner__art { width: 118px; height: 92px; }
}

/* Tablet and below: the category panel becomes the existing drawer. */
@media (max-width: 1024px) {
  .zk-ui .category-strip { display: none; }
  .zk-ui .navbar .container { min-height: 76px; gap: 16px; }
  .zk-top__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .zk-top__rail { display: none; }
  .zk-home .hx-hero { grid-column: 1; min-height: 0; }
  .zk-promocol {
    grid-column: 1;
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 0;
  }
  .zk-pcard { min-height: 112px; padding: 14px 92px 14px 16px; }
  .zk-pcard__art { width: 84px; height: 72px; }
  .zk-catrow__inner {
    grid-auto-flow: column;
    grid-auto-columns: minmax(112px, 1fr);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .zk-catrow__inner::-webkit-scrollbar { display: none; }
  .zk-cattile { scroll-snap-align: start; }
  .zk-home .home-trust {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 1fr);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .zk-home .home-trust::-webkit-scrollbar { display: none; }
  .zk-home .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zk-home .hx-slide { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); padding: 28px 26px 42px; }
}

@media (max-width: 860px) {
  .zk-home .promo-grid,
  .zk-banners { grid-template-columns: 1fr; }
  .zk-banner { min-height: 116px; }
  .zk-promocol { grid-template-columns: 1fr; gap: 10px; }
  .zk-home .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: one tidy header row + full-width search underneath. */
@media (max-width: 768px) {
  .zk-ui .topbar .container { min-height: 34px; gap: 10px; font-size: 11.5px; }
  .zk-util__mid { display: none; }
  .zk-util__side .zk-util__link:not(:first-child),
  .zk-util__side .zk-util__sep { display: none; }

  .zk-ui .navbar .container {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 8px;
    row-gap: 10px;
    min-height: 0;
    padding: 10px 16px 12px;
  }
  .nav-hamburger    { order: 1; display: inline-flex; }
  .zk-ui .navbar .brand    { order: 2; flex: 1 1 auto; }
  .zk-ui .navbar .nav-icons{ order: 3; gap: 0; }
  .zk-ui .navbar .search-form { order: 4; flex: 1 1 100%; max-width: none; gap: 8px; }
  .zk-ui .navbar .nav-icons .icon-btn,
  .zk-ui .navbar .nav-icons #account-toggle { min-height: 40px; padding: 4px 6px; }
  .zk-act__txt, .zk-act__caret { display: none; }
  .zk-search__field { height: 42px; }
  .zk-ui .navbar .search-form button[type="submit"] { width: 52px; height: 42px; }
  .zk-search__scope { display: none; }
  .zk-ui .navbar .srch-sug { right: 60px; }
  .brand-logo-ic   { height: 36px; }
  .brand-logo-word { height: 19px; }

  .zk-top { padding-top: 12px; }
  .zk-home .hx-slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 26px 20px 40px;
  }
  .zk-home .hx-hero h1 { font-size: clamp(25px, 7vw, 32px); }
  .zk-home .hx-hero-card img { max-width: 230px; height: 186px; }
  .zk-home .hx-hero-card h3,
  .zk-home .hx-hero-card .hx-price,
  .zk-home .hx-hero-card > .hx-btn-gold { display: none; }
  .zk-home .hx-slide > div:first-child { order: 1; }
  .zk-home .hx-hero-card { order: 2; margin-top: 4px; }
  .zk-home .hx-ticker { flex-wrap: wrap; gap: 14px 0; }
  .zk-home .hx-ticker span { flex: 1 1 44%; padding: 0 10px; }
  .zk-home .hx-ticker span:nth-child(odd) { padding-left: 0; border-left: 0; }
  .zk-hero-ficon { width: 24px; height: 24px; margin-bottom: 6px; }
  .zk-hero-badge { top: 14px; right: 14px; width: 62px; height: 62px; }
  .zk-hero-badge b { font-size: 18px; }

  .zk-cattile__art { width: 54px; height: 54px; }
  .zk-catrow__inner { grid-auto-columns: minmax(96px, 1fr); }
  .zk-banner { padding: 16px 108px 16px 18px; }
  .zk-banner__art { width: 104px; height: 86px; right: 6px; }
  .zk-banner__title { font-size: 18px; }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; padding: 34px 16px 26px; }
  .zk-foot-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (max-width: 560px) {
  .zk-home .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .zk-home .pcard { grid-template-columns: minmax(0, 1fr); }
  .zk-home .pthumb { min-height: 132px; padding: 12px 12px 0; }
  .zk-home .pbody { padding: 10px 12px 12px; }
  .zk-home .pname { padding-right: 0; }
  .zk-home .hx-head h2 { font-size: 17px; }
  .zk-catrow__inner { grid-auto-columns: minmax(84px, 1fr); padding: 10px 4px; }
  .zk-cattile__art { width: 48px; height: 48px; padding: 6px; }
  .zk-cattile__t { font-size: 10.5px; }
  .zk-home .home-trust { grid-auto-columns: minmax(186px, 1fr); }
}

@media (max-width: 380px) {
  .brand-logo-ic   { height: 32px; }
  .brand-logo-word { height: 17px; }
  .zk-ui .navbar .container { padding-left: 12px; padding-right: 12px; }
  .zk-home .hx-slide { padding: 22px 16px 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .zk-pcard, .zk-banner, .zk-cattile, .zk-home .pcard { transition: none; }
}

/* =====================================================================
   CUSTOM CODE HERO — isolated inside the existing slider
   ===================================================================== */
.zk-home .hx-slide--custom,
.zk-home .hx-slide--custom.is-on {
  grid-template-columns: minmax(0, 1fr);
  min-height: var(--zk-hero-h);
  padding: 0;
}
.zk-home .hx-slide--custom { display: none; }
.zk-home .hx-slide--custom.is-on { display: block; }
.zk-custom-hero-instance {
  width: 100%;
  max-width: 100%;
  min-height: var(--zk-hero-h);
  overflow: hidden;
  isolation: isolate;
  contain: layout paint style;
}
.zk-custom-hero-instance,
.zk-custom-hero-instance * { box-sizing: border-box; }
.zk-custom-hero-instance__content {
  width: 100%;
  min-height: var(--zk-hero-h);
  overflow: hidden;
  overflow-wrap: anywhere;
}
.zk-custom-hero-instance img,
.zk-custom-hero-instance picture { max-width: 100%; }
.zk-custom-hero-instance img { height: auto; }
.zk-home .hx-hero:has(.hx-slide--custom.is-on) > .zk-hero-badge { display: none; }

@media (max-width: 768px) {
  .zk-home .hx-slide--custom,
  .zk-home .hx-slide--custom.is-on { min-height: var(--zk-hero-h); padding: 0; }
}

/* Keyboard focus stays visible everywhere in the new chrome. */
.zk-cat-link:focus-visible,
.zk-cattile:focus-visible,
.zk-pcard:focus-visible,
.zk-banner:focus-visible,
.zk-allcats__btn:focus-visible,
.zk-ui .category-strip .zk-nav > a:focus-visible,
.zk-ui .navbar .nav-icons .icon-btn:focus-visible {
  outline: 2px solid var(--zk-blue);
  outline-offset: 2px;
}

/* =====================================================================
   12. MOBILE PHONE POLISH + INTERACTION RESTORATION
   ===================================================================== */

/* The search shell owns the focus treatment. Prevent the browser/global
   input rule from drawing a second rectangular outline inside that shell. */
.zk-ui .navbar .search-form input[type="search"]:focus,
.zk-ui .navbar .search-form input[type="search"]:focus-visible {
  outline: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

/* Restore the previous product-card lift, with a restrained zoom. Keeping
   this to accurate hover devices prevents sticky hover states on phones. */
.zk-home .pthumb img {
  transition: transform .22s ease;
}
@media (hover: hover) and (pointer: fine) {
  .zk-home .pcard:hover {
    z-index: 3;
    transform: translateY(-5px) scale(1.015);
    border-color: #BFD3EF;
    box-shadow: 0 18px 38px rgba(11,31,68,.14);
  }
  .zk-home .pcard:hover .pthumb img {
    transform: scale(1.045);
  }
}

@media (max-width: 768px) {
  /* Use the phone width efficiently without letting any section create
     sideways page scrolling. */
  .site-body.zk-ui .container,
  .zk-ui .homepage-v6 .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* A single, calm utility message is easier to scan on a phone. Track
     Order remains available inside the category drawer. */
  .zk-ui .topbar .container {
    min-height: 32px;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
  }
  .zk-ui .topbar .zk-util__side--end { display: none; }

  /* Compact first row, then a full-width search row. A 16px input prevents
     Safari/iOS from zooming the whole page when the search field is tapped. */
  .zk-ui .navbar .container {
    column-gap: 7px;
    row-gap: 9px;
    padding: 9px 12px 11px;
  }
  .zk-ui .navbar .brand { gap: 6px; }
  .brand-logo-ic { height: 33px; }
  .brand-logo-word { height: 18px; }
  .zk-ui .navbar .nav-icons .icon-btn,
  .zk-ui .navbar .nav-icons #account-toggle {
    min-width: 38px;
    min-height: 38px;
    padding: 3px 5px;
  }
  .zk-ui .navbar .nav-icons { min-width: 0; }
  .zk-ui .navbar .search-form { width: 100%; min-width: 0; gap: 7px; }
  .zk-search__field { width: auto; min-width: 0; height: 44px; padding-left: 12px; }
  .zk-ui .navbar .search-form input[type="search"] {
    width: auto;
    min-height: 0;
    padding: 0 8px;
    font-size: 16px;
  }
  .zk-ui .navbar .search-form button[type="submit"] {
    width: 50px;
    height: 44px;
  }
  .zk-ui .navbar .srch-sug { right: 57px; }

  /* Keep the hero complete but remove desktop-sized empty space. */
  .zk-top { padding-top: 8px; }
  .zk-home .hx-hero { border-radius: 12px; }
  .zk-home .hx-slide:not(.hx-slide--custom) {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 22px 18px 34px;
  }
  .zk-home .hx-hero h1 {
    margin-top: 5px;
    font-size: clamp(24px, 7.2vw, 30px);
    line-height: 1.1;
  }
  .zk-home .hx-lead {
    -webkit-line-clamp: 3;
    font-size: 12.5px;
  }
  .zk-home .hx-cta { margin-top: 14px; }
  .zk-home .hx-btn-gold,
  .zk-home .hx-btn-line {
    min-height: 42px;
    padding-inline: 16px;
    font-size: 13px;
  }
  .zk-home .hx-ticker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
  }
  .zk-home .hx-ticker span {
    padding: 9px 10px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .zk-home .hx-ticker span:nth-child(-n+2) { border-top: 0; }
  .zk-home .hx-ticker span:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .zk-home .hx-ticker b { font-size: 12.5px; }
  .zk-home .hx-hero-card { margin-top: 0; }
  .zk-home .hx-hero-card img {
    width: min(100%, 220px);
    height: 156px;
    padding: 9px;
  }
  .zk-hero-badge {
    top: 12px;
    right: 12px;
    width: 58px;
    height: 58px;
  }
  .zk-hero-badge b { font-size: 17px; }

  /* The three side offers and three campaign banners become swipeable rails
     instead of making the phone homepage several screens longer. */
  .zk-promocol,
  .zk-banners {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(254px, 84vw);
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .zk-promocol::-webkit-scrollbar,
  .zk-banners::-webkit-scrollbar { display: none; }
  .zk-promocol > *,
  .zk-banners > * { scroll-snap-align: start; }
  .zk-pcard { min-height: 108px; }
  .zk-banner { min-height: 112px; }

  /* Tighter rhythm keeps the useful product content above the fold. */
  .zk-catrow { padding-top: 12px; }
  .zk-home .home-trust-wrap { margin-top: 12px; padding-top: 0; }
  /* homepage-v6.css defines an explicit two-column trust grid at tablet
     widths. Reset it before using the mobile horizontal rail; otherwise the
     explicit columns collapse beside the implicit columns and several labels
     paint on top of each other. */
  .zk-home .home-trust {
    grid-template-columns: none;
    grid-template-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, 72vw);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .zk-home .home-trust::-webkit-scrollbar { display: none; }
  .zk-home .home-trust-item {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    scroll-snap-align: start;
  }
  .zk-home .home-trust-item > span:last-child {
    display: block;
    min-width: 0;
    overflow: hidden;
  }
  .zk-home .home-trust-item b,
  .zk-home .home-trust-item small {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .zk-home .hx-sec { padding-top: 24px; }
  .zk-home .hx-sec:last-of-type { padding-bottom: 32px; }
  .zk-home .hx-head { margin-bottom: 12px; }
  .zk-home .promo-band { padding-top: 18px; }
  .zk-home .hx-promo,
  .zk-home .home-alerts { padding: 26px 18px; }
  .zk-home .home-repair,
  .zk-home .hx-deliver { padding: 22px 18px; }
  .zk-home .home-repair-art,
  .zk-home .hx-deliver-art { min-height: 150px; }

  /* Phone product tiles remain two-across but use a predictable image area
     and equal-height card bodies. */
  .zk-home .product-grid { width: 100%; min-width: 0; align-items: stretch; }
  .zk-home .pcard,
  .zk-home .pbody,
  .zk-home .pthumb { min-width: 0; }
  .zk-home .pcard { width: 100%; height: 100%; }
  .zk-home .pthumb {
    aspect-ratio: 1 / .86;
    min-height: 0;
    padding: 10px 10px 0;
  }
  .zk-home .pbody { min-height: 146px; }

  .footer-grid {
    gap: 22px 18px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 480px) {
  /* Two essential actions are enough in the compact row; Wishlist remains
     available from the account menu/drawer and product heart buttons. */
  .zk-ui .navbar .nav-icons > a[href*="wishlist"] { display: none; }
  .zk-ui .navbar .nav-icons { gap: 0; }

  .zk-home .hx-head h2 { font-size: 17px; }
  .zk-home .hx-view { min-height: 34px; padding: 5px 2px; }
  .zk-home .product-grid { gap: 9px; }
  .zk-home .pbody { min-height: 142px; padding: 9px 10px 10px; }
  .zk-home .pprice { gap: 5px; }
  .zk-home .pprice b { font-size: 13px; }
  .zk-home .pact .btn-add { padding-inline: 7px; font-size: 10.5px; }

  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .zk-foot-brand { grid-column: auto; }
}

@media (max-width: 340px) {
  .brand-logo-word { display: none; }
  .zk-home .product-grid { grid-template-columns: minmax(0, 1fr); }
  .zk-home .pthumb { aspect-ratio: 1.35 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .zk-home .pcard:hover,
  .zk-home .pcard:hover .pthumb img { transform: none; }
}