/* ===== catalog product card: liquid-glass slab =====
   A deeply rounded, curved pane: frosted + saturated backdrop, a bright specular rim that thins toward the lower
   right, an inner glow, a soft sheen across the top and a layered shadow so it floats above the 3D machine. */
.carousel .car-info{
  --r:30px;
  position:absolute;isolation:isolate;overflow:hidden;
  border-radius:var(--r);border:0;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 46%,rgba(255,255,255,0) 70%),
    linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.10) 55%,rgba(255,255,255,.22));
  -webkit-backdrop-filter:blur(22px) saturate(1.9) brightness(1.06);backdrop-filter:blur(22px) saturate(1.9) brightness(1.06);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.95),
    inset 0 -1.5px 1px rgba(255,255,255,.28),
    inset 1.5px 0 1px rgba(255,255,255,.5),
    inset -1.5px 0 1px rgba(255,255,255,.18),
    inset 0 0 28px rgba(255,255,255,.28),
    0 1px 2px rgba(0,0,0,.08),
    0 14px 30px -6px rgba(0,0,0,.16),
    0 40px 80px -20px rgba(0,0,0,.22);
}
/* curved rim: a 1.5px ring that is bright at the top-left and fades around the curve */
.carousel .car-info::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:-1;
  background:conic-gradient(from 210deg at 50% 50%,rgba(255,255,255,.95),rgba(255,255,255,.18) 22%,rgba(255,255,255,.55) 38%,rgba(255,255,255,.12) 62%,rgba(255,255,255,.7) 86%,rgba(255,255,255,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* lens sheen: a soft diagonal highlight sweeping the upper half */
.carousel .car-info::after{
  content:"";position:absolute;left:-20%;right:-20%;top:-35%;height:70%;pointer-events:none;z-index:-1;
  background:linear-gradient(172deg,rgba(255,255,255,.55),rgba(255,255,255,0) 62%);
  transform:rotate(-8deg);border-radius:50%;filter:blur(2px);opacity:.7;
}
.carousel .car-info h3{text-shadow:0 1px 0 rgba(255,255,255,.55)}

/* controls inside the slab are small glass pills of their own */
.carousel .car-info .views button{
  background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.18));border:0;color:var(--charcoal);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(0,0,0,.05),0 2px 6px rgba(0,0,0,.10);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.carousel .car-info .views button:hover{color:var(--orange)}
.carousel .car-info .views button.on{background:linear-gradient(#ff8a4a,#ff6a1c);color:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 3px rgba(150,50,0,.25),0 4px 12px rgba(255,116,38,.4)}
.carousel .car-info .btn-line{
  background:linear-gradient(#ff8a4a,#ff6a1c);border:0;color:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 3px rgba(150,50,0,.25),0 6px 16px rgba(255,116,38,.38)}
.carousel .car-info .btn-line:hover{background:linear-gradient(#ff9a60,#ff7426);color:#fff}
.carousel .car-info .ci-spec{border-top-color:rgba(255,255,255,.55)}
.carousel .car-info .ci-spec li{border-bottom-color:rgba(255,255,255,.45)}
.carousel .car-info .lab{color:rgba(52,52,52,.7)}

/* the arrow buttons and dots under the card match */
.carousel .car-ctl .circ-btn{
  border:0;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.2));
  -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(255,255,255,.3),0 8px 22px -4px rgba(0,0,0,.2)}
.carousel .car-ctl .circ-btn:hover{background:linear-gradient(#ff8a4a,#ff6a1c);color:#fff}

@media (max-width:700px){
  .carousel .car-info{--r:26px;background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.7) 0%,rgba(255,255,255,.18) 46%,rgba(255,255,255,0) 72%),
    linear-gradient(160deg,rgba(255,255,255,.4),rgba(255,255,255,.14) 55%,rgba(255,255,255,.28))}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .carousel .car-info{background:rgba(226,226,226,.95)}
}

/* phones and tablets-in-portrait: the slab spans the screen width so nothing inside is clipped by its rounded edge */
@media (max-width:900px){
  .carousel .car-info{left:var(--pad);right:var(--pad);width:auto;max-width:none}
  .carousel .car-info .ci-row{flex-wrap:wrap;gap:10px}
}