/* Forsa Deals storefront v3 "Night Blue" — layered on storefront.css.
   Matches the channel post cards: navy stage, Telegram blue, orange discount badge, lemon highlights,
   mint for savings. The page body is light by default; dark only when the visitor picks it. */
:root {
  --fp-navy: #0B1B3A;
  --fp-navy-2: #0E2E54;
  --fp-navy-3: #081024;
  --fp-bg: #F3F6FB;
  --fp-surface: #FFFFFF;
  --fp-surface-2: #EEF3FA;
  --fp-ink: #0B1B3A;
  --fp-ink-2: #2B3B5C;
  --fp-muted: #5B6B86;
  --fp-line: #E1E8F2;
  --fp-line-strong: #C9D5E6;
  --fp-brand: #0B6FD6;
  --fp-brand-2: #229ED9;
  --fp-brand-strong: #0A5CB5;
  --fp-brand-text: #0A5CB5;
  --fp-brand-soft: #E6F2FD;
  --fp-brand-grad: linear-gradient(135deg, #0B6FD6 0%, #229ED9 60%, #38BDF8 100%);
  --fp-btn-brand: linear-gradient(135deg, #0A5CB5 0%, #0B6FD6 100%);
  --fp-hot: #F97316;
  --fp-hot-hover: #FB8A3C;
  --fp-hot-soft: #FFF3E8;
  --fp-hot-text: #C2410C;
  --fp-mint: #047857;
  --fp-mint-soft: #E4F7EF;
  --fp-yellow: #FACC15;
  --fp-header-bg: rgba(255, 255, 255, .9);
  --fp-shadow-sm: 0 1px 2px rgba(11, 27, 58, .06);
  --fp-shadow: 0 8px 24px -12px rgba(11, 27, 58, .18);
  --fp-shadow-lg: 0 24px 48px -20px rgba(11, 27, 58, .34);
  --fp-radius: 20px;
}
:root[data-theme="dark"] {
  --fp-bg: #070E1F;
  --fp-surface: #0E1A33;
  --fp-surface-2: #13213F;
  --fp-ink: #EAF2FF;
  --fp-ink-2: #C7D4EC;
  --fp-muted: #93A4C3;
  --fp-line: #1B2A4A;
  --fp-line-strong: #2A3D63;
  --fp-brand-text: #7DD3FC;
  --fp-brand-soft: rgba(56, 189, 248, .14);
  --fp-hot-soft: rgba(249, 115, 22, .15);
  --fp-hot-text: #FDBA74;
  --fp-mint: #6EE7B7;
  --fp-mint-soft: rgba(16, 185, 129, .14);
  --fp-header-bg: rgba(7, 14, 31, .88);
  --fp-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6);
  --fp-shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, .8);
}
body.fp-body { background: radial-gradient(1000px 520px at 100% 0%, rgba(34, 158, 217, .07), transparent 60%), var(--fp-bg); }

/* ---------- Header ---------- */
.fp-logo { width: 42px; height: 42px; filter: drop-shadow(0 6px 12px rgba(11, 111, 214, .28)); }
.fp-brand-text strong { color: var(--fp-ink); }
.fp-brand-text small { color: var(--fp-brand-text); }
.fp-search input:focus { border-color: var(--fp-brand); box-shadow: 0 0 0 4px rgba(11, 111, 214, .15); }
.fp-store-chip[aria-pressed="true"], .fp-chip[aria-current="page"] { background: var(--fp-navy); color: #fff; border-color: var(--fp-navy); }
.category-btn[aria-pressed="true"] { background: var(--fp-btn-brand); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px rgba(11, 111, 214, .8); }
.fp-chip:hover { border-color: var(--fp-brand); color: var(--fp-brand-text); }
:root[data-theme="dark"] .fp-store-chip[aria-pressed="true"] { background: #EAF2FF; color: var(--fp-navy); }

/* ---------- Buttons ---------- */
.fp-btn-brand { background: var(--fp-btn-brand); }
.fp-btn-brand:hover { box-shadow: 0 10px 24px -10px rgba(11, 111, 214, .8); }
.fp-btn-hot { background: var(--fp-hot); color: var(--fp-navy); }
.fp-btn-hot:hover { background: var(--fp-hot-hover); box-shadow: 0 12px 26px -12px rgba(249, 115, 22, .9); }
.fp-btn-tg { background: #0B6FD6; }
.fp-btn-tg:hover { background: #0A5CB5; }

/* ---------- Ticker ---------- */
.fp-ticker { background: var(--fp-navy-3); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.fp-ticker-label { background: rgba(250, 204, 21, .12); border-color: rgba(250, 204, 21, .38); color: #FDE68A; }
.fp-ticker-list a { color: rgba(226, 232, 240, .9); }
.fp-ticker .fp-drop { color: #FB923C; }
.fp-ticker .fp-price { color: #fff; }

/* ---------- Hero: the post-card navy stage ---------- */
.fp-hero {
  background:
    radial-gradient(760px 440px at 92% -12%, rgba(34, 158, 217, .55), transparent 62%),
    radial-gradient(600px 400px at 4% 115%, rgba(249, 115, 22, .22), transparent 62%),
    linear-gradient(160deg, #081024 0%, #0B1B3A 48%, #0E2E54 100%);
}
.fp-hero::before { background-image: radial-gradient(rgba(255, 255, 255, .08) 1.5px, transparent 1.5px); background-size: 36px 36px; }
.fp-hero-pulse path { stroke: #38BDF8; filter: drop-shadow(0 0 6px rgba(56, 189, 248, .8)); }
.fp-eyebrow { color: #BAE6FD; }
.fp-hero h1 em, [dir="ltr"] .fp-hero h1 em { background: linear-gradient(90deg, #38BDF8 0%, #7DD3FC 45%, #FACC15 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fp-hero-sub { color: #C7D4EC; }
.fp-hero-links a { color: #7DD3FC; border-bottom-color: rgba(125, 211, 252, .5); }
.fp-hero-stats > div:nth-child(2) dd { color: #FB923C; }
.fp-hero-stats > div:nth-child(3) dd { color: #FACC15; }
.fp-hero-stats dt { color: #93A4C3; }
.fp-board::before { content: ""; position: absolute; inset-inline: 24px; top: 0; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #229ED9, #FACC15 50%, #F97316); }
.fp-board-price small { background: #F97316; color: var(--fp-navy); }
.fp-board li:first-child .fp-board-rank { color: #FACC15; }

/* ---------- Toolbar + deal cards ---------- */
.fp-toolbar h2 { color: var(--fp-ink); }
.forsa-card::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, #0B6FD6, #229ED9 55%, #F97316); transform: scaleX(0); transition: transform .25s ease;
}
.forsa-card:hover { box-shadow: var(--fp-shadow-lg); border-color: var(--fp-line-strong); }
.forsa-card:hover::before, .forsa-card:focus-within::before { transform: scaleX(1); }
.forsa-card.is-hot { border-color: rgba(249, 115, 22, .35); }
.forsa-product-image { background: radial-gradient(circle at 50% 40%, #FFFFFF 58%, #F1F6FC 100%); }
.forsa-discount { background: var(--fp-hot); color: var(--fp-navy); box-shadow: 0 6px 14px -6px rgba(249, 115, 22, .8); }
.forsa-discount.is-hot { background: #E11D48; color: #fff; }
.forsa-store { background: rgba(11, 27, 58, .88); border-color: transparent; color: #fff; }
.forsa-card-price strong { font-family: var(--fp-display); color: var(--fp-ink); }
.forsa-save { background: var(--fp-mint-soft); color: var(--fp-mint); }
.fp-verified { color: var(--fp-mint); }
.forsa-title a:hover { color: var(--fp-brand-text); }
.forsa-buy { background: var(--fp-btn-brand); color: #fff; }
.forsa-buy:hover { background: linear-gradient(135deg, #0B6FD6 0%, #229ED9 100%); box-shadow: 0 12px 24px -12px rgba(11, 111, 214, .9); }
.forsa-icon:hover { color: var(--fp-brand-text); border-color: var(--fp-brand); background: var(--fp-brand-soft); }

/* ---------- Sections ---------- */
.fp-section-head > a { color: var(--fp-brand-text); }
.fp-mini-coupon::before { background: linear-gradient(180deg, #229ED9, #F97316); }
.fp-why-grid article { position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.fp-why-grid article:hover { transform: translateY(-3px); box-shadow: var(--fp-shadow-lg); }
.fp-why-ico { background: linear-gradient(135deg, #0B1B3A, #0B6FD6); box-shadow: 0 12px 24px -12px rgba(11, 111, 214, .9); }
.fp-band-inner {
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(34, 158, 217, .5), transparent 60%),
    radial-gradient(420px 220px at 0% 100%, rgba(249, 115, 22, .25), transparent 60%),
    linear-gradient(135deg, #081024, #0E2E54);
}
.fp-band-inner p { color: #C7D4EC; }
.fp-footer { background: var(--fp-navy-3); }

/* ---------- Deal page ---------- */
.fp-save-pill { background: var(--fp-mint-soft); color: var(--fp-mint); }
.fp-seg button[disabled] { opacity: .45; cursor: not-allowed; }
.fp-history-soon { display: flex; align-items: center; gap: 14px; }
.fp-history-soon > span { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--fp-brand-soft); font-size: 22px; }
.fp-history-soon p { margin-top: 2px; }
.fp-spark .line { stroke: var(--fp-brand); }
.fp-product .fp-cta-row .fp-btn-hot { box-shadow: 0 14px 30px -14px rgba(249, 115, 22, .9); }

/* ---------- Related-deals rail (auto-rotates, swipeable) ---------- */
.fp-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 4); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding-bottom: 6px;
  scrollbar-width: none;
}
.fp-rail::-webkit-scrollbar { display: none; }
.fp-rail > * { scroll-snap-align: start; }
@media (max-width: 1024px) { .fp-rail { grid-auto-columns: calc((100% - 32px) / 3); } }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  /* Stores and sections each get their own swipe row, so nothing hides off-screen. */
  .fp-chip-scroll { flex-direction: column; align-items: stretch; gap: 8px; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .fp-chips { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .fp-chips::-webkit-scrollbar { display: none; }
  .fp-chips-cats { padding-inline-start: 0; margin-inline-start: 0; border-inline-start: 0; }
  .fp-chip { height: 32px; padding: 0 12px; font-size: 12.5px; }
  .fp-logo { width: 38px; height: 38px; }

  .fp-hero { padding: 22px 0 30px; }
  .fp-hero-pulse { display: none; }
  .fp-eyebrow { font-size: 12px; padding: 5px 12px; }
  .fp-hero h1 { margin-top: 12px; font-size: clamp(1.55rem, 1rem + 3.4vw, 2rem); line-height: 1.3; }
  .fp-hero h1 em { display: inline; }
  .fp-hero-sub { margin-top: 8px; font-size: 14px; line-height: 1.7; }
  .fp-hero-search { margin-top: 16px; }
  .fp-hero-search input { height: 44px; font-size: 15px; }
  .fp-hero-search .fp-btn { height: 44px; }
  .fp-hero-links { margin-top: 10px; }
  .fp-hero-stats { margin-top: 18px; }
  .fp-hero-stats dd { font-size: 20px; }
  .fp-board-wrap { display: none; }
  .fp-main { padding-top: 20px; }

  .fp-rail { grid-auto-columns: 46%; gap: 10px; }

  /* Deal page: price and button inside the first screen. */
  .forsa-detail .fp-chipbar { display: none; }
  .forsa-detail .fp-main { padding-top: 12px; }
  .fp-crumbs { margin-bottom: 10px; }
  .fp-crumbs ol { font-size: 12px; }
  .fp-crumbs [aria-current] { max-width: 24ch; }
  .fp-product { padding: 12px; gap: 14px; }
  .fp-product-media { aspect-ratio: auto; height: min(64vw, 280px); padding: 0; }
  .fp-product-media img { inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
  .fp-product-info { gap: 12px; padding-block: 0; }
  .fp-product-info h1 { font-size: 18px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .fp-product-info > .fp-muted { display: none; }
  .fp-price-card { padding: 12px 14px; }
  .fp-price-now { font-size: 30px; }
  .fp-cta-row .fp-btn { height: 52px; font-size: 16px; }
}
@media (max-width: 560px) {
  .fp-vote { gap: 6px; }
  .fp-vote button { min-height: 28px; padding: 2px 8px; font-size: 12px; }
  .fp-heat { display: none; }
  .fp-vote button:last-child { margin-inline-start: auto; }
}

/* ---------- Sticky buy bar (deal page, mobile) ---------- */
.fp-stickybuy { display: none; }
@media (max-width: 760px) {
  .fp-stickybuy {
    position: fixed; inset-inline: 10px; bottom: 10px; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border-radius: 18px; background: rgba(8, 16, 36, .96); color: #fff;
    box-shadow: 0 18px 40px -16px rgba(8, 16, 36, .6); backdrop-filter: blur(10px);
    transform: translateY(140%); transition: transform .25s ease;
  }
  .fp-stickybuy.is-on { transform: none; }
  .fp-stickybuy-price { display: grid; line-height: 1.2; }
  .fp-stickybuy-price strong { font-family: var(--fp-display); font-size: 22px; color: #fff; }
  .fp-stickybuy-price small { font-size: 12px; color: #93A4C3; }
  .fp-stickybuy-price span { font-size: 12px; font-weight: 800; color: #6EE7B7; }
  .fp-stickybuy .fp-btn { height: 46px; padding: 0 20px; background: var(--fp-hot); color: var(--fp-navy); }
}
@media (max-width: 760px) { body:has(.fp-stickybuy.is-on) .fp-sheet { bottom: 86px; } }

/* ---------- Remaining emerald accents → navy/blue ---------- */
.fp-page-hero {
  background:
    radial-gradient(700px 320px at 90% -20%, rgba(34, 158, 217, .5), transparent 60%),
    radial-gradient(420px 240px at 0% 120%, rgba(249, 115, 22, .2), transparent 60%),
    linear-gradient(160deg, #081024 0%, #0B1B3A 50%, #0E2E54 100%);
}
.fp-social a:hover { background: #0B6FD6; border-color: #0B6FD6; }
.fp-field input:focus { box-shadow: 0 0 0 3px rgba(11, 111, 214, .18); }
.fp-toast svg { color: #7DD3FC; }
:root[data-theme="dark"] .fp-toast svg { color: #0B6FD6; }