/* ==========================================================================
   FoodMart design layer  ·  preview only  ·  loads after site.css
   --------------------------------------------------------------------------
   What FoodMart actually does well, taken as craft rather than as a skin:

     · big soft radii — 16px cards, 12px media wells, fully pill buttons
     · cards that LIFT on hover instead of just changing border colour
     · a lot of air: line-height 2 on body copy, ~90px between sections
     · wide-tracked micro-labels (.3em) over short, heavy headings
     · circular category tiles as the entry point into the catalogue

   What is deliberately NOT taken: the palette, the photography and the fonts.
   FoodMart is a grocery shop — cream background, pastel greens, Nunito. This
   site went dark navy + prop-firm blue on 2026-09-01 on purpose, and painting
   a produce aisle over that would undo a decision already made.

   THE SHADOW PROBLEM, because it is the whole translation:
   FoodMart lifts a card with rgba(0,0,0,.04) -> rgba(0,0,0,.08). Those are
   black shadows on a cream page. On #080b14 a black shadow is invisible — the
   card would simply not move. On a dark UI, elevation is made of LIGHT: the
   surface brightens, the border catches, and an accent-tinted glow pools
   underneath. So every FoodMart shadow here is re-expressed, never copied.

   Loaded only when the `ui=fm` preview cookie is set. See layout.php.
   ========================================================================== */

:root{
  /* FoodMart's radii, one step up from the current 10/14. */
  --radius:14px;
  --radius-lg:18px;
  --fm-radius-media:12px;      /* image wells inside a card */
  --fm-pill:999px;             /* FoodMart's 50px pills, taken to the limit */

  /* Elevation, rebuilt for a dark ground. Rest is a hairline + a deep pool;
     hover brightens the inset, tightens the near shadow and adds accent bloom. */
  --fm-rest:0 1px 0 rgba(255,255,255,.045) inset,
            0 2px 6px rgba(0,0,0,.35),
            0 14px 44px -18px rgba(0,0,0,.75);
  --fm-lift:0 1px 0 rgba(255,255,255,.09) inset,
            0 10px 26px -8px rgba(0,0,0,.5),
            0 28px 70px -24px rgba(47,109,246,.34);

  --fm-ease:cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------- rhythm ---
   FoodMart's `py-5 my-5` stacking is what makes it feel unhurried. The current
   88px is close; 96px plus a looser body measure gets the rest of the way. */
.section{padding:96px 0}
body{line-height:1.78}
.card p,.panel p{line-height:1.85}

@media (max-width:760px){
  .section{padding:60px 0}
}

/* ------------------------------------------------------------ micro-label --
   FoodMart: 11px / .3em tracking / uppercase. Reads as a label, not a heading,
   which is exactly why the heading under it lands harder. */
.kicker{
  font-size:11px;
  letter-spacing:.3em;
  font-weight:700;
}

/* ----------------------------------------------------------------- cards ---
   The signature move: rest quietly, lift on hover. */
.card,.panel{
  border-radius:var(--radius-lg);
  box-shadow:var(--fm-rest);
  transition:transform .28s var(--fm-ease),
             box-shadow .28s var(--fm-ease),
             border-color .2s ease-out,
             background-color .2s ease-out;
}
.card{padding:26px}

/* Only cards that go somewhere should lift — a static panel that rises under
   the cursor promises a click it does not have. */
a.card:hover,
.card:has(a):hover,
.prod-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--fm-lift);
  border-color:var(--line2);
  background:var(--card2);
}

/* Media wells: the inner radius must be smaller than the outer or the corners
   look concentric-wrong. FoodMart uses 12 inside 16; this uses 12 inside 18. */
.card img,.panel img,.prod-card img,.fm-media{
  border-radius:var(--fm-radius-media);
}

/* --------------------------------------------------------------- buttons ---
   Pills. FoodMart's are the single most "modern retail" thing about it. */
.btn{
  border-radius:var(--fm-pill);
  padding:11px 24px;
  letter-spacing:.01em;
}
.btn-lg{padding:14px 32px}
.btn-sm{padding:8px 18px}

.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* Price cards keep a squarer corner than the pills so the CTA inside them
   stays the roundest thing in the composition. */
.price-card{
  border-radius:var(--radius-lg);
  box-shadow:var(--fm-rest),0 0 0 1px rgba(47,109,246,.16);
}

/* ------------------------------------------------------- category tiles ---
   FoodMart's circular category row, which is its best navigation idea: it
   turns a taxonomy into something you can point at. Circles here are filled
   with accent-tinted glass rather than pastel photography. */
.fm-cats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(112px,1fr));
  gap:18px;
  list-style:none;
}
.fm-cat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
  padding:8px 4px;
  border-radius:var(--radius-lg);
  color:var(--txt);
  transition:transform .28s var(--fm-ease);
}
.fm-cat:hover{transform:translateY(-4px);text-decoration:none}

.fm-cat-disc{
  width:92px;height:92px;
  display:grid;place-items:center;
  border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,rgba(47,109,246,.22),rgba(47,109,246,.06));
  border:1px solid var(--line);
  box-shadow:var(--fm-rest);
  transition:border-color .2s,box-shadow .28s var(--fm-ease),background .3s;
}
.fm-cat:hover .fm-cat-disc{
  border-color:rgba(47,109,246,.5);
  box-shadow:var(--fm-lift);
  background:radial-gradient(120% 120% at 30% 20%,rgba(47,109,246,.34),rgba(47,109,246,.10));
}
.fm-cat-disc .ico{width:34px;height:34px;color:var(--acc3);stroke-width:1.6}

.fm-cat-name{font-size:13.5px;font-weight:600;line-height:1.35}
.fm-cat-n{font-size:11.5px;color:var(--dim);letter-spacing:.04em}

@media (max-width:600px){
  .fm-cats{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:12px}
  .fm-cat-disc{width:70px;height:70px}
  .fm-cat-disc .ico{width:26px;height:26px}
}

/* ------------------------------------------------------------ promo band ---
   FoodMart leans on wide banner blocks between rails to break the grid up.
   Here it is a glass band rather than a photograph, so it costs no bytes and
   never looks like stock imagery. */
.fm-promo{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:
    radial-gradient(760px 300px at 12% -30%,rgba(47,109,246,.20),transparent 70%),
    linear-gradient(180deg,var(--card2),var(--card));
  box-shadow:var(--fm-rest);
  padding:44px 40px;
}
.fm-promo h2{font-size:29px;letter-spacing:-.4px;margin-bottom:8px;line-height:1.22}
.fm-promo p{color:var(--muted);max-width:56ch}
.fm-promo .btn{margin-top:20px}

@media (max-width:760px){
  .fm-promo{padding:30px 22px}
  .fm-promo h2{font-size:23px}
}

/* ----------------------------------------------------- "also looking for" --
   FoodMart's related-search row. Worth having because it is internal linking
   that reads as helpfulness. Only ever populate it from real Search Console
   queries — an invented "people also search for" is an invented statistic. */
.fm-chips{display:flex;flex-wrap:wrap;gap:9px}
.fm-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;
  border-radius:var(--fm-pill);
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:13px;font-weight:500;
  transition:border-color .18s,color .18s,background .18s,transform .18s var(--fm-ease);
}
.fm-chip:hover{
  border-color:rgba(47,109,246,.5);
  color:var(--txt);
  background:var(--acc-dim);
  transform:translateY(-2px);
  text-decoration:none;
}

/* ------------------------------------------------------------ section head -
   FoodMart pairs a short heavy heading with a "view all" pushed to the right
   edge — it makes a rail feel like a shelf with somewhere to go. */
.fm-rail-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:26px;flex-wrap:wrap;
}
.fm-rail-head h2{font-size:27px;letter-spacing:-.4px;line-height:1.2}
.fm-rail-head p{color:var(--muted);font-size:14px;margin-top:5px}
.fm-rail-head a{font-size:13.5px;font-weight:600;white-space:nowrap}

/* ========================================================================== *
   PRODUCT CARD — FoodMart's, as they actually built it
   --------------------------------------------------------------------------
   Read from their style.css rather than guessed at, and two of my earlier
   assumptions turned out to be wrong:

     · their card does NOT lift. `transition: box-shadow .3s ease-out` and
       nothing else — the shadow deepens from rgba(0,0,0,.04) to .08 and the
       card stays exactly where it is. The restraint is the point.
     · their buy button is NOT hidden until hover. It is always visible, in a
       row at the foot of the card with the meta on the left.

   Their real structure, top to bottom:
     16px card padding · badge top-left · figure with its own #F9F9F9 ground
     and 12px radius · title 18/600 · small uppercase grey meta · rating ·
     price · footer row.

   THE PART THAT MATTERS MOST is the figure: a uniform tinted well with the
   image CONTAINED and centred inside it, never cropped to fill. That is why
   FoodMart's grid looks consistent even though its product shots are not — a
   pale image and a dark one both sit on the same ground at the same scale.
   This site has exactly that problem (a white dashboard screenshot beside a
   neon graphic beside a dark chart), and this is the fix for it.
 * ========================================================================== */

.pcard{
  border-radius:16px;
  padding:16px;
  overflow:visible;
  border:1px solid var(--line);
  box-shadow:var(--fm-rest);
  /* Shadow only. No transform — see above. */
  transition:box-shadow .3s ease-out,border-color .3s ease-out;
}
.pcard:hover{
  box-shadow:var(--fm-lift);
  border-color:var(--line2);
  transform:none;
}

/* The figure. A calm uniform ground, generous inner padding, image contained. */
.pcard-thumb{
  aspect-ratio:4/3;
  border-radius:12px;
  overflow:hidden;
  padding:14px;
  background:rgba(255,255,255,.045);
  border:none;
  margin:0 0 14px;
}
.pcard-thumb img:not(.p-logo-badge){
  object-fit:contain;
  transition:transform .35s var(--fm-ease);
}
/* The figure is the product's own 200x200 MQL5 brand mark, centred in the well
   at its native size. See the note in site.css. */
.pcard-thumb img.pcard-logo{
  width:auto;height:auto;
  max-width:min(100%,200px);max-height:min(100%,200px);
  border-radius:12px;
}
/* FoodMart does not zoom either, but a small scale on the image alone keeps
   the card feeling live without moving the card in the grid. */
.pcard:hover .pcard-thumb img:not(.p-logo-badge){transform:scale(1.04)}

/* The MQL5 logo badge is only positioned for .market-thumb and .ea-slide-img;
   inside a product card it has no position or size and simply flows after the
   screenshot. It used to fall outside the 16/10 box and get clipped away, so
   nobody saw it — until this well gained inner padding, which let a slice of
   it show under the image. Hidden explicitly, which was the original intent. */
.pcard-thumb .p-logo-badge{display:none}

/* The corner marks left the figure — see the note in merchandising.php. These
   rules are kept only for surfaces that still overlay a screenshot. */
.pcard-thumb .pcard-type{left:24px;top:24px;border-radius:var(--fm-pill);padding:4px 10px}
.pcard-thumb .pcard-risk{right:24px;top:24px}
.pcard-thumb .pcard-flag{left:24px;bottom:auto;top:24px;border-radius:var(--fm-pill);padding:4px 10px}
.pcard-thumb .pcard-type ~ .pcard-flag{top:auto;bottom:24px}

/* Body-side eyeline and discount, in FoodMart's quieter type. */
.pcard-eye{font-size:11px;letter-spacing:.08em;margin-bottom:7px}
.pcard-off{border-radius:var(--fm-pill);padding:3px 9px}

/* Body: their type scale. 18/25 title, 13px uppercase grey meta. */
.pcard-body{padding:0;display:flex;flex-direction:column;flex:1}
.pcard-name{font-size:18px;line-height:1.38;font-weight:600}
.pcard-meta{margin-top:8px}
.pcard-meta small{
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim);
}
.pcard-desc{margin-top:9px;font-size:13.5px}

/* Price sits on its own line and is the loudest thing after the title. */
.pcard-foot{padding-top:14px}
.pcard-price{margin-bottom:12px}
.pcard-now{font-size:21px}

/* The CTA is always there — restoring FoodMart's actual behaviour after I
   wrongly hid it behind hover in the previous pass. */
.pcard-cta{
  max-height:none;opacity:1;transform:none;overflow:visible;margin-top:0;
  display:grid;gap:8px;
}
.pcard-cta .btn{border-radius:var(--fm-pill)}

/* Rails get the same air the rest of the layer has. */
.rail{margin-bottom:58px}
.rail-head h2{font-size:26px;letter-spacing:-.4px}
.rail-btn{border-radius:50%;width:38px;height:38px}
.rail-track{gap:20px}

/* ------------------------------------------------------------ preview bar --
   Unmissable on purpose: nobody should be able to look at this and think the
   live site already changed. */
.fm-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:900;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:11px 18px;
  background:rgba(47,109,246,.95);
  color:#fff;font-size:13px;font-weight:600;
  box-shadow:0 -8px 30px rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
}
.fm-bar a{
  color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700;
}
body:has(.fm-bar){padding-bottom:52px}

/* Respect a reader who has asked the interface to hold still. */
@media (prefers-reduced-motion:reduce){
  .card,.panel,.btn,.fm-cat,.fm-cat-disc,.fm-chip,.prod-card{transition:none}
  a.card:hover,.card:has(a):hover,.prod-card:hover,
  .fm-cat:hover,.fm-chip:hover,.btn:hover{transform:none}
}

/* ========================================================================== *
   DAY / NIGHT
   --------------------------------------------------------------------------
   Night is the site as it already is: the prop-firm dark navy chosen on
   2026-09-01. Day is FoodMart's light retail ground, but keeping this brand's
   blue rather than FoodMart's yellow — the point is a second skin for the same
   business, not a different business.

   This works at all because site.css is properly tokenised: 694 var(--x) uses
   against roughly a hundred hardcoded colours. So most of "day" is redefining
   twenty tokens, and the rest is the block at the bottom, which repairs the
   places where a literal white or black was baked in.
 * ========================================================================== */

:root[data-theme="light"]{
  /* Ground and surfaces — FoodMart's #fafafa/#fff, cooled to sit under blue. */
  --bg:#f6f8fc;
  --bg2:#eef2f9;
  --card:#ffffff;
  --card2:#f4f7fc;

  --line:rgba(18,34,64,.13);
  --line2:rgba(18,34,64,.24);

  /* Ink. FoodMart's #222, pulled cool so it agrees with the accent. */
  --txt:#111826;
  --muted:#515d75;
  /* Was #6f7c94 at 4.21:1 — just under WCAG AA, and it carries a lot: the
     utility bar, every input placeholder, stat labels, table headers and the
     mega-menu descriptions. #67738a is 4.78:1 and still reads as secondary. */
  --dim:#67738a;

  /* The accent must get DARKER on light, not lighter. #5b93ff is a perfectly
     good link colour on navy and fails contrast on white — the ramp inverts. */
  --acc:#2059d8;
  --acc2:#1a4fc4;
  --acc3:#143c99;
  --acc-dim:rgba(32,89,216,.09);
  --grad-acc:linear-gradient(135deg,#1a4fc4 0%,#2059d8 52%,#3f7ae8 100%);

  /* Semantic colours darken too, for the same contrast reason. */
  --green:#0f7d52;   /* #12885b measured 4.47:1 — three hundredths under AA */
  --red:#c62f28;
  --blue:#0f7f80;
  --amber:#9a6b06;

  /* On a light ground FoodMart's own shadow values are simply correct, so
     these are its numbers rather than a translation of them. */
  --shadow:0 1px 2px rgba(16,32,64,.06),0 8px 24px -10px rgba(16,32,64,.14);
  --elev:0 1px 0 rgba(255,255,255,.9) inset,0 5px 22px rgba(16,32,64,.06);
  --elev-hover:0 1px 0 rgba(255,255,255,.9) inset,0 21px 44px rgba(16,32,64,.11);
  --fm-rest:0 5px 22px rgba(16,32,64,.06);
  --fm-lift:0 21px 44px rgba(16,32,64,.13);
}

/* The page wash is a dark-theme device: a blue glow bleeding off a near-black
   top. On cream it turns into a grubby smear, so day gets a clean ground with
   only the faintest tint. */
:root[data-theme="light"] body{
  background:radial-gradient(1100px 520px at 50% -12%,rgba(32,89,216,.07),transparent 64%),var(--bg);
}

/* ---- repairs: the ~100 places site.css baked a literal in ----
   Each of these assumed a dark ground. A white film over white is invisible;
   a black scrim over cream is a bruise. */
:root[data-theme="light"] .site-head{background:rgba(255,255,255,.88)}
:root[data-theme="light"] .util-bar{background:#eef2f9}
/* The exclusions matter. `:root[data-theme="light"] .btn` scores higher than a
   bare `.btn-gold`, so without them this rule painted the primary buy button
   white on a white card — the CTA vanished in day mode. */
:root[data-theme="light"] .btn:not(.btn-gold):not(.btn-danger){background:#fff}
:root[data-theme="light"] .btn:not(.btn-gold):not(.btn-danger):hover{background:var(--card2)}
:root[data-theme="light"] .btn-quiet{background:transparent}
:root[data-theme="light"] .nav-dd-panel,
:root[data-theme="light"] .side,
:root[data-theme="light"] .nav{background:#fff}
:root[data-theme="light"] .hdr-tool:hover,
:root[data-theme="light"] .mkt-opt:hover,
:root[data-theme="light"] .nav-dd-trig:hover{background:var(--card2)}
:root[data-theme="light"] .tbl th{background:var(--bg2)}
:root[data-theme="light"] .pay-chip{background:#fff;border:1px solid var(--line)}
:root[data-theme="light"] .market-tile,
:root[data-theme="light"] .cta-band,
:root[data-theme="light"] .mockup{background:var(--card2)}
:root[data-theme="light"] .f-toolbar,
:root[data-theme="light"] .f-act{background:var(--bg2)}
:root[data-theme="light"] .site-foot{background:var(--bg2);border-top:1px solid var(--line)}

/* The card's own top-edge sheen is a dark-theme trick — a white gradient that
   reads as light catching an edge. On white it reads as nothing at all. */
:root[data-theme="light"] .pcard{background:#fff}
:root[data-theme="light"] .pcard-thumb{
  background:linear-gradient(180deg,#f2f5fb,#fbfcfe);
}
:root[data-theme="light"] .fm-cat-disc{
  background:radial-gradient(120% 120% at 30% 20%,rgba(32,89,216,.14),rgba(32,89,216,.04));
}
:root[data-theme="light"] .fm-promo{
  background:
    radial-gradient(760px 300px at 12% -30%,rgba(32,89,216,.12),transparent 70%),
    linear-gradient(180deg,#fff,var(--card2));
}
:root[data-theme="light"] .fm-chip{background:#fff}

/* Selection and focus need real contrast on both grounds. */
:root[data-theme="light"] ::selection{background:rgba(32,89,216,.18);color:#0b1220}

/* ------------------------------------------------------------ the toggle --- */
.fm-theme-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;
  border-radius:50%;
  border:1px solid var(--line2);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s,transform .2s var(--fm-ease);
}
.fm-theme-btn:hover{color:var(--txt);border-color:var(--acc);background:var(--acc-dim);transform:rotate(-18deg)}
.fm-theme-btn .ico{width:18px;height:18px}

/* Show the destination, not the current state: at night you are offered the
   sun. A toggle that shows where you already are is the classic confusion. */
.fm-theme-sun{display:inline-flex}
.fm-theme-moon{display:none}
:root[data-theme="light"] .fm-theme-sun{display:none}
:root[data-theme="light"] .fm-theme-moon{display:inline-flex}

/* ---- day-mode repairs found by actually looking at the rendered page ----
   Two rules in site.css hardcode a dark ground rather than a token, and both
   are unmissable on light: the department bar reads as a grey slab across the
   header, and every form field — including the main search box — stays near
   black. Neither showed up in a token sweep because neither uses a token. */
:root[data-theme="light"] .cat-bar{
  background:var(--bg2);
  border-top:1px solid var(--line);
}
:root[data-theme="light"] .in{
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(16,32,64,.06);
}
:root[data-theme="light"] .in::placeholder{color:var(--dim)}
:root[data-theme="light"] .mega,
:root[data-theme="light"] .nav-dd-panel{
  box-shadow:0 18px 44px -12px rgba(16,32,64,.18);
}

/* ---- related articles (taken from Astra, scored better than Astra's) ---- */
.fm-relpost{display:flex;flex-direction:column;gap:8px;text-decoration:none}
.fm-relpost:hover{text-decoration:none}
.fm-relpost-cat{
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc2);
}
.fm-relpost h3{
  font-size:16px;line-height:1.36;font-weight:600;color:var(--txt);margin:0;
}
.fm-relpost p{font-size:13.5px;color:var(--muted);margin:0}
.fm-relpost-date{font-size:12px;color:var(--dim);margin-top:auto;padding-top:6px}

/* ========================================================================== *
   BANNER BLOCKS — FoodMart's 12-column, 2-row promo grid
   --------------------------------------------------------------------------
   One tall tile spanning 7 columns and both rows, two half-height tiles beside
   it, collapsing to a single column at 1140px. It is the thing that stops a
   storefront reading as an unbroken wall of product cards.

   Theirs are photographs on pastel grounds — three banners totalling ~1.5 MB.
   These are built from gradients instead: no image weight, nothing that can
   look like stock imagery, and each tile tinted a different hue so the row
   reads as three offers rather than one striped block.
 * ========================================================================== */

.fm-banners{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(2,minmax(150px,1fr));
  gap:20px;
}
.fm-bn-lg{grid-area:1 / 1 / 3 / 8}
.fm-bn-2 {grid-area:1 / 8 / 2 / 13}
.fm-bn-3 {grid-area:2 / 8 / 3 / 13}

@media (max-width:1140px){
  .fm-banners{grid-template-columns:1fr;grid-template-rows:repeat(4,auto)}
  .fm-bn-lg{grid-area:1 / 1 / 3 / 2}
  .fm-bn-2 {grid-area:3 / 1 / 4 / 2}
  .fm-bn-3 {grid-area:4 / 1 / 5 / 2}
}

.fm-bn{
  position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:28px 30px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  box-shadow:var(--fm-rest);
  color:var(--txt);
  overflow:hidden;
  transition:box-shadow .3s var(--fm-ease),border-color .3s ease-out;
}
.fm-bn:hover{box-shadow:var(--fm-lift);border-color:var(--line2);text-decoration:none}
.fm-bn .kicker{margin-bottom:10px}
.fm-bn h2{font-size:22px;letter-spacing:-.3px;line-height:1.22;margin-bottom:7px}
.fm-bn p{color:var(--muted);font-size:14px;margin:0;max-width:40ch}
.fm-bn-note{
  margin-top:14px;font-family:var(--num);font-size:13px;font-weight:600;
  color:var(--acc3);letter-spacing:.01em;
}
.fm-bn-cta{
  margin-top:auto;padding-top:16px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--acc2);
}
.fm-bn-cta .ico{width:16px;height:16px;transition:transform .25s var(--fm-ease)}
.fm-bn:hover .fm-bn-cta .ico{transform:translateX(4px)}

/* The lead tile carries the weight: bigger type and a stronger wash. */
.fm-bn-lg{padding:38px 40px}
.fm-bn-lg h2{font-size:31px;letter-spacing:-.6px}
.fm-bn-lg p{font-size:15px;max-width:44ch}

/* Three hues, so the row reads as three separate offers. FoodMart uses
   bg-info / bg-success-subtle / bg-danger for exactly this reason. */
.fm-bn-1{background:
  radial-gradient(720px 340px at 8% -30%,rgba(47,109,246,.26),transparent 68%),
  linear-gradient(160deg,var(--card2),var(--card))}
.fm-bn-2{background:
  radial-gradient(460px 240px at 92% -40%,rgba(62,207,142,.20),transparent 70%),
  linear-gradient(160deg,var(--card2),var(--card))}
.fm-bn-3{background:
  radial-gradient(460px 240px at 92% 130%,rgba(232,178,62,.18),transparent 70%),
  linear-gradient(160deg,var(--card2),var(--card))}

@media (max-width:760px){
  .fm-bn{padding:24px 22px}
  .fm-bn-lg{padding:28px 24px}
  .fm-bn-lg h2{font-size:25px}
}

/* ========================================================================== *
   SCROLL TO TOP — the only thing Astra had that this site did not
   --------------------------------------------------------------------------
   The bottom-right corner is already occupied: the WhatsApp button sits at
   20px, and on phones a sticky buy bar takes the full width and pushes that
   button up to 84px. So this stacks ABOVE the WhatsApp button rather than
   fighting it for the corner, and the offset is a variable so every case
   (buy bar, preview bar, both) moves the whole stack together.
 * ========================================================================== */

:root{--fm-fab-base:20px}
body:has(.fm-bar){--fm-fab-base:72px}
@media (max-width:820px){
  body.has-buybar{--fm-fab-base:84px}
  body.has-buybar:has(.fm-bar){--fm-fab-base:136px}
}

.wa-fab{bottom:var(--fm-fab-base)}
.fm-top{
  position:fixed;
  right:20px;
  bottom:calc(var(--fm-fab-base) + 68px);
  z-index:80;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid var(--line2);
  background:var(--card);
  color:var(--muted);
  cursor:pointer;
  box-shadow:var(--fm-rest);
  /* Out of the way until it is wanted: not just transparent, but genuinely
     unclickable and out of the tab order, or it would sit invisibly over the
     page catching clicks meant for whatever is underneath. */
  opacity:0;
  visibility:hidden;
  transform:translateY(10px) scale(.9);
  transition:opacity .22s ease-out,transform .28s var(--fm-ease),
             visibility .22s,color .18s,border-color .18s,background .18s;
}
.fm-top.on{opacity:1;visibility:visible;transform:none}
.fm-top:hover{color:var(--txt);border-color:var(--acc);background:var(--acc-dim)}
.fm-top .ico{width:19px;height:19px}

@media (prefers-reduced-motion:reduce){
  .fm-top{transition:opacity .01s,visibility .01s}
  .fm-top.on{transform:none}
}

/* ---- light-only sweep, 2026-09-09 ----
   With dark retired, every rule that assumed a dark ground is now permanently
   visible, so the remaining hardcoded ones are repaired here rather than left
   to a theme that no longer exists.

   Deliberately NOT repaired: .market-type and .ea-slide-type. Those are chips
   sitting on top of a product screenshot, and a dark scrim over an image is
   correct on any page ground — the same reason .pcard-type keeps its. */
:root[data-theme="light"] .cart-bar{
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--line2);
  box-shadow:0 -8px 30px rgba(16,32,64,.10);
}

/* The dark-ground surfaces that were invisible while the site was dark and are
   now the whole page. .section.alt was the worst of them: a near-black
   gradient band running full width across the homepage. */
:root[data-theme="light"] .section.alt{
  background:linear-gradient(180deg,var(--bg2),#fff);
  border-color:var(--line);
}

/* Image wells. Same principle as the product card: a pale uniform ground with
   the screenshot contained on it, so a bright chart and a dark one sit on the
   same surface instead of one of them becoming a black rectangle. */
:root[data-theme="light"] .market-thumb,
:root[data-theme="light"] .ea-slide-img,
:root[data-theme="light"] .pdp-main{
  background:linear-gradient(180deg,#f2f5fb,#fbfcfe);
}
:root[data-theme="light"] .pdp-main{border-color:var(--line)}

/* Proof panels layer a dark tint over the card; harmless at 3% alpha but it
   muddies white, so it is removed rather than left to grey the panel. */
:root[data-theme="light"] .proof-item,
:root[data-theme="light"] .mfx-proof{
  background:var(--card);
  border:1px solid var(--line);
}

/* ==========================================================================
   INVISIBLE TEXT — the real cost of retiring dark
   --------------------------------------------------------------------------
   The owner reported text that could not be read, and they were right. The
   earlier sweep audited BACKGROUNDS and never audited TEXT, which missed the
   two worst rules on the site.

   Both are hardcoded pale greys that override a perfectly good token further
   up the file. They were found by scoring every hardcoded colour by luminance
   rather than by guessing at hex prefixes — #aab4cc and #a4aec6 begin with
   "a", so a search for #fff/#e../#d.. sailed straight past them.

   On white these sit at roughly 2:1 contrast. Not "a bit faint" — unreadable,
   and they are the hero subheadline and EVERY section subheading on the site.
 * ========================================================================== */

:root[data-theme="light"] .hero p.lead,
:root[data-theme="light"] .section-head p{
  color:var(--muted);          /* #515d75 in light — 7.2:1 on white */
}

/* A green tick on white is thin at the dark theme's #3ecf8e; the light palette
   already darkens --green for exactly this reason, so use it. */
:root[data-theme="light"] .proof-verified .ico{color:var(--green)}

/* ---- reassurance row, from eafxstore.com's product page ----
   Three badges directly under the buy button. Stacked rather than sat in a row
   because this lives in a narrow buy-box column, not across a full-width page
   the way theirs does — a three-across row here would give each badge about
   90px and truncate every line. */
.fm-assure{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:grid;
  gap:13px;
}
.fm-assure-item{display:flex;align-items:flex-start;gap:11px}
.fm-assure-item .ico{
  width:19px;height:19px;flex:0 0 auto;margin-top:1px;
  color:var(--acc);stroke-width:1.9;
}
.fm-assure-item strong{
  display:block;font-size:13.5px;font-weight:650;color:var(--txt);line-height:1.3;
}
.fm-assure-item span{
  display:block;font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px;
}

/* ---- nav CTA text, reported unreadable 2026-09-09 ----
   `.nav>a` scores (0,1,1) and outranks a bare `.btn-gold` at (0,1,0), so the
   "Admin" / "Shop the EA store" pills took `--muted` instead of white. Under
   the dark theme that was pale grey on blue — poor but legible. On light,
   --muted is dark slate on a blue pill, which is what the owner saw.

   Same family of bug as the white-on-white buy button: a filled control losing
   its own text colour to a more specific ancestor rule. */
:root[data-theme="light"] .nav>a.btn-gold,
:root[data-theme="light"] .nav>a.btn-gold:hover{
  color:#fff;
}
/* The nav hover film is a white wash — invisible on a light header. */
:root[data-theme="light"] .nav>a:hover{
  background:var(--acc-dim);
  color:var(--acc2);
}
:root[data-theme="light"] .nav>a.btn-gold:hover{background:var(--acc)}

/* ---- audited-account context, added 2026-09-09 ----
   A definition list under each Myfxbook widget saying which build, on what
   settings, over what period, and whether it is still running. Rows only
   appear when the owner has filled them in. */
.fm-acct{
  display:grid;grid-template-columns:auto 1fr;gap:5px 12px;
  margin:12px 0 0;padding-top:11px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;
}
.fm-acct dt{color:var(--dim);font-weight:600;white-space:nowrap}
.fm-acct dd{margin:0;color:var(--muted)}
.fm-dd-note{
  margin-top:20px;padding:14px 16px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  font-size:13px;line-height:1.65;
}

/* ==========================================================================
   CHIPS ON DARK SCRIMS — reported unreadable 2026-09-09
   --------------------------------------------------------------------------
   `.pcard-type`, `.market-type` and `.ea-slide-type` are the little
   "MT5 · BREAKOUT" pills. They keep a dark scrim on purpose, because they sit
   over product screenshots that range from a white dashboard to a black chart
   and a dark pill is readable over both.

   The earlier light sweep left their BACKGROUNDS alone for that reason — and
   that reasoning was right but incomplete. Their text is `var(--acc3)`, and
   the light palette flipped --acc3 from #a8c7ff to #143c99, so the pills
   became dark navy text on a dark scrim. Invisible.

   The scrim stays dark; the text goes back to a light blue. That is the pairing
   the component was designed around, and it survives any image behind it.
 * ========================================================================== */

:root[data-theme="light"] .pcard-type,
:root[data-theme="light"] .market-type,
:root[data-theme="light"] .ea-slide-type{
  color:#cfe0ff;
  border-color:rgba(160,195,255,.42);
}

/* The discount flag prints near-black text on a green gradient whose bottom
   stop is `--green`. Darkening --green for AA contrast on white made that
   pairing dark-on-dark, so the gradient is pinned to two light greens here and
   keeps its dark text. */
:root[data-theme="light"] .pcard-flag{
  background:linear-gradient(180deg,#6ee7b0,#34c98a);
  color:#04140c;
  box-shadow:0 3px 12px -4px rgba(52,201,138,.55);
}

/* Risk badges sit over the image well too. Their 10%-alpha tint is nearly
   transparent, so on a pale well the dark token text is fine — but give them
   an opaque backing so they never depend on what is behind them. */
:root[data-theme="light"] .pcard-risk{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
}

/* ---- authentic brand marks, 2026-09-09 ----
   Real logos are solid filled shapes carrying their own colours, so they must
   escape .ico's stroke-based line-icon styling entirely. `.foot-yt .ico` used
   to force fill AND stroke red onto a hand-drawn approximation; the real mark
   needs neither. */
.brand-mark{flex:0 0 auto;display:block}
.foot-yt .brand-mark,
.foot-dc .brand-mark{width:19px;height:19px}

/* The MQL5 mark is multicoloured on transparent, so its tile is white rather
   than the brand-block colour the invented tick badge used. A hairline keeps
   the white tile from vanishing into the white card. */
:root[data-theme="light"] .pbadge-mark{border:1px solid var(--line)}
.pbadge-mark img.brand-mark{width:auto;height:auto;max-width:24px;max-height:24px;border-radius:0}