/* =========================================================
   CROCHETERSHUB - CSS CONSOLIDATO
   Obiettivi:
   - meno duplicazioni
   - meno conflitti
   - più responsive
   - stesso look & feel
   ========================================================= */

/* -------------------------
   1) VARIABILI (palette + scale)
   ------------------------- */
:root{
  /* Brand */
  --pink-100: #fed8fc;
  --pink-200: #fdc9fb;
  --pink-300: #ff65db;

  --purple-700: #722e6f;
  --purple-200: #eeb3eb;

  --danger: #ff0000;

  /* Neutri */
  --black: #000;
  --gray-100: #eee;
  --gray-300: #dfd9d9;
  --gray-500: #888;

  /* Dimensioni */
  --input-h: 40px;
  --input-pad: 1rem;

  --polaroid-photo-h: 400px;
  --digital-badge-w: 150px;

  --card-border-w: 4px;
  --card-radius: 8px;

  --shadow-soft: 0 0.4rem var(--gray-300);
}

/* -------------------------
   2) BASE
   ------------------------- */
body{
  background-image: url("foto/sfondo.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  font-family: 'Lucida Sans','Lucida Sans Regular','Lucida Grande','Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;
}

footer{
  width: 100%;
  padding: 10px;
}

/* Utility min-width:0 per evitare overflow in flex */
.minw-0{ min-width:0; }

/* -------------------------
   3) TOPBAR (logo sinistra + search centrata + icone destra)
   NOTA: evita doppia definizione che avevi prima
   ------------------------- */
.container-fluid.topbar{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.navbar-brand-wrap{
  flex: 0 0 auto;
  min-width: 0;
}

.topbar-logo{
  width: clamp(60px, 9vw, 100px);
  height: auto;
}

/* blocco destro (form + icone). La search verrà centrata in absolute */
.navbar-search-actions{
  flex: 0 0 auto;
  min-width: 0;
}

.topbar-form{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.topbar-actions{
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.6vw, 18px);
  flex: 0 0 auto;
}

/* riduce padding bootstrap sui link icona */
.topbar-actions .nav-link{
  padding-left: 6px;
  padding-right: 6px;
}

/* search centrata rispetto alla navbar */
.search-wrap{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 46vw);
  min-width: 220px;        /* placeholder sempre leggibile */
  max-width: 560px;
  z-index: 2;
  margin: 0;
}

/* -------------------------
   4) INPUTS
   ATTENZIONE: "input" è usato anche nello switch.
   Qui stiliamo SOLO l’input dentro .input-wrapper
   ------------------------- */
.input-wrapper input{
  background-color: var(--gray-100);
  border: none;
  padding: var(--input-pad);
  font-size: 1rem;
  width: 100%;
  height: var(--input-h);
  border-radius: 1rem;
  color: #131313; /* fix del bug: prima "fed8fc" senza # non funzionava */
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.input-wrapper input:focus{
  outline-color: var(--pink-100);
}

/* input della search */
.topbar-search{ width: 100%; }

/* -------------------------
   5) CARDS (decorative + cards prodotto/crocheter)
   ------------------------- */

/* card decorative (uiverse) - consolidate */
.card1,
.card2 {
  width: 100%;
  height: 100%;
  padding: 5px;
  border-radius: 1rem;
  overflow: hidden; 
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent; 
  border: none;
}

/* 1. IL BORDO: Colore originale + Scintilla bianca */
.card1::before,
.card2::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  
  /* Qui definiamo il colore del bordo originale e la luce bianca */
  background: conic-gradient(
    from 0deg,
    #ff69b4 0deg,        /* Sostituisci con il colore esatto del tuo bordo rosa */
    #ff69b4 280deg,      /* Colore bordo fisso */
    #ffffff 320deg,      /* Inizio luce bianca */
    #ffffff 340deg,      /* Fine luce bianca */
    #ff69b4 360deg       /* Ritorno al colore bordo */
  );
  
  animation: cardSpark 4s linear infinite;
  z-index: -2;
}

/* Applichiamo il gradiente specifico per la card 2 se il bordo deve essere diverso */
.card2::before {
  background: conic-gradient(
    from 0deg,
    #da70d6 0deg,        /* Colore bordo della card 2 */
    #da70d6 280deg,
    #ffffff 320deg,
    #ffffff 340deg,
    #da70d6 360deg
  );
}

/* 2. LO SFONDO INTERNO (Sempre con i tuoi gradienti originali) */
.card1::after,
.card2::after {
  content: "";
  position: absolute;
  inset: 2px; /* Spessore del bordo */
  border-radius: calc(1rem - 2px);
  z-index: -1;
  background: var(--background);
}

@keyframes cardSpark {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Se vuoi mantenere l'effetto ombra/glow esterna che avevi prima, 
   dobbiamo aggiungerlo a un elemento contenitore o usare box-shadow sul corpo della card */
.card1, .card2 {
  box-shadow: 0 10px 30px -10px rgba(155, 77, 167, 0.3);
}

.card-info{
  --color: #181818;
  background: var(--color);
  color: var(--color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: .7rem;
}

/* card principale */
.card3{
  width: 100%;
  height: fit-content;
  background-color: #ffeee7;
  border: var(--card-border-w) solid var(--purple-700);
  border-radius: var(--card-radius);
  text-align: center;
}

/* Mobile: rimuovi card3 + container solo nelle pagine listing */
@media (max-width: 767px) {
  .listing-page > .card3 {
    background-color: transparent;
    border: none;
    border-radius: 0;
  }
  .listing-page {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0 !important;
  }
}

/* card lista (legacy – kept for backward compat) */
.card_liste{
  width: 100%;
  height: fit-content;
  background-color: #fff;
  border: var(--card-border-w) solid var(--purple-700);
  border-radius: var(--card-radius);
  text-align: start;
}

/* ===== LIST CARD – modern horizontal card (wishlist / cart) ===== */
.list-card{
  display: flex;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8e0e8;
  transition: box-shadow .2s ease, transform .15s ease;
  margin-bottom: 0.75rem;
}
.list-card:hover{
  box-shadow: 0 6px 22px rgba(114,46,111,.10);
  transform: translateY(-2px);
}

/* image column */
.list-card__img-wrap{
  position: relative;
  flex: 0 0 160px;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #f9f6f9;
}
.list-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.list-card:hover .list-card__img{
  transform: scale(1.04);
}
.list-card__badge{
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(0,0,0,.7);
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* body */
.list-card__body{
  flex: 1;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.list-card__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.list-card__title{
  font-size: 1.05rem;
  font-weight: 700;
  color: #222;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.list-card__prices{
  text-align: right;
  flex-shrink: 0;
}
.list-card__price{
  font-size: 1rem;
  font-weight: 700;
  color: var(--purple-700, #722e6f);
}
.list-card__price-old{
  font-size: 0.78rem;
  color: #999;
  text-decoration: line-through;
  margin-top: 2px;
}
.list-card__sale{
  font-size: 0.65rem;
  font-weight: 700;
  background: #dc3545;
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.list-card__desc{
  font-size: 0.85rem;
  color: #555;
  margin-top: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

/* actions bar */
.list-card__actions{
  margin-top: auto;
  padding-top: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.list-card__btn{
  font-size: 0.82rem;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid var(--purple-700, #722e6f);
  background: transparent;
  color: var(--purple-700, #722e6f);
  font-weight: 600;
  transition: background .15s, color .15s;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
}
.list-card__btn:hover{
  background: var(--purple-700, #722e6f);
  color: #fff;
}
.list-card__btn--fill{
  background: var(--purple-700, #722e6f);
  color: #fff;
}
.list-card__btn--fill:hover{
  background: #5a2457;
}
.list-card__btn--danger{
  border-color: #dc3545;
  color: #dc3545;
}
.list-card__btn--danger:hover{
  background: #dc3545;
  color: #fff;
}

/* qty stepper */
.list-card__qty{
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
}
.list-card__qty button{
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1.5px solid var(--purple-700, #722e6f);
  background: transparent;
  color: var(--purple-700, #722e6f);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-card__qty button:hover:not(:disabled){
  background: var(--purple-700, #722e6f);
  color: #fff;
}
.list-card__qty button:disabled{
  opacity: .4;
  cursor: default;
}
.list-card__qty-input{
  width: 38px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.2rem 0;
  background: #fff;
}

/* checkbox overlay in cart */
.list-card__check{
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  width: 20px;
  height: 20px;
  accent-color: var(--purple-700, #722e6f);
  cursor: pointer;
}

/* responsive */
@media (max-width: 576px){
  .list-card{ flex-direction: column; }
  .list-card__img-wrap{ flex: none; width: 100%; aspect-ratio: 16/9; }
  .list-card__actions{ justify-content: center; }
  .list-card__qty{ margin-left: 0; }
}

/* Evita overflow testo */
.card3 .card-title,
.card3 .card-text{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* descrizione limitata (evita che esca dalla card su mobile) */
.card3 .card-text{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* hover su card (attenzione: prima avevi selector troppo generico) */
.card_hover{
  color: var(--black);
}
.card_hover:hover{
  color: var(--purple-700);
}
.card_hover:hover *{
  color: var(--purple-700);
  -webkit-text-fill-color: var(--purple-700);
  border-color: var(--purple-200);
}

.card_hover:hover button.btn.button2,
.card_hover:hover button.btn.button2 * {
  color: #000000 !important;
}


.card_hover:hover button.btn.button2 svg {
  fill: #000000 !important;
}

/* Quando la card è hoverata, ma sui bottoni button2 voglio bianco (anche su Chrome) */
.card_hover:hover button.btn.button2,
.card_hover:hover button.btn.button2 * {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important; /* QUESTA è la chiave */
}

/* SVG: ok così */
.card_hover:hover button.btn.button2 svg {
  fill: #000000 !important;
}

/* wrapper immagine + badge digitale */
.img-wrapper{ position: relative; }

.digital-badge{
  position: absolute;
  top: -10%;
  right: -10%;
  width: var(--digital-badge-w);
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   NAVBAR 2 – Responsive hamburger override
   Bootstrap navbar-expand-lg collapses at 992px, but with 10
   buttons we need to collapse earlier. Force hamburger between
   992px and 1399px so buttons never overflow.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hamburger toggle button styling (always, but only visible when collapsed) ── */
nav.navbar[style*="fed8fc"] .navbar-toggler {
  border: 2px solid #d470d1;
  border-radius: 10px;
  padding: 5px 10px;
  transition: background .2s, box-shadow .2s;
  outline: none !important;
  box-shadow: none !important;
}
nav.navbar[style*="fed8fc"] .navbar-toggler:hover,
nav.navbar[style*="fed8fc"] .navbar-toggler:focus {
  background: rgba(212, 112, 209, .15);
}

/* ── Force collapse at 1600px instead of 992px ── */
@media (min-width: 992px) and (max-width: 1599.98px) {
  nav.navbar.navbar-expand-lg[style*="fed8fc"] {
    flex-wrap: wrap !important;
  }
  nav.navbar.navbar-expand-lg[style*="fed8fc"] .navbar-toggler {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  nav.navbar.navbar-expand-lg[style*="fed8fc"] .navbar-collapse {
    display: none !important;
    flex-basis: 100%;
  }
  nav.navbar.navbar-expand-lg[style*="fed8fc"] .navbar-collapse.show,
  nav.navbar.navbar-expand-lg[style*="fed8fc"] .navbar-collapse.collapsing {
    display: block !important;
  }
  nav.navbar.navbar-expand-lg[style*="fed8fc"] .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 0;
  }
  nav.navbar.navbar-expand-lg[style*="fed8fc"] .navbar-nav .nav-item {
    width: 100%;
  }
  nav.navbar.navbar-expand-lg[style*="fed8fc"] .navbar-nav .nav-link {
    padding: 2px 8px;
  }
  nav.navbar.navbar-expand-lg[style*="fed8fc"] .navbar-nav .button1,
  nav.navbar.navbar-expand-lg[style*="fed8fc"] .navbar-nav .button4 {
    width: 100%;
    justify-content: flex-start;
  }
}

/* ── Collapsed menu dropdown styling (both <992 and 992-1599) ── */
@media (max-width: 1599.98px) {
  nav.navbar[style*="fed8fc"] .navbar-collapse.show,
  nav.navbar[style*="fed8fc"] .navbar-collapse.collapsing {
    background: rgba(254, 216, 252, .97);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 8px 24px rgba(114, 46, 111, .12);
    padding: 6px 10px 10px;
    max-height: 70vh;
    overflow-y: auto;
  }
  nav.navbar[style*="fed8fc"] .navbar-nav {
    gap: 2px;
  }
  nav.navbar[style*="fed8fc"] .navbar-nav .nav-item {
    width: 100%;
  }
  nav.navbar[style*="fed8fc"] .navbar-nav .nav-link {
    padding: 2px 4px;
  }
  nav.navbar[style*="fed8fc"] .navbar-nav .button1,
  nav.navbar[style*="fed8fc"] .navbar-nav .button4 {
    width: 100%;
    justify-content: flex-start;
    height: 2.75rem;
    font-size: 14px;
  }
}

/* -------------------------
   6) BUTTONS
   ------------------------- */

.btn-soft-round {
  border-radius: 14px !important;
}

.button1 {
  background-color: #f5b9f2;
  color: var(--black);
  height: 3rem;
  padding: 0 1rem; /* Aggiunto per dare respiro ai lati */
  border: var(--pink-100) 0.2rem solid;
  border-radius: 11px;
  
  /* Modifiche per l'allineamento orizzontale */
  display: inline-flex;     /* Permette al testo di stare accanto all'immagine */
  align-items: center;      /* Centra verticalmente immagine e testo */
  justify-content: center;   /* Centra il contenuto orizzontalmente */
  gap: 10px;                /* Spazio fisso tra immagine e testo */
  white-space: nowrap;      /* Impedisce al testo di andare a capo */
  
  text-align: center;
  transition: all 0.6s ease;
}

.button1:hover {
  background-color: #f794f2;
  border-color: white;
  cursor: pointer;
}

/* Assicurati che l'immagine interna non superi l'altezza del tasto */
.button1 img {
  max-height: 2rem;
  width: auto;
  display: block;
}

.button4 {
  /* Sfumatura da azzurro a grigio (sinistra -> destra) */
  background: linear-gradient(90deg, #b4e5fd, #7ebee9);
  
  color: var(--black, #000);
  height: 3rem;
  padding: 0 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: 600;
  
  /* Bordo più spesso e solido */
  border: 4px solid #383e42; 
  border-radius: 11px;
  
  cursor: pointer;
  transition: all 0.4s ease;
}

.button4:hover {
  /* Effetto al passaggio del mouse per renderlo dinamico */
  filter: brightness(1.05);
  transform: scale(1.02);
  border-color: #8fb3c4;
}

.btn-icon-img {
  /* Dimensioni relative al testo: 1em corrisponde alla grandezza del font attuale */
  width: 2.5em;
  height: 2.5em;
  
  /* Allineamento verticale perfetto con il testo */
  vertical-align: -0.125em; 
  
  /* Comportamento simile alle icone vettoriali */
  object-fit: contain;
  display: inline-block;
  
}


.button4 img.btn-icon-img {
  margin-right: 0.5rem;
}


.button2{
  border-color: var(--purple-700);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.button2:hover{
  background-color: var(--purple-700);
  color: #ffffff !important;
  fill: #ffffff !important; /* per le SVG */

}

/* Hover su button2 (testo + qualunque figlio) */
button.btn.button2:hover,
button.btn.button2:hover *,
a.btn.button2:hover,
a.btn.button2:hover * {
  color: #fff !important;
}

/* SVG: forza anche il fill */
button.btn.button2:hover svg,
a.btn.button2:hover svg {
  fill: #fff !important;
}

/* Hover: testo + icona bianchi */
button.btn.button2:hover,
button.btn.button2:focus {
  color: #fff !important;
}

/* Se vuoi essere ancora più aggressivo (dentro la card) */
.card3 button.btn.button2:hover,
.card3 button.btn.button2:focus {
  color: #fff !important;
}

/* L’SVG prende currentColor → basta color sopra.
   Ma nel caso tu abbia svg con fill "fisso" in altri punti: */
button.btn.button2:hover svg,
button.btn.button2:focus svg {
  fill: currentColor !important;
}


.salvato{
  background-color: var(--purple-700);
  color: #fff;
}

.delete{
  color: rgb(104,0,0);
  border-color: rgb(104,0,0);
}
.delete:hover{
  background-color: rgb(104,0,0);
  color: #fff;
}

button:disabled,
button[disabled] {
  cursor: auto !important;
  pointer-events: auto; /* così non diventa "bloccato" visivamente */
  opacity: 0.6;         /* opzionale, per far capire che è disabilitato */
}

/* Cursor freccia se disabled */
button.btn.btn-secondary:disabled,
button.btn.btn-secondary.disabled {
  cursor: default !important;
  pointer-events: none !important;
  opacity: .65;
}


/* Blocco anche l’hover se per qualche motivo entra lo stesso */
button.btn.btn-secondary:disabled:hover,
button.btn.btn-secondary.disabled:hover {
  color: inherit !important;
}

/* il link wrapper spesso "vince" il puntatore: rendilo un layer base */
.card3 > a {
  position: relative;
  z-index: 1;
}

/* ===== PRODUCT CARDS ===== */
.c-hub-card {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e0e0;
  transition: box-shadow .2s ease, transform .15s ease;
  display: flex;
  flex-direction: column;
}
.c-hub-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

/* Image wrapper */
.c-hub-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f9f9f9;
}
.c-hub-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.c-hub-card:hover .c-hub-card__img {
  transform: scale(1.04);
}

/* Wishlist heart button on image */
.c-hub-card__wish {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  z-index: 10 !important;
  background: rgba(255,255,255,.85) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: background .2s ease, transform .15s ease;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.c-hub-card__wish:hover {
  background: #fff !important;
  transform: scale(1.1);
}

/* Body */
/* Body */
.c-hub-card__body {
  padding: 10px 12px 14px;
  text-align: left;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.c-hub-card__title-link {
  text-decoration: none;
  color: inherit;
}
.c-hub-card__title {
  font-size: .9rem;
  font-weight: 500;
  color: #222;
  margin: 0 0 6px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.c-hub-card__title-link:hover .c-hub-card__title {
  text-decoration: underline;
}
.c-hub-card__link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  height: 100%;
}

/* Meta: stars + seller */
.c-hub-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: 0;
  font-size: .82rem;
  color: #666;
}
.c-hub-rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.c-hub-stars-value {
  font-weight: 700;
  color: #222;
  font-size: .82rem;
}
.c-hub-review-count {
  color: #888;
  font-size: .78rem;
}
.c-hub-card__seller {
  color: #888;
  font-size: .78rem;
}
.c-hub-card__seller::before {
  content: "\00B7";
  margin-right: 4px;
  color: #ccc;
}
.c-hub-card__seller a {
  color: inherit;
  text-decoration: underline;
}
.c-hub-card__seller a:hover {
  color: #555;
}

/* Price */
.c-hub-card__price {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.c-hub-card__price-now {
  font-weight: 700;
  font-size: 1.05rem;
  color: #222;
}
.c-hub-card__price-old {
  font-size: .88rem;
  color: #999;
  text-decoration: line-through;
}

/* Actions */
.c-hub-card__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.c-hub-card__cart-btn {
  flex: 1;
  border: 1.5px solid var(--purple-700);
  border-radius: 24px;
  padding: 7px 14px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--purple-700);
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.c-hub-card__cart-btn:hover {
  background: var(--purple-700);
  color: #fff;
}
.c-hub-card__cart-btn--added {
  background: var(--purple-700);
  color: #fff;
  border-color: var(--purple-700);
}
.c-hub-card__cart-btn--danger {
  border-color: #dc3545;
  color: #dc3545;
  background: #fff;
}
.c-hub-card__cart-btn--danger:hover {
  background: #dc3545;
  color: #fff;
}

/* ── Pattern filter toggles ── */
.pat-filter-toggle {
  border: 1.5px solid var(--purple-700);
  border-radius: 20px;
  padding: 5px 18px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--purple-700);
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  margin-right: 6px;
}
.pat-filter-toggle:hover {
  background: var(--purple-700);
  color: #fff;
}
.pat-filter-toggle--active {
  background: var(--purple-700);
  color: #fff;
  border-color: var(--purple-700);
}

/* ── Free pattern badge & download button ── */
.c-hub-card__price-free {
  color: #198754;
  font-weight: 700;
  font-size: 1.05rem;
}
.c-hub-card__download-btn {
  flex: 1;
  border: 1.5px solid #198754;
  border-radius: 24px;
  padding: 7px 14px;
  font-size: .82rem;
  font-weight: 600;
  color: #198754;
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.c-hub-card__download-btn:hover {
  background: #198754;
  color: #fff;
}

/* ── Mobile: hide seller, stack title above price ── */
@media (max-width: 767px) {
  .c-hub-card__seller { display: none !important; }

  .c-hub-card__body {
    flex-direction: column;
    align-items: flex-start;
  }
  .c-hub-card__title {
    order: -2;
  }
  .c-hub-card__price {
    margin-bottom: 4px;
    order: -1;
  }
  .c-hub-card__meta {
    margin-bottom: 0;
    order: 0;
  }
  .c-hub-card__actions {
    width: 100%;
    order: 1;
    margin-top: 4px;
  }
  .c-hub-card__stats {
    width: 100%;
    order: 0;
  }
}
/* ===== END C-HUB CARDS ===== */

/* ===== CROCHETER CARD VARIANTS ===== */
.c-hub-card__stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: .8rem;
  color: #555;
}
.c-hub-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.c-hub-card__follow-btn {
  flex: 1;
  border: 1.5px solid var(--purple-700);
  border-radius: 24px;
  padding: 7px 14px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--purple-700);
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.c-hub-card__follow-btn:hover {
  background: var(--purple-700);
  color: #fff;
}
/* ===== END CROCHETER CARDS ===== */

/* i bottoni devono stare SOPRA al link */
.card3 button.btn {
  position: relative;
  z-index: 5;
}

/* disabled: freccia + deve essere colpibile (se no passa al link sotto) */
.card3 button.btn:disabled,
.card3 button.btn.disabled {
  cursor: default !important;
  pointer-events: auto !important; /* fondamentale: non far passare il mouse al link */
  color: #fff !important;
  fill: #fff !important;
}

/* ===============================
   BTN-SECONDARY DISABLED → TESTO BIANCO
   =============================== */

.card_hover button.btn-secondary:disabled,
.card_hover button.btn-secondary.disabled {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important; /* FONDAMENTALE */
  cursor: default !important;
  opacity: 0.65;
  pointer-events: auto !important; /* evita che passi al <a> sotto */
}

/* Tutti i figli (testo, span, i, ecc.) */
.card_hover button.btn-secondary:disabled *,
.card_hover button.btn-secondary.disabled * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* SVG */
.card_hover button.btn-secondary:disabled svg,
.card_hover button.btn-secondary.disabled svg {
  fill: #ffffff !important;
}


/* stati */
.attivo{ background-color: var(--pink-100); }
.fixed{ position: sticky; left: 0; width: 100%; z-index: 1000; }
.round{ border-radius: 1.5%; }

/* -------------------------
   7) SWITCH TEMA SCURO
   NOTA: qui la checkbox ha class="input" nel tuo HTML: la lasciamo così,
   ma evitiamo di “invadere” altri .input (vedi InputContainer sotto).
   ------------------------- */
.switch{
  font-size: 12.75px;
  position: relative;
  display: inline-block;
  width: 48px;
  height: 25.5px;
}
.switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.slider{
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #73C0FC;
  transition: .4s;
  border-radius: 22.5px;
}

.slider:before{
  position: absolute;
  content: "";
  height: 22.5px;
  width: 22.5px;
  border-radius: 15px;
  left: 1.5px;
  bottom: 1.5px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
}

.sun svg{
  position: absolute;
  top: 4.5px;
  left: 27px;
  z-index: 1;
  width: 18px;
  height: 18px;
  animation: rotate 15s linear infinite;
}

.moon svg{
  fill: #73C0FC;
  position: absolute;
  top: 3.75px;
  left: 3.75px;
  z-index: 1;
  width: 18px;
  height: 18px;
  animation: tilt 5s linear infinite;
}

@keyframes rotate{
  0%{ transform: rotate(0); }
  100%{ transform: rotate(360deg); }
}

@keyframes tilt{
  0%{ transform: rotate(0deg); }
  25%{ transform: rotate(-10deg); }
  75%{ transform: rotate(10deg); }
  100%{ transform: rotate(0deg); }
}

/* questo selettore è volutamente specifico:
   checkbox con class "input" dentro .switch */
.switch .input:checked + .slider{ background-color: #183153; }
.switch .input:focus + .slider{ box-shadow: 0 0 1px #183153; }
.switch .input:checked + .slider:before{ transform: translateX(22.5px); }

/* -------------------------
   8) FOOTER: HOVER / SOCIAL
   (fix: prima avevi ".hoverA :hover" che colpisce anche figli in modo impreciso)
   ------------------------- */
.hoverA:hover{ color: var(--pink-300); }
.hoverB:hover{ color: var(--danger); }

.social:hover svg{ fill: var(--pink-300); }
.socialB:hover svg{ fill: var(--danger); }

/* Footer responsive helpers (se usi classi footer-ch / footer-head / footer-links) */
.footer-ch *{ min-width: 0; }

/* ── Footer logo shiny sweep ── */
.footer-logo-wrap{
  display: inline-block;
  position: relative;
  max-width: 150px;
}

.footer-logo-wrap img{
  display: block;
  width: 100%;
  height: auto;
}

/* Luce che scorre sul logo, ritagliata sulla forma del logo */
.footer-logo-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.12) 20%,
    rgba(255,255,255,0.4) 35%,
    rgba(255,252,255,0.55) 40%,
    rgba(255,255,255,0.4) 45%,
    rgba(255,255,255,0.12) 60%,
    transparent 80%
  );
  background-size: 300% 100%;
  background-position: -150% 0;
  animation: footerLogoSweep 6s linear infinite;
  pointer-events: none;
  will-change: background-position;

  /* Maschera: la luce è visibile solo sulla sagoma del logo */
  -webkit-mask-image: url(foto/logo_bordi.png);
          mask-image: url(foto/logo_bordi.png);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

@keyframes footerLogoSweep{
  0%   { background-position: -150% 0; }
  55%  { background-position: 250% 0; }
  100% { background-position: 250% 0; }
}

.footer-head{
  font-size: 25px;
  padding-bottom: 6px;
  border-bottom: 0.4rem outset var(--pink-300);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--black);
  width: 100%;
  max-width: 100%;
}

.footer-links{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 576px){
  .footer-head{
    justify-content: center;
    text-align: center;
  }
  .footer-links{
    align-items: center;
    text-align: center;
  }
}

/* -------------------------
   9) POLAROID
   (unifica polaroid e polaroid2: differiscono solo per rotate)
   ------------------------- */
.polaroid,
.polaroid2{
  width: 100%;
  padding: 15px 15px 40px 15px;
  background: #fff;
  box-shadow:
    0 1px 1px rgba(0,0,0,.12),
    0 2px 2px rgba(0,0,0,.12),
    0 4px 4px rgba(0,0,0,.12),
    0 8px 8px rgba(0,0,0,.12);
  transition: all 0.3s ease;
}

.polaroid{ transform: rotate(-2deg); }
.polaroid2{ transform: rotate(2deg); }

.polaroid:hover,
.polaroid2:hover{
  transform: rotate(0deg) scale(1.02);
  box-shadow:
    0 2px 2px rgba(0,0,0,.15),
    0 4px 4px rgba(0,0,0,.15),
    0 8px 8px rgba(0,0,0,.15),
    0 16px 16px rgba(0,0,0,.15);
}

.photo,
.photo2{
  width: 100%;
  height: 100%;
  background: #87ceeb;
  position: cover;
  overflow: hidden;
}

.photo::before,
.photo2::before{
  content: "";
  position: cover;
  inset: 0;
  z-index: 2;
}

/* -------------------------
   10) MENU PROFILO
   ------------------------- */
.menu_profilo{
  text-decoration: none;
  color: var(--black);
}
.menu_profilo:hover{
  color: var(--purple-700);
  font-weight: bold;
}

/* -------------------------
   11) CHECKBOX CUSTOM (ui-checkbox)
   (lasciata invariata, solo formattata)
   ------------------------- */
.ui-checkbox{
  --primary-color: var(--purple-700);
  --secondary-color: #fff;
  --primary-hover-color: var(--purple-700);
  --checkbox-diameter: 20px;
  --checkbox-border-radius: 5px;
  --checkbox-border-color: #d9d9d9;
  --checkbox-border-width: 1px;
  --checkbox-border-style: solid;
  --checkmark-size: 1.2;

  appearance: none;
  width: var(--checkbox-diameter);
  height: var(--checkbox-diameter);
  border-radius: var(--checkbox-border-radius);
  background: var(--secondary-color);
  border: var(--checkbox-border-width) var(--checkbox-border-style) var(--checkbox-border-color);
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

.ui-checkbox,
.ui-checkbox *,
.ui-checkbox *::before,
.ui-checkbox *::after{
  box-sizing: border-box;
}

.ui-checkbox::after{
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 calc(var(--checkbox-diameter) / 2.5) var(--primary-color);
  border-radius: inherit;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.12,0.4,0.29,1.46);
}

.ui-checkbox::before{
  top: 40%;
  left: 50%;
  content: "";
  position: absolute;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--secondary-color);
  border-bottom: 2px solid var(--secondary-color);
  transform: translate(-50%,-50%) rotate(45deg) scale(0);
  opacity: 0;
  transition: all 0.1s cubic-bezier(0.71,-0.46,0.88,0.6), opacity 0.1s;
}

.ui-checkbox:hover{ border-color: var(--primary-color); }

.ui-checkbox:checked{
  background: var(--primary-color);
  border-color: transparent;
}

.ui-checkbox:checked::before{
  opacity: 1;
  transform: translate(-50%,-50%) rotate(45deg) scale(var(--checkmark-size));
  transition: all 0.2s cubic-bezier(0.12,0.4,0.29,1.46) 0.1s;
}

.ui-checkbox:active:not(:checked)::after{
  transition: none;
  box-shadow: none;
  opacity: 1;
}

/* -------------------------
   12) DROP ZONE
   ------------------------- */
.drop-zone{
  border: 2px dashed #6c757d;
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  color: #6c757d;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.drop-zone.dragover{
  background-color: #f8f9fa;
  border-color: #0d6efd;
  color: #0d6efd;
}

.drop-zone img{
  max-width: 100%;
  margin-top: 15px;
  border-radius: 8px;
}

/* -------------------------
   13) INPUTCONTAINER (gradient pill)
   ATTENZIONE: qui c’è conflitto con .input dello switch.
   Per sicurezza, stiliamo .InputContainer .input (solo dentro container).
   ------------------------- */
.InputContainer{
  height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, var(--purple-700), var(--purple-200));
  border-radius: 30px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.075);
}

.InputContainer .input{
  width: 100%;
  height: 80%;
  border: none;
  outline: none;
  border-radius: 30px;
  color: #131313;
}

/* -------------------------
   14) SPINNER OVERLAY + SPINNER
   ------------------------- */
.spinner-overlay{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.spinner-overlay.hidden{ display: none !important; }

.spinner{
  --d: 24.6px;
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  color: var(--purple-700);
  box-shadow:
    calc(1*var(--d))       calc(0*var(--d))       0 0,
    calc(0.707*var(--d))  calc(0.707*var(--d))   0 1.1px,
    calc(0*var(--d))      calc(1*var(--d))       0 2.2px,
    calc(-0.707*var(--d)) calc(0.707*var(--d))   0 3.4px,
    calc(-1*var(--d))     calc(0*var(--d))       0 4.5px,
    calc(-0.707*var(--d)) calc(-0.707*var(--d))  0 5.6px,
    calc(0*var(--d))      calc(-1*var(--d))      0 6.7px;
  animation: spinner-rotate 1s infinite steps(8);
}

@keyframes spinner-rotate{
  100%{ transform: rotate(1turn); }
}

/* -------------------------
   15) BOOTSTRAP OVERRIDES (checkbox)
   ------------------------- */
.form-check-input:focus{
  border-color: var(--purple-700);
  box-shadow: 0 0 0 0.25rem rgba(114,46,111,0.25);
}
.form-check-input:checked{
  border-color: var(--purple-700);
  background-color: var(--purple-700);
}

/* -------------------------
   16) SEZIONI VARIE (pro, immagini, qty)
   ------------------------- */
.pro{ width: 100%; }
.pro:hover{ background-color: rgb(255,255,183); }

.pro-attivo{
  background-color: rgb(255,255,183);
  color:black;
  width: 100%;
}

.image-container{
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 10px;
}

.image-container img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: 0.3s ease;
}

.image-container::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: 0.3s ease;
  border-radius: 10px;
}

.image-container .delete-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 24px;
  opacity: 0;
  transition: 0.3s ease;
  cursor: pointer;
  color: rgb(233,233,67);
}

.image-container:hover::after,
.image-container:hover .delete-icon{
  opacity: 1;
}

/* rimuove spin button numero (qty-input) */
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* dropdown hover */
.dropdown-item:hover{
  background-color: var(--purple-700);
  color: #fff;
}

/* -------------------------
   17) FLATPICKR (plugin)
   ------------------------- */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange{
  background: var(--purple-700);
  border-color: var(--purple-700);
  color: #fff;
}

.flatpickr-day:hover{
  background: rgba(114,46,111,0.15);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month{
  fill: var(--purple-700);
}

.flatpickr-current-month{
  color: var(--purple-700);
}

/* -------------------------
   18) PRICE BOX
   ------------------------- */
.price-box{
  line-height: 1.2;
  padding-bottom: 2%;
}

.old-price{
  font-size: 0.8rem;
  color: var(--gray-500);
  text-decoration: line-through;
  text-align: center;
  margin-bottom: 2%;
}

.new-price{
  font-size: 1.1rem;
  font-weight: 700;
}

.price-wrapper{
  min-height: 48px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* -------------------------
   19) BUMP UI
   ------------------------- */
.bump-modal{
  border: 3px solid var(--purple-700);
  border-radius: 10px;
}

.bump-box{
  height: 100%;
  border: 2px solid var(--purple-700);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  background-color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.bump-box:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(114,46,111,0.25);
}

.bump-price{
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--purple-700);
  margin-bottom: 10px;
}

/* -------------------------
   20) BREAKPOINTS
   (prima avevi 3 blocchi separati + doppioni; qui consolidati)
   ------------------------- */
@media (max-width: 992px){
  :root{
    --input-pad: 0.9rem;
    --polaroid-photo-h: 320px;
    --digital-badge-w: 120px;
  }

  .drop-zone{ padding: 28px; }
  .bump-box{ padding: 16px; }
  .bump-price{ font-size: 1.25rem; }

  .old-price{ font-size: 0.78rem; }
  .new-price{ font-size: 1.05rem; }
}

@media (max-width: 768px){
  :root{
    --input-h: 38px;
    --input-pad: 0.85rem;
    --polaroid-photo-h: 260px;
    --digital-badge-w: 95px;
    --card-border-w: 3px;
    --card-radius: 10px;
  }

  .polaroid,
  .polaroid2{
    padding: 12px 12px 28px 12px;
  }

  .drop-zone{ padding: 18px; }
  .button1{ height: 2.75rem; }

  /* switch più comodo su touch */
  .switch{ width: 52px; height: 28px; }
  .slider:before{ height: 24px; width: 24px; }
  .switch .input:checked + .slider:before{ transform: translateX(24px); }
}

@media (max-width: 576px){
  :root{
    --input-h: 36px;
    --input-pad: 0.75rem;
    --polaroid-photo-h: 220px;
    --digital-badge-w: 78px;
  }

  .card1::after,
  .card2::after{
    filter: blur(18px);
    transform: scale(0.85);
  }

  .new-price{ font-size: 1rem; }
  .old-price{ font-size: 0.75rem; }

  .spinner{ --d: 22px; }
}

/* ── Homepage responsive ── */

/* ═══ Homepage Recommendation Sections ═══ */
.hp-section{
  padding: 2.5rem 5% 1rem;
}

.hp-section__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.hp-section__title{
  font-family: 'Pacifico', cursive;
  font-size: 1.6rem;
  color: #722e6f;
  margin: 0;
}

/* Scroll wrapper: relative for the arrow overlay */
.hp-section__scroll-wrap{
  position: relative;
}

/* Discover-more card at end of scroll row */
.hp-more-card{
  flex: 0 0 160px;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.hp-more-card__link{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  height: 100%;
  padding: 1.5rem 1rem;
  border-radius: 16px;
  border: 2px dashed #c78ec4;
  color: #722e6f;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.hp-more-card__link:hover{
  background: rgba(114,46,111,.06);
  border-color: #722e6f;
  transform: translateY(-4px);
  color: #722e6f;
  text-decoration: none;
}

/* Purple scroll arrows (left + right) */
.hp-section__arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(114,46,111,.88);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  transition: background .2s, opacity .3s;
  opacity: 1;
}
.hp-section__arrow--right{ right: 0; }
.hp-section__arrow--left{ left: 0; }
.hp-section__arrow:hover{
  background: #722e6f;
}
.hp-section__arrow.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.hp-section__scroll{
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: .75rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hp-section__scroll::-webkit-scrollbar{
  display: none;
}

/* Individual card sizing inside the scroll row */
.hp-card-link{
  flex: 0 0 220px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: flex;
}
.hp-card-link:hover{
  text-decoration: none;
  color: inherit;
}

.hp-card{
  width: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  display: flex;
  flex-direction: column;
}
.hp-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(114,46,111,.18);
}

/* ── Promoted campaign product cards ── */
.hp-card--promoted{
  border-width: 2px;
  box-shadow: 0 2px 12px rgba(114,46,111,.12);
}
.hp-card--promoted:hover{
  box-shadow: 0 8px 28px rgba(114,46,111,.22);
}
.hp-promoted-badge{
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  background: linear-gradient(135deg,#722e6f,#a94ca6);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .3px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(114,46,111,.25);
  pointer-events: none;
}

/* ── Rotating border glow (campaign borders) ── */
@keyframes borderGlow {
  to { transform: rotate(1turn); }
}
.hp-border-glow{
  position: relative;
  border-radius: 14px;
  padding: 3px;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 226px;
  scroll-snap-align: start;
  display: flex;
}
.hp-border-glow::before{
  content: '';
  position: absolute;
  inset: -80%;
  background: conic-gradient(
    from 0deg,
    transparent 0%, transparent 35%,
    var(--border-glow, #ff65db) 50%,
    transparent 65%, transparent 100%
  );
  animation: borderGlow 2.5s linear infinite;
  z-index: -1;
}
.hp-border-glow .c-hub-card{
  border: none;
  position: relative;
  z-index: 1;
}
.hp-border-glow .hp-promoted-badge{
  z-index: 4;
}

/* ── Join Us CTA ── */
.hp-join-us{
  padding: 2rem 0 3rem;
}

.hp-join-card{
  position: relative;
  border-radius: 20px;
  background: linear-gradient(135deg, #722e6f 0%, #a94da6 50%, #f3a7ef 100%);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  text-align: center;
  color: #fff;
  min-height: 320px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.hp-join-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(114,46,111,.35);
}

.hp-join-card__img{
  flex: 0 0 220px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-join-card__img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.hp-join-card__img--right{
  flex: 0 0 auto;
  width: auto;
}
.hp-join-card__img--right img{
  width: auto;
  height: 100%;
}

.hp-join-card__glow{
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.15) 0%, transparent 60%);
  pointer-events: none;
}

.hp-join-card__content{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.5rem 2rem;
}

.hp-join-card__icon{
  margin-bottom: 1rem;
  color: rgba(255,255,255,.9);
}

.hp-join-card__title{
  font-family: 'Pacifico', cursive;
  font-size: 1.8rem;
  margin-bottom: .75rem;
}

.hp-join-card__text{
  font-size: 1.05rem;
  max-width: 540px;
  margin: 0 auto 1.5rem;
  opacity: .92;
  line-height: 1.6;
}

.hp-join-card__btn{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .7rem 2rem;
  border-radius: 50px;
  background: #fff;
  color: #722e6f;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.hp-join-card__btn:hover{
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  color: #722e6f;
  text-decoration: none;
}

/* ── Responsive tweaks ── */
@media (max-width: 768px){
  .hp-section__title{ font-size: 1.3rem; }
  .hp-card-link{ flex: 0 0 180px; }
  .hp-border-glow{ flex: 0 0 186px; }
  .hp-section__arrow{ width: 36px; height: 36px; }
  .hp-join-card__img{ flex: 0 0 140px; }
  .hp-join-card__content{ padding: 1.5rem 1rem; }
  .hp-join-card__title{ font-size: 1.4rem; }
}

@media (max-width: 576px){
  .hp-section{ padding: 1.5rem 3% .5rem; }
  .hp-card-link{ flex: 0 0 160px; }
  .hp-border-glow{ flex: 0 0 166px; }
  .hp-section__arrow{ width: 32px; height: 32px; }
  .hp-join-card{ flex-direction: column; min-height: auto; }
  .hp-join-card__img{ flex: 0 0 auto; height: 160px; }
  .hp-join-card__img--left{ order: -1; }
  .hp-join-card__img--right{ order: 1; }
  .hp-join-card__content{ padding: 1.5rem 1rem; }
  .hp-join-card__text{ font-size: .92rem; }
}

/* ═══ PROMO CARDS ROW ═══ */
.hp-promo-row{
  padding: 0 5% 2rem;
}
.hp-promo-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.hp-promo{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  text-decoration: none !important;
  color: #fff;
  transition: transform .3s, box-shadow .3s;
}
.hp-promo:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  color: #fff;
}
/* backgrounds */
.hp-promo__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hp-promo__bg--gift{
  background: linear-gradient(135deg, #f857a6 0%, #ff5858 50%, #ffc371 100%);
}
.hp-promo__bg--tester{
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
}
.hp-promo__bg--tutorials{
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 50%, #a8edea 100%);
}
/* floating sparkle overlay */
.hp-promo__bg::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 35%, rgba(255,255,255,.2) 0%, transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(255,255,255,.12) 0%, transparent 45%);
  pointer-events: none;
}
/* content */
.hp-promo__content{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2.5rem 1.8rem;
  width: 100%;
}
.hp-promo__icon{
  margin-bottom: 1rem;
  opacity: .92;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.hp-promo__title{
  font-family: 'Pacifico', cursive;
  font-size: 1.5rem;
  margin-bottom: .75rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.hp-promo__text{
  font-size: .97rem;
  line-height: 1.55;
  opacity: .93;
  max-width: 320px;
  margin: 0 auto 1.4rem;
}
.hp-promo__cta{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem 1.6rem;
  border-radius: 50px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  font-weight: 700;
  font-size: .95rem;
  border: 1.5px solid rgba(255,255,255,.45);
  transition: background .25s, transform .2s;
}
.hp-promo:hover .hp-promo__cta{
  background: rgba(255,255,255,.38);
  transform: scale(1.04);
}

/* responsive */
@media (max-width: 992px){
  .hp-promo-grid{ grid-template-columns: repeat(3,1fr); gap: 1rem; }
  .hp-promo{ min-height: 300px; }
  .hp-promo__title{ font-size: 1.3rem; }
}
@media (max-width: 768px){
  .hp-promo-grid{ grid-template-columns: 1fr; gap: 1.2rem; max-width: 500px; margin: 0 auto; }
  .hp-promo{ min-height: 260px; }
}
@media (max-width: 576px){
  .hp-promo-row{ padding: 0 3% 1.5rem; }
  .hp-promo{ min-height: 240px; border-radius: 16px; }
  .hp-promo__title{ font-size: 1.2rem; }
  .hp-promo__text{ font-size: .9rem; }
}

/* Carousel: reserve space to avoid layout shift */
#carousel{ min-height: 30rem; }

/* Carousel images: override inline height on mobile */
@media (max-width: 768px){
  #carousel{ min-height: auto !important; background: transparent !important; }
  .carousel-item img{
    height: auto !important;
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width: 576px){
  #carousel{ min-height: auto !important; background: transparent !important; }
  .carousel-item img{
    height: auto !important;
    width: 100%;
  }
}

/* ── Prime pricing table mobile ── */
@media (max-width: 767.98px){
  .pricing-table{
    font-size: .78rem;
  }

  .pricing-table th,
  .pricing-table td{
    padding: .45rem .35rem;
    white-space: nowrap;
  }

  .pricing-col-options{
    min-width: 120px;
    white-space: normal !important;
    font-size: .72rem;
  }

  .pricing-col-plan{
    min-width: 80px;
  }

  .pricing-plan .plan-price{
    font-size: .85rem;
  }

  .pricing-plan .plan-name{
    font-size: .65rem;
  }
}

@media (max-width: 480px){
  .pricing-table{
    font-size: .7rem;
  }

  .pricing-col-options{
    min-width: 100px;
    font-size: .65rem;
  }

  .pricing-col-plan{
    min-width: 68px;
  }

  .pricing-plan .plan-price{
    font-size: .75rem;
  }

  .pricing-plan .plan-name{
    font-size: .6rem;
  }
}

/* sotto 520px: everything on one row */
@media (max-width: 520px){
  .container-fluid.topbar{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
  }

  .navbar-brand-wrap{
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  /* display:contents appiattisce i wrapper:
     figli diventano flex-items diretti di .topbar */
  .navbar-search-actions{
    display: contents !important;
  }

  .topbar-form{
    display: contents !important;
  }

  .topbar-actions{
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  .search-wrap{
    display: none !important;
  }

  /* Shrink logo a bit on very small screens */
  .topbar-logo {
    width: clamp(45px, 13vw, 70px) !important;
  }
}

/* ── Sticky footer: push footer to bottom on short pages ── */
html { height: 100%; }
body { min-height: 100%; display: flex; flex-direction: column; }
body > .container, body > .container-fluid, body > div:not(.spinner-overlay):not(.ch-alert-overlay):not(.modal):not(#cookieConsentBanner):not(nav):not(footer):not(script):not(style) {
  flex: 1 0 auto;
}
body > footer, body > .footer-ch { flex-shrink: 0; }

.image-checkbox {
  position: absolute;
  top: 8px;      /* regolabile */
  left: 8px;     /* oppure right: 8px */
  z-index: 10;
  cursor: pointer;
  transform: scale(1.2); /* opzionale */
}

:root{
  --ch-pink: #f7d6f2;
  --ch-pink-2: #ffdff7;
  --ch-lilac: #e9d6ff;
  --ch-purple: #6f2a6a;   /* viola del sito */
  --ch-purple-2: #8a3b84;
  --ch-cream: #fff8fb;
  --ch-text: #2f2230;
}

/* Banner */
.cookie-banner{
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1090; /* sopra al contenuto */
  background: linear-gradient(135deg, var(--ch-cream), var(--ch-pink-2));
  border: 2px solid rgba(111, 42, 106, .45);
  border-radius: 18px;
  padding: 14px 14px;
  display: none; /* mostrato via JS */
}

.cookie-banner__inner{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cookie-banner__text{
  min-width: 260px;
  flex: 1;
}

.cookie-title{
  font-weight: 800;
  color: var(--ch-purple);
  letter-spacing: .2px;
}

.cookie-desc{
  margin-top: 4px;
  color: rgba(47,34,48,.86);
  font-size: .95rem;
  line-height: 1.35rem;
}

.cookie-link{
  color: var(--ch-purple-2);
  font-weight: 700;
  text-decoration: underline;
}

.cookie-banner__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons */
.btn-cookie-primary{
  background: var(--ch-purple);
  color: #fff;
  border: 1px solid var(--ch-purple);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
}

.btn-cookie-primary:hover{
  background: var(--ch-purple-2);
  border-color: var(--ch-purple-2);
  color: #fff;
}

.btn-cookie-outline{
  background: transparent;
  border: 1px solid rgba(111, 42, 106, .55);
  color: var(--ch-purple);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
}

.btn-cookie-outline:hover{
  background: rgba(111, 42, 106, .08);
}

.btn-cookie-soft{
  background: rgba(233, 214, 255, .7);
  border: 1px solid rgba(111, 42, 106, .25);
  color: var(--ch-purple);
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
}

.btn-cookie-soft:hover{
  background: rgba(233, 214, 255, 1);
}

/* Modal */
.cookie-modal{
  border-radius: 18px;
  border: 2px solid rgba(111, 42, 106, .45);
  overflow: hidden;
  background: linear-gradient(180deg, #fff, var(--ch-cream));
}

.cookie-modal__header{
  background: linear-gradient(135deg, var(--ch-pink), var(--ch-lilac));
  border-bottom: 1px solid rgba(111, 42, 106, .2);
}

.cookie-modal__footer{
  border-top: 1px solid rgba(111, 42, 106, .12);
  background: #fff;
}

.cookie-card{
  background: #fff;
  border: 1px solid rgba(111, 42, 106, .18);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}

.cookie-card__title{
  font-weight: 900;
  color: var(--ch-text);
}

.cookie-card__desc{
  color: rgba(47,34,48,.78);
  margin-top: 4px;
  font-size: .95rem;
  line-height: 1.35rem;
}

/* Switch accent */
.form-switch .form-check-input{
  cursor: pointer;
}
.form-switch .form-check-input:checked{
  background-color: var(--ch-purple);
  border-color: var(--ch-purple);
}

/* Mobile spacing */
@media (max-width: 576px){
  .cookie-banner{
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-radius: 16px;
  }
}

.star-rating {
  font-size: 2rem;
  cursor: pointer;
  user-select: none;
}

.star {
  color: #ccc;
  transition: color 0.2s;
}

.star.active {
  color: #f5b301;
}

.review-img-box {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 5px;
  border: 2px solid #722e6f;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

.review-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-img-box::after {
  content: "✕";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s;
}

.review-img-box:hover::after {
  opacity: 1;
}

.review-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.review-stars{
  font-size: 1.05rem;
  line-height: 1;
  display: flex;
  gap: 4px;
}

.review-stars .bi-star-fill{
  color: #f4b400; /* oro */
}
.review-stars .bi-star{
  color: rgba(0,0,0,.20);
}

.review-date{
  color: rgba(0,0,0,.55);
  font-size: .9rem;
}

.review-title{
  font-weight: 700;
  font-size: 1.05rem;
}



.review-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: rgba(0,0,0,.06);
  color: rgba(0,0,0,.70);
  flex: 0 0 auto;
}

.review-title-inline{
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
}


.review-left{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}



/* IMPORTANTISSIMO: il contenitore delle recensioni non deve overfloware */
#div_recensioni{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* La card recensione NON deve mai superare il contenitore */
.review-box{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden; /* evita che elementi larghi escano */
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  margin: 12px 0 !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.08) !important;
}

/* Header come prima */
.review-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 12px;
}

/* Nome utente sopra contenuto, a sinistra */
.review-body{
  margin-top: 10px;
}

.review-user{
  font-weight: 800;
  text-align: left;
   margin-bottom: 6px;
}

.review-content{
  text-align: left;
  color: rgba(0,0,0,.80);
  white-space: pre-wrap;
}

/* Titolo centrato, non rompe la griglia */
.review-title-center{
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-box, .review-header, .review-body{
  max-width: 100%;
}

/* wrapper recensioni dentro la card rosa */
.card3 .reviews-wrap{
  width: 100%;
  max-width: 100%;
  padding: 0 4% 1rem;
  margin: 0;
  box-sizing: border-box;
  text-align: left;       /* override del center della card3 */
}

/* About section padding */
#about {
  padding: 0 4%;
}

/* card bianca recensione */
.card3 .review-box{
  width: 100%;            /* era 94% → così si centra visivamente */
  max-width: 100%;
  margin: 0.75rem auto;
  box-sizing: border-box;

  background: #fff;
  border: 0.0625rem solid rgba(0,0,0,.10); /* 1px → rem */
  border-radius: 0.875rem;                /* 14px → rem */
  padding: 1.125rem;                      /* 18px → rem */

  box-shadow: 0 0.625rem 1.375rem rgba(0,0,0,.08); /* rem */
}

/* header */
.card3 .review-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 0.75rem;   /* 12px → rem */
}

/* stelle + data */
.card3 .review-left{
  display: flex;
  align-items: center;
  gap: 0.625rem;         /* 10px → rem */
  flex-wrap: wrap;
  min-width: 0;
}

/* titolo centrato */
.card3 .review-title-center{
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;    /* già ok */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* corpo recensione */
.card3 .review-body{
  margin-top: 0.625rem;  /* 10px → rem */
  text-align: left;
}

.card3 .review-user{
  font-weight: 800;
  margin-bottom: 0.375rem; /* 6px → rem */
  text-align: left;
}

.card3 .review-content{
  text-align: left;
  color: rgba(0,0,0,.80);
  white-space: pre-wrap;
}

.card3 .review-images{
  margin-top: 0.75rem;
}

.card3 .review-images-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.5rem;
}

.card3 .review-thumb-btn{
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
}

.card3 .review-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.12s ease;
}

.card3 .review-thumb-btn:hover .review-thumb{
  transform: scale(1.03);
}

.image-modal-content{
  background: transparent;
  border: 0;
}

.image-modal-body{
  padding: 0;                          /* niente padding che sposta */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* wrapper = dimensione effettiva dell'immagine */
.image-modal-wrapper{
  position: relative;
  display: inline-block;
  max-width: 95vw;                      /* evita overflow orizzontale */
}

/* immagine */
.image-modal-img{
  display: block;
  max-width: 95vw;
  max-height: 85vh;
  border-radius: 1rem;
}

/* X sovrapposta all'angolo della foto */
.image-modal-x{
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;

  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;

  background: rgba(255,255,255,0.92);
  color: #000;
  font-size: 1.6rem;
  line-height: 2.25rem;               /* centra la × verticalmente */
  text-align: center;

  cursor: pointer;
  z-index: 10;
}

.card3 .review-left .badge{
  color: #155724 !important;          /* verde scuro leggibile */
  background-color: #d4edda !important;
}

.badge-outline {
  background: white;
  color: #dc3545;
  border: 2px solid #dc3545;
  font-weight: 700;
}

.tooltip-wrap > button:disabled {
  pointer-events: none;
}

/* stato iniziale: invisibile e leggermente giù */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}

/* quando entra in viewport */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* accessibilità: riduci animazioni se l’utente lo chiede */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    transform: none;
  }
}
.reveal { opacity: 0; transform: translateY(18px) scale(.98); }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }



@media (prefers-reduced-motion: reduce){
  .subcard{ transition: none; }
  .subcard:hover{ transform: none; }
}

/* wrapper: usa card3 come base */
.pricing-wrap{
  background-color: #ffeee7; /* come card3 */
}

/* titolo coerente col tuo */
.pricing-title{
  font-weight: 900;
  color: #2b2b2b;
  letter-spacing: .2px;
}

/* tabella: pulita, senza bordi bootstrap */
.pricing-table{
  margin-top: .5rem;
}
.pricing-table th,
.pricing-table td{
  border: none !important;
  padding: 1rem .85rem;
}

/* colonna opzioni */
.pricing-col-options{
  width: 28%;
  font-weight: 900;
  color: #2b2b2b;
}

/* righe alternate (stile soft) */
.pricing-table tbody tr:nth-child(odd) td{
  background: rgba(255,255,255,.35);
}
.pricing-table tbody tr:nth-child(even) td{
  background: rgba(255,255,255,.18);
}

/* header piani (come foto 1: fasce colorate) */
.pricing-plan{
  color: #fff;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 0 !important;
}
.pricing-plan .plan-top{
  padding: .9rem .6rem;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.plan-price{
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.1;
  border-color: #000;
  
}
.plan-price span{
  font-size: .9rem;
  font-weight: 800;
  opacity: .9;
  border-color: #000;
}
.plan-name{
  font-weight: 900;
  margin-top: .35rem;
  border-color: #000;
}

/* palette piani (poi li adattiamo se vuoi più “tuo”) */
.pricing-plan--free .plan-top{ background: grey; }
.pricing-plan--starter .plan-top{ background: #cfadf1; }
.pricing-plan--standard .plan-top{ background: #c975e6; }
.pricing-plan--business .plan-top{ background: #722e6f; }

/* celle check/x */
.pricing-cell{
  text-align: center;
  font-size: 1.2rem;
}
.pricing-cell .bi-check-lg{
  color: #2e8b57;
  font-weight: 900;
}
.pricing-cell .bi-x-lg{
  color: rgba(0,0,0,.35);
}

/* cta row */
.pricing-cta-row td{
  background: transparent !important;
  padding-top: 1.1rem;
}
.pricing-btn{
  border-radius: 8px;
  font-weight: 900;
  border: 2px solid var(--purple-700);
  color: var(--purple-700);
}
.pricing-btn:hover{
  background: var(--purple-700);
  color: #fff;
}

/* MOBILE cards */
.pricing-mobile{
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.pricing-mcard{
  border: var(--card-border-w) solid var(--purple-700);
  border-radius: var(--card-radius);
  background: rgba(255,255,255,.25);
  overflow: hidden;
}

.pricing-mcard .mhead{
  padding: 1rem;
  color: #fff;
}
.pricing-mcard .plan-price{ font-size: 1.5rem; border-color: #000; }
.pricing-mcard .plan-name{ font-size: 1.05rem; }

.pricing-mcard.pricing-plan--free .mhead{ background: grey; }
.pricing-mcard.pricing-plan--starter .mhead{ background: #f0a44a; }
.pricing-mcard.pricing-plan--standard .mhead{ background: #e65a49; }
.pricing-mcard.pricing-plan--business .mhead{ background: #8b2c63; }
.pricing-mcard.pricing-plan--premium .mhead{ background: #2d3a8c; }

.mlist{
  list-style: none;
  padding: 1rem;
  margin: 0;
  display: grid;
  gap: .5rem;
  font-weight: 700;
  color: #2b2b2b;
}
.mlist .bi-check-lg{ color: #2e8b57; }
.mlist .bi-x-lg{ color: rgba(0,0,0,.35); }

/* ── mobile pricing list items ── */
.mlist-yes,
.mlist-no,
.mlist-text{
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .88rem;
  line-height: 1.35;
}

.mlist-yes::before,
.mlist-no::before{
  flex-shrink: 0;
  font-weight: 900;
  font-size: 1rem;
  width: 1.15em;
  text-align: center;
}

.mlist-yes::before{
  content: "✓";
  color: #2e8b57;
}

.mlist-no::before{
  content: "✗";
  color: rgba(0,0,0,.30);
}

.mlist-no{
  opacity: .55;
}

.mlist-text::before{
  content: "›";
  color: #722e6f;
  font-weight: 900;
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.15em;
  text-align: center;
}

.pricing-mcard .plan-price span{
  font-size: .8rem;
  font-weight: 600;
  opacity: .85;
}

.pricing-mcard .plan-name{
  margin-top: .15rem;
}

/* ── Prime page mobile responsive ── */
@media (max-width: 767.98px){

  /* subcards: stack vertically, remove inline width */
  .subcard__inner .d-flex{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  .subcard__inner .d-flex .d-flex{
    flex-direction: column !important;
    align-items: center !important;
  }

  .subcard__icon,
  .subcard__iconWrap{
    width: 5rem !important;
    height: 5rem !important;
    margin-bottom: .75rem;
  }

  .subcard__inner .text-start{
    text-align: center !important;
  }

  .subcard__badge{
    margin-top: .75rem;
    align-self: center;
  }

  .subcard__meta{
    font-size: .82rem;
  }

  .subcard__micro{
    justify-content: center;
    flex-wrap: wrap;
  }

  .subcard__list{
    text-align: left;
    display: inline-block;
  }

  .subcard__tier ul{
    text-align: left;
    display: inline-block;
    padding-left: 1.25rem;
  }

  /* gift button full width on mobile */
  .btn-giftPremium{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* pricing table: extra scroll hint */
  .pricing-mobile{
    padding: 0 .25rem;
  }
}

@media (max-width: 575.98px){
  .subcard__inner{
    padding: 1.25rem !important;
  }

  .subcard__title{
    font-size: 1.1rem;
  }

  .subcard__desc{
    font-size: .85rem;
  }

  .pricing-mcard .mhead{
    padding: .85rem;
  }

  .pricing-mcard .plan-price{
    font-size: 1.3rem;
  }
}


.subcard{
  width: 100%;
  height: fit-content;
  border: calc(2* var(--card-border-w)) solid var(--sub-border);
  border-radius: calc(2*var(--card-radius));
  background-color: var(--sub-outer);
  text-align: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* ✅ padding raddoppiato */
.subcard__inner{
  background-color: grey;
  border-radius: calc(var(--card-radius) - 2px);
  padding: 2rem; /* prima 1rem */
}

/* ✅ palette grigi + interno più scuro */
.subcard--inactive{
  --sub-border: #3f3f3f;
  --sub-outer: #e1dfe0;
  --sub-inner: #cfcacc;   /* più scuro rispetto a prima */
  --sub-text: #2b2b2b;
  --sub-muted: #4f4f4f;
  --sub-line: rgba(0,0,0,.25);
}

.subcard,
.subcard *{
  color: var(--sub-text);
}

/* ✅ icona con immagine gomitolo */
.subcard__icon{
  width: 6rem;
  height: 6rem;
  border-radius: 8px;
  border: 4px solid var(--sub-border);
  background-color: rgb(255, 255, 255);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.subcard__icon-img{
  width: 100%;
  height: 100%;
  object-fit: cover;   /* riempie bene il quadrato */
  display: block;
}

.subcard__title{
  font-weight: 900;
  letter-spacing: .2px;
}

.subcard__tier{
  font-size: .95rem;
  font-weight: 800;
  color: var(--sub-border);
}

.subcard__desc{
  font-weight: 650;
  color: var(--sub-border);
  line-height: 1.25rem;
}

.subcard__badge{
  padding: .5rem .75rem;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid var(--sub-border);
  background-color: rgba(255,255,255,.25);
  color: var(--sub-muted);
  white-space: nowrap;
}

/* hover */
.subcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  border-color: #2a2a2a;
}

.subcard:focus-visible{
  outline: 3px solid rgba(80,80,80,.35);
  outline-offset: 3px;
}

/* ===== Customer Premium theme ===== */
.subcard--customer{
  /* colori base */
  --sub-border: #9b77c4;      /* viola del sito */
  --sub-outer: #f7efff;       /* outer soft */
  --sub-inner: #cfadf1;       /* main richiesto */
  --sub-text: #000000;
  --sub-muted: rgba(0,0,0,.65);
  --sub-line: rgba(114,46,111,.25);
  position: relative;
  overflow: hidden;
}

/* inner più "premium" (gradient + shine) */
.subcard--customer .subcard__inner{
  background: linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.12)),
              linear-gradient(135deg, #cfadf1, #9b77c4);
  border-radius: calc(1*var(--card-radius));
  padding: 2.25rem;
  position: relative;
}

/* effetto "shine" */
.subcard--customer .subcard__inner::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.404), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

/* bordi più curati */
.subcard--customer{
  border: calc(2* var(--card-border-w)) solid var(--sub-border);
  border-radius: calc(2*var(--card-radius));
  background-color: var(--sub-outer);
  box-shadow: 0 10px 26px rgba(114,46,111,.18);
}

/* icona: cornice più premium */
.subcard--customer .subcard__icon{
  border: 4px solid var(--sub-border);
  background: rgba(255,255,255,.8);
  border-radius: 14px;
}

/* testo */
.subcard--customer .subcard__tier{
  color: rgba(0,0,0,.75);
}

.subcard--customer .subcard__desc{
  color: rgba(0,0,0,.75);
}

/* badge active più elegante */
.subcard__badge--active{
  background: rgba(255,255,255,.55);
  border: 2px solid rgba(114,46,111,.45);
  color: #2b2b2b;
}

/* pill "Monthly" */
.subcard__pill{
  font-weight: 900;
  font-size: .78rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(114,46,111,.35);
  background: rgba(255,255,255,.45);
  color: rgba(0,0,0,.75);
}

/* meta */
.subcard__meta{
  font-size: .9rem;
  font-weight: 800;
  color: rgba(0,0,0,.68);
}

.subcard__em{
  font-weight: 900;
  color: rgba(0,0,0,.82);
}

.subcard__dot{
  margin: 0 .45rem;
  opacity: .6;
}

/* hover: più "wow" ma pulito */
.subcard--customer:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(114,46,111,.26);
  border-color: #9b77c4;
}

.subcard--customer:hover .subcard__badge--active{
  background: rgba(255,255,255,.70);
}

.subcard__tier ul,
.subcard__tier li{
  color: inherit;          /* eredita da .subcard__tier */
}

/* ===== moving light sweep (Customer Premium) ===== */
.subcard--customer .subcard__inner{
  position: relative;
  overflow: hidden; /* importante per tagliare la luce ai bordi */
}

/* lama di luce che si muove */
.subcard--customer .subcard__inner::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-80%;
  width: 60%;
  height: 180%;

  /* luce: fascia centrale + sfumature */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.18) 65%,
    rgba(255,255,255,0) 100%
  );

  transform: rotate(18deg) translateX(-120%);
  pointer-events:none;
  mix-blend-mode: screen;      /* rende l’effetto più “luce” */
  opacity: .55;

  animation: customerSweep 3.8s ease-in-out infinite;
}

/* animazione */
@keyframes customerSweep{
  0%   { transform: rotate(0deg) translateX(-140%); opacity: .0; }
  15%  { opacity: .55; }
  50%  { opacity: .60; }
  85%  { opacity: .55; }
  100% { transform: rotate(0deg) translateX(240%); opacity: 0; }
}

/* opzionale: rispetta utenti che disattivano animazioni */
@media (prefers-reduced-motion: reduce){
  .subcard--customer .subcard__inner::after{
    animation: none;
    opacity: .18;
    transform: rotate(18deg) translateX(30%);
  }
}


/* =========================
   SELLER PREMIUM (Luxury)
   Main color: #c975e6
========================= */

.subcard--sellerPremium{
  --main: #c975e6;

  /* palette premium */
  --bg-outer: rgba(255,255,255,.65);
  --bg-deep: rgba(201,117,230,.85);;                 /* base scura luxury */
  --txt: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);

  --stroke: rgba(201,117,230,.55);    /* bordo */
  --stroke-soft: rgba(201,117,230,.25);

  position: relative;
  border: 2px solid var(--stroke);
  border-radius: calc(2 * var(--card-radius));
  background: radial-gradient(1200px 400px at 20% 0%, rgba(201,117,230,.18), transparent 60%),
              radial-gradient(900px 500px at 80% 30%, rgba(255,255,255,.10), transparent 55%),
              linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.20));
  box-shadow:
    0 18px 44px rgba(23, 9, 33, .35),
    0 0 0 1px rgba(255,255,255,.10) inset;
  overflow: hidden;
  transform: translateZ(0); /* smooth */
}

.subcard--sellerPremium .subcard__inner{
  position: relative;
  border-radius: calc(1.6 * var(--card-radius));
  padding: 2.35rem;

  /* background premium: deep + main color */
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
    radial-gradient(900px 500px at 10% 0%, rgba(201,117,230,.45), transparent 60%),
    radial-gradient(700px 400px at 90% 10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, #130a19, var(--bg-deep));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

/* Orbs decor */
.subcard--sellerPremium .subcard__orb{
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  opacity: .8;
  pointer-events: none;
}
.subcard--sellerPremium .subcard__orb--1{
  width: 160px; height: 160px;
  top: -60px; left: 40px;
  background: radial-gradient(circle at 30% 30%, rgba(201,117,230,.9), rgba(201,117,230,0) 65%);
}
.subcard--sellerPremium .subcard__orb--2{
  width: 220px; height: 220px;
  top: -90px; right: -30px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
}

/* Iridescent border shine (animated) */
.subcard--sellerPremium::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: conic-gradient(
    from 220deg,
    rgba(201,117,230,0) 0deg,
    rgba(201,117,230,.55) 40deg,
    rgba(255,255,255,.20) 80deg,
    rgba(201,117,230,.55) 120deg,
    rgba(201,117,230,0) 180deg,
    rgba(255,255,255,.18) 240deg,
    rgba(201,117,230,.45) 300deg,
    rgba(201,117,230,0) 360deg
  );
  filter: blur(10px);
  opacity: .55;
  pointer-events:none;
  mix-blend-mode: screen;
}

/* moving shimmer on inner */
.subcard--sellerPremium .subcard__inner::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.10) 30%,
    rgba(255,255,255,.22) 45%,
    rgba(201,117,230,.18) 55%,
    transparent 80%
  );
  transform: rotate(12deg) translateX(-30%);
  animation: premiumShimmer 4.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes premiumShimmer{
  0%   { transform: rotate(12deg) translateX(-35%); opacity:.35; }
  50%  { transform: rotate(12deg) translateX(35%);  opacity:.55; }
  100% { transform: rotate(12deg) translateX(-35%); opacity:.35; }
}

/* ICON wrap + pro tag */
.subcard--sellerPremium .subcard__iconWrap{
  position: relative;
  display: grid;
  place-items: center;
}

.subcard--sellerPremium .subcard__icon{
  width: 74px;
  height: 74px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.20), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    0 0 0 2px rgba(201,117,230,.25) inset;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.subcard--sellerPremium .subcard__icon::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 30% 20%, rgba(201,117,230,.65), transparent 55%);
  opacity:.55;
  pointer-events:none;
}

.subcard--sellerPremium .subcard__icon-img{
  width: 62px;
  height: 62px;
  object-fit: cover;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.35));
}

.subcard--sellerPremium .subcard__proTag{
  position: absolute;
  bottom: -10px;
  right: -10px;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .06em;
  padding: .25rem .55rem;
  border-radius: 999px;
  color: rgba(0,0,0,.85);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(201,117,230,.60));
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 10px 20px rgba(0,0,0,.28);
}

/* Title & text */
.subcard--sellerPremium .subcard__title{
  font-style: italic;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--txt);
  text-shadow: 0 10px 20px rgba(0,0,0,.30);
}

.subcard--sellerPremium .subcard__tier,
.subcard--sellerPremium .subcard__desc,
.subcard--sellerPremium .subcard__meta{
  color: var(--muted);
}

.subcard--sellerPremium .subcard__desc{
  line-height: 1.35;
}

/* List clean premium */
.subcard--sellerPremium .subcard__list{
  margin: .35rem 0 0;
  padding-left: 1.1rem;
}
.subcard--sellerPremium .subcard__list li{
  margin: .18rem 0;
}
.subcard--sellerPremium .subcard__list strong{
  color: rgba(255,255,255,.92);
}

/* Pills */
.subcard--sellerPremium .subcard__pill{
  font-weight: 900;
  font-size: .78rem;
  padding: .28rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.82);
  backdrop-filter: blur(6px);
}

.subcard--sellerPremium .subcard__pill--glow{
  border-color: rgba(201,117,230,.45);
  box-shadow: 0 0 0 2px rgba(201,117,230,.18) inset;
}

/* Meta */
.subcard--sellerPremium .subcard__em{
  font-weight: 950;
  color: rgba(255,255,255,.92);
}
.subcard--sellerPremium .subcard__dot{ opacity: .6; margin: 0 .45rem; }

/* Chips micro */
.subcard--sellerPremium .subcard__micro{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.subcard--sellerPremium .subcard__chip{
  font-size: .78rem;
  font-weight: 850;
  padding: .28rem .55rem;
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  background: rgba(201,117,230,.14);
  border: 1px solid rgba(201,117,230,.28);
}

/* Active badge */
.subcard--sellerPremium .subcard__badge--active{
  display: inline-flex;
  align-items: center;
  gap: .45rem;

  padding: .35rem .75rem;
  border-radius: 999px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 18px rgba(0,0,0,.28);
}

.subcard--sellerPremium .subcard__badgeDot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(201,117,230,.95);
  box-shadow: 0 0 0 4px rgba(201,117,230,.18);
}

/* Hover / Focus (wow ma pulito) */
.subcard--sellerPremium{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.subcard--sellerPremium:hover{
  transform: translateY(-3px);
  border-color: rgba(201,117,230,.85);
  box-shadow:
    0 26px 60px rgba(23, 9, 33, .45),
    0 0 0 1px rgba(255,255,255,.14) inset;
}

.subcard--sellerPremium:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 4px rgba(201,117,230,.85),
    0 26px 60px rgba(23, 9, 33, .45);
}
/* =========================
   BUSINESS ELITE (Ultra Luxury)
   Main: #c975e6
========================= */

.subcard--businessElite{
  --main: #c975e6;
  --gold: #f2d27c;

  --txt: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.72);

  --deep1: #120816;
  --deep2: #2b1235;

  position: relative;
  border-radius: calc(2 * var(--card-radius));
  overflow: hidden;

  /* “neon silk” outer */
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(1000px 460px at 10% 0%, rgba(201,117,230,.20), transparent 55%),
    radial-gradient(900px 520px at 95% 20%, rgba(242,210,124,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.18));
  box-shadow:
    0 22px 58px rgba(16, 5, 22, .45),
    0 0 0 1px rgba(255,255,255,.08) inset;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* animated iridescent border layer */
.subcard--businessElite::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: conic-gradient(
    from 210deg,
    rgba(201,117,230,0) 0deg,
    rgba(201,117,230,.62) 35deg,
    rgba(242,210,124,.38) 70deg,
    rgba(255,255,255,.18) 95deg,
    rgba(201,117,230,.58) 135deg,
    rgba(201,117,230,0) 190deg,
    rgba(242,210,124,.30) 250deg,
    rgba(201,117,230,.48) 315deg,
    rgba(201,117,230,0) 360deg
  );
  filter: blur(10px);
  opacity: .62;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: eliteBorder 6s linear infinite;
}

@keyframes eliteBorder{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.subcard--businessElite .subcard__inner{
  position: relative;
  border-radius: calc(1.6 * var(--card-radius));
  padding: 2.45rem;

  background:
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.06)),
    radial-gradient(900px 520px at 12% 0%, rgba(201,117,230,.50), transparent 60%),
    radial-gradient(700px 420px at 92% 18%, rgba(242,210,124,.22), transparent 58%),
    linear-gradient(135deg, var(--deep1), var(--deep2));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 1px rgba(0,0,0,.28) inset;
}

/* richer shimmer */
.subcard--businessElite .subcard__inner::after{
  content:"";
  position:absolute;
  inset:-45%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.08) 28%,
    rgba(242,210,124,.16) 44%,
    rgba(255,255,255,.22) 52%,
    rgba(201,117,230,.16) 60%,
    transparent 82%
  );
  transform: rotate(12deg) translateX(-32%);
  animation: premiumShimmerElite 4.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes premiumShimmerElite{
  0%   { transform: rotate(12deg) translateX(-38%); opacity:.35; }
  50%  { transform: rotate(12deg) translateX(38%);  opacity:.62; }
  100% { transform: rotate(12deg) translateX(-38%); opacity:.35; }
}

/* orbs */
.subcard--businessElite .subcard__orb{
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  opacity: .85;
  pointer-events: none;
}
.subcard--businessElite .subcard__orb--1{
  width: 180px; height: 180px;
  top: -70px; left: 40px;
  background: radial-gradient(circle at 30% 30%, rgba(201,117,230,.95), rgba(201,117,230,0) 65%);
}
.subcard--businessElite .subcard__orb--2{
  width: 240px; height: 240px;
  top: -100px; right: -40px;
  background: radial-gradient(circle at 30% 30%, rgba(242,210,124,.55), rgba(242,210,124,0) 70%);
}

/* crown */
.subcard--businessElite .subcard__crown{
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .7rem;
  border-radius: 999px;
  font-weight: 950;
  letter-spacing: .08em;
  font-size: .74rem;

  color: rgba(0,0,0,.86);
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(242,210,124,.68));
  border: 1px solid rgba(255,255,255,.32);
  box-shadow: 0 14px 28px rgba(0,0,0,.32);
  z-index: 3;
}
.subcard--businessElite .subcard__crownSvg{
  width: 18px;
  height: 18px;
  fill: rgba(0,0,0,.80);
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.18));
}

/* icon */
.subcard--businessElite .subcard__iconWrap{
  position: relative;
  display: grid;
  place-items: center;
}
.subcard--businessElite .subcard__icon{
  width: 76px;
  height: 76px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 12px 28px rgba(0,0,0,.38),
    0 0 0 2px rgba(242,210,124,.18) inset,
    0 0 0 1px rgba(201,117,230,.20) inset;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.subcard--businessElite .subcard__icon::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 30% 20%, rgba(242,210,124,.48), transparent 55%);
  opacity:.60;
  pointer-events:none;
}
.subcard--businessElite .subcard__icon-img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.38));
}

/* tag under icon */
.subcard--businessElite .subcard__proTag--elite{
  background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(242,210,124,.62));
  color: rgba(0,0,0,.86);
  border: 1px solid rgba(255,255,255,.30);
}

/* title/text */
.subcard--businessElite .subcard__title{
  font-style: italic;
  font-weight: 950;
  letter-spacing: .2px;
  color: var(--txt);
  text-shadow: 0 14px 22px rgba(0,0,0,.34);
}
.subcard--businessElite .subcard__tier,
.subcard--businessElite .subcard__desc,
.subcard--businessElite .subcard__meta{
  color: var(--muted);
}

.subcard--businessElite .subcard__list{
  margin: .35rem 0 0;
  padding-left: 1.1rem;
}
.subcard--businessElite .subcard__list li{ margin: .18rem 0; }
.subcard--businessElite .subcard__list strong{ color: rgba(255,255,255,.93); }

/* pills */
.subcard--businessElite .subcard__pill{
  font-weight: 900;
  font-size: .78rem;
  padding: .28rem .62rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.84);
  backdrop-filter: blur(6px);
}
.subcard--businessElite .subcard__pill--glow{
  border-color: rgba(201,117,230,.45);
  box-shadow: 0 0 0 2px rgba(201,117,230,.16) inset;
}
.subcard--businessElite .subcard__pill--gold{
  border-color: rgba(242,210,124,.38);
  box-shadow: 0 0 0 2px rgba(242,210,124,.12) inset;
}

/* meta + chips */
.subcard--businessElite .subcard__em{
  font-weight: 950;
  color: rgba(255,255,255,.92);
}
.subcard--businessElite .subcard__dot{ opacity: .6; margin: 0 .45rem; }

.subcard--businessElite .subcard__micro{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.subcard--businessElite .subcard__chip{
  font-size: .78rem;
  font-weight: 850;
  padding: .28rem .55rem;
  border-radius: 999px;
  color: rgba(255,255,255,.86);
  background: rgba(201,117,230,.14);
  border: 1px solid rgba(201,117,230,.28);
}
.subcard--businessElite .subcard__chip--gold{
  background: rgba(242,210,124,.14);
  border-color: rgba(242,210,124,.26);
}

/* active badge */
.subcard--businessElite .subcard__badge--active{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 22px rgba(0,0,0,.30);
}
.subcard--businessElite .subcard__badgeDot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(242,210,124,.95);
  box-shadow: 0 0 0 4px rgba(242,210,124,.16);
}

/* hover / focus */
.subcard--businessElite:hover{
  transform: translateY(-4px);
  box-shadow:
    0 30px 72px rgba(16, 5, 22, .55),
    0 0 0 1px rgba(255,255,255,.12) inset;
}
.subcard--businessElite:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px rgba(201,117,230,.22),
    0 30px 72px rgba(16, 5, 22, .55);
}

/* ===== Subscription Modal (Premium) ===== */
.submodal{
  --main:#c975e6;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(201,117,230,.25);
  box-shadow: 0 26px 70px rgba(20, 8, 28, .45);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
}

.submodal__header{
  background:
    radial-gradient(800px 240px at 0% 0%, rgba(201,117,230,.18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.90));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.submodal__icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items:center;
  background: linear-gradient(135deg, rgba(201,117,230,.18), rgba(255,255,255,.8));
  border: 1px solid rgba(201,117,230,.22);
}
.submodal__iconSvg{ width: 22px; height: 22px; fill: rgba(0,0,0,.72); }

.submodal__subtitle{
  font-weight: 800;
  font-size: .92rem;
  color: rgba(0,0,0,.60);
}
.submodal__planName{ color: rgba(0,0,0,.80); font-weight: 900; }
.submodal__dot{ margin: 0 .4rem; opacity:.55; }
.submodal__muted{ font-weight: 800; opacity:.9; }

.submodal__close{ opacity: .75; }

.submodal__body{ padding: 1.25rem 1.25rem 1.1rem; }

.submodal__sectionTitle{
  font-weight: 950;
  letter-spacing: .2px;
  color: rgba(0,0,0,.78);
  margin-bottom: .65rem;
}

.submodal__periodGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}

@media (min-width: 992px){
  .submodal__periodGrid{ grid-template-columns: 1fr 1fr; }
}

.submodal__periodCard{
  cursor: pointer;
  user-select: none;
}
.submodal__radio{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.submodal__periodInner{
  height: 100%;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.submodal__periodTitle{
  font-weight: 950;
  color: rgba(0,0,0,.80);
}
.submodal__periodDesc{
  font-weight: 800;
  font-size: .9rem;
  color: rgba(0,0,0,.60);
  margin-top: .15rem;
}
.submodal__price{
  font-weight: 950;
  color: rgba(0,0,0,.82);
}

.submodal__save{
  margin-left: .4rem;
  font-weight: 950;
  font-size: .78rem;
  padding: .18rem .45rem;
  border-radius: 999px;
  border: 1px solid rgba(201,117,230,.25);
  background: rgba(201,117,230,.10);
  color: rgba(0,0,0,.72);
}

.submodal__hint{
  margin-top: .65rem;
  font-weight: 800;
  font-size: .9rem;
  color: rgba(0,0,0,.58);
}

/* checked state */
.submodal__periodCard:has(input:checked) .submodal__periodInner{
  border-color: rgba(201,117,230,.55);
  box-shadow: 0 16px 30px rgba(201,117,230,.14);
  transform: translateY(-1px);
  background:
    radial-gradient(700px 220px at 10% 0%, rgba(201,117,230,.14), transparent 55%),
    rgba(255,255,255,.84);
}

/* summary block */
.submodal__summary{
  margin-top: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background:
    radial-gradient(800px 220px at 0% 0%, rgba(201,117,230,.12), transparent 60%),
    rgba(255,255,255,.78);
  padding: 1rem;
}

.submodal__summaryLabel{
  font-weight: 850;
  color: rgba(0,0,0,.58);
}
.submodal__summaryValue{
  font-weight: 950;
  color: rgba(0,0,0,.78);
}
.submodal__divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: .75rem 0;
}

.submodal__totalLabel{
  font-weight: 950;
  color: rgba(0,0,0,.75);
}
.submodal__totalValue{
  font-weight: 950;
  color: rgba(0,0,0,.86);
  font-size: 1.15rem;
}
.submodal__currency{
  font-size: .92rem;
  font-weight: 900;
  color: rgba(0,0,0,.62);
  margin-left: .35rem;
}

.submodal__fineprint{
  margin-top: .55rem;
  font-weight: 800;
  font-size: .88rem;
  color: rgba(0,0,0,.55);
}

/* footer buttons */
.submodal__footer{
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.92);
}

.submodal__btnPrimary{
  background: linear-gradient(135deg, rgba(201,117,230,.95), rgba(201,117,230,.70));
  color: #fff;
  font-weight: 950;
  border: 1px solid rgba(201,117,230,.35);
  box-shadow: 0 16px 30px rgba(201,117,230,.18);
  border-radius: 12px;
  padding: .7rem 1.05rem;
}

.submodal__btnPrimary:hover{
  filter: brightness(1.02);
  box-shadow: 0 20px 38px rgba(201,117,230,.25);
}

.submodal__btnSecondary{
  border-radius: 12px;
  font-weight: 900;
}

.submodal__arrow{ margin-left: .4rem; font-weight: 950; }

/* ===== Gift modal extras (same submodal style) ===== */
.submodal__planGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
@media (min-width: 992px){
  .submodal__planGrid{ grid-template-columns: 1fr 1fr 1fr; }
}

.submodal__planCard{ cursor:pointer; user-select:none; }
.submodal__planInner{
  height: 100%;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.submodal__planTitle{ font-weight: 950; color: rgba(0,0,0,.80); }
.submodal__planDesc{ font-weight: 800; font-size: .9rem; color: rgba(0,0,0,.60); margin-top:.15rem; }

.submodal__planCard:has(input:checked) .submodal__planInner{
  border-color: rgba(201,117,230,.55);
  box-shadow: 0 16px 30px rgba(201,117,230,.14);
  transform: translateY(-1px);
  background:
    radial-gradient(700px 220px at 10% 0%, rgba(201,117,230,.14), transparent 55%),
    rgba(255,255,255,.84);
}

/* tiny pills */
.submodal__pillTiny{
  font-weight: 950;
  font-size: .72rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
  color: rgba(0,0,0,.68);
}
.submodal__pillTiny--main{
  border-color: rgba(201,117,230,.25);
  background: rgba(201,117,230,.10);
}
.submodal__pillTiny--gold{
  border-color: rgba(242,210,124,.35);
  background: rgba(242,210,124,.16);
}

/* inputs coherent */
.submodal__label{
  font-weight: 900;
  color: rgba(0,0,0,.72);
  margin-bottom: .25rem;
}
.submodal__input{
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  font-weight: 800;
}
.submodal__input:focus{
  border-color: rgba(201,117,230,.55);
  box-shadow: 0 0 0 .2rem rgba(201,117,230,.18);
}
.submodal__help{
  margin-top: .35rem;
  font-weight: 800;
  font-size: .88rem;
  color: rgba(0,0,0,.55);
}

/* ===== Gift Membership Premium Button ===== */
.btn-giftPremium{
  --main: #c975e6;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none;
  padding: 0;
  border-radius: 16px;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  text-decoration: none;

  box-shadow:
    0 18px 40px rgba(201,117,230,.25),
    0 0 0 1px rgba(201,117,230,.35);
}

/* background layer */
.btn-giftPremium__bg{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.12)),
    linear-gradient(135deg, #c975e6, #9b77c4);
  z-index: -1;
}



/* content */
.btn-giftPremium__content{
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: .9rem 1.25rem;
  color: #fff;
  font-weight: 900;
  text-align: left;
}

/* icon */
.btn-giftPremium__icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.btn-giftPremium__icon svg{
  width: 22px;
  height: 22px;
  fill: #fff;
}

/* text */
.btn-giftPremium__title{
  display: block;
  font-size: 1rem;
  line-height: 1.1;
}
.btn-giftPremium__subtitle{
  display: block;
  font-size: .8rem;
  font-weight: 800;
  opacity: .9;
}

/* arrow */
.btn-giftPremium__arrow{
  font-size: 1.4rem;
  font-weight: 900;
  opacity: .85;
  transition: transform .18s ease;
  place-items: end;
}

/* hover / focus */
.btn-giftPremium:hover{
  box-shadow:
    0 26px 60px rgba(201,117,230,.38),
    0 0 0 1px rgba(201,117,230,.55);
}
.btn-giftPremium:hover .btn-giftPremium__arrow{
  transform: translateX(4px);
}
.btn-giftPremium:active{
  transform: translateY(1px);
}

.btn-giftPremium{
  min-width: 340px;          /* ⬅️ aumenta un po’ la width */
}

.btn-giftPremium__content{
  width: 100%;
  justify-content: space-between; /* ⬅️ distribuisce meglio icon | testo | arrow */
}

/* =========================================
   Checkout-like modal style (matches screenshot)
   Target: .modal-checkout / .checkout-*
========================================= */
.modal-checkout { --c-accent: #b66bff; --c-accent2:#ff7fd1; }

.modal-checkout .checkout-shell{
  border: 1px solid rgba(182,107,255,.22);
  border-radius: 18px;
  background:
    radial-gradient(1200px 520px at 18% 18%, rgba(182,107,255,.14), transparent 55%),
    radial-gradient(900px 520px at 85% 20%, rgba(255,127,209,.12), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  box-shadow: 0 22px 60px rgba(18, 6, 36, .22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}

/* header */
.modal-checkout .checkout-header{
  padding: 18px 22px;
  border-bottom: 1px solid rgba(31,26,43,.10);
  align-items: center;
}
.modal-checkout .modal-title{
  font-weight: 850;
  letter-spacing: .2px;
  color: #1f1a2b;
}
.modal-checkout .checkout-subtitle{
  margin-top: 2px;
  font-weight: 650;
  color: rgba(31,26,43,.60);
  font-size: .95rem;
}
.modal-checkout .checkout-close{
  opacity: .9;
}
.modal-checkout .checkout-close:hover{ opacity: 1; }

/* icon chip like left badge */
.modal-checkout .checkout-chip{
  width: 38px; height: 38px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(182,107,255,.14);
  border: 1px solid rgba(182,107,255,.22);
  color: #3b145f;
}

/* body */
.modal-checkout .checkout-body{
  padding: 16px 22px 10px;
}

/* sections */
.modal-checkout .checkout-section{
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(31,26,43,.10);
  border-radius: 16px;
  padding: 14px 14px;
}

.modal-checkout .checkout-section-title{
  font-weight: 850;
  color: rgba(31,26,43,.75);
  font-size: .95rem;
  margin-bottom: 10px;
}

/* divider text like screenshot */
.modal-checkout .checkout-divider{
  position: relative;
  text-align: center;
  margin: 14px 0;
  color: rgba(31,26,43,.55);
  font-weight: 750;
}
.modal-checkout .checkout-divider::before,
.modal-checkout .checkout-divider::after{
  content:"";
  position:absolute;
  top:50%;
  width: 40%;
  height: 1px;
  background: rgba(31,26,43,.10);
}
.modal-checkout .checkout-divider::before{ left: 0; }
.modal-checkout .checkout-divider::after{ right: 0; }
.modal-checkout .checkout-divider span{
  background: transparent;
  padding: 0 10px;
}

/* rows */
.modal-checkout .checkout-row{
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  padding: 10px 6px;
}
.modal-checkout .checkout-row + .checkout-row{
  border-top: 1px solid rgba(31,26,43,.08);
}
@media (max-width: 768px){
  .modal-checkout .checkout-row{
    grid-template-columns: 1fr;
  }
}

/* label column */
.modal-checkout .checkout-label{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.modal-checkout .checkout-ico{
  width: 36px; height: 36px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(182,107,255,.10);
  border: 1px solid rgba(182,107,255,.16);
  color: rgba(31,26,43,.85);
  flex: 0 0 auto;
}
.modal-checkout .checkout-label-title{
  font-weight: 850;
  color: #1f1a2b;
  line-height: 1.1;
}
.modal-checkout .checkout-label-sub{
  margin-top: 3px;
  font-weight: 650;
  color: rgba(31,26,43,.55);
  font-size: .92rem;
}

/* inputs */
.modal-checkout .checkout-input{
  border-radius: 14px;
  border: 1px solid rgba(31,26,43,.12);
  background: rgba(255,255,255,.72);
  padding: 10px 12px;
  font-weight: 650;
}
.modal-checkout .checkout-input:focus{
  border-color: rgba(182,107,255,.60);
  box-shadow: 0 0 0 .2rem rgba(182,107,255,.16);
}
.modal-checkout .checkout-textarea{
  resize: vertical;
  min-height: 96px;
}
.modal-checkout .checkout-error{
  margin-top: 6px;
  font-size: .90rem;
  font-weight: 650;
  color: #c21f55;
}

/* footer */
.modal-checkout .checkout-footer{
  border-top: 1px solid rgba(31,26,43,.10);
  padding: 14px 22px;
  gap: 10px;
}
.modal-checkout .checkout-btn-ghost{
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 850;
}
.modal-checkout .checkout-btn-primary{
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  border: 0;
  color: #fff;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent2));
  box-shadow: 0 14px 34px rgba(182,107,255,.22);
}
.modal-checkout .checkout-btn-primary:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}
.modal-checkout .checkout-btn-primary:active{
  transform: translateY(0);
}

/* keep your Manage button coherent */
.modal-checkout .checkout-manage.button2{
  border-radius: 999px !important;
}
/* =========================
   CrochetersHub — Tier Badges
   ========================= */
.ch-badge{
  --bg1:#ffffff;
  --bg2:#f3f3f3;
  --stroke: rgba(0,0,0,.10);
  --text:#141414;
  --glow: rgba(0,0,0,.15);

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;

  padding: .42rem .7rem;
  border-radius: 999px;

  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  border: 1px solid var(--stroke);
  box-shadow:
    0 10px 22px rgba(0,0,0,.10),
    0 0 0 1px rgba(255,255,255,.55) inset;

  color: var(--text);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;

  transform: translateZ(0);
}

.ch-badge__icon{
  width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;

  border-radius: 50%;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 12px rgba(0,0,0,.10);

  font-size: .85rem;
}

.ch-badge__text{
  font-size: .82rem;
}

.ch-badge__mini{
  font-size: .70rem;
  font-weight: 900;
  padding: .18rem .40rem;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
}

/* Shine layer (moves) */
.ch-badge__spark{
  position: absolute;
  inset: -40% -25%;
  transform: translateX(-40%) rotate(20deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.55),
    transparent
  );
  filter: blur(0.3px);
  opacity: .0;
  pointer-events: none;
}

/* Hover behavior (desktop) */
.ch-badge:hover{
  filter: saturate(1.05);
  transform: translateY(-1px);
}
.ch-badge:hover .ch-badge__spark{
  opacity: .85;
  animation: ch-badge-shine 1.1s ease;
}

@keyframes ch-badge-shine{
  0%   { transform: translateX(-55%) rotate(20deg); }
  100% { transform: translateX(55%)  rotate(20deg); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .ch-badge, .ch-badge__spark { animation: none !important; transition: none !important; }
}

/* =========================
   Tier 1 — soft premium
   ========================= */
.ch-badge--t1{
  --bg1:#fff3fb;
  --bg2:#f2d9ff;
  --stroke: rgba(114,46,111,.22);
  --text:#3a0f38;
  --glow: rgba(207,173,241,.55);

  box-shadow:
    0 10px 24px rgba(114,46,111,.18),
    0 0 22px var(--glow),
    0 0 0 1px rgba(255,255,255,.55) inset;
}

/* =========================
   Tier 2 — richer + glow
   ========================= */
.ch-badge--t2{
  --bg1:#f4f0ff;
  --bg2:#d5b8ff;
  --stroke: rgba(93,52,172,.26);
  --text:#220c4c;
  --glow: rgba(152,119,196,.70);

  box-shadow:
    0 12px 28px rgba(62,25,125,.22),
    0 0 26px var(--glow),
    0 0 0 1px rgba(255,255,255,.55) inset;
}

.ch-badge--t2 .ch-badge__icon{
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(255,255,255,.35));
}

/* =========================
   Tier 3 — elite (animated aura)
   ========================= */
.ch-badge--t3{
  --bg1:#fff2c6;
  --bg2:#ffcc7a;
  --stroke: rgba(156,94,0,.28);
  --text:#2a1700;
  --glow: rgba(255,179,71,.85);

  box-shadow:
    0 14px 34px rgba(156,94,0,.22),
    0 0 34px var(--glow),
    0 0 0 1px rgba(255,255,255,.55) inset;
}

/* Animated “aura ring” for Tier 3 */
.ch-badge--t3::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,.0),
    rgba(255,255,255,.55),
    rgba(255,255,255,.0),
    rgba(255,255,255,.35),
    rgba(255,255,255,.0)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .65;
  pointer-events: none;
  animation: ch-aura 2.8s linear infinite;
}

@keyframes ch-aura{
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .ch-badge--t3::before{ animation: none !important; }
}

/* ── Tier tag badges (dropdown lock labels) ── */
i[data-tier]::after{
  content: attr(data-tier-label);
  display: inline-flex;
  align-items: center;
  padding: .12rem .42rem;
  border-radius: 999px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .25px;
  white-space: nowrap;
  margin-left: .3rem;
  vertical-align: middle;
  font-style: normal;
  line-height: 1;
}
i[data-tier="t1"]::after{
  background: linear-gradient(135deg,#fff3fb,#f2d9ff);
  color: #3a0f38;
  border: 1px solid rgba(114,46,111,.22);
}
i[data-tier="t2"]::after{
  background: linear-gradient(135deg,#f4f0ff,#d5b8ff);
  color: #220c4c;
  border: 1px solid rgba(93,52,172,.26);
}
i[data-tier="t3"]::after{
  background: linear-gradient(135deg,#fff2c6,#ffcc7a);
  color: #2a1700;
  border: 1px solid rgba(156,94,0,.28);
}

.ch-price{
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}

.ch-price .price-old{
  text-decoration: line-through;
  opacity: .55;
  font-weight: 700;
}

.ch-price .price-new{
  font-weight: 900;
}

.ch-price .price-pill{
  font-size: .78rem;
  font-weight: 800;
  padding: .18rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.7);
}

.ch-price.is-free .price-old{
  opacity: .45;
}

/* bump pricing */
.bump-price{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.bump-price .price-old{
  text-decoration: line-through;
  opacity: .55;
  font-weight: 600;
}

.bump-price .price-new{
  font-weight: 800;
}

.bump-price.is-free .price-new{
  font-weight: 900;
}

.bump-price .price-pill{
  font-size: .75rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(114,46,111,.10);
  border: 1px solid rgba(114,46,111,.18);
  color: #722e6f;
  font-weight: 600;
}

.bump-price .price-pill.used{
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.12);
  color: rgba(0,0,0,.7);
}

/* Bump modal – mobile margins + tier3 discount pill */
@media (max-width: 576px) {
  #bumpModal .modal-dialog,
  #existingBumpsModal .modal-dialog {
    margin: .75rem 2%;
  }
  .bump-box {
    padding: 12px 10px;
  }
  .bump-price .price-pill {
    font-size: .7rem;
    padding: .2rem .45rem;
  }
}

.bump-price .price-pill.tier3-pill {
  background: linear-gradient(135deg, #ffe066, #ffd700);
  border-color: #e6c200;
  color: #5a4200;
  font-weight: 700;
  animation: tier3Glow 2s ease-in-out infinite;
}

@keyframes tier3Glow {
  0%, 100% { box-shadow: 0 0 4px rgba(255, 215, 0, .3); }
  50% { box-shadow: 0 0 10px rgba(255, 215, 0, .55); }
}

#row_pers .button2 {
  min-width: 160px;
}
#row_pers .dropdown,
#row_pers button{
  white-space: nowrap;
}

#row_pers .d-flex{
  flex-wrap: nowrap !important;
}

#row_pers .btn{
  display: inline-flex;
  align-items: center;
  height: 50px;              /* stessa altezza per entrambi */
  padding: 0 16px;
}

#row_pers .dropdown-toggle{
  gap: 8px;                  /* spazio tra testo e caret */
}

.btn-save{
  display: inline-flex;
  align-items: center;     /* centra verticalmente */
  justify-content: center; /* centra orizzontalmente */
  gap: 8px;                /* spazio tra icona e testo */
  height: 55px;            /* stessa altezza del dropdown */
  padding: 0 18px;
  text-align: center;
  background-color: #ffeee7;
}

.btn-save::before{
  background-color: #ffeee7;
}

.btn-save:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(114,46,111,0.25);
  background-color: var(--purple-700);
}

.button2 .btn-save{
  background-color: #ffeee7 !important;
}



/* modal shell */
.ch-modal{
  border-radius: 22px;
  border: 1px solid rgba(114,46,111,0.16);
  box-shadow: 0 24px 80px rgba(0,0,0,0.18);
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 10%, rgba(248,185,245,0.35), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #fff6fd 100%);
}

/* header */
.ch-modal__header{
  padding: 18px 20px;
  border-bottom: 1px solid rgba(114,46,111,0.10);
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
}
.ch-modal__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(248,185,245,0.65), rgba(114,46,111,0.08));
  border: 1px solid rgba(114,46,111,0.14);
  color: #722e6f;
  font-size: 18px;
}
.ch-modal__subtitle{
  font-size: 0.92rem;
  color: rgba(0,0,0,0.55);
  margin-top: 2px;
}
.ch-modal__close{
  border: 0;
  background: transparent;
  color: rgba(0,0,0,0.6);
  border-radius: 12px;
  width: 40px;
  height: 40px;
}
.ch-modal__close:hover{
  background: rgba(114,46,111,0.06);
}

/* section */
.ch-modal__body{ padding: 18px 20px 22px; }
.ch-section__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ch-section__title{
  font-weight: 700;
  color: rgba(0,0,0,0.80);
}
.ch-section__hint{
  font-size: 0.9rem;
  color: rgba(0,0,0,0.50);
}

/* choice cards */
.ch-choice{ display:block; cursor:pointer; }
.ch-choice__input{ position:absolute; opacity:0; pointer-events:none; }

.ch-choice__card{
  border-radius: 18px;
  border: 1px solid rgba(114,46,111,0.14);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  padding: 14px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}
.ch-choice__top{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:flex-start;
}
.ch-choice__name{ font-weight: 800; }
.ch-choice__price{
  font-size: 0.88rem;
  color: rgba(0,0,0,0.55);
  white-space: nowrap;
}
.ch-choice__desc{
  margin-top: 6px;
  font-size: 0.93rem;
  color: rgba(0,0,0,0.62);
}
.ch-choice__badges{ margin-top: 10px; display:flex; gap:6px; flex-wrap:wrap; }

.ch-pill{
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(114,46,111,0.12);
  background: rgba(248,185,245,0.22);
  color: rgba(0,0,0,0.72);
}
.ch-pill--hot{
  background: rgba(114,46,111,0.10);
  border-color: rgba(114,46,111,0.18);
  color: rgba(114,46,111,1);
}

/* previews */
.ch-choice__preview{
  margin-top: 12px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(114,46,111,0.10);
}
.ch-prev--solid{
  background: linear-gradient(180deg, #fff1fa 0%, #ffe6f6 100%);
}
.ch-prev--minimal{
  background: linear-gradient(180deg, #fff9fd 0%, #fff1fa 100%);
}
.ch-prev--gradient{
  background: linear-gradient(135deg, #ffd0ea 0%, #d9b3ff 55%, #b08cff 100%);
}
.ch-prev--premium{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(135deg, #fdd5ec 0%, #f8c4e2 45%, #f2b6da 100%);
}
.ch-prev--cute{
  background: linear-gradient(135deg, #c8f3ff 0%, #fff1b8 50%, #ffd1ea 100%);
}
.ch-prev--custom{
  background: linear-gradient(135deg, rgba(114,46,111,0.10), rgba(248,185,245,0.25));
}

/* selected state */
.ch-choice__input:checked + .ch-choice__card{
  transform: translateY(-2px);
  border-color: rgba(248,185,245,0.85);
  box-shadow: 0 16px 40px rgba(114,46,111,0.14);
}

/* addons */
.ch-addon{ display:block; cursor:pointer; }
.ch-addon__input{ position:absolute; opacity:0; pointer-events:none; }
.ch-addon__card{
  border-radius: 16px;
  border: 1px solid rgba(114,46,111,0.12);
  background: rgba(255,255,255,0.65);
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  height: 100%;
}
.ch-addon__name{ font-weight: 800; }
.ch-addon__price{ font-size: 0.88rem; color: rgba(0,0,0,0.55); }
.ch-addon__desc{ margin-top: 6px; font-size: 0.92rem; color: rgba(0,0,0,0.58); }

.ch-addon__input:checked + .ch-addon__card{
  transform: translateY(-2px);
  border-color: rgba(114,46,111,0.28);
  box-shadow: 0 16px 36px rgba(114,46,111,0.10);
}

/* summary */
.ch-summary{
  border-radius: 18px;
  border: 1px solid rgba(114,46,111,0.10);
  background: rgba(255,255,255,0.70);
  padding: 14px 16px;
}
.ch-summary__title{ font-weight: 800; margin-bottom: 6px; }
.ch-summary__box{
  border-radius: 14px;
  border: 1px solid rgba(114,46,111,0.10);
  background: rgba(255,255,255,0.75);
  padding: 12px 14px;
}

/* footer + CTA */
.ch-modal__footer{
  border-top: 1px solid rgba(114,46,111,0.10);
  background: rgba(255,255,255,0.70);
}
.ch-cta{
  border: 0;
  border-radius: 14px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(248,185,245,1), rgba(114,46,111,0.55));
  color: white;
  font-weight: 800;
}
.ch-cta:hover{ filter: brightness(0.98); }

/* overlay sopra la modale */
.cust-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(2px);
  z-index: 10;
}

.cust-overlay__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.cust-overlay__msg{
  opacity:0;
  transform: translateY(6px);
  transition: opacity 4s ease, transform 4s ease;
  font-weight: 700;
  color: var(--purple-700);
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(114,46,111,0.18);
  border-radius: 999px;
  padding: 8px 14px;
}

/* blur del contenuto modale mentre invii */
.cust-modal-blur{
  filter: blur(3px);
  opacity: 0.85;
  pointer-events:none; /* blocca click */
}

/* fade spinner */
.cust-spinner-fade{
  opacity: 0;
  transition: opacity 2s ease;
}

.cust-overlay__msg small{
  display:block;
  font-weight:600;
  opacity:.8;
  margin-top:4px;
}
.btn-primary-ch{
  border-radius: 999px;
  font-weight: 900;
  border: 0;
  color:#fff;
  padding: .75rem 1.05rem;
  background: linear-gradient(90deg, #b66bff, #ff7fd1);
  box-shadow: 0 14px 34px rgba(182,107,255,.22);
}
.btn-primary-ch:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.btn-primary-ch:active{ transform: translateY(0); }

#ButtonJoin button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 14px;
  
  /* Colore base neon */
  background: linear-gradient(90deg, #b66bff, #ff7fd1);
  color: #2c0f2b;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.4);
  
  overflow: hidden; 
  isolation: isolate;

  /* EFFETTO NEON: Ombre più sature e ampie */
  box-shadow:
    0 0 5px rgba(247, 183, 241, 0.8),
    0 0 15px rgba(155, 77, 167, 0.6),
    0 0 30px rgba(155, 77, 167, 0.4),
    inset 0 0 8px rgba(255, 255, 255, 0.5);
    
  transition: all 0.3s ease;
  cursor: pointer;
}

/* 1. BORDO ROTANTE (Luce Neon che gira) */
#ButtonJoin button::before {
  content: "";
  position: absolute;
  top: -150%;
  left: -150%;
  width: 400%;
  height: 400%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 280deg,
    #ffffff 320deg, /* Punto di massima luce */
    #f7b7f1 340deg, /* Sfumatura neon */
    transparent 360deg
  );
  animation: joinSpark 3s linear infinite;
  z-index: -2;
}

/* 2. SFONDO INTERNO + EFFETTO VETRO (Shine) */
#ButtonJoin button::after {
  content: "";
  position: absolute;
  inset: 2px; 
  border-radius: 12px;
  z-index: -1;
  
  /* Gradiente base + Riflesso vetro diagonale */
  background: 
    linear-gradient(110deg, 
      transparent 40%, 
      rgba(255, 255, 255, 0.6) 50%, 
      transparent 60%
    ) -100% 0 / 200% 100% no-repeat, 
    #f7b7f1;

  animation: glassShine 4s ease-in-out infinite;
}

/* ANIMAZIONE ROTAZIONE BORDO */
@keyframes joinSpark {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ANIMAZIONE EFFETTO VETRO */
@keyframes glassShine {
  to {
    background-position: 200% 0, 0 0;
  }
}

/* HOVER: Potenziamento Neon */
#ButtonJoin button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 10px rgba(247, 183, 241, 1),
    0 0 25px rgba(155, 77, 167, 0.8),
    0 0 50px rgba(155, 77, 167, 0.5);
  filter: brightness(1.1);
}

#ButtonJoin .button1{
  background: linear-gradient(90deg, #b66bff, #ff7fd1);
}

/* ===== Upload Dropzone (soft, premium, non stona) ===== */
.ch-dropzone{
  border: 1px dashed rgba(114,46,111,0.35);
  background: rgba(255,255,255,0.55);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
  overflow: hidden;
}

.ch-dropzone:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(114,46,111,0.10);
  border-color: rgba(114,46,111,0.55);
}

.ch-dropzone.is-dragover{
  border-color: rgba(114,46,111,0.85);
  box-shadow: 0 0 0 4px rgba(114,46,111,0.12);
}

.ch-dropzone__inner{
  text-align: center;
  color: rgba(25, 10, 25, 0.85);
}

.ch-dropzone__icon{
  font-size: 28px;
  line-height: 1;
  margin-bottom: 6px;
}

.ch-dropzone__title{
  font-weight: 700;
  margin-bottom: 2px;
}

.ch-dropzone__hint{
  font-size: 0.92rem;
  opacity: .8;
}

.ch-dropzone__meta{
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--purple-700);
  font-weight: 700;
}

/* previews */
.ch-previews{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 992px){
  .ch-previews{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px){
  .ch-previews{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px){
  .ch-previews{ grid-template-columns: repeat(2, 1fr); }
}

.ch-preview{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(114,46,111,0.18);
  background: rgba(255,255,255,0.6);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
}

.ch-preview img{
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.ch-preview__remove{
  position: absolute;
  top: 6px;
  right: 6px;
  border: none;
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: rgba(114,46,111,0.85);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0,0,0,0.20);
}

.ch-preview__remove:hover{
  filter: brightness(1.05);
}

/* ===== Overlay ===== */
.ch-alert-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 25, 0.45);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 9999;
  animation: fadeIn .25s ease;
}

/* ===== Card ===== */
.ch-alert-card{
  width: 420px;
  max-width: 92%;
  background: linear-gradient(180deg, #fff8fc 0%, #f3e8f4 100%);
  border-radius: 20px;
  padding: 28px 26px 32px;
  text-align: center;
  box-shadow:
    0 25px 60px rgba(114,46,111,0.25),
    0 0 0 1px rgba(114,46,111,0.15);

  position: relative;
  overflow: hidden;
  animation: slideUp .35s ease;
}

/* Icon */
.ch-alert-icon{
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: bold;
  background: linear-gradient(135deg, #9b77c4, #722e6f);
  color: white;
  box-shadow: 0 10px 25px rgba(114,46,111,0.35);
}

/* Title */
.ch-alert-title{
  font-size: 1.2rem;
  font-weight: 700;
  color: #3c1f3d;
  margin-bottom: 8px;
}

/* Text */
.ch-alert-text{
  font-size: 0.95rem;
  color: #5c3b5d;
  line-height: 1.5;
}

/* Progress bar */
.ch-alert-progress{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #9b77c4, #722e6f);
  animation: progressBar 4s linear forwards;
}

/* Animations */
@keyframes slideUp{
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn{
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes progressBar{
  from { width: 100%; }
  to   { width: 0%; }
}

/* ===== Overlay ===== */
.ch-success-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 25, 0.45);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  z-index: 9999;
  animation: fadeIn .25s ease;
}

/* ===== Card ===== */
.ch-success-card{
  width: 420px;
  max-width: 92%;
  background: linear-gradient(180deg, #f6fff9 0%, #e7f9f0 100%);
  border-radius: 20px;
  padding: 28px 26px 32px;
  text-align: center;
  box-shadow:
    0 25px 60px rgba(0, 128, 96, 0.25),
    0 0 0 1px rgba(0, 128, 96, 0.15);

  position: relative;
  overflow: hidden;
  animation: slideUp .35s ease;
}

/* Icon */
.ch-success-icon{
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: bold;
  background: linear-gradient(135deg, #2ecc71, #16a085);
  color: white;
  box-shadow: 0 10px 25px rgba(0, 128, 96, 0.35);
}

/* Title */
.ch-success-title{
  font-size: 1.2rem;
  font-weight: 700;
  color: #155c43;
  margin-bottom: 8px;
}

/* Text */
.ch-success-text{
  font-size: 0.95rem;
  color: #1d6f53;
  line-height: 1.5;
}

/* Progress bar */
.ch-success-progress{
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #2ecc71, #16a085);
  animation: successProgress 3s linear forwards;
}

/* Animations */
@keyframes successProgress{
  from { width: 100%; }
  to   { width: 0%; }
}

/* =========================
   BUMP-UP / MARKETING PANEL
   (New classes: bu-*)
   ========================= */

.bu-panel{
  width: 100%;
  border-radius: 22px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(155,119,196,0.22);
  background:
    radial-gradient(circle at 12% 10%, rgba(207,173,241,0.35), transparent 42%),
    radial-gradient(circle at 88% 16%, rgba(255,210,236,0.28), transparent 45%),
    linear-gradient(180deg, #fff7fd 0%, #fff2fb 40%, #ffffff 100%);
  box-shadow:
    0 18px 55px rgba(114,46,111,0.10),
    0 1px 0 rgba(255,255,255,0.85) inset;
  color: #2c0f2b;
  overflow: visible;
  box-sizing: border-box;
}

/* Header */
.bu-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
}

.bu-head__left{
  flex-shrink: 0;
}

.bu-title{
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: .2px;
  color: #2c0f2b;
}

.bu-sub{
  font-size: .92rem;
  color: rgba(44,15,43,0.65);
  text-align: right;
  max-width: 520px;
}




/* Cards (white like builder) */
.bu-card{
  text-align: left;
  border-radius: 18px;
  padding: 16px;
  min-width: 0;
  border: 5px solid rgba(155,119,196,0.24);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.80) 100%);
  box-shadow:
    0 12px 28px rgba(114,46,111,0.07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  color: #2c0f2b;
}

.bu-card:hover{
  transform: translateY(-2px);
  border-color: rgba(155,119,196,0.45);
  box-shadow:
    0 18px 40px rgba(114,46,111,0.10),
    0 0 0 4px rgba(207,173,241,0.15);
}

.bu-card:active{ transform: translateY(0); }

/* make buttons look like cards */
button.bu-card{
  width:100%;
  background: inherit;
  cursor:pointer;
}

.bu-card::before,
.bu-card::after{
  pointer-events:none;
}


/* Card top */
.bu-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}

.bu-card__name{
  font-weight: 900;
  letter-spacing: .15px;
  font-size: 0.98rem;
}

.bu-card__price{
  font-weight: 900;
  color: #7a3ea7;              /* lilac like your builder prices */
  white-space: nowrap;
}

/* Tier-3 strikethrough pricing */
.bu-price-was{
  text-decoration: line-through;
  color: #999;
  font-weight: 600;
  font-size: .92em;
}
.bu-price-new{
  color: #198754;
  font-weight: 900;
}

/* Desc */
.bu-card__desc{
  margin-top: 10px;
  color: rgba(44,15,43,0.68);
  line-height: 1.35;
}

/* Pills */
.bu-pills{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 12px;
}

.bu-pill{
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  border: 1px solid rgba(155,119,196,0.22);
  background: rgba(207,173,241,0.18);
  color: rgba(44,15,43,0.78);
}

.bu-pill--hot{
  border-color: rgba(155,119,196,0.35);
  background: rgba(255,210,236,0.45);
  color: #5d1b5b;
}

/* Custom duration controls */
.bu-card--custom{ cursor: default; }

.bu-custom{
  display:flex;
  gap: 8px;
  margin-top: 12px;
}

.bu-custom .form-select{
  border-radius: 12px;
  border: 1px solid rgba(155,119,196,0.22);
  background: rgba(255,255,255,0.88);
  color: #2c0f2b;
  padding: .35rem .55rem;
  min-width: 0;
  flex: 1 1 0;
}

#bumpCustomQty{
  flex: 0 0 auto;
  width: 48px;
  padding-left: .3rem;
  padding-right: .2rem;
}

.bu-custom .form-select:focus{
  border-color: rgba(155,119,196,0.45);
  box-shadow: 0 0 0 .2rem rgba(207,173,241,0.20);
}

.bu-custom .btn{
  border-radius: 12px;
  border: 1px solid rgba(155,119,196,0.35);
  background: rgba(207,173,241,0.25);
  color: #2c0f2b;
  font-weight: 800;
}

.bu-custom .btn:hover{
  background: rgba(207,173,241,0.38);
}

/* Note */
.bu-note{
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(155,119,196,0.30);
  background: rgba(207,173,241,0.12);
  color: rgba(44,15,43,0.80);
  font-weight: 700;
  text-align: center;
}

/* Separator */
.bu-sep{
  margin: 18px 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(155,119,196,0.25),
    transparent
  );
}

/* Section titles */
.bu-section-title{
  font-weight: 900;
  font-size: 1.05rem;
  text-align:center;
  color: #2c0f2b;
}

.bu-section-sub{
  text-align:center;
  color: rgba(44,15,43,0.62);
  font-size: .92rem;
  margin-top: 4px;
}

/* Campaign cards same style, but slightly stronger */
.bu-card--campaign .bu-card__top{
  flex-direction: column;
  gap: 4px;
}
.bu-card--campaign .bu-card__price{
  color: #7a3ea7;
  white-space: normal;
  word-break: break-word;
}
/* === Layout equalizer === */
.bu-grid4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 16px;
}

/* Prime 3 card */
.bu-grid4 > .bu-card:not(.bu-card--custom){
  grid-row: 1;
}

/* Card custom occupa 2 righe */
.bu-grid4 > .bu-card--custom{
  grid-row: 1 / span 2;
}

/* Nota va nella seconda riga sotto le prime 3 */
.bu-note{
  grid-column: 1 / span 3;
  margin-top: 0; /* togliamo lo spazio extra */
}


@media (max-width: 992px){
  .bu-grid4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .bu-grid4 > .bu-card:not(.bu-card--custom){ grid-row: auto; }
  .bu-note{ grid-column: 1 / -1; }

  .bu-head{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .bu-sub{ text-align: left; max-width: none; flex: 1 1 0; min-width: 120px; }

  .bu-panel{ padding: 14px 12px 16px; }
}

@media (max-width: 768px){
  .mk-modal .modal-content{ padding: 10px !important; }
  .mk-modal .modal-body{ padding: 12px 8px; }

  .bu-head{
    flex-direction: column;
    align-items: flex-start;
  }
  .bu-sub{ font-size: .85rem; }
}

@media (max-width: 540px){
  .bu-grid4{ grid-template-columns: minmax(0, 1fr); }

  .bu-grid4 > .bu-card--custom{ grid-row: auto; }
  .bu-note{ grid-column: 1 / -1; }

  .bu-panel{ padding: 10px 8px 14px; }
  .bu-card{ padding: 12px; }
  .bu-card__top{ flex-direction: column; gap: 4px; }
  .bu-custom{ flex-direction: column; }

  .bu-section-title{ font-size: .95rem; }
  .bu-section-sub{ font-size: .85rem; }

  .wallet-btn{ width: 40px; height: 40px; }

  .btn-bumps{ font-size: .85rem; padding: 6px 12px; }
}
/* ===========================
   MARKETING MODALS (mk-*)
   =========================== */

.mk-modal .modal-content{
  border-radius: 22px;
  border: 1px solid rgba(155,119,196,0.25);
  background:
    radial-gradient(circle at 15% 12%, rgba(207,173,241,0.35), transparent 40%),
    linear-gradient(180deg, #fff7fd 0%, #fff2fb 45%, #ffffff 100%);
  box-shadow:
    0 25px 70px rgba(114,46,111,0.15);
  color:#2c0f2b;
}

.mk-modal .modal-header{
  border: none;
}

.mk-title{
  font-weight:900;
  font-size:1.2rem;
}

.mk-sub{
  font-size:.9rem;
  color:rgba(44,15,43,.65);
}

.mk-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
}

@media(max-width:768px){
  .mk-grid{ grid-template-columns:1fr; }
}

.mk-pack{
  border-radius:18px;
  padding:16px;
  border:1px solid rgba(155,119,196,.25);
  background:white;
  box-shadow:0 10px 25px rgba(114,46,111,.08);
  transition:.2s ease;
  cursor:pointer;
}

.mk-pack:hover{
  transform:translateY(-3px);
  border-color:rgba(155,119,196,.5);
  box-shadow:0 18px 40px rgba(114,46,111,.12);
}

.mk-pack__name{
  font-weight:800;
}

.mk-pack__price{
  font-weight:900;
  color:#7a3ea7;
}

.mk-pack ul{
  padding-left:18px;
  margin-top:10px;
  font-size:.85rem;
  color:rgba(44,15,43,.7);
}

.mk-addon-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:16px;
}

.mk-addon{
  border-radius:14px;
  padding:10px 12px;
  border:1px solid rgba(155,119,196,.25);
  background:rgba(207,173,241,.15);
  font-size:.85rem;
}

.mk-footer{
  border:none;
}

/* ===== Campaign modal (uses your .ch-* so JS works) ===== */
.mk-modal .modal-content{
  border-radius: 22px;
  border: 1px solid rgba(155,119,196,0.25);
  background:
    radial-gradient(circle at 15% 12%, rgba(207,173,241,0.35), transparent 40%),
    linear-gradient(180deg, #fff7fd 0%, #fff2fb 45%, #ffffff 100%);
  box-shadow: 0 25px 70px rgba(114,46,111,0.15);
  color:#2c0f2b;
}

.mk-modal .modal-header{ border: 0; }

.mk-modal .modal-title{
  font-weight: 900;
  font-size: 1.15rem;
  margin: 0;
}

.mk-modal .mk-sub{
  color: rgba(44,15,43,.65);
  font-size: .92rem;
  margin-top: 2px;
}

.ch-radio-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 768px){
  .ch-radio-grid{ grid-template-columns: 1fr; }
}

.ch-radio-card{
  border-radius: 18px;
  border: 1px solid rgba(155,119,196,0.22);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 12px 28px rgba(114,46,111,0.08);
  padding: 14px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  height: 100%;
}

.ch-radio-card:hover{
  transform: translateY(-2px);
  border-color: rgba(155,119,196,0.48);
  box-shadow:
    0 18px 40px rgba(114,46,111,0.12),
    0 0 0 4px rgba(207,173,241,0.16);
}

.ch-radio-card input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.ch-radio-card:has(input[type="radio"]:checked){
  border-color: rgba(122,62,167,0.55);
  box-shadow:
    0 18px 45px rgba(114,46,111,0.14),
    0 0 0 5px rgba(207,173,241,0.22);
}

.ch-radio-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
}

.ch-radio-top b{
  font-weight: 900;
  color:#2c0f2b;
}

.ch-radio-price{
  font-weight: 900;
  color: #7a3ea7;
  white-space: nowrap;
}

.ch-radio-desc{
  margin-top: 8px;
  color: rgba(44,15,43,.68);
  font-size: .92rem;
  line-height: 1.35;
}

/* ── expandable feature list on campaign cards ── */
.ch-radio-features{
  margin: 8px 0 0;
  padding: 0 0 0 18px;
  list-style: disc;
  font-size: .85rem;
  line-height: 1.45;
  color: rgba(44,15,43,.78);
}

.ch-radio-features li{
  margin-bottom: 3px;
}

/* duration badge in modal header */
.mk-duration{
  display: inline-block;
  background: rgba(122,62,167,.12);
  color: #7a3ea7;
  font-weight: 700;
  font-size: .82rem;
  padding: 2px 9px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
}

.ch-addon-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 768px){
  .ch-addon-grid{ grid-template-columns: 1fr; }
}

.ch-check{
  border-radius: 14px;
  border: 1px solid rgba(155,119,196,0.22);
  background: rgba(207,173,241,0.14);
  padding: 10px 12px;
  display:flex;
  align-items:flex-start;
  gap: 10px;
}

.ch-check input{
  margin-top: 3px;
}

.ch-check span{
  display:flex;
  justify-content:space-between;
  width:100%;
  gap: 10px;
  font-size:.92rem;
  color: rgba(44,15,43,.85);
}

.ch-check em{
  font-style: normal;
  font-weight: 900;
  color:#7a3ea7;
  white-space: nowrap;
}

@media (max-width: 540px){
  .ch-check span{ flex-wrap: wrap; gap: 4px; }
  .ch-radio-card{ padding: 10px; }
  .ch-radio-desc{ font-size: .85rem; }
  .mk-summary{ padding: 10px; }
  .mk-summary .rowline{ flex-wrap: wrap; gap: 4px; }
}

/* summary box */
.mk-summary{
  border-radius: 18px;
  border: 1px solid rgba(155,119,196,0.22);
  background: rgba(255,255,255,0.86);
  box-shadow: 0 12px 28px rgba(114,46,111,0.08);
  padding: 14px 14px;
}

.mk-summary .rowline{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  margin-top: 6px;
}

.mk-summary .muted{ color: rgba(44,15,43,.6); }
.mk-summary .total{ font-weight: 900; color:#2c0f2b; }

.wallet-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;
  border-radius: 14px;

  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  
  /* Rimosso il border standard per usare solo quello animato più spesso */
  border: none; 
  
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, .10),
    0 0 15px rgba(155, 77, 167, 0.3);
    
  cursor: pointer;
  isolation: isolate;
  /* overflow: visible è fondamentale per il glow esterno */
  overflow: visible; 
  transition: transform .15s ease, box-shadow .2s ease;
}

/* IL BORDO VIOLA SPESSO CON LA LUCE BIANCA */
.wallet-btn::before {
  content: "";
  position: absolute;
  inset: -2px; /* Aumentato per far spazio al bordo più spesso */
  border-radius: inherit;
  
  /* SPESSORE DEL BORDO: aumentalo qui (es. 3px o 4px) */
  padding: 2.5px; 

  /* Sfondo viola con la scintilla bianca che gira */
  background: conic-gradient(
    from var(--angle, 0deg),
    #9b4da7 0deg,        /* Viola principale */
    #9b4da7 270deg,      /* Mantiene il viola per gran parte del giro */
    #ffffff 310deg,      /* Scintilla bianca */
    #ffffff 340deg,      /* Fine scintilla */
    #9b4da7 360deg       /* Ritorno al viola */
  );
  
  /* Maschera per mostrare solo il bordo */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  animation: borderRotate 2.5s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes borderRotate {
  to { --angle: 360deg; }
}

.wallet-btn i {
  font-size: 1.2rem;
  color: #2c0f2b;
  z-index: 2;
}

.wallet-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 14px 30px rgba(0, 0, 0, .12),
    0 0 25px rgba(155, 77, 167, 0.6);
}



/* Cute heart badge */
.wallet-heart{
  position: absolute;
  right: -6px;
  top: -6px;

  width: 20px;
  height: 20px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: #e5bde4;
  border: 1px solid rgba(114,46,111,.25);
  box-shadow: 0 8px 18px rgba(114,46,111,.18);
}

.wallet-heart i{
  font-size: .72rem;
  color: #722e6f;
}

/* Click animation */
.wallet-btn.is-clicked{
  animation: walletPop .35s ease;
}
@keyframes walletPop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

/* ===== Overlay + Blur ===== */
.wallet-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.wallet-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* ===== Modal Card ===== */
.wallet-modal{
  width: min(420px, calc(100vw - 28px));
  border-radius: 20px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(114,46,111,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.22);

  padding: 18px 18px 16px;

  transform: translateY(10px) scale(.98);
  opacity: .98;
  transition: transform .18s ease, opacity .18s ease;
}

.wallet-overlay.is-open .wallet-modal{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.wallet-close{
  border: 0;
  background: transparent;
  position: absolute;
  margin-top: 8px;
  margin-right: 8px;
  right: 0;
  top: 0;
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
}

.wallet-close i{
  font-size: 1rem;
  color: rgba(0,0,0,.6);
}

.wallet-head{
  display: flex;
  gap: 12px;
  align-items: center;
  padding-right: 42px; /* spazio per close */
}

.wallet-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;

  background: linear-gradient(135deg, rgba(229,189,228,.55), rgba(155,119,196,.35));
  border: 1px solid rgba(114,46,111,.18);
}

.wallet-icon i{
  font-size: 1.25rem;
  color: #2c0f2b;
}

.wallet-title{
  font-weight: 800;
  letter-spacing: .2px;
  color: #2c0f2b;
}

.wallet-subtitle{
  font-size: .9rem;
  color: rgba(0,0,0,.6);
  margin-top: 2px;
}

.wallet-balance{
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;

  background: rgba(247,239,255,.75);
  border: 1px solid rgba(114,46,111,.16);

  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.wallet-currency{
  font-weight: 800;
  font-size: 1.1rem;
  color: rgba(44,15,43,.85);
}

.wallet-amount{
  font-weight: 900;
  font-size: 2rem;
  letter-spacing: .3px;
  color: #2c0f2b;
}

.wallet-actions{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.wallet-footnote{
  margin-top: 12px;
  font-size: .82rem;
  color: rgba(0,0,0,.55);
  text-align: center;
}
/* =========================
   OVERLAY (blur + tinta)
========================= */
.wallet-overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: grid;
  place-items: center;

  background: rgba(60, 20, 58, .40);   /* rosa/viola scuro */
  backdrop-filter: blur(12px);

  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.wallet-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   ENVELOPE STAGE
========================= */
.env-stage{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  pointer-events: none; /* click fuori funziona (overlay) */
}

.env{
  position: relative;

  width: min(440px, calc(100vw - 28px));
  height: 380px;
  max-height: 410px;

  border-radius: 22px;

  perspective: 900px;

  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .25s ease, transform .55s cubic-bezier(.2,.9,.2,1);

  filter: drop-shadow(0 22px 60px rgba(0,0,0,.25));
}

.wallet-overlay.is-open .env{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* =========================
   ENVELOPE LAYERS
   (busta resta visibile ai lati)
========================= */
.env__back{
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* base busta (presente ma non invadente) */
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.30);

  z-index: 1;
}

.env__front{
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* pocket front: tenue, visibile ai lati */
  background: rgba(229,189,228,.18);
  border: 1px solid rgba(114,46,111,.14);

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 60%);
  pointer-events: none;

  z-index: 4;
}

/* flap sopra, chiuso -> aperto */
.env__flap{
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: rgba(229,189,228,.72);
  border: 1px solid rgba(114,46,111,.16);

  clip-path: polygon(0 0, 100% 0, 50% 60%);

  transform-origin: 50% 0%;
  transform: rotateX(0deg);
  backface-visibility: hidden;

  transition: transform .65s cubic-bezier(.2,.9,.2,1);

  pointer-events: none;
  z-index: 6;
}

/* flap: si apre e RESTA aperto */
.wallet-overlay.is-opening .env__flap,
.wallet-overlay.is-opened  .env__flap{
  transform: rotateX(165deg);
}

/* =========================
   CLIP AREA (contiene card + veil)
========================= */
.env__clip{
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  bottom: 14px;

  border-radius: 18px;
  overflow: hidden;

  background: transparent;
  z-index: 3;

  pointer-events: auto !important;
}

/* =========================
   VEIL "ROMBO" che si apre come busta
   (rosa più scuro della busta)
========================= */
.veil-env{
  position: absolute;
  inset: 0;
  border-radius: inherit;

  z-index: 5; /* sopra la card durante is-open, poi si apre */
  pointer-events: none;
}

/* due triangoli (alto/basso) che formano rombo */
.veil-env::before,
.veil-env::after{
  content:"";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: rgba(114,46,111,.58); /* rosa scuro */
  backdrop-filter: blur(10px);

  transition: transform .70s cubic-bezier(.2,.9,.2,1), opacity .25s ease;
  will-change: transform, opacity;
}

/* triangolo alto */
.veil-env::before{
  clip-path: polygon(50% 0, 100% 50%, 0 50%);
  transform-origin: 50% 0%;
  transform: rotateX(0deg);
}

/* triangolo basso */
.veil-env::after{
  clip-path: polygon(0 50%, 100% 50%, 50% 100%);
  transform-origin: 50% 100%;
  transform: rotateX(0deg);
}

/* all'inizio: rombo chiuso e visibile */
.wallet-overlay.is-open .veil-env::before,
.wallet-overlay.is-open .veil-env::after{
  opacity: 1;
}

/* apertura: i due flap del rombo si aprono */
.wallet-overlay.is-opening .veil-env::before,
.wallet-overlay.is-opened  .veil-env::before{
  transform: rotateX(165deg) translateY(-2px);
}
.wallet-overlay.is-opening .veil-env::after,
.wallet-overlay.is-opened  .veil-env::after{
  transform: rotateX(-165deg) translateY(2px);
}

/* finale: i flap del rombo quasi spariti (resta “cornice” attorno) */
.wallet-overlay.is-opened .veil-env::before,
.wallet-overlay.is-opened .veil-env::after{
  opacity: 0;
}

/* ring attorno alla card (resta in opened) */
.wallet-overlay.is-opened .veil-env{
  box-shadow:
    0 0 0 8px rgba(114,46,111,.18),
    0 18px 45px rgba(0,0,0,.18);
  border-radius: 22px;
}

/* =========================
   WALLET MODAL (card)
========================= */
.wallet-modal{
  position: relative;
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  padding: 18px 18px 16px;
  border-radius: 22px;

  background: rgba(255,255,255,.96);
  border: 1px solid rgba(114,46,111,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);

  /* card ferma, niente slide */
  transform: none;
  transition: opacity .35s ease, filter .35s ease;
  will-change: opacity, filter;

  z-index: 10;
  pointer-events: auto;
}

/* Step 1: card “sotto il rombo” => puoi tenerla visibile ma soft */
.wallet-overlay.is-open .wallet-modal{
  opacity: 0.18;
  filter: blur(4px);
}

/* Step 2: quando si apre, diventa leggibile */
.wallet-overlay.is-opening .wallet-modal,
.wallet-overlay.is-opened  .wallet-modal{
  opacity: 1;
  filter: blur(0);
}
.wallet-overlay{
  visibility: hidden;
}

.wallet-overlay.is-open{
  visibility: visible;
}

/* =========================
   CLOSE BUTTON + INNER UI
   (i tuoi stili possono restare, qui solo fix interazioni)
========================= */
.wallet-close{
  position: absolute;
  right: 6px;
  top: 6px;
  border: 0;
  background: transparent;
  padding: 10px;
  cursor: pointer;
  border-radius: 12px;
  z-index: 10;
}

.close-btn{
  margin-top: 1.5rem;
  width: 100%;
  background: #f794f2;
  border: none;
  padding: 8px 20px;
  border-radius: 12px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.close-btn:hover{ opacity: .85; }

/* accessibilità */
@media (prefers-reduced-motion: reduce){
  .wallet-overlay, .env, .env__flap, .veil-env::before, .veil-env::after, .wallet-modal{
    transition: none !important;
  }
}

/* =========================
   DIAMOND OPEN ENVELOPE (4 sides)
   Like your 2nd screenshot
========================= */

/* 1) Rombo grande dietro la card (compare solo in opened) */
.env{
  position: relative; /* già lo è, ma lo ribadiamo */
}

/* pseudo-elemento = rombo */
.env::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;

  /* controlli: grandezza rombo */
  width: calc(100% + 260px);
  height: calc(100% + 260px);

  transform: translate(-50%, -50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

  /* rosa busta */
  background: rgba(229,189,228,.45);
  border: 1px solid rgba(114,46,111,.28);

  /* profondità */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.18));

  opacity: 0;
  transition: opacity .25s ease;

  pointer-events:none;
  z-index: 2;  /* dietro a card/pocket, sopra overlay */
}

/* mostra rombo quando finita animazione */
.wallet-overlay.is-opened .env::after{
  opacity: 1;
}

/* 2) Assicura layering corretto: rombo dietro, card sopra */
.env__back{ z-index: 3 !important; }
.env__front{ z-index: 4 !important; }
.env__clip{ z-index: 5 !important; }
.wallet-modal{ z-index: 10 !important; }
.env__flap{ z-index: 12 !important; }

/* 3) Mantieni flap aperto in opened */
.wallet-overlay.is-opening .env__flap,
.wallet-overlay.is-opened  .env__flap{
  transform: rotateX(165deg) !important;
}

/* 4) Busta più rosa (se la vuoi ancora più evidente) */
.env__back{
  background: rgba(229,189,228,.22) !important;
  border: 1px solid rgba(114,46,111,.22) !important;
}
.env__front{
  background: rgba(229,189,228,.18) !important;
  border: 1px solid rgba(114,46,111,.18) !important;
}

/* rombo inizia ad apparire già in opening */
.wallet-overlay.is-opening .env::after,
.wallet-overlay.is-opened  .env::after{
  opacity: 1;
}
.env__back,
.env__front,
.env__flap,
.veil-env,
.veil-env::before,
.veil-env::after{
  pointer-events: none !important;
}

/* ===== My Bumps button ===== */
.btn-bumps {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: 10px 14px;
  border-radius: 14px;
  border: none; 

  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.25)),
              linear-gradient(135deg, #f1d8f6, #cfadf1);
  color: #2c0f2b;
  font-weight: 700;
  
  /* GLOW VIOLA POTENZIATO: aggiunta un'ombra più satura per profondità */
  box-shadow: 
    0 10px 24px rgba(114, 46, 111, .12),
    0 0 15px rgba(155, 77, 167, 0.4); 
  
  position: relative;
  isolation: isolate;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* IL BORDO: Base Viola + Luce Bianca che gira */
.btn-bumps::before {
  content: "";
  position: absolute;
  inset: -2px; 
  border-radius: inherit;
  padding: 2.5px; /* Spessore del bordo */

  /* Base viola scuro con la scintilla bianca */
  background: conic-gradient(
    from var(--angle, 0deg),
    #722e6f 0deg,        /* Colore viola per il bordo fisso */
    #722e6f 280deg,      /* Mantiene il viola fino a qui */
    #ffffff 320deg,      /* Luce bianca */
    #ffffff 340deg,      /* Fine luce bianca */
    #722e6f 360deg       /* Ritorno al viola */
  );
  
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  
  animation: rotateBumpsBorder 3s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotateBumpsBorder {
  to { --angle: 360deg; }
}

.btn-bumps:hover {
  transform: translateY(-1px);
  /* Glow viola ancora più acceso al passaggio del mouse */
  box-shadow: 
    0 14px 32px rgba(114, 46, 111, .18),
    0 0 25px rgba(155, 77, 167, 0.6);
}

.btn-bumps:active {
  transform: translateY(0);
}

.btn-bumps i {
  display: flex;
  align-items: center;
  z-index: 2;
}

.bumps-modal{
  border-radius: 18px;
  overflow: hidden;
}
.bumps-modal .modal-header{
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,.25)),
              linear-gradient(135deg, #f7efff, #ead7ff);
  border-bottom: 1px solid rgba(114,46,111,.12);
}

/* ===== Bumps Modal Pills ===== */
.nav-bumps .nav-link {
  border-radius: 12px;
  font-weight: 600;
  color: #6f3a77; /* viola testo soft */
  background-color: rgba(155,119,196,0.08);
  border: 1px solid rgba(155,119,196,0.25);
  transition: all .2s ease;
}

.nav-bumps .nav-link:hover {
  background-color: rgba(155,119,196,0.15);
  color: #5a2f63;
}

.nav-bumps .nav-link.active {
  background: linear-gradient(135deg, #cfadf1, #9b77c4);
  color: #ffffff;
  border-color: #9b77c4;
  box-shadow: 0 6px 18px rgba(114,46,111,0.25);
}

.nav-bumps .nav-link.active .badge {
  background-color: rgba(255,255,255,0.25) !important;
  color: #fff;
}

.bpm-money{
  font-variant-numeric: tabular-nums;
}
/* ===== Apply Bump modal (match screenshot style) ===== */
.bumps-modal{
  border-radius: 22px;
  border: 1px solid rgba(114,46,111,.18);
  overflow: hidden;
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
}

.bumps-modal__head{
  background: linear-gradient(180deg, rgba(247,239,255,.95), rgba(255,255,255,.90));
  border-bottom: 1px solid rgba(114,46,111,.14);
  padding: 18px 18px;
}

.bumps-modal__title{
  font-weight: 900;
  color: #2c0f2b;
  letter-spacing: .2px;
  font-size: 1.15rem;
}

.bumps-modal__subtitle{
  color: rgba(44,15,43,.65);
  font-size: .92rem;
  margin-top: 2px;
}

.bumps-modal__body{
  padding: 16px 18px 10px;
  background: rgba(255,255,255,.98);
}

.bumps-target{
  background: rgba(247,239,255,.70);
  border: 1px solid rgba(114,46,111,.14);
  border-radius: 14px;
  padding: 10px 12px;
  color: rgba(44,15,43,.85);
}

.bumps-box{
  border: 1px solid rgba(114,46,111,.16);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.bumps-box__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(247,239,255,.55);
  border-bottom: 1px solid rgba(114,46,111,.12);
}

.bumps-box__label{
  font-weight: 800;
  color: rgba(44,15,43,.9);
}

.bumps-row{
  padding: 12px 12px;
}

.bumps-row:hover{
  background: rgba(247,239,255,.35);
}

.bumps-radio{
  width: 1.05rem;
  height: 1.05rem;
  margin-top: .25rem;
}

.bumps-row__title{
  font-weight: 800;
  color: rgba(44,15,43,.92);
}

.bumps-row__meta{
  color: rgba(44,15,43,.62);
  font-size: .88rem;
  margin-top: 3px;
}

.bumps-token{
  color: #d63384; /* pink like screenshot token */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .88rem;
}

.bumps-tip{
  text-align:center;
  color: rgba(44,15,43,.60);
  font-size: .92rem;
  padding-bottom: 2px;
}

.bumps-modal__foot{
  border-top: 1px solid rgba(114,46,111,.12);
  background: rgba(255,255,255,.98);
  padding: 12px 16px;
}

.bumps-btn-outline{
  border-radius: 14px;
  border: 1px solid rgba(114,46,111,.25);
  background: rgba(255,255,255,.9);
  color: rgba(44,15,43,.85);
}

.bumps-btn-outline:hover{
  background: rgba(247,239,255,.55);
}

.bumps-btn-primary{
  border-radius: 999px;
  border: 0;
  padding: 10px 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #cfadf1, #9b77c4);
  box-shadow: 0 10px 22px rgba(114,46,111,.18);
}

.bumps-btn-primary:hover{
  filter: brightness(0.98);
}

.bumps-btn-primary:disabled{
  opacity: .55;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════
   DETAIL PAGE — Etsy-style layout  (dp-*)
   ═══════════════════════════════════════════════════════ */

/* ---------- Container ---------- */
.dp-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 0;
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.dp-page-card .dp-container {
  max-width: none;
  padding: 0.5rem 0 0;
}

/* ---------- Gallery (left) ---------- */
.dp-gallery {
  flex: 0 0 55%;
  max-width: 55%;
}

.dp-main-img-wrap {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  background: #f5f5f5;
}

.dp-main-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.dp-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.dp-thumb-btn {
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.625rem;
  overflow: hidden;
  cursor: pointer;
  background: #f5f5f5;
  transition: border-color 0.15s;
}

.dp-thumb-btn:hover,
.dp-thumb-btn--active {
  border-color: var(--purple-700);
}

.dp-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Product Gallery Lightbox ---------- */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.gallery-lightbox--open {
  opacity: 1;
  visibility: visible;
}
.gallery-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.88);
  cursor: pointer;
}
.gallery-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  z-index: 3;
  background: rgba(255,255,255,.15);
  border: none;
  border-radius: 50%;
  width: 2.75rem;
  height: 2.75rem;
  color: #fff;
  font-size: 1.8rem;
  line-height: 2.75rem;
  text-align: center;
  cursor: pointer;
  transition: background .2s;
}
.gallery-lightbox__close:hover {
  background: rgba(255,255,255,.3);
}
.gallery-lightbox__img-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 85vw;
  max-height: 80vh;
}
.gallery-lightbox__img {
  max-width: 85vw;
  max-height: 78vh;
  border-radius: .75rem;
  object-fit: contain;
  user-select: none;
  transition: opacity .2s ease;
}
.gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  background: rgba(255,255,255,.18);
  border: none;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.gallery-lightbox__nav:hover {
  background: rgba(255,255,255,.35);
  transform: translateY(-50%) scale(1.1);
}
.gallery-lightbox__nav--prev {
  left: 1rem;
}
.gallery-lightbox__nav--next {
  right: 1rem;
}
.gallery-lightbox__counter {
  position: absolute;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255,255,255,.8);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .05em;
  background: rgba(0,0,0,.4);
  padding: .25rem .85rem;
  border-radius: 1rem;
  pointer-events: none;
}
.gallery-lightbox__thumbs {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: .5rem;
  max-width: 90vw;
  overflow-x: auto;
  padding: .35rem .5rem;
  scrollbar-width: none;
}
.gallery-lightbox__thumbs::-webkit-scrollbar {
  display: none;
}
.gallery-lightbox__thumb {
  flex: 0 0 3.5rem;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: .5rem;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  opacity: .55;
  transition: opacity .2s, border-color .2s;
}
.gallery-lightbox__thumb:hover {
  opacity: .85;
}
.gallery-lightbox__thumb--active {
  opacity: 1;
  border-color: #fff;
}
.gallery-lightbox__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 576px) {
  .gallery-lightbox__nav {
    width: 2.25rem;
    height: 2.25rem;
  }
  .gallery-lightbox__nav--prev { left: .5rem; }
  .gallery-lightbox__nav--next { right: .5rem; }
  .gallery-lightbox__nav svg {
    width: 20px;
    height: 20px;
  }
  .gallery-lightbox__thumb {
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
  }
  .gallery-lightbox__counter {
    bottom: 5rem;
  }
  .gallery-lightbox__thumbs {
    bottom: 1rem;
  }
}

/* ---------- Info panel (right) ---------- */
.dp-info {
  flex: 1;
  min-width: 0;
}

/* Price */
.dp-price {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.dp-price__current {
  font-size: 1.75rem;
  font-weight: 700;
  color: #222;
}

.dp-price__old {
  font-size: 1.1rem;
  color: #999;
  text-decoration: line-through;
}

.dp-price__badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: #e53935;
  border-radius: 0.25rem;
  padding: 0.15rem 0.5rem;
  text-transform: uppercase;
}

/* Title */
.dp-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  color: #222;
  margin: 0.5rem 0 1rem;
}

/* ---------- Seller card ---------- */
.dp-seller-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 0.875rem;
  margin-bottom: 1rem;
  background: #fff;
}

.dp-seller__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  flex: 1;
  min-width: 0;
}

.dp-seller__link:hover .dp-seller__name {
  text-decoration: underline;
  color: var(--purple-700);
}

.dp-seller__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.dp-seller__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dp-seller__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-seller__meta {
  font-size: 0.8rem;
  color: #666;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dp-seller__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
  color: #222;
}

.dp-seller__follow {
  flex-shrink: 0;
  border: 1.5px solid var(--purple-700);
  background: transparent;
  color: var(--purple-700);
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  padding: 0;
}

.dp-seller__follow:hover {
  background: var(--purple-700);
  color: #fff;
}
.dp-seller__follow:hover svg {
  fill: #fff;
}

/* ---------- Rating row ---------- */
.dp-rating-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.dp-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
}

.dp-rating__link {
  font-size: 0.85rem;
  color: #666;
  text-decoration: underline;
}

.dp-rating__link:hover {
  color: var(--purple-700);
}

/* ---------- Quantity ---------- */
.dp-qty-wrap {
  margin-bottom: 1rem;
}

.dp-label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  color: #222;
}

.dp-qty-select {
  width: 5rem;
  border-radius: 0.5rem;
  border: 1.5px solid #ccc;
}

/* ---------- CTA Buttons ---------- */
.dp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 2rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
  border: none;
  margin-bottom: 0.65rem;
}

.dp-btn--cart {
  background: #222;
  color: #fff;
}

.dp-btn--cart:hover {
  filter: brightness(1.15);
  color: #fff;
}

.dp-btn--buy {
  background: var(--purple-700);
  color: #fff;
}

.dp-btn--buy:hover {
  filter: brightness(1.1);
  color: #fff;
}

.dp-btn--notify {
  background: #fff;
  color: var(--purple-700, #722e6f);
  border: 2px solid var(--purple-700, #722e6f);
  font-weight: 600;
  letter-spacing: .3px;
}

.dp-btn--notify:hover {
  background: var(--purple-700, #722e6f);
  color: #fff;
}

.dp-btn--notify:disabled,
.dp-btn--notify.dp-btn--disabled {
  background: #f3e8f2 !important;
  color: grey !important;
  border-color: var(--purple-700, #722e6f) !important;
  opacity: .75;
  pointer-events: none;
}

.dp-btn--disabled {
  opacity: 0.5;
  pointer-events: none;
  color: grey !important;
}

.dp-btn--added {
  background: #4caf50 !important;
  color: #fff !important;
}

/* ---------- Wishlist button ---------- */
.dp-wishlist-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1.5px solid #ccc;
  border-radius: 2rem;
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
  color: #222;
  cursor: pointer;
  transition: border-color 0.15s;
  margin-bottom: 1.25rem;
}

.dp-wishlist-btn:hover {
  border-color: var(--purple-700);
  color: var(--purple-700);
}
.dp-wishlist-btn:hover svg {
  fill: var(--purple-700);
}

.dp-wishlist-btn--saved {
  border-color: var(--purple-700);
  color: var(--purple-700);
  background: rgba(114,46,111,.06);
}
.dp-wishlist-btn--saved svg {
  fill: var(--purple-700);
}

/* ---------- Ask the Seller button ---------- */
.dp-btn--ask {
  background: #fff;
  color: var(--purple-700, #722e6f);
  border: 2px solid var(--purple-700, #722e6f);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.dp-btn--ask:hover {
  background: var(--purple-700, #722e6f);
  color: #fff;
}
.dp-btn--ask:hover svg {
  fill: #fff;
}
.dp-btn--ask svg {
  fill: var(--purple-700, #722e6f);
  transition: fill 0.15s;
}

/* ---------- Description ---------- */
.dp-section {
  border-top: 1px solid rgba(0,0,0,.1);
  padding-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.dp-section__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: #222;
}

.dp-section__body {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* ---------- Tags ---------- */
.dp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}

.dp-tag {
  display: inline-block;
  font-size: 0.8rem;
  background: #f3e8f2;
  color: var(--purple-700);
  border-radius: 1rem;
  padding: 0.3rem 0.85rem;
  font-weight: 500;
}

/* ═══════════════════════════════════════
   DETAIL PAGE — Reviews section
   ═══════════════════════════════════════ */
.dp-reviews-section {
  width: 100%;
  padding-bottom: 2rem;
}

.dp-reviews__heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: #222;
  border-top: 1px solid rgba(0,0,0,.1);
  padding-top: 1.5rem;
}

.dp-reviews__empty {
  font-size: 0.95rem;
  color: #888;
  padding: 1rem 0;
}

.dp-review {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 0.875rem;
  padding: 1.125rem;
  margin-bottom: 0.875rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.dp-review__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.dp-review__date {
  font-size: 0.8rem;
  color: #999;
}

.dp-review__recommend {
  font-size: 0.75rem;
  color: #4caf50;
  font-weight: 600;
}

.dp-review__title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.35rem;
  color: #222;
}

.dp-review__body {
  font-size: 0.92rem;
  color: #444;
  line-height: 1.55;
  white-space: pre-wrap;
  margin-bottom: 0.5rem;
}

.dp-review__user {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #888;
  font-weight: 600;
}

.dp-review__imgs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .dp-container {
    flex-direction: column;
    padding: 1rem;
    gap: 1.25rem;
    align-items: stretch;
  }

  .dp-gallery {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .dp-main-img {
    aspect-ratio: 4 / 3;
  }

  .dp-title {
    font-size: 1.25rem;
  }

  .dp-price__current {
    font-size: 1.4rem;
  }

  /* Bigger CTA buttons on mobile — stretch to card edges */
  .dp-page-card .dp-btn,
  .dp-page-card .dp-wishlist-btn,
  .dp-page-card .dp-seller-card {
    width: calc(100% + 1.5rem);
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    border-radius: 2rem;
  }

  .dp-page-card .dp-seller-card {
    border-radius: 0.875rem;
  }

  .dp-btn {
    font-size: 1.1rem;
    padding: 1rem 1.25rem;
  }

  .dp-wishlist-btn {
    justify-content: center;
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
  }

  .dp-btn--notify {
    font-size: 1.05rem;
    padding: 0.95rem 1.1rem;
  }
}

/* ═══════════════════════════════════════
   DETAIL PAGE — card3 page wrapper
   ═══════════════════════════════════════ */
.dp-page-wrap {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.dp-page-card {
  max-width: 1280px;
  margin: 1.5rem auto 2rem;
  padding: 1.5rem;
  text-align: left;
}

@media (max-width: 768px) {
  .dp-page-wrap {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .dp-page-card {
    margin: 0.5rem 0 1.5rem;
    padding: 0.75rem;
    border-radius: 1rem;
  }
}

/* ═══════════════════════════════════════
   DETAIL PAGE — Full Seller Section 
   ═══════════════════════════════════════ */
.dp-seller-full {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.5rem;
}

.dp-sf__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 1rem;
  background: #fff;
}

.dp-sf__avatar-link {
  display: block;
  margin-bottom: 0.75rem;
}

.dp-sf__avatar {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--purple-700);
}

.dp-sf__shop-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: #222;
  text-decoration: none;
  margin-bottom: 0.25rem;
}

.dp-sf__shop-name:hover {
  color: var(--purple-700);
  text-decoration: underline;
}

.dp-sf__owner {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.75rem;
}

.dp-sf__stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.88rem;
  color: #444;
  margin-bottom: 1.25rem;
}

.dp-sf__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.dp-sf__stat + .dp-sf__stat::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #999;
  margin-right: 0.25rem;
}

.dp-sf__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.dp-sf__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 2rem;
  border: 1.5px solid #222;
  background: transparent;
  color: #222;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
}

.dp-sf__btn:hover {
  background: #222;
  color: #fff;
}

.dp-sf__btn:hover svg {
  fill: #fff;
}

.dp-sf__btn--follow {
  border-color: var(--purple-700);
  color: var(--purple-700);
}

.dp-sf__btn--follow:hover {
  background: var(--purple-700);
  color: #fff;
  border-color: var(--purple-700);
}

.dp-sf__btn--following {
  background: var(--purple-700);
  color: #fff;
  border-color: var(--purple-700);
}

.dp-sf__btn--following:hover {
  background: transparent;
  color: var(--purple-700);
}

.dp-sf__followers {
  font-size: 0.82rem;
  color: #888;
}

/* ═══════════════════════════════════════
   DETAIL PAGE — Recommendation Sections
   ═══════════════════════════════════════ */
.dp-recs-section {
  padding: 0 0 1.5rem;
}

.dp-recs__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(0,0,0,.1);
  padding-top: 1.25rem;
  margin-bottom: 1rem;
}

.dp-recs__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #222;
  margin: 0;
}

.dp-recs__link {
  font-size: 0.88rem;
  color: var(--purple-700);
  text-decoration: underline;
  font-weight: 600;
}

.dp-recs__link:hover {
  color: #222;
}

.dp-recs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 992px) {
  .dp-recs__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 576px) {
  .dp-recs__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
}

/* --- Rec card --- */
.dp-rec-card {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s;
}

.dp-rec-card:hover {
  transform: translateY(-2px);
}

.dp-rec-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #f5f5f5;
}

.dp-rec-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dp-rec-card__badge,
.c-hub-card__badge {
  position: absolute;
  bottom: 0.4rem;
  left: 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  background: rgba(0,0,0,.7);
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dp-rec-card__price {
  font-size: 0.88rem;
  font-weight: 600;
  color: #222;
  margin-top: 0.4rem;
}

/* ── Public-profile seller card responsive ── */
.pp-avatar {
  width: 85%;
  border-radius: 50%;
  background-color: transparent !important;
}

.pp-info-col {
  text-align: left;
}

.pp-stats-col p {
  margin-bottom: 0.5rem;
}

/* ── Top buttons bar ── */
.pp-top-bar {
  flex-wrap: nowrap;
}

@media (max-width: 767.98px) {
  .pp-avatar {
    width: 120px;
    height: 120px;
    object-fit: cover;
    margin: 1rem auto 0.75rem;
  }

  .pp-info-col {
    text-align: center;
    padding-right: 1rem;
  }

  .pp-info-col .table {
    margin: 0 auto;
    width: auto;
  }

  .pp-stats-col {
    text-align: center;
    padding-right: 1rem;
  }

  #descrizione_venditore {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .pp-stats-col .btn {
    width: auto;
    margin-left: 0 !important;
  }

  .pp-stats-col {
    align-items: center !important;
    text-align: center;
  }

  #card_principale .card__content > .row {
    gap: 0.5rem 0;
  }

  /* Reduce outer card margins on mobile for public profile */
  #card_principale {
    border-width: 2px;
  }
  .pp-outer-wrap {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }

  /* Top buttons: wrap + gap on mobile */
  .pp-top-bar {
    flex-wrap: wrap;
    gap: 0.6rem;
  }

  .pp-top-bar > .col-auto {
    padding-left: 0 !important;
  }
}

/* Custom Order CTA hover */
#customOrderBtn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(114,46,111,0.5);
  background: linear-gradient(135deg, #5a2458 0%, #9645a0 50%, #c890c8 100%) !important;
}
#customOrderBtn:active:not(:disabled) {
  transform: translateY(0);
}

/* ── Vendor Profile (vendor_profile.html) responsive ── */
.vp-buttons-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.menu_profilo{
  text-decoration: none;
  color: var(--black, #222);
  transition: color 0.2s;
}
.menu_profilo:hover{
  color: var(--purple-700, #722e6f);
}

/* w-sm-auto: auto width from sm up (Bootstrap 5 doesn't include it) */
@media (min-width: 576px){
  .w-sm-auto{ width: auto !important; }
}

@media (max-width: 767.98px){
  /* Avatar card centrata su mobile */
  #profilo > .card3 .order-1{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Form area: meno padding su mobile */
  #profilo .order-2 form{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Sidebar table nav full-width on mobile */
  #profilo .order-1 .table{
    max-width: 280px;
  }

  /* Buttons stack on mobile */
  .vp-buttons-wrap .btn{
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 140px;
  }
}

/* ═══════════════════════════════════════
   CART BOTTOM BAR
   ═══════════════════════════════════════ */
.cart-bottom{
  position: sticky;
  bottom: 0;
  z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 -4px 18px rgba(0,0,0,.08);
  padding: .85rem 0;
}

.cart-bottom__inner{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.cart-bottom__totals{
  display: flex;
  align-items: baseline;
  gap: .35rem;
}

.cart-bottom__qty{
  font-weight: 700;
  font-size: .95rem;
  color: #222;
}

.cart-bottom__price{
  font-weight: 400;
  font-size: .95rem;
  color: #222;
}

.cart-bottom__checkout{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1.3rem;
  border-radius: 2rem;
  border: 2px solid var(--purple-700, #722e6f);
  background: transparent;
  color: var(--purple-700, #722e6f);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: background .15s, color .15s;
  margin-right: 1rem;
  margin-bottom: 0.2rem;
}

.cart-bottom__checkout:hover{
  background: var(--purple-700, #722e6f);
  color: #fff;
}

/* ── Cart responsive ── */
@media (min-width: 769px){
  .cart-bottom{
    display: none !important;
  }
}
@media (max-width: 768px){
  .cart-bottom__inner{
    justify-content: center;
  }
}

@media (max-width: 576px){
  .cart-bottom{
    padding: .7rem 0;
  }
  .cart-bottom__inner{
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    text-align: center;
  }
  .cart-bottom__checkout{
    justify-content: center;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════
   PROFILE PAGE – mobile: nav-table at card bottom
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .profile-sidebar {
    display: contents !important;
  }
  .profile-photo-card {
    order: 1;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
  }
  .profile-nav-table {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: start;
    padding: 0 12px;
  }
  /* Extra spacing between search bar and card */
  #profilo {
    margin-top: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════
   PROFILE IMAGE – square + cover
   ═══════════════════════════════════════════════════════ */
#imgProfilo {
  object-fit: cover;
  aspect-ratio: 1;
  width: 100%;
  height: auto;
}

/* ═══════════════════════════════════════════════════════
   CROPPER – circular mask preview
   ═══════════════════════════════════════════════════════ */
.cropper-view-box,
.cropper-face {
  border-radius: 50%;
}
.cropper-view-box {
  outline: 2px solid rgba(114,46,111,.65);
  outline-offset: -1px;
}

/* ═══════════════════════════════════════════════════════
   DISCOUNT MODAL – responsive table on mobile
   ═══════════════════════════════════════════════════════ */
#discounts_div .table-responsive {
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767.98px) {
  #discounts_div .table {
    font-size: 0.78rem;
  }
  #discounts_div .table th,
  #discounts_div .table td {
    padding: 0.35rem 0.4rem;
    vertical-align: top;
  }
}

/* ═══════════════════════════════════════════════════════
   MOBILE MERGED NAVBAR (nav1 + nav2 in one bar)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  /* Hamburger inserted by JS into topbar – pink border */
  .topbar .ch-mobile-toggler {
    flex: 0 0 auto;
    border: 2px solid #d470d1;
    border-radius: 8px;
    padding: 4px 8px;
    background: transparent;
    line-height: 1;
    margin-left: 4px;
    transition: background .2s;
  }
  .topbar .ch-mobile-toggler:hover,
  .topbar .ch-mobile-toggler:focus {
    background: rgba(212, 112, 209, .15);
    outline: none;
    box-shadow: none;
  }
  .topbar .ch-mobile-toggler .navbar-toggler-icon {
    width: 22px;
    height: 22px;
  }

  /* Mobile search toggle button (magnifying glass) */
  .topbar .ch-mobile-search-btn {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    padding: 4px 6px;
    line-height: 1;
    cursor: pointer;
    color: #131313;
    transition: color .2s;
  }
  .topbar .ch-mobile-search-btn:hover,
  .topbar .ch-mobile-search-btn:focus {
    color: #d470d1;
    outline: none;
  }
  .topbar .ch-mobile-search-btn svg {
    width: 22px;
    height: 22px;
  }

  /* Mobile search bar (hidden by default, toggled by magnifying glass) */
  .ch-mobile-search-row {
    display: none;
    width: 100%;
    padding: 6px 12px 8px;
    background: transparent;
  }
  .ch-mobile-search-row.open {
    display: flex;
  }
  .ch-mobile-search-row .input-wrapper {
    flex: 1;
  }
  .ch-mobile-search-row .input-wrapper input {
    width: 100%;
    font-size: .95rem;
    height: 36px;
    border-radius: 1rem;
  }
  /* Mobile search dropdown */
  .ch-mobile-search-row .gs-dropdown-mobile {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    z-index: 9999;
    background: #fff;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    max-height: 360px;
    overflow-y: auto;
    display: none;
    font-family: 'Quicksand','Poppins', sans-serif;
  }
  .ch-mobile-search-row .gs-dropdown-mobile.open { display: block; }

  /* ── Droplet animation ── */
  .ch-search-droplet {
    position: fixed;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    z-index: 9999;
    opacity: 1;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
  }
  /* Phase 1: fall down */
  .ch-search-droplet.falling {
    animation: dropletFall .35s cubic-bezier(.55,.06,.68,.19) forwards;
  }
  /* Phase 2: morph into bar */
  .ch-search-droplet.morphing {
    animation: dropletMorph .35s cubic-bezier(.25,.46,.45,.94) forwards;
  }

  @keyframes dropletFall {
    0%   { transform: scale(1) translateY(0); opacity: 1; }
    60%  { transform: scale(1.1) translateY(var(--drop-dist)); opacity: 1; }
    80%  { transform: scale(1.3, 0.7) translateY(var(--drop-dist)); opacity: 1; }
    100% { transform: scale(1) translateY(var(--drop-dist)); opacity: 1; }
  }
  @keyframes dropletMorph {
    0%   { width: 16px; height: 16px; border-radius: 50%; opacity: 1; }
    50%  { width: var(--bar-w); height: 36px; border-radius: 1rem; opacity: .85; }
    100% { width: var(--bar-w); height: 36px; border-radius: 1rem; opacity: 0; }
  }

  /* Reserve space but hide input while droplet animates */
  .ch-mobile-search-row.reserving {
    display: flex;
  }
  .ch-mobile-search-row.reserving .input-wrapper input {
    opacity: 0;
  }
  /* Ensure input is always visible when open */
  .ch-mobile-search-row.open .input-wrapper input {
    opacity: 1 !important;
  }

  /* Collapse content moved by JS after nav1 */
  .ch-mobile-nav-collapse {
    background: #fed8fc;
    padding: 8px 16px 12px;
  }
  .ch-mobile-nav-collapse .navbar-nav {
    text-align: center;
  }
  .ch-mobile-nav-collapse .nav-item .button1,
  .ch-mobile-nav-collapse .nav-item .button4 {
    width: 100%;
    justify-content: center;
  }
}
/* Toggler & search btn order fix for ≤520px */
@media (max-width: 520px) {
  .topbar .ch-mobile-toggler {
    order: 1 !important;
  }
  .topbar .ch-mobile-search-btn {
    order: 1 !important;
  }
}

/* ===== my_orders page ===== */
/* Single card3 wraps everything on desktop — no cut */
.my-orders-page .my-orders-card {
  overflow: visible;
}

@media (max-width: 767px) {
  /* On mobile: the outer card3 becomes transparent, header gets its own card look */
  .my-orders-page .my-orders-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
  }
  .my-orders-page .my-orders-header {
    background-color: #ffeee7;
    border: var(--card-border-w) solid var(--purple-700);
    border-radius: var(--card-radius);
    margin-bottom: 1rem;
    padding: 0 8px 8px;
  }
  .my-orders-page .my-orders-header h1 {
    padding: 0 10px;
    font-size: 1.5rem;
  }
  .my-orders-page .my-orders-header .btn {
    margin: 0 6px;
  }
  .my-orders-page {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* ═══════════════════════════════════════════
   Custom Order Messaging
   ═══════════════════════════════════════════ */
.co-thread { margin-top: 10px; }
.co-msgs-container {
  border: 1px solid #ece0ec;
  border-radius: 10px;
  background: #faf7fa;
}
.co-msgs-container::-webkit-scrollbar { width: 5px; }
.co-msgs-container::-webkit-scrollbar-thumb { background: #e8b4e6; border-radius: 4px; }
.co-reply-box textarea:focus { border-color: #e8b4e6; box-shadow: 0 0 0 .15rem rgba(114, 46, 111, .15); }

/* ═══════════════════════════════════════════
   Public Profile – Product Grid mobile
   ═══════════════════════════════════════════ */
.pp-product-grid { padding: 0 3%; }
@media (max-width: 767.98px) {
  .pp-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 0 2px;
  }
  .pp-product-grid > .col {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
  .pp-product-grid .c-hub-card__body { padding: 6px 6px 10px; }
  .pp-product-grid .c-hub-card__cart-btn { padding: 5px 6px; font-size: .75rem; white-space: nowrap; }
  .pp-product-grid .c-hub-card__title { font-size: .78rem; }
  .pp-product-grid .c-hub-card__price-now { font-size: .9rem; }
  .pp-product-grid .c-hub-card__price-old { font-size: .75rem; }
}