/* =====================================================================
   sticky.css — the STICKY ORDER BUTTON designs (tools/lp-sticky.js) on
   <body data-sticky-design>. The .sticky-cta box, its data-cta button, the
   data-cta-label text and the .hidden auto-hide (app.js) never change — these
   rules only restyle them. Rules of the house:
   · real text + inline SVG only, logical properties only (RTL for free)
   · every tap target ≥ 48px, font-family inherited (self-hosted Tajawal/Cairo)
   · colours from the theme tokens (--brand --brand-rgb --brand-dark --accent
     --ink --soft --line --bg --muted) — only glossy-green / gold own a palette
   · animations live on the BUTTON, never on .sticky-cta (its transform is the
     auto-hide); prefers-reduced-motion switches every one of them off
   · no overflow on body/html here (W5) — only on the button itself
   Mobile first; the laptop floating pill (style.css, min-width:900px) stays.
   ===================================================================== */
/* ---- shared parts of every design ---- */
.sticky-cta .btn{position:relative;min-height:48px;font-family:inherit}
.sticky-cta .sc-lbl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-cta .sc-ic,.sticky-cta .sc-arrow,.sticky-cta .sc-emoji{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:1}
.sticky-cta .sc-svg{width:1.25em;height:1.25em}
[dir="rtl"] .sticky-cta .sc-arrow .sc-svg{transform:scaleX(-1)}
.sticky-cta .sc-top{flex:1 0 100%;min-width:0;font-size:12.5px;line-height:1.35;text-align:center}
.sticky-cta .sc-alt{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none;min-height:48px;padding:0 14px;border-radius:12px;font-weight:800;font-size:15px;text-decoration:none;white-space:nowrap}
.sticky-cta .sc-alt svg{width:1.3em;height:1.3em}
.sticky-cta .mini-price{line-height:1.15}
.sticky-cta .sc-now,.sticky-cta .sc-old,.sticky-cta .sc-bprice{direction:ltr;unicode-bidi:isolate}   /* "299 DH" reads the same on an RTL page */
/* the floating designs: no bar — only the button(s) float over the page. A transparent box must not
   swallow taps meant for the page under it, and its children must not stay tappable while it is hidden. */
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"],[data-sticky-design="fab"],[data-sticky-design="bounce"]) .sticky-cta{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;pointer-events:none;justify-content:center}
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"],[data-sticky-design="fab"],[data-sticky-design="bounce"]) .sticky-cta>*{pointer-events:auto}
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"],[data-sticky-design="fab"],[data-sticky-design="bounce"]) .sticky-cta.hidden>*{pointer-events:none}
@media(max-width:899px){
  /* cards that float with a margin (pill · glass · soft card) */
  :is([data-sticky-design="pill-float"],[data-sticky-design="glass"],[data-sticky-design="shadow-soft"]) .sticky-cta{inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom));padding:7px;padding-inline-start:16px}
  :is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"],[data-sticky-design="bounce"]) .sticky-cta{padding:8px 14px calc(12px + env(safe-area-inset-bottom))}
  /* a row above the button makes the bar taller — give the page's last lines room */
  body:is([data-sticky-design="trust-line"],[data-sticky-design="stock-bar"],[data-sticky-design="timer"]){padding-bottom:104px}
}

/* ============ 1 bar = style.css as it always was (nothing here) ============ */

/* ============ 2-3 glossy · glossy-green — the reference: a shiny 3-D pill, gold rim, round cart, bounce ============ */
[data-sticky-design="glossy"] .sticky-cta .btn{--sc-t:color-mix(in srgb,var(--brand) 62%,#fff);--sc-m:var(--brand);--sc-b:color-mix(in srgb,var(--brand) 70%,#000);--sc-i:var(--brand)}
[data-sticky-design="glossy-green"] .sticky-cta .btn{--sc-t:#4cc24c;--sc-m:#1c931c;--sc-b:#0a5e0a;--sc-i:#178a17}
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"]) .sticky-cta .btn{
  flex:0 1 350px;width:auto;max-width:100%;min-height:60px;padding-block:6px;padding-inline:22px 7px;gap:10px;border-radius:999px;
  background:linear-gradient(180deg,var(--sc-t) 0%,var(--sc-m) 46%,var(--sc-b) 54%,var(--sc-m) 100%);
  border:2px solid #e9c46a;color:#fff;
  box-shadow:0 0 0 1.5px rgba(92,62,6,.6),inset 0 -4px 7px rgba(0,0,0,.28),inset 0 2px 1px rgba(255,255,255,.35),0 9px 18px rgba(0,0,0,.3);
  animation:sc-sway 3.2s ease-in-out infinite}
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"]) .sticky-cta .btn::before{content:"";position:absolute;inset:3px 16px 52% 16px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.06));pointer-events:none}
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"]) .sticky-cta .btn:hover{filter:brightness(1.06)}
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"]) .sticky-cta .sc-txt{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;line-height:1.1;position:relative}
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"]) .sticky-cta .sc-lbl{font-size:22px;font-weight:900;text-shadow:0 2px 0 rgba(0,0,0,.3);max-width:100%}
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"]) .sticky-cta .sc-orn{color:#f0cf74;margin-top:3px;width:58px;height:8px}
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"]) .sticky-cta .sc-ic{order:2;position:relative;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#fff 55%,#e9eef0);border:2px solid #e9c46a;color:var(--sc-i);font-size:21px;box-shadow:inset 0 -2px 3px rgba(0,0,0,.14)}
:is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"]) .sticky-cta .sc-ic::before{content:"";position:absolute;inset-inline-start:-9px;top:15%;height:70%;border-inline-start:1.5px dotted #f0cf74}

/* ============ 4 gold — black & gold luxury ============ */
[data-sticky-design="gold"] .sticky-cta{background:#0b0b0c;border-color:#3b2f12;box-shadow:0 -6px 22px rgba(0,0,0,.35)}
[data-sticky-design="gold"] .sticky-cta .mini-price{color:#f0cf74}
[data-sticky-design="gold"] .sticky-cta .btn{background:linear-gradient(180deg,#f8e59a 0%,#dcae45 48%,#b8860b 100%);color:#1c1405;border:1px solid #f7e7a1;border-radius:999px;font-weight:900;text-shadow:0 1px 0 rgba(255,255,255,.45);box-shadow:0 6px 18px rgba(220,174,69,.35),inset 0 1px 0 rgba(255,255,255,.7)}

/* ============ 5 pill-float — the laptop pill, on the phone too ============ */
[data-sticky-design="pill-float"] .sticky-cta{border-radius:999px;border:1px solid var(--line);box-shadow:0 14px 34px rgba(2,6,23,.2)}
[data-sticky-design="pill-float"] .sticky-cta .btn{border-radius:999px;min-height:50px}

/* ============ 6 full-width — one big edge-to-edge button ============ */
@media(max-width:899px){
  [data-sticky-design="full-width"] .sticky-cta{padding:0 0 env(safe-area-inset-bottom);background:var(--brand);border:0}
  [data-sticky-design="full-width"] .sticky-cta .btn{border-radius:0;min-height:62px;font-size:19px;font-weight:900;box-shadow:none}
}
[data-sticky-design="full-width"] .sticky-cta .sc-ic{font-size:20px}

/* ============ 7 price-split — price + old price in a chip ============ */
[data-sticky-design="price-split"] .sticky-cta .mini-price{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;padding:4px 12px;border:1.5px dashed rgba(var(--brand-rgb),.55);border-radius:12px;background:rgba(var(--brand-rgb),.06)}
[data-sticky-design="price-split"] .sticky-cta .sc-old{font-size:12px;font-weight:600;color:var(--muted)}
[data-sticky-design="price-split"] .sticky-cta .sc-now{font-size:19px;font-weight:900;color:var(--brand)}

/* ============ 8 two-tone — a darker icon block at the button's start ============ */
[data-sticky-design="two-tone"] .sticky-cta .btn{padding:0;padding-inline-end:16px;align-items:stretch;overflow:hidden;gap:0}
[data-sticky-design="two-tone"] .sticky-cta .sc-ic{width:54px;background:color-mix(in srgb,var(--brand) 68%,#000);font-size:20px}
[data-sticky-design="two-tone"] .sticky-cta .sc-lbl{flex:1;align-self:center;text-align:center;padding-inline-start:12px}

/* ============ 9 outline ============ */
[data-sticky-design="outline"] .sticky-cta .btn{background:var(--bg);color:var(--brand);border:2px solid var(--brand);box-shadow:none;font-weight:800}
[data-sticky-design="outline"] .sticky-cta .btn:hover{background:var(--brand);color:#fff}

/* ============ 10 neon · 11 dark ============ */
[data-sticky-design="neon"] .sticky-cta{background:#070b18;border-color:rgba(var(--brand-rgb),.45)}
[data-sticky-design="neon"] .sticky-cta .mini-price{color:#fff;text-shadow:0 0 10px rgba(var(--brand-rgb),.9)}
[data-sticky-design="neon"] .sticky-cta .btn{background:rgba(var(--brand-rgb),.14);color:#fff;border:2px solid color-mix(in srgb,var(--brand) 70%,#fff);border-radius:999px;text-shadow:0 0 8px rgba(var(--brand-rgb),1);box-shadow:0 0 14px rgba(var(--brand-rgb),.75),inset 0 0 10px rgba(var(--brand-rgb),.4);animation:sc-neon 2.2s ease-in-out infinite alternate}
[data-sticky-design="neon"] .sticky-cta .btn:hover{background:rgba(var(--brand-rgb),.3)}
[data-sticky-design="dark"] .sticky-cta{background:#0f172a;border-color:#1e293b}
[data-sticky-design="dark"] .sticky-cta .mini-price{color:#fff}
[data-sticky-design="dark"] .sticky-cta .btn{box-shadow:0 6px 18px rgba(var(--brand-rgb),.45)}

/* ============ 12 glass · 13 shadow-soft — floating cards ============ */
[data-sticky-design="glass"] .sticky-cta{border-radius:20px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);border:1px solid rgba(255,255,255,.75);box-shadow:0 10px 30px rgba(2,6,23,.18)}
[data-sticky-design="glass"] .sticky-cta .btn{border-radius:14px}
[data-sticky-design="shadow-soft"] .sticky-cta{border-radius:22px;background:var(--bg);border:0;box-shadow:0 18px 44px -6px rgba(2,6,23,.3),0 2px 6px rgba(2,6,23,.06)}
[data-sticky-design="shadow-soft"] .sticky-cta .btn{border-radius:16px}

/* ============ 14 gradient-sweep — a light sweeps across ============ */
[data-sticky-design="gradient-sweep"] .sticky-cta .btn{background:linear-gradient(100deg,var(--brand),color-mix(in srgb,var(--accent,#f59e0b) 85%,var(--brand)));overflow:hidden;border-radius:14px;font-weight:800}
[data-sticky-design="gradient-sweep"] .sticky-cta .btn::after{content:"";position:absolute;top:0;bottom:0;width:38%;inset-inline-start:-50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sc-sweep 2.8s ease-in-out infinite;pointer-events:none}

/* ============ 15 pulse · 16 bounce · 17 wobble · 18 arrow — motion ============ */
[data-sticky-design="pulse"] .sticky-cta .btn{border-radius:999px;animation:sc-beat 1.7s ease-in-out infinite}
[data-sticky-design="bounce"] .sticky-cta .btn{flex:0 1 360px;border-radius:999px;min-height:56px;font-size:19px;font-weight:900;box-shadow:0 10px 24px rgba(var(--brand-rgb),.4);animation:sc-sway 2.6s ease-in-out infinite}
[data-sticky-design="bounce"] .sticky-cta .sc-ic{font-size:20px}
[data-sticky-design="wobble"] .sticky-cta .btn{border-radius:14px;animation:sc-wobble 3.6s ease-in-out infinite}
:is([data-sticky-design="arrow"],[data-sticky-design="minimal"]) .sticky-cta .sc-arrow{font-size:18px;animation:sc-nudge 1.1s ease-in-out infinite}
[dir="rtl"] .sticky-cta .sc-arrow{--sc-dir:-1}
[data-sticky-design="arrow"] .sticky-cta .btn{border-radius:12px}

/* ============ 19 badge-count — a chip floating on the bar's top edge ============ */
[data-sticky-design="badge-count"] .sticky-cta .sc-badge{position:absolute;inset-inline:0;top:-13px;pointer-events:none}
[data-sticky-design="badge-count"] .sticky-cta .sc-badge span{display:inline-block;padding:3px 12px;border-radius:999px;background:#fff7ed;color:#9a3412;border:1px solid #fdba74;font-weight:800;font-size:12px;box-shadow:0 4px 10px rgba(154,52,18,.15)}
[data-sticky-design="badge-count"] .sticky-cta{padding-top:16px}

/* ============ 20 timer · 26 trust-line · 27 stock-bar — a row above the button ============ */
:is([data-sticky-design="timer"],[data-sticky-design="trust-line"],[data-sticky-design="stock-bar"]) .sticky-cta{flex-wrap:wrap;row-gap:6px;padding-top:7px}
[data-sticky-design="timer"] .sticky-cta .sc-timer{font-weight:700;color:var(--ink)}
[data-sticky-design="timer"] .sticky-cta .sc-clock b{display:inline-block;min-width:26px;padding:1px 4px;margin:0 1px;border-radius:6px;background:var(--ink);color:#fff;font-variant-numeric:tabular-nums}
[data-sticky-design="trust-line"] .sticky-cta .sc-trust{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
[data-sticky-design="trust-line"] .sticky-cta .sc-trust .sc-svg{color:#16a34a;flex:none}
[data-sticky-design="stock-bar"] .sticky-cta .sc-stock{display:grid;gap:4px;color:#dc2626;font-weight:800}
[data-sticky-design="stock-bar"] .sticky-cta .sc-stock i{position:relative;display:block;height:5px;border-radius:999px;background:var(--soft);overflow:hidden}
[data-sticky-design="stock-bar"] .sticky-cta .sc-stock i::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--sc-pct,100%);border-radius:999px;background:linear-gradient(90deg,#f97316,#dc2626)}
[data-sticky-design="stock-bar"] .sticky-cta .sc-stock i.sc-run::before{width:40%;animation:sc-run 1.9s linear infinite}

/* ============ 21 whatsapp-duo · 22 call-duo ============ */
[data-sticky-design="whatsapp-duo"] .sticky-cta .sc-wa{background:#25d366;color:#fff;box-shadow:0 6px 16px rgba(37,211,102,.35)}
[data-sticky-design="call-duo"] .sticky-cta .sc-call{background:var(--bg);color:var(--brand);border:2px solid var(--brand)}
:is([data-sticky-design="whatsapp-duo"],[data-sticky-design="call-duo"]) .sticky-cta{gap:8px}

/* ============ 23 fab — a round icon + its label, at the side ============ */
[data-sticky-design="fab"] .sticky-cta{justify-content:flex-end;padding:0 14px calc(14px + env(safe-area-inset-bottom))}
[data-sticky-design="fab"] .sticky-cta .btn{flex:none;width:auto;max-width:100%;min-height:58px;padding-block:6px;padding-inline:6px 20px;gap:10px;border-radius:999px;font-weight:800;box-shadow:0 12px 26px rgba(var(--brand-rgb),.45)}
[data-sticky-design="fab"] .sticky-cta .sc-ic{width:46px;height:46px;border-radius:50%;background:#fff;color:var(--brand);font-size:20px}

/* ============ 24 sheet — a bottom sheet with a grab handle ============ */
@media(max-width:899px){
  [data-sticky-design="sheet"] .sticky-cta{border:0;border-radius:22px 22px 0 0;padding-top:20px;box-shadow:0 -10px 30px rgba(2,6,23,.14)}
  [data-sticky-design="sheet"] .sticky-cta::before{content:"";position:absolute;top:7px;inset-inline-start:calc(50% - 20px);width:40px;height:5px;border-radius:999px;background:#cbd5e1}
}
[data-sticky-design="sheet"] .sticky-cta .btn{border-radius:14px;min-height:54px}

/* ============ 25 ribbon — a tilted "cash on delivery" tag ============ */
[data-sticky-design="ribbon"] .sticky-cta{padding-top:14px}
[data-sticky-design="ribbon"] .sticky-cta .sc-tag{position:absolute;top:-11px;inset-inline-end:10px;padding:2px 9px;border-radius:6px;background:var(--accent,#f59e0b);color:#111;font-size:11px;font-weight:800;line-height:1.5;white-space:nowrap;transform:rotate(-4deg);box-shadow:0 3px 8px rgba(0,0,0,.18)}
[dir="rtl"][data-sticky-design="ribbon"] .sticky-cta .sc-tag,[dir="rtl"] [data-sticky-design="ribbon"] .sticky-cta .sc-tag{transform:rotate(4deg)}

/* ============ 28 stars ============ */
[data-sticky-design="stars"] .sticky-cta .sc-stars{display:flex;flex-direction:column;align-items:center;flex:none;line-height:1.15}
[data-sticky-design="stars"] .sticky-cta .sc-stars b{color:#f59e0b;font-size:14px;letter-spacing:1px}
[data-sticky-design="stars"] .sticky-cta .sc-stars small{font-size:12px;font-weight:700;color:var(--muted)}

/* ============ 29 emoji-lead · 30 uppercase-wide · 31 rounded-square ============ */
[data-sticky-design="emoji-lead"] .sticky-cta .btn{border-radius:999px}
[data-sticky-design="emoji-lead"] .sticky-cta .sc-emoji{font-size:1.25em}
[data-sticky-design="uppercase-wide"] .sticky-cta .btn{background:var(--ink);text-transform:uppercase;letter-spacing:.12em;font-size:15px;font-weight:800;border-radius:4px;box-shadow:none}
[data-sticky-design="uppercase-wide"] .sticky-cta .mini-price{color:var(--ink)}
[dir="rtl"] [data-sticky-design="uppercase-wide"] .sticky-cta .btn,[dir="rtl"][data-sticky-design="uppercase-wide"] .sticky-cta .btn{letter-spacing:0;font-size:17px}   /* Arabic letters must stay joined */
[data-sticky-design="rounded-square"] .sticky-cta .btn{border-radius:18px;min-height:56px;font-size:18px;font-weight:800;box-shadow:0 10px 22px rgba(var(--brand-rgb),.35)}
[data-sticky-design="rounded-square"] .sticky-cta .sc-ic{padding:5px;border-radius:10px;background:rgba(255,255,255,.22)}

/* ============ 32 brutalist — thick border, hard offset shadow ============ */
[data-sticky-design="brutalist"] .sticky-cta{background:var(--bg);border-top:3px solid var(--ink);box-shadow:none;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
[data-sticky-design="brutalist"] .sticky-cta .mini-price{color:var(--ink);font-weight:900;border:3px solid var(--ink);padding:6px 9px;background:#fff}
[data-sticky-design="brutalist"] .sticky-cta .btn{background:var(--accent,#facc15);color:var(--ink);border:3px solid var(--ink);border-radius:0;font-weight:900;box-shadow:5px 5px 0 var(--ink);margin-inline-end:5px}
[dir="rtl"] [data-sticky-design="brutalist"] .sticky-cta .btn,[dir="rtl"][data-sticky-design="brutalist"] .sticky-cta .btn{box-shadow:-5px 5px 0 var(--ink)}
[data-sticky-design="brutalist"] .sticky-cta .btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}

/* ============ 33 minimal — a text button with an arrow ============ */
[data-sticky-design="minimal"] .sticky-cta{background:var(--bg);box-shadow:none;padding-block:4px calc(4px + env(safe-area-inset-bottom))}
[data-sticky-design="minimal"] .sticky-cta .mini-price{color:var(--ink);font-size:17px}
[data-sticky-design="minimal"] .sticky-cta .btn,[data-sticky-design="minimal"] .sticky-cta .btn:hover{background:transparent;color:var(--brand);box-shadow:none;justify-content:flex-end;font-weight:800;padding-inline:4px}
[data-sticky-design="minimal"] .sticky-cta .sc-lbl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* ============ 34 halves — the price half and the order half in one pill ============ */
[data-sticky-design="halves"] .sticky-cta .btn{padding:0;align-items:stretch;gap:0;overflow:hidden;border-radius:999px;min-height:54px}
[data-sticky-design="halves"] .sticky-cta .sc-bprice{display:flex;align-items:center;gap:.25em;padding-inline:18px 14px;background:color-mix(in srgb,var(--brand) 70%,#000);font-weight:900;font-size:17px;white-space:nowrap}
[data-sticky-design="halves"] .sticky-cta .sc-lbl{flex:1;align-self:center;text-align:center;padding-inline:12px 16px}

/* ============ 35 press — a 3-D key that pushes down ============ */
[data-sticky-design="press"] .sticky-cta{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
[data-sticky-design="press"] .sticky-cta .btn{border-radius:14px;min-height:54px;font-weight:800;box-shadow:0 6px 0 color-mix(in srgb,var(--brand) 62%,#000),0 12px 20px rgba(0,0,0,.18);transition:transform .08s,box-shadow .08s}
[data-sticky-design="press"] .sticky-cta .btn:active{transform:translateY(5px);box-shadow:0 1px 0 color-mix(in srgb,var(--brand) 62%,#000),0 3px 8px rgba(0,0,0,.18)}

/* ============ 36 candy · 37 pastel · 38 glow-border ============ */
[data-sticky-design="candy"] .sticky-cta .btn{border-radius:999px;font-weight:900;font-size:18px;text-shadow:0 1px 2px rgba(0,0,0,.35);background:repeating-linear-gradient(-45deg,var(--brand) 0 14px,color-mix(in srgb,var(--brand) 78%,#fff) 14px 28px);background-size:39.6px 39.6px;animation:sc-stripes 1.2s linear infinite}
[data-sticky-design="pastel"] .sticky-cta{background:color-mix(in srgb,var(--brand) 7%,#fff);border-color:color-mix(in srgb,var(--brand) 22%,#fff)}
[data-sticky-design="pastel"] .sticky-cta .mini-price{color:var(--brand-dark,var(--brand))}
[data-sticky-design="pastel"] .sticky-cta .btn{background:color-mix(in srgb,var(--brand) 18%,#fff);color:color-mix(in srgb,var(--brand) 55%,#000);border:1.5px solid color-mix(in srgb,var(--brand) 38%,#fff);border-radius:999px;box-shadow:none;font-weight:800}
[data-sticky-design="pastel"] .sticky-cta .btn:hover{background:color-mix(in srgb,var(--brand) 28%,#fff)}
@property --sc-a{syntax:"<angle>";inherits:false;initial-value:0deg}
[data-sticky-design="glow-border"] .sticky-cta .btn{border:3px solid transparent;border-radius:999px;font-weight:800;background:linear-gradient(var(--brand),var(--brand)) padding-box,conic-gradient(from var(--sc-a),var(--brand) 0%,#fff 12%,var(--accent,#f59e0b) 22%,var(--brand) 34%,var(--brand) 100%) border-box;box-shadow:0 0 18px rgba(var(--brand-rgb),.45);animation:sc-spin 2.6s linear infinite}

/* ---- laptop: every design keeps the centred floating spot of style.css ---- */
@media(min-width:900px){
  :is([data-sticky-design="glossy"],[data-sticky-design="glossy-green"],[data-sticky-design="bounce"],[data-sticky-design="fab"]) .sticky-cta{padding:8px}
  [data-sticky-design="gold"] .sticky-cta{border-color:#6b5520}
  [data-sticky-design="brutalist"] .sticky-cta{border:3px solid var(--ink);border-radius:0;padding:10px 12px}
  [data-sticky-design="press"] .sticky-cta{padding-bottom:14px}
  [data-sticky-design="badge-count"] .sticky-cta{padding-top:14px}
  :is([data-sticky-design="timer"],[data-sticky-design="trust-line"],[data-sticky-design="stock-bar"]) .sticky-cta{border-radius:22px;padding-top:8px}
  [data-sticky-design="ribbon"] .sticky-cta{padding-top:12px}
}

/* ---- motion ---- */
@keyframes sc-sway{0%,58%,100%{transform:translateX(0)}66%{transform:translateX(-7px)}74%{transform:translateX(6px)}82%{transform:translateX(-4px)}90%{transform:translateX(2px)}}
@keyframes sc-beat{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(var(--brand-rgb),.5)}15%{transform:scale(1.04)}30%{transform:scale(1)}45%{transform:scale(1.035)}70%{box-shadow:0 0 0 13px rgba(var(--brand-rgb),0)}}
@keyframes sc-wobble{0%,76%,100%{transform:rotate(0)}80%{transform:rotate(-3deg)}84%{transform:rotate(3deg)}88%{transform:rotate(-2deg)}92%{transform:rotate(1.5deg)}96%{transform:rotate(0)}}
@keyframes sc-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(calc(5px * var(--sc-dir,1)))}}
@keyframes sc-sweep{0%{inset-inline-start:-50%}60%,100%{inset-inline-start:130%}}
@keyframes sc-neon{from{box-shadow:0 0 8px rgba(var(--brand-rgb),.55),inset 0 0 8px rgba(var(--brand-rgb),.3)}to{box-shadow:0 0 20px rgba(var(--brand-rgb),.95),inset 0 0 14px rgba(var(--brand-rgb),.55)}}
@keyframes sc-run{from{inset-inline-start:-40%}to{inset-inline-start:100%}}
@keyframes sc-stripes{to{background-position:39.6px 0}}
@keyframes sc-spin{to{--sc-a:360deg}}
@media(prefers-reduced-motion:reduce){
  .sticky-cta .btn,.sticky-cta .btn::before,.sticky-cta .btn::after,.sticky-cta .sc-arrow,.sticky-cta .sc-stock i::before{animation:none!important}
  [data-sticky-design] .sticky-cta .sc-stock i.sc-run::before{width:100%}   /* still: a full bar, not a fake level */
}