/* ============================================================
   MOBILE MANTRA — red + navy mascot rebrand
   Loaded AFTER styles.css so it overrides the base theme.
   ============================================================ */
:root{
  --red:#e3242b; --red-deep:#c81e24; --red-soft:#ff5a60;
  --navy:#1a1a1a;          /* logo's dark = black, not navy */
  --ink:#1a1a1a;           /* black text/headings */
  --bg:#ffffff;            /* pure white page */
  --white:#ffffff;
  --green-light:#ffe9e9;   /* light-red soft surfaces (chips/hover) */
  --line:#f1e3e3;
  --slate:#6b5f60;
}
/* Floating brand ring removed entirely */
.hero__brandring{display:none!important}

/* Brand wordmark: Mobile = navy, Mantra = red */
.brand__name{color:var(--navy)!important}
.brand__name em{font-style:normal;background:none!important;-webkit-text-fill-color:initial;color:var(--red)!important}
.brand--light .brand__name{color:#fff!important}
.brand--light .brand__name em{color:#ff5a60!important}
.brand__text small span{color:var(--red)}
.brand--light .brand__text small span{color:#ff8f93}
.brand__mascot{height:46px;width:auto;display:block;filter:drop-shadow(0 4px 8px rgba(22,34,77,.25));transition:transform .28s cubic-bezier(.4,0,.2,1)}
.brand:hover .brand__mascot{transform:translateY(-2px) rotate(-3deg)}

/* Nav hover red */
.nav__link:hover{color:var(--red-deep)}

/* Hero — pure white to light red, dark text */
.hero{background:linear-gradient(165deg,#ffffff 0%,#fff4f4 52%,#ffe4e5 100%)!important;color:var(--ink)}
.hero__bg{background:
  radial-gradient(circle at 84% 18%,rgba(227,36,43,.12),transparent 46%),
  radial-gradient(circle at 12% 88%,rgba(227,36,43,.08),transparent 42%)!important}
.hero__eyebrow{background:#ffe2e3;border-color:#ffc9cc;color:var(--red-deep)}
.hero__title{color:#1a1a1a}
.hero__title span{background:none!important;-webkit-text-fill-color:initial;color:var(--red)!important}
.hero__sub{color:#5e5556}
.hero__wave{background:#fff}
.hero__stats strong{color:var(--red)}
.hero__stats span{color:#6b5f60}
.hero .btn--ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.hero .btn--ghost:hover{background:var(--green-light);color:var(--red-deep);border-color:var(--red)}

/* Hero animation video — autoplay muted, compact, framed card */
.hero__videowrap{position:relative;display:grid;place-items:center;width:100%}
.hero__spot{position:absolute;width:min(420px,90%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 64%);filter:blur(8px);pointer-events:none}
.hero__video{position:relative;width:clamp(280px,32vw,420px);max-width:100%;aspect-ratio:760/555;object-fit:cover;border-radius:22px;background:#ececeb;box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 0 5px rgba(255,255,255,.9),0 0 0 7px rgba(227,36,43,.55);animation:mmFloat 5s ease-in-out infinite}
@keyframes mmFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* Finder FAB (chatbot icon) — red gradient, same shape */
.finderfab,.finderfab--m{background:linear-gradient(135deg,#e3242b,#b3171d)!important;box-shadow:0 14px 34px rgba(227,36,43,.45)!important}

/* Brand-red feature blocks on the white page */
.deal__inner{background:linear-gradient(125deg,#e3242b,#b3171d)!important}
.deal__inner::before{background:rgba(255,255,255,.18)!important}
.newsletter__inner{background:linear-gradient(125deg,#e3242b,#b3171d)!important}
.footer{background:#181517}
.toast b{color:#ff9aa0}
.chip.is-active{color:#fff}
.cart-btn{background:var(--green-light);color:var(--navy)}
.cart-btn:hover{background:var(--red);color:#fff}

/* ============================================================
   MASCOT INTRO REVEAL
   ============================================================ */
.intro{position:fixed;inset:0;z-index:9999;background:radial-gradient(circle at 50% 40%,#ffffff,#eef1f8 70%);display:grid;place-items:center;overflow:hidden;transition:opacity .85s ease,visibility .85s ease}
.intro.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.intro__stagelight{position:absolute;top:38%;left:50%;width:min(640px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(227,36,43,.12),transparent 60%);pointer-events:none}
.intro__inner{position:relative;display:grid;place-items:center;text-align:center;padding:1.2rem}
.intro__mascotwrap{position:relative;display:grid;place-items:center}
.intro__mascot{width:clamp(170px,42vw,290px);height:auto;filter:drop-shadow(0 22px 34px rgba(22,34,77,.30));opacity:0;transform:scale(.5) translateY(20px);animation:introPop 1s cubic-bezier(.2,1.5,.3,1) .15s forwards, introWobble 3s ease-in-out 1.15s infinite}
.intro__ring{position:absolute;width:min(340px,80vw);aspect-ratio:1;border-radius:50%;border:2px solid rgba(227,36,43,.35);opacity:0;animation:introRing 2s ease-out .35s forwards}
.intro__ring2{width:min(440px,92vw);border-color:rgba(22,34,77,.20);animation-delay:.6s}
.intro__shine{position:absolute;width:clamp(170px,42vw,290px);height:clamp(170px,42vw,290px);background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);mix-blend-mode:overlay;opacity:0;animation:introShine 1.3s ease-in-out 1.1s}
.intro__word{margin-top:1.5rem;font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(1.8rem,7vw,3.4rem);letter-spacing:-.02em;opacity:0;transform:translateY(16px);animation:introUp .7s ease .85s forwards}
.intro__word .intro__w1{color:var(--navy)}
.intro__word .intro__w2{color:var(--red)}
.intro__since{margin-top:.3rem;color:var(--navy);font-family:'Sora',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.36em;opacity:0;animation:introUp .7s ease 1.05s forwards}
.intro__welcome{margin-top:1.3rem;display:inline-block;background:linear-gradient(135deg,#e3242b,#b3171d);color:#fff;font-weight:700;font-size:.92rem;padding:.6rem 1.3rem;border-radius:999px;box-shadow:0 12px 26px rgba(227,36,43,.40);opacity:0;transform:translateY(12px);animation:introUp .7s ease 1.3s forwards}
.intro__skip{position:absolute;bottom:24px;right:24px;background:#fff;border:1.5px solid var(--line);color:var(--slate);font-size:.78rem;font-weight:600;padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;box-shadow:var(--shadow-sm);transition:.28s}
.intro__skip:hover{background:var(--red);color:#fff;border-color:var(--red)}
body.intro-lock{overflow:hidden}
@keyframes introPop{0%{opacity:0;transform:scale(.5) translateY(20px)}60%{opacity:1}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes introWobble{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-8px)}}
@keyframes introRing{0%{opacity:0;transform:scale(.5)}45%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes introShine{0%{opacity:0;transform:translateX(-70%)}50%{opacity:1}100%{opacity:0;transform:translateX(70%)}}
@keyframes introUp{to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  .intro__mascot,.intro__ring,.intro__shine,.intro__word,.intro__since,.intro__welcome{animation:none!important;opacity:1!important;transform:none!important}
  .hero__mascot,.hero__swoosh,.hero__bubble{animation:none!important}
}

/* Mobile responsive — hero video centered, modest size */
@media (max-width:920px){
  .hero__videowrap{margin-top:.6rem}
  .hero__video{width:clamp(260px,70vw,400px)}
}
@media (max-width:760px){
  .hero__video{width:min(82vw,360px);border-radius:18px}
  .hero__spot{width:min(320px,92%)}
  .brand__mascot{height:40px}
}

/* ---- Official brand logos in brand cards ---- */
.brandcard__logo{height:56px;display:grid;place-items:center;margin-bottom:.5rem}
.brandcard__logo img{max-height:40px;max-width:80%;width:auto;object-fit:contain}
.brandcard__fallback{font-family:'Sora',sans-serif;font-weight:800;color:var(--bc);font-size:1.05rem}
.brandcard__mark{display:none}

/* ---- CTA buttons forced to RED (override per-brand --bc) ---- */
.card__add{background:linear-gradient(135deg,#e3242b,#c81e24)!important;color:#fff!important}
.card__view:hover{background:#e3242b!important;color:#fff!important}
.btn--primary{background:linear-gradient(135deg,#e3242b,#c81e24)!important;color:#fff!important;box-shadow:0 12px 26px rgba(227,36,43,.34)!important}
.btn--primary:hover{box-shadow:0 18px 40px rgba(227,36,43,.48)!important}
.cart-btn__count{background:#e3242b;color:#fff}

/* ---- Chatbot FAB = mascot in a white badge (so the red mascot shows on red) ---- */
.finderfab__ico{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;box-shadow:0 2px 6px rgba(0,0,0,.22)}
.finderfab__ico img{width:120%;height:120%;object-fit:contain}
.finderfab--m{background:#fff!important;box-shadow:0 12px 28px rgba(227,36,43,.45)!important;border:2px solid #e3242b!important}
.finderfab--m .finderfab__ico{width:100%;height:100%;background:#fff;box-shadow:none}
.finderfab--m .finderfab__ico img{width:116%;height:116%}

/* ============================================================
   CHATBOT = floating 3D mascot, NO background box
   ============================================================ */
.finderfab{background:transparent!important;box-shadow:none!important;border:none!important;padding:0!important;display:flex!important;flex-direction:column;align-items:center;gap:.35rem;bottom:20px;left:20px}
.finderfab__ico{display:none!important}
.finderfab__mascot{height:74px;width:auto;display:block;filter:drop-shadow(0 10px 12px rgba(0,0,0,.30));animation:fabBob 2.8s ease-in-out infinite;transform-origin:50% 92%}
.finderfab:hover .finderfab__mascot{animation-duration:1.1s}
.finderfab .finderfab__lbl{display:inline-block;background:#e3242b;color:#fff;font-weight:700;font-size:.74rem;padding:.34rem .8rem;border-radius:999px;box-shadow:0 6px 16px rgba(227,36,43,.42);white-space:nowrap;letter-spacing:.01em}
@keyframes fabBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}

/* Mobile chatbot — just the floating mascot + tiny red tag */
.finderfab--m{background:transparent!important;box-shadow:none!important;border:none!important;width:auto!important;height:auto!important;padding:0!important;display:flex!important;flex-direction:column;align-items:center;gap:.2rem;bottom:14px;right:14px}
.finderfab--m .finderfab__mascot{height:60px}
.finderfab--m .finderfab__mlbl{display:inline-block;background:#e3242b;color:#fff;font-weight:700;font-size:.62rem;padding:.18rem .55rem;border-radius:999px;box-shadow:0 4px 12px rgba(227,36,43,.45)}

/* ---- Brand-card logos: force render size + fix contrast ---- */
.brandcard__logo img{height:34px!important;max-height:34px!important;width:auto!important;max-width:84%;object-fit:contain}

/* ============================================================
   FIX: one chatbot per breakpoint · remove compare floating UI
   (must be the LAST rules so they win over earlier !important)
   ============================================================ */
/* Remove the Compare floating bar + card compare toggles entirely */
#cmpBar{display:none!important}
.card__cmp{display:none!important}

/* Desktop: only the left chatbot; hide the mobile one */
@media (min-width:761px){
  .finderfab:not(.finderfab--m){display:flex!important}
  .finderfab--m{display:none!important}
}
/* Mobile: only the chatbot (bottom-left, as requested); hide desktop one */
@media (max-width:760px){
  .finderfab:not(.finderfab--m){display:none!important}
  .finderfab--m{display:flex!important;left:16px;right:auto;bottom:16px}
}
/* Never overlap the product-page sticky buy bar */
body.is-product-view .finderfab,
body.is-product-view .finderfab--m{display:none!important}