:root {
    --ink: #1E3A32;
    --ink-light: #2C5046;
    --marigold: #E8A33A;
    --marigold-dark: #C98A28;
    --clay: #B8402E;
    --paper: #F2EFE4;
    --card: #FDFBF3;
    --charcoal: #2A2620;
    --charcoal-soft: #5C564C;
    --line: #D9D2BF;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    background: var(--paper);
    color: var(--charcoal);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  a { text-decoration: none; color: inherit; }
  ul { list-style: none; }
  img, svg { display: block; }

  .display {
    font-family: 'Jost', sans-serif;
  }

  .mono {
    font-family: 'Space Mono', monospace;
  }

  .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* Skip link / focus */
  a:focus-visible, button:focus-visible {
    outline: 3px solid var(--marigold);
    outline-offset: 2px;
  }

  /* Top strip */
  .top-strip {
    background: var(--ink);
    color: #E9E4D4;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 8px 16px;
  }

  /* Nav */
  header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(6px);
  }

  nav.wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 24px;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #7C3AED 0%, #C026A3 100%);
    padding: 6px 16px 6px 6px;
    border-radius: 999px;
    box-shadow: 0 3px 0 #5B1F8F;
  }

  .logo .badge-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .logo .badge-icon svg { width: 18px; height: 18px; color: #C026A3; }

  .logo .mark {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.01em;
  }

  .logo .mark .chohan {
    color: #FFD53D;
    text-shadow: 1.5px 1.5px 0 #5B1F8F;
  }

  .logo .mark .baba {
    color: #FFFFFF;
    text-shadow: 1.5px 1.5px 0 #5B1F8F;
  }

  .search-bar {
    flex: 1;
    max-width: 480px;
    display: flex;
    align-items: center;
    background: var(--card);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 10px 18px;
    gap: 10px;
    transition: border-color 0.15s ease;
  }

  .search-bar:focus-within {
    border-color: var(--marigold);
  }

  .search-bar input {
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    width: 100%;
    color: var(--charcoal);
  }

  .search-bar input::placeholder { color: #A39C8C; }

  .nav-icons {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-shrink: 0;
  }

  .nav-icons a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--ink);
    font-weight: 600;
    position: relative;
  }

  .cart-count {
    position: absolute;
    top: -6px;
    right: -10px;
    background: var(--clay);
    color: #fff;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cat-nav {
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 40;
  }

  .cat-nav > .wrap > ul {
    display: flex;
    gap: 32px;
    padding: 13px 0;
  }

  .cat-item {
    position: relative;
    flex-shrink: 0;
  }

  .cat-item > a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--charcoal);
    white-space: nowrap;
    transition: color 0.15s ease;
    padding: 3px 0;
  }

  .cat-item > a svg {
    width: 11px;
    height: 11px;
    transition: transform 0.15s ease;
  }

  .cat-item:hover > a,
  .cat-item:focus-within > a,
  .cat-item.active > a { color: var(--clay); }

  .cat-item:hover > a svg,
  .cat-item:focus-within > a svg { transform: rotate(180deg); }

  .subcat-panel {
    position: absolute;
    top: calc(100% + 13px);
    left: -18px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 34px -16px rgba(30,58,50,0.22);
    padding: 10px;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }

  .cat-item:hover .subcat-panel,
  .cat-item:focus-within .subcat-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .subcat-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    color: var(--charcoal-soft);
    padding: 9px 12px;
    border-radius: 8px;
    transition: background 0.12s ease, color 0.12s ease;
  }

  .subcat-panel a:hover {
    background: var(--paper);
    color: var(--clay);
  }

  .subcat-panel a .mono {
    font-size: 10.5px;
    color: #A39C8C;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .btn:hover { transform: translateY(-2px); }

  .btn-primary {
    background: var(--marigold);
    color: var(--ink);
    box-shadow: 0 6px 0 var(--marigold-dark);
  }

  .btn-primary:hover { box-shadow: 0 8px 0 var(--marigold-dark); }

  /* Image banner (hero replacement) */
  .img-banner-section {
    padding-top: 28px;
  }

  .img-banner {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background: var(--ink);
    aspect-ratio: 21 / 8;
  }

  .img-banner-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease;
  }

  .img-banner-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    background: var(--ink);
  }

  /* Do alag images: ek desktop ke liye, ek mobile ke liye — admin panel
     se dono upload hote hain. object-fit: cover isliye taake screen
     bilkul edge-to-edge fill ho (koi letterbox/khaali jagah nahi),
     bashart client ne image us screen ke hisab se crop/select ki ho
     (desktop = wide/landscape, mobile = tall/portrait). Sirf ek hi
     <img> ek waqt mein visible hota hai — CSS media query neeche
     decide karti hai konsa. */
  .img-banner-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
  }

  .img-banner-mobile { display: none; }

  .img-banner-slide.img-missing .img-banner-img { display: none; }

  .img-banner-fallback {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-light) 100%);
    color: #E9E4D4;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    text-align: center;
    padding: 20px;
  }

  .img-banner-fallback small {
    color: #8FA69B;
    font-size: 11px;
  }

  .img-banner-slide.img-missing .img-banner-fallback { display: flex; }

  .img-banner-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(253,251,243,0.9);
    color: var(--ink);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
    z-index: 2;
  }

  .img-banner-arrow:hover { background: #FDFBF3; }
  .img-banner-arrow.prev { left: 16px; }
  .img-banner-arrow.next { right: 16px; }

  .img-banner-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
  }

  .img-banner-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(253,251,243,0.5);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, width 0.15s ease;
  }

  .img-banner-dots button.active {
    background: var(--marigold);
    width: 22px;
    border-radius: 5px;
  }

  @media (max-width: 767px) {
    /* Mobile pr portrait 4:5 ratio — Nike app, Instagram shopping posts,
       aur bade e-commerce brands isi ratio ko "mobile hero" k liye
       standard maante hain (na zyada tall, na zyada wide, poori screen
       professional lagti hai). Recommended upload size: 1080x1350px. */
    .img-banner { aspect-ratio: 4 / 5; border-radius: 16px; }
    .img-banner-arrow { width: 34px; height: 34px; }
    .img-banner-arrow svg { width: 14px; height: 14px; }
    .img-banner-desktop { display: none; }
    .img-banner-mobile { display: block; }
  }

  /* Stamp tag (signature element) */
  .stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--clay);
    background: #FBEFE7;
    border: 1px dashed var(--clay);
    padding: 5px 10px 5px 8px;
    border-radius: 4px;
    position: relative;
  }

  .stamp::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clay);
    flex-shrink: 0;
  }

  .stamp.gold {
    color: var(--marigold-dark);
    background: #FCF4E3;
    border-color: var(--marigold-dark);
  }

  .stamp.gold::before { background: var(--marigold-dark); }

  /* Sections */
  section { padding: 72px 0; }

  .section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 38px;
    gap: 20px;
    flex-wrap: wrap;
  }

  .section-head h2 {
    font-family: 'Jost', sans-serif;
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 600;
    color: var(--ink);
  }

  .section-head .see-all {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--clay);
    border-bottom: 1.5px solid var(--clay);
    padding-bottom: 2px;
    white-space: nowrap;
  }

  /* Category grid */
  .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }

  .cat-tile {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
  }

  .cat-tile:hover {
    border-color: var(--marigold);
    transform: translateY(-4px);
  }

  .cat-tile .icon-wrap {
    width: 100px;
    height: 100px;
    margin: 0 auto 18px;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--card), var(--paper));
    box-shadow: inset 0 0 0 1px var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .cat-tile svg { width: 58%; height: 58%; display: block; }

  .cat-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
  }

  .cat-tile .name {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
  }

  .cat-tile .items {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--charcoal-soft);
    margin-top: 4px;
  }

  .subcat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
  }

  .subcat-chips a {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--charcoal-soft);
    background: var(--paper);
    padding: 6px 10px;
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .subcat-chips a:hover {
    background: var(--marigold);
    color: var(--ink);
  }

  /* Product grid */
  .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }

  /* product slider - chhote screens pe khud activate hoti hai jab grid
     mein itni cards ho jayein ke view mein comfortably fit na hon
     (badi stores "picks" / "you may also like" rows ke liye yehi pattern use karti hain) */
  .product-slider {
    position: relative;
  }

  .product-slider-arrow {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 8px 20px -8px rgba(30,58,50,0.35);
    transition: background 0.15s ease, opacity 0.15s ease;
  }

  .product-slider-arrow:hover { background: var(--paper); }
  .product-slider-arrow.prev { left: -8px; }
  .product-slider-arrow.next { right: -8px; }
  .product-slider-arrow[disabled] { opacity: 0.35; cursor: default; }
  .product-slider-arrow svg { width: 16px; height: 16px; }

  .product-slider.is-sliding .product-grid {
    display: flex;
    align-items: stretch;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .product-slider.is-sliding .product-grid::-webkit-scrollbar { display: none; }

  .product-slider.is-sliding .product-grid .product-card {
    /* BUG FIX: grid mode ke .product-card { height:100% } sirf isliye
       kaam karta hai kyunke CSS Grid row ki ek definite height hoti hai
       jis se 100% resolve ho jata hai. Yahan (slider mode) parent
       display:flex hai aur uski height khud content se decide hoti hai
       (indefinite) — is lie height:100% resolve nahi ho pata aur har
       card apni khud ki content-height pe reh jata hai. Jis card ka
       content chhota ho (discount price na ho, "No rating" ho, naam
       chhota ho — jaisa naye product k sath hota hai) wo card chhota
       reh jata hai aur uska "Add to Cart" (margin-top:auto se neeche
       pinned) upar reh jata hai — yehi misalignment tha. height:auto
       + align-items:stretch (upar parent pe) is combination mein
       flexbox khud sab cards ko row ke sabse lambe card jitna stretch
       kar deta hai, chahe har naye product ka content kitna bhi
       chhota/bada ho — is lie ye future-proof fix hai. */
    height: auto;
    flex: 0 0 auto;
    width: 62%;
    scroll-snap-align: start;
  }

  .product-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
    /* Card ko flex column banaya taake "Add to Cart" button hamesha
       card k bilkul neeche hi fix rahe — chahe kisi product ka naam
       lamba ho, discount price ho ya na ho, rating ho ya na ho. Grid
       row apne aap cards ko barabar height stretch karti hai; ye
       flex layout us barabar height ko sahi tarah use karke button
       ko bottom pr pin kar deta hai, taake naye products add hone pr
       bhi button kabhi upar-neeche misalign na ho. */
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -14px rgba(30,58,50,0.28);
  }

  .product-thumb {
    height: 168px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .product-thumb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-thumb svg { width: 46px; height: 46px; opacity: 0.85; }

  .product-thumb .stamp {
    position: absolute;
    top: 12px;
    left: 12px;
  }

  .wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(253,251,243,0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    cursor: pointer;
  }

  .wishlist-btn svg { width: 15px; height: 15px; color: var(--charcoal-soft); transition: color 0.15s ease; }
  .wishlist-btn.active { border-color: var(--clay); }
  .wishlist-btn.active svg { color: var(--clay); fill: var(--clay); }

  .product-info {
    padding: 16px;
    /* Info block bhi flex column hai aur remaining height le leta hai
       (thumb ke neeche jo bhi space bache), taake button ko neeche
       pin karne ke liye jagah mile. */
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .product-cat {
    font-family: 'Space Mono', monospace;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--charcoal-soft);
    margin-bottom: 6px;
    /* Kabhi category label lamba ho to 2 lines mein wrap ho jata tha
       (jaise "HOUSEHOLD CHINA ITEMS"), jo neeche price/rating ko shift
       kar deta tha. Ab hamesha 1 line mein rakhte hain — lamba na ho to
       ellipsis (...) lag jayega, is se saari cards mein price/rating
       hamesha ek hi seedhi line mein align rehte hain. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-name {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--charcoal);
    margin-bottom: 8px;
    line-height: 1.35;
    /* Naam chhota (1 line) ho ya lamba (2 lines), ye block hamesha
       poori 2 lines jitni height reserve karta hai — is se neeche price
       aur rating hamesha exact same jagah pe baithte hain, chahe koi
       bhi naya product future mein add ho. 2 se zyada lines ho to
       "..." laga kar cut ho jata hai. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(1.35em * 2);
  }

  .product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .price-now {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
  }

  .price-was {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: #A39C8C;
    text-decoration: line-through;
  }

  .rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 11.5px;
    color: var(--charcoal-soft);
  }

  .rating svg { width: 12px; height: 12px; color: var(--marigold-dark); }

  .rating-none { color: #A39C8C; }
  .rating-none svg { color: #C7C1B3; }

  .add-cart-quick {
    /* auto margin = button hamesha info-block ke bottom se chipka
       rahega, chahe upar wala content (price/discount/rating) kitna
       bhi chhota ya bada ho — is se saari cards ki row mein buttons
       hamesha ek hi seedhi line mein align rehte hain. */
    margin-top: auto;
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    background: var(--ink);
    color: #F2EFE4;
    font-size: 12.5px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .add-cart-quick:hover { background: var(--ink-light); }

  /* Pagination bar — category.html pr products list ke neeche.
     Products kam hon (ek page mein sab fit) tw JS ye poora div hide
     kar deta hai, is liye display yahan flex rakha hai (JS override
     karta hai jab zaroorat na ho). */
  .cb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 36px;
  }

  .cb-page-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    background: var(--card);
    color: var(--charcoal);
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .cb-page-btn:hover:not(:disabled):not(.active) { border-color: var(--marigold); }

  .cb-page-btn.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #F2EFE4;
    cursor: default;
  }

  .cb-page-btn:disabled { opacity: 0.35; cursor: default; }

  .cb-page-btn.cb-page-arrow { padding: 0; }

  .cb-page-dots {
    color: var(--charcoal-soft);
    font-family: 'Space Mono', monospace;
    padding: 0 4px;
  }

  @media (max-width: 560px) {
    .cb-page-btn { min-width: 34px; height: 34px; font-size: 12px; }
  }

  /* Trust strip */
  .trust-strip {
    background: var(--card);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 40px 0;
  }

  .trust-item {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .trust-item .icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .trust-item svg { width: 20px; height: 20px; color: var(--clay); }

  .trust-item .title { font-weight: 700; font-size: 13.5px; color: var(--charcoal); }
  .trust-item .desc { font-size: 12px; color: var(--charcoal-soft); margin-top: 2px; }

  /* Banner */
  .promo-banner {
    background: linear-gradient(135deg, var(--clay) 0%, #9c3423 100%);
    border-radius: 22px;
    padding: 48px 44px;
    color: #FDF3EC;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }

  .promo-banner h3 {
    font-family: 'Jost', sans-serif;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 600;
    max-width: 420px;
  }

  .promo-banner .btn-primary {
    background: #FDF3EC;
    color: var(--clay);
    box-shadow: 0 6px 0 #d9c3b6;
  }

  /* Newsletter banner */
  .newsletter-banner {
    background: linear-gradient(135deg, var(--ink) 0%, var(--ink-light) 100%);
    border-radius: 22px;
    padding: 52px 48px;
    color: #F2EFE4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
  }

  .newsletter-banner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(232, 163, 58, 0.12);
  }

  .newsletter-copy {
    position: relative;
    max-width: 440px;
  }

  .newsletter-banner h3 {
    font-family: 'Jost', sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 600;
    margin-top: 12px;
    line-height: 1.25;
  }

  .newsletter-banner p {
    font-size: 13.5px;
    color: rgba(242,239,228,0.72);
    margin-top: 10px;
  }

  .newsletter-form {
    position: relative;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 320px;
  }

  .newsletter-form input[type="email"] {
    flex: 1;
    min-width: 220px;
    padding: 14px 18px;
    border-radius: 999px;
    border: 1px solid rgba(242,239,228,0.25);
    background: rgba(242,239,228,0.08);
    color: #F2EFE4;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  .newsletter-form input[type="email"]::placeholder { color: rgba(242,239,228,0.5); }

  .newsletter-form input[type="email"]:focus {
    border-color: var(--marigold);
    background: rgba(242,239,228,0.14);
  }

  .newsletter-form .btn-primary {
    background: var(--marigold);
    color: var(--ink);
    box-shadow: 0 6px 0 var(--marigold-dark);
    white-space: nowrap;
  }

  .newsletter-note {
    position: relative;
    width: 100%;
    font-size: 11.5px;
    color: rgba(242,239,228,0.5);
    margin-top: 4px;
  }

  @media (max-width: 640px) {
    .newsletter-banner { padding: 36px 26px; flex-direction: column; align-items: flex-start; }
    .newsletter-form { width: 100%; }
    .newsletter-form input[type="email"] { min-width: 0; }
    .newsletter-form .btn-primary { flex: 1; }
  }

  /* Toast (newsletter, etc.) */
  .cb-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--ink);
    color: #F2EFE4;
    padding: 14px 22px;
    border-radius: 12px;
    font-size: 13.5px;
    z-index: 300;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .cb-toast.show {
    opacity: 1;
    transform: translateY(0);
  }

  @media (max-width: 640px) {
    .cb-toast { left: 16px; right: 16px; bottom: 16px; }
  }

  /* Footer */
  footer {
    background: var(--ink);
    color: #C9D3CC;
    padding: 56px 0 28px;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(242,239,228,0.12);
  }


  .footer-tag {
    margin-top: 14px;
    font-size: 13px;
    color: #8FA69B;
    max-width: 260px;
    line-height: 1.6;
  }

  .footer-col h4 {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--marigold);
    margin-bottom: 16px;
  }

  .footer-col ul li { margin-bottom: 10px; }
  .footer-col a { font-size: 13.5px; color: #C9D3CC; transition: color 0.15s ease; }
  .footer-col a:hover { color: #fff; }

  .footer-bottom {
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6E8479;
    flex-wrap: wrap;
    gap: 10px;
  }

  .footer-dev a {
  color: #C9D3CC;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.footer-dev a:hover {
  color: var(--clay);
  border-color: var(--clay);
}

  /* Product Detail Page */
  .pdp-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    padding: 28px 0 12px;
  }

  .pdp-gallery { position: sticky; top: 96px; align-self: start; }

  .pdp-main-image {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .pdp-main-image svg { width: 120px; height: 120px; opacity: 0.85; color: var(--ink); }
  .pdp-main-image img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .pdp-main-image iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }

  /* Invisible tap layer video ke upar — kuch dikhta nahi, bas tap ko
     catch karke play/pause postMessage bhejta hai (YouTube ke tiny mobile
     controls ke bajaye) */
  .pdp-video-tap-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    cursor: pointer;
    background: transparent;
  }
  .pdp-main-image .stamp { position: absolute; top: 16px; left: 16px; }
  .pdp-main-image .wishlist-btn { top: 16px; right: 16px; width: 38px; height: 38px; }
  .pdp-main-image .wishlist-btn svg { width: 18px; height: 18px; }

  /* Main gallery image ke upar left/right swipe buttons — sirf 1 se zyada
     image/video ho tab dikhte hain, product-slider-arrow jaisa hi look
     (consistency) lekin gallery box ke andar dead-center */
  .pdp-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 8px 20px -8px rgba(30,58,50,0.35);
    transition: background 0.15s ease, opacity 0.15s ease;
  }
  .pdp-gallery-arrow:hover { background: var(--paper); }
  .pdp-gallery-arrow.prev { left: 14px; }
  .pdp-gallery-arrow.next { right: 14px; }
  .pdp-gallery-arrow svg { width: 18px; height: 18px; }

  .pdp-thumbs { display: flex; gap: 12px; margin-top: 14px; }

  .pdp-thumb {
    width: 76px;
    height: 76px;
    border-radius: 12px;
    background: var(--card);
    border: 1.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
    flex-shrink: 0;
  }

  .pdp-thumb svg { width: 30px; height: 30px; color: var(--ink); opacity: 0.8; }
  .pdp-thumb { overflow: hidden; }
  .pdp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .pdp-thumb.active, .pdp-thumb:hover { border-color: var(--marigold); }

  /* Gallery ka video thumb — normal image thumb jaisa hi hai, bas isme
     YouTube ke thumbnail ke upar ek chhota play-button badge overlay
     hota hai taake customer ko pata chale ye video hai, image nahi. */
  .pdp-thumb-video { position: relative; }
  .pdp-thumb-video .pdp-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 16, 12, 0.28);
  }
  .pdp-thumb-video .pdp-thumb-play svg {
    width: 26px; height: 26px;
    color: #fff;
    opacity: 1;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
  }

  .pdp-title {
    font-family: 'Jost', sans-serif;
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    margin: 8px 0 16px;
  }

  .pdp-rating-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
  .pdp-rating-row .stars { display: flex; gap: 2px; color: var(--marigold-dark); }
  .pdp-rating-row .stars svg { width: 15px; height: 15px; }
  .pdp-rating-row .rating-count { font-size: 13px; color: var(--charcoal-soft); border-bottom: 1px solid var(--charcoal-soft); padding-bottom: 1px; cursor: pointer; }
  .pdp-rating-row .divider-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line); }
  .pdp-rating-row .stock-status { font-size: 12.5px; font-weight: 700; color: #3E7A5A; display: flex; align-items: center; gap: 7px; }
  .pdp-rating-row .stock-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3E7A5A; }

  .pdp-price-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 22px 0;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
    margin-bottom: 26px;
    flex-wrap: wrap;
  }

  .pdp-price-row .price-now { font-size: 30px; }
  .pdp-price-row .price-was { font-size: 16px; }

  .discount-badge {
    background: #FBEFE7;
    color: var(--clay);
    border: 1px dashed var(--clay);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 4px;
  }

  .pdp-desc { font-size: 14.5px; line-height: 1.75; color: var(--charcoal-soft); margin-bottom: 30px; }

  .option-group { margin-bottom: 26px; }

  .option-group h4 {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--charcoal-soft);
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .option-group h4 span.selected-val { text-transform: none; letter-spacing: 0; color: var(--charcoal); font-weight: 700; }

  .size-chips { display: flex; gap: 10px; flex-wrap: wrap; }

  .size-chip {
    min-width: 46px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--line);
    background: var(--card);
    font-size: 13px;
    font-weight: 700;
    color: var(--charcoal);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  }

  .size-chip:hover { border-color: var(--marigold); }
  .size-chip.selected { background: var(--ink); border-color: var(--ink); color: #F2EFE4; }

  .color-swatches { display: flex; gap: 14px; }

  .color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 0 1.5px var(--line);
    transition: box-shadow 0.15s ease;
  }

  .color-swatch.selected { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--ink); }

  .qty-row { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; flex-wrap: wrap; }
  .qty-row .pdp-wishlist-btn { margin-left: auto; }

  .qty-selector { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }

  .qty-selector button {
    width: 38px;
    height: 44px;
    background: var(--card);
    border: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
    cursor: pointer;
  }

  .qty-selector button:hover { background: var(--paper); }

  .qty-selector input {
    width: 44px;
    text-align: center;
    border: none;
    border-left: 1.5px solid var(--line);
    border-right: 1.5px solid var(--line);
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--charcoal);
    height: 44px;
    background: var(--card);
  }

  .qty-selector input:focus-visible { outline: none; }
  .qty-note { font-size: 12px; color: #A39C8C; }

  .pdp-actions { display: flex; gap: 12px; margin-bottom: 12px; }
  .pdp-actions .btn-primary { flex: 1; justify-content: center; padding: 16px 26px; font-size: 15px; }

  /* Buy Now — Add to Cart / WhatsApp row ke neeche, dono ke combined
     width jitna full-width button (sabse prominent action, dark solid) */
  .pdp-buynow-full {
    width: 100%;
    justify-content: center;
    padding: 16px 26px;
    font-size: 15px;
    margin-bottom: 22px;
  }
  .btn-buynow {
    background: var(--ink);
    color: #fff;
    box-shadow: 0 6px 0 #0E1F19;
  }
  .btn-buynow:hover { box-shadow: 0 8px 0 #0E1F19; }
  .btn-buynow[disabled] { opacity: 0.5; cursor: default; box-shadow: none; transform: none; }

  .btn-whatsapp {
    flex: 1;
    justify-content: center;
    background: #2FA85A;
    color: #fff;
    box-shadow: 0 6px 0 #1f7a40;
  }

  .btn-whatsapp:hover { box-shadow: 0 8px 0 #1f7a40; }

  .pdp-wishlist-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease;
  }

  .pdp-wishlist-btn svg { width: 18px; height: 18px; color: var(--charcoal-soft); transition: color 0.15s ease; }
  .pdp-wishlist-btn:hover { border-color: var(--clay); }
  .pdp-wishlist-btn.active { border-color: var(--clay); }
  .pdp-wishlist-btn.active svg { color: var(--clay); fill: var(--clay); }

  .pdp-trust-mini {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 24px;
  }

  .pdp-trust-mini .row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--charcoal-soft); }
  .pdp-trust-mini svg { width: 16px; height: 16px; color: var(--clay); flex-shrink: 0; }

  .pdp-meta { font-size: 12.5px; color: var(--charcoal-soft); display: flex; flex-direction: column; gap: 7px; }
  .pdp-meta b { color: var(--charcoal); font-weight: 700; }

  /* ---- Tabs ---- */
  .pdp-tabs-section { padding-top: 20px; }

  .tab-nav { display: flex; gap: 8px; border-bottom: 1.5px solid var(--line); margin-bottom: 30px; overflow-x: auto; }

  .tab-btn {
    padding: 14px 22px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--charcoal-soft);
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    top: 1.5px;
    white-space: nowrap;
    border-bottom: 2.5px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  .tab-btn.active { color: var(--ink); border-bottom-color: var(--marigold); }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }
  .tab-panel p { font-size: 14.5px; line-height: 1.85; color: var(--charcoal-soft); max-width: 720px; margin-bottom: 14px; }
  .tab-panel ul { max-width: 640px; }
  .tab-panel ul li {
    font-size: 14px;
    line-height: 1.7;
    color: var(--charcoal-soft);
    padding-left: 22px;
    position: relative;
    margin-bottom: 8px;
  }
  .tab-panel ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--marigold-dark);
  }

  .spec-table { width: 100%; max-width: 560px; border-collapse: collapse; }
  .spec-table tr { border-bottom: 1px solid var(--line); }
  .spec-table td { padding: 13px 0; font-size: 13.5px; }
  .spec-table td:first-child { color: var(--charcoal-soft); font-weight: 600; width: 180px; }
  .spec-table td:last-child { color: var(--charcoal); font-weight: 600; }

  /* ---- Reviews ---- */
  .review-summary { display: flex; gap: 44px; margin-bottom: 34px; align-items: center; flex-wrap: wrap; }
  .review-score { text-align: center; }
  .review-score .num { font-family: 'Jost', sans-serif; font-size: 48px; font-weight: 600; color: var(--ink); line-height: 1; }
  .review-score .stars { display: flex; gap: 2px; justify-content: center; margin: 8px 0; color: var(--marigold-dark); }
  .review-score .stars svg { width: 16px; height: 16px; }
  .review-score .count { font-size: 12px; color: var(--charcoal-soft); }

  .review-bars { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 7px; }
  .review-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--charcoal-soft); }
  .review-bar-row .bar-track { flex: 1; height: 7px; background: var(--paper); border-radius: 99px; overflow: hidden; }
  .review-bar-row .bar-fill { height: 100%; background: var(--marigold-dark); }

  .review-card { border-bottom: 1px solid var(--line); padding: 22px 0; }
  .review-card:first-child { padding-top: 0; }
  .review-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
  .review-author { font-weight: 700; font-size: 13.5px; color: var(--charcoal); display: flex; align-items: center; }
  .review-date { font-size: 11.5px; color: #A39C8C; font-family: 'Space Mono', monospace; }
  .review-card .stars { display: flex; gap: 2px; color: var(--marigold-dark); margin-bottom: 8px; }
  .review-card .stars svg { width: 13px; height: 13px; }
  .review-text { font-size: 13.5px; line-height: 1.75; color: var(--charcoal-soft); }

  /* ---- Write a Review modal ---- */
  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(30,58,50,0.45);
    display: none; align-items: flex-start; justify-content: center;
    padding: 40px 16px; overflow-y: auto; z-index: 200;
  }
  .modal-backdrop.open { display: flex; }
  .modal-panel {
    background: var(--card); border-radius: 18px; width: 100%; max-width: 480px;
    padding: 32px; margin-bottom: 40px;
  }
  .modal-panel h3 { font-family: 'Jost', sans-serif; font-size: 22px; margin-bottom: 20px; color: var(--ink); }
  .form-group { margin-bottom: 20px; }
  .form-group label {
    display: block; font-size: 12.5px; font-weight: 700; color: var(--charcoal);
    margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em;
  }
  .form-group textarea {
    width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
    font-family: inherit; font-size: 13.5px; color: var(--charcoal); resize: vertical;
    background: #fff;
  }
  .form-group textarea:focus { outline: none; border-color: var(--marigold-dark); }
  .form-hint { font-size: 11.5px; color: var(--charcoal-soft); margin-top: 6px; }
  .star-input { display: flex; gap: 6px; }
  .star-input svg {
    width: 30px; height: 30px; color: #C7C1B3; cursor: pointer; transition: color 0.1s ease;
  }
  .star-input svg.filled { color: var(--marigold-dark); fill: var(--marigold-dark); }
  .modal-foot { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }

  @media (max-width: 520px) {
    .modal-backdrop { padding: 0; align-items: stretch; }
    .modal-panel { border-radius: 0; max-width: none; min-height: 100vh; margin-bottom: 0; }
  }

  .verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #3E7A5A;
    margin-left: 8px;
    background: #E9F3EC;
    padding: 3px 8px;
    border-radius: 999px;
  }

  .write-review-btn {
    background: transparent;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    padding: 12px 22px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  .write-review-btn:hover { background: var(--ink); color: #F2EFE4; }

  @media (max-width: 900px) {
    .pdp-layout { grid-template-columns: 1fr; gap: 36px; }
    .pdp-gallery { position: static; }
    .pdp-main-image { height: 360px; }
  }

  @media (max-width: 560px) {
    .pdp-actions { flex-direction: column; }
    .review-summary { gap: 24px; }
    .spec-table td:first-child { width: 42%; }
    .spec-table td { word-break: break-word; }
  }

  /* Responsive */
  @media (max-width: 980px) {
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .search-bar { display: none; }
    .product-slider.is-sliding .product-grid .product-card { width: 46%; }
    .cat-tile .icon-wrap { width: 88px; height: 88px; }

    /* category tabs row scrolls sideways instead of wrapping/breaking
       the page once it has more tabs than fit (phones + small tablets) */
    .cat-nav > .wrap > ul {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 2px;
    }
    .cat-nav > .wrap > ul::-webkit-scrollbar { display: none; }
  }

  @media (max-width: 767px) {
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .cat-tile .icon-wrap { width: 80px; height: 80px; margin-bottom: 14px; }
  }

  @media (max-width: 560px) {
    .wrap { padding: 0 20px; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: 1fr 1fr; }
    .trust-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .nav-icons { gap: 14px; }
    .promo-banner { flex-direction: column; align-items: flex-start; }
    .product-slider.is-sliding .product-grid .product-card { width: 68%; }
    .product-slider-arrow { width: 34px; height: 34px; }
    .product-slider-arrow.prev { left: -4px; }
    .product-slider-arrow.next { right: -4px; }
    .pdp-gallery-arrow { width: 34px; height: 34px; }
    .pdp-gallery-arrow.prev { left: 8px; }
    .pdp-gallery-arrow.next { right: 8px; }
    .cat-tile .icon-wrap { width: 72px; height: 72px; margin-bottom: 12px; }
  }

  /* Smallest phones (iPhone SE, older/budget Androids ~320–400px) —
     the header row is the tightest spot on the whole site, so give it
     a bit more room by shrinking the logo badge and nav icon labels. */
  @media (max-width: 400px) {
    .wrap { padding: 0 16px; }
    nav.wrap { gap: 12px; }
    .logo { padding: 5px 12px 5px 5px; gap: 6px; }
    .logo .badge-icon { width: 28px; height: 28px; }
    .logo .badge-icon svg { width: 15px; height: 15px; }
    .logo .mark { font-size: 17px; }
    .nav-icons { gap: 10px; }
    .nav-icons a { font-size: 9.5px; gap: 2px; }
    .nav-icons svg { width: 17px !important; height: 17px !important; }
    .cart-count { width: 14px; height: 14px; font-size: 9px; top: -5px; right: -8px; }
    .category-grid { gap: 12px; }
    .cat-tile { padding: 20px 12px; }
    .cat-tile .icon-wrap { width: 64px; height: 64px; margin-bottom: 12px; }
    .cat-tile .name { font-size: 15.5px; }
    .product-grid { gap: 14px; }
    .product-info { padding: 12px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }

  /* Breadcrumb */
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--charcoal-soft);
    padding: 22px 0 0;
  }

  .breadcrumb a { color: var(--charcoal-soft); transition: color 0.15s ease; }
  .breadcrumb a:hover { color: var(--clay); }
  .breadcrumb .sep { color: #C6BEA9; }
  .breadcrumb .current { color: var(--ink); font-weight: 600; }

  /* Category page header */
  .cat-page-head {
    padding: 18px 0 32px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 32px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }

  .cat-page-head h1 {
    font-family: 'Jost', sans-serif;
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600;
    color: var(--ink);
  }

  .cat-page-head .count {
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    color: var(--charcoal-soft);
    margin-top: 6px;
  }

  .sort-bar {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .sort-bar label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--charcoal-soft);
  }

  .sort-select {
    appearance: none;
    background: var(--card) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235C564C" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 12px center;
    background-size: 12px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    padding: 10px 34px 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--charcoal);
    cursor: pointer;
  }

  .sort-select:focus-visible { border-color: var(--marigold); }

  .filter-toggle-mobile {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--ink);
    color: #F2EFE4;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }

  /* Layout with sidebar */
  .shop-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 36px;
    align-items: start;
  }

  .filter-sidebar {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }

  /* Mobile-only overlay behind the filter drawer — must stay out of the
     grid flow on desktop, otherwise it eats a grid cell and pushes the
     product column onto a second row underneath the sidebar. */
  .filter-backdrop {
    display: none;
  }

  .filter-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
  }

  .filter-sidebar-head h3 {
    font-family: 'Jost', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
  }

  .clear-filters {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--clay);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .filter-group {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }

  .filter-group:last-child { border-bottom: none; padding-bottom: 0; }
  .filter-group:first-child { padding-top: 0; }

  .filter-group h4 {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--charcoal-soft);
    margin-bottom: 14px;
  }

  .checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0;
    cursor: pointer;
  }

  .checkbox-row .left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--charcoal);
  }

  .checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--marigold-dark);
    cursor: pointer;
  }

  .checkbox-row .fcount {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #A39C8C;
  }

  .price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .price-inputs input {
    width: 100%;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    font-family: 'Space Mono', monospace;
    font-size: 12.5px;
    color: var(--charcoal);
    background: var(--paper);
  }

  .price-inputs input:focus-visible { outline: none; border-color: var(--marigold); }
  .price-inputs span { color: var(--charcoal-soft); font-size: 12px; }

  .price-range-track {
    margin-top: 14px;
    width: 100%;
    accent-color: var(--marigold-dark);
  }

  .rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--charcoal-soft);
  }

  .rating-row .stars { display: flex; gap: 1px; color: var(--marigold-dark); }
  .rating-row .stars svg { width: 13px; height: 13px; }
  .rating-row input { accent-color: var(--marigold-dark); }

  .apply-filters-btn {
    width: 100%;
    margin-top: 20px;
    padding: 12px;
    border-radius: 10px;
    background: var(--marigold);
    color: var(--ink);
    font-weight: 700;
    font-size: 13.5px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--marigold-dark);
  }

  /* Pagination */
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 44px;
  }

  .pagination a, .pagination span {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--charcoal-soft);
    border: 1.5px solid var(--line);
    background: var(--card);
    transition: border-color 0.15s ease, color 0.15s ease;
  }

  .pagination a:hover { border-color: var(--marigold); color: var(--ink); }
  .pagination .active { background: var(--ink); color: #F2EFE4; border-color: var(--ink); }
  .pagination .dots { border: none; background: transparent; }

  @media (max-width: 900px) {
    .shop-layout { grid-template-columns: 1fr; }
    .filter-sidebar {
      position: fixed;
      top: 0; left: 0;
      width: 84%;
      max-width: 320px;
      height: 100vh;
      max-height: 100vh;
      z-index: 90;
      border-radius: 0;
      overflow-y: auto;
      transform: translateX(-105%);
      transition: transform 0.25s ease;
    }
    .filter-sidebar.open { transform: translateX(0); }
    .filter-toggle-mobile { display: flex; }
    .filter-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(30,58,50,0.4);
      z-index: 80;
    }
    .filter-backdrop.open { display: block; }
  }

/* toast notifications - top center, KFC Pakistan jaisa rectangular box
   with timer bar neeche. wishlist actions (add/remove/sign-in required)
   ke liye use hota hai, aur kahin bhi chhota confirmation dikhana ho
   wahan reuse ho sakta hai */
.cb-toast-container {
  position: fixed;
  top: 14px;
  right: 20px;
  left: auto;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  pointer-events: none;
}

.cb-toast {
  position: relative;
  bottom: auto;
  right: auto;
  width: 100%;
  pointer-events: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(42,38,32,0.18);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.cb-toast.cb-toast-show { opacity: 1; transform: translateY(0); }
.cb-toast.cb-toast-hide { opacity: 0; transform: translateY(-10px); }

.cb-toast-body {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
}

.cb-toast-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  color: var(--ink);
}
.cb-toast-icon svg { width: 13px; height: 13px; }

.cb-toast-success .cb-toast-icon { background: rgba(30,58,50,0.12); color: var(--ink); }
.cb-toast-error .cb-toast-icon { background: rgba(184,64,46,0.12); color: var(--clay); }
.cb-toast-info .cb-toast-icon { background: rgba(200,138,40,0.16); color: var(--marigold-dark); }

.cb-toast-msg {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--charcoal);
}

.cb-toast-action {
  flex-shrink: 0;
  border: none;
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.cb-toast-action:hover { background: var(--ink-light); }

.cb-toast-close {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--charcoal-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cb-toast-close svg { width: 12px; height: 12px; }

.cb-toast-timer {
  height: 3px;
  background: var(--line);
}
.cb-toast-timer-fill {
  height: 100%;
  width: 100%;
  background: var(--clay);
  transition-property: width;
  transition-timing-function: linear;
}
.cb-toast-success .cb-toast-timer-fill { background: var(--ink); }
.cb-toast-info .cb-toast-timer-fill { background: var(--marigold-dark); }

@media (max-width: 480px) {
  .cb-toast-container { right: 12px; left: 12px; max-width: none; top: 12px; }
}


/* site-wide search overlay (Nike jaisa full screen search) - ye
   firebase-config.js hi <body> mein inject karta hai har us page pe
   jahan header mein .search-bar hai. upar wali .product-card /
   .product-grid styles hi reuse hoti hain taake results category grid
   jaise hi dikhein */

.cb-mobile-search-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: 'Inter', sans-serif;
}

.cb-mobile-search-btn svg { width: 20px; height: 20px; }

@media (max-width: 980px) {
  .cb-mobile-search-btn { display: flex; }
}

.cb-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.cb-search-overlay.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}

body.cb-search-lock { overflow: hidden; }

.cb-search-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cb-search-topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.cb-search-logo.logo { flex-shrink: 0; }

.cb-search-input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 12px 18px;
  transition: border-color 0.15s ease;
}

.cb-search-input-wrap:focus-within { border-color: var(--marigold); }

.cb-search-input-wrap svg { flex-shrink: 0; color: var(--charcoal-soft); }

.cb-search-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--charcoal);
  min-width: 0;
}

.cb-search-input-wrap input::placeholder { color: #A39C8C; }

.cb-search-clear-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: var(--line);
  color: var(--charcoal-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 5px;
}

.cb-search-cancel-btn {
  flex-shrink: 0;
  white-space: nowrap;
  background: none;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 4px;
}

.cb-search-cancel-btn:hover { color: var(--clay); }

.cb-search-body {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px 60px;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.cb-search-section-title {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--charcoal-soft);
  margin-bottom: 14px;
}

.cb-search-chips-block { margin-bottom: 36px; }

.cb-search-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cb-search-chip {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--charcoal);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.cb-search-chip:hover {
  border-color: var(--marigold);
  color: var(--ink);
  background: #FBF3E0;
}

.cb-search-trending-block { margin-bottom: 20px; }

.cb-search-count {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--charcoal-soft);
  margin-bottom: 16px;
}

.cb-search-grid.product-grid {
  grid-template-columns: repeat(4, 1fr);
}

.cb-search-status {
  font-size: 13.5px;
  color: var(--charcoal-soft);
  padding: 20px 0;
}

.cb-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--charcoal-soft);
}

.cb-search-empty svg { color: var(--line); }

.cb-search-empty p {
  font-size: 15px;
  font-weight: 600;
  color: var(--charcoal);
}

.cb-search-empty span { font-size: 13px; }

@media (max-width: 980px) {
  .cb-search-grid.product-grid { grid-template-columns: repeat(2, 1fr); }
  .cb-search-topbar { padding: 14px 20px; }
  .cb-search-body { padding: 22px 20px 60px; }
}

@media (max-width: 640px) {
  .cb-search-topbar { gap: 10px; }
  .cb-search-logo.logo { padding: 5px 10px 5px 5px; }
  .cb-search-logo.logo .badge-icon { width: 28px; height: 28px; }
  .cb-search-logo.logo .badge-icon svg { width: 15px; height: 15px; }
  .cb-search-logo.logo .mark { font-size: 16px; }
  .cb-search-input-wrap { padding: 10px 14px; }
  .cb-search-cancel-btn { font-size: 13.5px; padding: 6px 0; }
}

@media (max-width: 480px) {
  .cb-search-logo.logo .mark { display: none; }
  .cb-search-logo.logo { padding: 7px; }
  .cb-search-topbar { padding: 12px 14px; gap: 8px; }
  .cb-search-input-wrap { padding: 9px 12px; gap: 8px; }
  .cb-search-input-wrap svg { width: 16px; height: 16px; }
  .cb-search-cancel-btn { font-size: 13px; padding: 6px 0; }
}

@media (max-width: 560px) {
  .cb-search-grid.product-grid { grid-template-columns: 1fr 1fr; }
}

/* ================= Floating WhatsApp Button (Product Page) =================
   Round floating button, right-bottom corner par fix rehta hai. Product
   page khulte hi is ka WhatsApp link JS se set ho jata hai (product ka naam
   msg mein include hota hai). Sirf product.html pe use hota hai. */
.cb-wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 0 #1a9e4c, 0 10px 22px rgba(0,0,0,0.25);
  z-index: 400;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: cbWaPulse 2.4s ease-in-out infinite;
}

.cb-wa-float:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #1a9e4c, 0 14px 26px rgba(0,0,0,0.28);
}

.cb-wa-float:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #1a9e4c, 0 6px 14px rgba(0,0,0,0.22);
}

.cb-wa-float svg {
  width: 30px;
  height: 30px;
  fill: #fff;
}

.cb-wa-float-tooltip {
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  background: #1E3A32;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.cb-wa-float-tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #1E3A32;
}

.cb-wa-float:hover .cb-wa-float-tooltip {
  opacity: 1;
  visibility: visible;
}

@keyframes cbWaPulse {
  0%, 100% { box-shadow: 0 6px 0 #1a9e4c, 0 10px 22px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,211,102,0.5); }
  50% { box-shadow: 0 6px 0 #1a9e4c, 0 10px 22px rgba(0,0,0,0.25), 0 0 0 10px rgba(37,211,102,0); }
}

@media (max-width: 640px) {
  .cb-wa-float { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .cb-wa-float svg { width: 26px; height: 26px; }
  .cb-wa-float-tooltip { display: none; }
}