/* ===== premium button system =====
   One language for every control, after the Built-by pill:
   primary: charcoal pill with an orange disc holding the icon
   orange:  full-width gradient pill for cart and checkout
   ghost:   frosted outline pill
   round:   frosted glass circles (arrows), orange gradient discs (add, go)
   Each lifts on hover, has a light sweep, presses in on tap and shows an orange focus ring. */
:root{--pbtn-shadow:0 10px 26px -10px rgba(0,0,0,.45);--pbtn-glow:0 16px 34px -10px rgba(255,116,38,.6);--og:linear-gradient(#ff8c50,#ff6a1c)}

.btn-line,.btn-dark,.btn-orange,.btn-ghost,.credit{position:relative;overflow:hidden;isolation:isolate;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:transform .5s var(--ease),background .4s var(--ease),color .3s,box-shadow .4s var(--ease),border-color .3s}
.btn-line::after,.btn-dark::after,.btn-orange::after,.btn-ghost::after,.credit::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%);transform:translateX(-130%);transition:transform .9s var(--ease)}
@media (hover:hover){
  .btn-line:hover::after,.btn-dark:hover::after,.btn-orange:hover::after,.btn-ghost:hover::after,.credit:hover::after{transform:translateX(130%)}
  .btn-line:hover,.btn-dark:hover,.btn-orange:hover,.credit:hover{transform:translateY(-3px)}
}
.btn-line:active,.btn-dark:active,.btn-orange:active,.btn-ghost:active,.credit:active{transform:scale(.965);transition-duration:.12s}
.btn-line:focus-visible,.btn-dark:focus-visible,.btn-orange:focus-visible,.btn-ghost:focus-visible,.circ-btn:focus-visible,.circ:focus-visible,.credit:focus-visible,.pills button:focus-visible,.views button:focus-visible,.details:focus-visible,.up:focus-visible,.cart:focus-visible{outline:2px solid #fff;outline-offset:3px;box-shadow:0 0 0 5px var(--orange)}

/* primary: charcoal pill + orange icon disc */
.btn-line,.btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:14px;border:0;border-radius:99px;background:#2e2e2e;color:#fff;font-weight:600;letter-spacing:-.01em;line-height:1;box-shadow:var(--pbtn-shadow),inset 0 1px 1px rgba(255,255,255,.18)}
.btn-line{height:48px;padding:0 6px 0 22px;font-size:14px}
.btn-dark{height:62px;padding:0 8px 0 30px;font-size:16px}
.btn-line span,.btn-dark span{display:grid;place-items:center;flex:none;border-radius:50%;background:var(--og);color:#fff;font-weight:500;line-height:1;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 4px 10px rgba(255,116,38,.45);transition:transform .5s var(--ease),background .3s,color .3s}
.btn-line span{width:36px;height:36px;font-size:20px}
.btn-dark span{width:46px;height:46px;font-size:20px}
@media (hover:hover){
  .btn-line:hover,.btn-dark:hover{background:var(--orange);box-shadow:var(--pbtn-glow),inset 0 1px 1px rgba(255,255,255,.4)}
  .btn-line:hover span,.btn-dark:hover span{background:#fff;color:var(--orange);transform:rotate(90deg)}
  .btn-dark:hover span{transform:translateX(3px)}
}
.hero .btn-line{border:0;background:#2e2e2e;color:#fff}
@media (hover:hover){.hero .btn-line:hover{background:#fff;color:#2e2e2e}.hero .btn-line:hover span{background:var(--orange);color:#fff}}

/* the catalog glass card: same charcoal pill so it reads on frosted glass */
.carousel .car-info .btn-line{background:#2e2e2e;color:#fff;border:0;box-shadow:var(--pbtn-shadow),inset 0 1px 1px rgba(255,255,255,.18)}
@media (hover:hover){.carousel .car-info .btn-line:hover{background:var(--orange);color:#fff;box-shadow:var(--pbtn-glow),inset 0 1px 1px rgba(255,255,255,.4)}}

/* cart and checkout: full-width orange gradient pill */
.btn-orange{display:flex;align-items:center;justify-content:center;width:100%;height:58px;border:0;border-radius:99px;background:var(--og);color:#fff;font-size:13px;font-weight:700;letter-spacing:.09em;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.6),inset 0 -3px 5px rgba(150,50,0,.22),var(--pbtn-glow)}
@media (hover:hover){.btn-orange:hover{background:linear-gradient(#ff9a63,#ff7426);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.7),inset 0 -3px 5px rgba(150,50,0,.22),0 20px 40px -10px rgba(255,116,38,.75)}}
.btn-ghost{display:flex;align-items:center;justify-content:center;width:100%;height:50px;border-radius:99px;border:1px solid rgba(52,52,52,.22);background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.4));color:#555;font-size:11.5px;font-weight:700;letter-spacing:.1em;box-shadow:inset 0 1px 1px #fff,0 4px 12px -6px rgba(0,0,0,.2)}
@media (hover:hover){.btn-ghost:hover{border-color:#2e2e2e;background:#2e2e2e;color:#fff}}

/* round controls */
.circ-btn{width:52px;height:52px;border:0;background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.3));color:var(--charcoal);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(0,0,0,.05),0 10px 24px -8px rgba(0,0,0,.28);
  transition:transform .5s var(--ease),background .35s,color .3s,box-shadow .35s}
.circ-btn:active{transform:scale(.92);transition-duration:.12s}
.circ-btn.on-dark{background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.06));color:#fff;box-shadow:inset 0 1.5px 1px rgba(255,255,255,.45),0 10px 24px -8px rgba(0,0,0,.6)}
@media (hover:hover){
  .circ-btn:hover{background:var(--og);color:#fff;transform:translateY(-3px) scale(1.06);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.6),var(--pbtn-glow)}
}
.circ{background:var(--og);color:#fff;box-shadow:inset 0 1.5px 1px rgba(255,255,255,.6),inset 0 -2px 3px rgba(150,50,0,.2),0 6px 14px -4px rgba(255,116,38,.6);transition:transform .5s var(--ease),box-shadow .35s}
button.circ{cursor:pointer;width:38px;height:38px;font-size:20px}
.circ:active{transform:scale(.9);transition-duration:.12s}
@media (hover:hover){.circ:hover{transform:rotate(90deg) scale(1.1);box-shadow:inset 0 1.5px 1px rgba(255,255,255,.7),var(--pbtn-glow)}
  a.circ:hover,.support:hover .circ,.ftile:hover .circ{transform:rotate(45deg) scale(1.1)}}

/* hero Details: frosted pill with a dark disc */
.details{gap:14px;padding:6px 6px 6px 20px;border-radius:99px;background:linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.14));
  -webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);font-weight:600;
  box-shadow:inset 0 1.5px 1px rgba(255,255,255,.75),0 12px 26px -10px rgba(0,0,0,.3);transition:transform .5s var(--ease),box-shadow .4s,background .4s}
.details b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#2e2e2e;color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.2);transition:transform .5s var(--ease),background .3s}
.details svg{width:15px;height:15px}
@media (hover:hover){.details:hover{transform:translateY(-3px);background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.3))}.details:hover b{background:var(--orange);transform:rotate(45deg)}}
.details:active{transform:scale(.96)}

/* filters and view switchers */
.pills button,.views button{cursor:pointer;transition:transform .4s var(--ease),background .3s,color .3s,box-shadow .3s}
.pills button{height:38px;padding:0 20px;border-radius:99px;border:0;background:linear-gradient(rgba(255,255,255,.95),rgba(236,236,236,.8));color:#555;font-size:13px;font-weight:600;box-shadow:inset 0 1px 1px #fff,0 2px 8px rgba(0,0,0,.1)}
.pills button.on{background:var(--og);color:#fff;box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 3px rgba(150,50,0,.22),0 8px 18px -6px rgba(255,116,38,.6)}
@media (hover:hover){.pills button:not(.on):hover,.views button:not(.on):hover{transform:translateY(-2px);color:var(--orange)}}
.pills button:active,.views button:active{transform:scale(.94)}
.views button{height:34px;padding:0 16px;font-size:12.5px;font-weight:600}

/* FAQ rows: the plus becomes a small orange disc */
.acc-i>button>i{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:rgba(255,116,38,.12);color:var(--orange);font-style:normal;transition:transform .5s var(--ease),background .3s,color .3s}
.acc-i>button:hover>i,.acc-i.open>button>i{background:var(--og);color:#fff}

/* header cart and back to top */
.top .cart{display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 16px;border-radius:99px;font-weight:600;
  background:linear-gradient(rgba(255,255,255,.28),rgba(255,255,255,.08));border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .5s var(--ease),background .3s,color .3s,border-color .3s}
@media (hover:hover){.top .cart:hover{transform:translateY(-2px);background:var(--orange);border-color:var(--orange);color:#fff}}
.top .cart:active{transform:scale(.95)}
.up{width:46px;height:46px;border:0;background:#2e2e2e;color:#fff;box-shadow:var(--pbtn-shadow),inset 0 1px 1px rgba(255,255,255,.2);cursor:pointer}
@media (hover:hover){.up:hover{background:var(--orange);transform:translateY(-4px);box-shadow:var(--pbtn-glow)}}
.up:active{transform:scale(.92)}

@media (max-width:760px){
  .btn-dark{height:60px;font-size:15.5px}
  .top .cart{height:34px;padding:0 12px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.btn-line::after,.btn-dark::after,.btn-orange::after,.btn-ghost::after,.credit::after{display:none}}