/* ==========================================================================
   STOREFRONT v2 — dark retail theme
   --------------------------------------------------------------------------
   Loaded LAST and scoped to html.sf2, so it only applies when the theme is on
   (setting storefront_theme=v2, or one browser previewing with ?theme=v2).
   Turning it off restores the minimal theme untouched.

   Dark charcoal surfaces, one hot pink-red accent, square product tiles with
   the brand icon large on a tinted panel, pill buttons, red prices.
   ========================================================================== */

html.sf2 {
  --ink:        #f4f4f5;
  --ink-soft:   #d4d4d8;
  --muted:      #a1a1aa;
  --muted-2:    #71717a;
  --line:       #2a2a2e;
  --line-2:     #36363b;
  --paper:      #1c1c1f;
  --paper-2:    #141416;
  --accent:     #ef2d56;
  --accent-2:   #ff4d6d;
  --accent-bg:  rgba(239, 45, 86, .12);
  --ok:         #34d399;
  --ok-bg:      rgba(52, 211, 153, .12);
  --warn:       #fbbf24;
  --warn-bg:    rgba(251, 191, 36, .12);
  --danger:     #f87171;
  --sans: "Inter", "Noto Sans Bengali", "Nirmala UI", "Kohinoor Bangla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: var(--sans);
  --r: 14px;
  color-scheme: dark;
}
html.sf2 body {
  background: var(--paper-2) !important;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
html.sf2 .mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }
html.sf2 .lang-opt, html.sf2 .cur-opt,
html.sf2 .header-search span, html.sf2 .catalog-search span { font-family: var(--sans) !important; }

/* ---------- Promo bar + trust strip ------------------------------------ */
.sf-promo {
  background: linear-gradient(90deg, #b3123a, #ef2d56, #b3123a);
  color: #fff; text-align: center; font: 700 13.5px/1.4 var(--sans, sans-serif);
  padding: 9px 16px; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap;
}
.sf-promo code {
  background: #fff; color: #b3123a; border-radius: 6px; padding: 3px 9px;
  font: 800 12.5px/1.2 var(--sans, sans-serif); letter-spacing: .04em;
}
.sf-promo a { color: #ffe08a; font-weight: 800; text-decoration: none; }
.sf-trust {
  background: #fff4dd; color: #3f2d06; text-align: center;
  font: 600 12px/1.4 var(--sans, sans-serif); padding: 7px 16px;
}

.sf-trust a { color: #b3123a; font-weight: 800; text-decoration: none; }

/* ---------- Header ------------------------------------------------------ */
html.sf2 .site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(20, 20, 22, .92) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line) !important; box-shadow: none !important;
  padding-top: 12px; padding-bottom: 12px;
}
html.sf2 .brand-copy strong { font-family: var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 15px; color: #fff; }
html.sf2 .brand-copy small { color: var(--muted); }
html.sf2 .brand-logo img { border-radius: 10px; }
html.sf2 .header-search {
  display: flex; align-items: center;
  background: #fff !important; border: 0 !important; border-radius: 999px !important;
  overflow: hidden; padding-right: 0 !important;
}
html.sf2 .header-search span { color: #71717a; }
html.sf2 .header-search input { color: #111 !important; background: transparent !important; }
html.sf2 .header-search::after {
  content: ""; flex: 0 0 46px; align-self: stretch; margin-left: 6px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center / 19px no-repeat;
}
html.sf2 .nav-chip, html.sf2 .lang-opt, html.sf2 .cur-opt {
  background: transparent !important; border-color: var(--line-2) !important; color: var(--ink-soft) !important;
  border-radius: 999px; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .03em;
}
html.sf2 .lang-switch, html.sf2 .cur-switch { background: transparent !important; border-color: var(--line-2) !important; }
html.sf2 .lang-opt.is-on, html.sf2 .cur-opt.is-on { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
html.sf2 .nav-cta {
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
  border-radius: 999px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 12.5px;
  box-shadow: 0 6px 18px -8px rgba(239, 45, 86, .8);
}

/* ---------- Hero -------------------------------------------------------- */
html.sf2 .op-hero-intro {
  margin-inline: 0; margin-top: 22px; margin-bottom: 30px;
  border-radius: 18px; border: 1px solid var(--line);
  padding: 40px 38px;
  background:
    radial-gradient(900px 320px at 85% 20%, rgba(239, 45, 86, .28), transparent 60%),
    radial-gradient(700px 300px at 10% 110%, rgba(59, 130, 246, .22), transparent 60%),
    linear-gradient(135deg, #0f1020, #17182c 55%, #0f1020);
  box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9);
}
html.sf2 .op-hero-eyebrow { color: #ff8aa2; font-weight: 800; letter-spacing: .14em; font-size: 12px; }
html.sf2 .op-hero-h1 { color: #fff; font-family: var(--sans); font-weight: 900; letter-spacing: -0.03em; line-height: 1.06; font-size: clamp(30px, 4.4vw, 52px); }
html.sf2 .op-hero-grad { background: linear-gradient(90deg, #ff4d6d, #ffb347); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.sf2 .op-hero-lede, html.sf2 .op-hero-lede strong { color: #d4d4d8; }
html.sf2 .hero-badge {
  background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .12) !important;
  color: #e4e4e7 !important; border-radius: 12px; font-weight: 600;
}
html.sf2 .hero-badge svg { color: #ff4d6d; }

/* ---------- Flash sale band (under the hero) ---------------------------- */
/* Filled and shown by public_shop.js only while a flash sale runs. One product gets one wide
   card; several share a grid. It keeps its own dark surface, so it reads the same on any
   background the hero might get later. */
html.sf2 .flash-sale {
  margin: -8px 0 30px; padding: 18px 22px 20px;
  border-radius: 18px; border: 1px solid rgba(255, 77, 109, .55);
  background:
    radial-gradient(560px 220px at 0% 0%, rgba(239, 45, 86, .34), transparent 62%),
    radial-gradient(520px 240px at 100% 120%, rgba(255, 179, 71, .20), transparent 60%),
    linear-gradient(135deg, #1e1017, #171320 60%, #130f18);
  box-shadow: 0 18px 44px -30px rgba(239, 45, 86, .95);
}
html.sf2 .flash-sale[hidden] { display: none !important; }
html.sf2 .fs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap; }
html.sf2 .fs-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
html.sf2 .fs-bolt {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #ff4d6d, #ffb347); color: #1a0d12;
  box-shadow: 0 8px 20px -10px rgba(255, 123, 90, .9);
}
html.sf2 .fs-bolt svg { width: 20px; height: 20px; }
html.sf2 .fs-title h2 {
  margin: 0; color: #fff; font: 900 22px/1.1 var(--sans); letter-spacing: .01em; text-transform: uppercase;
}
html.sf2 .fs-off {
  flex: none; background: #fff; color: #b3123a; border-radius: 999px; padding: 5px 11px;
  font: 900 13.5px/1.1 var(--sans); font-variant-numeric: tabular-nums; direction: ltr;
}
html.sf2 .fs-off:empty { display: none; }
html.sf2 .fs-clock {
  display: flex; align-items: center; gap: 10px; color: #ffd9e0;
  font: 800 12px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
html.sf2 .fs-time {
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
  border-radius: 10px; padding: 8px 13px; min-width: 6.4ch; text-align: center;
  font: 800 21px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .05em; text-transform: none;
  direction: ltr;
}
html.sf2 .fs-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 16px; }
html.sf2 .fs-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 13px; row-gap: 10px; align-items: center;
  grid-template-areas: "icon name name" "meta meta buy";
  min-width: 0; padding: 13px 14px; border-radius: 14px;
  background: rgba(18, 18, 21, .78); border: 1px solid rgba(255, 255, 255, .11);
  cursor: pointer; transition: border-color .15s ease, transform .12s ease;
}
html.sf2 .fs-item:hover, html.sf2 .fs-item:focus-visible { border-color: rgba(255, 77, 109, .75); transform: translateY(-1px); outline: none; }
html.sf2 .fs-icon {
  grid-area: icon; width: 48px; height: 48px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1;
  background: linear-gradient(145deg, #2a2340, #1d2238 55%, #251a2c);
}
html.sf2 .fs-icon img, html.sf2 .fs-icon tg-emoji img, html.sf2 .fs-icon video,
html.sf2 .fs-icon .tge-emoji-lottie, html.sf2 .fs-icon .tge-emoji-lottie svg {
  width: 72% !important; height: 72% !important; object-fit: contain;
}
html.sf2 .fs-icon tg-emoji { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 28px; }
html.sf2 .fs-name {
  grid-area: name; margin: 0; min-width: 0; color: #fff; font: 700 15px/1.3 var(--sans);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.sf2 .fs-meta { grid-area: meta; min-width: 0; }
html.sf2 .fs-price { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; }
html.sf2 .fs-price del { color: var(--muted); font: 600 13.5px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
html.sf2 .fs-price b { color: #ff5c7a; font: 900 20px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
html.sf2 .fs-price span { color: var(--muted); font: 600 12px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
html.sf2 .fs-price em {
  font: 800 11.5px/1 var(--sans); font-style: normal; color: #1f1300; background: #f59e0b;
  border-radius: 5px; padding: 4px 6px; font-variant-numeric: tabular-nums; direction: ltr;
}
html.sf2 .fs-left { margin: 6px 0 0; color: #ffd9e0; font: 700 12px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
html.sf2 .fs-left span { direction: ltr; unicode-bidi: isolate; }
html.sf2 .fs-buy {
  grid-area: buy; padding: 11px 20px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--accent); color: #fff; font: 800 12.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 18px -10px rgba(239, 45, 86, .9); transition: background .15s, transform .12s;
}
html.sf2 .fs-buy:hover { background: var(--accent-2); transform: translateY(-1px); }
/* One product: one wide card, everything on a line, a size larger. */
html.sf2 .fs-items.is-single .fs-item {
  grid-template-areas: "icon name buy" "icon meta buy"; row-gap: 5px; column-gap: 16px; padding: 14px 18px;
}
html.sf2 .fs-items.is-single .fs-icon { width: 62px; height: 62px; border-radius: 15px; }
html.sf2 .fs-items.is-single .fs-name { font-size: 17px; align-self: end; }
html.sf2 .fs-items.is-single .fs-meta { align-self: start; }
html.sf2 .fs-items.is-single .fs-price b { font-size: 24px; }
html.sf2 .fs-items.is-single .fs-price del { font-size: 15px; }
html.sf2 .fs-items.is-single .fs-buy { padding: 13px 26px; font-size: 13px; }
html.sf2 .fs-more {
  border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .28); background: transparent; color: #fff;
  font: 800 14px/1 var(--sans); min-height: 60px; cursor: pointer; padding: 0 16px;
}
html.sf2 .fs-more:hover { border-color: rgba(255, 77, 109, .75); }
@media (max-width: 620px) {
  html.sf2 .flash-sale { margin-top: -14px; padding: 14px 14px 16px; border-radius: 16px; }
  html.sf2 .fs-title h2 { font-size: 18px; }
  html.sf2 .fs-bolt { width: 32px; height: 32px; border-radius: 10px; }
  html.sf2 .fs-time { font-size: 18px; padding: 7px 10px; }
  html.sf2 .fs-items { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 12px; }
  html.sf2 .fs-item, html.sf2 .fs-items.is-single .fs-item {
    grid-template-areas: "icon name name" "meta meta buy"; column-gap: 11px; row-gap: 9px; padding: 11px 12px;
  }
  html.sf2 .fs-icon, html.sf2 .fs-items.is-single .fs-icon { width: 44px; height: 44px; border-radius: 11px; }
  html.sf2 .fs-name, html.sf2 .fs-items.is-single .fs-name { font-size: 14px; align-self: center; }
  html.sf2 .fs-meta, html.sf2 .fs-items.is-single .fs-meta { align-self: center; }
  html.sf2 .fs-price b, html.sf2 .fs-items.is-single .fs-price b { font-size: 19px; }
  html.sf2 .fs-buy, html.sf2 .fs-items.is-single .fs-buy { padding: 10px 15px; font-size: 11.5px; }
}

/* ---------- Section heads + catalog search ----------------------------- */
html.sf2 .eyebrow, html.sf2 .section-head .eyebrow { color: var(--accent-2); font-family: var(--sans); font-weight: 800; letter-spacing: .12em; }
html.sf2 .section-head h2 { color: #fff; font-family: var(--sans); font-weight: 800; }
html.sf2 .section-head p, html.sf2 .section-head .muted { color: var(--muted); }
html.sf2 .catalog-search { background: var(--paper) !important; border-color: var(--line-2) !important; border-radius: 12px; }
html.sf2 .catalog-search input { color: var(--ink) !important; background: transparent !important; }

/* ---------- Category rail ---------------------------------------------- */
html.sf2 .category-chips {
  flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  padding: 4px 2px 12px; margin-bottom: 18px;
  -webkit-mask-image: linear-gradient(90deg, #000 93%, transparent); mask-image: linear-gradient(90deg, #000 93%, transparent);
}
html.sf2 .category-chips > * {
  flex: 0 0 auto; white-space: nowrap;
  background: var(--paper) !important; border: 1px solid var(--line-2) !important; color: var(--ink-soft) !important;
  border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 13px;
}
html.sf2 .category-chips > *:hover { border-color: var(--accent) !important; color: #fff !important; }
html.sf2 .category-chips > .is-on, html.sf2 .category-chips > .active, html.sf2 .category-chips > [aria-pressed="true"] {
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}

/* ---------- Product tiles ---------------------------------------------- */
html.sf2 .product-grid {
  display: grid !important;
  /* Owner, 2026-10-17: four tiles per row on a desktop (auto-fill at 210 px gave seven on a wide
     monitor); three on a tablet, two on a phone below. The page sizes follow the row count. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
html.sf2 .sf-tile {
  display: flex; flex-direction: column; background: var(--paper-2) !important;
  border: 0 !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 14px; cursor: pointer;
  transition: background .18s ease; transform: none !important;
}
html.sf2 .sf-tile:hover { background: #1b1b1f !important; }
html.sf2 .sf-media {
  position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .10), transparent 60%),
    linear-gradient(145deg, #2a2340, #1d2238 55%, #251a2c);
  transition: transform .25s ease;
}
html.sf2 .sf-tile:nth-child(4n+2) .sf-media { background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.10), transparent 60%), linear-gradient(145deg, #1f2f3f, #182536 55%, #1c2230); }
html.sf2 .sf-tile:nth-child(4n+3) .sf-media { background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.10), transparent 60%), linear-gradient(145deg, #3a1f2c, #2a1826 55%, #221a29); }
html.sf2 .sf-tile:nth-child(4n+4) .sf-media { background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.10), transparent 60%), linear-gradient(145deg, #1e3328, #16261f 55%, #1b2324); }
html.sf2 .sf-tile:hover .sf-media { transform: scale(1.02); }
html.sf2 .sf-icon { display: flex; align-items: center; justify-content: center; width: 46%; height: 46%; font-size: 64px; line-height: 1; }
html.sf2 .sf-icon img, html.sf2 .sf-icon tg-emoji img, html.sf2 .sf-icon video,
html.sf2 .sf-icon .tge-emoji-lottie, html.sf2 .sf-icon .tge-emoji-lottie svg {
  width: 100% !important; height: 100% !important; object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
}
html.sf2 .sf-icon tg-emoji { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 64px; }
html.sf2 .sf-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.sf-badge {
  font: 800 10.5px/1 var(--sans, sans-serif); letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 4px; color: #fff;
}
.sf-badge-hot { background: #ef2d56; }
.sf-badge-sale { background: #f59e0b; color: #1f1300; }
.sf-badge-out { background: #52525b; }
html.sf2 .sf-info { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 4px 2px; flex: 1; }
html.sf2 .sf-cat { margin: 0; font: 700 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
html.sf2 .sf-name {
  margin: 0; font: 700 14.5px/1.35 var(--sans); color: #fff; letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em;
}
html.sf2 .sf-price { display: flex; gap: 8px; align-items: baseline; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
html.sf2 .sf-price b { font: 800 17px/1.2 var(--sans); color: var(--accent-2); font-variant-numeric: tabular-nums; }
html.sf2 .sf-price del { color: var(--muted-2); font-size: 13px; font-variant-numeric: tabular-nums; }
html.sf2 .sf-price span { color: var(--muted-2); font-size: 12px; font-variant-numeric: tabular-nums; }
html.sf2 .sf-meta { margin: 0; font: 600 12px/1.3 var(--sans); color: var(--muted); display: flex; align-items: center; gap: 6px; }
html.sf2 .sf-meta i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); }
html.sf2 .sf-btn {
  margin: 8px auto 4px !important; width: auto !important; display: inline-block !important;
  padding: 10px 22px !important; border-radius: 999px !important; border: 0 !important;
  background: var(--accent) !important; color: #fff !important;
  font: 800 12.5px/1 var(--sans) !important; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 18px -10px rgba(239, 45, 86, .9) !important; cursor: pointer;
  transition: background .15s, transform .12s;
}
html.sf2 .sf-btn:hover { background: var(--accent-2) !important; transform: translateY(-1px); }
html.sf2 .sf-btn:disabled { background: #3f3f46 !important; color: #a1a1aa !important; box-shadow: none !important; cursor: not-allowed; }
html.sf2 .sf-tile.is-out .sf-media { filter: grayscale(.7) brightness(.7); }

/* Featured rail (top) */
html.sf2 .featured-rail > *, html.sf2 .featured-pill {
  background: var(--paper) !important; border: 1px solid var(--line-2) !important; color: var(--ink) !important; border-radius: 14px;
}

/* ---------- Quick-view modal ------------------------------------------ */
html.sf2 .product-modal { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line-2); border-radius: 18px; }
html.sf2 .product-modal h2, html.sf2 .product-modal h3 { color: #fff; }
html.sf2 .modal-visual { background: linear-gradient(145deg, #2a2340, #1d2238) !important; }
html.sf2 .modal-backdrop { background: rgba(0, 0, 0, .7); }
html.sf2 .btn-primary, html.sf2 .btn.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; border-radius: 999px; font-weight: 800; }
html.sf2 .btn-ghost { color: var(--ink) !important; border-color: var(--line-2) !important; }

/* ---------- Product page ----------------------------------------------- */
html.sf2 .op-product-detail { max-width: 1180px; margin: 0 auto; }
html.sf2 .op-pd-breadcrumb, html.sf2 .op-pd-breadcrumb a { color: var(--muted); }
html.sf2 .op-pd-breadcrumb a:hover { color: var(--accent-2); }
html.sf2 .op-pd-grid { gap: 28px; align-items: start; }
html.sf2 .op-pd-media {
  aspect-ratio: 1 / 1; border-radius: 18px; border: 1px solid var(--line-2);
  background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.10), transparent 60%), linear-gradient(145deg, #2a2340, #1d2238 55%, #251a2c) !important;
  display: flex; align-items: center; justify-content: center; position: sticky; top: 96px; box-shadow: none;
}
html.sf2 .op-pd-media img { width: 50%; height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5)); }
html.sf2 .op-pd-info { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line-2); border-radius: 18px; padding: 30px 32px; box-shadow: none; }
html.sf2 .op-pd-info .eyebrow { display: inline-block; background: var(--accent-bg); color: var(--accent-2); border-radius: 999px; padding: 5px 11px; }
html.sf2 .op-pd-info h1 { color: #fff; font-family: var(--sans); font-weight: 900; letter-spacing: -0.025em; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; margin: 14px 0 8px; }
html.sf2 .op-pd-info .pd-tag { color: var(--muted); }
html.sf2 .op-pd-info .pd-tag strong { color: var(--ink-soft); }
html.sf2 .op-pd-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; background: none !important; border: 0 !important; padding: 0 !important; margin: 22px 0; }
html.sf2 .op-pd-stat { display: flex !important; flex-direction: column; gap: 4px; background: var(--paper-2) !important; border: 1px solid var(--line-2) !important; border-radius: 12px; padding: 12px 14px; }
html.sf2 .op-pd-stat span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
html.sf2 .op-pd-stat b { font-size: 16px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
html.sf2 .op-pd-stat.price { background: var(--accent-bg) !important; border-color: rgba(239, 45, 86, .35) !important; }
html.sf2 .op-pd-stat.price b { font-size: 20px; color: var(--accent-2); }
html.sf2 .op-pd-desc { background: var(--paper-2) !important; color: var(--ink-soft) !important; border: 1px solid var(--line-2); border-radius: 14px; padding: 18px 20px; line-height: 1.7; }
html.sf2 .op-pd-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
html.sf2 .btn-buy { background: var(--accent) !important; color: #fff !important; border: 0 !important; border-radius: 999px; padding: 15px 30px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 10px 22px -10px rgba(239, 45, 86, .9); }
html.sf2 .btn-buy:hover { background: var(--accent-2) !important; }
html.sf2 .btn-back { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line-2) !important; border-radius: 999px; padding: 15px 24px; font-weight: 700; }
@media (max-width: 860px) {
  html.sf2 .op-pd-media { position: static; aspect-ratio: 16 / 10; }
  html.sf2 .op-pd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.sf2 .op-hero-intro { padding: 26px 20px; }
  html.sf2 .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html.sf2 .sf-tile { padding: 10px; }
  html.sf2 .sf-name { font-size: 13.5px; }
  .sf-trust > span.sf-trust-pay { display: none; }
}

/* ---------- Info pages + footer ---------------------------------------- */
html.sf2 .op-footer { background: #0c0c0e !important; color: #a1a1aa; border-top: 1px solid var(--line) !important; }
html.sf2 .op-footer a { color: #d4d4d8; }
html.sf2 .op-footer a:hover { color: var(--accent-2); }
html.sf2 .op-footer-col h4, html.sf2 .op-footer-col strong, html.sf2 .op-footer-col .op-footer-tag, html.sf2 .op-footer-brand strong { color: #fff; font-family: var(--sans); }
html.sf2 .op-footer-bottom { border-top-color: var(--line) !important; color: #71717a; }

/* ---------- Catalogue toolbar, category banner, pager (stage 2) -------- */
html.sf2 .sf-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 2px 16px; font: 600 13px/1.4 var(--sans); color: var(--muted);
}
html.sf2 .sf-crumbs { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
html.sf2 .sf-crumbs a { color: var(--muted); text-decoration: none; }
html.sf2 .sf-crumbs a:hover { color: var(--accent-2); }
html.sf2 .sf-crumbs b { color: #fff; font-weight: 800; }
html.sf2 .sf-crumbs em { font-style: normal; color: var(--muted-2); margin-left: 6px; font-weight: 500; }
html.sf2 .sf-tools { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
html.sf2 .sf-show { display: flex; align-items: center; gap: 4px; color: #fff; font-weight: 700; }
html.sf2 .sf-show i { font-style: normal; color: var(--muted-2); }
html.sf2 .sf-show button { background: none; border: 0; color: var(--muted); font: 600 13px var(--sans); cursor: pointer; padding: 2px 3px; }
html.sf2 .sf-show button.is-on, html.sf2 .sf-show button:hover { color: var(--accent-2); }
html.sf2 .sf-sort { display: flex; align-items: center; gap: 8px; }
html.sf2 .sf-sort select {
  background: var(--paper); color: #fff; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 8px 30px 8px 12px; font: 600 13px var(--sans); cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
html.sf2 .sf-cat-banner {
  display: flex; align-items: center; gap: 18px; margin: 4px 0 18px; padding: 26px 28px;
  border-radius: 16px; border: 1px solid var(--line);
  background:
    radial-gradient(700px 220px at 90% 10%, rgba(239, 45, 86, .30), transparent 60%),
    radial-gradient(500px 200px at 0% 120%, rgba(59, 130, 246, .25), transparent 60%),
    linear-gradient(135deg, #10111f, #1a1b30);
}
html.sf2 .sf-cat-banner h2 { margin: 0; color: #fff; font: 900 clamp(24px, 3vw, 34px)/1.1 var(--sans); letter-spacing: -0.02em; }
html.sf2 .sf-cat-banner p { margin: 6px 0 0; color: #d4d4d8; font: 600 14px var(--sans); }
html.sf2 .sf-cat-banner-icon {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: 34px;
}
html.sf2 .sf-cat-banner-icon img, html.sf2 .sf-cat-banner-icon tg-emoji img { width: 40px !important; height: 40px !important; }
html.sf2 .sf-pager { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 0 10px; }
html.sf2 .sf-pager-info { margin: 0; font: 600 13px/1.4 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
html.sf2 .sf-pager-btns { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
html.sf2 .sf-pager button {
  min-width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--paper); color: var(--ink-soft); font: 700 14px var(--sans); cursor: pointer;
}
html.sf2 .sf-pager button:hover:not(:disabled) { border-color: var(--accent); color: #fff; }
html.sf2 .sf-pager button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
html.sf2 .sf-pager button:disabled { opacity: .35; cursor: default; }
html.sf2 .sf-pager span { color: var(--muted-2); align-self: center; padding: 0 4px; }
@media (max-width: 860px) {
  html.sf2 .sf-toolbar { flex-direction: column; align-items: flex-start; }
  html.sf2 .sf-cat-banner { padding: 18px; }
}

/* ---------- Ratings & reviews — dark ------------------------------------ */
html.sf2 .stars::before { background: linear-gradient(90deg, #fbbf24 calc(var(--r) / 5 * 100%), #3f3f46 calc(var(--r) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; }
html.sf2 .pd-reviews h2 { color: #fff; font-family: var(--sans); font-weight: 800; }
html.sf2 .pd-review-form, html.sf2 .pd-review-list li { background: var(--paper); border-color: var(--line-2); }
html.sf2 .pd-review-form textarea { border-color: var(--line-2); color: var(--ink); }
html.sf2 .star-input label { color: #3f3f46; }
html.sf2 .star-input label:hover, html.sf2 .star-input label:hover ~ label, html.sf2 .star-input input:checked ~ label { color: #fbbf24; }
html.sf2 .pd-rating b, html.sf2 .pd-review-head b { color: #fff; }
html.sf2 .sf-flash { background: rgba(59, 130, 246, .15); color: #bfdbfe; }
html.sf2 .sf-flash-success { background: rgba(52, 211, 153, .15); color: #a7f3d0; }
html.sf2 .sf-flash-error { background: rgba(239, 68, 68, .15); color: #fecaca; }
html.sf2 .sf-stars { display: flex; align-items: center; gap: 5px; font: 600 12px var(--sans); color: var(--muted); }
html.sf2 .sf-stars .stars { font-size: 13px; }

/* ---------- Cart (stage 4) --------------------------------------------- */
html.sf2 .sf-cart-link {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px; border-radius: 999px; border: 1px solid var(--line-2);
  color: #fff !important; text-decoration: none; font: 700 12.5px var(--sans);
}
html.sf2 .sf-cart-link svg { width: 21px; height: 21px; }
html.sf2 .sf-cart-link:hover { border-color: var(--accent); }
html.sf2 .sf-cart-count {
  position: absolute; top: -6px; left: 22px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: #fff; font: 800 11px/18px var(--sans); text-align: center;
}
html.sf2 .sf-cart-total { color: var(--accent-2); font-variant-numeric: tabular-nums; }
html.sf2 .sf-cart-total:empty { display: none; }
html.sf2 .sf-actions { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 8px; }
html.sf2 .sf-actions .sf-btn { margin: 0 !important; }
html.sf2 .sf-cart-btn {
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s, background .15s;
}
html.sf2 .sf-cart-btn svg { width: 19px; height: 19px; }
html.sf2 .sf-cart-btn:hover { border-color: var(--accent); color: #fff; background: var(--accent-bg); }
.sf-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #111114; color: #fff; border: 1px solid #36363b; border-radius: 12px; padding: 12px 16px;
  font: 600 14px var(--sans, sans-serif); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); z-index: 100;
  transition: opacity .2s, transform .2s;
}
.sf-toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.sf-toast a { color: #ff8aa2; font-weight: 800; text-decoration: none; }
html.sf2 .sf-cart-page { max-width: 980px; margin: 26px auto 40px; padding: 0 4px; }
html.sf2 .sf-cart-page h1 { color: #fff; font: 900 30px/1.2 var(--sans); letter-spacing: -0.02em; margin: 0 0 18px; }
html.sf2 .sf-cart-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
html.sf2 .sf-cart-table th { text-align: left; font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
html.sf2 .sf-cart-table td { padding: 14px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font: 600 14px var(--sans); font-variant-numeric: tabular-nums; }
html.sf2 .sf-cart-table tr:last-child td { border-bottom: 0; }
html.sf2 .sf-cart-name a { color: #fff; text-decoration: none; font-weight: 700; }
html.sf2 .sf-cart-name em { display: block; font-style: normal; color: #fca5a5; font-size: 12.5px; margin-top: 3px; }
html.sf2 .sf-cart-table tr.is-bad td { opacity: .75; }
html.sf2 .sf-cart-qty { white-space: nowrap; }
html.sf2 .sf-cart-qty button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line-2); background: transparent; color: #fff; cursor: pointer; font-weight: 800; }
html.sf2 .sf-cart-qty span { display: inline-block; min-width: 28px; text-align: center; }
html.sf2 .sf-cart-line { color: var(--accent-2) !important; font-weight: 800 !important; }
html.sf2 .sf-cart-rm { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; }
html.sf2 .sf-cart-rm:hover { color: #fca5a5; }
html.sf2 .sf-cart-summary { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
html.sf2 .sf-cart-sum { display: flex; gap: 14px; align-items: baseline; color: var(--muted); font: 700 14px var(--sans); }
html.sf2 .sf-cart-sum b { color: #fff; font: 900 26px var(--sans); font-variant-numeric: tabular-nums; }
html.sf2 .sf-cart-note { color: var(--muted); margin: 0; font-size: 14px; }
html.sf2 .sf-cart-note b { color: #fff; }
html.sf2 .sf-cart-empty { text-align: center; padding: 50px 20px; background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px; color: var(--muted); }
html.sf2 .sf-cart-results { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
html.sf2 .sf-cart-results li { background: var(--paper); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; color: var(--ink-soft); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
html.sf2 .sf-cart-results li.ok > span { color: var(--ok); font-weight: 900; }
html.sf2 .sf-cart-results li.fail > span { color: #fca5a5; font-weight: 900; }
html.sf2 .sf-cart-results b { color: #fff; }
html.sf2 .sf-cart-results a { color: var(--accent-2); font-weight: 800; margin-left: auto; text-decoration: none; }
html.sf2 .sf-cart-results em { font-style: normal; color: #fca5a5; margin-left: auto; }
@media (max-width: 700px) {
  html.sf2 .sf-cart-total { display: none; }
  html.sf2 .sf-cart-table th:nth-child(2), html.sf2 .sf-cart-table td:nth-child(2) { display: none; }
  html.sf2 .sf-cart-summary { align-items: stretch; text-align: left; }
}

/* ---------- Payment logos (compact rows) ------------------------------- */
.pay-row-compact .pay-list { gap: 8px !important; }
.pay-row-compact .pay-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 7px;
}
.pay-row-compact .pay-net { font: 800 10.5px/1 var(--sans, sans-serif); color: #0f766e; letter-spacing: .02em; }
.pay-row-compact .pay-net-bn { color: #1e2329; }
.pay-row-compact .pay-badge svg { display: block; }
.sf-trust .sf-trust-pay { display: inline-flex; vertical-align: middle; }
.sf-trust .pay-row-compact .pay-badge { height: 22px; padding: 0 7px; }
.sf-trust { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 22px; }
html.sf2 .sf-pd-pay { margin-top: 18px; }
html.sf2 .sf-cart-pay { display: flex; justify-content: flex-end; margin-top: 16px; }
/* Dark footer: give every logo a white chip so the dark "Kash"/"VISA" stay readable. */
html.sf2 .op-footer .pay-badge { background: #fff; border-radius: 7px; padding: 4px 9px; }
html.sf2 .op-footer .pay-badge.is-soon { opacity: .55; }
html.sf2 .op-footer .pay-label, html.sf2 .op-footer .pay-more { color: #d4d4d8; }
/* Compact logo rows don't take the footer row's divider/spacing. */
.pay-row.pay-row-compact { border: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; }
.sf-trust .sf-trust-pay { align-items: center; }

html.sf2 a.btn-buy, html.sf2 a.btn-back { text-decoration: none !important; display: inline-block; }
.pay-badge .pay-img { display: block; height: 18px; width: auto; }
.op-footer .pay-badge .pay-img, .pay-row:not(.pay-row-compact) .pay-img { height: 20px; }

/* ---------- Quick-view popup internals (were white boxes with light text) --- */
html.sf2 .modal-info h2 { color: #fff; font-family: var(--sans); font-weight: 900; letter-spacing: -0.03em; }
html.sf2 .modal-meta div {
  background: var(--paper-2) !important; border: 1px solid var(--line-2) !important;
  border-radius: 12px; box-shadow: none !important;
}
html.sf2 .modal-meta span { color: var(--muted) !important; font-weight: 700; }
html.sf2 .modal-meta b { color: #fff !important; font-variant-numeric: tabular-nums; }
html.sf2 .modal-meta #modal-price { color: var(--accent-2) !important; font-weight: 800; }
html.sf2 .modal-meta #modal-stock { color: var(--ok) !important; }
html.sf2 .detail-block {
  background: var(--paper-2) !important; border: 1px solid var(--line-2) !important; border-radius: 14px;
}
html.sf2 .detail-block b { color: #fff !important; font-family: var(--sans); font-weight: 800; }
html.sf2 .detail-block p { color: var(--ink-soft) !important; }
html.sf2 .btn-ghost.dark, html.sf2 .modal-actions .btn-ghost {
  background: transparent !important; color: #fff !important; border: 1px solid var(--line-2) !important; border-radius: 999px;
}
html.sf2 .btn-ghost.dark:hover { border-color: var(--accent) !important; }
html.sf2 .modal-note { color: var(--muted) !important; }
html.sf2 .modal-close { background: var(--paper-2) !important; color: #fff !important; border: 1px solid var(--line-2) !important; }
html.sf2 .modal-close:hover { border-color: var(--accent) !important; }
html.sf2 .modal-visual .eyebrow, html.sf2 .modal-visual p { color: var(--muted); }


/* ---------- Responsive fixes ------------------------------------------- */
/* Header: the search bar kept shrinking into a sliver between the brand and the
   nav. Give it a real minimum; below 1240px it takes its own full-width row. */
html.sf2 .site-header .header-search { flex: 1 1 320px; min-width: 300px; max-width: 560px; }
@media (max-width: 1240px) {
  html.sf2 .site-header .header-search { order: 3; flex-basis: 100%; max-width: none; min-width: 0; }
  html.sf2 .site-header .header-nav { margin-left: auto; }
}
/* Catalogue head: stack cleanly, left-aligned, search full width. */
@media (max-width: 900px) {
  html.sf2 .catalog-head { flex-direction: column !important; align-items: stretch !important; gap: 12px; }
  html.sf2 .catalog-head > * { margin-left: 0 !important; text-align: left; }
  html.sf2 .catalog-search { width: 100% !important; max-width: none !important; }
}
@media (max-width: 560px) {
  html.sf2 .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html.sf2 .site-header .header-nav { margin-left: 0; }
}
/* Category rail arrows (added by public_shop.js when the chips overflow). */
html.sf2 .sf-rail { position: relative; }
html.sf2 .sf-rail-btn {
  position: absolute; top: 4px; z-index: 3; width: 38px; height: 38px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(20, 20, 22, .95); color: #fff; cursor: pointer;
  font: 800 20px/1 var(--sans); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .8);
}
html.sf2 .sf-rail-btn:hover { border-color: var(--accent); color: var(--accent-2); }
html.sf2 .sf-rail-btn[hidden] { display: none; }
html.sf2 .sf-rail-prev { left: -4px; }
html.sf2 .sf-rail-next { right: -4px; }
@media (hover: none) { html.sf2 .sf-rail-btn { display: none; } }

/* ==========================================================================
   Sign-in / sign-up / forgot / reset pages (html.sf2-auth)
   Same palette and type as the storefront v2 theme. Scoped to its own class so
   the rest of the account area keeps its current design.
   ========================================================================== */
html.sf2-auth { color-scheme: dark; }
html.sf2-auth body {
  background:
    radial-gradient(900px 420px at 80% -10%, rgba(239, 45, 86, .20), transparent 60%),
    radial-gradient(800px 420px at 0% 110%, rgba(59, 130, 246, .18), transparent 60%),
    #141416 !important;
  color: #f4f4f5;
  font-family: "Inter", "Noto Sans Bengali", "Nirmala UI", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
html.sf2-auth .acct-bg { display: none; }
html.sf2-auth .acct-topbar { border-bottom: 1px solid #2a2a2e; background: rgba(20, 20, 22, .85); backdrop-filter: blur(12px); }
html.sf2-auth .acct-brand-copy strong { font-family: inherit; font-weight: 800; color: #fff; letter-spacing: .02em; }
html.sf2-auth .acct-brand-copy small { color: #a1a1aa; font-family: inherit; }
html.sf2-auth .acct-toplink {
  background: transparent !important; color: #e4e4e7 !important; border: 1px solid #36363b !important;
  border-radius: 999px; font-weight: 700; font-family: inherit;
}
html.sf2-auth .acct-toplink:hover { border-color: #ef2d56 !important; color: #fff !important; }
html.sf2-auth .lang-switch { background: transparent !important; border-color: #36363b !important; }
html.sf2-auth .lang-opt { font-family: inherit !important; color: #d4d4d8 !important; }
html.sf2-auth .lang-opt.is-on { background: #ef2d56 !important; color: #fff !important; }

/* Non-Latin scripts under v2: html.sf2 names only the Bengali face in --sans, so every
   other script the storefront speaks gets its own stack (Inter stays first for Latin). */
html.sf2:lang(hi) { --sans: "Inter", "Noto Sans Devanagari", "Nirmala UI", ui-sans-serif, system-ui, sans-serif; }
html.sf2:lang(ar) { --sans: "Inter", "Noto Sans Arabic", "Segoe UI", "Geeza Pro", ui-sans-serif, system-ui, sans-serif; }
html.sf2:lang(fa) { --sans: "Inter", "Vazirmatn", "Noto Sans Arabic", "Segoe UI", ui-sans-serif, system-ui, sans-serif; }
html.sf2:lang(th) { --sans: "Inter", "Noto Sans Thai", "Leelawadee UI", "Thonburi", ui-sans-serif, system-ui, sans-serif; }
html.sf2:lang(zh) { --sans: "Inter", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif; }
html.sf2:lang(ko) { --sans: "Inter", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", ui-sans-serif, system-ui, sans-serif; }

/* Language drop-down on the dark themes. */
html.sf2 .lang-menu-list { box-shadow: 0 14px 36px rgba(0, 0, 0, .55); }
html.sf2-auth .lang-menu-btn,
html.sf2-auth .lang-menu-list { background: #18181b !important; border-color: #36363b !important; color: #d4d4d8; }
html.sf2-auth .lang-menu-item { color: #d4d4d8 !important; }
html.sf2-auth .lang-menu-item:hover { background: rgba(239, 45, 86, .12); color: #ff4d6d !important; }
html.sf2-auth .lang-menu-item.is-on { background: #ef2d56; color: #fff !important; }

html.sf2-auth .acct-card {
  background: #1c1c1f !important; border: 1px solid #36363b !important; border-radius: 20px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9) !important; color: #f4f4f5;
}
html.sf2-auth .acct-card-wrap::before, html.sf2-auth .acct-card-wrap::after { display: none !important; }
html.sf2-auth .acct-icon { background: linear-gradient(145deg, #ef2d56, #b3123a) !important; box-shadow: 0 12px 26px -12px rgba(239, 45, 86, .8) !important; border: 0 !important; }
html.sf2-auth .acct-icon svg { color: #fff !important; stroke: #fff; }
html.sf2-auth .acct-title { font-family: inherit !important; font-weight: 900; letter-spacing: -0.03em; color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
html.sf2-auth .acct-subtitle, html.sf2-auth .acct-helper { color: #a1a1aa !important; }
html.sf2-auth .acct-divider { color: #71717a !important; font-family: inherit; }
html.sf2-auth .acct-divider::before, html.sf2-auth .acct-divider::after { background: #36363b !important; }

html.sf2-auth .acct-input {
  background: #141416 !important; border: 1px solid #36363b !important; color: #f4f4f5 !important;
  border-radius: 12px; font-family: inherit;
}
html.sf2-auth .acct-input::placeholder { color: #71717a; }
html.sf2-auth .acct-input:focus { border-color: #ef2d56 !important; box-shadow: 0 0 0 4px rgba(239, 45, 86, .18) !important; }
/* Browser autofill paints inputs pale yellow/blue; keep them dark. */
html.sf2-auth .acct-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #141416 inset !important; -webkit-text-fill-color: #f4f4f5 !important; caret-color: #f4f4f5;
}
html.sf2-auth .acct-field-icon { color: #71717a !important; }
html.sf2-auth .acct-checkbox { color: #d4d4d8 !important; }
html.sf2-auth .acct-checkbox input[type="checkbox"] { background: #141416 !important; border-color: #52525b !important; }
html.sf2-auth .acct-checkbox input[type="checkbox"]:checked { background: #ef2d56 !important; border-color: #ef2d56 !important; }
html.sf2-auth .acct-card a:not(.acct-btn) { color: #ff4d6d !important; }

html.sf2-auth .acct-btn { font-family: inherit; border-radius: 12px; font-weight: 800; }
html.sf2-auth .acct-btn-telegram { background: #229ed9 !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(34, 158, 217, .9) !important; }
html.sf2-auth .acct-btn-primary { background: #ef2d56 !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 22px -12px rgba(239, 45, 86, .9) !important; }
html.sf2-auth .acct-btn-secondary { background: transparent !important; color: #fff !important; border: 1px solid #36363b !important; }
html.sf2-auth .acct-btn-secondary:hover { border-color: #ef2d56 !important; }
html.sf2-auth .acct-btn-google { background: #fff !important; color: #1f1f1f !important; border: 1px solid #fff !important; }

html.sf2-auth .acct-feature-list li { color: #d4d4d8 !important; background: #141416 !important; border-color: #2a2a2e !important; }
html.sf2-auth .acct-feature-list svg { color: #34d399 !important; }
html.sf2-auth .acct-footer { color: #a1a1aa !important; }
html.sf2-auth .acct-footer a { color: #ff4d6d !important; font-weight: 800; }
html.sf2-auth .acct-trust, html.sf2-auth .acct-trust span { color: #a1a1aa !important; }
html.sf2-auth .acct-flash { border-radius: 12px; }
html.sf2-auth .acct-flash.error { background: rgba(239, 68, 68, .14) !important; color: #fecaca !important; border-color: rgba(239, 68, 68, .35) !important; }
html.sf2-auth .acct-flash.info, html.sf2-auth .acct-flash.success { background: rgba(52, 211, 153, .12) !important; color: #a7f3d0 !important; border-color: rgba(52, 211, 153, .3) !important; }

/* Telegram channel / group / bot links in the trust strip. */
.sf-trust .sf-trust-tg { display: inline-flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; justify-content: center; }
.sf-trust .sf-trust-tg svg { width: 15px; height: 15px; flex: none; color: #229ed9; }

/* Account area on phones: panel notes drop under the title, label/value rows keep the label narrow. */
@media (max-width: 600px) {
  html.sf2 .panel-h { flex-wrap: wrap; row-gap: 6px; }
  html.sf2 .panel-h h3 { flex: 1 1 auto; }
  html.sf2 .panel-h .panel-sub { flex-basis: 100%; }
  html.sf2 .total-card .tc-row { gap: 12px; }
  html.sf2 .total-card .tc-row > span { flex: none; }
  html.sf2 .total-card .tc-row > b { text-align: right; }
}

/* ---------- Categories down the left side (wide screens) ----------------
   Owner, 2026-10-05: the category row sits in a column on the left of the catalogue, the
   products to its right. Below 1100px there is no room for a column, so phones and tablets
   keep the scrolling row above the products. The column stays in view below the sticky
   header while the products scroll, and scrolls on its own when it is taller than the window
   (--sf-header-h is the header's real height, set by public_shop.js).
   The script wraps the chips in .sf-rail and puts the category banner in there with them;
   `display: contents` lets the banner go above the products while the chips go to the left. */
@media (min-width: 1100px) {
  html.sf2 .catalog {
    display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: 28px; align-items: start;
  }
  html.sf2 .catalog > * { grid-column: 2; min-width: 0; }
  html.sf2 .catalog > .catalog-head { grid-column: 1 / -1; }
  html.sf2 .catalog > .sf-rail { display: contents; }
  html.sf2 .catalog > .sf-rail > * { grid-column: 2; min-width: 0; }
  html.sf2 .catalog > .sf-rail > .sf-rail-btn { display: none !important; }
  html.sf2 .catalog > .category-chips,
  html.sf2 .catalog > .sf-rail > .category-chips {
    grid-column: 1; grid-row: 2 / span 4;
    position: sticky; top: calc(var(--sf-header-h, 80px) + 16px);
    max-height: calc(100vh - var(--sf-header-h, 80px) - 32px);
    display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap !important;
    gap: 6px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
    padding: 0 2px 8px 0; margin: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  html.sf2 .catalog > .category-chips > *,
  html.sf2 .catalog > .sf-rail > .category-chips > * {
    display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
    justify-content: flex-start; text-align: left; white-space: normal;
    border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.25;
  }
}

/* Games & Gift Cards (owner, 2026-10-17): game tiles in the grid, the games category's tabs and
   the buy panel (public_shop.js, openGame). */
html.sf2 .sf-badge-game { background: #2563eb !important; color: #fff !important; }
html.sf2 .sf-game-tile .sf-media { background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.12), transparent 60%), linear-gradient(145deg, #1d2a4a, #17213a 55%, #1b1f33) !important; }
html.sf2 .sf-game-tile { cursor: pointer; }
html.sf2 .sf-price .sf-from { color: var(--muted); font-size: 12px; font-weight: 700; margin-right: 4px; }
html.sf2 .sf-games-more .sf-name { color: var(--accent-2); }
html.sf2 .sf-games-head { grid-column: 1 / -1; display: grid; gap: 8px; padding: 2px 2px 6px; }
html.sf2 .sf-games-head h3 { margin: 0; color: #fff; font-size: 20px; font-weight: 900; letter-spacing: -0.02em; }
html.sf2 .sf-games-head p { margin: 0; color: var(--muted); font-size: 13px; }
html.sf2 .sf-games-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
html.sf2 .sf-games-tabs button { border: 1px solid var(--line-2); background: transparent; color: var(--ink); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
html.sf2 .sf-games-tabs button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
html.sf2 .sf-games-tabs button i { font-style: normal; opacity: .75; margin-left: 6px; }
html.sf2 .games-body { display: grid; gap: 12px; margin-top: 10px; }
html.sf2 .games-step-title { margin: 0; color: #fff; font-weight: 800; font-size: 15px; }
html.sf2 .games-back { justify-self: start; background: none; border: 0; padding: 0; color: var(--muted); font-weight: 700; cursor: pointer; }
html.sf2 .games-back:hover { color: #fff; }
html.sf2 .games-pills { display: flex; flex-wrap: wrap; gap: 8px; }
html.sf2 .games-pills button { border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--ink); border-radius: 999px; padding: 9px 15px; font-weight: 700; cursor: pointer; }
html.sf2 .games-pills button:hover { border-color: var(--accent); color: #fff; }
html.sf2 .games-packs { display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; padding-right: 2px; }
html.sf2 .games-pack { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(255,255,255,.03); color: var(--ink); font-weight: 700; text-align: left; cursor: pointer; }
html.sf2 .games-pack:hover { border-color: var(--accent); color: #fff; }
html.sf2 .games-pack b { color: var(--accent-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
html.sf2 .games-form { display: grid; gap: 12px; }
html.sf2 .games-field { display: grid; gap: 6px; }
html.sf2 .games-field span { color: #fff; font-weight: 700; font-size: 14px; }
html.sf2 .games-field small { color: var(--muted); font-size: 12px; line-height: 1.45; }
html.sf2 .games-input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: #fff; font-size: 15px; }
html.sf2 .games-input:focus { outline: none; border-color: var(--accent); }
html.sf2 .games-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
html.sf2 .games-error { margin: 0; color: #fca5a5; font-size: 13px; line-height: 1.5; }
html.sf2 .games-ok { margin: 0; color: var(--ok); font-weight: 800; font-size: 16px; }
html.sf2 .games-sum { display: grid; gap: 7px; border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; }
html.sf2 .games-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
html.sf2 .games-sum-row span { color: var(--muted); }
html.sf2 .games-sum-row b { color: #fff; text-align: right; word-break: break-word; }
html.sf2 .games-actions { display: flex; flex-wrap: wrap; gap: 10px; }
html.sf2 .games-actions .btn { text-decoration: none; }
html.sf2 .games-code { margin: 0; white-space: pre-wrap; word-break: break-all; background: rgba(255,255,255,.05); border: 1px dashed var(--line-2); border-radius: 10px; padding: 12px; color: #fff; font-size: 14px; }
html.sf2 .games-wait { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; }
html.sf2 .games-spin { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 50%; animation: games-spin .8s linear infinite; }
@keyframes games-spin { to { transform: rotate(360deg); } }

/* ---------- Links for search engines; category and brand pages (owner, 2026-10-18: SEO) --------
   A category button is a link to the category's page and a tile's name a link to the product's
   own page (public_shop.js); a plain click still filters / opens the product window, so they must
   look exactly as the buttons and the plain names did. The category and brand pages
   (public_listing.html) and the "More ... plans" row under a product use the shop's own tiles
   (_sf_tiles.html); there the whole tile opens the product's page. */
html.sf2 .category-chips > a.chip { text-decoration: none; }
/* A button centres its text; the left column (from 1100px) sets its own alignment. */
@media (max-width: 1099px) { html.sf2 .category-chips > a.chip { text-align: center; } }
html.sf2 .sf-name a { color: inherit; text-decoration: none; }
html.sf2 .seo-grid .sf-tile { position: relative; }
html.sf2 .seo-grid .sf-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
html.sf2 .seo-grid .sf-actions { position: relative; z-index: 2; }
html.sf2 .seo-grid a.sf-btn { text-decoration: none; }
html.sf2 .seo-page { max-width: 1180px; margin: 0 auto; }
html.sf2 .seo-head {
  display: flex; gap: 20px; align-items: flex-start; margin: 6px 0 22px; padding: 26px 28px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 18px;
}
html.sf2 .seo-head-icon {
  flex: 0 0 72px; height: 72px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 40px; line-height: 1;
  background: radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, .10), transparent 60%), linear-gradient(145deg, #2a2340, #1d2238 55%, #251a2c);
}
html.sf2 .seo-head-icon tg-emoji, html.sf2 .seo-head-icon > img { display: flex; width: 62%; height: 62%; align-items: center; justify-content: center; }
html.sf2 .seo-head-icon tg-emoji img, html.sf2 .seo-head-icon tg-emoji video { width: 100%; height: 100%; object-fit: contain; }
html.sf2 .seo-head .eyebrow { display: inline-block; background: var(--accent-bg); color: var(--accent-2); border-radius: 999px; padding: 5px 11px; font-size: 11px; }
html.sf2 .seo-head h1 { color: #fff; font-family: var(--sans); font-weight: 900; letter-spacing: -0.025em; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; margin: 12px 0 10px; }
html.sf2 .seo-intro p { margin: 0 0 8px; color: var(--muted); line-height: 1.6; max-width: 860px; }
html.sf2 .seo-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
html.sf2 .seo-facts li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--ink-soft); font: 700 12.5px/1.2 var(--sans); }
html.sf2 .seo-links { margin: 0 0 20px; }
html.sf2 .seo-links h2, html.sf2 .seo-related-head h2 { margin: 0 0 10px; color: #fff; font: 800 17px/1.3 var(--sans); }
html.sf2 .seo-chips { display: flex; flex-wrap: wrap; gap: 8px; }
html.sf2 .seo-chips a {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line-2); color: var(--ink-soft);
  font: 700 13px/1.2 var(--sans); text-decoration: none;
}
html.sf2 .seo-chips a:hover { border-color: var(--accent); color: #fff; }
html.sf2 .seo-chips a span { color: var(--muted-2); font-weight: 600; }
html.sf2 .seo-chips tg-emoji, html.sf2 .seo-chips tg-emoji img, html.sf2 .seo-chips tg-emoji video { display: inline-flex; width: 18px; height: 18px; object-fit: contain; }
html.sf2 .seo-more { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 28px; }
html.sf2 .seo-more a { text-decoration: none; }
html.sf2 .seo-related { margin: 34px 0 0; }
html.sf2 .seo-related-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 12px; }
html.sf2 .seo-related-head h2 { margin: 0; }
html.sf2 .seo-related-head a { color: var(--accent-2); font: 700 13px/1.3 var(--sans); text-decoration: none; }
html.sf2 .seo-related-head a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  /* On a phone the text gets the whole width: no icon column. */
  html.sf2 .seo-head { display: block; padding: 18px 16px; }
  html.sf2 .seo-head-icon { display: none; }
  html.sf2 .seo-intro p { font-size: 14px; line-height: 1.55; }
}

/* Still and video custom emoji inside product text are drawn at text size, as in Telegram (owner 2026-10-29: the
   Microsoft logo emoji showed 100 px tall). The renderer sizes only animated ones itself; the editor's .tge-emoji-img
   rule (tg-editor.css) is not loaded on the website. */
.detail-block tg-emoji img.tge-emoji-img, .detail-block tg-emoji video.tge-emoji-img {
  display: inline-block; width: 1.4em; height: 1.4em; vertical-align: -0.3em; object-fit: contain;
}
/* eSIM (2026-10-29): the delivered QR code on white so every phone camera reads it; the filter by days. */
html.sf2 .games-esim img { display: block; width: 220px; height: 220px; margin: 10px auto; padding: 10px; background: #fff; border-radius: 14px; }
html.sf2 .games-days { margin: 4px 0 12px; }
html.sf2 .games-days button.is-on { border-color: var(--accent); color: #fff; background: rgba(255,255,255,.08); }
/* TOP-UPS / CATALOG headings among the category buttons (2026-10-29, after KOKORO's sidebar): plain labels, not
   buttons -- the button rules above use !important and, from 1100 px, a longer selector. */
html.sf2 .category-chips > .chip-group, html.sf2 .catalog > .category-chips > .chip-group,
html.sf2 .catalog > .sf-rail > .category-chips > .chip-group {
  flex: 0 0 auto; align-self: center; padding: 12px 4px 2px !important; font-size: 11px !important; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft) !important; white-space: nowrap;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; pointer-events: none; }
/* Brand cards and their plans window (owner, 2026-10-29, after KOKORO's site). */
html.sf2 .sf-plans { margin: 2px 0 6px; color: var(--ink-soft); font-size: 13px; text-align: center; }
html.sf2 .sf-brand-card { cursor: pointer; }
html.sf2 .plans-modal { display: block; width: min(860px, calc(100% - 32px)); max-height: 90vh; height: auto; overflow: auto; padding: 22px; }
html.sf2 .plans-head { display: flex; align-items: center; gap: 14px; margin: 0 44px 16px 0; }
html.sf2 .plans-head h2 { margin: 0; font-size: 22px; color: #fff; }
html.sf2 .plans-head p { margin: 2px 0 0; color: var(--ink-soft); font-size: 13px; }
html.sf2 .plans-icon, html.sf2 .plan-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.06); overflow: hidden; font-size: 26px; }
html.sf2 .plan-icon { width: 40px; height: 40px; font-size: 22px; }
html.sf2 .plans-icon tg-emoji, html.sf2 .plan-icon tg-emoji { display: inline-flex; width: 72%; height: 72%; }
html.sf2 .plans-icon img, html.sf2 .plan-icon img, html.sf2 .plans-icon video, html.sf2 .plan-icon video { width: 100%; height: 100%; object-fit: contain; }
html.sf2 .plans-list { display: flex; flex-direction: column; gap: 10px; }
html.sf2 .plan-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: rgba(255,255,255,.03); }
html.sf2 .plan-row.is-out { opacity: .55; }
html.sf2 .plan-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
html.sf2 .plan-info b { font-size: 15px; color: #fff; overflow-wrap: anywhere; }
html.sf2 .plan-tags { display: flex; flex-wrap: wrap; gap: 6px; }
html.sf2 .plan-tag { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(47,224,133,.14); color: #7ee2ad; }
html.sf2 .plan-tag.is-out { background: rgba(255,90,90,.14); color: #ff9a9a; }
html.sf2 .plan-tag.is-manual { background: rgba(255,200,80,.14); color: #ffd27a; }
html.sf2 .plan-price { flex: 0 0 auto; font-size: 18px; color: #fff; }
html.sf2 .plan-cart, html.sf2 .plan-choose { flex: 0 0 auto; border-radius: 999px; padding: 9px 15px; font-weight: 800; font-size: 13px; cursor: pointer; }
html.sf2 .plan-cart { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
html.sf2 .plan-choose { background: var(--accent); border: 0; color: #fff; }
html.sf2 .plan-choose:disabled { opacity: .5; cursor: default; }
@media (max-width: 640px) {
  html.sf2 .plans-modal { padding: 16px; }
  html.sf2 .plan-row { flex-wrap: wrap; }
  html.sf2 .plan-info { flex-basis: calc(100% - 56px); }
  html.sf2 .plan-price { margin-left: 52px; }
  html.sf2 .plan-choose { margin-left: auto; }
}

/* ---------- The product as a page (owner, 2026-10-29, after kokoroshop.app/tienda/...) ----------------
   html.pp-open (public_shop.js, or the server on /p/<id>/<name>): #product-page takes the catalogue's place, beside
   the category column on wide screens; the rest of the shop page waits hidden. Phones: image, name, buy box, text. */
html.sf2.pp-open main > section:not(.catalog) { display: none !important; }
html.sf2.pp-open .catalog > *:not(#product-page):not(.sf-rail):not(.category-chips),
html.sf2.pp-open .catalog > .sf-rail > *:not(.category-chips) { display: none !important; }
@media (max-width: 1099px) {
  html.sf2.pp-open .catalog > .sf-rail, html.sf2.pp-open .catalog > .category-chips { display: none !important; }
}
@media (min-width: 1100px) {
  html.sf2.pp-open .catalog > .category-chips,
  html.sf2.pp-open .catalog > .sf-rail > .category-chips { grid-row: 1 / span 4; }
  html.sf2.pp-open .catalog > #product-page { grid-row: 1 / span 4; }
}
html.sf2 .pp { padding: 6px 0 40px; min-width: 0; }
html.sf2 .pp[hidden] { display: none !important; }
html.sf2 .pp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 16px; font-size: 13px; color: var(--muted); }
html.sf2 .pp-crumbs a { color: var(--ink-soft); text-decoration: none; }
html.sf2 .pp-crumbs a:hover { color: var(--accent-2); }
html.sf2 .pp-crumbs a[data-pp-back] { color: var(--ink); font-weight: 700; }
html.sf2 .pp-crumb-now { min-width: 0; max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.sf2 .pp-flash { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
html.sf2 .pp-flash.is-error { background: rgba(248, 113, 113, .12); color: var(--danger); }
html.sf2 .pp-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 28px; align-items: start; }
html.sf2 .pp-left { display: grid; gap: 16px; position: sticky; top: calc(var(--sf-header-h, 80px) + 16px); }
html.sf2 .pp-media {
  aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border-radius: 18px;
  border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.12), transparent 60%), linear-gradient(145deg, #2b2440, #1f1a30 55%, #1b1a26);
}
html.sf2 .pp-media .pp-img { width: 100%; height: 100%; object-fit: cover; }
html.sf2 .pp-icon { display: flex; align-items: center; justify-content: center; width: 50%; height: 50%; font-size: 110px; line-height: 1; }
html.sf2 .pp-icon img, html.sf2 .pp-icon tg-emoji img, html.sf2 .pp-icon video,
html.sf2 .pp-icon .tge-emoji-lottie, html.sf2 .pp-icon .tge-emoji-lottie svg {
  width: 100% !important; height: 100% !important; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45));
}
html.sf2 .pp-icon tg-emoji { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 110px; }
html.sf2 .pp-buy { display: grid; gap: 14px; margin: 0; padding: 18px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); }
html.sf2 .pp-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
html.sf2 .pp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: -8px; }
html.sf2 .pp-price b { font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: var(--accent-2); font-variant-numeric: tabular-nums; }
html.sf2 .pp-price del { color: var(--muted-2); font-size: 16px; }
html.sf2 .pp-price small { color: var(--muted); font-size: 14px; }
html.sf2 .pp-qty-row { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; }
html.sf2 .pp-qty { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper-2); }
html.sf2 .pp-qty button { width: 38px; height: 40px; border: 0; background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; }
html.sf2 .pp-qty button:hover:not([disabled]) { background: var(--line); }
html.sf2 .pp-qty button[disabled] { color: var(--muted-2); cursor: not-allowed; }
html.sf2 .pp-qty input { width: 48px; height: 40px; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
html.sf2 .pp-qty input::-webkit-outer-spin-button, html.sf2 .pp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
html.sf2 .pp-total { display: grid; gap: 2px; justify-self: end; text-align: right; }
html.sf2 .pp-total b { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
html.sf2 .pp-avail { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ok); }
html.sf2 .pp-avail i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
html.sf2 .pp-avail.is-out { color: var(--danger); }
html.sf2 .pp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html.sf2 .pp-actions > :only-child { grid-column: 1 / -1; }
html.sf2 .pp-cart, html.sf2 .pp-buynow {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 14px;
  border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
}
html.sf2 .pp-cart { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
html.sf2 .pp-cart:hover { border-color: var(--ink-soft); }
html.sf2 .pp-buynow { background: var(--accent); color: #fff !important; border: 0; }
html.sf2 .pp-buynow:hover { background: var(--accent-2); }
html.sf2 .pp-buynow[disabled] { background: var(--line-2); color: var(--muted) !important; cursor: not-allowed; }
html.sf2 .pp-pay { margin: 0; font-size: 12px; color: var(--muted); text-align: center; }
html.sf2 .pp-info { display: grid; gap: 16px; align-content: start; min-width: 0; }
html.sf2 .pp-head, html.sf2 .pp-body { display: grid; gap: 14px; min-width: 0; }
html.sf2 .pp-badges { display: flex; flex-wrap: wrap; gap: 8px; }
html.sf2 .pp-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
}
html.sf2 .pp-badge.is-ok { background: var(--ok-bg); border-color: transparent; color: var(--ok); }
html.sf2 .pp-badge.is-out { background: rgba(248, 113, 113, .12); border-color: transparent; color: var(--danger); }
html.sf2 .pp-badge .stars { font-size: 12px; }
html.sf2 .pp-title { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); overflow-wrap: anywhere; }
html.sf2 .pp-details { display: grid; gap: 12px; }
html.sf2 .pp-details .detail-block { padding: 16px; }
html.sf2 .pp-details .detail-block p { margin: 0; line-height: 1.65; overflow-wrap: anywhere; }
html.sf2 .pp-details .detail-block a { color: var(--accent-2); }
html.sf2 .pp-guide {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line-2);
}
html.sf2 .pp-guide-play { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: #fff; }
html.sf2 .pp-guide-play svg { width: 20px; height: 20px; }
html.sf2 .pp-guide-txt { display: grid; gap: 2px; min-width: 0; }
html.sf2 .pp-guide-txt b { font-size: 15px; color: var(--ink); }
html.sf2 .pp-guide-txt span { font-size: 13px; color: var(--muted); }
html.sf2 .pp-guide-btn {
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line-2); color: var(--ink); text-decoration: none;
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
html.sf2 .pp-guide:hover .pp-guide-btn { border-color: var(--accent); color: #fff; }
html.sf2 .pp-reviews:not(:empty), html.sf2 .pp-related:not(:empty) { margin-top: 34px; }
html.sf2 .pp-h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 14px; font-size: 20px; font-weight: 800; color: var(--ink); }
html.sf2 .pp-h2-sum { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
html.sf2 .pp-h2-link { font-size: 13px; font-weight: 700; color: var(--accent-2); text-decoration: none; }
html.sf2 .pp-review-form { display: grid; gap: 10px; margin: 0 0 16px; padding: 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); }
html.sf2 .pp-review-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink); font: inherit; }
html.sf2 .pp-review-form .pp-buynow { justify-self: start; min-height: 42px; padding: 0 22px; }
html.sf2 .pp-review-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html.sf2 .pp-review-list li { padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
html.sf2 .pp-review-list p { margin: 8px 0 0; color: var(--ink-soft); overflow-wrap: anywhere; }
html.sf2 .pp-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--muted); }
html.sf2 .pp-review-head b { color: var(--ink); }
html.sf2 .pp-verified { color: var(--ok); font-weight: 600; }
html.sf2 .pp-video { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; }
html.sf2 .pp-video[hidden] { display: none; }
html.sf2 .pp-video-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .75); }
html.sf2 .pp-video-box { position: relative; width: min(960px, 100%); overflow: hidden; border-radius: 16px; border: 1px solid var(--line-2); background: #000; }
html.sf2 .pp-video-box video { display: block; width: 100%; max-height: 76vh; background: #000; }
html.sf2 .pp-video-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
html.sf2 .pp-video-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--paper); color: var(--ink); }
html.sf2 .pp-video-foot a { color: var(--accent-2); font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (max-width: 860px) {
  html.sf2 .pp-grid { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  html.sf2 .pp-left, html.sf2 .pp-info { display: contents; }
  html.sf2 .pp-media { order: 1; aspect-ratio: auto; height: 210px; }
  html.sf2 .pp-head { order: 2; }
  html.sf2 .pp-buy { order: 3; }
  html.sf2 .pp-body { order: 4; }
  html.sf2 .pp-icon { width: auto; height: 120px; font-size: 96px; }
  html.sf2 .pp-icon tg-emoji { font-size: 96px; }
  html.sf2 .pp-icon img, html.sf2 .pp-icon tg-emoji img, html.sf2 .pp-icon video { width: 120px !important; height: 120px !important; }
  html.sf2 .pp-guide { grid-template-columns: auto minmax(0, 1fr); }
  html.sf2 .pp-guide-btn { grid-column: 1 / -1; text-align: center; }
  html.sf2 .pp-crumb-now { max-width: 100%; }
}