/* ══ The landing page's listing — as it was ══════════════════════════════════
   index.php: Our Services, Hot Deals, Special Combos, Pre-owned Devices,
   Featured Products (three drifting rows) and Swappables, on the marquee rows
   and the glass cards the page had until the 16-Oct release.

   Owner, 18 Oct 2026: "Style the products grid and landing page listing with
   marquee just exactly as it was". These are that page's own rules — its
   inline <style>, then assets/css/landing_polish.css, in that order (the
   later one still wins where they meet), with the two button rules the
   listing took from the sheets' file of the time — each under
   html[data-sf] .lp, the box index.php prints the listing in. They cannot
   reach the bar, the cover, the store card with its search, or the footer,
   which stay assets/css/storefront.css's. The face: the phone's own.
   Their colour is the page's one accent (owner, 18 Oct 2026: "unify the
   colors the most professional and standard way"): the old names point at
   storefront.css's tokens — the business's own colour when it chose one,
   else the default violet — with no second colour, no gradient and no
   coloured glow; Save, Sold out and the deal's red stay as they were.

   Left out on purpose: the sentence under each title (it is gone), the orbs,
   the old bar and hero, and the phone-only content-visibility (it blanked the
   cards in a full-page capture). The drift itself is index.php's
   initMarquees() with assets/js/marquee.js. */

/* ── the old page's names, on the box; their colours the storefront's, which
   dark switches (--violet, --cyan and the Settings colours the page used to
   print here are gone with the second colour; the page's own background is
   the storefront's). */
html[data-sf] .lp {
  --pink: #ec4899;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --grad: var(--brand-fill);
  /* light (html.light) */
  --bg-elev: #f3f4f6;
  --card-bg: rgba(255, 255, 255, 0.82);
  --text: #0f172a;
  --muted: #4b5563;
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(15, 23, 42, 0.08);
  --rule: rgba(15, 23, 42, 0.07);
  --accent-text: var(--brand-ink);
  --lp-ink:#0b1220;
  --lp-ink-2:#1f2937;
  --lp-muted:#556070;
  --lp-line:rgba(15,23,42,.08);
  --lp-line-strong:rgba(15,23,42,.14);
  --lp-card:#ffffff;
  --lp-card-media:#eef1f7;
  --lp-shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 1px 1px rgba(15,23,42,.03);
  --lp-shadow-lg:0 22px 44px -22px rgba(15,23,42,.28);
  --lp-link: var(--brand-ink);
  --lp-tint: var(--brand-wash);
  --lp-tint-line: var(--line);
  --lp-tint-line: color-mix(in srgb, var(--brand) 22%, transparent);
  /* the old page's body: Inter, 16px, line 1.5, its ink */
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:16px;line-height:1.5;color:var(--text);
}
/* dark (html.dark) */
html[data-sf].dark .lp, html[data-sf][data-theme="dark"] .lp {
  --bg-elev: #171717;
  --card-bg: rgba(15, 23, 42, 0.72);
  --text: #f3f4f6;
  --muted: #9ca3af;
  --glass-bg: rgba(15, 23, 42, 0.72);
  --glass-border: rgba(255, 255, 255, 0.09);
  --rule: rgba(255, 255, 255, 0.07);
  --lp-ink:#f5f7fb;
  --lp-ink-2:#dbe2ec;
  --lp-muted:#9aa6b8;
  --lp-line:rgba(255,255,255,.08);
  --lp-line-strong:rgba(255,255,255,.14);
  --lp-card:rgba(18,21,34,.78);
  --lp-card-media:rgba(255,255,255,.04);
  --lp-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --lp-shadow-lg:0 24px 50px -24px rgba(0,0,0,.7);
}
html[data-sf] .lp *{box-sizing:border-box;margin:0;padding:0;}
html[data-sf] .lp h2,html[data-sf] .lp h3,html[data-sf] .lp h4,
html[data-sf] .lp .menu-card-name,html[data-sf] .lp .menu-card-title{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.15;color:inherit;text-wrap:wrap;}
/* what a heading, a paragraph and a link were by default there, for the parts
   a button may only hold as spans (a card with no page of its own) */
html[data-sf] .lp .menu-card-title{display:block;font-size:1.17em;font-weight:700;}
html[data-sf] .lp .menu-card-desc{display:block;}
html[data-sf] .lp button.menu-card{font:inherit;color:inherit;text-align:left;}

/* ── the sheets' file of the time: the glass card, the button (linked before the page's <style>) */
html[data-sf] .lp .glass{
  background:var(--card-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-radius:var(--radius-md);
  transition:background-color .3s, border-color .3s;
}
html[data-sf] .lp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:0;padding:15px 30px;border-radius:999px;font-weight:600;font-size:15px;line-height:inherit;border:none;box-shadow:none;transform:none;transition:transform .2s,box-shadow .2s,opacity .2s;}
html[data-sf] .lp .btn-primary{background:var(--grad);color:#fff;box-shadow:none;}
html[data-sf] .lp .btn-primary:hover{background:var(--brand-fill-hover);}
html[data-sf] .lp .btn,html[data-sf] .lp .card-add,html[data-sf] .lp .menu-card{touch-action:manipulation;}

/* ── the page's <style> ─────────────────────────────────────────────────── */
/* sections */
html[data-sf] .lp .section{position:relative;z-index:1;padding:110px 5%;}
html[data-sf] .lp .section-inner{max-width:1180px;margin:0 auto;}
html[data-sf] .lp .section-head{text-align:center;max-width:600px;margin:0 auto 56px;}
html[data-sf] .lp .section-title{font-size:clamp(28px,4vw,42px);font-weight:700;margin-top:10px;}
html[data-sf] .lp .eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:2.5px;color:var(--accent-text);text-transform:uppercase;margin-bottom:18px;}

/* Hidden only once JS has confirmed it can reveal them again — without this the
   catalogue would be invisible to a browser with scripting off. */
html[data-sf] .lp .reveal{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease;}
html[data-sf].js .lp .reveal{opacity:0;transform:translateY(28px);}
html[data-sf].js .lp .reveal.in-view{opacity:1;transform:translateY(0);}

/* services — bolder marquee cards, larger than menu cards */
html[data-sf] .lp .service-marquee .marquee-track{animation-duration:50s;}
html[data-sf] .lp .service-card{width:300px;flex:0 0 auto;overflow:hidden;display:block;text-align:left;transition:transform .25s,border-color .25s;}
html[data-sf] .lp .service-card:hover{transform:translateY(-6px);}
html[data-sf] .lp .service-card-media{height:170px;background-size:cover;background-position:center;background-color:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;}
/* a department with no picture: its initials where the old card put a glyph */
html[data-sf] .lp .service-card-ini{font:700 40px/1 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;letter-spacing:.02em;color:var(--accent-text);}
html[data-sf] .lp .service-card-body{padding:22px;}
html[data-sf] .lp .service-card-body h3{font-size:22px;font-weight:700;margin-bottom:8px;}
html[data-sf] .lp .service-card-body p{color:var(--muted);font-size:14px;line-height:1.6;}

/* menu marquee — the row runs to its bounds, no edge mask */
html[data-sf] .lp .marquee{overflow-x:auto;position:relative;margin-bottom:48px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
  user-select:none;
  scroll-behavior:auto;
  -webkit-overflow-scrolling:touch;
}
html[data-sf] .lp .marquee::-webkit-scrollbar{display:none;}
html[data-sf] .lp .marquee:active{cursor:grabbing;}
html[data-sf] .lp .marquee-track{display:flex;gap:20px;width:max-content;user-select:none;}
html[data-sf] .lp .marquee img,html[data-sf] .lp .marquee a{user-select:none;-webkit-user-drag:none;}
html[data-sf] .lp .menu-card{width:190px;flex:0 0 auto;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s,border-color .2s,box-shadow .2s;}
html[data-sf] .lp .menu-card:hover{transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(15,23,42,.10);}
html[data-sf] .lp .menu-card-img{height:132px;flex:0 0 132px;background-size:cover;background-position:center;
  background-color:rgba(255,255,255,.04);}
html[data-sf] .lp .menu-card-body{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
html[data-sf] .lp .menu-card-cat{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--accent-text);
  font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Two lines, always: a one-line name reserves the second so every card in
   the row ends at the same height and the prices sit on one line. */
html[data-sf] .lp .menu-card h4,html[data-sf] .lp .menu-card .menu-card-name{font-size:13px;line-height:1.35;font-weight:700;margin:5px 0 1px;letter-spacing:-.1px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.35 * 13px);word-break:break-word;}
/* the maker sits under the name, quiet enough not to compete with it */
html[data-sf] .lp .menu-card-brand{display:block;font-size:10px;font-weight:700;color:var(--muted);margin:0 0 7px;
  letter-spacing:.4px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-sf] .lp .menu-card-price{font-size:14.5px;font-weight:800;color:var(--text);letter-spacing:-.2px;}

/* sellable cards */
html[data-sf] .lp .menu-card{position:relative;cursor:default;}
html[data-sf] .lp .menu-card.is-buyable{cursor:pointer;}
html[data-sf] .lp .menu-card.is-sold{opacity:.62;}
html[data-sf] .lp .menu-card-img{position:relative;}
html[data-sf] .lp .menu-card-note{font-size:11px;color:var(--muted);margin:0 0 7px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* auto margin pins the price row to the bottom of whatever height the card
   settles at, so a row of cards has its prices on one line */
html[data-sf] .lp .menu-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;
  padding-top:2px;}
html[data-sf] .lp .card-add{width:25px;height:25px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--grad);color:#fff;font-size:16px;font-weight:700;line-height:1;
  box-shadow:none;transition:transform .18s;}
html[data-sf] .lp .menu-card.is-buyable:hover .card-add{transform:scale(1.12);}
html[data-sf] .lp .card-flag{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:20px;
  font-size:10px;font-weight:700;letter-spacing:.3px;backdrop-filter:blur(6px);}
html[data-sf] .lp .card-flag--save{background:rgba(16,185,129,.92);color:#fff;}
html[data-sf] .lp .card-flag--swap{background:var(--brand-fill);color:#fff;}
html[data-sf] .lp .card-flag--out{background:rgba(15,23,42,.78);color:#fff;}
html[data-sf] .lp .card-flag--deal{background:rgba(239,68,68,.94);color:#fff;}
/* the old price sits beside the new one so the saving is visible at a glance */
html[data-sf] .lp .deal-price{color:#ef4444;}
html[data-sf] .lp .deal-was{font-size:11.5px;color:var(--muted);text-decoration:line-through;flex:none;}
html[data-sf] .lp .deal-card:hover{border-color:rgba(239,68,68,.5);}
@media(max-width:600px){
  html[data-sf] .lp .menu-card{width:160px;}
}
html[data-sf] .lp .menu-cta{text-align:center;}
@media (max-width:560px){
  html[data-sf] .lp .section{padding:80px 6%;}
}
/* iOS/phone performance: blur is the most expensive thing on this page and
   the least missed. Everything keeps its translucency; only the blur goes. */
@media (max-width: 900px) {
  html[data-sf] .lp .glass,html[data-sf] .lp .card-flag {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ── landing_polish.css (loaded after the page's <style>) ───────────────── */
/* sections */
html[data-sf] .lp .section{padding-top:clamp(48px, 5.5vw, 76px);padding-bottom:clamp(48px, 5.5vw, 76px);}
html[data-sf] .lp .section-head{margin-bottom:clamp(26px, 4vw, 44px);}
html[data-sf] .lp .section-title{letter-spacing:-.025em;color:var(--lp-ink);}
html[data-sf] .lp .section-head .eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;
  padding:6px 12px;border-radius:999px;font-size:10.5px;letter-spacing:.18em;font-weight:700;
  color:var(--lp-link);background:var(--lp-tint);border:1px solid var(--lp-tint-line);}

/* shelves run to the edge of the screen, starting on the content line */
html[data-sf] .lp .section-inner > .marquee{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:8px max(5vw, calc((100vw - 1180px) / 2)) 16px;
  margin-bottom:clamp(10px, 2vw, 22px);}
html[data-sf] .lp .section-inner > .marquee:last-of-type{margin-bottom:0;}
html[data-sf] .lp .section-inner > .marquee + .menu-cta{margin-top:clamp(18px, 2.5vw, 28px);}
html[data-sf] .lp .marquee-track{gap:clamp(12px, 1.4vw, 18px);}
/* a row shorter than the screen centres instead of hugging the left */
html[data-sf] .lp .service-marquee .marquee-track{margin-left:auto;margin-right:auto;}
@media (max-width:560px){
  html[data-sf] .lp .section{padding-top:44px;padding-bottom:44px;}
  html[data-sf] .lp .section-inner > .marquee{padding-left:6vw;padding-right:6vw;}
}

/* cards */
html[data-sf] .lp .menu-card.glass,html[data-sf] .lp .service-card.glass{background:var(--lp-card);border-color:var(--lp-line);box-shadow:var(--lp-shadow-sm);}
html[data-sf] .lp .menu-card{border-radius:16px;}
html[data-sf] .lp .menu-card:hover,html[data-sf] .lp .service-card:hover{box-shadow:var(--lp-shadow-lg);border-color:var(--lp-tint-line);}
html[data-sf] .lp .menu-card-img{background-color:var(--lp-card-media);}
html[data-sf] .lp .service-card-media{position:relative;}
html[data-sf] .lp .menu-card-cat{color:var(--lp-link);}
html[data-sf] .lp .menu-card h4,html[data-sf] .lp .menu-card .menu-card-name{color:var(--lp-ink);}
html[data-sf] .lp .menu-card-brand,html[data-sf] .lp .menu-card-note{color:var(--lp-muted);}
html[data-sf] .lp .menu-card-price{color:var(--lp-ink);font-variant-numeric:tabular-nums;}
html[data-sf] .lp .card-add{width:28px;height:28px;font-size:17px;}
html[data-sf] .lp .card-flag--out{background:rgba(15,23,42,.72);}

html[data-sf] .lp .service-card{border-radius:20px;width:clamp(260px, 26vw, 310px);}
html[data-sf] .lp .service-card-media{height:clamp(150px, 15vw, 180px);background-color:var(--lp-card-media);}
html[data-sf] .lp .service-card-body{padding:18px 20px 20px;}
html[data-sf] .lp .service-card-body h3{font-size:clamp(18px, 1.7vw, 21px);letter-spacing:-.015em;color:var(--lp-ink);}
html[data-sf] .lp .service-card-body p{color:var(--lp-muted);font-size:13.5px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

html[data-sf] .lp .menu-cta .btn{min-height:48px;padding:13px 28px;}