/*
Theme:  Storefront Child - KZYAO
File:   assets/css/homepage-v2.css
Scope:  Loaded only on the front page (is_front_page).
Notes:  Design tokens per homepage-redesign-spec.md v1.0. Component styles are
        prefixed kv2- to avoid collisions with Storefront / WooCommerce styles.
        Stats & testimonials sections are not present yet (real data pending).
*/

/* ============ Layer 1+2: tokens ============ */
:root{
  --kv2-blue-900:#0b1f3a;
  --kv2-blue-800:#10294e;
  --kv2-blue-700:#1a44b8;
  --kv2-blue-600:#1d4ed8;
  --kv2-cyan-400:#22d3ee;
  --kv2-gray-950:#0a0f1a;
  --kv2-gray-900:#111827;
  --kv2-gray-100:#f3f4f6;
  --kv2-gray-50:#f9fafb;
  --kv2-white:#ffffff;
  --kv2-amber-400:#fbbf24;
  --kv2-wa:#25D366;
  --kv2-heading:var(--kv2-blue-900);
  --kv2-body:#374151;
  --kv2-muted:#6b7280;
  --kv2-border:#e5e7eb;
  --kv2-font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --kv2-font-body:'Inter',system-ui,sans-serif;
  --kv2-radius:10px;
  --kv2-shadow-sm:0 1px 3px rgba(11,31,58,.08);
  --kv2-shadow-md:0 6px 20px rgba(11,31,58,.10);
  --kv2-shadow-lg:0 14px 40px rgba(11,31,58,.16);
  --kv2-container:1280px;
}

/* Storefront layout override: homepage bands run edge-to-edge. */
body.home{ background:var(--kv2-white); }
.home #content > .col-full{ max-width:none; padding:0; }
.home .content-area.kv2-home-primary{ width:100%; float:none; margin:0; }
.home #main.kv2-home-main{ padding:0; margin:0; }

/* ============ Top announcement bar ============ */
.kv2-topbar{
  background:var(--kv2-blue-900);
  color:#cbd5e1;
  font-family:var(--kv2-font-body);
  font-size:.8rem;
  line-height:1.5;
  text-align:center;
  padding:.45rem 1rem;
}
.kv2-topbar b{ color:#fff; font-weight:600; }

/* ============ Typography base ============ */
body.home{ font-family:var(--kv2-font-body); color:var(--kv2-body); font-size:16px; line-height:1.6; }
.kv2 *{ box-sizing:border-box; }
.kv2 h1,.kv2 h2,.kv2 h3,.kv2 h4{ font-family:var(--kv2-font-display); color:var(--kv2-heading); line-height:1.18; margin:0 0 .5rem; }
.kv2 p{ margin:0 0 1rem; }
.kv2 img{ max-width:100%; height:auto; }
.kv2 a{ text-decoration:none; }
.kv2 a:focus-visible,.kv2 button:focus-visible{ outline:2px solid var(--kv2-cyan-400); outline-offset:2px; }

.kv2-inner{ max-width:var(--kv2-container); margin-inline:auto; padding-inline:1.5rem; }
.kv2-sec{ padding-block:clamp(3rem,6vw,5.5rem); }
.kv2-sec-head{ max-width:640px; margin-bottom:clamp(1.75rem,4vw,3rem); }
.kv2-sec-head.center{ margin-inline:auto; text-align:center; }
.kv2-eyebrow{
  display:inline-block;
  font-family:var(--kv2-font-display);
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--kv2-cyan-400);
}
.kv2-eyebrow--blue{ color:var(--kv2-blue-600); }
.kv2-sec-head h2{ font-size:clamp(1.6rem,3vw,2.4rem); margin-top:.5rem; }
.kv2-sec-head p{ margin-top:.75rem; color:var(--kv2-muted); }

/* ============ Buttons ============ */
.kv2 .kv2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--kv2-font-display); font-weight:600; font-size:1rem;
  line-height:1.2; text-align:center; text-decoration:none; cursor:pointer;
  padding:.8rem 1.6rem; min-height:48px; border-radius:var(--kv2-radius);
  border:2px solid transparent; transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
.kv2 .kv2-btn:active{ transform:scale(.98); }
.kv2 .kv2-btn-primary{ background:var(--kv2-blue-600); color:#fff; box-shadow:var(--kv2-shadow-md); }
.kv2 .kv2-btn-primary:hover,.kv2 .kv2-btn-primary:focus{ background:var(--kv2-blue-700); color:#fff; box-shadow:var(--kv2-shadow-lg); }
.kv2 .kv2-btn-wa{ background:var(--kv2-wa); color:#fff; }
.kv2 .kv2-btn-wa:hover,.kv2 .kv2-btn-wa:focus{ background:#1ebe5d; color:#fff; box-shadow:var(--kv2-shadow-md); }
.kv2 .kv2-btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.kv2 .kv2-btn-ghost:hover,.kv2 .kv2-btn-ghost:focus{ border-color:#fff; color:#fff; }
.kv2 .kv2-btn-outline{ background:transparent; color:var(--kv2-blue-600); border-color:var(--kv2-blue-600); }
.kv2 .kv2-btn-outline:hover,.kv2 .kv2-btn-outline:focus{ background:var(--kv2-blue-600); color:#fff; }
.kv2 .kv2-btn-lg{ padding:1rem 2rem; font-size:1.05rem; }

/* ============ Hero ============ */
.kv2-hero{
  background:linear-gradient(135deg,var(--kv2-blue-900) 0%,var(--kv2-blue-800) 55%,#123a6d 100%);
  color:#fff; position:relative; overflow:hidden;
}
.kv2-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 300px at 85% 18%,rgba(34,211,238,.16),transparent 70%);
}
.kv2-hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,3rem);
  align-items:center; padding-block:clamp(3.25rem,7vw,5.5rem); position:relative; z-index:1;
}
.kv2-hero-copy{ min-width:0; }
.kv2-hero h1{ color:#fff; font-size:clamp(2rem,4.2vw,3.3rem); font-weight:700; margin:1rem 0; }
.kv2-hero h1 em{ font-style:normal; color:var(--kv2-cyan-400); }
.kv2-hero-sub{ font-size:clamp(1rem,1.4vw,1.15rem); color:#c7d5ea; max-width:540px; }
.kv2-hero-ctas{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.kv2-hero-visual{
  margin:0; position:relative; z-index:1;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; overflow:hidden; box-shadow:var(--kv2-shadow-lg);
}
.kv2-hero-visual img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.kv2-trustbar{ border-top:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); }
.kv2-trustbar ul{ list-style:none; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1.5rem; padding:.9rem 0; margin:0; }
.kv2-trustbar li{ display:flex; align-items:center; gap:.5rem; color:#dbe6f5; font-size:.92rem; font-weight:500; }
.kv2-trustbar li::before{
  content:"✓"; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; flex:none; border-radius:50%;
  background:rgba(34,211,238,.18); color:var(--kv2-cyan-400); font-size:.7rem;
}

/* ============ Category matrix ============ */
.kv2-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.kv2-cat-grid--two{ max-width:900px; margin-inline:auto; grid-template-columns:repeat(2,1fr); }
.kv2-cat-card{
  display:flex; flex-direction:column; color:inherit;
  border:1px solid var(--kv2-border); border-radius:14px; overflow:hidden; background:#fff;
  transition:transform .18s ease,box-shadow .18s ease;
}
.kv2-cat-card:hover,.kv2-cat-card:focus{ transform:translateY(-4px); box-shadow:var(--kv2-shadow-lg); }
.kv2-cat-thumb{ aspect-ratio:4/3; background:linear-gradient(135deg,var(--kv2-gray-100),#e2e8f0); overflow:hidden; }
.kv2-cat-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.kv2-cat-body{ display:block; padding:1rem; }
.kv2-cat-body h3{ font-size:1.1rem; margin:0; }
.kv2-cat-meta{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-top:.4rem; color:var(--kv2-muted); font-size:.9rem; }
.kv2-cat-meta .kv2-from{ color:var(--kv2-blue-600); font-weight:600; }
.kv2-cat-count{ white-space:nowrap; }
.kv2-cat-card .kv2-arrow{ display:inline-block; transition:transform .15s; }
.kv2-cat-card:hover .kv2-arrow{ transform:translateX(4px); }

/* ============ Why us ============ */
.kv2-why{ background:var(--kv2-gray-50); border-block:1px solid var(--kv2-border); }
.kv2-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.kv2-why-card{ background:#fff; border:1px solid var(--kv2-border); border-radius:14px; padding:1.6rem 1.4rem; box-shadow:var(--kv2-shadow-sm); }
.kv2-why-icon{
  width:46px; height:46px; border-radius:12px; background:rgba(29,78,216,.08);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem; color:var(--kv2-blue-600);
}
.kv2-why-icon svg{ width:24px; height:24px; }
.kv2-why-card h3{ font-size:1.05rem; margin-bottom:.4rem; }
.kv2-why-card p{ font-size:.93rem; color:var(--kv2-muted); margin:0; }

/* ============ Policy strip ============ */
.kv2-policy{ background:var(--kv2-blue-900); color:#cbd5e1; }
.kv2-policy ul{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem 2rem; margin:0; padding-block:.25rem; }
.kv2-policy li{ padding-left:1.5rem; position:relative; }
.kv2-policy li::before{ content:"◆"; position:absolute; left:0; top:.3rem; color:var(--kv2-cyan-400); font-size:.8rem; }
.kv2-policy b{ display:block; color:#fff; font-family:var(--kv2-font-display); }
.kv2-policy small{ font-size:.85rem; }

/* ============ Product grid (best sellers) ============ */
.kv2-prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.kv2-prod-card{
  border:1px solid var(--kv2-border); border-radius:14px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column; transition:transform .18s ease,box-shadow .18s ease;
}
.kv2-prod-card:hover{ transform:translateY(-4px); box-shadow:var(--kv2-shadow-lg); }
.kv2-prod-thumb{ position:relative; display:block; aspect-ratio:1/1; background:linear-gradient(135deg,#fff,#f1f5f9); overflow:hidden; }
.kv2-prod-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kv2-moq-tag{
  position:absolute; top:.75rem; left:.75rem; z-index:2;
  background:var(--kv2-amber-400); color:#78350f;
  font-size:.7rem; font-weight:700; line-height:1; padding:.35rem .55rem;
  border-radius:999px; letter-spacing:.04em;
}
.kv2-prod-body{ padding:1rem; display:flex; flex-direction:column; gap:.45rem; flex:1; }
.kv2-prod-body h3{ font-family:var(--kv2-font-body); font-size:.95rem; font-weight:600; line-height:1.35; margin:0; }
.kv2-prod-body h3 a{ color:var(--kv2-heading); }
.kv2-prod-body h3 a:hover{ color:var(--kv2-blue-600); }
.kv2-prod-title{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.kv2-prod-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.35rem .5rem; }
.kv2-prod-price .kv2-price{ font-family:var(--kv2-font-display); font-weight:700; color:var(--kv2-blue-600); font-size:1.12rem; }
.kv2-prod-price .kv2-moq-text{ font-size:.75rem; color:var(--kv2-muted); font-weight:600; }
.kv2-prod-actions{ display:flex; gap:.5rem; margin-top:auto; padding-top:.5rem; }
.kv2-prod-actions .kv2-btn{ flex:1; min-height:42px; padding:.5rem .6rem; font-size:.86rem; border-radius:8px; }

/* ============ OEM ============ */
.kv2-oem{ background:linear-gradient(135deg,var(--kv2-blue-900),var(--kv2-blue-800)); color:#cbd5e1; }
.kv2-oem .kv2-sec-head h2{ color:#fff; }
.kv2-oem .kv2-sec-head p{ color:#94a3b8; }
.kv2-oem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.kv2-oem-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:1.6rem 1.4rem; }
.kv2-oem-card h3{ color:#fff; font-size:1.1rem; margin-bottom:.5rem; }
.kv2-oem-card p{ font-size:.92rem; margin:0; }
.kv2-oem-note{ text-align:center; margin-top:2.5rem; }
.kv2-oem-note p{ margin-bottom:1.25rem; font-size:.95rem; }

/* ============ How ordering works ============ */
.kv2-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; counter-reset:kv2step; }
.kv2-step{ position:relative; padding-top:2.75rem; }
.kv2-step::before{
  counter-increment:kv2step; content:counter(kv2step);
  font-family:var(--kv2-font-display); font-weight:700; font-size:2.4rem; line-height:1;
  color:#d1d9e6; position:absolute; top:.4rem; left:0;
}
.kv2-step h3{ font-size:1.05rem; margin-bottom:.35rem; }
.kv2-step p{ font-size:.92rem; color:var(--kv2-muted); margin:0; }

/* ============ FAQ ============ */
.kv2-faq{ max-width:760px; margin-inline:auto; }
.kv2-faq details{ border:1px solid var(--kv2-border); border-radius:10px; padding:.9rem 1.4rem; margin-bottom:.75rem; background:#fff; }
.kv2-faq summary{ cursor:pointer; font-weight:600; color:var(--kv2-heading); font-family:var(--kv2-font-display); font-size:1rem; }
.kv2-faq summary::-webkit-details-marker{ display:none; }
.kv2-faq details p{ margin:.6rem 0 0; font-size:.95rem; }
.kv2-faq details[open]{ border-color:var(--kv2-blue-600); }
.kv2-faq-more{ display:inline-block; margin-top:.5rem; color:var(--kv2-blue-600); font-weight:600; }
.kv2-faq-more:hover{ color:var(--kv2-blue-700); text-decoration:underline; }

/* ============ Final CTA ============ */
.kv2-final{ background:linear-gradient(135deg,var(--kv2-blue-600),var(--kv2-blue-800)); text-align:center; color:#fff; }
.kv2-final h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.4rem); }
.kv2-final p{ color:#c7d5ea; max-width:560px; margin:1rem auto 2rem; }
.kv2-final .kv2-hero-ctas{ justify-content:center; margin-top:0; }

/* ============ Responsive ============ */
@media (max-width:1023px){
  .kv2-hero-grid{ grid-template-columns:1fr; }
  .kv2-hero-visual{ max-width:640px; }
  .kv2-prod-grid{ grid-template-columns:repeat(3,1fr); }
  .kv2-why-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .kv2-cat-grid{ grid-template-columns:repeat(2,1fr); }
  .kv2-oem-grid{ grid-template-columns:1fr; }
  .kv2-steps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .kv2-prod-grid{ grid-template-columns:repeat(2,1fr); gap:1rem; }
  .kv2-trustbar ul{ justify-content:flex-start; }
}
@media (max-width:560px){
  .kv2-inner{ padding-inline:1.1rem; }
  .kv2-cat-grid,.kv2-cat-grid--two{ grid-template-columns:1fr 1fr; gap:1rem; }
  .kv2-cat-body{ padding:.75rem; }
  .kv2-cat-body h3{ font-size:.95rem; }
  .kv2-cat-meta{ font-size:.8rem; }
  .kv2-cat-count{ white-space:normal; }
  .kv2-why-grid{ grid-template-columns:1fr; }
  .kv2-steps{ grid-template-columns:1fr; }
  .kv2-prod-actions{ flex-direction:column; }
  .kv2 .kv2-btn-lg{ width:100%; }
  .kv2-hero-ctas{ flex-direction:column; align-items:stretch; }
  .kv2-hero-ctas .kv2-btn{ width:100%; }
}

@media (prefers-reduced-motion: reduce){
  .kv2 *, .kv2 *::before, .kv2 *::after{ transition:none !important; animation:none !important; }
  .kv2 a, .kv2 .kv2-btn{ transform:none !important; }
}

/* ============ Real delivery records (homepage) ============ */
.kv2-delivery-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:1rem; }
.kv2-dl-card{ display:flex; flex-direction:column; gap:.35rem; background:#fff; border:1px solid var(--kv2-border); border-radius:14px; padding:1.15rem 1rem; box-shadow:var(--kv2-shadow-sm); margin:0; }
.kv2-dl-flag{ font-size:1.9rem; line-height:1.2; }
.kv2-dl-card h3{ font-size:.98rem; margin:0; }
.kv2-dl-card p{ font-size:.9rem; color:var(--kv2-muted); margin:0; }
.kv2-dl-note{ margin:1.4rem auto 0; max-width:760px; text-align:center; font-size:.85rem; color:var(--kv2-muted); }

/* ============ Buyer testimonials (homepage) ============ */
.kv2-tsec{ background:var(--kv2-gray-50); border-block:1px solid var(--kv2-border); }
.kv2-tcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.kv2-tcard{ display:flex; flex-direction:column; gap:.55rem; background:#fff; border:1px solid var(--kv2-border); border-radius:14px; padding:1.35rem 1.3rem; box-shadow:var(--kv2-shadow-sm); margin:0; min-height:100%; }
.kv2-tstars{ color:var(--kv2-amber-400); letter-spacing:.1em; font-size:1.02rem; line-height:1.3; }
.kv2-tcard blockquote{ margin:0; padding:0; border:none; quotes:none; }
.kv2-tcard blockquote::before,.kv2-tcard blockquote::after{ content:none; }
.kv2-tcard blockquote p{ margin:0; font-size:.95rem; line-height:1.55; color:var(--kv2-gray-900); }
.kv2-tcard-cite{ margin-top:auto; padding-top:.8rem; border-top:1px dashed var(--kv2-border); display:flex; flex-direction:column; gap:.12rem; font-style:normal; font-size:.86rem; }
.kv2-tcard-name{ font-weight:700; color:var(--kv2-heading); font-family:var(--kv2-font-display); }
.kv2-tcard-where{ color:var(--kv2-muted); }
.kv2-tcard-prod{ color:var(--kv2-blue-600); font-size:.8rem; }
.kv2-chip{ align-self:flex-start; background:rgba(251,191,36,.16); color:#92600a; border:1px solid rgba(251,191,36,.45); font-size:.7rem; font-weight:700; letter-spacing:.02em; padding:.14rem .55rem; border-radius:999px; }
.kv2-tseeall{ display:flex; justify-content:flex-end; margin-top:1.75rem; }
.kv2-tseeall .kv2-btn{ padding:.8rem 1.5rem; }

/* ============ Reviews wall page (/reviews/) ============ */
.kv2-reviews-body{ background:var(--kv2-white); font-family:var(--kv2-font-body); color:var(--kv2-body); font-size:16px; line-height:1.6; }
.kv2-reviews-body #content > .col-full{ max-width:none; padding:0; }
.kv2-reviews-body .content-area.kv2-home-primary{ width:100%; float:none; margin:0; }
.kv2-reviews-body #main.kv2-home-main{ padding:0; margin:0; }
.kv2-rv-hero{ background:linear-gradient(135deg,var(--kv2-blue-900) 0%,var(--kv2-blue-800) 55%,#123a6d 100%); color:#fff; position:relative; overflow:hidden; text-align:center; }
.kv2-rv-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(560px 280px at 50% 0%,rgba(34,211,238,.14),transparent 70%); }
.kv2-rv-hero .kv2-inner{ position:relative; z-index:1; padding-block:clamp(3rem,7vw,4.5rem); }
.kv2-rv-hero h1{ color:#fff; font-size:clamp(2rem,4.2vw,3.1rem); font-weight:700; margin:0; }
.kv2-rv-hero p{ color:#c7d5ea; max-width:680px; margin:1rem auto 0; font-size:clamp(.98rem,1.3vw,1.1rem); }
.kv2-rv-groups{ display:flex; flex-direction:column; }
.kv2-rv-group{ padding-block:0; }
.kv2-rv-group + .kv2-rv-group{ border-top:1px solid var(--kv2-border); margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(1.5rem,3vw,2.25rem); }
.kv2-rv-group h2{ display:flex; align-items:center; gap:.6rem; font-size:clamp(1.2rem,2vw,1.45rem); margin:0 0 1.25rem; }
.kv2-rv-group h2::before{ content:""; width:.5rem; height:1.15em; background:linear-gradient(180deg,var(--kv2-cyan-400),var(--kv2-blue-600)); border-radius:3px; }
.kv2-rv-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.25rem; }
.kv2-tcard--staronly{ align-items:center; text-align:center; }
.kv2-tcard--staronly .kv2-tcard-cite{ align-items:center; }
.kv2-rv-verified h2 span{ font-weight:400; color:var(--kv2-muted); font-size:.9em; }
@media (max-width:1023px){
	.kv2-tcards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
	.kv2-tcards{ grid-template-columns:1fr; }
	.kv2-tseeall{ justify-content:center; }
	.kv2-tseeall .kv2-btn{ width:100%; text-align:center; }
}


/* ============ Free wholesale shipping banner (homepage v2) ============ */
.kv2-fs{
  background:linear-gradient(135deg,#e9f6ff 0%,#d7edff 48%,#b9e2fb 100%);
  border-block:1px solid rgba(29,78,216,.14);
}
.kv2-fs-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem 2.5rem;
  padding-block:2.5rem;
}
.kv2-fs-eyebrow{
  display:inline-block;
  font-family:var(--kv2-font-display);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--kv2-blue-700);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(29,78,216,.28);
  border-radius:999px;
  padding:.28rem .8rem;
  margin-bottom:.85rem;
}
.kv2-fs h2{ margin:0 0 .65rem; color:var(--kv2-blue-900); }
.kv2-fs-body{ margin:0 0 .55rem; max-width:840px; font-size:1.02rem; line-height:1.6; color:var(--kv2-gray-900); }
.kv2-fs-note{ margin:0; font-size:.84rem; font-weight:600; color:var(--kv2-blue-800); }
.kv2-fs-cta{ flex:none; }

/* Unified delivery-standard line under the real delivery records block. */
.kv2-dl-policy{
  margin:.9rem auto 0;
  max-width:760px;
  text-align:center;
  font-size:.9rem;
  font-weight:600;
  color:var(--kv2-blue-700);
}
@media (max-width:900px){
  .kv2-fs-inner{ flex-direction:column; align-items:flex-start; padding-block:2rem; }
  .kv2-fs-cta{ width:100%; }
  .kv2-fs-cta .kv2-btn{ width:100%; text-align:center; }
}
@media (max-width:480px){
  .kv2-fs-body{ font-size:.96rem; }
}

/* ============ Buy with Confidence badges (above buyer reviews) ============ */
.kv2-bwc-sec{ padding-block:clamp(1.75rem,3vw,2.75rem); }
.kv2-bwc-head{ margin-bottom:clamp(1.25rem,2.4vw,1.75rem); }
.kv2-bwc{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.kv2-bwc-card{
  display:flex; flex-direction:column; align-items:flex-start;
  background:linear-gradient(160deg,#f1f7ff 0%,#fbfdff 100%);
  border:1px solid #d9e6f6; border-radius:14px; padding:1.2rem 1.15rem;
  box-shadow:var(--kv2-shadow-sm);
}
.kv2-bwc-ico{ font-size:1.5rem; line-height:1; margin-bottom:.7rem; }
.kv2-bwc-card h3{ font-size:1rem; margin:0 0 .35rem; }
.kv2-bwc-card p{ font-size:.86rem; line-height:1.5; color:var(--kv2-muted); margin:0; }

/* ============ Reviews wall authenticity note ============ */
.kv2-rv-hero .kv2-rv-note{ color:#93a7c6; font-size:.85rem; max-width:680px; margin:.55rem auto 0; }

@media (max-width:1023px){
  .kv2-bwc{ grid-template-columns:repeat(2,1fr); }
}


/* ============ Hero full-width background carousel (task 08) ============ */
/* Background layer: three stacked slides fade in/out; first slide is visible by
   default (no-JS fallback). Copy/H1 stays above it in the left column. */
.kv2-hero-slideshow .kv2-hero-slider{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.kv2-hero-slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s ease; }
.kv2-hero-slide picture,.kv2-hero-slide img{ display:block; width:100%; height:100%; }
.kv2-hero-slide img{ object-fit:cover; }
.kv2-hero-slide.is-active{ opacity:1; visibility:visible; z-index:1; }
/* Deep-blue scrim keeps white copy readable over any banner. */
.kv2-hero-slider::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg,rgba(6,20,40,.86) 0%,rgba(6,20,40,.42) 42%,rgba(6,20,40,.06) 72%,rgba(6,20,40,0) 100%);
}
/* The old cyan radial decoration was tuned for the flat gradient hero; the
   banner art already carries its own background, so hide it here. */
.kv2-hero-slideshow::after{ display:none; }
/* Copy column now spans the container; keep the column width close to the old
   layout so H1/CTA typography and wrapping stay unchanged. */
.kv2-hero-slideshow .kv2-hero-grid{ grid-template-columns:1fr; min-height:clamp(440px,38vw,600px); align-content:center; }
.kv2-hero-slideshow .kv2-hero-copy{ max-width:680px; }
.kv2-hero-slideshow .kv2-trustbar{ position:relative; z-index:1; }
/* Slide navigation dots (bottom centre, above the trust bar). */
.kv2-hero-dots{ display:flex; justify-content:center; gap:.55rem; padding:0 0 clamp(1.1rem,2.2vw,1.7rem); position:relative; z-index:2; }
.kv2-hero-dot{ width:11px; height:11px; margin:0; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.42); cursor:pointer; transition:background .2s ease,transform .2s ease; }
.kv2-hero-dot:hover{ background:rgba(255,255,255,.75); }
.kv2-hero-dot.is-active{ background:var(--kv2-cyan-400); transform:scale(1.2); }
.kv2-hero-dot:focus-visible{ outline:2px solid var(--kv2-cyan-400); outline-offset:2px; }
@media (max-width:1023px){
  .kv2-hero-slideshow .kv2-hero-grid{ min-height:clamp(430px,72vw,520px); }
}
@media (max-width:767px){
  .kv2-hero-slideshow .kv2-hero-grid{ min-height:0; padding-block:clamp(4.2rem,16vw,6.5rem) clamp(3.6rem,13vw,5.5rem); }
  /* Stronger full-height scrim on phones so copy stays readable over the crop. */
  .kv2-hero-slider::after{
    background:linear-gradient(180deg,rgba(6,20,40,.28) 0%,rgba(6,20,40,.55) 40%,rgba(6,20,40,.94) 100%);
  }
  .kv2-hero-slideshow .kv2-hero-copy{ max-width:none; }
  .kv2-hero-dots{ gap:.5rem; padding-bottom:1.15rem; }
}
/* ============ Task 09 fix: mobile hero crop ============ */
/* Products sit on the right side of each 1920px banner. On phones the old
object-fit:cover crop kept the middle of the image, slicing the product off
and leaving only a sliver. Focus the crop on the product area instead. */
@media (max-width:767px){
.kv2-hero-slide:nth-child(1) img{ object-position:77% center; } /* earbuds: product ~55-100% */
.kv2-hero-slide:nth-child(2) img{ object-position:67% center; } /* 5-col A: row ~34-100% */
.kv2-hero-slide:nth-child(3) img{ object-position:70% center; } /* 5-col B: row ~41-100% */
/* Scrim: dark on the left (behind copy), transparent on the right (product side). */
.kv2-hero-slider::after{
background:
linear-gradient(90deg, rgba(6,20,40,.92) 0%, rgba(6,20,40,.6) 45%, rgba(6,20,40,.12) 80%, rgba(6,20,40,0) 100%),
linear-gradient(0deg,  rgba(6,20,40,.7) 0%,   rgba(6,20,40,0) 35%);
}
}


/* ============ Product category nav (task 28) ============ */
/* Six fixed wholesale lines, rendered directly under the header and above the
   hero so a first-time visitor sees the product range immediately. */
.kv2-catnav{
  background:var(--kv2-gray-50);
  border-bottom:1px solid var(--kv2-border);
  padding-block:clamp(.85rem,1.6vw,1.15rem);
}
.kv2-catnav-list{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:10px; list-style:none; margin:0; padding:0;
}
.kv2-catnav-list > li{ margin:0; }
.kv2 .kv2-catnav-link{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--kv2-font-display); font-weight:600; font-size:.95rem; line-height:1.2;
  color:var(--kv2-heading); background:var(--kv2-white);
  border:1px solid var(--kv2-border); border-radius:999px;
  padding:.6rem 1.15rem; min-height:44px; white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.kv2 .kv2-catnav-link:hover,.kv2 .kv2-catnav-link:focus{
  background:var(--kv2-blue-600); border-color:var(--kv2-blue-600); color:#fff;
  box-shadow:var(--kv2-shadow-md);
}
/* Phones: shrink the pills, never let them overflow the viewport. */
@media (max-width:767px){
  .kv2-catnav{ padding-block:.7rem; }
  .kv2-catnav-list{ gap:8px; }
  .kv2 .kv2-catnav-link{ font-size:.82rem; padding:.45rem .8rem; min-height:38px; }
}
@media (max-width:430px){
  .kv2-catnav{ padding-block:.6rem; }
  .kv2-catnav-list{ gap:6px; }
  .kv2 .kv2-catnav-link{ font-size:.78rem; padding:.4rem .68rem; min-height:36px; }
}