/* ═══════════════════════════════════════════════════════════════
   TRIJAL MART — ULTRA v4 (Kickgame-Inspired, Stability-Fixed)
   
   FIXES:
   1. Hero progress bar uses CSS-only animation-name swap — no
      JS reflow hack (bar.offsetWidth) that caused frame drops.
   2. Stagger delays are baked into HTML via data-attrs, not
      added by JS after observer fires (was causing random order).
   3. All entrance animations use animation-fill-mode:both with
      explicit animation-play-state:paused/running — guaranteed
      consistent regardless of repaint timing.
   4. Hero copy entrance uses animation (not transition) so it
      always plays from scratch on slide activation.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&display=swap');

/* ── TOKENS ── */
:root {
  --kg-black:     #0a0a0d;
  --kg-white:     #ffffff;
  --kg-soft:      #f5f5f2;
  --kg-line:      rgba(17,24,39,.08);
  --kg-shadow:    0 24px 60px rgba(15,23,42,.12);
  --kg-blue:      #1249d6;
  --kg-green:     #027a48;
  --kg-ease:      cubic-bezier(.22,.61,.36,1);
  --kg-ease-out:  cubic-bezier(0,0,.2,1);
  --kg-font-d:    'Outfit', sans-serif;
  --kg-font-b:    'DM Sans', sans-serif;
}

/* ── GLOBAL FONT ── */
html, body,
input, select, textarea, button {
  font-family: var(--kg-font-b) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── KEYFRAMES — all stable, deterministic ── */
@keyframes kg-fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kg-scale-in {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes kg-slide-left {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes kg-slide-right {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes kg-slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes kgHeroProgress {
  from { width: 0%; }
  to   { width: 100%; }
}
@keyframes kg-ken-burns {
  from { transform: scale(1.0) translate(0,0); }
  to   { transform: scale(1.08) translate(-1%,-.5%); }
}
@keyframes kg-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes kg-pulse-dot {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: .6; }
}
@keyframes kg-sheen {
  from { transform: translateX(-140%); }
  to   { transform: translateX(140%); }
}
@keyframes kg-badge-pop {
  0%   { transform: scale(0) rotate(-12deg); }
  70%  { transform: scale(1.18) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes kg-ripple {
  to { transform: scale(4); opacity: 0; }
}
@keyframes kg-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes kg-count-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════
   SCROLL REVEAL — CSS-driven, JS only
   adds .is-visible class. Delays baked
   in via [data-delay] attribute set in
   HTML, not added by JS after observer.
   ════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .65s var(--kg-ease-out),
    transform .65s var(--kg-ease-out);
}
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="up"]    { transform: translateY(28px); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays — set via data-delay="N" in HTML */
[data-delay="1"] { transition-delay: .07s; }
[data-delay="2"] { transition-delay: .14s; }
[data-delay="3"] { transition-delay: .21s; }
[data-delay="4"] { transition-delay: .28s; }
[data-delay="5"] { transition-delay: .35s; }
[data-delay="6"] { transition-delay: .42s; }
[data-delay="7"] { transition-delay: .49s; }
[data-delay="8"] { transition-delay: .56s; }

/* Legacy .reveal classes — stabilised, no dynamic JS delays */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--kg-ease-out), transform .6s var(--kg-ease-out);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ════════════════════════════════════════
   BODY & LAYOUT
   ════════════════════════════════════════ */
body { background: #fafaf8 !important; }
.section { padding-bottom: 56px !important; }
.container { width: min(var(--container, 1440px), calc(100% - 40px)); }

/* ════════════════════════════════════════
   UTILITY BAR
   ════════════════════════════════════════ */
.utility-bar, .utility-bar-clean {
  background: var(--kg-black) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  height: 40px !important;
  overflow: hidden !important;
}
.utility-inner, .utility-inner-clean {
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.utility-msg {
  font-family: var(--kg-font-b) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.88) !important;
  display: none !important;
}
.utility-msg.active {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  /* stable entrance — no random timing */
  animation: kg-fade-in .3s var(--kg-ease-out) both !important;
}
.utility-msg.active::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ff6b00;
  animation: kg-pulse-dot 2s ease infinite;
  flex-shrink: 0;
}
.utility-contact-links {
  display: flex !important;
  gap: 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.utility-contact-links a {
  color: rgba(255,255,255,.65) !important;
  transition: color .2s !important;
}
.utility-contact-links a:hover { color: #fff !important; }

/* ════════════════════════════════════════
   HEADER — glass, sticky, shrinks
   ════════════════════════════════════════ */
.ref-header, .store-header, .ref-header-clean {
  background: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(15,23,42,.06) !important;
  box-shadow: none !important;
  transition: box-shadow .3s var(--kg-ease), padding .3s var(--kg-ease) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}
.ref-header.scrolled, .store-header.scrolled {
  box-shadow: 0 4px 24px rgba(10,15,30,.09) !important;
}
.ref-header-main, .ref-header-main-clean {
  padding: 14px 0 !important;
  min-height: 72px !important;
  transition: padding .28s var(--kg-ease) !important;
}
.ref-header.scrolled .ref-header-main,
.ref-header.scrolled .ref-header-main-clean {
  padding: 9px 0 !important;
}

/* Logo */
.site-brand, .site-text-logo {
  font-family: var(--kg-font-d) !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
  color: var(--kg-black) !important;
}
.site-brand img, .site-text-logo img {
  height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* Search */
.ref-search-form, .search-form-main {
  border: 1.5px solid rgba(17,24,39,.12) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
  transition: border-color .2s, box-shadow .2s !important;
  overflow: hidden !important;
}
.ref-search-form:focus-within, .search-form-main:focus-within {
  border-color: var(--kg-blue) !important;
  box-shadow: 0 0 0 4px rgba(18,73,214,.12) !important;
}
.ref-search-form input, .search-form-main input {
  padding: 13px 16px !important;
  font-size: 14.5px !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--kg-black) !important;
}
.ref-search-form button, .search-form-main button.btn-accent {
  background: var(--kg-black) !important;
  color: #fff !important;
  border: none !important;
  width: 52px !important;
  min-height: 48px !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  transition: background .2s !important;
  flex-shrink: 0 !important;
}
.ref-search-form button:hover, .search-form-main button.btn-accent:hover {
  background: #222 !important;
}

/* Header actions */
.header-action {
  color: #52617a !important;
  border-radius: 12px !important;
  transition: background .2s, color .2s, transform .22s var(--kg-ease) !important;
  font-family: var(--kg-font-b) !important;
}
.header-action:hover {
  background: #f3f4f6 !important;
  color: var(--kg-black) !important;
  transform: translateY(-2px) !important;
}
.header-action-cta {
  background: var(--kg-black) !important;
  color: #fff !important;
  border-radius: 999px !important;
}
.header-action-cta:hover {
  background: #222 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.cart-badge {
  background: #ff6b00 !important;
  font-style: normal !important;
  animation: kg-badge-pop .4s var(--kg-ease) both !important;
}

/* ════════════════════════════════════════
   MEGA NAV
   ════════════════════════════════════════ */
.mega-nav, .ref-nav {
  background: #fff !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(17,24,39,.07) !important;
}
.mega-nav-row, .ref-nav-row { min-height: 52px !important; gap: 2px !important; }
.mega-link, .ref-nav-link {
  font-family: var(--kg-font-b) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  height: 52px !important;
  padding: 0 15px !important;
  border-bottom: 2.5px solid transparent !important;
  transition: color .18s, border-color .18s, background .18s !important;
}
.mega-link:hover, .ref-nav-link:hover,
.mega-item:hover > .mega-link,
.mega-item:hover > .ref-nav-link {
  color: var(--kg-black) !important;
  border-bottom-color: var(--kg-black) !important;
  background: #f9f9f8 !important;
}

.mega-dropdown {
  border-top: 2px solid var(--kg-black) !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow: 0 24px 60px rgba(10,15,30,.13) !important;
  animation: kg-slide-down .18s var(--kg-ease-out) both !important;
}

/* ════════════════════════════════════════
   HERO — stabilised, Ken Burns, no reflow
   ════════════════════════════════════════ */
.kg-hero {
  position: relative;
  min-height: calc(100vh - 112px);
  background: #0b1020;
  overflow: hidden;
}
.kg-hero-stage,
.kg-hero-slide,
.kg-hero-media,
.kg-hero-media img,
.kg-hero-overlay { position: absolute; inset: 0; }

.kg-hero-slide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .9s var(--kg-ease), visibility .9s;
  z-index: 1;
}
.kg-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

/* Ken Burns: CSS animation, not transition — always starts fresh */
.kg-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* paused by default */
  animation: kg-ken-burns 10s var(--kg-ease) forwards;
  animation-play-state: paused;
  filter: saturate(1.05) contrast(1.02);
}
.kg-hero-slide.is-active .kg-hero-media img {
  animation-play-state: running;
}

.kg-hero-overlay {
  background:
    radial-gradient(circle at 75% 30%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(90deg, rgba(7,10,20,.78) 0%, rgba(7,10,20,.40) 45%, rgba(7,10,20,.10) 100%);
}

.kg-hero-shell {
  position: relative;
  z-index: 3;
  min-height: calc(100vh - 112px);
  display: flex;
  align-items: flex-end;
  padding-top: 72px;
  padding-bottom: 128px;
}

/* ── Hero copy: animation (not transition) → always from-scratch ── */
.kg-hero-copy {
  max-width: 680px;
  color: #fff;
  /* hidden by default */
  opacity: 0;
  animation: none;
}
.kg-hero-slide.is-active .kg-hero-copy {
  /* animation replaces transition — no device-timing variance */
  animation: kg-fade-up .75s .12s var(--kg-ease) both;
}

.kg-hero-copy h1 {
  font-family: var(--kg-font-d) !important;
  font-size: clamp(44px, 7vw, 88px);
  line-height: .94;
  letter-spacing: -.055em;
  margin: 0 0 18px;
  text-transform: uppercase;
  /* explicitly hidden — no inherit so inactive slides don't leak */
  opacity: 0;
  animation: none;
}
.kg-hero-slide.is-active .kg-hero-copy h1 {
  animation: kg-fade-up .75s .12s var(--kg-ease) both;
}
.kg-hero-slide.is-active .kg-hero-copy p {
  animation: kg-fade-up .75s .24s var(--kg-ease) both;
}
.kg-hero-slide.is-active .kg-hero-actions {
  animation: kg-fade-up .75s .36s var(--kg-ease) both;
}
.kg-hero-slide.is-active .kg-hero-meta {
  animation: kg-fade-up .75s .46s var(--kg-ease) both;
}

.kg-hero-copy p {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  color: rgba(255,255,255,.84);
  margin: 0 0 28px;
  opacity: 0;
  animation: none;
}
.kg-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 26px;
  opacity: 0;
  animation: none;
}
.kg-btn-primary,
.kg-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--kg-font-d) !important;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.02em;
  cursor: pointer;
  transition: transform .25s var(--kg-ease), box-shadow .25s var(--kg-ease);
  text-decoration: none;
}
.kg-btn-primary {
  background: #fff !important;
  color: #111827 !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
.kg-btn-secondary {
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: blur(12px);
}
.kg-btn-primary:hover,
.kg-btn-secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(0,0,0,.28);
}
.kg-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  opacity: 0;
  animation: none;
}
.kg-hero-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Hero arrows ── */
.kg-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 54px; height: 54px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(12px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .25s var(--kg-ease), background .22s;
}
.kg-hero-arrow span { font-size: 32px; line-height: 1; display: block; }
.kg-hero-arrow:hover { background: rgba(255,255,255,.25); transform: translateY(-50%) scale(1.08); }
.kg-hero-arrow.is-prev { left: 20px; }
.kg-hero-arrow.is-next { right: 20px; }

/* ── Hero progress dots ─ CSS-only animation restart via class ── */
.kg-hero-controls {
  position: absolute;
  left: 0; right: 0; bottom: 20px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
}
.kg-hero-dot {
  width: min(200px, calc(30vw - 14px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.5);
  padding: 0;
  cursor: pointer;
  transition: color .3s;
}
.kg-hero-dot-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.kg-hero-dot-bar {
  width: 100%;
  height: 2.5px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
}
/* The <i> is the fill — animation class toggled by JS */
.kg-hero-dot-bar i {
  display: block;
  width: 0%;
  height: 100%;
  background: #fff;
  border-radius: 999px;
}
/* KEY FIX: animation is triggered by a class, not inline style hack */
.kg-hero-dot.is-active { color: #fff; }
.kg-hero-dot.is-active .kg-hero-dot-bar i {
  animation: kgHeroProgress var(--hero-duration, 6000ms) linear forwards;
}
/* When NOT active, bar is reset via width:0 — no animation needed */
.kg-hero-dot:not(.is-active) .kg-hero-dot-bar i {
  animation: none;
  width: 0%;
}

/* ════════════════════════════════════════
   SERVICE STRIP
   ════════════════════════════════════════ */
.kg-service-strip { margin-top: -1px; }
.kg-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  background: #fff;
  border: 1px solid rgba(17,24,39,.07);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(15,23,42,.05);
}
.kg-service-card {
  padding: 24px;
  border-right: 1px solid rgba(17,24,39,.07);
  display: grid;
  gap: 6px;
  transition: background .22s;
}
.kg-service-card:last-child { border-right: none; }
.kg-service-card:hover { background: #fafaf8; }
.kg-service-card .svc-icon {
  font-size: 26px;
  margin-bottom: 4px;
  display: block;
}
.kg-service-card strong {
  font-family: var(--kg-font-d) !important;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #0f172a;
}
.kg-service-card span { color: #667085; font-size: 13px; line-height: 1.55; }

/* ════════════════════════════════════════
   SECTION HEADS
   ════════════════════════════════════════ */
.kg-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1.5px solid rgba(17,24,39,.07);
}
.kg-section-head h2 {
  font-family: var(--kg-font-d) !important;
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1.02;
  letter-spacing: -.04em;
  margin: 0;
  color: #0f172a;
}
.kg-section-head p {
  color: #667085;
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.6;
  max-width: 520px;
}
.kg-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: #667085;
  margin-bottom: 10px;
}
.kg-kicker::before {
  content: '';
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  flex-shrink: 0;
}
.kg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,.72);
  margin-bottom: 14px;
}
.kg-section-head a,
.kg-showcase-head a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(17,24,39,.12);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  transition: transform .25s var(--kg-ease), box-shadow .25s var(--kg-ease), border-color .22s;
  text-decoration: none;
}
.kg-section-head a::after,
.kg-showcase-head a::after { content: '→'; }
.kg-section-head a:hover,
.kg-showcase-head a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,23,42,.09);
  border-color: rgba(17,24,39,.2);
}

/* ════════════════════════════════════════
   DEPARTMENT CARDS
   ════════════════════════════════════════ */
.kg-department-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 16px;
}
.kg-department-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 128px;
  padding: 20px;
  border-radius: 26px;
  background: linear-gradient(160deg, #ffffff 0%, #f8f8f6 100%);
  border: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  /* stable — no random entry */
  transition:
    transform .35s var(--kg-ease),
    box-shadow .35s var(--kg-ease),
    border-color .25s;
}
.kg-department-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(18,73,214,.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .3s;
}
.kg-department-card::after {
  content: '';
  position: absolute;
  inset: auto -30% -35% auto;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.14), transparent 70%);
  transition: transform .45s var(--kg-ease);
  pointer-events: none;
}
.kg-department-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(15,23,42,.10);
  border-color: rgba(17,24,39,.14);
}
.kg-department-card:hover::before { opacity: 1; }
.kg-department-card:hover::after { transform: scale(1.15); }
.kg-department-visual {
  width: 72px; height: 72px;
  border-radius: 20px;
  background: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.06), 0 4px 12px rgba(15,23,42,.06);
  transition: transform .35s var(--kg-ease), box-shadow .35s;
}
.kg-department-card:hover .kg-department-visual {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: inset 0 0 0 1px rgba(17,24,39,.08), 0 8px 20px rgba(18,73,214,.14);
}
.kg-department-visual img { width: 40px; height: 40px; object-fit: contain; }
.kg-department-copy { display: grid; gap: 3px; flex: 1; min-width: 0; }
.kg-department-copy strong {
  font-family: var(--kg-font-d) !important;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kg-department-copy small { color: #667085; font-size: 12.5px; }
.kg-department-arrow {
  margin-left: auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #111827;
  color: #fff;
  font-size: 13px;
  flex-shrink: 0;
  transition: transform .28s var(--kg-ease), background .2s;
}
.kg-department-card:hover .kg-department-arrow {
  transform: rotate(45deg) scale(1.1);
}

/* ════════════════════════════════════════
   PRODUCT CARDS — premium, stable
   ════════════════════════════════════════ */
.kg-product-grid { gap: 18px !important; }

.kg-product-card {
  position: relative;
  border-radius: 28px !important;
  background: #fff !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.05) !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  transition:
    transform .35s var(--kg-ease),
    box-shadow .35s var(--kg-ease),
    border-color .25s !important;
}
.kg-product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(15,23,42,.13) !important;
  border-color: rgba(17,24,39,.14) !important;
}

.kg-product-top-meta {
  position: absolute;
  top: 14px;
  left: 14px; right: 14px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.kg-product-top-meta .tag-badge,
.kg-product-top-meta .wishlist-icon { pointer-events: auto; }

/* Badges */
.tag-badge {
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  color: #fff !important;
  animation: kg-badge-pop .4s var(--kg-ease) both !important;
}
.tag-badge.bg-success { background: #027a48 !important; }
.tag-badge.bg-warning { background: #1249d6 !important; }
.tag-badge.bg-info    { background: #7c3aed !important; }
.tag-badge.bg-new     { background: #059669 !important; }

/* Wishlist */
.wishlist-icon,
.wishlist-icon-form .wishlist-icon {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(8px) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 15px !important;
  cursor: pointer !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.10) !important;
  transition: transform .22s var(--kg-ease), color .2s !important;
  color: #9ca3af !important;
  text-decoration: none !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.wishlist-icon:hover {
  transform: scale(1.22) !important;
  color: #ef4444 !important;
}

/* Thumb */
.kg-product-thumb {
  position: relative;
  display: block;
  background: linear-gradient(180deg, #f4f4f1 0%, #eceae6 100%);
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
}
.kg-product-thumb .product-image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* stable transition — no reflow */
  transition: transform .65s var(--kg-ease), opacity .4s var(--kg-ease);
}
.kg-product-thumb .product-image-primary {
  opacity: 1;
  transform: scale(1);
}
.kg-product-thumb .product-image-secondary {
  opacity: 0;
  transform: scale(1.04);
}
.kg-product-card:hover .product-image-primary {
  opacity: 0;
  transform: scale(1.06);
}
.kg-product-card:hover .product-image-secondary {
  opacity: 1;
  transform: scale(1);
}

/* Sheen — CSS animation on hover, no JS */
.product-thumb-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.kg-product-card:hover .product-thumb-sheen {
  opacity: 1;
  animation: kg-sheen .75s var(--kg-ease) forwards;
}

.kg-image-noise {
  position: absolute;
  inset: auto auto 0 0;
  width: 100%; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(17,24,39,.06));
  pointer-events: none;
  z-index: 1;
}

/* Quick view */
.product-quick-view {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  background: rgba(17,24,39,.88);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s var(--kg-ease), transform .3s var(--kg-ease);
}
.kg-product-card:hover .product-quick-view {
  opacity: 1;
  transform: translateY(0);
}

/* Product copy */
.kg-product-copy {
  padding: 16px 18px 18px !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.kg-product-copy .product-card-brand {
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: .18em !important;
  color: #98a2b3 !important;
  font-weight: 800 !important;
  margin: 0 !important;
}
.kg-product-copy h3 {
  font-family: var(--kg-font-b) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  color: #0f172a !important;
  margin: 4px 0 !important;
  min-height: 42px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.kg-product-copy h3 a { color: inherit !important; text-decoration: none !important; }
.kg-product-copy h3 a:hover { color: var(--kg-blue) !important; }
.kg-product-copy .rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.kg-product-copy .rating-pill {
  background: #111827 !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.kg-product-copy .rating-count { color: #98a2b3 !important; font-size: 12px !important; }
.kg-price-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}
.kg-price-line strong {
  font-family: var(--kg-font-d) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: #111827 !important;
}
.kg-old-price {
  color: #98a2b3 !important;
  text-decoration: line-through !important;
  font-size: 13px !important;
}
.kg-off-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: #ecfdf3 !important;
  color: #027a48 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}
.kg-status-line {
  font-size: 12.5px !important;
  color: #98a2b3 !important;
  margin: 0 !important;
}
.kg-cart-btn {
  width: 100% !important;
  border-radius: 999px !important;
  font-family: var(--kg-font-d) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  min-height: 46px !important;
  margin-top: auto !important;
  background: #111827 !important;
  border-color: #111827 !important;
  color: #fff !important;
  transition: transform .22s var(--kg-ease), box-shadow .22s, background .2s !important;
}
.kg-cart-btn:hover:not(:disabled) {
  background: #1f2937 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(17,24,39,.18) !important;
}
.kg-cart-btn:disabled {
  background: #e5e7eb !important;
  border-color: #e5e7eb !important;
  color: #9ca3af !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════
   BANNER CARDS
   ════════════════════════════════════════ */
.kg-banner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 20px;
}
.kg-banner-card {
  position: relative;
  display: block;
  min-height: 460px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(15,23,42,.10);
  transition: transform .35s var(--kg-ease), box-shadow .35s;
}
.kg-banner-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 80px rgba(15,23,42,.16);
}
.kg-banner-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--kg-ease);
}
.kg-banner-card:hover img { transform: scale(1.06); }
.kg-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,13,23,.10) 0%, rgba(9,13,23,.78) 100%);
}
.kg-banner-copy {
  position: absolute;
  left: 28px; right: 28px; bottom: 26px;
  z-index: 2;
  display: grid;
  gap: 10px;
  color: #fff;
}
.kg-banner-copy small,
.kg-inline-link {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.7);
}
.kg-banner-copy strong {
  font-family: var(--kg-font-d) !important;
  font-size: clamp(28px, 3vw, 48px);
  line-height: .96;
  letter-spacing: -.05em;
  color: #fff;
}
.kg-banner-copy em {
  font-style: normal;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.5;
  max-width: 440px;
}
.kg-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.9) !important;
}
.kg-inline-link::after { content: '→'; }

/* ════════════════════════════════════════
   SHOWCASE BLOCKS
   ════════════════════════════════════════ */
.kg-showcase-stack { display: grid; gap: 32px; }
.kg-showcase-block {
  padding: 28px;
  border-radius: 32px;
  background: linear-gradient(160deg, #fff 0%, #f7f7f4 100%);
  border: 1px solid rgba(17,24,39,.07);
  box-shadow: 0 8px 28px rgba(15,23,42,.05);
}
.kg-showcase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(17,24,39,.07);
}
.kg-showcase-head h2 {
  font-family: var(--kg-font-d) !important;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.0;
  letter-spacing: -.04em;
  margin: 0;
  color: #0f172a;
}

/* ════════════════════════════════════════
   TICKER STRIP (add to homepage)
   ════════════════════════════════════════ */
.kg-ticker-strip {
  background: var(--kg-black);
  color: #fff;
  overflow: hidden;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.kg-ticker-wrap {
  display: flex;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.kg-ticker-track {
  display: flex;
  width: max-content;
  animation: kg-ticker 40s linear infinite;
  gap: 0;
}
.kg-ticker-track:hover { animation-play-state: paused; }
.kg-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 32px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.1);
}
.kg-ticker-item::before {
  content: '●';
  font-size: 6px;
  color: #ff6b00;
}

/* ════════════════════════════════════════
   TRUST / FOOTER STRIP
   ════════════════════════════════════════ */
.ftrust-strip {
  background: #fafaf8 !important;
  border-top: 1px solid rgba(17,24,39,.07) !important;
  border-bottom: 1px solid rgba(17,24,39,.07) !important;
  padding: 16px 0 !important;
}
.ftrust-inner {
  display: flex !important;
  align-items: center !important;
  gap: 48px !important;
  justify-content: center !important;
}
.ftrust-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #374151 !important;
}
.ftrust-item svg { color: #1249d6 !important; }

/* ════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════ */
.site-footer {
  background: var(--kg-black) !important;
  color: #9ca3af !important;
  margin-top: 0 !important;
}
.fmain {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  gap: 48px !important;
  padding: 60px 0 44px !important;
}
.flogo-img { height: 44px !important; width: auto !important; }
.flogo-text {
  font-family: var(--kg-font-d) !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
  letter-spacing: -.05em !important;
  color: #fff !important;
  text-decoration: none !important;
}
.fcol-brand { display: flex !important; flex-direction: column !important; gap: 18px !important; }
.ftagline { font-size: 14px !important; line-height: 1.7 !important; color: #6b7280 !important; max-width: 260px !important; }
.fcol-head {
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.flink {
  display: block !important;
  font-size: 13.5px !important;
  color: #6b7280 !important;
  padding: 4px 0 !important;
  transition: color .2s, padding-left .18s !important;
  text-decoration: none !important;
}
.flink:hover { color: #fff !important; padding-left: 4px !important; }
.fnewsletter-form {
  display: flex !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
.fnewsletter-form input {
  flex: 1 !important;
  background: rgba(255,255,255,.05) !important;
  border: none !important;
  padding: 11px 14px !important;
  font-size: 13.5px !important;
  color: #fff !important;
  outline: none !important;
  min-width: 0 !important;
}
.fnewsletter-form input::placeholder { color: #4b5563 !important; }
.fnewsletter-form button {
  background: #fff !important;
  color: #0f172a !important;
  border: none !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background .2s !important;
}
.fnewsletter-form button:hover { background: #f3f4f6 !important; }
.fsocial { display: flex !important; gap: 8px !important; }
.fsocial-link {
  width: 38px !important; height: 38px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.07) !important;
  display: grid !important; place-items: center !important;
  color: #9ca3af !important;
  transition: background .2s, color .2s, transform .22s var(--kg-ease) !important;
  text-decoration: none !important;
}
.fsocial-link:hover {
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}
.fcontact { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.fcontact-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #6b7280 !important;
}
.fcontact-row a { color: inherit !important; text-decoration: none !important; }
.fcontact-row a:hover { color: #fff !important; }
.fbottom {
  border-top: 1px solid rgba(255,255,255,.06) !important;
  padding: 20px 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.fpayments { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.fpay-label { font-size: 12px !important; color: #6b7280 !important; font-weight: 600 !important; }
.fpay-badge {
  padding: 4px 10px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
}
.fcopy { font-size: 12px !important; color: #4b5563 !important; display: flex !important; gap: 16px !important; flex-wrap: wrap !important; }

/* ════════════════════════════════════════
   BACK TO TOP
   ════════════════════════════════════════ */
.back-to-top-btn {
  position: fixed !important;
  bottom: 28px !important; right: 28px !important;
  width: 48px !important; height: 48px !important;
  border-radius: 50% !important;
  background: var(--kg-black) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 8px 24px rgba(10,15,30,.22) !important;
  transition: transform .25s var(--kg-ease), opacity .25s, box-shadow .25s !important;
  z-index: 999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.back-to-top-btn.visible { opacity: 1 !important; pointer-events: auto !important; }
.back-to-top-btn:hover {
  transform: translateY(-4px) scale(1.08) !important;
  box-shadow: 0 16px 40px rgba(10,15,30,.3) !important;
}

/* ════════════════════════════════════════
   MOBILE NAV DRAWER
   ════════════════════════════════════════ */
.mobile-nav-drawer {
  box-shadow: 4px 0 40px rgba(10,15,30,.2) !important;
}
.mobile-nav-head { background: #fafaf8 !important; }
.mobile-cat-accordion summary { font-family: var(--kg-font-b) !important; }
.mobile-cat-accordion ul a { color: #667085 !important; }

/* ════════════════════════════════════════
   SEARCH SUGGEST
   ════════════════════════════════════════ */
.search-suggest {
  border-radius: 18px !important;
  border: 1px solid rgba(17,24,39,.08) !important;
  box-shadow: 0 20px 52px rgba(15,23,42,.12) !important;
  animation: kg-slide-down .18s var(--kg-ease-out) both !important;
}

/* ════════════════════════════════════════
   BUTTON RIPPLE
   ════════════════════════════════════════ */
.btn .ripple {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.3);
  width: 10px; height: 10px;
  margin-top: -5px; margin-left: -5px;
  animation: kg-ripple .55s linear;
  pointer-events: none;
}

/* ════════════════════════════════════════
   COMING SOON / OUT OF STOCK LABEL
   ════════════════════════════════════════ */
.coming-soon-label {
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  background: rgba(15,23,42,.82);
  color: #fff;
  text-align: center;
  padding: 8px 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}

/* ════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════ */
@media (max-width: 1100px) {
  .kg-department-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kg-service-grid    { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .fmain              { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 820px) {
  .kg-hero                { min-height: 75vh; }
  .kg-hero-shell          { min-height: 75vh; padding-bottom: 100px; }
  .kg-hero-controls       { justify-content: flex-start; overflow-x: auto; padding-bottom: 6px; }
  .kg-hero-dot            { width: 160px; flex: 0 0 160px; }
  .kg-section-head,
  .kg-showcase-head       { flex-direction: column; align-items: flex-start; }
  .kg-banner-grid,
  .kg-service-grid,
  .kg-department-grid     { grid-template-columns: 1fr; }
  .kg-banner-card         { min-height: 340px; }
}
@media (max-width: 640px) {
  .container              { width: min(var(--container, 1440px), calc(100% - 24px)); }
  .kg-hero                { min-height: 82vh; }
  .kg-hero-shell          { padding-top: 48px; padding-bottom: 88px; }
  .kg-hero-copy h1        { font-size: clamp(36px, 12vw, 56px); }
  .kg-btn-primary,
  .kg-btn-secondary       { width: 100%; }
  .kg-hero-arrow          { display: none; }
  .kg-service-card,
  .kg-showcase-block      { padding: 18px; }
  .kg-department-card     { min-height: 110px; padding: 16px; border-radius: 22px; }
  .kg-department-visual   { width: 60px; height: 60px; border-radius: 18px; }
  .kg-product-copy h3     { min-height: auto !important; }
  .fmain                  { grid-template-columns: 1fr !important; gap: 32px !important; }
  .fbottom                { flex-direction: column !important; align-items: flex-start !important; }
  .ftrust-inner           { gap: 20px !important; flex-wrap: wrap !important; justify-content: flex-start !important; }
  .kg-ticker-strip        { display: none; }
}