/* ============================================================
   Cuban Rippers — Miami-Cuban atmosphere + TABS layer (devdemon).
   Loads AFTER brand.css + interactions.css. Dark reaper base STAYS;
   this LAYERS Miami sunset neon (as glow/gradient, not flat fills),
   Cuban-flag micro-accents, Art-Deco line-work, palms, 305 badge.
   Per-category accents stay magenta/blue/red/purple (sunset = atmosphere only).
   ============================================================ */
:root{
  --miami-pink:#ff2d8e; --miami-coral:#ff5e3a; --miami-teal:#16e0c8; --miami-indigo:#5b6bff;
  --sunset:linear-gradient(105deg,#ff2d8e,#ff5e3a,#ffb347 38%,#16e0c8 66%,#5b6bff);
  --cuba-red:#cf142b; --cuba-blue:#0a3b8c; --cuba-white:#fff;
}
/* ambient Miami sunset glow on the dark base — atmosphere, low opacity */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 40% at 12% 0%, rgba(255,45,142,.16), transparent 60%),
    radial-gradient(55% 38% at 92% 4%, rgba(91,107,255,.15), transparent 60%),
    radial-gradient(70% 45% at 50% 108%, rgba(22,224,200,.10), transparent 62%)}
body>*{position:relative;z-index:1}

/* ===== TAB BAR ===== */
.tabs{position:sticky;top:0;z-index:45;display:flex;gap:4px;justify-content:center;
  padding:10px 14px;background:rgba(11,8,16,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.tabs::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sunset);opacity:.85}
.tab-btn{position:relative;font-family:var(--font-display,sans-serif);text-transform:uppercase;letter-spacing:.06em;
  font-size:14px;color:var(--ink-2);background:none;border:none;padding:10px 20px;cursor:pointer;transition:.15s;border-radius:10px}
.tab-btn:hover{color:#fff;background:rgba(255,255,255,.05)}
.tab-btn.is-on{color:#fff}
.tab-btn.is-on::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:3px;border-radius:3px;background:var(--sunset)}
.tab-panel{display:none;animation:tabIn .35s ease}
.tab-panel.is-on{display:block}
@keyframes tabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===== Cuban-flag micro-accent under the wordmark ===== */
.cr-flag{display:inline-block;width:34px;height:6px;border-radius:2px;margin-left:8px;vertical-align:middle;position:relative;
  background:repeating-linear-gradient(180deg,var(--cuba-blue) 0 1.2px,#fff 1.2px 2.4px)}
.cr-flag::before{content:"";position:absolute;left:0;top:0;border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:7px solid var(--cuba-red)}

/* 305 badge in the hero */
.b305{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;border:1px solid var(--miami-teal);border-radius:999px;padding:4px 12px;
  box-shadow:0 0 16px rgba(22,224,200,.35) inset, 0 0 14px rgba(255,45,142,.25)}
.b305 b{color:var(--miami-teal)}

/* Art-Deco hairline divider w/ a sunset sweep */
.deco-rule{position:relative;height:1px;background:var(--line);max-width:1080px;margin:0 auto;overflow:visible}
.deco-rule::before{content:"";position:absolute;left:50%;top:-1px;width:120px;height:3px;transform:translateX(-50%);border-radius:3px;background:var(--sunset)}

/* sunset wash behind section titles (atmosphere, keeps per-cat accents) */
.sec-title .accent{background:var(--sunset);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* palm silhouettes — ghosted, corners of dark sections */
.palms{position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;opacity:.18;z-index:0;
  background:no-repeat bottom left/auto 100%, no-repeat bottom right/auto 100%;}

/* ===== Art-Deco MAP card (kills the grey placeholder) ===== */
.loc-map{position:relative;overflow:hidden;border:1px solid var(--line-2)!important;
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(255,45,142,.18), transparent 55%),
    radial-gradient(100% 80% at 10% 90%, rgba(22,224,200,.16), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px),
    #0d0a14 !important;color:transparent!important}
.loc-map::before{content:"";position:absolute;left:46%;top:42%;width:14px;height:14px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--cuba-red);box-shadow:0 0 0 4px rgba(207,20,43,.3),0 0 16px var(--cuba-red)}
.loc-map::after{content:"9357 SW 40TH ST · 305";position:absolute;left:0;right:0;bottom:14px;text-align:center;
  font-family:var(--font-display);font-size:12px;letter-spacing:.14em;color:var(--ink-2)}

/* CTA buttons pick up the sunset on hover (atmosphere) */
.btn-primary:hover,.ig-btn:hover{box-shadow:0 0 0 1px var(--miami-pink),0 8px 26px rgba(255,45,142,.4)}

/* hero gets a faint sunset horizon glow behind the foil image */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(80% 50% at 50% 100%, rgba(255,94,58,.14), transparent 60%)}

/* domino-tile divider accent (tasteful, used sparingly) */
.domino{display:inline-flex;gap:3px;vertical-align:middle;margin:0 8px}
.domino i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.5}

/* ===== BREAKS tab — ripper wheel + steps + timeline ===== */
.breaks-hero{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center;margin:36px 0 8px}
@media(max-width:760px){.breaks-hero{grid-template-columns:1fr;justify-items:center;text-align:center}}
.wheel-wrap{position:relative;width:280px;height:300px;display:grid;place-items:center}
.wheel-pointer{position:absolute;top:6px;left:50%;transform:translateX(-50%);z-index:3;
  border-left:13px solid transparent;border-right:13px solid transparent;border-top:22px solid #fff;filter:drop-shadow(0 0 7px var(--miami-pink))}
.ripper-wheel{width:270px;height:270px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:conic-gradient(var(--cat-pkmn) 0 60deg,var(--cat-sports) 60deg 120deg,var(--cat-onepiece) 120deg 180deg,var(--cat-dbz) 180deg 240deg,var(--miami-pink) 240deg 300deg,var(--miami-indigo) 300deg 360deg);
  box-shadow:0 0 0 8px rgba(255,255,255,.06),0 0 0 10px rgba(0,0,0,.5),0 0 48px rgba(255,45,142,.4);
  transition:transform 3s cubic-bezier(.16,.84,.28,1)}
.ripper-wheel::after{content:"";position:absolute;inset:36%;border-radius:50%;background:radial-gradient(circle,#1a1226,#0b0810);border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 0 18px rgba(0,0,0,.8)}
.wheel-hub{position:absolute;z-index:2;font-family:var(--font-display);font-size:22px;letter-spacing:.04em;color:#fff;text-shadow:0 0 10px var(--miami-pink);pointer-events:none}
.breaks-copy h3{font-family:var(--font-display);font-size:clamp(26px,3.4vw,38px);text-transform:uppercase;margin:0 0 12px}
.breaks-copy p{color:var(--ink-2);font-size:16px;max-width:46ch;margin:0 0 22px}
.wheel-result{margin-top:18px;min-height:24px;font-weight:700;color:#fff;opacity:0;transform:translateY(6px);transition:.3s}
.wheel-result.show{opacity:1;transform:none}
.break-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:46px 0}
@media(max-width:760px){.break-steps{grid-template-columns:1fr}}
.break-step{position:relative;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r,16px);padding:22px}
.break-step:nth-child(2){border-top-color:var(--accent-2)} .break-step:nth-child(3){border-top-color:var(--purple)}
.bs-n{font-family:var(--font-display);font-size:30px;color:var(--line-2);line-height:1}
.break-step b{display:block;font-family:var(--font-display);font-size:19px;text-transform:uppercase;margin:6px 0 6px}
.break-step p{color:var(--ink-2);font-size:14px;margin:0}
.break-timeline{position:relative;margin:8px 0 0;padding-left:24px}
.break-timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--sunset)}
.tl-item{position:relative;display:grid;grid-template-columns:90px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.tl-item::before{content:"";position:absolute;left:-23px;top:22px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.tl-item:nth-child(2)::before{background:var(--accent-2);box-shadow:0 0 10px var(--accent-2)} .tl-item:nth-child(3)::before{background:var(--purple);box-shadow:0 0 10px var(--purple)}
.tl-day{font-family:var(--font-display);font-size:20px;text-transform:uppercase;line-height:1.1}
.tl-day span{display:block;font-size:12px;color:var(--miami-teal);letter-spacing:.08em}
.tl-body b{font-family:var(--font-display);font-size:18px;text-transform:uppercase}
.tl-body p{color:var(--ink-2);font-size:14px;margin:5px 0 8px;max-width:60ch}
.tl-tag{font-family:var(--font-display);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#160510;background:var(--miami-teal);padding:3px 10px;border-radius:999px}

/* ===== Cuban touches ===== */
.cr-flag::after{content:"★";position:absolute;left:-7px;top:-4px;font-size:8px;color:#fff;line-height:1}
/* flag-stripe + lone star above footer */
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--cuba-blue),var(--cuba-white) 25%,var(--cuba-red) 50%,var(--cuba-white) 75%,var(--cuba-blue));opacity:.55}
/* ghosted Cuban motif (domino + star) behind the breaks hero — low opacity, whisper */
.breaks-hero::before{content:"";position:absolute;right:2%;top:0;width:200px;height:200px;pointer-events:none;opacity:.05;z-index:0;
  background:radial-gradient(circle at 30% 30%,#fff 2px,transparent 2.5px) 0 0/26px 26px;}

/* ===== Shop polish — grail spotlight + filter tints + label contrast ===== */
.grail{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center;margin:8px 0 30px;padding:22px;
  border-radius:var(--r-lg,20px);border:1px solid var(--line-2);overflow:hidden;position:relative;
  background:radial-gradient(120% 100% at 0% 0%,rgba(255,45,142,.16),transparent 55%),radial-gradient(100% 100% at 100% 100%,rgba(91,107,255,.16),transparent 55%),var(--surface)}
.grail-art{aspect-ratio:3/4;border-radius:12px;border:1px solid var(--line-2);position:relative;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--card-c,var(--accent)) 30%,var(--surface-2)),var(--surface-2))}
.grail-art::after{content:"";position:absolute;inset:0;background:var(--foil);background-size:200% 200%;mix-blend-mode:screen;opacity:.4;animation:foilshift 5s infinite}
.grail-tag{font-family:var(--font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--miami-teal)}
.grail h3{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);text-transform:uppercase;margin:6px 0}
.grail p{color:var(--ink-2);font-size:15px;margin:0 0 14px;max-width:48ch}
.grail .card-price{font-family:var(--font-display);font-size:26px}
@media(max-width:620px){.grail{grid-template-columns:1fr}}
.card-art-name{color:var(--ink-2)!important;opacity:.92!important;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.shop-toolbar .filter[data-cat="pokemon"].is-active{background:var(--cat-pkmn);border-color:var(--cat-pkmn)}
.shop-toolbar .filter[data-cat="sports"].is-active{background:var(--cat-sports);border-color:var(--cat-sports)}
.shop-toolbar .filter[data-cat="onepiece"].is-active{background:var(--cat-onepiece);border-color:var(--cat-onepiece)}
.shop-toolbar .filter[data-cat="dbz"].is-active{background:var(--cat-dbz);border-color:var(--cat-dbz)}