/* ==========================================================
   BRAWL BOOST — SellAuth theme
   Tropical sunset · glossy gold · teal outline
   ========================================================== */
:root{
  --bb-gold-1:#fff3b0; --bb-gold-2:#ffcf3f; --bb-gold-3:#ff9a1f; --bb-gold-4:#ff6a1a;
  --bb-teal:#4fe0d8; --bb-maroon:#3a0d14; --bb-pink:#ff4f9a; --bb-plum:#14081d;
  --bb-card:rgba(38,16,52,.72); --bb-line:rgba(255,196,110,.16); --bb-radius:18px;
  --bb-font-display:'Lilita One',system-ui,sans-serif;
}
body.bb{background:var(--bb-plum)!important;}
.bb h1,.bb h2,.bb h3,.bb .font-display{font-family:var(--bb-font-display);font-weight:400;letter-spacing:.3px}
.bb ::selection{background:var(--bb-gold-2);color:var(--bb-maroon)}

/* ---------- background ---------- */
.bb-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:
  radial-gradient(1200px 600px at 50% -10%,rgba(255,140,90,.35),transparent 60%),
  linear-gradient(180deg,#2a0f3d 0%,#1a0a26 45%,#12071a 100%)}
.bb-bg__img{position:absolute;inset:-40px;background-size:cover;background-position:center top;opacity:.55;filter:saturate(1.2);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 40%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.6) 40%,transparent 85%)}
.bb-bg__glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.45}
.bb-bg__glow--a{width:520px;height:520px;left:-160px;top:35%;background:#ff4f9a}
.bb-bg__glow--b{width:560px;height:560px;right:-180px;top:60%;background:#2fc7c0;opacity:.28}
.bb-bg__sparkles{position:absolute;inset:0;background-image:
  radial-gradient(2px 2px at 12% 20%,#ffe39a,transparent),radial-gradient(2px 2px at 78% 14%,#ffe39a,transparent),
  radial-gradient(1.5px 1.5px at 44% 62%,#ffd27a,transparent),radial-gradient(2px 2px at 90% 72%,#ffe39a,transparent),
  radial-gradient(1.5px 1.5px at 24% 84%,#ffd27a,transparent),radial-gradient(1.5px 1.5px at 62% 34%,#fff,transparent);
  animation:bbTwinkle 6s ease-in-out infinite alternate;opacity:.8}
@keyframes bbTwinkle{from{opacity:.35}to{opacity:.9}}

/* ---------- global surfaces ---------- */
.bb .bg-card{background:var(--bb-card)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.bb .border-white\/5{border-color:var(--bb-line)!important}
.bb .rounded-lg{border-radius:14px}
.bb .bg-background{background:rgba(20,8,29,.75)!important}
.bb input,.bb textarea,.bb select{color-scheme:dark}
.bb .focus-within\:border-accent-500:focus-within{border-color:var(--bb-gold-2)!important}
.bb .text-accent-500{color:var(--bb-gold-2)!important}

/* gold buttons everywhere */
.bb .bg-accent-500{background:linear-gradient(180deg,var(--bb-gold-1) 0%,var(--bb-gold-2) 35%,var(--bb-gold-3) 75%,var(--bb-gold-4) 100%)!important;
  border-color:var(--bb-maroon)!important;color:var(--bb-maroon)!important;
  box-shadow:0 0 0 2px rgba(79,224,216,.55),0 6px 0 rgba(58,13,20,.85),0 10px 24px rgba(255,140,40,.35);
  text-shadow:0 1px 0 rgba(255,255,255,.45);transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.bb .bg-accent-500:hover{filter:brightness(1.07);transform:translateY(-1px)}
.bb .bg-accent-500:active{transform:translateY(2px);box-shadow:0 0 0 2px rgba(79,224,216,.55),0 3px 0 rgba(58,13,20,.85)}
.bb a.bg-accent-500,.bb button.bg-accent-500{font-family:var(--bb-font-display);font-weight:400;letter-spacing:.4px;font-size:1rem}
.bb .bg-accent-500\/10{background:rgba(255,190,60,.14)!important}
.bb .border-accent-500{border-color:var(--bb-gold-2)!important}

/* ---------- header ---------- */
.bb-header-card{overflow:hidden;position:relative;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.bb-header-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,79,154,.18),rgba(255,178,30,.12),rgba(79,224,216,.14));pointer-events:none}
.bb-brand__logo{height:64px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));transition:transform .25s ease}
.bb-brand:hover .bb-brand__logo{transform:rotate(-2deg) scale(1.04)}
@media (min-width:768px){.bb-brand__logo{height:76px}}
.bb header .text-xl,.bb header .md\:text-3xl{font-family:var(--bb-font-display);font-weight:400;color:var(--bb-gold-2)}
.bb header nav a,.bb header nav button{font-weight:700}

/* ---------- hero ---------- */
.bb-hero-wrap{padding-top:1.25rem}
.bb-hero{position:relative;border-radius:26px;overflow:hidden;display:flex;flex-direction:column;background:rgba(30,12,42,.92);
  border:2px solid rgba(79,224,216,.55);box-shadow:0 0 0 6px rgba(58,13,20,.55),0 30px 70px rgba(0,0,0,.5)}
.bb-hero__media{position:relative;aspect-ratio:2.5/1;overflow:hidden}
.bb-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 6s ease}
.bb-hero:hover .bb-hero__bg{transform:scale(1.04)}
.bb-hero__shade{position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(0deg,rgba(30,12,42,1) 0%,rgba(30,12,42,0) 100%)}
.bb-hero__content{position:relative;margin-top:-3.5rem;padding:0 1.5rem 1.75rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.bb-chip{display:inline-flex;gap:.5rem;align-items:center;padding:.35rem .9rem;border-radius:999px;background:rgba(58,13,20,.85);
  border:1.5px solid var(--bb-teal);color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.bb-chip i{color:var(--bb-gold-2)}
.bb-hero__title{margin:.7rem 0 .35rem;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.04;color:#fff;
  text-shadow:0 3px 0 var(--bb-maroon),0 0 18px rgba(255,170,60,.35)}
.bb-hero__title em{font-style:normal;color:var(--bb-gold-2)}
.bb-hero__sub{color:rgba(255,255,255,.82);font-size:1.05rem;font-weight:600;max-width:620px}
.bb-hero__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:1.3rem}
@media (max-width:640px){.bb-hero__media{aspect-ratio:16/9}.bb-hero__content{margin-top:-1.5rem}}

.bb-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.5rem;border-radius:14px;font-family:var(--bb-font-display);
  font-size:1.1rem;letter-spacing:.4px;transition:transform .15s ease,filter .15s ease}
.bb-btn--gold{background:linear-gradient(180deg,var(--bb-gold-1),var(--bb-gold-2) 35%,var(--bb-gold-3) 75%,var(--bb-gold-4));color:var(--bb-maroon);
  box-shadow:0 0 0 2px var(--bb-teal),0 0 0 4px var(--bb-maroon),0 7px 0 4px rgba(58,13,20,.9),0 14px 30px rgba(255,140,40,.4);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.bb-btn--ghost{background:rgba(88,101,242,.92);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25),0 6px 0 rgba(30,20,90,.9)}
.bb-btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.bb-btn:active{transform:translateY(2px)}

/* trust bar */
.bb-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}
@media (min-width:1024px){.bb-trust{grid-template-columns:repeat(4,minmax(0,1fr))}}
.bb-trust__item{display:flex;gap:.8rem;align-items:center;padding:1rem;border-radius:var(--bb-radius);background:var(--bb-card);border:1px solid var(--bb-line);backdrop-filter:blur(12px)}
.bb-trust__item b{display:block;font-family:var(--bb-font-display);font-weight:400;font-size:1.1rem}
.bb-trust__item small{color:rgba(255,255,255,.65);font-weight:600}
.bb-trust__icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:var(--bb-maroon);
  background:linear-gradient(180deg,var(--bb-gold-1),var(--bb-gold-3));box-shadow:0 0 0 2px var(--bb-teal),0 4px 0 var(--bb-maroon)}

/* steps */
.bb-section-title,.bb .component h2.border-l-4{display:flex;align-items:center;gap:.8rem;border:0!important;padding:0!important;
  font-family:var(--bb-font-display);font-weight:400;font-size:1.9rem;color:#fff;margin:2.2rem 0 1rem}
.bb .component h2.border-l-4::before,.bb-section-title::before{content:"";width:14px;height:14px;transform:rotate(45deg);border-radius:3px;
  background:linear-gradient(180deg,var(--bb-gold-1),var(--bb-gold-3));box-shadow:0 0 0 2px var(--bb-teal)}
.bb-steps__grid{display:grid;gap:.9rem}
@media (min-width:768px){.bb-steps__grid{grid-template-columns:repeat(3,1fr)}}
.bb-step{position:relative;padding:1.4rem 1.3rem 1.3rem 4.4rem;border-radius:var(--bb-radius);background:var(--bb-card);border:1px solid var(--bb-line)}
.bb-step b{font-family:var(--bb-font-display);font-weight:400;font-size:1.2rem}
.bb-step p{color:rgba(255,255,255,.7);font-size:.92rem;font-weight:600;margin-top:.2rem}
.bb-step__n{position:absolute;left:1.1rem;top:1.25rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:12px;
  font-family:var(--bb-font-display);font-size:1.3rem;color:var(--bb-maroon);background:linear-gradient(180deg,var(--bb-gold-1),var(--bb-gold-3));
  box-shadow:0 0 0 2px var(--bb-teal),0 4px 0 var(--bb-maroon)}

/* ---------- product cards ---------- */
.bb-card{border-radius:22px;padding:2px;background:linear-gradient(160deg,rgba(79,224,216,.55),rgba(255,178,30,.35) 45%,rgba(255,79,154,.45));
  transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.bb-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 0 3px rgba(255,207,63,.55)}
.bb-card__inner{border-radius:20px;overflow:hidden;background:rgba(30,12,42,.92);display:flex;flex-direction:column}
.bb-card__media{aspect-ratio:var(--product-card-image-aspect-ratio)}
.bb-card__img{display:block;height:100%;transition:transform .35s ease}
.bb-card:hover .bb-card__img{transform:scale(1.05)}
.bb-card__body{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.bb-card__title{font-family:var(--bb-font-display);font-weight:400;font-size:1.45rem;line-height:1.1;color:#fff}
.bb-card__stock{font-size:.82rem;font-weight:700;color:rgba(255,255,255,.55)}
.bb-card__foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;padding-top:.6rem}
.bb-card__price{display:flex;align-items:baseline;gap:.4rem}
.bb-card__from{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55)}
.bb-card__amount{font-family:var(--bb-font-display);font-size:1.55rem;color:var(--bb-gold-2);text-shadow:0 2px 0 var(--bb-maroon)}
.bb-card__cta{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .95rem;border-radius:12px;font-family:var(--bb-font-display);font-size:.95rem;
  color:var(--bb-maroon);background:linear-gradient(180deg,var(--bb-gold-1),var(--bb-gold-3));box-shadow:0 0 0 2px var(--bb-teal),0 4px 0 var(--bb-maroon);
  transition:transform .15s ease}
.bb-card:hover .bb-card__cta{transform:translateX(3px)}

/* ---------- product page ---------- */
.bb [data-component-id="product-page"] h1{font-size:2rem;color:#fff}
.bb [data-component-id="product-page"] .splide,.bb [data-component-id="product-page"] .aspect-product-page-image{overflow:hidden}
.bb .prose,.bb [data-component-id="product-page"] p{line-height:1.65}
.bb .choices__inner,.bb select{border-radius:12px!important}

/* footer */
.bb footer{background:var(--bb-card)!important;backdrop-filter:blur(12px);margin-top:3rem}
.bb footer img{max-height:56px!important}

/* scrollbar */
.bb ::-webkit-scrollbar{width:10px;height:10px}
.bb ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--bb-gold-2),var(--bb-gold-4));border-radius:10px;border:2px solid var(--bb-plum)}
.bb ::-webkit-scrollbar-track{background:var(--bb-plum)}

@media (max-width:640px){
  .bb-trust{grid-template-columns:1fr}
  .bb-hero__bg{object-position:30% center}
  .bb-brand__logo{height:58px}
}

/* ---------- range picker (From -> To) ---------- */
.bb-range{display:flex;flex-direction:column;gap:.9rem}
.bb-range__row{display:flex;align-items:flex-end;gap:.75rem}
.bb-range__field{flex:1;display:flex;flex-direction:column;gap:.35rem}
.bb-range__label{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bb-range__select{width:100%;padding:.8rem 1rem;border-radius:14px;background:rgba(20,8,29,.8);color:#fff;font-family:var(--bb-font-display);font-size:1.15rem;
  border:2px solid rgba(79,224,216,.45);outline:none;cursor:pointer}
.bb-range__select:focus{border-color:var(--bb-gold-2)}
.bb-range__select option{background:#1e0c2a;color:#fff}
.bb-range__arrow{flex:none;display:grid;place-items:center;width:44px;height:48px;color:var(--bb-maroon);border-radius:12px;
  background:linear-gradient(180deg,var(--bb-gold-1),var(--bb-gold-3));box-shadow:0 0 0 2px var(--bb-teal),0 4px 0 var(--bb-maroon)}
.bb-range__total{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;border-radius:14px;background:rgba(255,190,60,.1);border:1px solid rgba(255,190,60,.3)}
.bb-range__total span{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:rgba(255,255,255,.7)}
.bb-range__total b{font-family:var(--bb-font-display);font-weight:400;font-size:1.8rem;color:var(--bb-gold-2);text-shadow:0 2px 0 var(--bb-maroon)}