/* ==========================================================================
   APP VIEW — the whole site on a phone
   --------------------------------------------------------------------------
   Owner, 2026-10-06: "Full website will be mobile responsive app view".
   Loaded last on every public layout (_app_head.html). Nothing here applies
   above 900px except hiding the bottom tab bar, so desktop is untouched.
   900px takes in tablets held upright, where the old header wrapped and the
   account pages were wider than the screen.

   On a phone: a slim top bar, a fixed bottom tab bar (_app_tabbar.html) with
   the five places a buyer goes, and pages that fit the screen.
   ========================================================================== */

.app-tabbar { display: none; }
/* The short brand name is for the phone top bar only. */
.app-name-short { display: none; }
/* The Categories list and the "Install the app" offer belong to the phone bar. */
.app-sheet, .app-install { display: none; }

@media (max-width: 900px) {
  /* ---------- Bottom tab bar ------------------------------------------- */
  .app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(16, 16, 19, .96); border-top: 1px solid #2a2a2e;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .9);
    font-family: "Inter", "Noto Sans Bengali", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .app-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: 48px; padding: 4px 2px; border-radius: 12px;
    color: #a1a1aa; text-decoration: none; -webkit-tap-highlight-color: transparent;
    font-size: 10.5px; font-weight: 700; line-height: 1.15; letter-spacing: .01em;
  }
  .app-tab svg { width: 22px; height: 22px; flex: none; }
  .app-tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-tab.is-on { color: #ff4d6d; }
  .app-tab:active { background: rgba(255, 255, 255, .06); }
  .app-tab-icon { position: relative; display: inline-flex; }
  .app-tab-badge {
    position: absolute; top: -6px; right: -11px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: #ef2d56; color: #fff; font: 800 10px/17px "Inter", sans-serif; text-align: center;
  }
  .app-tab-badge[hidden] { display: none; }
  /* On the few light pages (free tools, API docs) the bar is light as well. */
  html:not(.sf2):not(.sf2-auth) .app-tabbar {
    background: rgba(255, 255, 255, .97); border-top-color: #e2e8f0; box-shadow: 0 -10px 30px -18px rgba(15, 23, 42, .28);
  }
  html:not(.sf2):not(.sf2-auth) .app-tab { color: #64748b; }
  html:not(.sf2):not(.sf2-auth) .app-tab.is-on { color: #e11d48; }
  html:not(.sf2):not(.sf2-auth) .app-tab:active { background: rgba(15, 23, 42, .06); }
  /* Room for the bar under every page, and for what floats above the bottom edge. */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important; }
  /* What is jumped to must not land under the bar below, nor under the header that now stays on top. */
  html { scroll-padding-bottom: 80px; scroll-padding-top: calc(var(--sf-header-h, 56px) + 8px); }
  html.sf2 .sf-toast { bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important; }

  .app-name-full { display: none !important; }
  .app-name-short { display: inline !important; }

  /* Nothing may be wider than the screen. `clip`, not `hidden`: a hidden overflow turns the
     body into the box a sticky header sticks to, and the header then scrolls away with the
     page (owner, 2026-10-06: "Header will be sticky"). A browser too old for `clip` keeps
     `hidden`, and its header scrolls as before. */
  html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }

  /* ---------- Strip above the header ------------------------------------ */
  /* One line that can be swiped sideways instead of two wrapped rows. */
  .sf-trust {
    display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 14px;
    overflow-x: auto; white-space: nowrap; padding: 6px 14px !important; font-size: 11.5px !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .sf-trust::-webkit-scrollbar { display: none; }
  .sf-trust > span { flex: none; }
  .sf-promo { font-size: 12.5px !important; padding: 7px 12px !important; }

  /* ---------- Top bar: shop and info pages (.site-header) ---------------- */
  /* Logo and name on the left; currency, language and cart on the right; the search field
     under them on the shop page. Sign in, Create account, Orders, Account and Tools are in
     the bottom bar, so they leave the header. */
  html.sf2 .site-header {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 8px !important;
    padding: 8px 14px !important; margin-inline: calc(50% - 50vw); min-height: 0;
  }
  html.sf2 .site-header .brand { flex: 1 1 0; min-width: 0; gap: 9px; container-type: inline-size; }
  /* When the buttons on the right leave no room for the name, the logo stands alone
     rather than a name cut down to two letters. */
  @container (max-width: 150px) {
    html.sf2 .site-header .brand-copy { display: none !important; }
  }
  html.sf2 .site-header .brand-logo { width: 36px !important; height: 36px !important; border-radius: 10px !important; flex: none; }
  html.sf2 .site-header .brand-logo img { width: 36px !important; height: 36px !important; }
  html.sf2 .site-header .brand-copy { min-width: 0; }
  html.sf2 .site-header .brand-copy strong {
    display: block; font-size: 13px !important; line-height: 1.15; letter-spacing: .01em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  html.sf2 .site-header .brand-copy small { display: none !important; }
  html.sf2 .site-header .header-nav { flex: none; display: flex; flex-wrap: nowrap; gap: 6px; }
  html.sf2 .site-header .header-nav > .nav-chip,
  html.sf2 .site-header .header-nav > .nav-cta { display: none !important; }
  /* ...except the wallet balance of a signed-in buyer: it stays, and opens the top-up page. */
  html.sf2 .site-header .header-nav > .nav-chip[href$="/account/deposit"] {
    display: inline-flex !important; align-items: center; min-height: 34px; padding: 0 10px !important;
    font-size: 12px !important; border-radius: 999px;
  }
  html.sf2 .site-header .sf-cart-link { width: 38px; height: 38px; min-height: 0; padding: 0 !important; }
  html.sf2 .site-header .sf-cart-total { display: none !important; }
  html.sf2 .site-header .cur-switch { padding: 2px; }
  html.sf2 .site-header .cur-opt { min-height: 32px; padding: 0 9px !important; font-size: 11.5px !important; }
  html.sf2 .site-header .lang-menu-btn { min-height: 38px; padding: 0 9px !important; }
  html.sf2 .site-header .header-search {
    order: 5; flex: 1 1 100%; width: 100%; max-width: none; min-height: 42px; margin: 0;
  }
  html.sf2 .site-header .header-search input { font-size: 16px !important; }   /* 16px: iOS does not zoom in on focus */
  html.sf2 .site-header .header-search span { display: none; }

  /* ---------- Shop page -------------------------------------------------- */
  /* The header stays at the top of the screen all the way down the page (owner, 2026-10-06:
     "Header will be sticky"). A sticky header cannot leave its parent, and its parent, the
     shell, ends where the footer begins -- on a short page (cart, blog) the header was gone
     after two swipes. So on a phone the shell is no box of its own: the header and the page
     hang straight from the body, and <main> gets what the shell gave it -- the 14px gutter,
     its own layer, and the same distance to the footer (72px of shell + the footer's 60px). */
  html.sf2 .site-shell { display: contents !important; }
  html.sf2 .site-shell > main { position: relative; z-index: 1; margin: 0 14px 132px !important; }
  html.sf2 .site-header { position: sticky !important; top: 0 !important; }
  html.sf2 .op-hero-intro { margin: 12px 0 16px !important; padding: 18px 16px !important; border-radius: 16px; row-gap: 12px; }
  html.sf2 .op-hero-h1 { font-size: clamp(22px, 6.6vw, 28px) !important; }
  html.sf2 .op-hero-lede { font-size: 13px; }
  /* The three trust facts on one line that can be swiped, instead of three rows. */
  html.sf2 .hero-badges {
    display: flex !important; flex-wrap: nowrap !important; gap: 8px; padding: 10px 0 0 !important;
    margin-inline: -16px; padding-inline: 16px !important;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  html.sf2 .hero-badges::-webkit-scrollbar { display: none; }
  html.sf2 .hero-badge { flex: none; white-space: nowrap; font-size: 11.5px !important; padding: 5px 9px !important; }
  html.sf2 .flash-sale { margin: 0 0 16px !important; }
  html.sf2 .catalog .section-head { margin-bottom: 10px; gap: 8px; }
  html.sf2 .catalog .section-head .eyebrow, html.sf2 .catalog .section-head span { display: none; }
  html.sf2 .catalog .section-head h2 { font-size: 19px !important; margin: 0; }
  /* The header's search field is always on screen; a second one under the heading is not needed. */
  html.sf2 .catalog .catalog-search { display: none !important; }
  html.sf2 .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; }
  @media (min-width: 560px) { html.sf2 .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
  @media (min-width: 760px) { html.sf2 .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
  html.sf2 .sf-tile { padding: 9px !important; }
  html.sf2 .sf-name { font-size: 13px !important; min-height: 2.6em; }
  html.sf2 .sf-price b { font-size: 16px !important; }
  html.sf2 .sf-btn { padding: 9px 16px !important; font-size: 11.5px !important; }
  html.sf2 .sf-cat { font-size: 9.5px !important; }

  /* The product window opens as a sheet from the bottom, full width, above the tab bar. */
  html.sf2 .modal { padding: 0 !important; place-items: end stretch !important; z-index: 130; }
  html.sf2 .product-modal {
    width: 100% !important; max-width: 100% !important; max-height: 92vh !important; margin: 0 !important;
    border-radius: 20px 20px 0 0 !important; display: flex !important; flex-direction: column;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html.sf2 .modal-visual {
    min-height: 0 !important; height: 136px !important; flex: none; border-right: 0 !important;
    overflow: hidden; display: flex !important; align-items: center; justify-content: center; padding: 0 !important;
  }
  html.sf2 .modal-visual::before, html.sf2 .modal-visual::after { display: none !important; }   /* the desktop caption */
  html.sf2 .modal-visual > img, html.sf2 .modal-visual .modal-icon {
    width: 88px !important; height: 88px !important; max-width: 88px; max-height: 88px; font-size: 56px !important;
    margin: 0 !important; display: flex; align-items: center; justify-content: center;
  }
  html.sf2 .modal-visual .modal-icon tg-emoji,
  html.sf2 .modal-visual .modal-icon img, html.sf2 .modal-visual .modal-icon video,
  html.sf2 .modal-visual .modal-icon .tge-emoji-lottie, html.sf2 .modal-visual .modal-icon .tge-emoji-lottie svg {
    width: 88px !important; height: 88px !important; object-fit: contain;
  }
  html.sf2 .modal-info { padding: 14px 16px 0 !important; }
  html.sf2 .modal-info h2 { font-size: 19px !important; }
  html.sf2 .modal-meta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  /* Buy now stays in reach at the bottom of the sheet; the close button and a tap outside
     already lead back, so the second button is not needed here. */
  html.sf2 .modal-actions {
    position: sticky; bottom: 0; z-index: 2; display: block !important; margin: 12px -16px 0 !important;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #1c1c1f; border-top: 1px solid #2a2a2e;
  }
  html.sf2 .modal-actions .btn { width: 100%; min-height: 48px; }
  html.sf2 .modal-actions .btn-ghost { display: none !important; }
  html.sf2 .modal-note { margin: 0 0 12px !important; font-size: 12px; }
  html.sf2 .modal-close { top: 10px !important; right: 10px !important; width: 36px; height: 36px; z-index: 3; }

  /* ---------- Product page (/p/...) --------------------------------------- */
  html.sf2 .op-info-main { padding-top: 6px !important; }
  html.sf2 .op-pd-breadcrumb {
    margin: 8px 0 10px !important; font-size: 12px; flex-wrap: nowrap !important; white-space: nowrap;
    overflow-x: auto; scrollbar-width: none;
  }
  html.sf2 .op-pd-breadcrumb::-webkit-scrollbar { display: none; }
  html.sf2 .op-pd-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; margin-bottom: 84px; }
  html.sf2 .op-pd-grid > * { min-width: 0; max-width: 100%; }
  html.sf2 .op-pd-media { position: static !important; aspect-ratio: auto !important; height: 168px; border-radius: 16px; }
  html.sf2 .op-pd-media img { width: auto !important; max-width: 60%; max-height: 120px; }
  html.sf2 .op-pd-media .pd-emoji { font-size: 84px; }
  html.sf2 .op-pd-info { padding: 16px !important; border-radius: 16px; }
  html.sf2 .op-pd-info h1 { font-size: 21px !important; margin: 10px 0 6px !important; }
  html.sf2 .op-pd-info .pd-tag { font-size: 13.5px; }
  html.sf2 .op-pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin: 14px 0 !important; }
  html.sf2 .op-pd-desc { padding: 14px !important; overflow-wrap: anywhere; }
  html.sf2 .op-pd-desc pre, html.sf2 .op-pd-desc code { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* Buy now stays on screen, just above the tab bar. */
  html.sf2 .op-pd-actions {
    position: fixed; left: 0; right: 0; bottom: calc(61px + env(safe-area-inset-bottom, 0px)); z-index: 100;
    display: flex !important; gap: 10px; margin: 0 !important; padding: 10px 14px;
    background: rgba(16, 16, 19, .96); border-top: 1px solid #2a2a2e;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  html.sf2 .op-pd-actions .btn-buy { flex: 1; text-align: center; padding: 14px 18px !important; }
  /* "Back to catalog" is the Home tab; "Add to cart" stays next to Buy now. */
  html.sf2 .op-pd-actions .btn-back:not(.sf-pd-cart) { display: none !important; }
  html.sf2 .op-pd-actions .sf-pd-cart { flex: none; padding: 14px 16px !important; white-space: nowrap; font-size: 13px !important; }

  /* ---------- Account area (.bh-bar header, panels, tables) ---------------- */
  /* Shop / Orders / Account are the bottom bar now, so the header is one row:
     logo, wallet balance, language, cart, sign out. */
  .bh-bar { padding: 8px 14px !important; position: sticky; top: 0; z-index: 60; }
  .bh-inner {
    display: flex !important; align-items: center; gap: 8px !important; width: 100% !important;
    padding: 0 !important; border-radius: 0 !important;
  }
  .bh-tabs { display: none !important; }
  .bh-brand { flex: 1 1 0; min-width: 0; gap: 9px !important; container-type: inline-size; }
  @container (max-width: 150px) {
    .bh-name-wrap { display: none !important; }
  }
  .bh-logo, .bh-logo img { width: 36px !important; height: 36px !important; border-radius: 10px !important; }
  .bh-name-wrap { min-width: 0; }
  .bh-name { display: block !important; font-size: 13px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bh-tagline { display: none !important; }
  .bh-actions { flex: none; gap: 6px !important; }
  .bh-balance { padding: 0 10px !important; min-height: 36px; font-size: 13px; }
  .bh-balance svg { display: none; }
  .bh-logout, .bh-cart { width: 36px; height: 36px; min-height: 0; padding: 0 !important; }
  .bh-signin, .bh-signup { display: none !important; }
  .page-shell { padding: 16px 14px 28px !important; }
  .page-shell h1, .page-title { font-size: 22px !important; }
  .page-head { margin-bottom: 14px !important; }
  .page-subtitle { font-size: 13.5px !important; }
  .panel { padding: 14px !important; border-radius: 16px !important; margin-bottom: 14px !important; }
  /* Balance, referral earnings and total spent side by side instead of three tall boxes. */
  .stat-row { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .stat-tile { padding: 12px 10px !important; border-radius: 13px !important; min-width: 0; }
  .stat-label { font-size: 9.5px !important; letter-spacing: .04em !important; gap: 4px !important; white-space: normal; line-height: 1.25; }
  .stat-label svg { display: none; }
  .stat-value { font-size: 19px !important; margin-top: 6px !important; overflow-wrap: anywhere; }
  /* Quick actions as a two-column grid of compact tiles. */
  .action-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .action-card { padding: 12px !important; border-radius: 13px !important; gap: 10px !important; min-width: 0; align-items: flex-start; }
  .action-card-icon { width: 36px !important; height: 36px !important; border-radius: 10px !important; flex: none; }
  .action-card-text { min-width: 0; }
  .action-card-text strong { font-size: 13px !important; }
  .action-card-text span { font-size: 11.5px !important; display: block; overflow-wrap: anywhere; }
  .form-input, .page-shell input, .page-shell select, .page-shell textarea { font-size: 16px !important; }   /* no zoom on focus (iOS) */
  .btn-cta { min-height: 46px; }
  /* A field next to a button gives way on a narrow screen instead of pushing the button out. */
  .page-shell input, .page-shell select, .page-shell textarea { min-width: 0; max-width: 100%; }
  /* API page: long descriptions wrap, code scrolls inside its own box. */
  .api-endpoint-row { flex-wrap: wrap !important; min-width: 0; }
  .api-endpoint-row > * { min-width: 0; max-width: 100%; white-space: normal !important; overflow-wrap: anywhere; }
  .api-code-block { max-width: 100%; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .page-shell code, .page-shell .mono { overflow-wrap: anywhere; }
  .delivered-box, .delivered-box * { overflow-wrap: anywhere; word-break: break-word; }
  /* Tables that stay tables can be swiped sideways instead of squeezing every cell. */
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl th, .tbl td { white-space: nowrap; padding: 10px 12px !important; font-size: 13px !important; }
  /* The two order lists read as cards: product and total first, then code and status,
     then the date and the link to what was delivered. */
  .tbl-orders, .tbl-orders tbody, .tbl-orders-recent, .tbl-orders-recent tbody { display: block; width: 100%; }
  .tbl-orders thead, .tbl-orders-recent thead { display: none; }
  .tbl-orders tr, .tbl-orders-recent tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 5px 10px; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .tbl-orders tr:last-child, .tbl-orders-recent tr:last-child { border-bottom: 0; }
  .tbl-orders td, .tbl-orders-recent td {
    display: block; padding: 0 !important; border: 0 !important; white-space: normal !important; min-width: 0;
    background: none !important;
  }
  .tbl-orders td:nth-child(3), .tbl-orders-recent td:nth-child(2) {            /* product */
    grid-column: 1; grid-row: 1; font-weight: 700; color: #fff; font-size: 14px !important; overflow-wrap: anywhere;
  }
  .tbl-orders td:nth-child(4), .tbl-orders-recent td:nth-child(3) {            /* quantity */
    grid-column: 2; grid-row: 1; color: #a1a1aa; font-size: 12.5px !important;
  }
  .tbl-orders td:nth-child(4)::before, .tbl-orders-recent td:nth-child(3)::before { content: "\00d7"; }
  .tbl-orders td:nth-child(5), .tbl-orders-recent td:nth-child(4) { grid-column: 3; grid-row: 1; text-align: right; }   /* total */
  .tbl-orders td:nth-child(1), .tbl-orders-recent td:nth-child(1) {            /* order code */
    grid-column: 1 / span 2; grid-row: 2; color: #a1a1aa; font-size: 12px !important; overflow-wrap: anywhere;
  }
  .tbl-orders td:nth-child(6), .tbl-orders-recent td:nth-child(5) { grid-column: 3; grid-row: 2; justify-self: end; }   /* status */
  .tbl-orders td:nth-child(2) { grid-column: 1 / span 2; grid-row: 3; color: #71717a; font-size: 12px !important; }     /* date */
  .tbl-orders td:nth-child(7) { grid-column: 3; grid-row: 3; justify-self: end; }                                     /* delivered */

  /* ---------- Sign-in pages (.acct-topbar) --------------------------------- */
  .acct-topbar {
    display: flex !important; align-items: center; gap: 10px; padding: 8px 14px !important; flex-wrap: nowrap !important;
    position: sticky !important; top: 0; z-index: 60;        /* stays on top like the other headers */
  }
  .acct-brand { flex: 1 1 0; min-width: 0; gap: 9px !important; container-type: inline-size; }
  .acct-brand-logo, .acct-brand-logo img { width: 36px !important; height: 36px !important; border-radius: 10px !important; flex: none; }
  .acct-brand-copy { min-width: 0; }
  .acct-brand-copy strong { display: block; font-size: 13px !important; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .acct-brand-copy small { display: none !important; }
  @container (max-width: 150px) {
    .acct-brand-copy { display: none !important; }
  }
  .acct-topright { flex: none; flex-wrap: nowrap !important; gap: 6px !important; }
  .acct-toplink { padding: 8px 12px !important; font-size: 12.5px !important; white-space: nowrap; }
  .acct-stage { padding: 18px 14px 24px !important; min-height: 0 !important; align-items: flex-start !important; }
  .acct-card { padding: 22px 18px !important; border-radius: 18px !important; }
  .acct-card input { font-size: 16px !important; }

  /* ---------- Free tools page ---------------------------------------------- */
  .tools-header { padding: 8px 14px !important; gap: 8px !important; }
  .tools-header .brand-subtitle, .tools-header .bot-chip { display: none !important; }
  .tools-header .header-actions { gap: 6px !important; flex-wrap: nowrap !important; }
  .tools-shell textarea, .tools-shell input { font-size: 16px !important; }

  /* ---------- Info pages, blog, cart --------------------------------------- */
  html.sf2 .op-info-hero, html.sf2 .op-info-head { padding-top: 6px !important; }
  html.sf2 .op-info-main h1 { font-size: 24px !important; line-height: 1.2 !important; }
  html.sf2 .op-info-card { padding: 16px !important; border-radius: 16px !important; }
  html.sf2 .op-info-main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html.sf2 .op-info-main pre { max-width: 100%; overflow-x: auto; }
  html.sf2 .op-info-card img, html.sf2 .op-info-main article img { max-width: 100%; height: auto; }
  /* Cart: the product name gets the room, the numbers stay compact. */
  html.sf2 .sf-cart-page { margin: 10px 0 24px !important; padding: 0 !important; }
  html.sf2 .sf-cart-page h1 { font-size: 24px !important; margin-bottom: 12px !important; }
  html.sf2 .sf-cart-table th, html.sf2 .sf-cart-table td { padding: 11px 6px !important; font-size: 13px !important; }
  html.sf2 .sf-cart-table th:first-child, html.sf2 .sf-cart-table td:first-child { padding-left: 12px !important; }
  html.sf2 .sf-cart-table th:last-child, html.sf2 .sf-cart-table td:last-child { padding-right: 10px !important; }
  html.sf2 .sf-cart-name { width: 100%; overflow-wrap: anywhere; }
  html.sf2 .sf-cart-page .btn-buy, html.sf2 .sf-cart-page .sf-btn { width: 100%; text-align: center; }

  /* ---------- Language list ------------------------------------------------ */
  /* On a phone it opens as one panel across the screen, right under the top bar, in two
     columns. Anchored to the button it could end up half off the screen. */
  .lang-menu { position: static !important; }
  .lang-menu-list {
    left: 10px !important; right: 10px !important; inset-inline: 10px !important; top: calc(100% + 4px) !important;
    min-width: 0 !important; width: auto !important; max-height: 62vh !important; z-index: 140 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; padding: 8px !important; border-radius: 14px !important;
  }
  .lang-menu-item { padding: 11px 12px !important; font-size: 14px !important; white-space: normal !important; }

  /* ---------- Footer ------------------------------------------------------ */
  .op-footer-inner { padding-inline: 16px !important; }
  .op-footer-cols { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 16px !important; }
  .op-footer-col { min-width: 0 !important; }
  .op-footer-brand-col { grid-column: 1 / -1; }
  .op-footer-tag, .op-footer-brand-copy small { overflow-wrap: anywhere; }
  .op-footer-bottom small { display: block; overflow-wrap: anywhere; }

  /* ---------- Categories: the list that slides up from the bar ------------- */
  /* Owner, 2026-10-06: "Need categories in footer menu of app view and app". It ends where
     the bar begins, so the bar stays in reach and the same tab closes it again. */
  .app-sheet {
    position: fixed; left: 0; right: 0; top: 0; bottom: calc(61px + env(safe-area-inset-bottom, 0px)); z-index: 105;
    display: flex; flex-direction: column; justify-content: flex-end;
    font-family: "Inter", "Noto Sans Bengali", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .app-sheet[hidden], .app-install[hidden], .app-install [hidden] { display: none !important; }
  .app-sheet-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); }
  .app-sheet-box {
    position: relative; max-height: 80%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 14px 14px 14px; border-radius: 18px 18px 0 0; background: #17171b; color: #f4f4f5;
    border-top: 1px solid #2a2a2e; box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, .9);
    animation: app-sheet-up .18s ease-out;
  }
  @keyframes app-sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  .app-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .app-sheet-head b { font-size: 16px; font-weight: 800; }
  .app-sheet-x {
    flex: none; width: 34px; height: 34px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08);
    color: inherit; font-size: 22px; line-height: 1; cursor: pointer;
  }
  .app-sheet-search { display: flex; gap: 8px; margin: 0 0 10px; }
  .app-sheet-search input {
    flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid #2f2f35;
    background: #0f0f12; color: #f4f4f5; font-size: 16px !important; font-family: inherit;
  }
  .app-sheet-search button {
    flex: none; width: 46px; height: 44px; border: 0; border-radius: 12px; background: #ef2d56; color: #fff;
    display: grid; place-items: center; cursor: pointer;
  }
  .app-sheet-search svg { width: 20px; height: 20px; }
  /* Every category is a card: its icon, its name, how many products it holds
     (owner, the same day: "When any buyer click on categories then show its a card"). */
  .app-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .app-cat {
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px; min-width: 0; min-height: 104px;
    padding: 12px 12px 11px; border-radius: 16px; color: inherit; text-decoration: none;
    background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025));
    border: 1px solid #2c2c33; box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .9);
    -webkit-tap-highlight-color: transparent;
  }
  .app-cat:active { transform: scale(.98); border-color: #ef2d56; }
  .app-cat-ico {
    flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .07); font-size: 24px; line-height: 1;
  }
  .app-cat-ico img, .app-cat-ico video, .app-cat-ico .tge-emoji-lottie { width: 28px !important; height: 28px !important; vertical-align: middle; }
  .app-cat-name { min-width: 0; max-width: 100%; font-size: 14px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
  .app-cat-n { margin-top: auto; font-size: 11.5px; font-weight: 600; color: #a1a1aa; }
  /* "All products" is one wide card across the top. */
  .app-cat[data-cat="all"] { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; min-height: 0; padding: 10px 12px; }
  .app-tab.is-open { color: #ff4d6d; }
  /* While the list is open it is the one lit tab. */
  html.app-sheet-open .app-tab.is-on:not(.is-open) { color: #a1a1aa; }
  html.app-sheet-open:not(.sf2):not(.sf2-auth) .app-tab.is-on:not(.is-open) { color: #64748b; }
  html.app-sheet-open, html.app-sheet-open body { overflow: hidden !important; }
  html:not(.sf2):not(.sf2-auth) .app-sheet-box { background: #fff; color: #0f172a; border-top-color: #e2e8f0; }
  html:not(.sf2):not(.sf2-auth) .app-sheet-x { background: rgba(15, 23, 42, .07); }
  html:not(.sf2):not(.sf2-auth) .app-sheet-search input { background: #fff; color: #0f172a; border-color: #cbd5e1; }
  html:not(.sf2):not(.sf2-auth) .app-cat { background: #f8fafc; border-color: #e2e8f0; box-shadow: 0 10px 22px -18px rgba(15, 23, 42, .35); }
  html:not(.sf2):not(.sf2-auth) .app-cat-ico { background: rgba(15, 23, 42, .06); }
  html:not(.sf2):not(.sf2-auth) .app-cat-n { color: #64748b; }
  html:not(.sf2):not(.sf2-auth) .app-tab.is-open { color: #e11d48; }

  /* ---------- "Install the app" ------------------------------------------- */
  /* Owner, the same message: "when any buyer visit they can be install as like app".
     A card just above the bar; above the Buy bar too on a product page (.is-raised). */
  .app-install {
    position: fixed; left: 10px; right: 10px; bottom: calc(71px + env(safe-area-inset-bottom, 0px)); z-index: 104;
    display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 12px; border-radius: 16px;
    background: #1d1d22; color: #f4f4f5; border: 1px solid #34343b; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .85);
    font-family: "Inter", "Noto Sans Bengali", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .app-install.is-raised { bottom: calc(71px + 76px + env(safe-area-inset-bottom, 0px)); }
  .app-install-logo { flex: none; width: 40px; height: 40px; border-radius: 10px; }
  .app-install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .app-install-text b { font-size: 13.5px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
  .app-install-text span { font-size: 11.5px; line-height: 1.3; color: #a1a1aa; overflow-wrap: anywhere; }
  .app-install-go {
    flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: #ef2d56; color: #fff;
    font-size: 13px; font-weight: 800; font-family: inherit; cursor: pointer; white-space: nowrap;
  }
  .app-install-x {
    flex: none; width: 30px; height: 30px; border: 0; border-radius: 999px; background: transparent; color: #a1a1aa;
    font-size: 22px; line-height: 1; cursor: pointer;
  }
  html:not(.sf2):not(.sf2-auth) .app-install {
    background: #fff; color: #0f172a; border-color: #e2e8f0; box-shadow: 0 16px 36px -14px rgba(15, 23, 42, .35);
  }
  html:not(.sf2):not(.sf2-auth) .app-install-text span, html:not(.sf2):not(.sf2-auth) .app-install-x { color: #64748b; }
}