:root {
        --black-950: #050506;
        --black-900: #0a0a0c;
        --charcoal-850: #121215;
        --charcoal-800: #17171b;
        --charcoal-700: #232329;
        --gold: #c9a227;
        --gold-bright: #eecf6e;
        --gold-deep: #8a6d14;
        --gold-grad: linear-gradient(120deg, #f4dc82 0%, #d9b83f 38%, #b28c1e 72%, #e9c767 100%);
        --gold-ink: #eecf6e;
        --wa: #101013;
        --wa-dark: #000000;
        --bg: #070708;
        --surface: #151518;
        --surface-2: #1e1e23;
        --ink: #f4f1e8;
        --muted: #aaa294;
        --line: #2c2a24;
        --danger: #e0685e;
        --shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
        --radius: 14px;
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        font-family: "Hind Siliguri", system-ui, sans-serif;
        background:
          radial-gradient(1100px 520px at 50% -120px, rgba(217, 184, 63, 0.13), rgba(217, 184, 63, 0) 62%),
          linear-gradient(180deg, #060607 0%, #101013 34%, #0b0b0d 68%, #060607 100%);
        background-attachment: fixed, scroll;
        color: var(--ink);
        line-height: 1.65;
        -webkit-font-smoothing: antialiased;
      }
      img { max-width: 100%; display: block; }
      a { color: inherit; }
      .wrap { width: min(1120px, 100% - 2rem); margin-inline: auto; }

      /* ---------- Header ---------- */
      header.site {
        position: sticky; top: 0; z-index: 50;
        background: linear-gradient(180deg, #0d0d10, #060607);
        color: #f5f2ea;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
      }
      header.site::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
        background: var(--gold-grad);
      }
      .site-in { display: flex; align-items: center; gap: 0.9rem; padding: 0.55rem 0; }
      .brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; flex: 1 1 auto; min-width: 0; }
      .brand img { width: 46px; height: 46px; object-fit: contain; flex: none; }
      .brand .btext { display: block; min-width: 0; }
      .brand .bname { display: block; font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; font-weight: 800; font-size: 1.25rem; line-height: 1.1; white-space: nowrap; }
      .brand .bname em { font-style: normal; color: var(--gold-bright); }
      .brand .btag { display: block; font-size: 0.78rem; color: #c9c2b2; line-height: 1.2; }
      nav.main { margin-left: auto; display: flex; gap: 1.1rem; align-items: center; flex: none; }
      nav.main a.nl { text-decoration: none; font-weight: 500; color: #ece8dd; font-size: 0.98rem; }
      nav.main a.nl:hover { color: var(--gold-bright); }
      .btn {
        display: inline-flex; align-items: center; gap: 0.5rem;
        font-family: inherit; font-weight: 600; font-size: 1rem;
        padding: 0.6rem 1.15rem; border-radius: 10px; border: 0;
        cursor: pointer; text-decoration: none; line-height: 1.25;
        transition: transform 0.15s ease, background 0.15s ease;
      }
      .btn:active { transform: scale(0.98); }
      .btn svg { width: 20px; height: 20px; flex: none; }
      .btn-wa { background: var(--wa); color: #fff; box-shadow: inset 0 0 0 1px rgba(201,162,39,0.55); }
      .btn-wa:hover { background: var(--wa-dark); color: var(--gold-bright); }
      .btn-gold { background: var(--gold-grad); color: #221a02; box-shadow: 0 6px 18px rgba(201, 162, 39, 0.28); }
      .btn-gold:hover { filter: brightness(1.08); }
      .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
      .btn-head { padding: 0.5rem 0.95rem; font-size: 0.95rem; }
      @media (max-width: 720px) {
        nav.main a.nl { display: none; }
        .site-in { gap: 0.6rem; }
        .brand { gap: 0.5rem; }
        .brand img { width: 38px; height: 38px; }
        .brand .bname { font-size: 1.05rem; }
        .brand .btag { font-size: 0.7rem; line-height: 1.25; }
        /* Header WhatsApp button becomes icon-only so it never covers the brand text */
        nav.main .btn-head { font-size: 0; gap: 0; padding: 0.55rem 0.62rem; }
        nav.main .btn-head svg { width: 22px; height: 22px; }
      }
      @media (max-width: 360px) {
        .brand .bname { font-size: 0.95rem; }
        .brand .btag { font-size: 0.66rem; }
        .brand img { width: 34px; height: 34px; }
      }

      /* ---------- Hero ---------- */
      .hero {
        background:
          radial-gradient(640px 420px at 80% 42%, rgba(238, 207, 110, 0.20), rgba(238, 207, 110, 0) 64%),
          radial-gradient(520px 340px at 8% 0%, rgba(201, 162, 39, 0.10), rgba(201, 162, 39, 0) 60%),
          linear-gradient(168deg, #17171c 0%, #0a0a0c 55%, #050506 100%);
        color: #f2efe6;
        border-bottom: 1px solid rgba(217, 184, 63, 0.22);
      }
      .hero-in { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 2.2rem; align-items: center; padding: 2.6rem 0 2.8rem; }
      .hero h1 { font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; font-weight: 800; font-size: clamp(1.7rem, 4.6vw, 2.7rem); line-height: 1.25; margin: 0 0 0.7rem; }
      .hero h1 .gold { color: var(--gold-bright); }
      .hero p.lead { font-size: 1.08rem; color: #d6d0c2; margin: 0 0 1.4rem; max-width: 34rem; }
      .hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
      .hero-logo { justify-self: center; width: min(320px, 78vw); }
      .hero-logo img { filter: drop-shadow(0 18px 32px rgba(0,0,0,0.35)); }
      .trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 1.9rem; }
      .trust .t {
        background: rgba(255,255,255,0.06); border: 1px solid rgba(233,199,103,0.35);
        border-radius: var(--radius); padding: 0.8rem 0.9rem;
      }
      .trust .t svg { width: 24px; height: 24px; color: var(--gold-bright); margin-bottom: 0.3rem; }
      .trust .t b { display: block; font-size: 1rem; line-height: 1.35; }
      .trust .t span { font-size: 0.86rem; color: #c9c2b2; }
      @media (max-width: 820px) {
        .hero-in { grid-template-columns: 1fr; padding-top: 1.8rem; }
        .hero-logo { order: -1; width: min(210px, 60vw); }
        .trust { grid-template-columns: 1fr; }
      }

      /* ---------- Sections ---------- */
      section.block { padding: 2.8rem 0 0.6rem; }
      .sec-head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
      .sec-head h2 { font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; font-weight: 700; font-size: clamp(1.45rem, 3.4vw, 1.9rem); margin: 0; }
      .sec-head .rule { flex: 1; height: 2px; background: var(--gold-grad); opacity: 0.75; min-width: 40px; align-self: center; }
      .sec-sub { color: var(--muted); margin: 0 0 1.4rem; max-width: 46rem; }

      /* ---------- Catalog ---------- */
      .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
      .chip {
        font-family: inherit; font-size: 0.95rem; font-weight: 500;
        padding: 0.35rem 0.95rem; border-radius: 999px; cursor: pointer;
        background: var(--surface); color: var(--ink); border: 1.5px solid var(--line);
      }
      .chip[aria-pressed="true"] { background: var(--gold-grad); border-color: transparent; color: #221a02; font-weight: 600; }
      .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
      .card {
        background: linear-gradient(180deg, #1b1b20, #121215);
        border: 1px solid rgba(217, 184, 63, 0.20); border-radius: var(--radius);
        overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow);
      }
      .card .ph { aspect-ratio: 1 / 1; background: var(--surface-2); }
      .card .ph img { width: 100%; height: 100%; object-fit: cover; }
      .card .bd { padding: 0.9rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
      .card .cat { font-size: 0.8rem; color: var(--gold-ink); font-weight: 600; }
      .card h3 { margin: 0; font-size: 1.06rem; line-height: 1.4; font-weight: 600; }
      .card .price { margin-top: auto; padding-top: 0.4rem; font-size: 1.3rem; font-weight: 700; color: var(--gold-bright); }
      .card .price small { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
      .card .btn { justify-content: center; margin-top: 0.5rem; }
      .soon {
        border: 2px dashed rgba(217, 184, 63, 0.65); border-radius: var(--radius);
        background:
          radial-gradient(420px 200px at 50% 0%, rgba(217, 184, 63, 0.10), rgba(217, 184, 63, 0) 70%),
          linear-gradient(180deg, #1a1a1f, #111113);
        padding: 2.4rem 1.4rem; text-align: center;
      }
      .soon svg { width: 52px; height: 52px; color: var(--gold); margin: 0 auto 0.7rem; }
      .soon h3 { font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; font-size: 1.4rem; margin: 0 0 0.4rem; }
      .soon p { color: var(--muted); margin: 0 auto 1.2rem; max-width: 30rem; }

      /* ---------- Steps ---------- */
      .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
      .step { background: linear-gradient(180deg, #1b1b20, #121215); border: 1px solid rgba(217, 184, 63, 0.18); border-radius: var(--radius); padding: 1.1rem 1rem; box-shadow: var(--shadow); }
      .step .n {
        width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
        background: var(--gold-grad); color: #221a02; font-family: "Baloo Da 2", sans-serif; font-weight: 700; font-size: 1.15rem; margin-bottom: 0.55rem;
      }
      .step b { display: block; font-size: 1.02rem; margin-bottom: 0.2rem; }
      .step p { margin: 0; color: var(--muted); font-size: 0.93rem; }
      @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

      /* ---------- Tracking ---------- */
      .track-box { background: linear-gradient(180deg, #1b1b20, #121215); border: 1px solid rgba(217, 184, 63, 0.20); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.4rem; }
      .track-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
      .track-form input {
        flex: 1 1 240px; font-family: inherit; font-size: 1.05rem;
        padding: 0.65rem 0.9rem; border-radius: 10px; border: 1.5px solid var(--line);
        background: var(--bg); color: var(--ink);
      }
      .track-form input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
      .track-note { color: var(--muted); font-size: 0.93rem; margin: 0.7rem 0 0; }
      .track-result { margin-top: 1.3rem; display: none; }
      .track-result.show { display: block; }
      .tr-head { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; }
      .tr-head div span { display: block; font-size: 0.82rem; color: var(--muted); }
      .tr-head div b { font-size: 1.02rem; }
      .stages { list-style: none; margin: 0; padding: 0; }
      .stages li { position: relative; padding: 0 0 1.35rem 2.6rem; }
      .stages li:last-child { padding-bottom: 0.2rem; }
      .stages li::before {
        content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--line);
      }
      .stages li:last-child::before { display: none; }
      .stages li.done::before { background: var(--gold); }
      .stages .dot {
        position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%;
        display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--line); color: var(--muted);
      }
      .stages .dot svg { width: 16px; height: 16px; }
      .stages li.done .dot { background: var(--gold-grad); border-color: transparent; color: #221a02; }
      .stages li.now .dot { background: var(--gold-grad); border-color: transparent; color: #221a02; }
      .stages b { display: block; font-size: 1.03rem; line-height: 1.35; }
      .stages li:not(.done):not(.now) b { color: var(--muted); }
      .stages span { font-size: 0.9rem; color: var(--muted); }
      .stages .badge {
        display: inline-block; font-size: 0.78rem; font-weight: 600; color: #221a02;
        background: var(--gold-grad); border-radius: 999px; padding: 0.05rem 0.6rem; margin-left: 0.45rem; vertical-align: 2px;
      }
      .notfound {
        border: 1.5px solid var(--danger); border-radius: 10px; padding: 1rem 1.1rem;
        background: color-mix(in srgb, var(--danger) 6%, var(--surface));
      }
      .notfound b { color: var(--danger); }
      .notfound p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.95rem; }

      /* ---------- Info ---------- */
      .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
      .info-card { background: linear-gradient(180deg, #1b1b20, #121215); border: 1px solid rgba(217, 184, 63, 0.18); border-radius: var(--radius); padding: 1.15rem 1.2rem; box-shadow: var(--shadow); }
      .info-card .ih { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
      .info-card .ih svg { width: 24px; height: 24px; color: var(--gold-ink); flex: none; }
      .info-card h3 { margin: 0; font-size: 1.08rem; font-weight: 600; }
      .info-card p { margin: 0; color: var(--muted); font-size: 0.97rem; }
      @media (max-width: 720px) { .info-grid { grid-template-columns: 1fr; } }

      /* ---------- Contact / footer ---------- */
      .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2.6rem; }
      .contact-card { border-radius: var(--radius); padding: 1.4rem; color: #fff; display: flex; flex-direction: column; gap: 0.3rem; }
      .contact-card.wa { background: linear-gradient(160deg, #1d1a10, #0c0c0e 60%); border: 1px solid rgba(217, 184, 63, 0.45); }
      .contact-card.ms { background: linear-gradient(160deg, #1b1b20, #101013 60%); border: 1px solid rgba(217, 184, 63, 0.22); }
      .contact-card svg { width: 30px; height: 30px; }
      .contact-card h3 { margin: 0.2rem 0 0; font-size: 1.2rem; }
      .contact-card p { margin: 0 0 0.9rem; color: rgba(255,255,255,0.85); font-size: 0.95rem; }
      .contact-card .btn { align-self: flex-start; background: var(--gold-grad); color: #17171a; margin-top: auto; }
      .contact-card.ms .btn { color: #17171a; }
      @media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }
      footer.site { position: relative; background: radial-gradient(700px 260px at 50% 0%, rgba(217,184,63,0.10), rgba(217,184,63,0) 65%), linear-gradient(180deg, #0b0b0e, #050506); color: #b8b1a1; margin-top: 3.2rem; font-family: "Hind Siliguri", system-ui, sans-serif; }
      footer.site::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gold-grad); }
      .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 2rem; padding: 2.4rem 0 1.8rem; }
      .foot-brand { display: flex; gap: 0.85rem; align-items: flex-start; }
      .foot-brand img { width: 52px; height: 52px; object-fit: contain; flex: none; }
      .foot-name { font-family: "Baloo Da 2", sans-serif; font-weight: 800; font-size: 1.3rem; color: #fff; line-height: 1.15; letter-spacing: 0.01em; }
      .foot-name em { font-style: normal; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
      .foot-tag { font-size: 0.9rem; color: #a79f8e; margin-top: 0.25rem; line-height: 1.5; max-width: 20rem; }
      .foot-h { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright); margin: 0.2rem 0 0.85rem; }
      .foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.95rem; }
      .foot-links a { text-decoration: none; color: #cfc8b8; }
      .foot-links a:hover { color: var(--gold-bright); }
      .foot-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.95rem; color: #cfc8b8; }
      .foot-contact b { color: #fff; font-weight: 600; }
      .foot-bar { border-top: 1px solid rgba(217,184,63,0.18); padding: 1rem 0 1.3rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; align-items: center; font-size: 0.85rem; color: #8f887a; }
      .foot-bar .sp { flex: 1; }
      @media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 1.9rem; } }

      /* ---------- Standalone page head ---------- */
      .page-head { padding: 2.2rem 0 0.4rem; }
      .page-head h2 { font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2rem); margin: 0; }
      nav.main a.nl.active { color: var(--gold-bright); }

      /* ---------- Tracking journey ---------- */
      .journey { margin-top: 1.2rem; border: 1px solid rgba(217,184,63,0.3); border-radius: 12px; padding: 1.1rem 1.15rem; background: rgba(217,184,63,0.05); }
      .journey h4 { margin: 0 0 0.3rem; font-size: 1.08rem; font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; }
      .journey p { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.94rem; }
      .journey .tnum { font-weight: 700; color: var(--gold-bright); letter-spacing: 0.03em; word-break: break-all; }
      .journey-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }

      /* ---------- Admin ---------- */
      .admin-note { border: 1.5px solid rgba(217,184,63,0.5); border-radius: 12px; padding: 1rem 1.15rem; background: rgba(217,184,63,0.06); margin-bottom: 1.4rem; }
      .admin-note b { color: var(--gold-bright); }
      .admin-note p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.95rem; }
      .admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2.4rem; align-items: start; }
      @media (max-width: 820px) { .admin-grid { grid-template-columns: 1fr; } }
      .admin-card { background: linear-gradient(180deg, #1b1b20, #121215); border: 1px solid rgba(217,184,63,0.2); border-radius: var(--radius); padding: 1.15rem 1.2rem; box-shadow: var(--shadow); }
      .admin-card h3 { margin: 0 0 0.8rem; font-size: 1.1rem; font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; }
      .admin-card label { display: block; font-size: 0.88rem; color: var(--muted); margin: 0.6rem 0 0.25rem; }
      .admin-card input, .admin-card select, .admin-card textarea { width: 100%; font-family: inherit; font-size: 0.98rem; padding: 0.55rem 0.75rem; border-radius: 9px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); }
      .admin-card input:focus, .admin-card select:focus, .admin-card textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
      .admin-card .btn { margin-top: 0.85rem; }
      .admin-list { list-style: none; margin: 0.9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
      .admin-list li { display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--line); border-radius: 9px; padding: 0.5rem 0.7rem; font-size: 0.93rem; }
      .admin-list li .grow { flex: 1; min-width: 0; }
      .admin-list li small { display: block; color: var(--muted); word-break: break-all; }
      .mini-btn { font-family: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer; flex: none; }
      .mini-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
      .mini-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
      .admin-msg { font-size: 0.92rem; color: var(--gold-bright); min-height: 1.3em; margin: 0.6rem 0 0; }
      .admin-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
      .fab {
        position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
        width: 56px; height: 56px; border-radius: 50%; background: #08080a;
        display: grid; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,0.3), inset 0 0 0 1.5px var(--gold);
      }
      .fab svg { width: 30px; height: 30px; color: var(--gold-bright); }
      /* ---------- Side menu (three-dot) ---------- */
      [hidden] { display: none !important; }
      .menu-btn {
        width: 44px; height: 44px; border-radius: 50%; flex: none;
        background: linear-gradient(160deg, #24241f, #0c0c0e);
        border: 1.5px solid rgba(233, 199, 103, 0.65);
        color: var(--gold-bright); display: grid; place-items: center; cursor: pointer;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }
      .menu-btn svg { width: 20px; height: 20px; }
      .menu-btn:hover { border-color: var(--gold-bright); box-shadow: 0 4px 18px rgba(217, 184, 63, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10); }
      .scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.62); }
      .side-panel {
        position: fixed; top: 0; left: 0; z-index: 80; height: 100dvh;
        width: min(320px, 86vw); overflow-y: auto;
        background: linear-gradient(180deg, #17171c, #0a0a0c);
        border-right: 1px solid rgba(217, 184, 63, 0.35);
        box-shadow: 18px 0 40px rgba(0, 0, 0, 0.5);
        transform: translateX(-105%); visibility: hidden;
        transition: transform 0.28s ease, visibility 0s linear 0.28s;
        padding: 1rem 1.1rem 1.6rem;
      }
      .side-panel.open { transform: translateX(0); visibility: visible; transition: transform 0.28s ease; }
      .sp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
      .sp-title { font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--gold-bright); }
      .icon-btn {
        width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
        background: transparent; border: 1px solid var(--line); color: var(--ink); cursor: pointer; flex: none;
      }
      .icon-btn svg { width: 18px; height: 18px; }
      .icon-btn:hover { border-color: var(--gold); color: var(--gold-bright); }
      .sp-nav { display: flex; flex-direction: column; }
      .sp-nav a {
        text-decoration: none; font-weight: 500; font-size: 1.02rem;
        padding: 0.55rem 0.4rem; border-bottom: 1px solid rgba(217, 184, 63, 0.14);
      }
      .sp-nav a:hover { color: var(--gold-bright); }
      .sp-sec { margin: 1.3rem 0 0.5rem; font-weight: 700; font-size: 0.95rem; color: var(--gold-ink); }
      .sp-cats { display: flex; flex-direction: column; gap: 0.4rem; }
      .sp-cat {
        display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
        font-family: inherit; font-size: 1rem; font-weight: 500; text-align: left;
        padding: 0.55rem 0.75rem; border-radius: 10px; cursor: pointer;
        background: var(--surface); color: var(--ink); border: 1px solid var(--line);
      }
      .sp-cat:hover { border-color: var(--gold); }
      .sp-cat .cnt {
        font-size: 0.82rem; font-weight: 700; color: #221a02; background: var(--gold-grad);
        border-radius: 999px; padding: 0.02rem 0.55rem;
      }

      /* ---------- Search ---------- */
      .search-bar { position: relative; margin-bottom: 1rem; max-width: 560px; }
      .search-bar > svg {
        position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
        width: 20px; height: 20px; color: var(--muted); pointer-events: none;
      }
      .search-bar input {
        width: 100%; font-family: inherit; font-size: 1.03rem;
        padding: 0.65rem 0.9rem 0.65rem 2.6rem; border-radius: 10px;
        border: 1.5px solid var(--line); background: var(--bg); color: var(--ink);
      }
      .search-bar input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }

      /* ---------- Pages ---------- */
      .page { display: none; }
      .page.active { display: block; }

      /* ---------- Home category tiles ---------- */
      .cat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
      .cat-tile {
        display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
        font-family: inherit; font-size: 1.05rem; font-weight: 600; text-align: left;
        padding: 1.05rem 1.15rem; border-radius: var(--radius); cursor: pointer;
        background: linear-gradient(180deg, #1b1b20, #121215); color: var(--ink);
        border: 1px solid rgba(217, 184, 63, 0.20); box-shadow: var(--shadow);
      }
      .cat-tile:hover { border-color: var(--gold); }
      .cat-tile .cnt {
        font-size: 0.82rem; font-weight: 700; color: #221a02; background: var(--gold-grad);
        border-radius: 999px; padding: 0.02rem 0.55rem; flex: none; white-space: nowrap;
      }
      .cat-tile .cnt.zero { background: var(--surface-2); color: var(--muted); }

      /* ---------- Product page ---------- */
      .card { cursor: pointer; }
      .prod-back { margin-bottom: 1.3rem; }
      .detail-top { display: grid; grid-template-columns: 300px 1fr; gap: 1.4rem; }
      .detail-img { aspect-ratio: 1 / 1; background: var(--surface-2); border-radius: 10px; overflow: hidden; }
      .detail-img img { width: 100%; height: 100%; object-fit: cover; }
      .detail-info .cat { font-size: 0.85rem; color: var(--gold-ink); font-weight: 600; }
      .detail-info h3 { margin: 0.2rem 0 0.5rem; font-size: 1.5rem; line-height: 1.35; }
      .detail-desc { color: var(--muted); margin: 0 0 0.8rem; }
      .detail-code { color: var(--muted); font-size: 0.92rem; margin: 0 0 0.8rem; }
      .detail-code b { color: var(--ink); letter-spacing: 0.02em; }
      .detail-info .price { font-size: 1.6rem; font-weight: 700; color: var(--gold-bright); margin-bottom: 1rem; }
      .detail-info .price small { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
      .sugg { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
      .sugg h4 { margin: 0 0 0.9rem; font-size: 1.15rem; font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; }
      .sugg-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
      .sugg-none { color: var(--muted); margin: 0; }
      @media (max-width: 640px) {
        .detail-top { grid-template-columns: 1fr; }
        .detail-img { max-width: 320px; }
      }

      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .btn { transition: none; }
        .side-panel { transition: none; }
      }

      /* ---------- Home trust cards as modal triggers ---------- */
      .trust button.t { font-family: inherit; color: inherit; text-align: left; cursor: pointer; }
      .trust button.t:hover { border-color: rgba(233, 199, 103, 0.75); }
      .trust button.t:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

      /* ---------- Info modals (home trust cards) ---------- */
      .modal-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.7); }
      .modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 1rem; }
      .modal-box {
        width: min(540px, 100%); max-height: 86dvh; overflow-y: auto; position: relative;
        background: linear-gradient(180deg, #1b1b20, #121215);
        border: 1px solid rgba(217, 184, 63, 0.45); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 1.4rem 1.4rem 1.2rem;
      }
      .modal-box h3 { margin: 0 0 0.6rem; padding-right: 2.2rem; font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; font-size: 1.3rem; color: var(--gold-bright); }
      .modal-body p { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.98rem; }
      .modal-body p:last-child { margin-bottom: 0; }
      .modal-body a { color: var(--gold-bright); }
      .modal-body .pay-line { color: var(--ink); font-size: 1.05rem; }
      .modal-body .pay-line b { color: var(--gold-bright); letter-spacing: 0.02em; }
      .modal-close {
        position: absolute; top: 0.7rem; right: 0.7rem; width: 36px; height: 36px; border-radius: 9px;
        display: grid; place-items: center; background: transparent; border: 1px solid var(--line);
        color: var(--ink); cursor: pointer; flex: none;
      }
      .modal-close svg { width: 18px; height: 18px; }
      .modal-close:hover { border-color: var(--gold); color: var(--gold-bright); }

      /* ---------- Home category tile arrow ---------- */
      .cat-tile .go { color: var(--gold-bright); font-size: 1.35rem; line-height: 1; flex: none; }

/* Product image guard: a transparent overlay covers each
   photo, so right-click and drag land on the overlay, not
   the image. The watermark baked in at upload brands any
   copy that still gets taken (a screenshot always works,
   so no image on the web is ever fully undownloadable). */
.img-guard { position: relative; overflow: hidden; }
.img-guard::after { content: ""; position: absolute; inset: 0; background: transparent; z-index: 2; }
.img-guard img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Product gallery: main photo + clickable thumbnails. */
.detail-gallery { display: flex; flex-direction: column; gap: 0.6rem; }
.gallery-thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gthumb { padding: 0; border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); cursor: pointer; width: 64px; height: 64px; }
.gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gthumb.active { border-color: var(--gold); }