/* ==========================================================================
   IT Soft BD — MOBILE APP MODE
   Everything here lives inside a mobile media query, so the desktop layout is
   byte-for-byte untouched. Gives the phone experience a native-app shell:
   a compact app bar, a slide-in drawer, a fixed bottom tab bar with safe-area
   insets, bottom-sheet filters, a sticky buy bar and touch-native tap states.
   Palette: --brand / --gray / --cyan and their tints only.
   ========================================================================== */

/* ---------- markup that is app-only: hidden until the mobile query ---------- */
.app-tabbar,
.nav-toggle,
.search-toggle,
.nav-scrim,
.sheet-scrim { display:none; }

.nav-drawer-head,
.tabbar-badge,
.buybar,
.app-only { display:none; }

/* =========================== MOBILE ====================================== */
@media (max-width:900px){

  /* ---------- page shell ---------- */
  html{ -webkit-tap-highlight-color:transparent; }
  body{
    padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px));
    overscroll-behavior-y:none;
  }
  body.nav-open{ overflow:hidden; }

  /* ---------- compact app bar ---------- */
  .site-header{
    position:fixed; inset:0 0 auto 0; z-index:120;
    background:color-mix(in srgb, #fff 92%, transparent);
    backdrop-filter:saturate(180%) blur(16px);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    border-bottom:var(--hairline);
    padding-top:env(safe-area-inset-top, 0px);
  }
  .site-header::before{ height:2px; }
  .head-row{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:.5rem;
    min-height:56px;
    padding-block:.35rem;
  }
  body{ padding-top:calc(58px + env(safe-area-inset-top, 0px)); }

  .brand .brand-text small{ display:none; }
  .brand .brand-text strong{ font-size:1rem; }
  .brand-mark{ width:34px; height:34px; border-radius:10px; font-size:.82rem; }

  /* the desktop nav and the inline search become drawer / sheet content */
  .head-nav,
  .head-search{ display:none; }
  .head-actions{ display:none; }

  /* ---------- app bar buttons ---------- */
  .app-bar-actions{
    display:flex !important;
    align-items:center;
    gap:.15rem;
  }
  .app-bar-actions > a,
  .app-bar-actions > button{
    display:grid; place-items:center;
    width:44px; height:44px; padding:0;
    border:0; background:transparent; color:var(--gray);
    border-radius:12px; position:relative;
    transition:background var(--t-fast), transform var(--t-fast), color var(--t-fast);
  }
  .app-bar-actions > a:active,
  .app-bar-actions > button:active{ background:color-mix(in srgb, var(--brand) 9%, #fff); transform:scale(.93); }
  .app-bar-actions .ic{ width:22px; height:22px; }
  .app-bar-actions .count{
    position:absolute; top:5px; right:5px;
    min-width:17px; height:17px; padding:0 4px;
    display:grid; place-items:center;
    background:var(--cyan); color:#083344;
    border-radius:999px; font-size:.62rem; font-weight:800; line-height:1;
  }

  /* ---------- slide-down search sheet ---------- */
  .app-search{
    display:block !important;
    grid-column:1 / -1;
    max-height:0; overflow:hidden;
    transition:max-height var(--t-base), opacity var(--t-fast), padding var(--t-base);
    opacity:0;
  }
  .app-search.open{ max-height:76px; opacity:1; padding-bottom:.5rem; }
  .app-search form{ display:flex; gap:.4rem; }
  .app-search input{
    flex:1; min-height:42px; border-radius:12px;
    background:color-mix(in srgb, var(--gray) 6%, #fff);
    border:var(--hairline);
  }
  .app-search button{
    min-height:42px; width:46px; display:grid; place-items:center;
    border:0; border-radius:12px; background:var(--brand); color:#fff;
  }

  /* ---------- drawer ---------- */
  .nav-toggle{ display:grid; }
  .nav-scrim{
    display:block; position:fixed; inset:0; z-index:130;
    background:color-mix(in srgb, var(--gray) 55%, transparent);
    opacity:0; visibility:hidden; transition:opacity var(--t-base), visibility var(--t-base);
  }
  body.nav-open .nav-scrim{ opacity:1; visibility:visible; }

  .head-nav{
    display:flex; flex-direction:column;
    position:fixed; top:0; right:0; z-index:140;
    /* The header carries backdrop-filter, which makes it the containing block
       for fixed descendants — so top:0/bottom:0 resolved against the ~63px
       header and the drawer rendered as a sliver. Pin an explicit viewport
       height instead of relying on the inset pair. */
    height:100vh;
    height:100dvh;
    width:min(84vw, 330px);
    padding:calc(env(safe-area-inset-top,0px) + 1rem) 1.1rem calc(1.4rem + env(safe-area-inset-bottom,0px));
    background:#fff;
    box-shadow:-18px 0 44px -28px color-mix(in srgb, var(--gray) 60%, transparent);
    transform:translateX(102%);
    transition:transform var(--t-slow);
    overflow-y:auto;
    gap:.2rem;
  }
  body.nav-open .head-nav{ transform:none; }

  .head-nav a{
    display:flex; align-items:center; justify-content:space-between;
    min-height:52px; padding:0 .85rem;
    border-radius:13px;
    font-size:1.02rem; font-weight:600; color:color-mix(in srgb, var(--gray) 92%, #000);
    transition:background var(--t-fast), color var(--t-fast);
  }
  .head-nav a:active{ background:color-mix(in srgb, var(--brand) 8%, #fff); color:var(--brand); }
  .head-nav a.is-current{ background:color-mix(in srgb, var(--brand) 8%, #fff); color:var(--brand); }
  .head-nav a::after{ content:""; width:7px; height:7px; border-radius:50%; background:transparent; }
  .head-nav a.is-current::after{ background:var(--cyan); }
  .head-nav .drawer-sep{ height:1px; background:var(--hairline); margin:.55rem .2rem; }
  .head-nav .drawer-actions{ display:grid; gap:.5rem; margin-top:.6rem; }
  .head-nav .drawer-actions .btn{ width:100%; }

  .nav-drawer-head{
    display:flex; align-items:center; gap:.6rem;
    padding-bottom:.8rem; margin-bottom:.5rem;
    border-bottom:var(--hairline);
  }
  .nav-drawer-head b{ font-size:1rem; }
  .nav-drawer-head button{
    margin-left:auto; width:40px; height:40px; display:grid; place-items:center;
    border:0; background:color-mix(in srgb, var(--gray) 7%, #fff);
    border-radius:11px; color:var(--gray); cursor:pointer;
  }
  .drawer-cur{
    display:flex; align-items:center; gap:.5rem;
    padding:.6rem .2rem; font-size:var(--fs-sm);
  }
  .drawer-cur select{ min-height:40px; }

  /* ---------- bottom tab bar ---------- */
  .app-tabbar{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    position:fixed; inset:auto 0 0 0; z-index:125;
    background:color-mix(in srgb, #fff 94%, transparent);
    backdrop-filter:saturate(180%) blur(18px);
    -webkit-backdrop-filter:saturate(180%) blur(18px);
    border-top:var(--hairline);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .app-tabbar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-height:50px;
    color:color-mix(in srgb, var(--gray) 58%, #fff);
    font-size:.64rem; font-weight:650; letter-spacing:.02em;
    text-decoration:none; position:relative;
    border-radius:14px;
    transition:color var(--t-fast), transform var(--t-fast);
  }
  .app-tabbar a .ic{ width:23px; height:23px; }
  .app-tabbar a:active{ transform:scale(.9); }
  .app-tabbar a.is-active{ color:var(--brand); }
  .app-tabbar a.is-active::before{
    content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
    width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--cyan);
  }
  .app-tabbar .count{
    position:absolute; top:2px; left:calc(50% + 6px);
    min-width:16px; height:16px; padding:0 4px;
    display:grid; place-items:center;
    background:var(--cyan); color:#083344;
    border-radius:999px; font-size:.6rem; font-weight:800;
  }

  /* ---------- content: app-like rhythm ---------- */
  .blk{ padding-block:2.2rem; }
  .wrap{ padding-inline:1rem; }
  .blk-head{ margin-bottom:1.2rem; gap:.6rem; }
  .blk-head h2{ font-size:1.35rem; }
  .blk-head p{ font-size:.86rem; }

  /* hero becomes a vertical app header */
  .hero-grid{ grid-template-columns:1fr; gap:1.1rem; }
  .hero h1{ font-size:1.75rem; line-height:1.15; }
  .hero .lead{ font-size:.92rem; }
  .cta-row{ gap:.5rem; }
  .cta-row .btn{ flex:1 1 auto; }
  .hero-card{ order:0; }

  /* 2-up product grid, image-forward */
  .cards.three, .cards.four, .cards.two{ grid-template-columns:repeat(2, 1fr); gap:.7rem; }
  .product-card{ border-radius:15px; }
  .product-card .pc-body{ padding:.7rem .75rem .85rem; }
  .product-card h3{ font-size:.86rem; line-height:1.3; }
  .product-card .pc-desc{ display:none; }
  .product-card .pc-meta{ font-size:.72rem; }
  .product-card .pc-actions{ display:none; }           /* tap the card, not a button */
  .product-card .pc-price .now{ font-size:.95rem; }
  .pc-badge, .pc-sale, .pc-top{ font-size:.62rem; padding:.15rem .5rem; }
  .pc-top{ display:none; }

  /* full-bleed tap targets everywhere */
  .btn{ min-height:48px; }
  .btn.sm{ min-height:42px; }

  /* the brand mark duplicates the name ("IT" + "IT Soft BD") — show the name only */
  .site-header .brand .brand-mark{ display:none; }
  .site-header .brand .brand-text strong{ font-size:1.06rem; letter-spacing:-.01em; }

  /* ---------- product page: sticky buy bar ---------- */
  .buybox{ position:static; }
  .buy-card{
    position:fixed; z-index:120;
    left:0; right:0; bottom:calc(64px + env(safe-area-inset-bottom, 0px));
    margin:0;
    border-radius:16px 16px 0 0;
    border:0; border-top:var(--hairline);
    box-shadow:0 -14px 34px -22px color-mix(in srgb, var(--gray) 65%, transparent);
    padding:.6rem .85rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background:#fff;
    display:flex; align-items:center; gap:.7rem;
  }
  .buy-card .buy-price{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
  .buy-card .buy-price .now{ font-size:1.15rem; font-weight:750; letter-spacing:-.02em; }
  .buy-card .buy-price s{ font-size:.72rem; }
  .buy-card .buy-price .save{ font-size:.68rem; }
  /* strip everything that makes the bar cramped on a phone */
  .buy-card table.kv,
  .buy-card .ticks,
  .buy-card > p,
  .buy-card > a.btn{ display:none; }
  .buy-card form{ flex:0 0 auto; }
  .buy-card form .btn{ min-width:138px; width:auto; }
  .buy-card.soft{ display:none; }                       /* secondary box folds away */
  .product-hero{ margin:.9rem 0; border-radius:15px; }
  body.has-buybar{ padding-bottom:calc(146px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- filters + tabs become bottom sheets ---------- */
  .filters{
    display:block;                      /* ui.css hides it; the sheet needs it in flow */
    position:fixed; z-index:140;
    left:0; right:0; bottom:0; top:auto;
    max-height:82vh; overflow-y:auto;
    border-radius:20px 20px 0 0;
    padding:1.1rem 1rem calc(1.3rem + env(safe-area-inset-bottom,0px));
    transform:translateY(102%);
    transition:transform var(--t-slow);
    margin:0;
  }
  body.sheet-open .filters{ transform:none; }
  .sheet-scrim{
    display:block; position:fixed; inset:0; z-index:135;
    background:color-mix(in srgb, var(--gray) 55%, transparent);
    opacity:0; visibility:hidden; transition:opacity var(--t-base), visibility var(--t-base);
  }
  body.sheet-open .sheet-scrim{ opacity:1; visibility:visible; }
  .sheet-grab{
    display:block; width:42px; height:4px; border-radius:999px;
    background:color-mix(in srgb, var(--gray) 22%, #fff);
    margin:0 auto .9rem;
  }
  .sheet-close{
    position:absolute; top:.7rem; right:.8rem;
    width:38px; height:38px; display:grid; place-items:center;
    border:0; border-radius:11px; background:color-mix(in srgb, var(--gray) 7%, #fff);
    color:var(--gray); cursor:pointer;
  }

  /* the button that opens the sheet */
  .filter-open{
    display:inline-flex !important;
    align-items:center; gap:.45em;
    min-height:44px; padding:0 1rem;
    border:var(--hairline); border-radius:12px; background:#fff;
    font-size:var(--fs-sm); font-weight:620; color:var(--gray);
  }
  .filter-open .ic{ width:17px; height:17px; }

  /* ---------- tables scroll like app lists ---------- */
  .table, .a-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .table thead, .a-table thead{ white-space:nowrap; }

  /* ---------- misc app polish ---------- */
  .to-top{ display:none; }                              /* the tab bar covers this */
  .chat-toggle{ bottom:calc(78px + env(safe-area-inset-bottom, 0px)); right:14px; width:52px; height:52px; }
  .chat-panel{
    left:14px; right:14px; bottom:calc(78px + env(safe-area-inset-bottom, 0px));
    width:auto; max-height:62vh;
    border-radius:18px;
  }
  /* Trust bar: two columns made each one ~169px wide, so "Full source code
     included" and "Secure hosted payments" each broke onto a second line while
     their neighbours stayed single — the block read as ragged. One row per
     label, sized so every one of them fits on a single line. */
  .pre-footer{ padding:6px 0; }
  .pf-grid{ grid-template-columns:1fr; gap:0; font-size:.86rem; }
  .pf-grid>div{ padding:13px 0; border-top:1px solid var(--line); }
  .pf-grid>div:first-child{ border-top:0; }
  .pf-grid .ic{ width:18px; height:18px; }
  .statsband-grid{ grid-template-columns:1fr 1fr; gap:.9rem; }
  .statsband b{ font-size:1.35rem; }
  .process{ grid-template-columns:1fr; gap:.7rem; }
  .site-footer{ padding-bottom:1rem; }
  .foot-grid{ gap:1.4rem; }
  .acc summary{ font-size:.92rem; min-height:52px; }
  .guarantee{ flex-direction:column; align-items:flex-start; gap:.5rem; }

  /* ---------- catalogue: compact bento + scrollable sort pills ---------- */
  .cat-bento{ grid-template-columns:repeat(2, 1fr); gap:.5rem; }
  .bento-tile{ padding:.8rem .85rem; border-radius:14px; }
  .bento-ic{ width:34px; height:34px; margin-bottom:.35rem; }
  .bento-tile b{ font-size:.84rem; }
  .bento-n{ font-size:.68rem; }
  .cat-hero{ padding-block:1.5rem 1.25rem; }
  .cat-hero h1{ font-size:1.5rem; }
  .quick-pills{ gap:.35rem; margin-top:1rem; overflow-x:auto; flex-wrap:nowrap; padding-bottom:.2rem; }
  .quick-pills::-webkit-scrollbar{ height:0; }
  .qpill{ flex:none; }
  .ptool{ gap:.6rem; }
  .ptool-r{ width:100%; justify-content:space-between; }
  .sortpills{ overflow-x:auto; flex-wrap:nowrap; max-width:100%; }
  .sortpills::-webkit-scrollbar{ height:0; }
  .spotlight-wrap{ padding-top:1.5rem; }
  .spot-body{ padding:1.1rem; gap:.85rem; }
  .plist{ grid-template-columns:1fr; gap:.85rem; margin-top:1rem; }
  .ptile-body{ padding:.85rem 1rem 1rem; }
  .ptile-media{ aspect-ratio:16/9; }
  .plist.is-list .ptile{ flex-direction:column; }
  .plist.is-list .ptile-media{ flex:none; aspect-ratio:16/9; }

  /* momentum scrolling + no rubber-band gaps */
  .head-nav, .filters{ overscroll-behavior:contain; }
  ::-webkit-scrollbar{ width:0; height:0; }
}

/* ---------- services menu inside the mobile drawer ---------- */
@media (max-width:900px){
  .head-nav .nav-drop{display:block; width:100%}
  .head-nav .nav-drop>summary{
    min-height:52px; padding:0 .85rem; margin:0;
    display:flex; align-items:center; justify-content:space-between;
    border-radius:13px;
    font-size:1.02rem; font-weight:600;
    color:color-mix(in srgb, var(--gray) 92%, #000);
  }
  .head-nav .nav-drop>summary:active{background:color-mix(in srgb, var(--brand) 8%, #fff)}
  .head-nav .nav-drop[open]>summary{border-radius:13px 13px 0 0}
  .head-nav .nav-drop>summary .caret{width:9px; height:9px; opacity:.5}

  .head-nav .nav-drop-panel{
    position:static; transform:none; width:auto; animation:none;
    border:0; box-shadow:none; background:transparent;
    padding:.15rem 0 .5rem .4rem;
    border-left:2px solid color-mix(in srgb, var(--brand) 18%, #fff);
    margin-left:.85rem;
  }
  .head-nav .nav-drop-all{
    background:transparent; padding:.5em .6em; margin-bottom:.2rem;
    justify-content:flex-start; flex-direction:column; align-items:flex-start; gap:.1em;
  }
  .head-nav .nav-drop-all b{font-size:.9rem}
  .head-nav .nav-drop-all span{font-size:.72rem}
  .head-nav .nav-drop-cols{display:block}
  .head-nav .nav-drop-col{margin-bottom:.35rem}
  .head-nav .nav-drop-cat{padding:.45em .6em .2em; font-size:.66rem}
  .head-nav .nav-drop-col a{
    min-height:42px; padding:0 .6rem; border-radius:10px;
    font-size:.92rem; font-weight:500;
  }
  .head-nav .nav-drop-col a .ic{width:16px; height:16px}
}

/* ---------- drawer polish: identity card, section labels, icon rows ---------- */
@media (max-width:900px){
  /* user / brand card at the top of the drawer */
  .nav-drawer-head{
    gap:.7rem; padding:.2rem 0 .9rem; margin-bottom:.4rem;
  }
  .nav-drawer-head .brand-mark{ width:42px; height:42px; border-radius:13px; font-size:.95rem; flex:none }
  .ndh-avatar{
    width:42px; height:42px; flex:none; display:grid; place-items:center;
    border-radius:13px; background:var(--grad); color:#fff;
    font-weight:800; font-size:.85rem; letter-spacing:.02em;
  }
  .ndh-info{ display:flex; flex-direction:column; min-width:0; flex:1 }
  .ndh-info b{ font-size:.98rem; line-height:1.25; color:var(--ink) }
  .ndh-info small{
    font-size:.74rem; color:var(--muted); line-height:1.3;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .nav-drawer-head button{
    width:38px; height:38px; flex:none; margin-left:0;
    background:color-mix(in srgb, var(--gray) 6%, #fff);
  }

  /* section labels */
  .drawer-label{
    display:block; padding:.9rem .85rem .35rem;
    font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
    color:var(--muted);
  }
  .head-nav .drawer-label:first-of-type{ padding-top:.2rem }

  /* every drawer row: leading icon + label */
  .head-nav a .ndl, .head-nav summary .ndl{ display:flex; align-items:center; gap:.8em; min-width:0 }
  .head-nav a .ndl .ic, .head-nav summary .ndl .ic{
    display:block; width:19px; height:19px; flex:none;
    color:color-mix(in srgb, var(--gray) 46%, #fff);
    transition:color var(--t-fast);
  }
  .head-nav a.is-current .ndl .ic, .head-nav a.is-active .ndl .ic{ color:var(--cyan) }
  .head-nav a .ndl>span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .head-nav summary .ndl{ font-weight:600 }

  /* account rows */
  .head-nav .drawer-actions a.drawer-link{
    justify-content:flex-start; gap:0; min-height:50px;
    font-size:.98rem; font-weight:560;
  }
  .head-nav .drawer-actions a.drawer-link .ic{ width:19px; height:19px }
  .head-nav .drawer-actions a.drawer-link:active{ background:color-mix(in srgb, var(--brand) 9%, #fff) }
  .head-nav .drawer-actions a.drawer-link.out{
    background:color-mix(in srgb, var(--gray) 5%, #fff);
    color:color-mix(in srgb, var(--gray) 62%, #fff);
    margin-top:.35rem;
  }
  .head-nav .drawer-actions a.drawer-link.out .ic{ transform:rotate(90deg) }
  .head-nav .drawer-actions a.drawer-link.primary{
    background:var(--brand); color:#fff;
  }
  .head-nav .drawer-actions a.drawer-link.primary .ic{ color:#fff }

  /* currency row keeps its label aligned with the icon rows */
  .drawer-cur{ padding:.35rem .85rem .5rem; gap:.8rem }
  .drawer-cur .ndl{ display:flex; align-items:center; gap:.8em; font-weight:560; font-size:.98rem }
  .drawer-cur .ndl .ic{ width:19px; height:19px; color:color-mix(in srgb, var(--gray) 46%, #fff) }
  .drawer-cur select{ min-height:42px; border-radius:11px }

  .head-nav .nav-drop-all{ padding-left:.85rem }
  .head-nav .nav-drop-all b{ font-size:.92rem }
}

/* ---------- layering fix: the drawer must sit ABOVE the scrim ----------
   .site-header carries backdrop-filter, so it creates a stacking context and
   every descendant — including .head-nav at z-index 140 — is painted inside
   the header's own layer (z-index 120). The scrim was at 130, so it covered
   the whole drawer and swallowed every tap, closing it instead. The scrim
   therefore has to sit BELOW the header, which also keeps the tab bar out of
   the way while the drawer is open. */
@media (max-width:900px){
  .nav-scrim{ z-index:110; }          /* below .site-header (120) -> drawer is tappable */
  .app-tabbar{ z-index:100; }         /* below the scrim, so it dims while the drawer is open */

  /* the scrim can no longer dim the header, so dim the app bar itself —
     pointer-events:none keeps the menu/close buttons working */
  body.nav-open .site-header::after{
    content:""; position:absolute; inset:0; z-index:0;
    background:color-mix(in srgb, var(--gray) 55%, transparent);
    pointer-events:none;
  }
  body.nav-open .app-tabbar{ opacity:.45; }
  /* the drawer paints above both */
  body.nav-open .head-nav{ z-index:140; }
}

/* ==========================================================================
   HOMEPAGE — NATIVE APP HOME SCREEN (phones only)
   v2.css also ships ≤900px rules and this file loads BEFORE it, so a plain
   selector here loses on source order. Every rule below is scoped `body .v2 …`
   so it wins on specificity no matter which sheet comes last.
   ========================================================================== */
@media (max-width:900px){

  /* ---------- quick launcher + category rail ---------- */
  body .v2 .app-home{ display:block; background:#fff; padding:16px 0 0; }

  body .v2 .app-quick{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:0 22px; }
  body .v2 .aq{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:13px 4px 11px;
    background:#F8F9FB; border:1px solid #E5E7EB; border-radius:14px; color:#374151;
    font-size:11.4px; font-weight:650; text-align:center; min-height:0; transition:transform .12s, background .12s; }
  body .v2 .aq:active{ transform:scale(.96); background:#E8EDF8; }
  body .v2 .aq-ic{ width:40px; height:40px; border-radius:12px; background:#E8EDF8; color:#1E3A8A; display:grid; place-items:center; }
  body .v2 .aq-ic .ic{ width:20px; height:20px; }

  body .v2 .app-catbar{ margin-top:15px; }
  body .v2 .app-cats{ display:flex; gap:9px; overflow-x:auto; padding:2px 22px 12px;
    scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
  body .v2 .app-cats::-webkit-scrollbar{ display:none; }
  body .v2 .app-cat{ flex:0 0 auto; scroll-snap-align:start; display:flex; flex-direction:column; gap:1px;
    padding:10px 14px; background:#fff; border:1px solid #E5E7EB; border-radius:12px; min-width:110px; }
  body .v2 .app-cat:active{ background:#E8EDF8; border-color:#1E3A8A; }
  body .v2 .app-cat b{ font-size:12.8px; font-weight:700; color:#374151; white-space:nowrap; }
  body .v2 .app-cat small{ font-size:11px; color:#6B7280; }

  /* ---------- hero: compact app banner ---------- */
  body .v2 .v2-hero{ min-height:0; padding:26px 0 24px; }
  body .v2 .v2-hero-in{ display:block; }
  body .v2 .v2-hero-badge{ font-size:11.4px; padding:6px 12px; margin-bottom:12px; }
  body .v2 .v2-hero-copy h1{ font-size:25px; line-height:1.17; margin-bottom:10px; }
  body .v2 .v2-hero-copy p{ font-size:14.4px; line-height:1.5; margin:0 0 18px; }
  /* 1fr 1fr lets a long label push past the wrap; minmax(0,…) contains it */
  body .v2 .v2-hero-btns{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  body .v2 .v2-hero-btns .v2-btn{ width:100%; justify-content:center; padding:13px 6px; font-size:13.6px; }
  /* the two figures in here repeat .v2-strip two blocks down — one screen, one figure */
  body .v2 .v2-hero-r{ display:none; }
  /* dots imply a carousel that does not exist */
  body .v2 .v2-dots{ display:none; }

  /* ---------- section rhythm ---------- */
  body .v2 .v2-sec{ padding:26px 0; }
  body .v2 .v2-sec-head{ margin-bottom:16px; }
  body .v2 .v2-sec-head h2{ font-size:19.5px; line-height:1.26; }
  body .v2 .v2-sec-head p{ font-size:13.8px; line-height:1.55; margin-top:8px; }
  body .v2 .v2-eyebrow{ font-size:10.8px; }

  /* ---------- stats strip ---------- */
  body .v2 .v2-strip-row{ padding-top:18px; padding-bottom:18px; gap:14px; }
  body .v2 .v2-strip-row b{ font-size:20.5px; }
  body .v2 .v2-strip-row span{ font-size:11.6px; }

  /* ---------- services + hosting: swipe rails, not one-per-row stacks ---------- */
  body .v2 .v2-grid4,
  body .v2 .v2-band{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding:2px 22px 12px; margin:0 -22px; scrollbar-width:none; -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch; }
  body .v2 .v2-grid4::-webkit-scrollbar,
  body .v2 .v2-band::-webkit-scrollbar{ display:none; }
  body .v2 .v2-grid4 > .v2-card{ flex:0 0 79%; scroll-snap-align:center; }
  body .v2 .v2-band > .v2-card{ flex:0 0 74%; scroll-snap-align:center; }
  body .v2 .v2-card{ padding:17px 18px 19px; }
  body .v2 .v2-card h3{ font-size:15.8px; }
  body .v2 .v2-card p{ font-size:13.4px; line-height:1.5; }
  body .v2 .v2-card .v2-bar{ display:none; }
  body .v2 .v2-cico{ width:40px; height:40px; border-radius:11px; }
  body .v2 .v2-cico .ic{ width:19px; height:19px; }
  body .v2 .v2-more{ font-size:13.2px; }

  /* ---------- stories ---------- */
  body .v2 .v2-stories{ padding:28px 0; }
  body .v2 .v2-stories-head{ margin-bottom:16px; }
  body .v2 .v2-arrows{ display:none; }          /* the rail itself is swipeable on touch */
  body .v2 .v2-rail{ padding:2px 22px 12px; margin:0 -22px; }
  body .v2 .v2-story{ flex:0 0 80%; scroll-snap-align:center; }
  body .v2 .v2-shot{ min-height:104px; }

  /* ---------- products + blog: 2-up app grid instead of one giant card per screen ---------- */
  body .v2 .cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; align-items:stretch; }
  body .v2 .cards .card{ border-radius:11px; display:flex; flex-direction:column; }
  body .v2 .cards .pc-media{ aspect-ratio:16/11; border-radius:11px 11px 0 0; }
  body .v2 .cards .pc-body{ padding:11px 12px 13px; flex:1; display:flex; flex-direction:column; }
  body .v2 .cards .pc-body h3{ font-size:12.9px; line-height:1.3; margin-bottom:6px; }
  body .v2 .cards .pc-desc{ display:none; }     /* keeps the two columns' rows even */
  /* a 2-up card is only ~168px wide, so the category badge and the Save pill
     overlapped by 28px at 390px. The category is already a chip in the rail
     above, so keep the discount and drop the badge. */
  body .v2 .cards .pc-badge{ display:none; }
  body .v2 .cards .pc-sale{ font-size:9.2px; padding:3px 6px; }
  /* 5 stars + rating + "255 sold" in ~144px of content: nowrap clipped it by
     3px, so allow the row to wrap instead — it stays on one line when it fits
     and drops the count to a second line when it does not. */
  body .v2 .cards .pc-meta{ font-size:9.4px; gap:4px; flex-wrap:wrap; margin-bottom:7px; }
  body .v2 .cards .pc-meta .small{ white-space:nowrap; }
  body .v2 .cards .stars .ic{ width:10px; height:10px; }
  body .v2 .cards .stars{ font-size:9.4px; gap:1px; }
  body .v2 .cards .pc-price{ margin-bottom:0; gap:7px; flex-wrap:wrap; }
  body .v2 .cards .pc-price .now{ font-size:14px; }
  body .v2 .cards .pc-price s{ font-size:11px; }
  /* clamp the title so both columns' rows stay level */
  body .v2 .cards .pc-body h3{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  body .v2 .cards .v2-more{ margin-top:auto; font-size:12.4px; }
  body .v2 .cards + p{ margin-top:18px !important; }
  body .v2 .cards + p .v2-btn{ width:100%; justify-content:center; }

  /* ---------- closing CTA ---------- */
  body .v2 .v2-cta{ padding:34px 0; }
  body .v2 .v2-cta h2{ font-size:20px; line-height:1.25; }
  body .v2 .v2-cta p{ font-size:13.8px; line-height:1.55; }
  body .v2 .v2-btns{ flex-direction:column; gap:10px; }
  body .v2 .v2-btns .v2-btn{ width:100%; justify-content:center; }

  /* ---------- promo strip: stop the link breaking mid-phrase ---------- */
  body .promo{ flex-wrap:wrap; row-gap:4px; font-size:12.5px; padding-top:9px; padding-bottom:9px; }
  body .promo > a{ white-space:nowrap; }
  body .promo .ic{ flex:none; width:15px; height:15px; }
}

/* ==========================================================================
   MOBILE DRAWER — refined:  tinted icon tiles, a brand pill for the current
   page, and a support footer. Deep Blue #1E3A8A / Dark Gray #374151 /
   Bright Cyan #06B6D4 only.
   Loaded after the base drawer rules, so equal specificity + later wins.
   ========================================================================== */
@media (max-width:900px){

  /* ---------------- panel ---------------- */
  .head-nav{
    gap:.25rem;
    background:#fff;
    box-shadow:-22px 0 60px -30px color-mix(in srgb, var(--gray) 70%, transparent);
  }

  /* ---------------- brand head ---------------- */
  .nav-drawer-head{
    gap:.7rem;
    padding:0 0 .95rem;
    margin-bottom:.7rem;
    border-bottom:1px solid #E5E7EB;
  }
  .nav-drawer-head .brand-mark,
  .nav-drawer-head .ndh-avatar{
    width:46px; height:46px; flex:none;
    display:grid; place-items:center;
    border-radius:14px;
    background:linear-gradient(140deg,#1E3A8A,#374151);
    color:#fff; font-weight:800; font-size:.95rem;
    box-shadow:0 14px 26px -16px rgba(30,58,138,.85);
  }
  .nav-drawer-head .ndh-info{ display:grid; gap:2px; min-width:0; }
  .nav-drawer-head b{ font-size:1.04rem; color:#1E3A8A; letter-spacing:-.015em; }
  .nav-drawer-head small{
    color:#6B7280; font-size:.76rem;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .nav-drawer-head button{
    width:38px; height:38px; flex:none;
    border:1px solid #E5E7EB;
    background:#F4F7FC; color:#374151;
    border-radius:12px;
  }
  .nav-drawer-head button:active{ background:#E8EDF8; color:#1E3A8A; }

  /* ---------------- section labels ---------------- */
  .drawer-label{
    display:flex; align-items:center; gap:.7rem;
    margin:1.05rem .1rem .45rem;
    font-size:.67rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
    color:#6B7280;
  }
  .drawer-label::after{ content:''; flex:1; height:1px; background:#E5E7EB; }
  .drawer-label:first-of-type{ margin-top:.2rem; }

  /* ---------------- rows ---------------- */
  .head-nav a,
  .head-nav .nav-drop summary{
    display:flex; align-items:center; justify-content:flex-start;
    gap:.75rem;
    min-height:56px;
    padding:0 .75rem 0 .6rem;
    border-radius:15px;
    font-size:.97rem; font-weight:650;
    color:#374151;
    transition:background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  }
  .head-nav a .ndl,
  .head-nav .nav-drop summary .ndl{ display:flex; align-items:center; gap:.75rem; min-width:0; }

  /* the icon becomes a tinted tile, matching the card language elsewhere */
  .head-nav a .ndl > .ic,
  .head-nav .nav-drop summary .ndl > .ic{
    width:38px; height:38px; padding:9px; flex:none;
    box-sizing:border-box;
    border-radius:12px;
    background:#E8EDF8; color:#1E3A8A;
  }

  .head-nav a:hover{ background:#F4F7FC; }
  .head-nav a:active{ background:#E8EDF8; color:#1E3A8A; }

  /* current page: brand pill + cyan edge bar (the old 7px dot is replaced) */
  .head-nav a.is-current{
    background:#1E3A8A; color:#fff; font-weight:700;
    box-shadow:0 18px 34px -20px rgba(30,58,138,.85);
  }
  .head-nav a.is-current .ndl > .ic{ background:rgba(255,255,255,.17); color:#fff; }
  .head-nav a::after{
    content:''; margin-left:auto; flex:none;
    width:4px; height:0; border-radius:3px;
    background:transparent;
    transition:height var(--t-base), background var(--t-fast);
  }
  .head-nav a.is-current::after{ height:26px; background:#06B6D4; }

  /* ---------------- services accordion ---------------- */
  .head-nav .nav-drop{ width:100%; }
  .head-nav .nav-drop summary{ cursor:pointer; list-style:none; }
  .head-nav .nav-drop summary::-webkit-details-marker{ display:none; }
  .head-nav .nav-drop[open] summary{ color:#1E3A8A; background:#F4F7FC; }
  .head-nav .nav-drop[open] summary .ndl > .ic{ background:#1E3A8A; color:#fff; }
  .head-nav .nav-drop-panel{
    margin:.35rem 0 .6rem .85rem;
    padding-left:.9rem;
    border-left:2px solid #E8EDF8;
  }
  .head-nav .nav-drop-panel a{
    min-height:46px; font-size:.9rem; font-weight:600;
    border-radius:11px; padding-left:.55rem;
  }
  .head-nav .nav-drop-panel a .ic{ width:17px; height:17px; color:#1E3A8A; }

  /* ---------------- currency ---------------- */
  .drawer-cur{
    padding:.6rem .6rem;
    border-radius:15px;
    background:#F8FAFC;
  }
  .drawer-cur .ndl{ display:flex; align-items:center; gap:.75rem; font-weight:650; color:#374151; }
  .drawer-cur .ndl > .ic{ width:20px; height:20px; color:#1E3A8A; }
  .drawer-cur select{
    min-height:40px; padding:0 .6rem;
    border:1px solid #E5E7EB; border-radius:11px;
    background:#fff; color:#374151;
    font-size:.86rem; font-weight:600;
  }

  /* ---------------- account actions ---------------- */
  .drawer-actions{
    gap:.6rem; margin-top:1rem; padding-top:1rem;
    border-top:1px solid #E5E7EB;
  }
  .drawer-actions .drawer-link{
    justify-content:flex-start;
    min-height:52px; padding:0 1.05rem;
    border:1px solid #E5E7EB; background:#fff;
    border-radius:14px;
    font-size:.95rem; font-weight:650; color:#374151;
  }
  .drawer-actions .drawer-link .ic{ width:19px; height:19px; color:#1E3A8A; flex:none; }
  .drawer-actions .drawer-link::after{ display:none; }
  .drawer-actions .drawer-link:active{ background:#E8EDF8; }
  .drawer-actions .drawer-link.out{ background:#F4F7FC; }
  .drawer-actions .drawer-link.primary{
    background:#1E3A8A; border-color:#1E3A8A; color:#fff;
    box-shadow:0 18px 32px -20px rgba(30,58,138,.9);
  }
  .drawer-actions .drawer-link.primary .ic{ color:#fff; }

  /* ---------------- support footer ---------------- */
  .drawer-foot{
    margin-top:1.1rem; padding-top:1rem;
    border-top:1px solid #E5E7EB;
    display:grid; gap:.55rem;
  }
  .df-label{
    font-size:.67rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:#6B7280;
  }
  .df-rows{ display:grid; gap:.4rem; }
  .df-rows a{
    justify-content:flex-start; gap:.65rem;
    min-height:44px; padding:0 .85rem;
    border-radius:12px; background:#F4F7FC;
    font-size:.86rem; font-weight:600; color:#374151;
  }
  .df-rows a .ic{ width:17px; height:17px; flex:none; color:#1E3A8A; }
  .df-rows a::after{ display:none; }
  .df-rows a span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .df-rows a:active{ background:#E8EDF8; }
  .df-hours{
    display:flex; align-items:center; gap:.5rem;
    padding:.1rem .2rem 0;
    font-size:.76rem; color:#6B7280; line-height:1.5;
  }
  .df-hours .ic{ width:15px; height:15px; flex:none; color:#6B7280; }
}