/* ============================================
   CARTOUCHES — borne bonus centrale + rack de mini-jeux
   Utilisé par Liste_defis_plus.php.
   Chaque mini-jeu est une cartouche (visuel 3D repris de la maquette
   tools/Borne arcade.html, recoloré sur la palette du site) que l'on
   insère dans une borne centrale unique pour voir son détail et jouer.
   Palette : --color-bg-dark / --color-yellow-vif / --color-purple-vif
   (définies dans Style_global.css).
   ============================================ */

.cs-intro {
    text-align: center;
    color: rgba(243, 247, 250, .72);
    font-size: 1.05rem;
    margin: 0 0 10px;
}

.cs-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: 20px auto 50px;
}

/* ---------- borne centrale : réutilise le composant bcab (Style_boutique_bornes.css),
   identique aux bornes de Liste_defis.php. Seul ajout : plusieurs contenus d'écran
   empilés dans le même .bcab-screen, un par cartouche, basculés au clic.
   La borne est agrandie et son écran a une hauteur FIXE (pas min-height) :
   sans ça, la borne changeait de taille selon la cartouche affichée (une
   cartouche possédée a moins de lignes qu'une cartouche à débloquer). ---------- */
/* width FIXE (pas max-width) : .bcab est un enfant flex de .cs-floor sans
   largeur propre, donc sans ça il se redimensionnait pour s'ajuster au
   contenu de chaque cartouche (titre, bouton... de longueurs différentes). */
.cs-floor .bcab { width: 460px; max-width: 100%; flex: none; }
.cs-floor .bcab-screen { height: 480px; }

.bcab-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bcab-content[hidden] { display: none; }

/* Insertion d'une cartouche : un bandeau horizontal s'ouvre du centre
   vers le haut et le bas pour révéler le nouvel écran. */
.bcab-content:not([hidden]) { animation: bcabCartridgeIn .42s cubic-bezier(.2, .8, .3, 1); }

@keyframes bcabCartridgeIn {
    0% { clip-path: inset(50% 0 50% 0); opacity: 0; }
    55% { opacity: 1; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bcab-content:not([hidden]) { animation: none; }
}

/* ---------- compteur de collection ---------- */
.cs-meter { width: 100%; max-width: 420px; }
.cs-meter-row { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .06em; color: rgba(243, 247, 250, .75); margin-bottom: 6px; text-transform: uppercase; }
.cs-meter-row .cs-meter-val { color: var(--color-yellow-vif); font-weight: 600; }
.cs-meter-bar { width: 100%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; border: 1px solid rgba(139, 92, 246, .3); }
.cs-meter-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4c2fa8, var(--color-yellow-vif)); box-shadow: 0 0 8px rgba(255, 201, 71, .6); }

/* ---------- disposition : cartouches de part et d'autre de la borne ---------- */
.cs-floor {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.cs-side {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 200px;
    flex: none;
    perspective: 1100px;
}

.cs-side-left { perspective-origin: 100% 50%; }
.cs-side-right { perspective-origin: 0% 50%; }

/* Étagère autonome : grille de cartouches sans borne centrale (boutique,
   accueil). Contrairement à .cs-side (colonne fixe flanquant une borne),
   c'est une grille responsive classique. */
.cs-shelf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 40px 36px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 20px 10px 10px;
    perspective: 1100px;
    perspective-origin: 50% 20%;
}

/* ---------- cartouches (visuel 3D) ---------- */
.cs-cart {
    all: unset;
    cursor: pointer;
    position: relative;
    display: block;
    aspect-ratio: 3/4;
    transform-style: preserve-3d;
    transition: transform .3s cubic-bezier(.2, .8, .3, 1);
    transform: rotateY(26deg) rotateX(2deg);
}
.cs-cart:focus-visible { outline: 3px solid var(--color-yellow-vif); outline-offset: 6px; }
.cs-cart:hover, .cs-cart:focus-visible { transform: rotateY(14deg) rotateX(2deg) translateY(-8px) scale(1.03); }
.cs-cart[aria-pressed="true"] { transform: rotateY(8deg) rotateX(1deg) translateY(-10px) scale(1.05); }
.cs-cart[aria-pressed="true"] .cs-face {
    box-shadow: inset 0 0 0 1.5px #050710, inset 0 0 0 3px var(--color-yellow-vif),
        18px 22px 26px -10px rgba(0, 0, 0, .8), 0 0 26px rgba(255, 201, 71, .6);
}
.cs-cart--dev { filter: grayscale(.55) brightness(.8); }

.cs-spine {
    position: absolute;
    left: 0;
    top: 0;
    height: 95%;
    width: 17%;
    transform-origin: left center;
    transform: rotateY(90deg);
    background: var(--c, #8B5CF6);
    filter: brightness(.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 9px;
    overflow: hidden;
    border-radius: 3px 0 0 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.cs-sp-no {
    width: 78%;
    aspect-ratio: 1;
    max-width: 28px;
    border: 1.5px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'PoliceEcriture', Arial, sans-serif;
    font-size: 11px;
    color: #fff;
    flex: none;
}
.cs-sp-title {
    writing-mode: vertical-rl;
    rotate: 180deg;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: .05em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 58%;
}
.cs-sp-mark { font-family: 'PoliceEcriture', Arial, sans-serif; font-size: 9px; color: #fff; opacity: .9; flex: none; }

.cs-face {
    position: absolute;
    inset: 0;
    background: var(--c, #8B5CF6);
    border-radius: 2px 4px 4px 2px;
    display: flex;
    flex-direction: column;
    padding: 8px 8px 9px;
    gap: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1.5px #050710, inset 0 0 0 3px rgba(255, 255, 255, .1), 18px 22px 26px -10px rgba(0, 0, 0, .8);
}
.cs-face::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(104deg, rgba(255, 255, 255, .3) 0 8%, rgba(255, 255, 255, .07) 15%, transparent 30%);
}
.cs-f-brand { font-family: 'PoliceEcriture', Arial, sans-serif; font-size: clamp(11px, 3.2vw, 14px); color: #fff; text-align: center; letter-spacing: .03em; line-height: 1; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.cs-f-strip { display: flex; justify-content: center; align-items: center; gap: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .04em; color: #fff; }
.cs-f-strip .cs-ico { width: 12px; height: 9px; border: 1px solid #fff; border-radius: 1px; position: relative; flex: none; }
.cs-f-strip .cs-ico::after { content: ""; position: absolute; left: 2px; top: 1.5px; width: 4px; height: 4px; border: 1px solid #fff; border-radius: 50%; }

.cs-c-art { position: relative; flex: 1; min-height: 0; border-radius: 2px; overflow: hidden; background: var(--bg, #050710); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.cs-c-art::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%; z-index: 1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .88), rgba(0, 0, 0, .7) 55%, transparent); }
.cs-c-art.cs-dev { filter: grayscale(.55) brightness(.6); }

/* ---------- illustration par thème (une par cartouche) ---------- */
.cs-v { position: absolute; inset: 0; }

/* Même illustration, réinsérée dans l'écran de la borne à la sélection
   d'une cartouche (Liste_defis_plus.php) : petite animation d'insertion,
   rejouée à chaque fois grâce à .bcab-content[hidden]{display:none} qui
   réinitialise l'animation quand l'écran redevient visible. */
.bcab-art-v {
    animation: csArtInsert .5s cubic-bezier(.2, .8, .3, 1) .12s both;
}

@keyframes csArtInsert {
    0% { opacity: 0; transform: scale(.7) rotate(-3deg); }
    65% { opacity: 1; transform: scale(1.05) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .bcab-art-v { animation: none; }
}

/* 01 · Mini Énigmes — casse-tête : pièces imbriquées */
.cs-v1 { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 2px; padding: 16% 12% 10%; }
.cs-v1 i { border-radius: 2px; background: rgba(255, 255, 255, .14); }
.cs-v1 i:nth-child(1) { grid-area: 1/1/3/2; background: #ffcc00; }
.cs-v1 i:nth-child(2) { grid-area: 1/2/2/4; background: #00ffde; }
.cs-v1 i:nth-child(3) { grid-area: 2/3/4/5; background: #ffb8de; }
.cs-v1 i:nth-child(4) { grid-area: 3/1/5/3; background: #ffb851; }
.cs-v1 i:nth-child(5) { grid-area: 4/3/5/4; background: #fff; }

/* 02 · Enquêtes Express — mur d'indices : fil rouge + fiches */
.cs-v2::before { content: ""; position: absolute; left: 8%; right: 8%; top: 52%; height: 2px; background: #e8141e; rotate: -7deg; box-shadow: 0 22px 0 -1px #e8141e; }
.cs-v2 i { position: absolute; width: 22%; aspect-ratio: 3/4; background: #f4f1e8; box-shadow: 0 3px 6px rgba(0, 0, 0, .5); }
.cs-v2 i:nth-child(1) { left: 12%; top: 40%; rotate: -8deg; }
.cs-v2 i:nth-child(2) { left: 39%; top: 46%; rotate: 5deg; }
.cs-v2 i:nth-child(3) { left: 66%; top: 40%; rotate: -4deg; }
.cs-v2 i::after { content: ""; position: absolute; left: 50%; top: -5px; translate: -50% 0; width: 7px; height: 7px; border-radius: 50%; background: #e8141e; }

/* 03 · Mini Escape — porte entrouverte */
.cs-v3 { display: grid; place-items: center; }
.cs-v3::before { content: ""; width: 46%; height: 56%; margin-top: 14%; background: linear-gradient(100deg, #ffcc00, #fff6c9); clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%); box-shadow: 0 0 40px rgba(255, 204, 0, .55); }
.cs-v3 i { position: absolute; width: 52%; height: 62%; margin-top: 12%; border: 3px solid #00ffde; border-right: 0; border-radius: 6px 0 0 6px; left: 8%; top: 14%; }

/* 04 · Escape Shot — verre sur damier */
.cs-v4 { display: grid; place-items: end center; padding-bottom: 12%; }
.cs-v4::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: repeating-conic-gradient(#0a0a2a 0 25%, #fff 0 50%) 0 0/22px 22px; opacity: .75; }
.cs-v4 i { position: relative; width: 30%; height: 44%; background: linear-gradient(100deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .18)); clip-path: polygon(8% 0, 92% 0, 74% 100%, 26% 100%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.cs-v4 i::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 0; height: 48%; background: #ffb851; clip-path: polygon(0 0, 100% 0, 76% 100%, 24% 100%); }

/* 05 · Énigmes Évolutives — série qui se tisse */
.cs-v5 { display: grid; place-items: center; }
.cs-v5 i { position: absolute; border: 3px solid #00ffde; border-radius: 50%; aspect-ratio: 1; }
.cs-v5 i:nth-child(1) { width: 16%; left: 12%; top: 52%; }
.cs-v5 i:nth-child(2) { width: 24%; left: 28%; top: 44%; border-color: #ffcc00; }
.cs-v5 i:nth-child(3) { width: 32%; left: 48%; top: 36%; border-color: #ffb8de; }
.cs-v5::after { content: ""; position: absolute; left: 14%; right: 14%; top: 58%; height: 2px; background: linear-gradient(90deg, #00ffde, #ffcc00, #ffb8de); }

/* 06 · Mini-Jeux Communautaires — coffre à cadran */
.cs-v6 { display: grid; place-items: center; }
.cs-v6::before { content: ""; width: 62%; height: 34%; margin-top: 34%; background: #ffcc00; border-radius: 3px; box-shadow: inset 0 0 0 3px #3d2d00; }
.cs-v6::after { content: ""; position: absolute; left: 19%; width: 62%; height: 20%; top: 38%; background: #ffcc00; border-radius: 10px 10px 0 0; box-shadow: inset 0 0 0 3px #3d2d00; }
.cs-v6 i { position: absolute; top: 50%; width: 20%; aspect-ratio: 1; background: #0a0a2a; border: 3px solid #3d2d00; border-radius: 50%; z-index: 2; }
.cs-v6 i::before { content: ""; position: absolute; inset: 26%; border-radius: 50%; border: 2px solid #ffcc00; }
.cs-v6 i::after { content: ""; position: absolute; left: 50%; top: 14%; translate: -50% 0; width: 3px; height: 36%; background: #ffcc00; border-radius: 2px; }

/* 07 · Mini-Jeux à Contrainte — bouche barrée */
.cs-v7 { display: grid; place-items: center; }
.cs-v7::before { content: ""; width: 46%; height: 22%; margin-top: 18%; border: 3px solid #ffb8de; border-radius: 50%/60%; background: rgba(255, 184, 222, .12); }
.cs-v7 i { position: absolute; left: 16%; right: 16%; top: 46%; height: 4px; background: #e8141e; rotate: -24deg; box-shadow: 0 0 12px rgba(232, 20, 30, .8); }

/* 08 · Quiz Narratif — embranchement de crypte */
.cs-v8 { display: grid; place-items: center; }
.cs-v8 i { position: absolute; width: 3px; background: #ffb8de; box-shadow: 0 0 10px rgba(255, 184, 222, .7); }
.cs-v8 i:nth-child(1) { height: 26%; bottom: 10%; left: 50%; translate: -50% 0; }
.cs-v8 i:nth-child(2) { height: 30%; bottom: 33%; left: 32%; rotate: 28deg; }
.cs-v8 i:nth-child(3) { height: 30%; bottom: 33%; left: 68%; rotate: -28deg; }
.cs-v8::after { content: ""; position: absolute; left: 18%; right: 18%; top: 30%; height: 20%; border: 3px solid #ffcc00; border-bottom: 0; border-radius: 50% 50% 0 0; }

.cs-c-head { position: absolute; left: 5%; right: 5%; top: 6%; z-index: 2; display: flex; flex-direction: column; gap: 3px; }
.cs-c-name { font-family: 'PoliceEcriture', Arial, sans-serif; font-size: clamp(10px, 3vw, 13px); line-height: 1.15; color: #fff; text-align: center; text-shadow: 0 2px 3px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .7); }
.cs-c-sub { font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .16em; color: var(--color-yellow-vif); text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .95); }

.cs-c-count { position: absolute; right: 5%; bottom: 5%; z-index: 2; text-align: center; background: rgba(0, 0, 0, .72); border-radius: 3px; padding: 3px 6px 4px; }
.cs-c-count b { display: block; font-family: 'PoliceEcriture', Arial, sans-serif; font-size: clamp(13px, 3.8vw, 17px); line-height: .9; color: #fff; }
.cs-c-count span { font-family: 'IBM Plex Mono', monospace; font-size: 7.5px; letter-spacing: .06em; display: block; color: #fff; }

.cs-seal { position: absolute; left: 50%; bottom: 26%; translate: -50% 0; z-index: 6; font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .14em; background: #050710; border: 1px solid var(--color-yellow-vif); color: var(--color-yellow-vif); padding: 3px 7px; border-radius: 2px; white-space: nowrap; }

.cs-f-foot { display: flex; justify-content: space-between; align-items: center; gap: 5px; font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .03em; color: #fff; }
.cs-f-foot .cs-badge { background: #fff; color: #050710; border-radius: 2px; padding: 1.5px 5px; font-weight: 700; font-size: 8px; white-space: nowrap; }

/* ---------- pack / cartouche multiple (plusieurs mini-jeux réunis) ---------- */
.cs-pack {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    padding-top: 14px;
}

.cs-pack-badge {
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 4;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    letter-spacing: .04em;
    padding: 5px 12px;
    border-radius: 20px;
    color: #050710;
    background: linear-gradient(145deg, #ffe9ad, var(--color-yellow-vif), #c99a2e);
    box-shadow: 0 3px 0 #7a5a12, 0 5px 8px rgba(0, 0, 0, .4);
}

.cs-pack-shadow {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 22px;
    bottom: 0;
    border-radius: 14px 16px 16px 14px;
    background: var(--c, #4c2fa8);
    filter: brightness(.5);
}

.cs-pack-shadow-1 { transform: rotate(-3deg) translateX(-6px); z-index: 1; opacity: .9; }
.cs-pack-shadow-2 { transform: rotate(4deg) translateX(8px); z-index: 0; opacity: .6; }

.cs-pack-face {
    position: relative;
    z-index: 2;
    background: linear-gradient(160deg, #16233f, #0a1120);
    border: 1.5px solid rgba(139, 92, 246, .35);
    border-radius: 14px 16px 16px 14px;
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 18px 22px 30px -16px rgba(0, 0, 0, .8), inset 0 0 0 1.5px #050710;
}

.cs-pack-tag {
    text-align: center;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 9.5px;
    letter-spacing: .16em;
    color: var(--color-purple-vif);
    text-transform: uppercase;
}

.cs-pack-title {
    margin: 0;
    text-align: center;
    font-family: 'PoliceEcriture', Arial, sans-serif;
    font-size: 17px;
    font-weight: normal;
    color: var(--color-yellow-vif);
    letter-spacing: .02em;
    text-shadow: 0 2px 0 #4c2fa8;
}

/* ---------- étagère de tranches (rangée de cartouches, style bibliothèque) ---------- */
.cs-pack-items {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 6px 6px;
}

/* Planche de l'étagère : ombre portée sous les tranches, base commune */
.cs-pack-items::before {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 22px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .5), transparent);
    box-shadow: 0 10px 16px -4px rgba(0, 0, 0, .6);
}

.cs-pack-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 38px;
}

/* Tranche = même habillage que .cs-spine (numéro + titre vertical + marque),
   mais autonome plutôt qu'accolée à une face de cartouche 3D. Au survol,
   elle glisse vers le haut comme un livre qu'on sort de la bibliothèque. */
.cs-pack-spine {
    position: relative;
    width: 100%;
    height: 104px;
    background: var(--c, #8B5CF6);
    border-radius: 4px 4px 2px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 7px 0 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 3px 7px 10px -4px rgba(0, 0, 0, .7);
    transform-origin: 50% 100%;
    transition: transform .32s cubic-bezier(.2, .8, .3, 1), box-shadow .32s ease;
    cursor: default;
}

.cs-pack-item:hover .cs-pack-spine,
.cs-pack-item:focus-visible .cs-pack-spine {
    transform: translateY(-24px) rotate(-3deg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 6px 22px 22px -8px rgba(0, 0, 0, .8);
}

@media (prefers-reduced-motion: reduce) {
    .cs-pack-spine { transition: none; }
}

.cs-pack-sp-no {
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(255, 255, 255, .9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'PoliceEcriture', Arial, sans-serif;
    font-size: 8px;
    color: #fff;
    flex: none;
}

.cs-pack-sp-title {
    writing-mode: vertical-rl;
    rotate: 180deg;
    font-family: Arial, sans-serif;
    font-weight: 700;
    font-size: 7.5px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 70%;
}

.cs-pack-sp-mark {
    font-family: 'PoliceEcriture', Arial, sans-serif;
    font-size: 6.5px;
    color: #fff;
    opacity: .85;
    flex: none;
}

.cs-pack-count { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: rgba(243, 247, 250, .75); }

.cs-pack-brief { margin: 0; text-align: center; font-size: 12px; line-height: 1.55; color: rgba(243, 247, 250, .78); }

.cs-pack-extra { font-size: 11px; color: rgba(243, 247, 250, .7); }
.cs-pack-extra ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cs-pack-extra li.is-soon { color: rgba(243, 247, 250, .4); }

.cs-pack-deck { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.cs-pack-deck .bcab-price { justify-content: center; }
.cs-pack-note { margin: 0; text-align: center; font-size: 10px; color: rgba(243, 247, 250, .6); }

.cs-caption {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    letter-spacing: .1em;
    color: rgba(255, 255, 255, .4);
    text-align: center;
    margin-top: 14px;
    max-width: 620px;
}

@media (prefers-reduced-motion: reduce) {
    .cs-cart { transition: none; }
}

@media (max-width: 900px) {
    .cs-floor { flex-direction: column; }
    .cs-side {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        max-width: 460px;
        perspective-origin: 50% 50%;
    }
    .cs-side .cs-cart { width: 150px; flex: none; }
}

@media (max-width: 480px) {
    .cs-side { gap: 22px; }
}