/* ═══════════════════════════════════════════════════════════
   DESKTOP / LAPTOP EXPERIENCE  (min-width: 861px)
   Mobile ko chhua nahi gaya — yahan sab kuch desktop-only hai.
   Container: 1200px (1536px+ par 1320px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 861px) {
  :root{ --kx: 1200px; --kx-pad: 32px; }

  /* ── 1) Ek hi container system (har page ek seedh mein) ── */
  .kd, .pp-wrap, .ck-wrap, .kf-in, .kf-bot, .pro-wrap, .acc-wrap,
  .container, .page-wrap, .mx-hi, .kh-in{
    max-width: var(--kx) !important; margin-left:auto !important; margin-right:auto !important;
    padding-left: var(--kx-pad) !important; padding-right: var(--kx-pad) !important; box-sizing:border-box;
  }
  .kd-sec{ margin-top: 56px; }

  /* ── 2) Header: saaf nav + WhatsApp CTA ── */
  .kh-in{ height:auto; min-height:64px; gap:28px }
  .kh-limg{ height:58px !important }
  .kh-mark{ width:52px !important; height:52px !important; border-radius:15px !important }
  .kh-mark svg{ width:28px !important; height:28px !important }
  .kh-name small{ font-size:11px !important; letter-spacing:.22em }
  .kh-name b{ font-size:25px !important }
  .kh-nav a{ font-size:14.5px; padding:9px 14px }
  .kh-nav a:hover{ transform:translateY(-1px) }
  .kh-wa{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:10px;
          background:#1F9D55; color:#fff !important; font:700 14px 'Plus Jakarta Sans',system-ui,sans-serif;
          text-decoration:none; transition:background .15s, transform .15s }
  .kh-wa:hover{ background:#17804A; transform:translateY(-1px) }
  .kh-wa svg{ width:18px; height:18px }
  .kh-cart{ height:42px }

  /* ── 3) Home hero: do column (value proposition + image) ── */
  .kd-hero{ aspect-ratio:auto !important; min-height:430px; display:grid !important; grid-template-columns:1.02fr 1fr; align-items:center;
            gap:0; background:linear-gradient(135deg,#8E1A2E 0%,#6F1222 100%) !important; overflow:hidden }
  .kd-hero img{ position:relative !important; inset:auto !important; width:100% !important; height:100% !important; min-height:430px; border-radius:0 }
  .kx-hero-cta .kd-btn{ position:relative !important; left:auto !important; bottom:auto !important; box-shadow:none }
  .kh-slide .kd-btn{ position:absolute !important; left:26px !important; bottom:24px !important; z-index:2 }
  .kd-hero .kd-sr{ position:absolute }
  .kx-hero-copy{ display:flex !important; flex-direction:column; align-items:flex-start; gap:14px; padding:46px 44px; color:#fff }
  .kx-hero-copy .eyebrow{ display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(242,211,138,.55);
      color:#F2D38A; border-radius:30px; padding:6px 14px; font-size:12.5px; font-weight:700 }
  .kx-hero-copy h1{ margin:0; font-size:clamp(34px,3.1vw,46px); line-height:1.1; letter-spacing:-.03em; font-weight:800 }
  .kx-hero-copy h1 span{ color:#F2D38A; display:block }
  .kx-hero-copy p{ margin:0; font-size:16px; line-height:1.65; color:rgba(255,255,255,.86); max-width:46ch }
  .kx-hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px }
  .kx-hero-cta .kd-btn{ height:52px; padding:0 26px; font-size:15.5px; display:inline-flex }
  .kx-hero-cta .kx-wa{ display:inline-flex; align-items:center; gap:9px; height:52px; padding:0 22px; border-radius:30px;
      background:#1F9D55; color:#fff !important; font:800 15px 'Plus Jakarta Sans',sans-serif; text-decoration:none }
  .kx-hero-cta .kx-wa:hover{ background:#17804A }
  .kx-hero-cta .kx-wa svg{ width:19px; height:19px }
  .kx-hero-trust{ display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; font-size:13px; color:rgba(255,255,255,.8) }
  .kx-hero-trust span{ display:inline-flex; align-items:center; gap:6px }

  /* ── 4) Categories: bade, click karne layak ── */
  .kd-cc-row{ gap:22px; margin-top:26px }
  .kd-cc{ width:104px }
  .cc-ic{ width:88px; height:88px; font-size:38px; transition:transform .18s, box-shadow .18s }
  .kd-cc:hover .cc-ic{ transform:translateY(-4px); box-shadow:0 0 0 2px #fff,0 0 0 3.5px #C49A45,0 12px 24px rgba(40,24,12,.16) }
  .kd-cc b{ font-size:13.5px }

  /* ── 5) Product grid + cards (discovery) ── */
  .kd-grid{ grid-template-columns:repeat(4,1fr); gap:20px }
  .kd-card{ border-radius:14px; padding:10px 10px 14px; transition:transform .18s, box-shadow .18s }
  .kd-card:hover{ transform:translateY(-4px); box-shadow:0 8px 28px rgba(40,24,12,.12) }
  .kd-card:hover .kd-img img{ transform:scale(1.04) }
  .kd-img img{ transition:transform .4s }
  .kd-card h3{ font-size:16px }
  .kd-card .d{ font-size:13px }
  .kd-price{ font-size:19px }
  .kd-add{ width:40px; height:40px; border-radius:10px }
  .kd-add svg{ width:19px; height:19px }
  .kd-add:hover{ background:#6F1222 }
  .kd-hh{ margin-bottom:22px }
  .kd-h{ font-size:27px }

  /* ── 6) products.php: grid + sidebar ek container mein ── */
  .pro-grid{ grid-template-columns:repeat(4,1fr) !important; gap:20px !important }

  /* ── 7) Trust strip / how-to / FAQ ── */
  .kd-trust{ gap:16px }
  .kd-tr{ padding:18px 10px 16px }
  .kd-tr i{ width:62px; height:62px }
  .kd-tr i svg{ width:40px; height:40px }
  .kd-tr b{ font-size:14px }
  .kd-faq summary{ font-size:15.5px; padding:17px 20px }
  .kd-faq details p{ font-size:14.5px; padding:0 20px 18px }

  /* ── 8) Reviews ── */
  .kd-rc{ padding:24px 24px 20px }
  .kd-rc blockquote{ font-size:15.5px }

  /* ── 9) Bulk / quote section ── */
  .kd-bulk2{ display:grid !important; grid-template-columns:1.15fr auto; align-items:center; gap:32px; padding:34px 38px !important }
  .kd-bulk2 .kb-top{ grid-column:1 }
  .kd-bulk2 .kb-perks{ grid-column:1; margin:14px 0 0 }
  .kd-bulk2 .kb-cta{ grid-column:2; grid-row:1 / span 2; width:auto !important; padding:0 30px; height:58px; font-size:16px !important }
  .kd-bulk2 .kb-note{ grid-column:1 / -1; text-align:left; margin-top:12px }
  .kd-bulk2 h2{ font-size:26px !important }

  /* ── 10) Footer ── */
  .kf-in{ padding-top:54px !important; padding-bottom:26px !important; gap:44px }
  .kf h4{ font-size:13.5px }
  .kf a:focus-visible, .kh-nav a:focus-visible, .kd-btn:focus-visible{ outline:2px solid #C49A45; outline-offset:3px }
}

/* Laptop (1024–1279) thora compact */
@media (min-width:861px) and (max-width:1279px){
  :root{ --kx: 1040px; --kx-pad: 26px }
  .kd-hero{ min-height:390px } .kd-hero img{ min-height:390px }
  .kx-hero-copy{ padding:34px 32px } .kx-hero-copy h1{ font-size:32px }
  .kd-grid{ gap:16px }
}
/* Bade screens: zyada khaali jagah na lage */
@media (min-width:1536px){ :root{ --kx: 1320px; --kx-pad: 40px } .kd-grid{ gap:24px } }
@media (min-width:1920px){ :root{ --kx: 1400px } }

/* ── 11) products.php: filter sidebar + grid ── */
@media (min-width:861px){
  .pro-layout,.pro-main{ box-sizing:border-box }
  .pro-side{ position:sticky; top:104px; align-self:start }
  .pro-side .side-box{ border-radius:14px }
  .pro-head h1{ font-size:30px; letter-spacing:-.02em }
  .pro-search input,.search-input{ height:48px; font-size:15px; border-radius:12px }

  /* ── 12) Checkout: do column, summary sticky ── */
  .ck-grid{ display:grid !important; grid-template-columns: minmax(0,1.5fr) minmax(340px,.85fr) !important; gap:26px !important; align-items:start }
  .ck-grid > div:last-child{ position:sticky; top:104px; order:0 !important }
  .ck-head h1{ font-size:30px }
  .ck-card-bd{ padding:20px !important }
  .fg2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
  .place-btn{ height:54px; font-size:16px }
  .sum-card{ box-shadow:0 8px 28px rgba(40,24,12,.10) !important }

  /* ── 13) Account ── */
  .acc-layout,.acc-wrap{ box-sizing:border-box }
  .acc-sidebar{ position:sticky; top:104px }
  .oc{ border-radius:16px }

  /* ── 14) Product page: 2-column + sticky buy box ── */
  .pp-top{ align-items:start }
  .info-col{ position:sticky; top:104px }
  .p-title{ font-size:28px !important; line-height:1.25 }
  .p-price{ font-size:30px !important }
  .btn-cart-main,.btn-buy-main{ height:52px !important; font-size:15.5px !important }
  .px-b,.px-x{ transition:transform .15s }
  .px-b:hover,.px-x:hover{ transform:translateY(-2px) }
  .rev-card{ border-radius:14px }

  /* ── 15) Focus states (accessibility) ── */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid #C49A45; outline-offset:2px; border-radius:6px }
}

/* ── Banner slides (desktop: hero ka right column) ── */
@media (min-width:861px){
  .kh-slides{ position:relative !important; inset:auto !important; height:100%; min-height:430px }
  .kh-slide{ position:absolute; inset:0 }
  .kd-hero .kh-sarr{ top:50% }
  .kh-sdots{ bottom:16px; justify-content:flex-end; right:18px; left:auto }
}