/*
Theme Name:  GeneratePress Child
Theme URI:   https://generatepress.com
Description: GeneratePress ka child theme - custom code yahan
Author:      Farhan
Template:    generatepress
Version:     1.0.0
Text Domain: gpc
*/

/* ==========================================================================
   01. ROOT VARIABLES — colors, radius, animation timing
   Poori site ke colors yahan se control hote hain
   ========================================================================== */

:root {
    --km-black:  #000000;
    --km-dark:   #0A0A0A;
    --km-panel:  #141414;
    --km-line:   rgba(255,255,255,0.12);

    --km-teal:   #17A2A2;
    --km-green:  #17A2A2;
    --km-blue:   #0A84FF;

    --km-white:  #FFFFFF;
    --km-muted:  #9A9993;

    --km-radius: 6px;

    --km-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --km-dur:  0.6s;
}




body.woocommerce-cart .site,
body.woocommerce-cart #page,
body.woocommerce-cart .site-content{
    overflow-x: hidden;
}




/* ==========================================================================
   02. BASE — body, headings, links
   ========================================================================== */

* { box-sizing: border-box; }

body {
    background: var(--km-dark);
    color: var(--km-white);
    font-family: 'Work Sans', sans-serif;
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.05;
    color: var(--km-white);
    text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }


/* ==========================================================================
   03. GENERATEPRESS OVERRIDE — GP ke white backgrounds hatana
   GP apne content areas ko khud background deta hai, isliye override zaroori
   ========================================================================== */

.site,
#page,
#content,
.site-content,
.inside-article,
.entry-content,
.site-header,
.site-footer,
.widget-area .widget,
.woocommerce,
.woocommerce-page,
.woocommerce #content,
.woocommerce-page #content,
body.woocommerce-page,
.woocommerce ul.products,
.woocommerce-page .content-area {
    background-color: var(--km-dark) !important;
    color: var(--km-white);
}

.site-header {
    background-color: var(--km-black);
    border-bottom: 1px solid var(--km-line);

}



/* ==========================================================================
   03b. HOMEPAGE + WOOCOMMERCE SPACING FIX
   GP ka default title/sidebar/padding hata raha hai — homepage aur shop dono pe
   ========================================================================== */
   
   .woocommerce-page .page-header,
.woocommerce-page .entry-header,
body.woocommerce-page .woocommerce-breadcrumb {
    display: none !important;
}

.home .entry-header,
.home .page-header {
    display: none !important;
}
.home #right-sidebar,
.home #left-sidebar,
.woocommerce-page #right-sidebar,
.woocommerce-page #left-sidebar,
.woocommerce #right-sidebar,
.woocommerce #left-sidebar {
    display: none !important;
}
.home .content-area,
.woocommerce-page .content-area,
.woocommerce .content-area {
    width: 100% !important;
    float: none !important;
    max-width: 100% !important;
}
.home.separate-containers .inside-article {
    padding: 0 !important;
}
.home.separate-containers .site-main {
    margin: 0 !important;
}
.home .site-content {
    padding: 0 !important;
}
.home .entry-content > *:first-child {
    margin-top: 0 !important;
}





/* ==========================================================================
   04. SCROLL REVEAL — scroll pe fade-in animation
   Use: class="km-reveal"  |  stagger: data-delay="1"/"2"/"3"
   JS: assets/js/main.js
   ========================================================================== */

.km-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--km-dur) var(--km-ease),
                transform var(--km-dur) var(--km-ease);
}
.km-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.km-reveal[data-delay="1"] { transition-delay: .08s; }
.km-reveal[data-delay="2"] { transition-delay: .16s; }
.km-reveal[data-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    .km-reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   02b. AMBIENT BACKGROUND GLOW
   Page ke peeche halka teal/blue glow - flat black se depth badhata hai
   Fixed hai, scroll pe move nahi hota
   ========================================================================== */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 15% -5%,  rgba(0,232,143,0.10), transparent 60%),
        radial-gradient(800px 500px at 85% 10%,  rgba(10,132,255,0.10), transparent 60%);
}

/* ==========================================================================
   10. LAYOUT WRAPPER
   ========================================================================== */

.km-wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   11. SITE HEADER — sticky, scroll-shrink glass header + category strip
   File: template-parts/sections/site-header.php | JS: assets/js/main.js
   ========================================================================== */

/* ==========================================================================
   11b. HEADER VISIBILITY FORCE — GP ya kisi bhi parent rule se conflict na ho
   Ensures header hamesha visible rahe, sirf hamara scroll-shrink JS chale
   ========================================================================== */
.km-hd {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}


.site-header {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
}


.km-hd {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}


.km-hd {
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--km-black);
    transition: background .35s ease, box-shadow .35s ease;
}
.km-hd::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,232,143,.45) 18%, rgba(0,232,143,.95) 50%, rgba(0,232,143,.45) 82%, transparent);
    opacity: .5;
    transition: opacity .35s ease;
}
.km-hd.km-scrolled {
    background: rgba(8,8,8,.72);
    backdrop-filter: blur(18px) saturate(165%);
    box-shadow: 0 10px 34px rgba(0,0,0,.6);
}
.km-hd.km-scrolled::after { opacity: 1; }

.km-hd-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; max-width: 1400px; margin: 0 auto;
    padding: 10px 20px; transition: padding .3s ease;
}
.km-hd.km-scrolled .km-hd-inner { padding: 5px 20px; }
.km-hd-side { display: flex; align-items: center; gap: 2px; flex: 1 1 0; }
.km-hd-right { justify-content: flex-end; }

/* Logo wordmark */
.km-logo { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 2px 0; }
.km-logo-stack { display: block; text-align: center; }
.km-logo-text {
    display: block;
    font-family: 'Anton', sans-serif;
    font-size: 32px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap; color: var(--km-white);
    transition: font-size .3s ease;
}
.km-logo-m { color: var(--km-green); }
.km-logo-sub {
    display: block; font-size: 7.5px; letter-spacing: .4em; text-transform: uppercase;
    color: #8a8a8a; margin-top: 4px; white-space: nowrap;
    transition: opacity .25s ease, max-height .3s ease;
}
.km-hd.km-scrolled .km-logo-text { font-size: 22px; }
.km-hd.km-scrolled .km-logo-sub { opacity: 0; max-height: 0; margin-top: 0; }

/* Icons */
.km-ico {
    position: relative; background: none; border: 0; cursor: pointer; padding: 8px;
    display: flex; align-items: center; text-decoration: none;
}
.km-ico svg {
    width: 21px; height: 21px; fill: none; stroke: var(--km-green); stroke-width: 1.6; stroke-linecap: round;
    transition: stroke .2s, filter .2s, transform .2s;
}
.km-ico:hover svg { stroke: #fff; filter: drop-shadow(0 0 5px rgba(0,232,143,.85)); }
.km-ico:active svg { transform: scale(.9); }
.km-badge {
    position: absolute; top: 1px; right: 1px; background: var(--km-green); color: #04211B;
    font-size: 10px; font-weight: 700; line-height: 1; min-width: 16px; height: 16px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center; padding: 0 4px;
    box-shadow: 0 0 0 2px var(--km-black);
}
.km-badge[data-count="0"] { display: none; }

/* Burger -> X */
.km-burger { background: none; border: 0; cursor: pointer; padding: 9px 8px; display: flex; flex-direction: column; gap: 5px; }
.km-burger span {
    width: 23px; height: 2px; background: var(--km-green); display: block; border-radius: 2px;
    transition: transform .3s cubic-bezier(.6,.05,.28,.91), opacity .2s ease, background .2s;
}
.km-burger:hover span { background: #fff; }
.km-burger.km-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.km-burger.km-open span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.km-burger.km-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Category strip */
.km-strip {
    max-height: 44px; overflow: hidden; border-top: 1px solid rgba(0,232,143,.14);
    transition: max-height .35s ease, opacity .3s ease, border-color .3s ease;
}
.km-hd.km-tuck .km-strip { max-height: 0; opacity: 0; border-color: transparent; }
.km-strip-track {
    display: flex; align-items: center; gap: 24px; overflow-x: auto;
    padding: 11px 20px; max-width: 1400px; margin: 0 auto;
    scrollbar-width: none;
}
.km-strip-track::-webkit-scrollbar { display: none; }
.km-strip-track a {
    position: relative; flex: 0 0 auto; color: var(--km-white); text-decoration: none;
    font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    white-space: nowrap; padding-bottom: 3px; transition: color .2s;
}
.km-strip-track a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--km-green); transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.km-strip-track a:hover, .km-strip-track a.km-on { color: var(--km-green); }
.km-strip-track a:hover::after, .km-strip-track a.km-on::after { transform: scaleX(1); }
.km-strip-all { color: var(--km-green) !important; }

/* Scrim */
.km-scrim {
    position: fixed; inset: 0; background: rgba(0,0,0,.66);
    backdrop-filter: blur(2px); opacity: 0; transition: opacity .28s ease; z-index: 1002;
}
.km-scrim.km-show { opacity: 1; }
html.km-lock, html.km-lock body { overflow: hidden; overscroll-behavior: none; }


/* ==========================================================================
   11b. DRAWER MENU
   File: template-parts/sections/site-header.php
   ========================================================================== */

.km-drawer {
    position: fixed; top: 0; left: 0; width: min(88vw, 320px); height: 100%;
    background: linear-gradient(180deg, #101010 0%, #080808 100%);
    border-right: 1px solid rgba(0,232,143,.35);
    box-shadow: 22px 0 50px rgba(0,0,0,.6);
    transform: translateX(-102%);
    transition: transform .34s cubic-bezier(.4,0,.2,1);
    z-index: 1003; overflow-y: auto; box-sizing: border-box; padding: 16px 0 34px;
}
.km-drawer.km-show { transform: translateX(0); }
.km-dw-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px 14px; border-bottom: 1px solid rgba(0,232,143,.18);
}
.km-dw-brand { font-family: 'Anton', sans-serif; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--km-green); }
.km-dw-x { background: none; border: 0; color: #fff; font-size: 17px; cursor: pointer; padding: 6px 2px; line-height: 1; }
.km-dw-x:hover { color: var(--km-green); }
.km-dw-home {
    display: block; padding: 14px 18px; color: var(--km-white); text-decoration: none;
    font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.km-dw-home:hover { color: var(--km-green); }

.km-acc { border-bottom: 1px solid rgba(255,255,255,.06); }
.km-acc summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    padding: 15px 18px; color: var(--km-green); font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.km-acc summary::-webkit-details-marker { display: none; }
.km-acc summary i {
    width: 8px; height: 8px; border-right: 1.6px solid var(--km-green); border-bottom: 1.6px solid var(--km-green);
    transform: rotate(45deg); transition: transform .3s ease;
}
.km-acc[open] summary i { transform: rotate(-135deg); }
.km-acc-body { padding: 0 0 8px; }
.km-dw-row {
    display: flex; align-items: center; gap: 12px; padding: 8px 18px; text-decoration: none;
    color: var(--km-white); font-size: 13.5px; transition: background .2s, padding-left .2s;
}
.km-dw-row:hover { background: rgba(0,232,143,.07); padding-left: 23px; color: #fff; }
.km-dw-thumb {
    flex: 0 0 42px; width: 42px; height: 42px; border-radius: 8px;
    background: #1a1a1a center/cover no-repeat; border: 1px solid rgba(0,232,143,.28);
}
.km-dw-name { flex: 1; }
.km-dw-arrow { color: rgba(0,232,143,.75); font-size: 17px; line-height: 1; }
.km-drawer.km-show .km-acc[open] .km-dw-row { animation: kmRise .4s both; animation-delay: calc(var(--i) * 40ms + 120ms); }
@keyframes kmRise { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.km-dw-cta {
    display: block; margin: 20px 18px 0; text-align: center; padding: 13px;
    border: 1px solid var(--km-green); border-radius: 6px; color: var(--km-green); text-decoration: none;
    font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: .25s;
}
.km-dw-cta:hover { background: var(--km-green); color: #04211B; }


/* ==========================================================================
   11c. SEARCH OVERLAY — live WooCommerce Store API search
   ========================================================================== */

.km-sr {
    position: fixed; inset: 0; z-index: 1004; background: rgba(6,6,6,.97);
    backdrop-filter: blur(20px); display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.km-sr.km-show { opacity: 1; visibility: visible; transform: none; }
.km-sr-form {
    display: flex; align-items: center; gap: 10px; width: 100%; max-width: 760px;
    margin: 0 auto; padding: 20px 18px 16px; box-sizing: border-box;
    border-bottom: 1px solid rgba(0,232,143,.3);
}
.km-sr-glass { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: var(--km-green); stroke-width: 1.7; stroke-linecap: round; }
.km-sr-form input[type="search"] { flex: 1; min-width: 0; background: transparent; border: 0; color: #fff; font-size: 17px; padding: 10px 0; outline: none; }
.km-sr-form input[type="search"]::placeholder { color: #7a7a7a; }
.km-sr-x { background: none; border: 0; color: #fff; font-size: 17px; cursor: pointer; padding: 8px; line-height: 1; }
.km-sr-x:hover { color: var(--km-green); }
.km-sr-body { flex: 1; overflow-y: auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 18px 40px; box-sizing: border-box; }
.km-trend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.km-trend-lbl { color: #777; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; width: 100%; }
.km-chip { background: transparent; border: 1px solid rgba(0,232,143,.35); color: var(--km-white); font-size: 12px; padding: 7px 14px; border-radius: 20px; cursor: pointer; transition: .2s; }
.km-chip:hover { border-color: var(--km-green); color: var(--km-green); }
.km-results { margin-top: 22px; }
.km-res { display: flex; align-items: center; gap: 13px; padding: 10px 0; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.06); animation: kmRise .32s both; }
.km-res-img { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 8px; background: #181818 center/cover no-repeat; border: 1px solid rgba(0,232,143,.22); }
.km-res-info { flex: 1; min-width: 0; }
.km-res-name { color: #f0f0f0; font-size: 13.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.km-res-price { display: block; color: var(--km-green); font-size: 12.5px; font-weight: 700; margin-top: 3px; }
.km-res-price del { color: #6f6f6f; font-weight: 400; margin-left: 6px; }
.km-res-price ins { text-decoration: none; }
.km-sr-msg { color: #8a8a8a; font-size: 13px; padding: 10px 0; }
.km-sr-more {
    display: block; margin-top: 16px; text-align: center; color: var(--km-green); text-decoration: none;
    font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    border: 1px solid rgba(0,232,143,.5); border-radius: 6px; padding: 12px;
}
.km-sr-more:hover { background: var(--km-green); color: #04211B; }
.km-spin { width: 18px; height: 18px; border: 2px solid rgba(0,232,143,.25); border-top-color: var(--km-green); border-radius: 50%; animation: kmSpin .7s linear infinite; margin: 14px auto; }
@keyframes kmSpin { to { transform: rotate(360deg); } }

@media (max-width: 749px) {
    .km-hd-inner { padding: 8px 12px; }
    .km-hd.km-scrolled .km-hd-inner { padding: 4px 12px; }
    .km-logo-text { font-size: 26px; }
    .km-hd.km-scrolled .km-logo-text { font-size: 22px; }
    .km-logo-sub { font-size: 6.5px; letter-spacing: .34em; }
    .km-strip { max-height: 40px; }
    .km-strip-track { padding: 10px 12px; gap: 18px; }
    .km-strip-track a { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .km-hd *, .km-drawer *, .km-sr *, .km-hd, .km-drawer, .km-sr { animation: none !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   12. BUTTONS
   ========================================================================== */

.km-btn {
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    padding: 15px 30px;
    transition: transform .3s var(--km-ease), background .3s var(--km-ease), border-color .3s var(--km-ease);
}
.km-btn:hover { transform: translateY(-2px); }

.km-btn--primary {
    background: var(--km-green);
    color: #04211B;
}
.km-btn--primary:hover { background: var(--km-blue); color: var(--km-white); }

.km-btn--ghost {
    border: 1px solid var(--km-line);
    color: var(--km-white);
}
.km-btn--ghost:hover { border-color: var(--km-green); color: var(--km-green); }


/* ==========================================================================
   20. HERO CAROUSEL — auto-slide, Ken Burns zoom, product preview
   File: template-parts/sections/hero.php | JS: assets/js/main.js
   ========================================================================== */

.km-hero {
    position: relative;
    width: 100%;
    height: clamp(540px, 68vh, 740px);
    overflow: hidden;
    background: #08080a;
    isolation: isolate;
}

.km-hero-h1, .km-hero-live {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.km-hslides { position: absolute; inset: 0; }
.km-hslide {
    position: absolute; inset: 0; display: flex; align-items: flex-end;
    opacity: 0; visibility: hidden;
    transition: opacity .9s var(--km-ease), visibility 0s linear .9s;
}
.km-hslide.is-on {
    opacity: 1; visibility: visible; z-index: 1;
    transition: opacity .9s var(--km-ease), visibility 0s;
}

.km-hmedia { position: absolute; inset: 0; overflow: hidden; }
.km-himg {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transform: scale(1.02);
}
.km-hslide.is-on .km-himg { animation: kmKen calc(var(--km-dur) * 2.4) ease-out forwards; }
.km-hvid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes kmKen { from { transform: scale(1.02); } to { transform: scale(1.14); } }

.km-tone-1 .km-hmedia { background: radial-gradient(115% 92% at 22% 18%, #142f24, #0d1712 46%, #08080a); }
.km-tone-2 .km-hmedia { background: radial-gradient(115% 92% at 78% 20%, #14202f, #0d1217 48%, #08070a); }
.km-tone-3 .km-hmedia { background: radial-gradient(120% 95% at 30% 80%, #142825, #0f1613 50%, #08080a); }

.km-hscrim {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.20) 40%, rgba(0,0,0,0) 70%),
        linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,.10) 46%, rgba(0,0,0,.70) 84%, rgba(0,0,0,.94) 100%);
}

.km-hfoot {
    position: relative; z-index: 3; width: 100%;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: clamp(20px, 4vw, 48px);
    padding: 0 clamp(20px, 5vw, 72px) 60px;
}

.km-hbody { display: flex; flex-direction: column; align-items: flex-start; max-width: 560px; min-width: 0; }
.km-heyebrow { font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--km-green); }
.km-hrule { display: block; height: 1px; width: 0; margin: 12px 0 2px; background: linear-gradient(90deg, var(--km-green), transparent); }
.km-htitle { font-size: clamp(32px, 5.6vw, 62px); line-height: 1.04; margin: 10px 0 20px; text-shadow: 0 2px 28px rgba(0,0,0,.55); }

.km-hcta {
    position: relative; display: inline-flex; align-items: center; gap: 9px; overflow: hidden;
    padding: 14px 26px; border-radius: 2px;
    background: linear-gradient(100deg, var(--km-green), #4dffc0 46%, var(--km-green));
    color: #04211B; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    box-shadow: 0 12px 30px rgba(0,0,0,.34);
    transition: box-shadow .3s ease, transform .18s ease;
}
.km-hcta svg { width: 17px; height: 17px; stroke: #04211B; stroke-width: 2; fill: none; transition: transform .3s ease; }
@media (hover: hover) {
    .km-hcta:hover { box-shadow: 0 16px 38px rgba(0,232,143,.34); }
    .km-hcta:hover svg { transform: translateX(4px); }
}
.km-hcta:active { transform: scale(.985); }

.km-hshop { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.km-hshop-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.km-hshop-row { list-style: none; display: flex; gap: 9px; margin: 0; padding: 0; }
.km-hshop-row a {
    display: block; border-radius: 3px; overflow: hidden;
    border: 1px solid rgba(0,232,143,.34); background: #111;
    box-shadow: 0 8px 20px rgba(0,0,0,.42);
    transition: border-color .25s ease, transform .25s ease;
}
.km-hshop-row img { display: block; width: 56px; height: 56px; object-fit: cover; }
@media (hover: hover) { .km-hshop-row a:hover { border-color: var(--km-green); transform: translateY(-3px); } }

.km-heyebrow, .km-htitle, .km-hcta, .km-hshop { opacity: 0; transform: translateY(20px); }
.km-hslide.is-on .km-heyebrow, .km-hslide.is-on .km-htitle, .km-hslide.is-on .km-hcta, .km-hslide.is-on .km-hshop {
    opacity: 1; transform: none;
    transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
}
.km-hslide.is-on .km-heyebrow { transition-delay: .14s; }
.km-hslide.is-on .km-htitle   { transition-delay: .28s; }
.km-hslide.is-on .km-hcta     { transition-delay: .5s; }
.km-hslide.is-on .km-hshop    { transition-delay: .64s; }
.km-hslide.is-on .km-hrule    { width: 64px; transition: width .9s cubic-bezier(.2,.7,.2,1) .2s; }

.km-harrow {
    position: absolute; top: 44%; transform: translateY(-50%); z-index: 5;
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10,10,10,.34); border: 1px solid rgba(0,232,143,.38);
    backdrop-filter: blur(6px);
    opacity: 0; transition: opacity .3s ease, background .25s ease;
}
.km-harrow svg { width: 19px; height: 19px; stroke: var(--km-green); stroke-width: 1.7; fill: none; }
.km-hprev { left: 20px; }
.km-hnext { right: 20px; }
.km-hero:hover .km-harrow, .km-harrow:focus-visible { opacity: 1; }
@media (hover: hover) {
    .km-harrow:hover { background: var(--km-green); }
    .km-harrow:hover svg { stroke: #04211B; }
}

.km-hbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 0 clamp(20px, 5vw, 72px) 16px; }
.km-hbars { flex: 1 1 auto; display: flex; gap: 5px; min-width: 0; }
.km-hb { flex: 1 1 0; position: relative; height: 3px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.22); cursor: pointer; }
.km-hb i { position: absolute; inset: 0; width: 0; border-radius: 3px; background: var(--km-green); box-shadow: 0 0 8px rgba(0,232,143,.6); }
.km-hero.km-auto .km-hb.is-on i { animation: kmFill var(--km-dur) linear forwards; }
.km-hero.km-paused .km-hb.is-on i { animation-play-state: paused; }
@keyframes kmFill { to { width: 100%; } }

.km-hplay { position: relative; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; }
.km-hplay svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2; fill: none; }
.km-i-play { fill: #fff; stroke: none; }
.km-hero.km-paused .km-i-pause { display: none; }
.km-hero:not(.km-paused) .km-i-play { display: none; }

@media (max-width: 749px) {
    .km-hero { height: 78vh; height: 78svh; min-height: 480px; max-height: 660px; }
    .km-harrow { display: none; }
    .km-hfoot { flex-direction: column; align-items: flex-start; gap: 18px; padding: 0 20px 58px; }
    .km-hbar { padding: 0 20px 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .km-hslide.is-on .km-himg { animation: none; transform: none; }
    .km-heyebrow, .km-htitle, .km-hcta, .km-hshop,
    .km-hslide.is-on .km-heyebrow, .km-hslide.is-on .km-htitle, .km-hslide.is-on .km-hcta, .km-hslide.is-on .km-hshop {
        opacity: 1; transform: none; transition: none;
    }
}


/* ==========================================================================
   30. CATEGORY SHOWCASE — 2 big tiles per gender, Fashion Maania style
   File: template-parts/sections/categories.php
   Uses .km-reveal scroll system (section 04)
   ========================================================================== */

.km-cats { padding: 60px 0; }

.km-cats__block { margin-bottom: 20px; }

.km-cats__head { text-align: center; margin-bottom: 22px; }
.km-cats__title {
    font-size: 20px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--km-green);
    margin: 0;
}
.km-cats__title--her { color: var(--km-teal); }

.km-cats__sub {
    margin: 7px 0 0;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--km-muted);
}

.km-cats__line {
    display: block;
    width: 44px;
    height: 1px;
    margin: 14px auto 0;
    background: linear-gradient(90deg, transparent, var(--km-green), transparent);
}
.km-cats__line--her { background: linear-gradient(90deg, transparent, var(--km-teal), transparent); }

/* Big tiles - side by side */
.km-cats__big {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.km-big-tile {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--km-line);
    background: var(--km-panel);
    transition: border-color .35s var(--km-ease), transform .35s var(--km-ease), box-shadow .35s var(--km-ease);
}
.km-big-tile:hover {
    border-color: var(--km-green);
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(0,0,0,.5);
}
.km-big-tile--her:hover { border-color: var(--km-teal); }
.km-big-tile:active { transform: translateY(-2px) scale(.98); }

.km-big-tile__img {
    position: absolute; inset: 0;
    background-color: var(--km-panel);
    background-size: cover;
    background-position: center;
    transition: transform .65s var(--km-ease);
}
.km-big-tile:hover .km-big-tile__img { transform: scale(1.08); }

.km-big-tile__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(0,0,0,.6) 66%, rgba(0,0,0,.92) 100%);
}

.km-big-tile__body {
    position: absolute;
    left: 14px; bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.km-big-tile__name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--km-white);
}
.km-big-tile__count {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--km-green);
}
.km-big-tile__count--her { color: var(--km-teal); }

/* Divider between Men/Women */
.km-cats__divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 42px 0;
}
.km-cats__divider span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--km-line), transparent);
}
.km-cats__divider i {
    color: var(--km-green);
    font-size: 13px;
    font-style: normal;
}

/* View All button */
.km-cats__all {
    display: block;
    max-width: 200px;
    margin: 24px auto 0;
    text-align: center;
    padding: 10px;
    border: 1px solid var(--km-green);
    border-radius: 6px;
    color: var(--km-green);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background .3s var(--km-ease), color .3s var(--km-ease);
}
.km-cats__all:hover { background: var(--km-green); color: #04211B; }


/* ==========================================================================
   95. RESPONSIVE — categories mobile
   ========================================================================== */

@media (max-width: 860px) {
    .km-cats { padding: 40px 0; }
    .km-cats__title { font-size: 17px; }
    .km-big-tile__name { font-size: 11px; }
    .km-cats__divider { margin: 32px 0; }
}




/* ==========================================================================
   90. SITE FOOTER — link grid, social, trust badges, payments, bottom bar
   File: template-parts/sections/site-footer.php
   ========================================================================== */

.km-footer {
    position: relative;
    padding: 64px 0 0;
    overflow: hidden;
    border-top: 1px solid var(--km-line);
}

/* Ambient glow neeche - premium depth */
.km-foot-glow {
    position: absolute;
    left: 50%;
    bottom: -120px;
    transform: translateX(-50%);
    width: 600px;
    height: 240px;
    background: radial-gradient(closest-side, rgba(0,232,143,0.08), transparent 70%);
    pointer-events: none;
}

.km-foot-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--km-line);
}

.km-foot-brand .km-logo { margin-bottom: 14px; }
.km-foot-about {
    color: var(--km-muted);
    font-size: 13px;
    max-width: 260px;
    margin-bottom: 20px;
}

.km-foot-brand .km-logo { margin-bottom: 14px; }

.km-foot-logo {
    font-size: 26px;
    margin-bottom: 16px;
}
.km-foot-logo .km-logo__k,
.km-foot-logo .km-logo__m {
    font-size: inherit;
}

.km-foot-col h4 {
    font-family: 'Work Sans', sans-serif;
    font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
    margin-bottom: 16px; color: var(--km-muted); font-weight: 600;
}
.km-foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; font-size: 14px; }
.km-foot-col ul a { transition: color .25s var(--km-ease); }
.km-foot-col ul a:hover { color: var(--km-green); }

/* Trust badges */
.km-foot-trust {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 32px 0;
    border-bottom: 1px solid var(--km-line);
}
.km-foot-badge { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; color: var(--km-muted); }
.km-foot-badge svg { width: 20px; height: 20px; color: var(--km-green); flex-shrink: 0; }

/* Payment chips */
.km-foot-payments {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 26px 0;
    border-bottom: 1px solid var(--km-line);
}
.km-foot-payments__lbl {
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--km-muted);
}
.km-foot-payments__icons { display: flex; gap: 8px; flex-wrap: wrap; }
.km-pay-chip {
    border: 1px solid var(--km-line);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    color: var(--km-muted);
    transition: border-color .25s var(--km-ease), color .25s var(--km-ease);
}
.km-pay-chip:hover { border-color: var(--km-green); color: var(--km-green); }

/* Bottom bar */
.km-foot-bottom {
    position: relative;
    z-index: 1;
    padding: 22px 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--km-muted);
    flex-wrap: wrap;
    gap: 10px;
}
.km-foot-legal { display: flex; align-items: center; gap: 10px; }
.km-foot-legal a { transition: color .25s var(--km-ease); }
.km-foot-legal a:hover { color: var(--km-green); }
.km-foot-legal span { color: var(--km-line); }

    


/* ==========================================================================
   95. RESPONSIVE — footer mobile fixes
   ========================================================================== */

@media (max-width: 860px) {
    .km-foot-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    .km-foot-trust { grid-template-columns: repeat(2, 1fr); }
    .km-foot-payments { flex-direction: column; align-items: flex-start; }
    .km-foot-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   95. RESPONSIVE — mobile fixes
   ========================================================================== */

@media (max-width: 860px) {
    .km-wrap { padding: 0 20px; }
    .km-hero__grid { grid-template-columns: 1fr; min-height: auto; padding: 40px 20px; }
    .km-hero__title { font-size: 44px; }
    .km-hero__visual { height: 280px; }
    .km-nav__links { display: none; }
    .km-nav { padding: 16px 20px; }
    .km-foot-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}

/* ==========================================================================
   09. ANNOUNCEMENT BAR — premium scrolling marquee with icons
   File: template-parts/sections/announcement.php
   Edge fade + hover pause + icon accents
   ========================================================================== */

.km-announce {
    position: relative;
    background: var(--km-black);
    border-bottom: 1px solid var(--km-line);
    overflow: hidden;
    padding: 11px 0;
}

/* Left/right edges fade karta hai - scroll "cut" nahi lagta */
.km-announce::before,
.km-announce::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
}
.km-announce::before {
    left: 0;
    background: linear-gradient(90deg, var(--km-black), transparent);
}
.km-announce::after {
    right: 0;
    background: linear-gradient(270deg, var(--km-black), transparent);
}

.km-announce__track {
    display: flex;
    align-items: center;
    gap: 26px;
    white-space: nowrap;
    width: max-content;
    animation: km-marquee 32s linear infinite;
}

/* Mouse le jaane pe scroll ruk jata hai - premium touch */
.km-announce:hover .km-announce__track {
    animation-play-state: paused;
}

.km-announce__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .4px;
    color: var(--km-white);
    text-transform: uppercase;
}
.km-announce__item.is-accent { color: var(--km-green); }

.km-announce__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: .85;
}

.km-announce__dot {
    color: var(--km-muted);
    font-size: 9px;
}

@keyframes km-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .km-announce__track { animation: none; }
}

@media (max-width: 600px) {
    .km-announce__item { font-size: 11px; }
    .km-announce__icon { width: 12px; height: 12px; }
}


/* ==========================================================================
   60. MOBILE BOTTOM NAV + CATEGORY PANEL
   File: template-parts/sections/mobile-nav.php | JS: assets/js/main.js
   Left: category names | Right: brand image grid
   Desktop par poori tarah hidden
   ========================================================================== */

.km-mn-wrap { display: none; }

@media (max-width: 900px) {

    .km-mn-wrap { display: block; }

    body { padding-bottom: 64px; }

    /* ---------- Bottom bar ---------- */
    .km-mn {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 940;
        display: flex;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: rgba(10,10,10,.94);
        backdrop-filter: blur(14px) saturate(140%);
        border-top: 1px solid var(--km-line);
        box-shadow: 0 -10px 26px rgba(0,0,0,.45);
        transition: transform .28s var(--km-ease);
    }
    .km-mn::before {
        content: "";
        position: absolute; top: -1px; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0,232,143,.55), transparent);
    }
    .km-mn.is-hidden { transform: translateY(115%); }

    .km-mn__item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 9px 2px 8px;
        border: 0;
        background: none;
        color: rgba(255,255,255,.62);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color .2s var(--km-ease), transform .12s ease;
    }
    .km-mn__item:active { transform: scale(.92); }
    .km-mn__item.is-on { color: var(--km-green); }

    .km-mn__ic { position: relative; display: block; width: 23px; height: 23px; }
    .km-mn__ic svg { width: 100%; height: 100%; display: block; }

    .km-mn__label {
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        line-height: 1;
    }

    .km-mn__badge {
        position: absolute;
        top: -5px; right: -8px;
        min-width: 16px; height: 16px;
        padding: 0 4px;
        border-radius: 9px;
        background: var(--km-green);
        color: #04211B;
        font-size: 10px;
        font-weight: 800;
        line-height: 16px;
        text-align: center;
        box-shadow: 0 0 0 2px rgba(10,10,10,.94);
    }
    .km-mn__badge[hidden] { display: none; }
    .km-mn__badge.is-pop { animation: kmMnPop .35s ease; }
    @keyframes kmMnPop {
        0%   { transform: scale(.5); }
        60%  { transform: scale(1.25); }
        100% { transform: scale(1); }
    }

    /* ---------- Scrim ---------- */
    .km-mn-scrim {
        position: fixed; inset: 0;
        z-index: 1001;
        background: rgba(0,0,0,.66);
        backdrop-filter: blur(2px);
        opacity: 0;
        transition: opacity .25s var(--km-ease);
    }
    .km-mn-scrim[hidden] { display: none; }
    .km-mn-scrim.is-open { opacity: 1; }

    /* ---------- Category panel ---------- */
    .km-mn-panel {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1002;
        height: 82vh;
        display: flex;
        flex-direction: column;
        background: var(--km-dark);
        border-top: 1px solid rgba(0,232,143,.3);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -18px 44px rgba(0,0,0,.6);
        transform: translateY(100%);
        transition: transform .32s cubic-bezier(.32,.72,0,1);
        overflow: hidden;
    }
    .km-mn-panel[hidden] { display: none; }
    .km-mn-panel.is-open { transform: none; }

    .km-mn-panel__head {
        position: relative;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 16px 14px;
        border-bottom: 1px solid var(--km-line);
    }
    .km-mn-panel__grip {
        position: absolute;
        top: 7px; left: 50%;
        transform: translateX(-50%);
        width: 40px; height: 4px;
        border-radius: 3px;
        background: rgba(255,255,255,.22);
    }
    .km-mn-panel__title {
        font-size: 15px;
        letter-spacing: 1px;
        color: var(--km-white);
        margin: 0;
    }
    .km-mn-panel__close {
        width: 32px; height: 32px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .km-mn-panel__close svg { width: 16px; height: 16px; }

    .km-mn-panel__body {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
    }

    /* ---------- Left rail: text only ---------- */
    .km-mn-rail {
        flex: 0 0 128px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--km-black);
        border-right: 1px solid var(--km-line);
        scrollbar-width: none;
        padding: 6px 0;
    }
    .km-mn-rail::-webkit-scrollbar { display: none; }

    .km-mn-rail__item {
        position: relative;
        width: 100%;
        display: block;
        text-align: left;
        padding: 15px 14px;
        border: 0;
        background: none;
        color: rgba(255,255,255,.6);
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: .02em;
        line-height: 1.3;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: background .25s var(--km-ease), color .25s var(--km-ease);
    }
    .km-mn-rail__item::before {
        content: "";
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 3px;
        background: var(--km-green);
        transform: scaleY(0);
        transition: transform .3s var(--km-ease);
    }
    .km-mn-rail__item.is-on {
        background: var(--km-dark);
        color: var(--km-white);
        font-weight: 700;
    }
    .km-mn-rail__item.is-on::before { transform: scaleY(1); }
    .km-mn-rail__item:active { background: rgba(255,255,255,.05); }

    /* ---------- Right panes ---------- */
    .km-mn-panes {
        flex: 1 1 auto;
        min-width: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px 14px calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .km-mn-pane { animation: kmMnFade .35s var(--km-ease) both; }
    @keyframes kmMnFade {
        from { opacity: 0; transform: translateX(10px); }
        to   { opacity: 1; transform: none; }
    }

    .km-mn-pane__label {
        display: block;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--km-muted);
        margin-bottom: 14px;
    }

    .km-mn-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 12px;
    }

    .km-mn-card { display: block; }

    .km-mn-card__media {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 3/4;
        border-radius: 10px;
        overflow: hidden;
        background: var(--km-panel) center/cover no-repeat;
        border: 1px solid var(--km-line);
        transition: border-color .28s var(--km-ease), transform .28s var(--km-ease);
    }
    .km-mn-card:active .km-mn-card__media {
        transform: scale(.96);
        border-color: var(--km-green);
    }

    .km-mn-card__media--all {
        background: linear-gradient(150deg, rgba(0,232,143,.14), var(--km-panel) 65%);
        border-color: rgba(0,232,143,.35);
        color: var(--km-green);
    }
    .km-mn-card__media--all svg { width: 30px; height: 30px; }

    .km-mn-card__initial {
        font-family: 'Anton', sans-serif;
        font-size: 34px;
        color: rgba(255,255,255,.22);
    }

    .km-mn-card__name {
        display: block;
        margin-top: 8px;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: var(--km-white);
        letter-spacing: .02em;
        line-height: 1.3;
    }

    body.km-mn-lock { overflow: hidden; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .km-mn, .km-mn-panel, .km-mn-scrim, .km-mn-pane, .km-mn__item { transition: none; animation: none; }
}



/* ==========================================================================
   35. FEATURED BRANDS — underline tabs + product rail (image swap cards)
   File: template-parts/sections/featured-brands.php | JS: assets/js/main.js
   ========================================================================== */

.km-fb {
    --km-fb-pad: clamp(16px, 4vw, 40px);
    padding: 50px 0;
}

.km-fb__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}
.km-fb__icon { width: 20px; height: 20px; color: var(--km-green); flex-shrink: 0; }
.km-fb__title { font-size: 20px; margin: 0; letter-spacing: .5px; }

.km-fb__tabs {
    display: flex;
    overflow-x: auto;
    border-bottom: 1px solid var(--km-line);
    margin-bottom: 26px;
    scrollbar-width: none;
}
.km-fb__tabs::-webkit-scrollbar { display: none; }

.km-fb__tab {
    position: relative;
    flex: none;
    padding: 12px 18px;
    border: 0;
    background: transparent;
    color: var(--km-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .3s var(--km-ease);
}
.km-fb__tab::after {
    content: "";
    position: absolute;
    left: 18px; right: 18px; bottom: -1px;
    height: 2px;
    background: var(--km-green);
    transform: scaleX(0);
    transition: transform .3s var(--km-ease);
}
.km-fb__tab:hover,
.km-fb__tab.is-on { color: var(--km-white); }
.km-fb__tab.is-on::after { transform: scaleX(1); }

.km-fb__pane { display: none; }
.km-fb__pane.is-on {
    display: block;
    animation: kmFbFade .4s var(--km-ease) both;
}
@keyframes kmFbFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* Rail wrapper (arrows ke liye) */
.km-fb__wrap { position: relative; }

.km-fb__rail {
    list-style: none;
    display: flex;
    gap: clamp(10px, 1.4vw, 18px);
    margin: 0;
    padding: 0 0 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    min-width: 0;
}
.km-fb__rail::-webkit-scrollbar { display: none; }

.km-fb-card {
    flex: 0 0 auto;
    width: 46vw;
    max-width: 230px;
    margin: 0;
    scroll-snap-align: start;
}
.km-fb-card__link { display: block; color: var(--km-white); }

/* Image with hover swap */
.km-fb-card__img {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 6px;
    background: var(--km-panel);
    border: 1px solid var(--km-line);
    aspect-ratio: 1;
}
.km-fb-card__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.km-fb-i2 { opacity: 0; }
.km-fb-noimg {
    position: absolute;
    inset: 0;
    display: block;
    background: radial-gradient(120% 100% at 50% 20%, #1e2624, #141416 60%, #0d0d0f);
}

@media (hover: hover) {
    .km-fb-card__link:hover .km-fb-i1 { transform: scale(1.06); }
    .km-fb-card__img.has-2:hover .km-fb-i1 { opacity: 0; }
    .km-fb-card__img.has-2:hover .km-fb-i2 { opacity: 1; transform: scale(1.06); }
    .km-fb-card__link:hover .km-fb-card__img { border-color: rgba(23,162,162,.45); }
}

.km-fb-card__badge {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 3px;
    background: var(--km-green);
    color: #04211B;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
}

.km-fb-card__name {
    margin: 10px 0 4px;
    font-size: 13px;
    line-height: 1.4;
    color: #e9e7e2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.8em;
}
.km-fb-card__price {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--km-white);
}
.km-fb-card__price del {
    color: rgba(255,255,255,.4);
    font-weight: 400;
    margin-left: 6px;
    font-size: 12px;
}
.km-fb-card__price ins {
    text-decoration: none;
    color: var(--km-green);
}

/* Arrows - desktop only */
.km-fb__arw {
    position: absolute;
    top: calc(50% - 26px);
    transform: translateY(-50%);
    z-index: 3;
    width: 38px; height: 38px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(14,14,16,.86);
    border: 1px solid rgba(23,162,162,.45);
    backdrop-filter: blur(6px);
    transition: background .25s ease, border-color .25s ease, opacity .25s ease;
}
.km-fb__arw svg { width: 17px; height: 17px; color: var(--km-green); }
.km-fb__arw[hidden] { display: none !important; }
.km-fb__arw:disabled { opacity: .28; cursor: default; }
.km-fb__prev { left: -6px; }
.km-fb__next { right: -6px; }

@media (hover: hover) and (min-width: 900px) {
    .km-fb__arw { display: flex; opacity: 0; }
    .km-fb__wrap:hover .km-fb__arw,
    .km-fb__arw:focus-visible { opacity: 1; }
    .km-fb__arw:hover:not(:disabled) { background: var(--km-green); border-color: var(--km-green); }
    .km-fb__arw:hover:not(:disabled) svg { color: #04211B; }
}

/* Card sizing per breakpoint */
@media (min-width: 600px)  { .km-fb-card { width: 30vw; } }
@media (min-width: 900px)  { .km-fb-card { width: 22vw; } }
@media (min-width: 1200px) { .km-fb-card { width: 230px; } }

@media (max-width: 640px) {
    .km-fb { padding: 36px 0; }
    .km-fb__title { font-size: 17px; }
    .km-fb__tab { padding: 11px 14px; font-size: 12px; }
    .km-fb__tab::after { left: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .km-fb__rail { scroll-behavior: auto; }
    .km-fb-card__img img { transition: none; }
}



/* ==========================================================================
   99. OVERFLOW SAFETY — sirf scroll rails aur containers ke liye
   NOTE: html/body par overflow-x hidden nahi lagana — isse position:sticky
   header (.km-hd) toot jata hai. Iski jagah wrapper-level fix use kar rahe hain.
   ========================================================================== */

.km-wrap {
    overflow: hidden;
}

.km-fb__panes,
.km-fb__pane,
.km-fb__rail,
.km-cats__row,
.km-strip-track {
    min-width: 0;
}





/* ==========================================================================
   03c. HOMEPAGE SECTION STACK FIX — sections ek ke neeche ek
   ========================================================================== */

.home .site-content,
.home .content-area,
.home .site-main,
.home .entry-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.km-hero,
.km-cats,
.km-fb {
    display: block;
    width: 100%;
    clear: both;
}


/* ==========================================================================
   49. SHOP TOOLBAR — category tabs, heading, search+filter, chips, count
   ========================================================================== */

.km-shopcat-tabs {
    background: var(--km-black);
    border-bottom: 1px solid var(--km-line);
    margin: 0 calc(-1 * clamp(20px, 5vw, 72px)) 0;
}
.km-shopcat-tabs__track {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    padding: 16px clamp(20px, 5vw, 72px);
    scrollbar-width: none;
}
.km-shopcat-tabs__track::-webkit-scrollbar { display: none; }
.km-shopcat-tabs__track a {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--km-muted);
    white-space: nowrap;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color .25s var(--km-ease), border-color .25s var(--km-ease);
}
.km-shopcat-tabs__track a:hover,
.km-shopcat-tabs__track a.is-on {
    color: var(--km-green);
    border-color: var(--km-green);
}



.km-shop-heading {
    text-align: center;
    padding: 0px 0 24px;
}
.km-shop-heading__brand {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--km-green);
    font-weight: 700;
    margin-bottom: 8px;
}
.km-shop-heading__title {
    font-size: 36px;
    margin: 0;
}
.km-shop-heading__sub {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--km-muted);
}
.km-shop-heading__trust {
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--km-teal);
}

.km-shop-heading__badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}
.km-shop-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 95px;
    height: 45px;
    border: 1px solid var(--km-line);
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--km-white);
    text-align: center;
    transition: border-color .25s var(--km-ease);
}
.km-shop-badge:hover { border-color: var(--km-green); }
.km-shop-badge svg {
    width: 10px;
    height: 10px;
    color: var(--km-green);
    flex-shrink: 0;
}


.km-shop-badge span {
    line-height: 1.2;
}



.km-shop-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    padding: 0 0 20px;
    margin-bottom: 0;
}


.km-shop-search {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    max-width: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--km-panel);
    border: 1px solid var(--km-line);
    border-radius: 12px;
    padding: 0 16px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    flex-shrink: 1;
    overflow: visible;
}



.km-shop-search svg { width: 17px; height: 17px; color: var(--km-muted); flex-shrink: 0; }


.km-shop-search input {
    flex: 1;
    min-width: 0;
    width: 100%;
    background: transparent !important;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    color: var(--km-white) !important;
    font-size: 13px;
    outline: none;
    box-shadow: none;
}

.km-shop-search input:focus,
.km-shop-search input:active,
.km-shop-search input:-webkit-autofill {
    background: transparent !important;
    -webkit-box-shadow: 0 0 0 1000px var(--km-panel) inset !important;
    -webkit-text-fill-color: var(--km-white) !important;
    color: var(--km-white) !important;
}

.km-shop-search input::-webkit-search-decoration,
.km-shop-search input::-webkit-search-cancel-button,
.km-shop-search input::-webkit-search-results-button,
.km-shop-search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}




.km-shop-search input::placeholder { color: var(--km-muted); }

.km-shop-search__clear {
    background: none;
    border: none;
    color: var(--km-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.km-shop-search__clear svg { width: 15px; height: 15px; }
.km-shop-search__clear[hidden] { display: none; }

.km-shop-search__results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--km-panel);
    border: 1px solid var(--km-line);
    border-radius: 12px;
    max-height: 360px;
    overflow-y: auto;
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
    display: none;
}
.km-shop-search__results:not([hidden]) {
    display: block;
}

.km-shop-sr-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--km-line);
    color: var(--km-white);
}
.km-shop-sr-item:last-child { border-bottom: none; }
.km-shop-sr-item:hover { background: rgba(255,255,255,.03); }
.km-shop-sr-img {
    width: 44px; height: 44px;
    border-radius: 6px;
    background: var(--km-dark) center/cover no-repeat;
    flex-shrink: 0;
}
.km-shop-sr-info { flex: 1; min-width: 0; }
.km-shop-sr-name {
    font-size: 12.5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.km-shop-sr-price {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--km-green);
    margin-top: 2px;
}
.km-shop-sr-msg {
    padding: 16px;
    text-align: center;
    color: var(--km-muted);
    font-size: 12.5px;
}
.km-shop-sr-more {
    display: block;
    padding: 12px;
    text-align: center;
    color: var(--km-green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    border-top: 1px solid var(--km-line);
}
.km-shop-sr-more:hover { background: rgba(23,162,162,.08); }

.km-shop-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--km-panel);
    border: 1px solid var(--km-line);
    border-radius: 100px;
    color: var(--km-white);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .25s var(--km-ease);
}


.km-shop-filter-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--km-panel);
    border: 1px solid var(--km-line);
    border-radius: 12px;
    color: var(--km-white);
    cursor: pointer;
    transition: border-color .25s var(--km-ease), color .25s var(--km-ease);
}
.km-shop-filter-ico svg { width: 19px; height: 19px; }
.km-shop-filter-ico:hover {
    border-color: var(--km-green);
    color: var(--km-green);
}


.km-shop-pill svg { width: 15px; height: 15px; }
.km-shop-pill:hover { border-color: var(--km-green); }

.woocommerce-ordering {
    order: 3;
}
.woocommerce-ordering select {
    background: var(--km-panel) !important;
    border: 1px solid var(--km-line) !important;
    color: var(--km-white) !important;
    padding: 12px 20px !important;
    border-radius: 100px !important;
    font-size: 13px !important;
}

.km-shop-chips {
    display: flex;
    gap: 10px;
    margin: 18px 0;
}
.km-shop-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 100px;
    background: var(--km-green);
    color: #04211B;
    font-size: 13px;
    font-weight: 700;
}
.km-shop-chip b {
    background: rgba(4,33,27,.25);
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 11px;
}

.km-shop-countline {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--km-muted);
    margin-bottom: 20px;
}


/* ==========================================================================
   95d. RESPONSIVE — shop toolbar mobile
   ========================================================================== */
@media (max-width: 640px) {
    .km-shop-toolbar {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
    }
    .km-shop-search {
        flex: 1 1 auto;
        min-width: 0;
        height: 48px;
        min-height: 48px;
        max-height: 48px;
    }
    .woocommerce-ordering { width: 100%; }
    .woocommerce-ordering select { width: 100%; }
}
  



/* ==========================================================================
   50. SHOP / PRODUCT ARCHIVE — dark theme, cards matching homepage style
   File: woocommerce/content-product.php
   ========================================================================== */

.woocommerce-page #primary,
.woocommerce #primary {
    padding-left: 5px !important;
    padding-right: 5px !important;
}


.woocommerce-page .inside-article,
.woocommerce .inside-article,
.woocommerce-page .entry-content,
.woocommerce .entry-content {
    padding-left: 5px !important;
    padding-right: 5px !important;
}




.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after{
    content: none !important;
    display: none !important;
}


body.woocommerce-page #primary,
body.woocommerce #primary,
.woocommerce-page #primary,
.woocommerce #primary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

body.woocommerce-page,
body.woocommerce-page .site,
body.woocommerce-page #page,
body.woocommerce-page #content,
body.woocommerce-page .content-area {
    background: var(--km-dark) !important;
}

.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    list-style: none !important;
    margin: 0 0 40px !important;
    padding: 0 !important;
    align-items: start !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: none !important;
}

.km-shop-count {
    font-size: 13px;
    color: var(--km-muted);
    letter-spacing: .3px;
}

.woocommerce-ordering {
    margin: 0 !important;
}
.woocommerce-ordering select {
    background: var(--km-panel);
    border: 1px solid var(--km-line);
    color: var(--km-white);
    padding: 8px 14px;
    border-radius: var(--km-radius);
    font-size: 13px;
    font-family: 'Work Sans', sans-serif;
}

/* ---------- Card ---------- */


.km-shop-card {
    position: relative;
    min-width: 0;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    overflow: hidden;
}


.km-shop-card__link { display: block; }


.km-shop-card__img {
    position: relative;
    display: block;
    aspect-ratio: 4/5;
    overflow: hidden;
    border-radius: 8px;
    background: var(--km-panel);
    border: 1px solid var(--km-line);
    transition: border-color .3s var(--km-ease);
}



.km-shop-card__link:hover .km-shop-card__img { border-color: var(--km-green); }



.km-shop-card__img img {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
    transition: transform .6s var(--km-ease), opacity .4s ease;
}

km-shop-i2 { opacity: 0;}
@media (hover: hover) {
    .km-shop-card__link:hover .km-shop-i1 { transform: scale(1.06); }
    .km-shop-card__img.has-2:hover .km-shop-i1 { opacity: 0; }
    .km-shop-card__img.has-2:hover .km-shop-i2 { opacity: 1; transform: scale(1.06); }
}
.km-shop-noimg {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 100% at 50% 20%, #1e2624, #141416 60%, #0d0d0f);
}

.km-shop-card__oos {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 2;
    padding: 4px 9px;
    border-radius: 4px;
    background: rgba(0,0,0,.7);
    color: var(--km-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
}

/* Heart button - upper right, over the card */

.km-shop-card__heart {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 3;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.6);
    border: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--km-white);
    line-height: 0;
    transition: background .25s var(--km-ease), color .25s var(--km-ease);
}
.km-shop-card__heart svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: none;
    stroke: currentColor;
}




.km-shop-card__heart:hover {
    color: var(--km-green);
    transform: scale(1.1);
}


.km-shop-card__heart.is-active {
    color: var(--km-green);
}
.km-shop-card__heart.is-active svg {
    fill: var(--km-green);
    stroke: var(--km-green);
}


/* Heart click pop animation */
.km-shop-card__heart.is-popping svg {
    animation: kmHeartPop .4s ease;
}
@keyframes kmHeartPop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.4); }
    60%  { transform: scale(0.85); }
    100% { transform: scale(1); }
}

/* Toast notification */
.km-toast {
    position: fixed;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%) translateY(20px);
    z-index: 9999;
    background: var(--km-panel);
    border: 1px solid var(--km-green);
    color: var(--km-white);
    padding: 12px 22px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.km-toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.km-toast svg {
    width: 16px; height: 16px;
    color: var(--km-green);
    flex-shrink: 0;
}





.km-shop-card__info {
    display: block;
    margin-top: 12px;
}


.km-shop-card__name {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 13.5px;
    color: var(--km-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
    box-sizing: border-box;
}



.km-shop-card__price {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--km-white);
}
.km-shop-card__price del {
    display: inline-block;
    color: var(--km-muted);
    font-weight: 400;
    margin-left: 8px;
    font-size: 13px;
    text-decoration: line-through;
}
.km-shop-card__price ins {
    text-decoration: none;
    color: var(--km-green);
}
.km-shop-card__price *::before,
.km-shop-card__price *::after {
    content: none !important;
}

.km-shop-card__add {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: transparent;
    border: 1px solid var(--km-green);
    border-radius: var(--km-radius);
    color: var(--km-green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: background .25s var(--km-ease), color .25s var(--km-ease);
}



.km-shop-card__add:hover {
    background: var(--km-green);
    color: #04211B;
}
.km-shop-card__add.is-added { background: var(--km-teal); border-color: var(--km-teal); color: #fff; }

/* ---------- Pagination ---------- */
.woocommerce-pagination {
    margin-top: 20px;
}
.woocommerce-pagination ul.page-numbers {
    display: flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    justify-content: center;
}
.woocommerce-pagination .page-numbers li { margin: 0; }
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--km-line);
    border-radius: var(--km-radius);
    color: var(--km-white);
    font-size: 13px;
    transition: border-color .25s var(--km-ease), color .25s var(--km-ease);
}
.woocommerce-pagination .page-numbers a:hover,
.woocommerce-pagination .page-numbers .current {
    border-color: var(--km-green);
    color: var(--km-green);
}

/* ---------- WooCommerce default elements - clean up ---------- */
.woocommerce-breadcrumb {
    color: var(--km-muted);
    font-size: 12px;
    margin: 20px 0;
}
.woocommerce-breadcrumb a { color: var(--km-muted); transition: color .2s ease; }
.woocommerce-breadcrumb a:hover { color: var(--km-green); }

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
    background: var(--km-panel);
    border: 1px solid var(--km-line);
    color: var(--km-white);
    border-radius: var(--km-radius);
    padding: 14px 18px;
    list-style: none;
}
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before { color: var(--km-green); }

.woocommerce-result-count {
    color: var(--km-muted);
    font-size: 13px;
}


/* ==========================================================================
   95c. RESPONSIVE — shop grid mobile
   ========================================================================== */

@media (max-width: 900px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
    .km-shop-card__name { font-size: 12px; }
    .km-shop-card__price { font-size: 15px; }
}

/* ==========================================================================
   55. WISHLIST PAGE — saved products grid
   File: page-wishlist.php | JS: assets/js/main.js
   ========================================================================== */

.km-wish { padding: 30px 0 60px; }

.km-wish-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.km-wish-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--km-muted);
}
.km-wish-empty p { margin-bottom: 20px; font-size: 15px; }
.km-wish-loading {
    text-align: center;
    padding: 40px;
    color: var(--km-muted);
    font-size: 13px;
}

@media (max-width: 900px) {
    .km-wish-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}






/* ==========================================================================
   70. SINGLE PRODUCT PAGE — WhatsApp button, trust badges, size chart
   File: functions.php se render hota hai, yahan sirf styling
   ========================================================================== */

.km-pp-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 14px;
    padding: 15px;
    background: #25D366;
    color: #04211B;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    border-radius: var(--km-radius);
    transition: background .25s var(--km-ease), transform .2s var(--km-ease);
}
.km-pp-whatsapp svg {
    width: 19px; height: 19px;
    fill: #04211B; stroke: none;
}
.km-pp-whatsapp:hover {
    background: #1ebe5a;
    transform: translateY(-2px);
}

.km-pp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.km-pp-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid var(--km-line);
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--km-white);
}
.km-pp-badge svg {
    width: 14px; height: 14px;
    color: var(--km-green);
    flex-shrink: 0;
}

.km-size-chart__note {
    color: var(--km-muted);
    font-size: 13px;
    margin-bottom: 16px;
}
.km-size-chart__table {
    width: 100%;
    border-collapse: collapse;
}
.km-size-chart__table th,
.km-size-chart__table td {
    padding: 10px 14px;
    border: 1px solid var(--km-line);
    text-align: center;
    font-size: 13px;
    color: var(--km-white);
}
.km-size-chart__table th {
    background: var(--km-panel);
    color: var(--km-green);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .5px;
}