/* ==========================================================================
MyBoxOffice — La vetrina degli abbonamenti e «Il mio abbonamento».
Fogli consumati dai tre shortcode di includes/subscription/mybo-subscription-shop.php:
[mybo_subscriptions] · [mybo_subscription] · [mybo_my_subscription]
REGOLA D'ORO DEL PROGETTO, applicata riga per riga: qui dentro NON esiste un
colore, una misura o una spaziatura che l'admin non possa cambiare. Ogni
valore passa da var(--mybo-subshop-* / --mybo-submine-*), che la pagina
Personalizza (tab «📒 Abbonamenti» → «🛍️ Vetrina abbonamenti» e «🎟️ Pagina
Il mio abbonamento») emette in :root, con una variante per device.
Restano fissi soltanto i comportamenti — display, grid, flex, object-fit —
che sono struttura, non stile.
I RIPIEGHI SONO I TOKEN DEL DESIGN «SALA BUIA» (1A, 2026-08-09). Ogni
valore dopo la virgola dentro var() e' la copia del valore di fabbrica che
vive nello schema di Personalizza (gruppo `subscription_shop`), e sul sito
vince SEMPRE quello: il pannello emette i valori nel blocco :root, quindi
il ripiego non entra in gioco mai. La regola dei tre posti — schema, questo
foglio, mockup dell'anteprima in includes/mybo-customize-render.php — vuole
la STESSA CIFRA in tutti e tre; tests/verify-subscription-shop.php pretende
che ogni variabile abbia il suo comando e il suo specchio in anteprima.
(Fino all'8 agosto 2026 i ripieghi ricadevano sulla palette globale del
plugin: da oggi la vetrina ha un design suo — fondo scuro, oro #e0ae5a,
Bodoni Moda su nome e prezzo via tipografia completa — e i ripieghi SONO
quei token. I font NON stanno qui: li emette la tipografia completa,
mybo_customize_build_text_css, sul sito e in anteprima.)
========================================================================== */
/* --------------------------------------------------------------------------
1. LA VETRINA — design «Sala buia»
-------------------------------------------------------------------------- */
/* Il fondo e' un comando (Personalizza → Abbonamenti → «Fondo dietro alle
schede»). Di fabbrica e' il nero caldo del design: le schede vivono su un
palco buio anche in mezzo a una pagina chiara. Veste anche la schermata
d'acquisto, che riusa questo stesso wrapper. */
.mybo-subscription-shop {
max-width: var(--mybo-subshop-max-width, 100%);
margin: var(--mybo-subshop-margin, 24px auto);
background: var(--mybo-subshop-canvas-bg, #100f0d);
padding: var(--mybo-subshop-canvas-padding, 56px 48px 56px 48px);
}
/* Il numero di colonne e' un comando per device (Personalizza → «Schede per
riga»), come pretende il pattern Elementor-like del progetto.
FLEX E NON GRID, dal 2026-08-09: una griglia lascia la riga incompleta
appiccicata a sinistra per natura (2 tagli su 3 colonne = terza colonna
vuota), e Fabio vuole poterli mettere al centro. Il flex con la larghezza
di colonna CALCOLATA rifa' la stessa geometria della griglia, e in piu'
obbedisce a «Riga incompleta — posizione» (justify-content). */
.mybo-subscription-shop-grid {
display: flex;
flex-wrap: wrap;
justify-content: var(--mybo-subshop-grid-justify, flex-start);
gap: var(--mybo-subshop-gap, 28px);
align-items: stretch;
}
/* La larghezza di colonna: (100% - gli spazi) / colonne — identica a quella
che dava la griglia. min-width:0 e' l'equivalente del minmax(0,1fr): senza,
una descrizione lunga sfonda la colonna. */
.mybo-subscription-shop-grid > .mybo-subscription-card {
width: calc((100% - (var(--mybo-subshop-cols, 3) - 1) * var(--mybo-subshop-gap, 28px)) / var(--mybo-subshop-cols, 3));
/* LA LARGHEZZA MINIMA E' QUELLA CHE IMPILA LE SCHEDE SU TELEFONO, e non un
dettaglio: «schede per riga» e' un comando solo, e di fabbrica vale 3
anche su uno schermo da 375px — tre schede da 117px, illeggibili
(misurato il 2026-08-09 sul collaudo). Con un minimo, la riga va a capo
da sola quando lo spazio non basta, e la scheda prende tutta la
larghezza che ha: e' il «sotto i 720px impilate a larghezza piena» del
design, ottenuto senza scavalcare il comando. Il min() serve perche' su
uno schermo strettissimo il minimo non sfondi il contenitore.
Chi vuole il comportamento di prima mette 0. */
min-width: min( 100%, var(--mybo-subshop-card-min-width, 260px) );
}
/* Su telefono la scheda CONSIGLIATA va per prima: e' quella che il teatro
vuole far vedere, e impilate una sotto l'altra l'ordine di lettura e'
l'unica gerarchia rimasta. Solo ordine visivo (order), niente riordino del
markup: la scelta e' della specifica 1A. Il 767 e' il breakpoint mobile di
Personalizza (mybo_customize_breakpoints). */
@media (max-width: 767px) {
.mybo-subscription-shop-grid > .mybo-subscription-card--featured {
order: -1;
}
}
.mybo-subscription-shop--single .mybo-subscription-card {
max-width: var(--mybo-subshop-single-max-width, 420px);
}
/* La scheda. position:relative regge il nastro assoluto della consigliata;
NIENTE overflow:hidden (c'era fino al 2026-08-09): il nastro sporge sopra
il bordo della scheda, e un overflow nascosto lo taglierebbe a meta'. */
.mybo-subscription-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--mybo-subshop-card-inner-gap, 12px);
background: var(--mybo-subshop-card-bg, #17150f);
color: var(--mybo-subshop-card-text, #c3bbac);
border: var(--mybo-subshop-card-border-width, 1px) solid var(--mybo-subshop-card-border-color, #2c2720);
border-radius: var(--mybo-subshop-card-radius, 3px);
padding: var(--mybo-subshop-card-padding, 32px 26px 28px 26px);
}
/* Il nastro «IL PIÙ SCELTO»: assoluto, appoggiato sul bordo alto della
consigliata. Posizione, spaziatura lettere e padding sono la geometria del
design (struttura); sfondo, testo e dimensione sono comandi. */
.mybo-subscription-card-ribbon {
position: absolute;
top: -13px;
left: 26px;
background: var(--mybo-subshop-ribbon-bg, #e0ae5a);
color: var(--mybo-subshop-ribbon-color, #14120d);
font-size: var(--mybo-subshop-ribbon-size, 11px);
font-weight: 600;
letter-spacing: .16em;
line-height: 1;
padding: 6px 12px;
border-radius: 2px;
}
/* La zona immagine: un riquadro ad altezza fissa (comando «Altezza», default
150) con la foto CONTENUTA e centrata — i PNG trasparenti dei tagli si
presentano interi, senza tagli. Fino al 2026-08-09 l'altezza stava
sull'immagine e il ritaglio era cover: il comando e' lo stesso
(--mybo-subshop-img-height), e' cambiato chi lo consuma. */
.mybo-subscription-card-media {
display: flex;
align-items: center;
justify-content: center;
height: var(--mybo-subshop-img-height, 150px);
}
.mybo-subscription-card-img {
display: block;
width: var(--mybo-subshop-img-width, 100%);
max-width: 100%;
height: 100%;
object-fit: contain;
/* Il margine di fabbrica «0 auto» tiene l'immagine al centro quando
l'admin la restringe; a tutta larghezza non fa niente. */
margin: var(--mybo-subshop-img-margin, 0 auto);
padding: var(--mybo-subshop-img-padding, 0);
border-radius: var(--mybo-subshop-img-radius, 0);
}
/* L'etichetta piccola sopra il nome («CARNET», «ABBONAMENTO»). Il maiuscolo
ce lo mette il contenuto, non il CSS: l'admin scrive quello che vuole. */
.mybo-subscription-card-eyebrow {
margin: 0;
color: var(--mybo-subshop-eyebrow-color, #8a8175);
font-size: var(--mybo-subshop-eyebrow-size, 11px);
letter-spacing: var(--mybo-subshop-eyebrow-spacing, 0.22em);
font-weight: 500;
}
.mybo-subscription-card-name {
margin: 0;
color: var(--mybo-subshop-name-color, #f2ece0);
font-size: var(--mybo-subshop-name-size, 34px);
font-weight: var(--mybo-subshop-name-weight, 400);
line-height: 1.08;
}
.mybo-subscription-card-subtitle {
margin: 0;
color: var(--mybo-subshop-subtitle-color, #a19889);
font-size: var(--mybo-subshop-subtitle-size, 16px);
line-height: 1.5;
}
/* La linea divisoria fra la parte «chi sei» (nome) e la parte «quanto costa»
(prezzo). border:0 cosi' rende uguale anche se il compositore la stampa
come . I margini fanno, col gap della scheda, i 30/26 del design. */
.mybo-subscription-card-divider {
height: 1px;
border: 0;
background: var(--mybo-subshop-divider-color, #2c2720);
margin: 18px 0 14px;
}
.mybo-subscription-card-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
justify-content: var(--mybo-subshop-price-justify, flex-start);
gap: var(--mybo-subshop-price-gap, 14px);
margin: var(--mybo-subshop-price-margin, 0 0 0 0);
}
.mybo-subscription-card-price-now {
color: var(--mybo-subshop-price-color, #e0ae5a);
font-size: var(--mybo-subshop-price-size, 56px);
font-weight: var(--mybo-subshop-price-weight, 400);
line-height: 1;
}
/* I decimali («,00 €») piu' piccoli del numero intero: e' quello che rende il
prezzo un'insegna e non una cifra da scontrino. */
.mybo-subscription-card-price-cents {
font-size: var(--mybo-subshop-price-cents-size, 30px);
}
/* Il pieno barrato: compare SOLO quando oggi si paga davvero meno (lo decide
mybo_subscription_shop_struck_price()). Un barrato uguale al prezzo che si
paga non e' uno sconto, e' una bugia. */
.mybo-subscription-card-price-was {
color: var(--mybo-subshop-price-was-color, #7d7466);
font-size: var(--mybo-subshop-price-was-size, 17px);
text-decoration: line-through;
}
/* Il badge «RISPARMI X €»: derivato dal barrato, mai un campo. align-self
flex-start perche' e' una pastiglia, non una riga: larga quanto il testo. */
.mybo-subscription-card-save {
display: inline-flex;
align-self: flex-start;
background: var(--mybo-subshop-save-bg, #e0ae5a);
color: var(--mybo-subshop-save-color, #0f0e0c);
font-size: var(--mybo-subshop-save-size, 12px);
font-weight: 600;
letter-spacing: .1em;
padding: 4px 9px;
border-radius: 2px;
}
/* «circa X € a spettacolo» — la nota sotto il prezzo degli illimitati. */
.mybo-subscription-card-note {
margin: 0;
color: var(--mybo-subshop-pershow-color, #8d8371);
font-size: var(--mybo-subshop-pershow-size, 13px);
line-height: 1.5;
}
/* «Offerta valida fino al …»: compare solo finche' il prezzo scontato ha una
scadenza davanti (2026-08-09). Di fabbrica e' dell'oro dei prezzi e in
grassetto: e' un invito a non rimandare, non una nota a pie' di pagina. */
.mybo-subscription-card-offer {
margin: 0;
color: var(--mybo-subshop-offer-color, #e0ae5a);
font-size: var(--mybo-subshop-offer-size, 13px);
font-weight: var(--mybo-subshop-offer-weight, 600);
line-height: 1.5;
}
/* Ingressi e validita' «vecchio stile»: la vetrina 1A li racconta nei punti
dell'elenco, ma la schermata d'acquisto (sezione 3) li stampa ancora cosi'. */
.mybo-subscription-card-facts {
list-style: none;
margin: 0;
padding: 0;
color: var(--mybo-subshop-facts-color, #c3bbac);
font-size: var(--mybo-subshop-facts-size, 15px);
line-height: 1.6;
}
.mybo-subscription-card-asterisk {
color: var(--mybo-subshop-asterisk-color, #8d8371);
}
.mybo-subscription-card-desc {
color: var(--mybo-subshop-desc-color, #c3bbac);
font-size: var(--mybo-subshop-desc-size, 15px);
line-height: 1.55;
}
.mybo-subscription-card-conditions {
margin: 0;
color: var(--mybo-subshop-cond-color, #8d8371);
font-size: var(--mybo-subshop-cond-size, 13px);
line-height: 1.5;
}
/* I punti dell'elenco, col trattino dorato come marcatore (— nel
markup: font-style normal perche' quell' e' un segno, non un corsivo).
Il margine sopra fa, col gap della scheda, i 30 del design. */
/* LE TRE FASCE, e le loro altezze minime (2026-08-09). Tre schede affiancate
con nomi di lunghezza diversa non si allineavano: bastava un nome su due
righe per spostare in giu' prezzo e punti di quella scheda soltanto. Ora le
tre fasce sono contenitori con un'altezza minima comandabile (Personalizza →
Abbonamenti → «📏 Altezze delle fasce»): dando la stessa altezza a tutte, le
schede si allineano riga per riga.
MINIMA e non fissa: se un giorno un testo cresce oltre la misura, la fascia
si allarga e si legge tutto. Un'altezza fissa taglierebbe le parole — e il
giorno che succede lo scopre un cliente, non l'admin. A comando vuoto
(`auto`) e' come non averla. */
.mybo-subscription-card-head {
display: flex;
flex-direction: column;
gap: var(--mybo-subshop-card-inner-gap, 12px);
min-height: var(--mybo-subshop-head-min-height, auto);
}
.mybo-subscription-card-pricing {
display: flex;
flex-direction: column;
gap: var(--mybo-subshop-card-inner-gap, 12px);
/* align-items:flex-start tiene il badge «RISPARMI …» largo quanto il suo
testo: in una colonna flex, senza, si stirerebbe per tutta la scheda. */
align-items: flex-start;
min-height: var(--mybo-subshop-pricing-min-height, auto);
}
.mybo-subscription-card-benefits {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--mybo-subshop-benefit-gap, 11px);
min-height: var(--mybo-subshop-benefits-min-height, auto);
}
.mybo-subscription-card-benefit {
display: flex;
gap: 12px;
color: var(--mybo-subshop-benefit-color, #c3bbac);
font-size: var(--mybo-subshop-benefit-size, 15px);
line-height: 1.5;
}
.mybo-subscription-card-benefit i {
font-style: normal;
color: var(--mybo-subshop-benefit-marker-color, #e0ae5a);
}
/* Lo spazio elastico che tiene il pulsante al fondo della scheda anche quando
gli elenchi hanno lunghezze diverse: cosi' i pulsanti di una riga restano
allineati fra loro. Solo struttura. */
.mybo-subscription-card-spacer {
flex: 1 1 auto;
min-height: 24px;
}
/* Il pulsante della scheda base: OUTLINE — bordo caldo, testo avorio, niente
riempimento. margin-top:auto e' la rete per le schede senza spacer (la
schermata d'acquisto): con lo spacer non fa niente. */
.mybo-subscription-card-buy {
display: inline-block;
margin-top: auto;
align-self: var(--mybo-subshop-buy-align, stretch);
text-align: center;
text-decoration: none;
background: var(--mybo-subshop-buy-bg, transparent);
color: var(--mybo-subshop-buy-color, #f2ece0);
border: var(--mybo-subshop-buy-border-width, 1px) solid var(--mybo-subshop-buy-border-color, #4a4236);
border-radius: var(--mybo-subshop-buy-radius, 2px);
padding: var(--mybo-subshop-buy-padding, 16px 16px 16px 16px);
font-size: var(--mybo-subshop-buy-size, 15px);
font-weight: var(--mybo-subshop-buy-weight, 500);
letter-spacing: 1px;
}
/* Passandoci sopra il bordo e il testo si accendono d'oro (il fondo resta
quello che e': di fabbrica trasparente). */
.mybo-subscription-card-buy:hover,
.mybo-subscription-card-buy:focus {
background: var(--mybo-subshop-buy-hover-bg, transparent);
color: var(--mybo-subshop-buy-hover-color, #e0ae5a);
border-color: var(--mybo-subshop-buy-hover-border-color, #e0ae5a);
}
/* --------------------------------------------------------------------------
1-bis. LA SCHEDA CONSIGLIATA (.mybo-subscription-card--featured)
La veste dorata del taglio con la spunta «Consigliato»: sfumatura, bordo
caldo, ombra, toni piu' chiari, pulsante PIENO. Ogni tono ha il suo comando
--mybo-subshop-feat-* nel gruppo subscription_shop.
-------------------------------------------------------------------------- */
.mybo-subscription-card--featured {
background: linear-gradient(var(--mybo-subshop-feat-bg-top, #1d1a12), var(--mybo-subshop-feat-bg-bottom, #17140e));
border-color: var(--mybo-subshop-feat-border-color, #6b5528);
box-shadow: var(--mybo-subshop-feat-shadow, 0 24px 60px rgba(0,0,0,.5));
}
.mybo-subscription-card--featured .mybo-subscription-card-eyebrow {
color: var(--mybo-subshop-feat-eyebrow-color, #b39a63);
}
.mybo-subscription-card--featured .mybo-subscription-card-name {
color: var(--mybo-subshop-feat-name-color, #f7f0e2);
}
.mybo-subscription-card--featured .mybo-subscription-card-subtitle {
color: var(--mybo-subshop-feat-subtitle-color, #b3a891);
}
.mybo-subscription-card--featured .mybo-subscription-card-divider {
background: var(--mybo-subshop-feat-divider-color, #3a3122);
}
.mybo-subscription-card--featured .mybo-subscription-card-price-now {
color: var(--mybo-subshop-feat-price-color, #f0c374);
}
.mybo-subscription-card--featured .mybo-subscription-card-benefit {
color: var(--mybo-subshop-feat-benefit-color, #d3c9b4);
}
.mybo-subscription-card--featured .mybo-subscription-card-benefit i {
color: var(--mybo-subshop-feat-marker-color, #f0c374);
}
/* Il pulsante PIENO della consigliata. Il bordo resta (trasparente) con lo
spessore della base: cosi' i due pulsanti di una riga sono alti uguali. */
.mybo-subscription-card--featured .mybo-subscription-card-buy {
background: var(--mybo-subshop-feat-buy-bg, #e0ae5a);
color: var(--mybo-subshop-feat-buy-color, #14120d);
border-color: transparent;
}
.mybo-subscription-card--featured .mybo-subscription-card-buy:hover,
.mybo-subscription-card--featured .mybo-subscription-card-buy:focus {
background: var(--mybo-subshop-feat-buy-hover-bg, #f0c374);
color: var(--mybo-subshop-feat-buy-color, #14120d);
border-color: transparent;
}
/* --------------------------------------------------------------------------
1-ter. IL CORPO «VECCHIO STILE» — serve alla schermata d'acquisto.
La vetrina 1A mette tutto direttamente nella scheda; la conferma d'acquisto
(mybo-subscription-buy.php, decisione 1 della specifica: resta com'e')
stampa ancora immagine a tutta testa + corpo col padding. Il padding sta
sul corpo E la scheda d'acquisto lo azzera su di se', cosi' non si paga due
volte.
-------------------------------------------------------------------------- */
.mybo-subscription-card-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: var(--mybo-subshop-card-padding, 32px 26px 28px 26px);
gap: var(--mybo-subshop-card-inner-gap, 12px);
}
/* La nota con l'asterisco. La frase si scrive in Impostazioni → Abbonamenti;
qui c'e' solo il suo vestito. */
.mybo-subscription-shop-note {
margin: var(--mybo-subshop-note-margin, 16px 0 0);
color: var(--mybo-subshop-note-color, #8d8371);
font-size: var(--mybo-subshop-note-size, 13px);
line-height: 1.5;
}
/* L'asterisco della nota eredita dalla nota: un colore suo sarebbe un comando
in piu' per un carattere solo. */
.mybo-subscription-shop-note-mark {
color: inherit;
}
/* Nessun taglio in vendita: non un vuoto, un'informazione. */
.mybo-subscription-shop-empty {
margin: 0;
background: var(--mybo-subshop-empty-bg, transparent);
border: var(--mybo-subshop-empty-border-width, 1px) dashed var(--mybo-subshop-empty-border-color, #2c2720);
border-radius: var(--mybo-subshop-empty-radius, 8px);
color: var(--mybo-subshop-empty-color, #a19889);
font-size: var(--mybo-subshop-empty-size, 15px);
padding: var(--mybo-subshop-empty-padding, 18px 20px);
text-align: var(--mybo-subshop-empty-align, center);
}
/* --------------------------------------------------------------------------
2. «IL MIO ABBONAMENTO»
L'ORO DI QUESTA FAMIGLIA NON NASCE QUI. Ogni ripiego scritto sotto (il valore
dopo la virgola dentro var()) e' la copia di un valore di fabbrica che vive
nello schema di Personalizza (mybo_customize_schema(), gruppo
`subscription_mine`), e sul sito vince SEMPRE quello: il pannello emette i
valori nel blocco :root, quindi il ripiego non entra in gioco mai. Sono qui
per il caso in cui il pannello non giri, e per chi legge il foglio e vuole
sapere che colore aspettarsi. Cambiare solo questi non si vede in pagina.
I tre posti — schema, questo foglio, mockup dell'anteprima in
includes/mybo-customize-render.php — dicono la stessa cifra, e
tests/verify-account-subscription-box.php lo pretende.
E' l'oro della riga «Abbonamento» del carrello (commit 8ca15109): chi ha un
abbonamento riconosce le sue cose dal colore, nel carrello e nella sua
pagina account. La gerarchia dei toni e' quella della famiglia: #ffe9a8 per i
titoli, #f5d67a per il testo, #d4af37 per le note e le linee.
-------------------------------------------------------------------------- */
.mybo-my-subscription {
display: block;
max-width: var(--mybo-submine-max-width, 100%);
margin: var(--mybo-submine-margin, 24px auto);
}
.mybo-my-subscription-item {
background: var(--mybo-submine-bg, #2a2210);
color: var(--mybo-submine-text, #f5d67a);
border: var(--mybo-submine-border-width, 1px) solid var(--mybo-submine-border-color, #d4af37);
border-radius: var(--mybo-submine-radius, 10px);
padding: var(--mybo-submine-padding, 18px 20px);
margin-bottom: var(--mybo-submine-item-gap, 16px);
}
.mybo-my-subscription-name {
margin: 0 0 8px;
color: var(--mybo-submine-name-color, #ffe9a8);
font-size: var(--mybo-submine-name-size, 19px);
font-weight: var(--mybo-submine-name-weight, 700);
line-height: 1.25;
}
.mybo-my-subscription-meta {
margin: 0 0 4px;
color: var(--mybo-submine-meta-color, #f5d67a);
font-size: var(--mybo-submine-meta-size, 16px);
font-weight: var(--mybo-submine-meta-weight, 600);
}
.mybo-my-subscription-expiry,
.mybo-my-subscription-empty {
margin: 0;
color: var(--mybo-submine-expiry-color, #d4af37);
font-size: var(--mybo-submine-expiry-size, 14px);
}
/* Il registro degli usi. Qui la tabella e' una tabella e occupa tutta la
larghezza che ha: e' la pagina «Il mio abbonamento», dove lo spazio c'e'.
Dove lo spazio NON c'e' — la colonna di destra dell'area cliente — la fa
scorrere la regola in fondo alla sezione 2-bis. */
.mybo-my-subscription-uses {
width: 100%;
border-collapse: collapse;
margin: var(--mybo-submine-table-margin, 14px 0 0);
font-size: var(--mybo-submine-table-size, 14px);
display: table;
}
.mybo-my-subscription-uses-caption {
caption-side: top;
text-align: left;
color: var(--mybo-submine-caption-color, #d4af37);
font-size: var(--mybo-submine-caption-size, 13px);
padding-bottom: 6px;
}
.mybo-my-subscription-uses th {
text-align: left;
background: var(--mybo-submine-thead-bg, #1f1a0c);
color: var(--mybo-submine-thead-color, #ffe9a8);
font-weight: var(--mybo-submine-thead-weight, 600);
padding: var(--mybo-submine-cell-padding, 8px 10px);
border-bottom: var(--mybo-submine-row-border-width, 1px) solid var(--mybo-submine-row-border-color, #d4af37);
}
.mybo-my-subscription-uses td {
padding: var(--mybo-submine-cell-padding, 8px 10px);
border-bottom: var(--mybo-submine-row-border-width, 1px) solid var(--mybo-submine-row-border-color, #d4af37);
vertical-align: top;
}
.mybo-my-subscription-use-entries {
text-align: right;
white-space: nowrap;
}
/* Un uso annullato resta nel registro: il cliente che ha disdetto deve poter
verificare che l'ingresso gli e' tornato. */
.mybo-my-subscription-use--cancelled {
color: var(--mybo-submine-cancelled-color, #d4af37);
}
.mybo-my-subscription-use-tag {
font-size: var(--mybo-submine-tag-size, 12px);
color: inherit;
}
/* Le serate escluse: la terza avvertenza della specifica. */
.mybo-my-subscription-excluded {
background: var(--mybo-submine-excluded-bg, #2a2210);
color: var(--mybo-submine-excluded-text, #f5d67a);
border: var(--mybo-submine-excluded-border-width, 1px) solid var(--mybo-submine-excluded-border-color, #d4af37);
border-radius: var(--mybo-submine-excluded-radius, 10px);
padding: var(--mybo-submine-excluded-padding, 16px 20px);
font-size: var(--mybo-submine-excluded-size, 14px);
}
.mybo-my-subscription-excluded-title {
margin: 0 0 4px;
color: var(--mybo-submine-excluded-title-color, #ffe9a8);
font-size: var(--mybo-submine-excluded-title-size, 16px);
font-weight: var(--mybo-submine-excluded-title-weight, 700);
}
.mybo-my-subscription-excluded-hint {
margin: 0 0 10px;
color: var(--mybo-submine-excluded-hint-color, #d4af37);
font-size: var(--mybo-submine-excluded-hint-size, 13px);
}
.mybo-my-subscription-excluded-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--mybo-submine-excluded-cols, 1), minmax(0, 1fr));
gap: var(--mybo-submine-excluded-gap, 6px);
}
.mybo-my-subscription-excluded-when {
color: var(--mybo-submine-excluded-when-color, #d4af37);
white-space: nowrap;
}
/* --------------------------------------------------------------------------
2-bis. LO STESSO RIQUADRO, NELLA COLONNA DI DESTRA DELL'AREA CLIENTE
Nel Personal Box Office il riquadro qui sopra non sta a tutta pagina: sta
nella colonna di destra, sopra «Sconti Disponibili» (il contenitore lo stampa
mybo_account_print_my_subscriptions(), includes/mybo-account-rendering.php).
Quella colonna e' meta' della meta' di una pagina, e il registro «dove hai
usato i tuoi ingressi» e' una tabella a tre colonne: senza queste due regole
sfonderebbe il suo contenitore e si porterebbe dietro il resto.
SOLO STRUTTURA, nessun valore che l'admin debba poter cambiare: come si
comporta una cosa che non ci sta e' comportamento, non stile (CLAUDE.md,
«Layout strutturale può restare hardcoded»). Colori, misure e spazi restano
tutti nelle variabili della sezione 2, gli stessi per tutte e due i posti.
-------------------------------------------------------------------------- */
/* Figlio di una griglia: senza questo non scende mai sotto il suo contenuto,
e a sfondare sarebbe la colonna intera invece della sola tabella. */
.mybo-account-subscription-box {
min-width: 0;
}
/* La tabella diventa il suo contenitore che scorre: quello che non ci sta si
raggiunge scorrendo, invece di uscire dalla colonna. Vale SOLO nella colonna
stretta — sulla pagina «Il mio abbonamento» la tabella resta larga quanto
tutta la riga. */
.mybo-account-subscription-box--column .mybo-my-subscription-uses {
display: block;
overflow-x: auto;
}
/* --------------------------------------------------------------------------
3. LA PAGINA D'ACQUISTO — l'indirizzo ?mybo_subscribe=
(includes/subscription/mybo-subscription-buy.php)
HA I COMANDI SUOI, e questa e' la correzione del 2026-08-09. Fino a ieri
qui non c'era nessuna variabile nuova: la schermata riusava le classi e i
comandi della vetrina, «tanto e' la stessa scheda vista da vicino». Non lo
e'. Misurato dal vivo su fb.salottomagico.com: chi aveva stretto a 200px la
scheda singola dello shortcode [mybo_subscription] si ritrovava la PAGINA
d'acquisto larga 200px — titolo tagliato, prezzo da 56px a capo dentro una
colonna di due dita, e nessun modo di rimediare dal pannello.
La vetrina e' un ELENCO di schede; questa e' una PAGINA. Da qui in giu'
ogni valore passa da --mybo-subbuy-*, gruppo `subscription_buy` di
Personalizza («🛒 Pagina d'acquisto»). Regola dei tre posti: il valore di
fabbrica dello schema, il ripiego scritto qui e quello del mockup in
includes/mybo-customize-render.php dicono la STESSA cifra.
Resta scritto solo cio' che e' comportamento: le colonne flex, il