/* ============================================================
   WADO — componenti condivisi
   ============================================================ */

[hidden] { display: none !important; }

/* ---------- reveal ---------- */
.rv, .tile { opacity: 0; transform: translateY(34px) scale(.98); filter: blur(6px); transition: opacity .9s var(--ease) var(--d, 0ms), transform 1.1s var(--ease) var(--d, 0ms), filter .9s var(--ease) var(--d, 0ms); }
.rv.in, .tile.in { opacity: 1; transform: none; filter: none; }
html:not(.js) .rv, html:not(.js) .tile { opacity: 1; transform: none; filter: none; }

/* ---------- testa di pagina ---------- */
.page-hero { position: relative; padding: clamp(130px, 18vh, 190px) 0 clamp(40px, 6vh, 70px); overflow: hidden; isolation: isolate; }
.page-hero .aurora { opacity: .7; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, transparent 40%, var(--ink)); }
.page-title { margin: 0 0 18px; font: 700 clamp(44px, 8vw, 120px)/.92 var(--f-display); letter-spacing: -.045em; }
.page-title .line { display: block; overflow: hidden; padding-bottom: .05em; }
.page-title .line > span { display: inline-block; }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; font-size: 13px; color: var(--muted); }
.crumbs a:hover { color: var(--ivory); }
.crumbs span[aria-hidden] { opacity: .4; }
.section { padding: clamp(70px, 10vw, 130px) 0; }

/* ---------- pill ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 600 11.5px var(--f-body); letter-spacing: .02em; background: rgba(var(--fg-rgb), .07); box-shadow: inset 0 0 0 1px var(--line); color: var(--ivory); white-space: nowrap; }
.pill-graded { background: rgba(198,151,62,.16); box-shadow: inset 0 0 0 1px rgba(226,189,114,.45); color: var(--gold-l); }
.pill-raw { background: rgba(43,138,108,.16); box-shadow: inset 0 0 0 1px rgba(43,138,108,.5); color: #7fdcb9; }
.pill-sample { background: rgba(141,91,166,.2); color: var(--lilac); }
.pill-out { background: rgba(180,55,74,.2); color: #ff9aa8; box-shadow: inset 0 0 0 1px rgba(255,107,129,.4); }

/* ---------- carta: raw ---------- */
.cv { position: relative; transform-style: preserve-3d; will-change: transform; }
.cv.raw { aspect-ratio: 63 / 88; }
.cface { position: absolute; inset: 0; border-radius: 4.6% / 3.3%; overflow: hidden; transform: translateZ(1px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 28px 50px -24px rgba(0,0,0,.95), 0 8px 16px -8px rgba(0,0,0,.6); }
.cface.has-photo { background: #1b0c25; }
.cface.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.raw-edge { position: absolute; inset: 0; border-radius: 4.6% / 3.3%; transform: translateZ(-4px); background: linear-gradient(135deg, #f6e7c2, #a37a2c); box-shadow: 0 30px 40px -20px rgba(0,0,0,.7); }
.cface.gen { background: linear-gradient(160deg, var(--c1), var(--c2) 75%); padding: 6%; }
.gen-in { position: relative; height: 100%; border-radius: 3%; display: flex; flex-direction: column; padding: 8%; color: #fff;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.25), transparent 55%), linear-gradient(175deg, rgba(0,0,0,.05), rgba(0,0,0,.5)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.gen-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 700 10px var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.gen-top b { padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.92); color: var(--ink); letter-spacing: .04em; font-family: var(--f-display); }
.gen-art { flex: 1; display: grid; place-items: center; }
.gen-art img { width: 62%; filter: drop-shadow(0 10px 18px rgba(0,0,0,.4)); opacity: .95; }
.gen-name { font: 700 clamp(14px, 1.5vw, 19px)/1.12 var(--f-display); letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.gen-code { margin-top: 4px; font-size: 11px; opacity: .8; }

/* foil olografico, glitter e riflesso: seguono il puntatore (--hx/--hy, --gx/--gy) */
.foil-l, .glitter, .cface .glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.foil-l { opacity: 0; mix-blend-mode: color-dodge; transition: opacity .5s var(--ease);
  background: repeating-linear-gradient(110deg, #ff0084 0%, #fca400 7%, #ffff00 14%, #00ff8a 21%, #00cfff 28%, #cc4cfa 35%, #ff0084 42%);
  background-size: 320% 320%; background-position: var(--hx, 50%) var(--hy, 50%); filter: brightness(.55) contrast(1.7) saturate(1.2); }
[data-foil="rainbow"] .foil-l { opacity: .32; }
[data-foil="gold"] .foil-l { opacity: .4; mix-blend-mode: overlay; filter: none;
  background: repeating-linear-gradient(115deg, #fff2bd 0%, #b8862f 8%, #fff8de 16%, #a4772a 24%, #ffe08a 32%); background-size: 300% 300%; }
.glitter { opacity: 0; mix-blend-mode: color-dodge; transition: opacity .5s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -6.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px; background-position: calc(var(--hx, 50%) * -1) var(--hy, 50%); }
[data-foil="rainbow"] .glitter, [data-foil="gold"] .glitter { opacity: .35; }
.cface .glare { mix-blend-mode: overlay; opacity: .55; background: radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 20%), rgba(255,255,255,.9) 0%, rgba(255,255,255,.25) 22%, transparent 52%); }
:is(.tile-stage, [data-tilt]):hover [data-foil="rainbow"] .foil-l { opacity: .62; }
:is(.tile-stage, [data-tilt]):hover [data-foil="gold"] .foil-l { opacity: .65; }
:is(.tile-stage, [data-tilt]):hover [data-foil] .glitter { opacity: .6; }
:is(.tile-stage, [data-tilt]):hover .cface .glare { opacity: .9; }

/* ---------- carta: slab gradata ---------- */
.cv.slab { container-type: inline-size; padding: 5.2% 5.8% 6.6%; border-radius: 6% / 4.2%; display: flex; flex-direction: column; gap: 4.2%;
  background: linear-gradient(160deg, rgba(255,255,255,.36), rgba(214,222,232,.12) 28%, rgba(255,255,255,.05) 55%, rgba(200,210,224,.22));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.78), inset 0 0 0 5px rgba(255,255,255,.07), inset 0 0 0 6px rgba(255,255,255,.22), 0 36px 64px -26px rgba(0,0,0,.95), 0 12px 22px -12px rgba(0,0,0,.7);
}
.slab-back { position: absolute; inset: 0; border-radius: inherit; transform: translateZ(-12px); background: linear-gradient(160deg, rgba(220,228,238,.35), rgba(160,170,184,.25)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.slab-ridge { position: absolute; inset: 2.6%; border-radius: 4.4% / 3%; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 0 0 2.5px rgba(0,0,0,.06); }
.slab-glass { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transform: translateZ(10px);
  background: linear-gradient(118deg, transparent 32%, rgba(255,255,255,.32) 42%, rgba(255,255,255,.06) 48%, transparent 56%); background-size: 260% 100%; background-position: var(--gx, 160%) 0; mix-blend-mode: screen; }
.cv.slab > .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transform: translateZ(11px); mix-blend-mode: overlay; opacity: .6;
  background: radial-gradient(farthest-corner circle at var(--gx, 50%) var(--gy, 15%), rgba(255,255,255,.85) 0%, rgba(255,255,255,.2) 20%, transparent 46%); }
.slab-well { position: relative; aspect-ratio: .735; border-radius: 1.8cqw; transform: translateZ(-3px); transform-style: preserve-3d;
  background: rgba(20,14,26,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), inset 0 2px 16px rgba(0,0,0,.5); }
.slab-card { position: absolute; inset: 3.8% 4.4%; transform-style: preserve-3d; }
.cv.slab[data-co="BGS"] .slab-well { background: #0b0b0e; box-shadow: inset 0 0 0 1.4cqw #18181d, inset 0 0 0 calc(1.4cqw + 1px) rgba(255,255,255,.2); }
.cv.slab[data-co="BGS"] .slab-card { inset: 6.5% 7.5%; }

/* etichette */
.sl { position: relative; z-index: 2; transform: translateZ(5px); display: grid; align-items: center; gap: 1cqw 3cqw; color: #121212; border-radius: 1.6cqw; overflow: hidden;
  font: 700 3.05cqw/1.22 var(--f-body); letter-spacing: .02em; box-shadow: 0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.45); }
.sl span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-mid { display: grid; min-width: 0; }
.sl-name { font-size: 3.6cqw; font-weight: 800; }
.sl .px-code { margin-top: 1.2cqw; height: 2.6cqw; } .sl .px-code i { width: 1.6cqw; height: 2.6cqw; }
/* PSA: cornice rossa, voto a destra */
.sl-psa { grid-template-columns: 1fr auto; padding: 3.4cqw 4cqw 6.6cqw; background: linear-gradient(180deg, #ffffff, #f1f2f4); box-shadow: inset 0 0 0 1.6cqw #d32b2b, inset 0 0 0 2cqw #fff, 0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.45); }
.sl-psa .sl-grade { display: grid; justify-items: end; text-align: right; }
.sl-psa .sl-grade b { font: 800 9cqw/1 var(--f-display); letter-spacing: -.02em; }
.sl-psa .sl-co { position: absolute; left: 50%; bottom: 2.2cqw; transform: translateX(-50%); padding: .3cqw 3cqw; border-radius: .8cqw; font: 900 3.6cqw/1.2 var(--f-display); letter-spacing: .14em; color: #d32b2b;
  background: linear-gradient(180deg, #fff, #e9ecf0); box-shadow: 0 0 0 .4cqw #233a8f; }
.sl-generic { box-shadow: inset 0 0 0 1.6cqw #623476, inset 0 0 0 2cqw #fff, 0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.45); }
.sl-generic .sl-co { color: #623476; box-shadow: 0 0 0 .4cqw #623476; }
/* BGS: etichetta metallica oro / argento / nera, voto a sinistra */
.sl-bgs { grid-template-columns: auto 1fr; padding: 3cqw 4cqw 3cqw 3cqw; --m1: #fff3c4; --m2: #c9a24a; --m3: #8a6a24; color: #2a1c05;
  background: linear-gradient(115deg, var(--m2) 0%, var(--m1) 22%, var(--m2) 45%, var(--m1) 70%, var(--m3) 100%); }
.sl-bgs[data-tier="silver"] { --m1: #ffffff; --m2: #b8c0ca; --m3: #7d8590; color: #15181c; }
.sl-bgs[data-tier="black"] { --m1: #3a3a40; --m2: #101014; --m3: #000; color: #f3d27a; }
.sl-bgs .sl-grade { display: grid; justify-items: center; padding-right: 3cqw; border-right: .5cqw solid rgba(0,0,0,.25); }
.sl-bgs .sl-grade b { font: 800 10cqw/1 var(--f-display); }
.sl-bgs .sl-grade span { font-size: 2.6cqw; letter-spacing: .1em; }
.sl-bgs .sl-co { position: absolute; right: 3cqw; bottom: 2.4cqw; font: 900 3.2cqw var(--f-display); letter-spacing: .2em; opacity: .75; }
/* CGC: logo a sinistra, voto in riquadro a destra; i 10 sono "Pristine" oro */
.sl-cgc { grid-template-columns: auto 1fr auto; padding: 3cqw; background: linear-gradient(180deg, #ffffff, #eef1f5); box-shadow: inset 0 -1.6cqw 0 #1d4f9c, 0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.45); }
.sl-cgc .sl-co { padding: 2.4cqw 2cqw; border-radius: 1cqw; font: 900 4.6cqw/1 var(--f-display); letter-spacing: .04em; color: #fff; background: #1d4f9c; }
.sl-cgc .sl-grade { display: grid; justify-items: center; padding: 1.4cqw 2.4cqw; border-radius: 1cqw; box-shadow: inset 0 0 0 .5cqw #1d4f9c; }
.sl-cgc .sl-grade b { font: 800 8.4cqw/1 var(--f-display); color: #1d4f9c; }
.sl-cgc .sl-grade span { font-size: 2.3cqw; letter-spacing: .08em; }
.sl-cgc.pristine { background: linear-gradient(115deg, #c9a24a, #fff3c4 30%, #d9b45c 60%, #fff3c4 85%); box-shadow: inset 0 -1.6cqw 0 #8a6a24, 0 1.2cqw 2.4cqw -1cqw rgba(0,0,0,.45); }
.sl-cgc.pristine .sl-co { background: #2a1c05; color: #ffe08a; }
.sl-cgc.pristine .sl-grade { box-shadow: inset 0 0 0 .5cqw #2a1c05; } .sl-cgc.pristine .sl-grade b { color: #2a1c05; }
.cv.slab-photo { aspect-ratio: 0.62; }
.cv.slab-photo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.6)); }

/* ---------- tile prodotto ---------- */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 36px 24px; }
.tile { display: flex; flex-direction: column; }
.tile-stage { display: grid; place-items: center; padding: 18px 14px 6px; border-radius: 22px; perspective: 1100px; background: radial-gradient(ellipse at 50% 60%, rgba(141,91,166,.16), transparent 70%); transition: background .5s; }
.tile-stage:hover { background: radial-gradient(ellipse at 50% 60%, rgba(141,91,166,.32), transparent 70%); }
.tile-stage .cv { width: 100%; }
.tile-stage .cv.slab { width: 100%; }
.tile-info { display: grid; gap: 6px; padding: 14px 4px 0; }
.tile-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.tile-info h3 { margin: 2px 0 0; font: 600 16px/1.25 var(--f-display); letter-spacing: -.01em; }
.tile-info h3 a:hover { color: var(--gold-l); }
.tile-sub { margin: 0; font-size: 12.5px; color: var(--muted); }
.tile-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.price { font: 700 19px var(--f-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.price s { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--muted); }
.add-btn { width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--cta-text); background: var(--cta);
  box-shadow: inset 0 0 0 1px rgba(226,189,114,.7), 0 8px 20px -8px rgba(23,76,60,.9); transition: transform .35s var(--ease-back), background .3s; }
.add-btn svg { width: 18px; height: 18px; }
.add-btn:hover { transform: rotate(90deg) scale(1.1); background: var(--cta-hover); }
.tile.skeleton { opacity: 1; filter: none; transform: none; }
.tile.skeleton .sk { aspect-ratio: 63/88; border-radius: 16px; background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.04) 70%); background-size: 200% 100%; animation: chrome 1.6s linear infinite; }
.tile.skeleton .sk-l { height: 14px; margin-top: 16px; border-radius: 6px; background: rgba(255,255,255,.06); width: 70%; }
@media (max-width: 600px) {
  .grid-cards { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .tile-stage { padding: 10px 6px 2px; }
  .tile-info h3 { font-size: 14px; } .price { font-size: 16px; } .add-btn { width: 36px; height: 36px; }
  .tile-meta .pill:nth-child(n+2) { display: none; }
}

.fly-ghost { position: fixed !important; z-index: 300; pointer-events: none; margin: 0; }

/* ---------- form ---------- */
.field { display: grid; gap: 7px; }
.field > span, .field > label { font: 600 12px var(--f-body); letter-spacing: .06em; color: var(--muted); }
.field input, .field select, .field textarea, .input {
  width: 100%; min-height: 50px; padding: 13px 16px; border-radius: 12px; border: 0; background: var(--field-bg); color: var(--ivory); font: 16px var(--f-body);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .14); transition: box-shadow .25s, background .25s; }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--field-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23faf7ef' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; }
.field select option { background: #1b0c25; color: var(--ivory); }
.field input::placeholder, .field textarea::placeholder { color: rgba(var(--fg-rgb), .35); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background-color: var(--field-bg-f); box-shadow: inset 0 0 0 1.5px var(--gold-l), 0 0 0 4px rgba(226,189,114,.15); }
.field input[readonly] { opacity: .7; }
.field .hint { font-size: 12px; color: var(--muted); letter-spacing: 0; font-weight: 400; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--gold-l); }
.check a { color: var(--ivory); text-decoration: underline; text-underline-offset: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span, .chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 0; cursor: pointer; font: 600 14px var(--f-display); color: var(--muted);
  background: rgba(var(--fg-rgb), .05); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .14); transition: background .3s, color .3s, box-shadow .3s, transform .3s var(--ease); }
.chips span:hover, .chip:hover { color: var(--ivory); transform: translateY(-1px); }
.chips input:checked + span, .chip[aria-pressed="true"] { background: var(--ivory); color: var(--ink); box-shadow: 0 8px 24px -10px rgba(255,255,255,.5); }
.chips input:focus-visible + span { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.panel { padding: clamp(22px, 3vw, 36px); border-radius: 26px; background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px var(--line), 0 30px 80px -40px rgba(0,0,0,.8); }
.msg { padding: 12px 16px; border-radius: 12px; font-size: 14px; }
.msg.err { background: rgba(180,55,74,.16); color: #ffb3bf; box-shadow: inset 0 0 0 1px rgba(255,107,129,.35); }
.msg.ok { background: rgba(43,138,108,.16); color: #9fe9cb; box-shadow: inset 0 0 0 1px rgba(43,138,108,.5); }
.hp { position: absolute !important; left: -9999px !important; }
.btn[disabled] { opacity: .6; pointer-events: none; }

/* successo invio form */
.done { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 30px 0; }
.seal { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; color: var(--on-gold); background: var(--chrome); background-size: 200% 100%; animation: chrome 4s linear infinite;
  box-shadow: 0 0 0 10px rgba(255,255,255,.05), 0 20px 60px -10px rgba(255,255,255,.4); }
.seal svg { width: 40px; height: 40px; }
.done h2 { margin: 0; font: 700 clamp(30px, 4vw, 44px) var(--f-display); letter-spacing: -.03em; }
.done p { margin: 0; color: var(--muted); max-width: 46ch; }

/* ---------- carrello ---------- */
.scrim { position: fixed; inset: 0; z-index: 150; background: rgba(var(--bg-rgb), .6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.scrim.open { opacity: 1; visibility: visible; }
.drawer { position: fixed; z-index: 160; top: 10px; right: 10px; bottom: 10px; width: min(440px, calc(100% - 20px)); display: grid; grid-template-rows: auto 1fr auto; border-radius: 26px; overflow: hidden; outline: none;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(var(--bg-rgb), .94); backdrop-filter: blur(24px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), -30px 0 80px -20px rgba(0,0,0,.7);
  transform: translateX(110%); transition: transform .7s var(--ease); }
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 18px 16px 24px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font: 700 22px var(--f-display); letter-spacing: -.02em; }
.drawer-head h2 span { color: var(--muted); font-weight: 500; }
.drawer-items { overflow: auto; padding: 8px 18px; }
.ci { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: start; padding: 16px 6px; border-bottom: 1px solid var(--line); animation: ciIn .6s var(--ease) both; }
@keyframes ciIn { from { opacity: 0; transform: translateX(30px); } }
.ci-thumb { width: 64px; aspect-ratio: 63/88; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 10px 20px -10px rgba(0,0,0,.8); }
.ci-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ci-thumb img.ph { width: 70%; height: auto; }
.ci-body h4 { margin: 0 0 3px; font: 600 15px/1.25 var(--f-display); }
.ci-body p { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.ci-row { display: flex; align-items: center; gap: 14px; }
.qty { display: inline-flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .18); }
.qty button { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--ivory); border-radius: 50%; }
.qty button:hover { background: rgba(var(--fg-rgb), .08); }
.qty span { min-width: 22px; text-align: center; font: 600 14px var(--f-display); }
.ci-rm { border: 0; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ci-rm:hover { color: #ff9aa8; }
.ci-price { font: 700 16px var(--f-display); }
.drawer-foot { display: grid; gap: 14px; padding: 18px 22px 22px; border-top: 1px solid var(--line); background: rgba(0,0,0,.2); }
.ship-meter p { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.ship-meter b { color: var(--ivory); }
.meter { height: 6px; border-radius: 3px; background: rgba(var(--fg-rgb), .08); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--chrome); background-size: 200% 100%; animation: chrome 2.5s linear infinite; transition: width .8s var(--ease); }
.gift-note { padding: 11px 14px; border-radius: 12px; font-size: 13px; text-align: left; color: var(--muted); background: rgba(226,189,114,.08); box-shadow: inset 0 0 0 1px rgba(226,189,114,.3); }
.gift-note b { color: var(--gold-l); letter-spacing: .04em; }
.gift-note.as-btn { border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.totals { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.totals div { display: flex; justify-content: space-between; }
.totals .grand { padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line); font: 700 19px var(--f-display); color: var(--ivory); }
.pay-note { margin: 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.drawer-empty { display: grid; justify-items: center; gap: 18px; padding: 50px 10px; text-align: center; }
.drawer-empty p { margin: 0; font: 600 18px/1.4 var(--f-display); }
.drawer-empty p span { font: 400 14px var(--f-body); color: var(--muted); }
.empty-binder { position: relative; width: 120px; height: 120px; }
.empty-binder i { position: absolute; left: 50%; top: 50%; width: 62px; height: 86px; margin: -43px 0 0 -31px; border-radius: 6px; border: 1.5px dashed rgba(var(--fg-rgb), .3); }
.empty-binder i:nth-child(1) { transform: rotate(-14deg) translateX(-18px); }
.empty-binder i:nth-child(3) { transform: rotate(14deg) translateX(18px); }
.empty-binder i:nth-child(2) { border-style: solid; border-color: rgba(226,189,114,.6); background: rgba(226,189,114,.06); animation: floaty 3s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-8px); } }

/* ---------- toast ---------- */
.toast { position: fixed; z-index: 400; left: 50%; bottom: 26px; transform: translate(-50%, 30px); padding: 13px 20px; border-radius: 999px; max-width: calc(100% - 32px);
  background: rgba(var(--bg-rgb), .92); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 20px 40px -10px rgba(0,0,0,.6); font: 500 14px var(--f-body); opacity: 0; pointer-events: none; transition: opacity .4s, transform .5s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- velo di transizione ---------- */
.veil { position: fixed; inset: 0; z-index: 500; pointer-events: none; }
.veil-panel { position: absolute; inset: 0; display: grid; place-items: center; transform: translateY(100%); visibility: hidden;
  background: radial-gradient(ellipse at 50% 45%, #7a4392 0%, #623476 35%, #281335 100%); box-shadow: inset 0 3px 0 #c6973e; }
.veil-panel::before { content: ""; position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(198,151,62,.6), 0 0 0 16px rgba(23,76,60,.5), 0 0 0 18px rgba(198,151,62,.35); }
.veil-panel img { position: relative; width: 150px; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .5s var(--ease); filter: drop-shadow(0 10px 30px rgba(0,0,0,.5)); }
.veil.enter { pointer-events: auto; }
.veil.enter .veil-panel, .veil.cover .veil-panel, .veil.leave .veil-panel { visibility: visible; }
.veil.enter .veil-panel { transform: none; transition: transform .5s cubic-bezier(.7,0,.3,1); }
.veil.enter .veil-panel img, .veil.cover .veil-panel img { opacity: .9; transform: none; transition-delay: .2s; }
.veil.cover .veil-panel { transform: none; transition: none; }
.veil.leave .veil-panel { transform: translateY(-100%); transition: transform .8s cubic-bezier(.7,0,.3,1); }
.veil.leave .veil-panel img { opacity: 0; transition-delay: 0s; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details { border-radius: 18px; background: rgba(var(--fg-rgb), .04); box-shadow: inset 0 0 0 1px var(--line); transition: background .3s; }
.faq details[open] { background: rgba(var(--fg-rgb), .07); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; cursor: pointer; font: 600 17px var(--f-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .2); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 24px 22px; color: var(--muted); max-width: 70ch; }

/* ---------- orbita di ricerca (linguaggio grafico "Orbita" del brand book) ---------- */
@keyframes spin360 { to { transform: rotate(360deg); } }
.orbit-wrap { width: 100%; max-width: 540px; margin-inline: auto; }
.orbit { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; margin-inline: auto; container-type: inline-size; isolation: isolate; }
.o-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.o-r1 { inset: 1%; box-shadow: inset 0 0 0 2px rgba(98,52,118,.75), 0 0 40px -10px rgba(141,91,166,.6); }
.o-r2 { inset: 16%; box-shadow: inset 0 0 0 2px rgba(23,76,60,.9), inset 0 0 0 3px rgba(43,138,108,.35); }
.o-r3 { inset: 31%; box-shadow: inset 0 0 0 2px rgba(198,151,62,.85); }
.o-r1::after, .o-r2::after { content: ""; position: absolute; inset: -1.2%; border-radius: 50%; border: 1px dashed rgba(var(--fg-rgb), .14); animation: spin360 60s linear infinite; }
.o-r2::after { animation-direction: reverse; animation-duration: 40s; }
.o-sweep { position: absolute; inset: 1%; border-radius: 50%; pointer-events: none; z-index: 1;
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(43,138,108,.1) 78%, rgba(198,151,62,.2) 92%, rgba(198,151,62,.6) 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 13%, #000 14%); mask: radial-gradient(circle, transparent 0 13%, #000 14%);
  animation: sweep var(--T, 7s) linear infinite; }
.o-sweep::after { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 50%; margin-left: -1px; background: linear-gradient(to bottom, #fff3cf, rgba(198,151,62,0)); box-shadow: 0 0 12px 2px rgba(226,189,114,.8); }
@keyframes sweep { to { transform: rotate(360deg); } }
.o-core { position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; margin: -12% 0 0 -12%; border-radius: 50%; z-index: 3; display: grid; place-items: center;
  background: radial-gradient(circle, #fffdf7, #faf7ef 60%, #efe3c4); box-shadow: 0 0 0 .6cqw #c6973e, 0 0 0 1.6cqw rgba(98,52,118,.9), 0 0 0 2cqw #c6973e, 0 2cqw 6cqw -1cqw rgba(0,0,0,.6); animation: corePulse var(--T, 7s) ease-in-out infinite; }
.o-core img { width: 82%; }
@keyframes corePulse { 0%, 100% { transform: scale(1); } 4% { transform: scale(1.06); } 10% { transform: scale(1); } }
.o-card { position: absolute; z-index: 2; width: 15cqw; aspect-ratio: 63 / 88; margin: -10.5cqw 0 0 -7.5cqw; perspective: 60cqw; }
.o-float { width: 100%; height: 100%; transform: rotate(var(--tilt)); animation: oFloat var(--f) ease-in-out infinite alternate; }
@keyframes oFloat { to { transform: rotate(calc(var(--tilt) * -.4)) translateY(-1.4cqw); } }
.o-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: oPing var(--T, 7s) var(--d, 0s) infinite; will-change: transform; }
@keyframes oPing {
  0% { transform: rotateY(0) scale(1); }
  5% { transform: rotateY(180deg) scale(1.22); }
  30% { transform: rotateY(180deg) scale(1.12); }
  38%, 100% { transform: rotateY(360deg) scale(1); }
}
/* bagliore su un livello a parte (un filtro sul livello 3D annullerebbe il retro/fronte) */
.o-float { position: relative; }
.o-float::before { content: ""; position: absolute; inset: -18%; border-radius: 30%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(226,189,114,.75), rgba(226,189,114,0)); animation: oGlow var(--T, 7s) var(--d, 0s) infinite; }
@keyframes oGlow { 0% { opacity: 0; } 4% { opacity: 1; } 30% { opacity: .55; } 38%, 100% { opacity: 0; } }
.o-back, .o-front { position: absolute; inset: 0; border-radius: .9cqw; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.o-front { transform: rotateY(180deg); box-shadow: 0 0 0 .25cqw #e2bd72; }
.o-front img { width: 100%; height: 100%; object-fit: cover; }
/* retri: immagini reali scontornate */
.o-back { background: transparent; }
.o-back img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-back, .o-front { box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.45); }
.o-flip { filter: none !important; }
@media (max-width: 480px) { .o-card { width: 16cqw; margin: -11.2cqw 0 0 -8cqw; } }
@media (prefers-reduced-motion: reduce) { .o-flip, .o-sweep, .o-float, .o-core { animation: none !important; } }

/* ---------- intro video (home, una volta per sessione) ---------- */
.intro { position: fixed; inset: 0; z-index: 400; background: #0b050f; display: grid; place-items: center; transition: opacity .8s var(--ease), visibility .8s; }
.intro.out { opacity: 0; visibility: hidden; }
.intro video { width: 100%; height: 100%; object-fit: cover; }
.intro-skip { position: absolute; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 14px var(--f-body); color: #faf7ef; background: rgba(40,19,53,.75); box-shadow: inset 0 0 0 1px rgba(226,189,114,.6); backdrop-filter: blur(10px); }
.intro-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #c6973e, #fff3cf); }

/* i pulsanti mantengono sempre il proprio colore di testo, anche dentro aree con link attenuati */
.footer-grid .btn span { color: inherit; }
.footer-grid .btn-glow, .footer-grid .btn-glow span { color: var(--cta-text); }
/* etichette leggibili sul fondo avorio */
[data-theme="light"] .pill-raw { background: rgba(23,76,60,.1); color: #174c3c; box-shadow: inset 0 0 0 1px rgba(23,76,60,.35); }
[data-theme="light"] .pill-graded { background: rgba(198,151,62,.16); color: #5e4210; box-shadow: inset 0 0 0 1px rgba(156,116,40,.45); }
[data-theme="light"] .pill-out { color: #8e1f33; }
[data-theme="light"] .msg.err { color: #8e1f33; }
[data-theme="light"] .msg.ok { color: #174c3c; }
[data-theme="light"] .scan-tag { color: #faf7ef; background: rgba(23,76,60,.9); }

/* ---------- schede prodotto perfettamente allineate (raw e gradate) ---------- */
.grid-cards { align-items: stretch; }
.tile { height: 100%; }
.tile-stage { aspect-ratio: .62; display: grid; place-items: center; padding: 0; }
.tile-stage > .cv { width: 88%; }
.tile-stage > .cv.raw { width: 80%; }
.tile-info { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 14px 4px 0; }
.tile-meta { flex-wrap: nowrap; overflow: hidden; min-height: 26px; -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
.tile-meta .pill { flex: none; }
.tile-info h3 { margin: 0; min-height: calc(2 * 1.25em); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.4em; }
.tile-row { margin-top: auto; padding-top: 4px; min-height: 44px; }

/* ---------- ricerca istantanea ---------- */
.sx { position: fixed; inset: 0; z-index: 300; display: grid; justify-items: center; align-items: start; padding: max(70px, 10vh) 16px 16px; visibility: hidden; pointer-events: none; }
.sx.open { visibility: visible; pointer-events: auto; }
.sx-scrim { position: absolute; inset: 0; background: rgba(8,3,12,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.sx.open .sx-scrim { opacity: 1; }
.sx-box { position: relative; width: min(720px, 100%); max-height: min(78vh, 720px); display: flex; flex-direction: column; border-radius: 26px; overflow: hidden;
  background: rgb(var(--bg-rgb)); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 1px rgba(198,151,62,.25), 0 40px 100px -20px rgba(0,0,0,.7);
  transform: translateY(-16px) scale(.97); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
.sx.open .sx-box { transform: none; opacity: 1; }
.sx-bar { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 22px; height: 68px; border-bottom: 1px solid var(--line); flex: none; }
.sx-bar > svg { width: 22px; height: 22px; color: var(--gold-l); flex: none; }
.sx-bar input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--ivory); font: 500 19px var(--f-body); outline: none; }
.sx-bar input::placeholder { color: var(--muted); }
.sx-bar input::-webkit-search-cancel-button { display: none; }
.sx-esc { flex: none; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; cursor: pointer; font: 600 12px var(--f-body); color: var(--muted); background: rgba(var(--fg-rgb), .07); }
.sx-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(var(--fg-rgb), .15); border-top-color: var(--gold-l); opacity: 0; animation: spin360 .8s linear infinite; }
.sx.busy .sx-spin { opacity: 1; }
.sx-body { overflow-y: auto; padding: 8px 12px 14px; overscroll-behavior: contain; }
.sx-h { margin: 14px 10px 8px; font: 600 11px var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-l); }
.sx-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.sx-chips .chip { padding: 8px 13px; font-size: 13px; }
.sx-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 6px; }
.sx-cat { display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: rgba(var(--fg-rgb), .03); box-shadow: inset 0 0 0 1px var(--line); }
.sx-cat .sx-opt { padding: 8px 10px; border-radius: 10px; font-size: 14px; color: var(--muted); }
.sx-cat .sx-opt b { color: var(--ivory); font: 700 15px var(--f-display); }
.sx-opt { display: block; outline: none; transition: background .15s; }
.sx-opt:hover, .sx-opt.on { background: rgba(var(--fg-rgb), .08); color: var(--ivory); }
.sx-item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 14px; padding: 8px 10px; border-radius: 14px; }
.sx-item.on { box-shadow: inset 0 0 0 1px rgba(198,151,62,.6); }
.sx-thumb { width: 46px; aspect-ratio: 63/88; border-radius: 4px; overflow: hidden; background: rgba(var(--fg-rgb), .06); display: grid; place-items: center; }
.sx-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sx-thumb.is-slab { padding: 7px 4px 3px; background: linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,.1)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), inset 0 6px 0 #fff; }
.sx-t { display: grid; gap: 2px; min-width: 0; }
.sx-t b { font: 600 15px/1.3 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-t small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx mark { background: rgba(198,151,62,.32); color: inherit; border-radius: 3px; padding: 0 1px; }
.sx-p { display: grid; justify-items: end; font: 700 15px var(--f-display); font-variant-numeric: tabular-nums; }
.sx-p em { font: 600 11px var(--f-body); font-style: normal; color: #ff9aa8; }
.sx-line, .sx-all { display: flex; justify-content: space-between; padding: 12px 12px; border-radius: 12px; font: 600 14px var(--f-display); }
.sx-all { margin-top: 6px; color: var(--gold-l); box-shadow: inset 0 0 0 1px var(--line); }
.sx-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 30px 10px; }
.sx-empty p { margin: 0; color: var(--muted); }
.sx-empty b { color: var(--ivory); }
.sx-empty .btn { margin-top: 10px; }
.sx-foot { display: flex; gap: 18px; padding: 10px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); flex: none; }
.sx-foot kbd, .sx kbd { padding: 1px 6px; margin-right: 3px; border-radius: 5px; font: 600 11px var(--f-body); box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .2); }
@media (max-width: 640px) {
  .sx { padding: 0; align-items: stretch; }
  .sx-box { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .sx-foot { display: none; }
  .sx-cats { grid-template-columns: 1fr; }
  .sx-bar { padding-top: env(safe-area-inset-top); }
}

/* ---------- documenti legali in popup ---------- */
.lg { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 20px; visibility: hidden; pointer-events: none; }
.lg.open { visibility: visible; pointer-events: auto; }
.lg-scrim { position: absolute; inset: 0; background: rgba(8,3,12,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .35s; }
.lg.open .lg-scrim { opacity: 1; }
.lg-box { position: relative; width: min(860px, 100%); max-height: min(88vh, 900px); display: flex; flex-direction: column; border-radius: 28px; overflow: hidden;
  background: rgb(var(--bg-rgb)); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 1px rgba(198,151,62,.25), 0 40px 100px -20px rgba(0,0,0,.7);
  transform: translateY(24px) scale(.97); opacity: 0; transition: transform .5s var(--ease), opacity .3s; }
.lg.open .lg-box { transform: none; opacity: 1; }
.lg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 22px 10px 30px; }
.lg-head .eyebrow { margin-bottom: 6px; }
.lg-title { margin: 0; font: 700 clamp(26px, 3.4vw, 38px)/1.05 var(--f-display); letter-spacing: -.03em; }
.lg-tabs { display: flex; gap: 6px; padding: 8px 30px 14px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); flex: none; }
.lg-tabs button { flex: none; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer; font: 600 13px var(--f-body); color: var(--muted); background: rgba(var(--fg-rgb), .05); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.lg-tabs button[aria-pressed="true"] { background: var(--ivory); color: var(--ink); box-shadow: none; }
.lg-body { overflow-y: auto; padding: 22px 30px 34px; overscroll-behavior: contain; outline: none; }
.prose ul { margin: 0; padding-left: 20px; color: rgba(var(--fg-rgb), .8); line-height: 1.7; }
.prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: rgba(var(--fg-rgb), .82); }
.prose th { font: 600 12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-l); }
.prose .legal-box { margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: rgba(var(--fg-rgb), .04); box-shadow: inset 0 0 0 1px var(--line); }
.prose .legal-box p { margin-top: 6px; font-size: 14px; }
.legal-upd { margin-top: 26px !important; font-size: 13px !important; color: var(--muted) !important; }
.lg .prose section { padding: 0 0 22px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.lg .prose h2 { margin: 0 0 10px; font: 700 20px var(--f-display); letter-spacing: -.01em; }
.lg .prose p { margin: 0 0 8px; color: rgba(var(--fg-rgb), .8); line-height: 1.7; }
.lg .prose a, .prose a { color: var(--gold-l); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .lg { padding: 0; align-items: end; }
  .lg-box { max-height: 92svh; border-radius: 24px 24px 0 0; }
  .lg-head, .lg-body { padding-left: 20px; padding-right: 16px; }
  .lg-tabs { padding-left: 20px; padding-right: 20px; }
  .prose table, .prose thead, .prose tbody, .prose tr, .prose td { display: block; }
  .prose thead { display: none; }
  .prose tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .prose td { padding: 2px 0; border: 0; }
}

/* ---------- banner cookie a tema carte ---------- */
.ck { position: fixed; z-index: 310; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(760px, calc(100% - 24px)); display: grid; grid-template-columns: 116px 1fr; gap: 22px; align-items: center;
  padding: 20px 24px 20px 20px; border-radius: 26px; color: var(--ivory);
  background: radial-gradient(ellipse at 0% 0%, rgba(98,52,118,.35), transparent 60%), rgb(var(--bg-rgb)); box-shadow: inset 0 0 0 1px var(--line), 0 0 0 1px rgba(198,151,62,.35), 0 30px 80px -20px rgba(0,0,0,.7);
  transform: translate(-50%, 140%); transition: transform .8s var(--ease-back); }
.ck.in { transform: translate(-50%, 0); }
.ck.out { transform: translate(-50%, 140%); transition: transform .5s var(--ease); }
.ck-card { width: 116px; aspect-ratio: 63/88; perspective: 600px; }
.ck-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: ckFlip 1.3s var(--ease) .7s both; }
@keyframes ckFlip { from { transform: rotateY(0) rotateZ(-8deg) translateY(30px); } 60% { transform: rotateY(200deg) rotateZ(4deg); } to { transform: rotateY(180deg) rotateZ(-4deg); } }
.ck-back, .ck-front { position: absolute; inset: 0; border-radius: 8px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 14px 30px -10px rgba(0,0,0,.7); }
.ck-back img { width: 100%; height: 100%; object-fit: cover; }
.ck-front { transform: rotateY(180deg); display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; color: #281335;
  background: linear-gradient(170deg, #fbf8f1, #ece2cf); box-shadow: inset 0 0 0 5px #e2bd72, inset 0 0 0 6px #9c7428, 0 14px 30px -10px rgba(0,0,0,.7); }
.ck-cookie { font-size: 40px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.ck-front b { font: 800 16px var(--f-display); }
.ck-front small { font: 700 9px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: #623476; }
.ck-main .eyebrow { margin-bottom: 4px; }
.ck-main h2 { margin: 0 0 6px; font: 700 22px var(--f-display); letter-spacing: -.02em; }
.ck-txt { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.ck-txt a { color: var(--gold-l); text-decoration: underline; text-underline-offset: 2px; }
.ck-opts { display: none; gap: 8px; margin-bottom: 14px; }
.ck.prefs .ck-opts { display: grid; }
.ck-opt { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: rgba(var(--fg-rgb), .04); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.ck-opt b { display: block; font: 600 14px var(--f-display); }
.ck-opt small { font-size: 12px; color: var(--muted); }
.ck-opt .switch input:disabled + .sw { opacity: .6; }
.ck-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-btns .btn { flex: 1 1 auto; }
.ck-save { display: none !important; }
.ck.prefs .ck-save { display: inline-flex !important; }
.ck.prefs .ck-cust { display: none !important; }
.ck-x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: rgba(var(--fg-rgb), .06); }
.ck-x svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .ck { grid-template-columns: 1fr; gap: 10px; padding: 18px 18px 16px; }
  .ck-card { display: none; }
  .ck-main h2 { font-size: 19px; padding-right: 30px; }
  .ck-btns .btn { flex: 1 1 calc(50% - 4px); }
}
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
@media (max-width: 600px) { .grid-cards, .results .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile { min-width: 0; } }
.tile-meta .pill-sample { display: none; }
.tile-meta { max-width: 100%; }