/* ============================================================
   CRIMSON SMP — re-skin globale dello store
   Va in:  generic.css   (il tema lo carica su OGNI pagina)

   Il CSS base di Tebex e' costruito su token (--color-*, --btn-*).
   Riscrivendo i token si rivestono da soli login, prodotto, carrello,
   checkout e categorie. Le regole mirate sotto servono solo dove il
   token non basta.

   Stesso linguaggio visivo della home:
     rosso #ff2b2b · fondo #0a0a0c · font Barlow · angoli 12-16px
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&display=swap");

/* ============================================================
   1) TOKEN
   ORDINE DI CARICAMENTO DEL TEMA:
       shared.css  ->  generic.css (questo file)  ->  <style> del PANNELLO
   Il pannello e' l'ULTIMO e riscrive 8 token in :root. A pari specificita'
   vince lui. Percio' quelli li metto in ":root:root": stesso elemento, ma
   specificita' piu' alta -> vinco io.
   ============================================================ */

/* --- gli 8 token che il pannello prova a riscrivere --- */
:root:root {
  --color-primary: #ff2b2b;              /* era #41C4C3 turchese: ecco perche' stonava */
  --color-primary-hover: #ff5a5a;        /* il default faceva il bottone BIANCO in hover */
  --color-primary-text: #ffffff;         /* il default era testo quasi nero dentro il bottone */
  --color-primary-text-hover: #ffffff;
  --color-sale-banner-bg: #e0242c;
  --color-sale-banner-text: #ffffff;
  --text-price: #ff2b2b;                 /* IL PREZZO. price.twig lo mette in <strong> e
                                            il CSS base lo colora con questo token:
                                            e' per questo che il prezzo era sparito. */
  --bg-image: none;                      /* la foto di sfondo generica di Tebex */
}

/* --- il resto dei token, definiti in :root da shared.css --- */
:root {
  --color-text: #eceaf2;
  --color-text-darker: #d5d1dd;
  --color-text-secondary: #9a94a8;
  --color-text-dark: #0d0d0d;

  --color-bg: #0a0a0c;                   /* pagina + fondo del drawer del carrello */
  --color-brighter-bg: #14141a;          /* ogni superficie: widget, card, pannelli */

  /* .btn-secondary = anche il bottone REMOVE nel carrello.
     Di default e' #ccc: un mattone grigio chiaro su fondo nero. */
  --color-secondary: rgba(255, 255, 255, 0.06);
  --color-secondary-hover: rgba(255, 43, 43, 0.14);
  --color-secondary-text: #cfc3cb;
  --color-secondary-text-hover: #ffffff;

  /* .btn-tertiary = i +/- della quantita' */
  --color-tertiary: transparent;
  --color-tertiary-hover: rgba(255, 43, 43, 0.14);
  --color-tertiary-text: #cfc3cb;
  --color-tertiary-text-hover: #ffffff;

  --color-removed: #ff4d4d;              /* prezzo barrato, articolo rimosso */

  /* shared.css USA var(--page-transition-duration) nelle ::view-transition,
     ma non lo dichiara MAI: le transizioni di pagina sono scritte e spente.
     Definendolo qui si accendono. */
  --page-transition-duration: 320ms;

  --content-inner-width: 1280px;

  /* miei */
  --crimson: #ff2b2b;
  --crimson-dark: #e0242c;
  --line: rgba(255, 255, 255, 0.10);
  --panel: linear-gradient(180deg, #16121c 0%, #0c0a10 100%);
  --font: "Barlow", "Segoe UI", system-ui, sans-serif;
}

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
}

/* lo sfondo generico di Tebex (una foto dal loro CDN): via */
body::before {
  display: none !important;
}

/* ---------- 2) BOTTONI: una sola identita' ----------
   IL CSS BASE DA' AI BOTTONI UN'ALTEZZA FISSA (--btn-size: 46px) e centra il
   testo con line-height. Se ci aggiungi padding verticale, quello SI SOMMA e
   la scritta scivola in basso (era il bug di "ADD TO BASKET").
   Percio': padding verticale ZERO, altezza minima, e centratura con flex.
   Cosi' il testo sta in mezzo qualunque sia l'altezza. */
.btn-primary,
.btn-secondary,
.btn-tertiary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box;
  min-height: var(--btn-size, 46px);
  height: auto !important;
  padding: 0 24px !important;          /* NIENTE padding sopra/sotto */
  line-height: 1 !important;
  text-align: center;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px;
  border-radius: 10px !important;
  transition: filter 0.2s ease, transform 0.2s ease,
              background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* i bottoni quadrati (regalo, chiudi, +/-) non devono allargarsi */
.btn-glyph,
.btn-icon,
.product-actions .gift {
  padding: 0 !important;
  width: var(--btn-size, 46px);
  flex: 0 0 auto;
}

.btn-primary {
  color: #fff !important;
  border: 1px solid rgba(255, 43, 43, 0.55) !important;
  background: linear-gradient(90deg, var(--crimson-dark), var(--crimson)) !important;
  box-shadow: 0 0 16px rgba(255, 43, 43, 0.35) !important;
}

.btn-secondary,
.btn-tertiary {
  color: #cfc3cb !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus {
  filter: brightness(1.14);
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(255, 43, 43, 0.55) !important;
}

.btn-secondary:hover,
.btn-tertiary:hover,
.btn-secondary:focus,
.btn-tertiary:focus {
  color: #fff !important;
  background: rgba(255, 43, 43, 0.12) !important;
  border-color: rgba(255, 43, 43, 0.55) !important;
  box-shadow: none !important;
}

.btn-primary[disabled],
.btn-secondary[disabled] {
  filter: grayscale(0.6);
  opacity: 0.5;
  pointer-events: none;
}

/* ---------- 3) PANNELLI: stesso fondo dei modali della home ---------- */
.store-text,
.store-product-full,
.store-products-list .store-product,
.store-products-images .store-product,
.store-category-tiered,
.category-description,
.widget,
.no-products {
  border-radius: 16px !important;
  background: var(--panel) !important;
  border: 1px solid var(--line);
}

.store-text h1, .store-text h2, .store-text h3,
.store-product-full h1, .store-product-full h2 {
  font-family: var(--font);
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
}

/* ---------- 4) LOGIN (username.html) ---------- */
.store-form {
  max-width: 620px !important;
  margin: 0 auto !important;
  padding: 34px 30px !important;
}

.store-form h2 {
  font-size: 30px !important;
  text-align: center;
  margin: 0 0 6px;
  background-image: linear-gradient(90deg, #fff 0%, #ff8a8a 38%, #ff2b2b 72%, #a80f0f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.platform-hint {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 6px 0 22px;
  transition: color 0.25s ease;
}

/* "seleziona prima l'edizione": rosso, senza cambiare colore da JS inline */
.platform-hint.error {
  color: #ff5555;
}

.platform-select {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin: 0 0 24px;
  flex-wrap: wrap;
}

/* le card Java/Bedrock si comportano come le card della home:
   si alzano, il bordo si accende, il glow segue il colore */
.platform-opt {
  cursor: pointer;
  width: 210px;
  padding: 12px;
  text-align: center;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border: 1px solid rgba(255, 43, 43, 0.22);
  box-shadow: 0 0 20px rgba(255, 43, 43, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.platform-opt img {
  width: 100%;
  height: auto;
  max-height: 240px;
  border-radius: 12px;
  display: block;
  filter: saturate(0.75) brightness(0.8);
  transition: filter 0.3s ease;
}

.platform-opt span {
  display: block;
  margin-top: 12px;
  font-family: var(--font);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 1.6px;
  color: #cfc3cb;
  transition: color 0.3s ease;
}

.platform-opt:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 43, 43, 0.6);
  box-shadow: 0 0 36px rgba(255, 43, 43, 0.25);
}

.platform-opt:hover img { filter: none; }
.platform-opt:hover span { color: #fff; }

.platform-opt.active {
  border-color: var(--crimson);
  box-shadow: 0 0 40px rgba(255, 43, 43, 0.45);
}

.platform-opt.active img { filter: none; }
.platform-opt.active span { color: #fff; }

.store-form form.field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  max-width: 460px;
  margin: 0 auto;
}

.store-form input[type="text"] {
  width: 100%;
  padding: 15px 18px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-size: 15px !important;
  box-sizing: border-box;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.store-form input[type="text"]::placeholder {
  color: #6f6878;
}

.store-form input[type="text"]:focus {
  outline: none;
  border-color: rgba(255, 43, 43, 0.65) !important;
  box-shadow: 0 0 0 3px rgba(255, 43, 43, 0.12);
}

.store-form .btn-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px;
  padding: 0 !important;              /* padding verticale zero: centra il flex */
  line-height: 1 !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* ---------- 5) PAGINA PRODOTTO (package.html) ---------- */

/* Il CSS base impagina questo blocco con grid/sticky, e ci ancora
   .product-actions in fondo: percio' "Add to Basket" finiva giu' e la
   descrizione gli scorreva DIETRO, tagliata.
   display:block -> torna il flusso del DOM, cioe' l'ordine di package.html:
       titolo -> immagine -> prezzo+azioni -> descrizione                    */
.store-product-full {
  display: block !important;
  padding: 30px 28px !important;
  text-align: center;
}

.product-title {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 1px;
  color: #fff;
  text-align: center;
  margin: 0 0 20px;
}

.product-title .countdown {
  display: inline-block;
  margin-left: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #1a1206;
  background: linear-gradient(90deg, #ffd35a, #ffb02e);
}

.store-product-full .image {
  display: block;
  margin: 0 auto 8px;
  max-height: 320px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(255, 43, 43, 0.28));
}

/* prezzo e azioni: TUTTO CENTRATO, nel flusso, subito sotto l'immagine.
   position:static / bottom:auto / inset:auto smontano lo sticky del CSS base
   che lo incollava in fondo al pannello.                                    */
.product-actions {
  position: static !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  gap: 12px;
  width: 100%;
  margin: 22px auto 6px !important;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent !important;
  box-shadow: none !important;
}

/* il prezzo prende una riga tutta sua, centrata sopra i bottoni */
.product-actions .price {
  display: block !important;
  visibility: visible !important;
  order: -1;
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
  margin: 0 0 16px !important;
  padding: 0;
  font-family: var(--font);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--crimson) !important;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(255, 43, 43, 0.45);
}

/* price.twig avvolge la cifra in <strong>: deve ereditare, non restare bianco */
.product-actions .price strong {
  color: inherit !important;
  font: inherit !important;
}

.product-actions .price del.discount,
.product-actions .price del.discount strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #6f6878 !important;
  text-shadow: none;
}

/* niente padding verticale: l'altezza la fa min-height, il testo lo centra il flex */
.product-actions .add,
.product-actions .subscribe {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px;
  padding: 0 30px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
}

/* .wide = larghezza piena: resta centrato lo stesso, grazie al flex */
.product-actions .add.wide,
.product-actions .subscribe.wide {
  flex: 1 1 240px;
  max-width: 340px;
}

.quantity-field {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--line) !important;
  overflow: hidden;
}

.quantity-field input[type="number"] {
  border: none !important;
  background: transparent !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 800;
  text-align: center;
}

/* la descrizione: prima scorreva DIETRO la barra dei prezzi ancorata in fondo.
   Ora e' l'ultimo blocco del flusso e ha tutto lo spazio che vuole. */
.store-product-full .descr {
  margin-top: 22px;
  text-align: left;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  font-size: 14.5px;
  line-height: 1.75;
  color: #c3bcd0;
}

.store-product-full .descr strong,
.store-product-full .descr b {
  color: #fff;
}

.store-product-full .descr ul {
  padding-left: 18px;
}

/* ---------- 6) BASKET / POPUP ---------- */
.popup-content,
.basket-popup-content {
  border-radius: 16px !important;
  background: var(--panel) !important;
  border: 1px solid rgba(255, 43, 43, 0.30) !important;
  box-shadow: 0 0 60px rgba(255, 43, 43, 0.18), 0 30px 80px rgba(0, 0, 0, 0.7) !important;
  font-family: var(--font);
}

/* il pannello del carrello e' laterale: angoli solo sul lato interno */
.basket-popup-content {
  border-radius: 16px 0 0 16px !important;
  border-right: 0 !important;
}

.popup-close {
  border-radius: 10px !important;
  color: #8b8496 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--line) !important;
  transition: color 0.2s ease, background 0.2s ease;
}

.popup-close:hover {
  color: #fff !important;
  background: rgba(255, 43, 43, 0.15) !important;
}

.basket-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.basket-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--line);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.basket-item:hover {
  border-color: rgba(255, 43, 43, 0.4);
}

/* --- immagine dell'articolo come sfondo ---
   --img la imposta lo script in layout.html: il markup del basket lo genera
   Tebex e NON contiene l'immagine, quindi la ricavo dal data-package.
   L'icona sfonda a destra, e un gradiente scuro da sinistra tiene il testo
   leggibile: il nome e il prezzo non devono mai finire sopra al disegno. */
.basket-item.has-img {
  min-height: 96px;
  background-color: #15131b !important;
  background-image:
    linear-gradient(90deg,
      #15131b 0%,
      rgba(21, 19, 27, 0.92) 42%,
      rgba(21, 19, 27, 0.55) 72%,
      rgba(21, 19, 27, 0.35) 100%),
    var(--img) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, right -18px center !important;
  background-size: cover, auto 150% !important;
}

/* al passaggio del mouse il velo si alza un po': l'icona respira */
.basket-item.has-img:hover {
  box-shadow: inset 0 0 40px rgba(255, 43, 43, 0.12);
  background-image:
    linear-gradient(90deg,
      #15131b 0%,
      rgba(21, 19, 27, 0.88) 38%,
      rgba(21, 19, 27, 0.42) 70%,
      rgba(21, 19, 27, 0.18) 100%),
    var(--img) !important;
}

/* testo e controlli sopra allo sfondo, non sotto */
.basket-item .info,
.basket-item .quantity-field,
.basket-item .remove {
  position: relative;
  z-index: 1;
}

.basket-item .title,
.basket-item .title a {
  color: #fff !important;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.basket-item .price {
  color: var(--crimson) !important;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.basket-item .price strong {
  color: inherit !important;
}

.basket-item .quantity {
  border-radius: 8px !important;
  font-variant-numeric: tabular-nums;
}

/* il bottone Remove usa .btn-secondary, che di default e' #ccc:
   un mattone grigio chiaro. Lo rendo un ghost rosso. */
.basket-item .remove {
  border-radius: 10px !important;
  color: #8b8496 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--line) !important;
}

.basket-item .remove:hover {
  color: #fff !important;
  background: rgba(255, 77, 77, 0.18) !important;
  border-color: rgba(255, 77, 77, 0.6) !important;
}

.basket-second-header {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid var(--line);
}

/* i +/- della quantita' (.btn-tertiary) */
.quantity-field .adjust {
  color: #cfc3cb !important;
  background: transparent !important;
  border: 0 !important;
}

.quantity-field .adjust:hover {
  color: #fff !important;
  background: rgba(255, 43, 43, 0.14) !important;
}

/* prezzo barrato / stato rimosso */
del,
.discount,
.removed {
  color: var(--color-removed) !important;
}

/* ============================================================
   6b) CHECKOUT  (checkout.html)
   Usa lo STESSO markup del pannello carrello (form.basket), quindi eredita
   gia' quasi tutto: item, immagine di sfondo, quantita', remove.
   Qui restano solo il contenitore, l'intestazione e il totale.
   NB: la pagina dove si inserisce la CARTA e' ospitata da Tebex e non si
   puo' ridisegnare. L'unica cosa che prende da noi e' --color-primary.
   ============================================================ */
.site-content > .basket {
  max-width: 760px;
  margin: 0 auto;
  border-radius: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  overflow: hidden;
}

.basket-header {
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--line);
}

.basket-title {
  margin: 0;
  font-family: var(--font);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 1.2px;
  color: #fff;
}

.basket-second-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid var(--line);
}

.basket-second-header .count {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* qui il totale lo voglio BIANCO: il rosso lo tengo per il totale finale,
   se sono due rossi uguali non si capisce quale conta */
.basket-second-header .total,
.basket-second-header .total strong {
  font-weight: 900;
  font-size: 18px;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}

.basket-content {
  padding: 18px 24px;
}

.basket-item .options {
  list-style: none;
  margin: 5px 0 0;
  padding: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.basket-item .options strong {
  color: #cfc3cb;
}

.basket-checkout {
  padding: 20px 24px 24px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--line);
}

.basket-checkout h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* il totale vero: grande e rosso, e' il numero che conta */
.basket-checkout .total,
.basket-checkout .total strong {
  font-size: 30px;
  font-weight: 900;
  color: var(--crimson) !important;
  text-shadow: 0 0 18px rgba(255, 43, 43, 0.45);
  font-variant-numeric: tabular-nums;
}

.btn-primary.checkout {
  width: 100%;
  min-height: 54px;
  font-size: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* ============================================================
   6c) CATEGORIE + CARD PRODOTTO  (category.html, package-entry.twig)
   ATTENZIONE: la pagina prodotto e' <main class="store-product store-product-full">,
   quindi ha ANCHE la classe .store-product. Se stilo .store-product da solo,
   gli finisce addosso lo stile della cardellina. Percio' scopo tutto dentro
   .store-products-* / .widget.
   ============================================================ */
.store-products-list,
.store-products-images {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: stretch;
}

.store-products-list .store-product,
.store-products-images .store-product,
.widget .store-product {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding: 24px 18px 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)) !important;
  border: 1px solid rgba(255, 43, 43, 0.22) !important;
  box-shadow: 0 0 22px rgba(255, 43, 43, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.store-products-list .store-product:hover,
.store-products-images .store-product:hover,
.widget .store-product:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 43, 43, 0.65) !important;
  box-shadow: 0 0 44px rgba(255, 43, 43, 0.25);
}

.store-products-list .image-link,
.store-products-images .image-link,
.widget .image-link {
  display: block;
}

.store-products-list .store-product .image,
.store-products-images .store-product .image,
.widget .store-product .image {
  width: 130px;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 43, 43, 0.35));
}

.store-products-list .store-product .product-title,
.store-products-images .store-product .product-title,
.widget .store-product .product-title {
  margin: 14px 0 0 !important;
  font-size: 16px !important;
  letter-spacing: 0.4px;
}

.store-products-list .store-product .product-title a,
.store-products-images .store-product .product-title a,
.widget .store-product .product-title a {
  color: #fff;
  text-decoration: none;
}

/* dentro la cardellina le azioni NON devono avere i separatori della
   pagina prodotto, e il bottone si prende tutta la larghezza */
.store-products-list .product-actions,
.store-products-images .product-actions,
.widget .product-actions {
  flex-direction: column;
  width: 100%;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.store-products-list .product-actions .price,
.store-products-images .product-actions .price,
.widget .product-actions .price {
  font-size: 20px;
  margin: 0 0 12px !important;
}

.store-products-list .product-actions .add,
.store-products-list .product-actions .subscribe,
.store-products-images .product-actions .add,
.store-products-images .product-actions .subscribe,
.widget .product-actions .add,
.widget .product-actions .subscribe {
  width: 100%;
  max-width: none;
  min-height: 44px;
}

.store-products-list .quantity-field,
.store-products-images .quantity-field,
.widget .quantity-field {
  width: 100%;
}

.category-description {
  padding: 22px 24px !important;
  margin-bottom: 22px;
  line-height: 1.7;
}

.no-products {
  padding: 40px 24px !important;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ============================================================
   6d) COLORE PER PACKAGE
   Rosso di default, ma una Prismatic Key e' magenta e una Celestial e' viola:
   una pagina prodotto tutta rossa per una key dell'End e' sbagliata.
   Lo script in layout.html legge data-package, risale al colore e scrive
   tre variabili sull'elemento:
       --pkg-c  colore        --pkg-g  lo stesso in RGB (per i glow)
       --pkg-t  colore del TESTO sul bottone: nero se il colore e' chiaro
                (Void, Legendary, Crimson++, Supporter), altrimenti bianco
   Senza --pkg-t, "ADD TO BASKET" bianco su oro sarebbe illeggibile.
   ============================================================ */

/* --- immagine: il glow prende il colore della key --- */
.has-pkg .image,
.has-pkg .store-product-full .image {
  filter: drop-shadow(0 0 34px rgba(var(--pkg-g), 0.45)) !important;
}

/* --- prezzo --- */
.has-pkg .product-actions .price,
.has-pkg .product-actions .price strong {
  color: var(--pkg-c) !important;
  text-shadow: 0 0 20px rgba(var(--pkg-g), 0.5) !important;
}

/* --- Add to Basket / Subscribe --- */
.has-pkg .product-actions .add,
.has-pkg .product-actions .subscribe {
  color: var(--pkg-t) !important;
  background: linear-gradient(90deg,
              rgba(var(--pkg-g), 0.82),
              rgba(var(--pkg-g), 1)) !important;
  border: 1px solid rgba(var(--pkg-g), 0.65) !important;
  box-shadow: 0 0 20px rgba(var(--pkg-g), 0.4) !important;
}

.has-pkg .product-actions .add:hover,
.has-pkg .product-actions .subscribe:hover {
  box-shadow: 0 0 32px rgba(var(--pkg-g), 0.65) !important;
}

/* --- "Added to Basket" e i +/- della quantita' --- */
.has-pkg .open-basket-cta {
  color: var(--pkg-c) !important;
  border-color: rgba(var(--pkg-g), 0.5) !important;
  background: rgba(var(--pkg-g), 0.12) !important;
}

.has-pkg .quantity-field {
  border-color: rgba(var(--pkg-g), 0.35) !important;
}

/* --- il bordo della card e del popup segue la key --- */
.store-products-list .store-product.has-pkg,
.store-products-images .store-product.has-pkg,
.widget .store-product.has-pkg {
  border-color: rgba(var(--pkg-g), 0.28) !important;
  box-shadow: 0 0 22px rgba(var(--pkg-g), 0.08);
}

.store-products-list .store-product.has-pkg:hover,
.store-products-images .store-product.has-pkg:hover,
.widget .store-product.has-pkg:hover {
  border-color: rgba(var(--pkg-g), 0.7) !important;
  box-shadow: 0 0 44px rgba(var(--pkg-g), 0.28);
}

.popup-content.has-pkg {
  border-color: rgba(var(--pkg-g), 0.4) !important;
  box-shadow: 0 0 70px rgba(var(--pkg-g), 0.22),
              0 30px 80px rgba(0, 0, 0, 0.75) !important;
}

/* --- carrello: prezzo e bordo nel colore dell'articolo --- */
.basket-item.has-pkg .price,
.basket-item.has-pkg .price strong {
  color: var(--pkg-c) !important;
}

.basket-item.has-pkg:hover {
  border-color: rgba(var(--pkg-g), 0.55) !important;
  box-shadow: inset 0 0 40px rgba(var(--pkg-g), 0.12) !important;
}

/* ---------- 7) TOAST ---------- */
.toast {
  border-radius: 12px !important;
  font-family: var(--font);
  font-weight: 700;
  background: var(--panel) !important;
  border: 1px solid rgba(255, 43, 43, 0.4) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

.toast-close {
  border-radius: 8px !important;
}

/* ---------- 8) SALDI / BANNER / CATEGORIE ---------- */
.site-sale-banner {
  border-radius: 12px !important;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(90deg, var(--crimson-dark), var(--crimson)) !important;
  color: #fff !important;
}

.site-home-categories .category {
  border-radius: 14px;
  padding: 20px var(--widget-padding);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  transition: color 0.2s ease, border-color 0.25s ease, transform 0.25s ease;
}

.site-home-categories .category:hover {
  color: var(--crimson);
  border-color: rgba(255, 43, 43, 0.5);
  transform: translateY(-3px);
}

.store-product-tiered {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
}

/* ---------- 9) WIDGET ---------- */
.widget-title {
  text-align: center;
  font-family: var(--font);
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
}

.widget-top-donator .avatar {
  border-radius: 50%;
  border: 2px solid rgba(255, 43, 43, 0.5);
}

.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--crimson-dark), var(--crimson));
  box-shadow: 0 0 14px rgba(255, 43, 43, 0.5);
}

.widget-gift-card .gift-card-input {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  color: #fff;
}

/* ---------- 10) NAVIGAZIONE (pagine interne) ---------- */
@media (width > 960px) {
  .navigation-horizontal > ul {
    border-radius: 12px;
  }
}

.navigation-horizontal .has-children > ul {
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

/* ---------- 11) SLIDER IMMAGINI PRODOTTO ---------- */
.media-slider .slider,
.media-slider .thumb,
.popup.popup-media-slider .thumb {
  border-radius: 12px;
}

.media-slider .thumb {
  border: 1px solid var(--line);
  transition: border-color 0.25s ease;
}

.media-slider .thumb:hover {
  border-color: rgba(255, 43, 43, 0.6);
}

.media-slider .open-lightbox {
  border-radius: 10px;
}

.popup.popup-media-slider .popup-close {
  border-radius: 10px;
}

/* ---------- 12) FOOTER ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
}

.site-footer .we-accept {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.site-footer .we-accept img {
  height: 24px;
  width: auto;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.site-footer .we-accept img:hover {
  opacity: 1;
  filter: none;
}

.site-footer .copyright {
  text-align: center;
  font-size: 12px;
  color: #6f6878;
  line-height: 1.6;
  margin: 0;
}