/* ==========================================================================
   U.S. Nave — Skin dei componenti dei plugin (Fase 3).
   Caricata SOLO dal tema vanilla-usnave. Riveste l'output degli shortcode dei
   plugin col design U.S. Nave, riferendo i token con FALLBACK (Dependency
   Inversion): funziona anche senza homepage.css e senza toccare i plugin.
   Sotto il tema di default questa skin non è caricata → i plugin usano il loro
   CSS base (vecchio look). SOLID: il plugin non conosce il tema; il tema riveste
   il "contratto di classi" pubblico dello shortcode.
   ========================================================================== */

/* token con fallback (l'astrazione su cui si appoggia la skin) */
.vanilla-shop-shortcode,
.vanilla-product-detail-shortcode,
.vanilla-account-container,
.vanilla-account-back-wrapper,
.vanilla-sa-shortcode,
.vanilla-news-list,
.vanilla-news-item,
.vanilla-running-races-list,
.vanilla-running-race-detail,
.vanilla-mileage,
.vanilla-mileage-back,
.vanilla-auth-container {
  --c-blue: var(--blue, #1466d8);
  --c-navy: var(--navy, #0a2647);
  --c-green: var(--green, #17c964);
  --c-green-2: var(--green-2, #12a455);
  --c-ink: var(--ink, #0c1b2e);
  --c-steel: var(--steel, #5a6b7e);
  --c-line: var(--line-dk, rgba(12, 27, 46, 0.1));
  --c-off: var(--off, #f4f8fd);
  --c-radius: 16px;
  --c-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --c-display: "Anton", Impact, sans-serif;
  font-family: var(--c-font);
  color: var(--c-ink);
}

/* ==========================================================================
   vanilla-shop → [vanilla_shop]
   ========================================================================== */
.vanilla-shop-shortcode { max-width: 1200px; margin: 0 auto; }

/* saldo borsellino (loggato) */
.vanilla-shop-shortcode .user-wallet-banner {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(120deg, var(--c-blue), var(--c-navy));
  color: #fff; padding: 12px 20px; border-radius: 999px;
  box-shadow: 0 10px 24px rgba(20, 102, 216, 0.28); margin-bottom: 28px;
}
.vanilla-shop-shortcode .wallet-text { font-size: 0.92rem; letter-spacing: 0.01em; }
.vanilla-shop-shortcode .wallet-amount { font-family: var(--c-display); font-size: 1.15rem; letter-spacing: 0.02em; }

/* banner login (ospite) */
.vanilla-shop-shortcode .login-banner {
  background: var(--c-off); border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-green); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 28px; font-size: 0.95rem; color: var(--c-steel);
}
.vanilla-shop-shortcode .login-banner a { color: var(--c-blue); font-weight: 700; text-decoration: none; }
.vanilla-shop-shortcode .login-banner a:hover { color: var(--c-green-2); }

/* griglia prodotti */
.vanilla-shop-shortcode .products-grid { display: grid; gap: 24px; }
.vanilla-shop-shortcode .products-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.vanilla-shop-shortcode .products-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.vanilla-shop-shortcode .products-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* card prodotto (nuovo design) */
.vanilla-shop-shortcode .product-card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.28s;
}
.vanilla-shop-shortcode .product-card:hover {
  transform: translateY(-6px); box-shadow: 0 22px 44px rgba(10, 38, 71, 0.13); border-color: transparent;
}
.vanilla-shop-shortcode .product-image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-off); }
.vanilla-shop-shortcode .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.vanilla-shop-shortcode .product-card:hover .product-image img { transform: scale(1.05); }
.vanilla-shop-shortcode .product-image-placeholder { display: grid; place-items: center; }
.vanilla-shop-shortcode .placeholder-icon { font-size: 2.4rem; opacity: 0.5; }

.vanilla-shop-shortcode .product-info { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vanilla-shop-shortcode .product-name { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.25; }
.vanilla-shop-shortcode .product-name a { color: var(--c-ink); text-decoration: none; }
.vanilla-shop-shortcode .product-name a:hover { color: var(--c-blue); }
.vanilla-shop-shortcode .product-description { font-size: 0.92rem; color: var(--c-steel); line-height: 1.55; margin: 0; }
.vanilla-shop-shortcode .product-footer {
  margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.vanilla-shop-shortcode .product-price { font-family: var(--c-display); font-size: 1.5rem; color: var(--c-navy); letter-spacing: 0.01em; }
.vanilla-shop-shortcode .btn-view-product {
  display: inline-flex; align-items: center; gap: 0.4em; background: var(--c-blue); color: #fff;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  padding: 0.7em 1.2em; border-radius: 999px; transition: transform 0.16s, filter 0.16s;
}
.vanilla-shop-shortcode .btn-view-product:hover { transform: translateY(-2px); filter: brightness(1.07); }

.vanilla-shop-shortcode .no-products {
  text-align: center; padding: 60px 20px; color: var(--c-steel);
  background: var(--c-off); border-radius: var(--c-radius);
}

@media (max-width: 900px) {
  .vanilla-shop-shortcode .products-grid.columns-3,
  .vanilla-shop-shortcode .products-grid.columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* specificità 0,3,0 per battere il base `.products-grid.columns-3`
     (altrimenti su smartphone resta a 2 colonne e le card si schiacciano) */
  .vanilla-shop-shortcode .products-grid,
  .vanilla-shop-shortcode .products-grid.columns-2,
  .vanilla-shop-shortcode .products-grid.columns-3,
  .vanilla-shop-shortcode .products-grid.columns-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   vanilla-shop → [vanilla_product_detail] (dettaglio prodotto)
   ========================================================================== */
.vanilla-product-detail-shortcode { max-width: 1100px; margin: 0 auto; }
.vanilla-shop-breadcrumb { margin-bottom: 24px; }
.vanilla-shop-breadcrumb a { color: var(--c-blue); font-weight: 600; text-decoration: none; font-size: 0.9rem; }
.vanilla-shop-breadcrumb a:hover { color: var(--c-green-2); }
.vanilla-product-detail-shortcode .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.vanilla-product-detail-shortcode .product-main-image { position: relative; aspect-ratio: 1/1; border-radius: var(--c-radius); overflow: hidden; background: var(--c-off); border: 1px solid var(--c-line); }
.vanilla-product-detail-shortcode .product-main-image img { width: 100%; height: 100%; object-fit: cover; }
.vanilla-product-detail-shortcode .product-image-placeholder { display: grid; place-items: center; }
.vanilla-product-detail-shortcode .placeholder-icon { font-size: 3.4rem; opacity: 0.5; }
/* Nota: l'icona placeholder del plugin e' position:absolute; top/left:50%. La card
   (.product-image) e' gia' position:relative → si centra. Il box del dettaglio no,
   quindi si centrava sul viewport ed usciva dal riquadro: reso relative sopra. */
.vanilla-product-detail-shortcode .product-title { font-family: var(--c-display); text-transform: uppercase; font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--c-navy); line-height: 1; margin: 0 0 18px; }
.vanilla-product-detail-shortcode .product-price-box { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; }
.vanilla-product-detail-shortcode .price-label { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-steel); font-weight: 600; }
.vanilla-product-detail-shortcode .price-value { font-family: var(--c-display); font-size: 2.2rem; color: var(--c-blue); }
.vanilla-product-detail-shortcode .product-description { color: var(--c-steel); line-height: 1.65; margin-bottom: 26px; }
.vanilla-product-detail-shortcode .btn { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; padding: 0.85em 1.6em; border-radius: 999px; border: 0; cursor: pointer; transition: transform 0.16s, filter 0.16s; }
.vanilla-product-detail-shortcode .btn-primary { background: var(--c-blue); color: #fff; box-shadow: 0 10px 22px rgba(20, 102, 216, 0.3); }
.vanilla-product-detail-shortcode .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.07); }
.vanilla-product-detail-shortcode .btn-purchase { background: var(--c-green); color: #04220f; box-shadow: 0 10px 22px rgba(23, 201, 100, 0.28); }
.vanilla-product-detail-shortcode .purchase-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vanilla-product-detail-shortcode .wallet-info { font-size: 0.9rem; color: var(--c-steel); }
.vanilla-product-detail-shortcode .login-required-box,
.vanilla-product-detail-shortcode .insufficient-funds-box { background: var(--c-off); border: 1px solid var(--c-line); border-left: 4px solid var(--c-green); border-radius: 12px; padding: 18px 20px; }
.vanilla-product-detail-shortcode .login-required-box p,
.vanilla-product-detail-shortcode .insufficient-funds-box p { margin: 0 0 12px; color: var(--c-steel); }
.vanilla-product-detail-shortcode .insufficient-funds-box { border-left-color: #e8410f; }
@media (max-width: 760px) {
  .vanilla-product-detail-shortcode .product-detail { grid-template-columns: 1fr; gap: 24px; }
}

/* helper condivisi (bottone / card / empty) usati dalle varie skin */
.vanilla-sa-btn, .vanilla-account-btn, .vanilla-mileage-btn,
.vanilla-running-races-list .button, .vanilla-running-race-detail .button {
  display: inline-flex; align-items: center; gap: .45em; font-family: var(--c-font);
  font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; padding: .75em 1.35em; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .16s, filter .16s, background .16s, color .16s; line-height: 1;
}
.vanilla-sa-btn--primary, .vanilla-account-btn, .vanilla-mileage-btn--primary,
.vanilla-running-races-list .button-primary, .vanilla-running-race-detail .button-primary,
.register-race-button { background: var(--c-blue); color: #fff; box-shadow: 0 10px 22px rgba(20,102,216,.3); }
.vanilla-sa-btn--secondary, .vanilla-mileage-btn:not(.vanilla-mileage-btn--primary) {
  background: #fff; color: var(--c-blue); border: 1.5px solid var(--c-line);
}
.vanilla-sa-btn--primary:hover, .vanilla-account-btn:hover, .vanilla-mileage-btn--primary:hover,
.vanilla-running-races-list .button-primary:hover, .register-race-button:hover { transform: translateY(-2px); filter: brightness(1.07); }
.vanilla-mileage-btn--delete { background: transparent; color: #e8410f; box-shadow: none; padding: .4em .7em; }

/* ==========================================================================
   vanilla-supporters-agreements → [vanilla_supporters] / [vanilla_agreements]
   ========================================================================== */
.vanilla-sa-shortcode { max-width: 1200px; margin: 0 auto; }
.vanilla-sa-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.vanilla-sa-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .28s var(--c-ease, cubic-bezier(.22,.61,.36,1)), box-shadow .28s; }
.vanilla-sa-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(10,38,71,.13); }
.vanilla-sa-card__image { aspect-ratio: 16/10; background: var(--c-off); overflow: hidden; display: grid; place-items: center; }
.vanilla-sa-card__image img { width: 100%; height: 100%; object-fit: cover; }
.vanilla-sa-card__no-image .dashicons { font-size: 2.4rem; width: auto; height: auto; color: var(--c-steel); opacity: .5; }
.vanilla-sa-card__content { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vanilla-sa-card__name { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--c-ink); }
.vanilla-sa-card__description { margin: 0; font-size: .92rem; color: var(--c-steel); line-height: 1.55; }
.vanilla-sa-card .vanilla-sa-btn { margin-top: auto; align-self: flex-start; }
.vanilla-sa-no-items { text-align: center; padding: 60px 20px; color: var(--c-steel); background: var(--c-off); border-radius: var(--c-radius); }
/* dettaglio supporter/convenzione */
.vanilla-sa-detail__container { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: start; }
.vanilla-sa-detail__image, .vanilla-sa-detail__no-image { border-radius: var(--c-radius); overflow: hidden; background: var(--c-off); border: 1px solid var(--c-line); aspect-ratio: 1/1; width: 100%; object-fit: cover; display: grid; place-items: center; }
.vanilla-sa-detail__title { font-family: var(--c-display); text-transform: uppercase; font-size: clamp(1.8rem,3.5vw,2.6rem); color: var(--c-navy); line-height: 1; margin: 0 0 14px; }
.vanilla-sa-detail__short-description { color: var(--c-ink); font-size: 1.05rem; margin-bottom: 16px; }
.vanilla-sa-detail__long-description { border-left: 4px solid var(--c-green); background: var(--c-off); padding: 16px 20px; border-radius: 0 12px 12px 0; color: var(--c-steel); margin: 0 0 18px; }
@media (max-width: 760px) { .vanilla-sa-detail__container { grid-template-columns: 1fr; gap: 24px; } }

/* ==========================================================================
   vanilla-news → [vanilla_news] / [vanilla_news_item]
   ========================================================================== */
.vanilla-news-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; }
.vanilla-news-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .28s, box-shadow .28s; }
.vanilla-news-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(10,38,71,.13); }
.vanilla-news-card__image { display: block; height: 190px; overflow: hidden; }
.vanilla-news-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.vanilla-news-card:hover .vanilla-news-card__image img { transform: scale(1.05); }
.vanilla-news-card__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vanilla-news-card__category { align-self: flex-start; background: var(--c-navy); color: #fff; font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: .4em .8em; border-radius: 999px; }
.vanilla-news-card__title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.vanilla-news-card__title a { color: var(--c-ink); text-decoration: none; }
.vanilla-news-card__title a:hover { color: var(--c-blue); }
.vanilla-news-card__excerpt { margin: 0; font-size: .92rem; color: var(--c-steel); line-height: 1.55; }
.vanilla-news-empty { text-align: center; padding: 60px 20px; color: var(--c-steel); background: var(--c-off); border-radius: var(--c-radius); }
/* singola news */
.vanilla-news-item { max-width: 820px; margin: 0 auto; }
.vanilla-news-item__category { display: inline-block; background: var(--c-navy); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .45em .85em; border-radius: 999px; margin-bottom: 14px; }
.vanilla-news-item__title { font-family: var(--c-display); text-transform: uppercase; font-size: clamp(2rem,4vw,3rem); color: var(--c-navy); line-height: 1; margin: 0 0 20px; }
.vanilla-news-item__featured { width: 100%; border-radius: var(--c-radius); margin-bottom: 24px; }
.vanilla-news-item__content { color: var(--c-ink); line-height: 1.7; }
.vanilla-news-item__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 12px; margin-top: 24px; }
.vanilla-news-item__gallery-image img { width: 100%; border-radius: 12px; }
@media (max-width: 900px) { .vanilla-news-list { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .vanilla-news-list { grid-template-columns: 1fr; } }

/* ==========================================================================
   vanilla-running-race → [vanilla_running_races] / [vanilla_running_race]
   ========================================================================== */
.vanilla-running-races-list { max-width: 1200px; margin: 0 auto; }
.running-races-year-heading { font-family: var(--c-display); text-transform: uppercase; color: var(--c-navy); font-size: 1.6rem; margin: 32px 0 16px; }
.running-races-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 22px; }
.running-race-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .28s, box-shadow .28s; }
.running-race-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(10,38,71,.13); }
.race-card-image { position: relative; height: 180px; overflow: hidden; background: var(--c-off); }
.race-card-image img { width: 100%; height: 100%; object-fit: cover; }
.race-card-badge { position: absolute; top: 12px; left: 12px; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .4em .8em; border-radius: 999px; color: #fff; }
.race-upcoming-badge { background: var(--c-green); color: #04220f; }
.race-closed-badge { background: var(--c-steel); }
.race-card-content { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.race-card-title { margin: 0 0 2px; font-size: 1.18rem; font-weight: 700; }
.race-card-title a { color: var(--c-ink); text-decoration: none; }
.race-card-title a:hover { color: var(--c-blue); }
.race-card-location, .race-card-date, .race-card-registration, .race-card-participants { font-size: .9rem; color: var(--c-steel); display: flex; align-items: center; gap: 6px; }
.race-card-date strong { color: var(--c-ink); }
.race-card-time { color: var(--c-steel); }
.race-card-description { font-size: .9rem; color: var(--c-steel); line-height: 1.55; }
.race-variants-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.race-variant-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--c-off); border-radius: 12px; padding: 10px 14px; }
.variant-name strong { color: var(--c-ink); font-size: .92rem; }
.variant-distance { color: var(--c-blue); font-weight: 700; font-size: .82rem; }
.variant-difficulty { font-size: .72rem; color: var(--c-steel); text-transform: uppercase; letter-spacing: .04em; }
.variant-price strong { font-family: var(--c-display); color: var(--c-navy); }
.race-card-footer { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--c-line); }
.race-view-details-btn { display: inline-flex; align-items: center; gap: .4em; background: var(--c-blue); color: #fff; text-decoration: none; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; padding: .6em 1.1em; border-radius: 999px; }
/* dettaglio gara */
.vanilla-running-race-detail { max-width: 1000px; margin: 0 auto; }
.race-detail-header-image img { width: 100%; border-radius: var(--c-radius); margin-bottom: 24px; }
.race-detail-title { font-family: var(--c-display); text-transform: uppercase; font-size: clamp(2rem,4vw,3rem); color: var(--c-navy); line-height: 1; margin: 0 0 10px; }
.race-detail-location { color: var(--c-steel); margin-bottom: 24px; }
.race-detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 14px; margin-bottom: 28px; }
.race-meta-item { background: var(--c-off); border: 1px solid var(--c-line); border-radius: 12px; padding: 16px; display: flex; gap: 12px; align-items: center; }
.race-meta-item strong { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-steel); }
.race-meta-item span { color: var(--c-ink); font-weight: 600; }
.race-status-badge { padding: .3em .7em; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.race-status-open { background: rgba(23,201,100,.15); color: var(--c-green-2); }
.race-status-closed { background: rgba(12,27,46,.08); color: var(--c-steel); }
.race-variants-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 18px; margin-top: 16px; }
.race-variant-card { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 22px; }
.variant-card-title { margin: 0 0 12px; font-weight: 700; color: var(--c-ink); }
.variant-stat { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--c-line); font-size: .9rem; }
.variant-stat-label { color: var(--c-steel); }
.variant-price-value strong { font-family: var(--c-display); color: var(--c-navy); font-size: 1.3rem; }
.race-login-notice { background: var(--c-off); border-left: 4px solid var(--c-green); border-radius: 0 12px 12px 0; padding: 16px 20px; margin-bottom: 16px; color: var(--c-steel); }
@media (max-width: 900px) { .running-races-grid { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); } }

/* ==========================================================================
   vanilla-account → [vanilla_account] (+ sotto-viste)
   ========================================================================== */
.vanilla-account-container { max-width: 1100px; margin: 0 auto; }
.vanilla-account-header h2 { font-family: var(--c-display); text-transform: uppercase; font-size: clamp(1.8rem,3.6vw,2.6rem); color: var(--c-navy); line-height: 1; margin: 0 0 8px; }
.vanilla-account-subtitle { color: var(--c-steel); margin: 0 0 24px; }
.vanilla-account-back-wrapper { max-width: 1100px; margin: 0 auto 16px; }
.vanilla-account-back { color: var(--c-blue); font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.vanilla-account-back:hover { color: var(--c-green-2); }
.vanilla-account-admin-link { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.vanilla-account-dashboard-btn { display: inline-flex; align-items: center; gap: 7px; background: var(--c-navy); color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: .7em 1.2em; border-radius: 999px; }
.vanilla-account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 18px; }
.vanilla-account-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 22px; text-decoration: none; color: inherit;
  transition: transform .28s, box-shadow .28s, border-color .28s; }
.vanilla-account-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(10,38,71,.12); border-color: var(--c-blue); }
.vanilla-account-card-icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--c-blue), var(--c-navy)); color: #fff; }
.vanilla-account-card-icon .dashicons { font-size: 26px; width: 26px; height: 26px; }
.vanilla-account-card-wallet .vanilla-account-card-icon { background: linear-gradient(135deg, var(--c-green), var(--c-green-2)); color: #04220f; }
.vanilla-account-card-content { flex: 1; }
.vanilla-account-card-content h3 { margin: 0 0 3px; font-size: 1.05rem; font-weight: 700; color: var(--c-ink); }
.vanilla-account-card-content p { margin: 0; font-size: .88rem; color: var(--c-steel); }
.vanilla-account-card-content .wallet-balance { font-family: var(--c-display); font-size: 1.3rem; color: var(--c-navy); }
.vanilla-account-card-arrow { color: var(--c-steel); transition: transform .2s, color .2s; }
.vanilla-account-card:hover .vanilla-account-card-arrow { transform: translateX(4px); color: var(--c-blue); }
.vanilla-account-section { margin-top: 34px; }
.vanilla-account-section h3 { font-family: var(--c-display); text-transform: uppercase; color: var(--c-navy); font-size: 1.4rem; margin: 0 0 14px; }
/* tabella attività/wallet */
.vanilla-account-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); overflow: hidden; }
.vanilla-account-table th { background: var(--c-off); text-align: left; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c-steel); padding: 12px 16px; }
.vanilla-account-table td { padding: 12px 16px; border-top: 1px solid var(--c-line); font-size: .92rem; }
.transaction-amount.positive, .transaction-amount.negative { font-weight: 700; }
.transaction-amount.positive { color: var(--c-green-2); }
.transaction-amount.negative { color: #e8410f; }
.transaction-type { display: inline-block; padding: .25em .7em; border-radius: 999px; font-size: .72rem; background: rgba(20,102,216,.1); color: var(--c-blue); }
/* Smartphone: le tabelle account/wallet (date/tipo/descrizione/importo) non entrano
   in 393px → scroll orizzontale DENTRO il contenitore invece di sforare la pagina.
   `min-width` forza la tabella oltre il wrapper (senza, width:100% la comprime). */
@media (max-width: 640px) {
  .vanilla-wallet-transactions,
  .vanilla-account-activity,
  *:has(> .vanilla-account-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vanilla-account-table { min-width: 520px; }
}
/* card-list sotto-viste (documenti/acquisti/gare) */
.vanilla-documents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 18px; }
.vanilla-document-card, .vanilla-purchase-card, .vanilla-race-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 20px; }
.vanilla-purchases-list, .vanilla-races-list { display: flex; flex-direction: column; gap: 12px; }
.vanilla-document-icon, .vanilla-purchase-icon, .vanilla-race-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--c-off); color: var(--c-blue); }
.vanilla-document-icon .dashicons, .vanilla-purchase-icon .dashicons, .vanilla-race-icon .dashicons { font-size: 22px; width: 22px; height: 22px; }
.vanilla-document-info, .vanilla-purchase-info, .vanilla-race-info { flex: 1; }
.vanilla-document-info h4, .vanilla-purchase-info h4, .vanilla-race-info h4 { margin: 0 0 4px; font-size: 1rem; font-weight: 700; color: var(--c-ink); }
.vanilla-document-meta, .vanilla-purchase-meta, .vanilla-race-meta { margin: 0; font-size: .84rem; color: var(--c-steel); display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.file-type, .purchase-status, .race-status { background: rgba(20,102,216,.1); color: var(--c-blue); padding: .2em .6em; border-radius: 999px; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; }
.vanilla-purchase-price .total-price, .position { font-family: var(--c-display); color: var(--c-navy); font-size: 1.15rem; }
.vanilla-purchase-price .unit-price { display: block; font-size: .78rem; color: var(--c-steel); }
.vanilla-account-empty-state { text-align: center; padding: 50px 20px; background: var(--c-off); border-radius: var(--c-radius); color: var(--c-steel); }
.vanilla-account-empty-state .dashicons { font-size: 2.6rem; width: auto; height: auto; opacity: .4; margin-bottom: 8px; }
.vanilla-account-empty { color: var(--c-steel); }
.vanilla-account-logout { margin-top: 28px; }
.vanilla-account-logout-btn { display: inline-flex; align-items: center; gap: 7px; color: var(--c-steel); text-decoration: none; font-weight: 600; font-size: .85rem; }
.vanilla-account-logout-btn:hover { color: #e8410f; }
/* wallet page */
.vanilla-wallet-balance-card { background: linear-gradient(120deg, var(--c-blue), var(--c-navy)); color: #fff; border-radius: var(--c-radius); padding: 30px 34px; margin-bottom: 24px; }
.vanilla-wallet-balance-card .balance-label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.vanilla-wallet-balance-card .balance-amount { font-family: var(--c-display); font-size: 2.8rem; line-height: 1; margin-top: 6px; }
.vanilla-wallet-filter { margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.vanilla-wallet-filter select { border: 1px solid var(--c-line); border-radius: 8px; padding: 8px 12px; font-family: var(--c-font); }
@media (max-width: 640px) { .vanilla-account-card { flex-wrap: wrap; } }

/* ==========================================================================
   vanilla-mileage → leaderboard / user / events  (nessun CSS base nel plugin)
   ========================================================================== */
.vanilla-mileage { max-width: 1000px; margin: 0 auto; }
.vanilla-mileage h3 { font-family: var(--c-display); text-transform: uppercase; color: var(--c-navy); font-size: 1.5rem; margin: 0 0 16px; }
.vanilla-mileage-empty { text-align: center; padding: 40px 20px; color: var(--c-steel); background: var(--c-off); border-radius: var(--c-radius); }
/* classifica */
.vanilla-mileage-leaderboard__list { display: flex; flex-direction: column; gap: 8px; }
.vanilla-mileage-leaderboard__item { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 14px 18px; transition: border-color .2s, transform .2s; }
.vanilla-mileage-leaderboard__item:hover { border-color: var(--c-blue); transform: translateX(4px); }
.vanilla-mileage-leaderboard__position { font-family: var(--c-display); font-size: 1.5rem; color: var(--c-navy); text-align: center; }
.vanilla-mileage-leaderboard__name { font-weight: 700; color: var(--c-ink); }
.vanilla-mileage-leaderboard__races { font-size: .84rem; color: var(--c-steel); }
.vanilla-mileage-leaderboard__km { font-family: var(--c-display); font-size: 1.2rem; color: var(--c-blue); }
/* stats utente */
.vanilla-mileage-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 28px; }
.vanilla-mileage-stats__item { background: var(--c-navy); color: #fff; border-radius: var(--c-radius); padding: 22px; text-align: center; }
.vanilla-mileage-stats__item.vanilla-mileage-stats__total { background: linear-gradient(135deg, var(--c-blue), var(--c-navy)); }
.vanilla-mileage-stats__value { display: block; font-family: var(--c-display); font-size: 2.4rem; line-height: 1; }
.vanilla-mileage-stats__label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.vanilla-mileage-form { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); padding: 24px; margin-bottom: 28px; }
.vanilla-mileage-form__row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.vanilla-mileage-form__row label { font-size: .8rem; font-weight: 600; color: var(--c-ink); }
.vanilla-mileage-form select, .vanilla-mileage-form input, .vanilla-mileage-form textarea { border: 1px solid var(--c-line); border-radius: 10px; padding: 10px 12px; font-family: var(--c-font); }
.vanilla-mileage-categories__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; margin-bottom: 28px; }
.vanilla-mileage-categories__item { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 16px; }
.vanilla-mileage-categories__name { display: block; font-weight: 700; color: var(--c-ink); }
.vanilla-mileage-categories__km { font-family: var(--c-display); color: var(--c-blue); }
.vanilla-mileage-entries { display: flex; flex-direction: column; gap: 8px; }
.vanilla-mileage-entry { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--c-line); border-radius: 12px; padding: 12px 16px; }
.vanilla-mileage-entry__distance { font-family: var(--c-display); color: var(--c-navy); }
.vanilla-mileage-entry__category { font-size: .82rem; color: var(--c-steel); }
/* eventi */
.vanilla-mileage-events__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; }
.vanilla-mileage-events__item { background: #fff; border: 1px solid var(--c-line); border-radius: var(--c-radius); overflow: hidden; }
.vanilla-mileage-events__image img { width: 100%; height: 160px; object-fit: cover; }
.vanilla-mileage-events__content { padding: 18px 20px; }
.vanilla-mileage-events__name { margin: 4px 0; font-size: 1.1rem; font-weight: 700; color: var(--c-ink); }
.vanilla-mileage-events__date, .vanilla-mileage-events__category, .vanilla-mileage-events__distances { font-size: .84rem; color: var(--c-steel); }
@media (max-width: 640px) {
  .vanilla-mileage-stats { grid-template-columns: 1fr; }
  .vanilla-mileage-leaderboard__item { grid-template-columns: 40px 1fr auto; }
  .vanilla-mileage-leaderboard__races { display: none; }
}

/* ==========================================================================
   vanilla-auth → [vanilla_login] / forgot / reset  (ha già un base CSS: ritaro il brand)
   ========================================================================== */
.vanilla-auth-container { max-width: 460px; margin: 40px auto; }
.vanilla-auth-form-wrapper { background: #fff; border: 1px solid var(--c-line); border-radius: 22px; padding: 36px; box-shadow: 0 24px 60px rgba(10,38,71,.1); }
/* Titolo "Login" ridondante: la pagina ha già il proprio titolo (h1). Nascosto nella card. */
.vanilla-auth-form-wrapper h2 { display: none; }
.vanilla-auth-description { color: var(--c-steel); margin: 0 0 20px; font-size: .95rem; }
.vanilla-auth-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.vanilla-auth-field label { font-size: .82rem; font-weight: 600; color: var(--c-ink); }
.vanilla-auth-field input[type=text], .vanilla-auth-field input[type=email], .vanilla-auth-field input[type=password] {
  border: 1px solid var(--c-line); border-radius: 10px; padding: 12px 14px; font-family: var(--c-font); font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.vanilla-auth-field input:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(20,102,216,.15); }
/* toggle mostra/nascondi password (iniettato dal JS del plugin): l'occhio va DENTRO il campo */
.vanilla-auth-password-wrapper { position: relative; display: block; }
.vanilla-auth-password-wrapper input { width: 100%; padding-right: 46px; }
.vanilla-auth-password-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; background: transparent;
  color: var(--c-steel); cursor: pointer; border-radius: 8px; transition: color .16s, background .16s; }
.vanilla-auth-password-toggle:hover { color: var(--c-blue); background: var(--c-off); }
.vanilla-auth-password-toggle .dashicons { font-size: 20px; width: 20px; height: 20px; line-height: 1; }
/* Smartphone: card a piena larghezza e padding compatto (recupera spazio orizzontale) */
@media (max-width: 560px) {
  .vanilla-auth-container { max-width: none; margin: 0 auto; padding-left: 0; padding-right: 0; }
  .vanilla-auth-form-wrapper { padding: 26px 22px; }
}
/* misuratore forza password: il bar È il riempimento (width inline + classe). A riposo: invisibile. */
/* Finché non c'è una forza calcolata (es. login a riposo) il meter è collassato: niente gap. */
.vanilla-auth-password-meter { margin-top: 8px; }
.vanilla-auth-password-meter:not(:has(.weak, .medium, .strong)) { margin-top: 0; height: 0; overflow: hidden; }
.vanilla-auth-password-meter-bar { height: 4px; width: 0; border-radius: 999px; background: transparent; transition: width .2s ease, background .2s; }
.vanilla-auth-password-meter-bar.weak { background: #dc2626; }
.vanilla-auth-password-meter-bar.medium { background: #f59e0b; }
.vanilla-auth-password-meter-bar.strong { background: var(--c-green-2); }
.vanilla-auth-password-meter-text { display: inline-block; margin-top: 4px; font-size: .76rem; color: var(--c-steel); }
.vanilla-auth-checkbox label { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--c-steel); }
.vanilla-auth-button { width: 100%; background: var(--c-blue); color: #fff; border: 0; border-radius: 999px; padding: 13px; font-family: var(--c-font); font-weight: 600; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: transform .16s, filter .16s; }
.vanilla-auth-button:hover { transform: translateY(-2px); filter: brightness(1.07); }
.vanilla-auth-links { margin-top: 18px; text-align: center; }
.vanilla-auth-links a { color: var(--c-blue); font-weight: 600; text-decoration: none; font-size: .9rem; }
.vanilla-auth-links a:hover { color: var(--c-green-2); }
.vanilla-auth-message { border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: .9rem; }
.vanilla-auth-error { background: #fef2f2; color: #dc2626; border-left: 4px solid #dc2626; }
.vanilla-auth-success { background: #f0fdf4; color: var(--c-green-2); border-left: 4px solid var(--c-green); }
.vanilla-auth-hint { font-size: .78rem; color: var(--c-steel); }