/*
 * Stile di base dei widget Pulsante, Icona, Spazio, Divisore, Accordion,
 * Galleria e Video embed. Caricato sia sul frontend sia nel canvas
 * dell'editor (vedi canvas.styles in editor.php), così l'aspetto durante
 * la modifica corrisponde a quello pubblicato.
 */

/*
 * Nessun CSS (né di questo plugin né del tema) imposta un font-weight
 * esplicito per <strong>/<b>: senza una regola dedicata restano al
 * comportamento nativo del browser, "font-weight: bolder" - un valore
 * RELATIVO al peso del genitore, non un peso assoluto. Il tema imposta
 * font-weight:300 (Light) su "body" con un font variabile (Manrope): da
 * una base già leggera, "bolder" può risultare troppo vicino al peso di
 * partenza per essere visibile, facendo sembrare il grassetto "che non
 * funziona" nonostante il tag <strong> sia correttamente presente
 * nell'HTML.
 */
strong,
b {
  font-weight: 700;
}

/*
 * Widget Testo: i <p>/<ul>/<ol> al suo interno sono la SUA formattazione, non
 * elementi indipendenti - devono quindi seguire lo stile impostato sul widget
 * dal tab Stile.
 *
 * Senza questa regola non ci riuscivano: la tipografia globale delle
 * impostazioni emette "p{...}", che colpisce DIRETTAMENTE quei <p>, mentre lo
 * stile del widget ("#id{...}") ci arriva solo per EREDITARIETÀ. E
 * l'ereditarietà perde SEMPRE contro una regola che colpisce l'elemento,
 * qualunque sia la specificità: alzare la specificità del widget non sarebbe
 * servito a niente. L'unico modo è far ereditare esplicitamente i figli.
 *
 * Lo stile globale del paragrafo continua comunque ad arrivare: typography.php
 * lo applica anche al contenitore del widget (vedi env_gjs_typography_selector),
 * da cui questi figli ereditano.
 *
 * <a> e <h1>-<h6> restano fuori di proposito: sono elementi che l'utente
 * configura a parte nelle impostazioni di Tipografia, e devono continuare a
 * seguire quelle.
 */
[data-env-widget="text"] p,
[data-env-widget="text"] ul,
[data-env-widget="text"] ol,
[data-env-widget="text"] li,
[data-env-widget="text"] blockquote {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
}

/*
 * Riga/Cella/Contenitore (".gjs-row" > ".gjs-row-inner" > ".gjs-cell"):
 * ".gjs-row" resta sempre a piena larghezza (il suo width/max-width/margin
 * arrivano dal CSS dinamico legato alla larghezza del sito, vedi
 * env_gjs_enqueue_site_width_override in frontend.php e
 * injectGlobalBlockCanvasStyle in builder.js), così uno sfondo applicato
 * alla riga arriva sempre ai bordi del viewport anche quando è "Boxed".
 * ".gjs-row-inner" è il contenitore che si restringe/centra da boxed
 * (stesso CSS dinamico) e ospita il vero layout flex delle celle: definito
 * qui, sempre caricato, così ogni riga (creata dal blocco "1 Column" o dal
 * wrapping automatico di un altro widget, vedi wrapInRowCellIfNeeded in
 * builder.js) ha lo stesso comportamento indipendentemente da come è nata.
 *
 * Tutti e tre gli elementi sono flex di default, così i controlli della
 * sezione "Flex" del tab Stile agiscono su ciascuno di essi:
 * - ".gjs-row": ha sempre un solo figlio (".gjs-row-inner"), che resta
 *   comunque centrato/boxato tramite il proprio max-width + margin-inline
 *   auto (i margini auto centrano un elemento flex allo stesso modo che nel
 *   flusso a blocchi, quindi la centratura boxed/full non cambia);
 * - ".gjs-row-inner": dispone le celle in riga (comportamento invariato);
 * - ".gjs-cell": flex-direction "column", così i widget al suo interno
 *   restano impilati in verticale come prima, ma la cella diventa a sua
 *   volta un contenitore flex configurabile.
 */
.gjs-row {
  display: flex;
}

.gjs-row-inner {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  padding: 15px;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .gjs-row-inner {
    flex-wrap: wrap;
  }
}

.gjs-cell {
  display: flex;
  flex-direction: column;
  min-height: 10px;
  flex-grow: 1;
  flex-basis: 100%;
  /* Senza questo la cella ha "min-width: auto", cioè la larghezza minima del
     suo contenuto: un widget largo che non si restringe (es. il track del
     Carosello) forzerebbe la cella oltre la larghezza del contenitore, che
     ha "overflow: visible", facendo sbordare la pagina a destra. "min-width:
     0" permette alla cella di restringersi e di contenere il figlio. */
  min-width: 0;
}

/* Pulsante */
.env-btn {
  display: inline-block;
  /* La cella è ora un contenitore flex a colonna con align-items:stretch
     di default: senza questo, un elemento inline-block come il pulsante
     verrebbe stirato a piena larghezza della cella (diventando una barra).
     "align-self: flex-start" lo mantiene a larghezza del contenuto e
     allineato a sinistra, come si comportava prima. */
  align-self: flex-start;
  padding: 12px 28px;
  background: #9d2782;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: filter 0.18s ease, transform 0.18s ease;
}

.env-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  color: #ffffff;
}

/* Navbar (menù di navigazione WordPress): stile di base orizzontale. Sul
   frontend ".env-navbar-menu" è l'<ul> generato da wp_nav_menu (vedi
   env_gjs_render_navbars in navbar.php); nel canvas è l'anteprima statica
   (vedi buildNavbarPreviewHtml in builder.js). Stesso selettore, stesso
   aspetto in entrambi. */
.env-navbar {
  position: relative;
  display: flex;
  align-items: center;
}

.env-navbar-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.env-navbar-menu li {
  position: relative;
  list-style: none;
}

.env-navbar-menu a {
  display: inline-block;
  padding: 6px 2px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.env-navbar-menu a:hover {
  opacity: 0.7;
}

/* Voce corrispondente alla pagina corrente (classi aggiunte da wp_nav_menu). */
.env-navbar-menu .current-menu-item > a,
.env-navbar-menu .current-menu-ancestor > a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- Hamburger: nascosto da desktop, la sua icona è nel markup (3 barre) --- */
.env-navbar-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.env-navbar-toggle-bar {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Freccetta indicatore delle voci con sotto-menù (pulsante creato da
   initNavbar). Su desktop è solo un indicatore; su mobile apre il sotto-menù. */
.env-navbar-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.env-navbar-caret::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

/* --- Sotto-menù come dropdown (desktop): compaiono su hover e su focus da
   tastiera (focus-within), con aria gestito da initNavbar. --- */
.env-navbar-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 30;
}

.env-navbar-menu .menu-item-has-children:hover > .sub-menu,
.env-navbar-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.env-navbar-menu .sub-menu a {
  display: block;
  padding: 7px 18px;
  white-space: nowrap;
  font-weight: 500;
  color: #1a1a1a;
}

/* Livelli oltre il primo: a lato invece che sotto. */
.env-navbar-menu .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

/* Sfondo scurito e pulsante di chiusura del pannello mobile: creati da
   initNavbar, inerti fuori da mobile. */
.env-navbar-backdrop,
.env-navbar-close {
  display: none;
}

/* --- Mobile: hamburger + pannello a scomparsa da DESTRA a tutta altezza --- */
@media (max-width: 782px) {
  .env-navbar-toggle {
    display: inline-flex;
  }

  .env-navbar.is-open .env-navbar-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .env-navbar.is-open .env-navbar-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .env-navbar.is-open .env-navbar-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Pannello: fisso sul lato destro, tutta l'altezza della viewport; entra
     scorrendo con una translateX (nascosto = spinto fuori a destra). */
  .env-navbar-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(340px, 85vw);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 64px 0 24px;
    background: #ffffff;
    box-shadow: -16px 0 40px rgba(0, 0, 0, 0.22);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s ease;
    z-index: 1000;
  }

  .env-navbar.is-open .env-navbar-menu {
    transform: translateX(0);
    visibility: visible;
  }

  .env-navbar-menu li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .env-navbar-menu li > a {
    flex: 1 1 auto;
    padding: 13px 20px;
    color: #1a1a1a;
  }

  /* Sfondo scurito dietro al pannello: chiude al clic (vedi initNavbar). */
  .env-navbar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease;
    z-index: 999;
  }

  .env-navbar.is-open .env-navbar-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Pulsante × in alto a destra del pannello. */
  .env-navbar-close {
    display: none;
    position: fixed;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #1a1a1a;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 1001;
  }

  .env-navbar.is-open .env-navbar-close {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Blocca lo scorrimento della pagina dietro al pannello aperto. */
  body.env-navbar-open {
    overflow: hidden;
  }

  /* Sotto-menù mobile: statici, chiusi finché non si tocca la freccetta. */
  .env-navbar-menu .sub-menu {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    min-width: 0;
    padding: 0 0 0 16px;
  }

  .env-navbar-menu .menu-item-has-children.is-open > .sub-menu {
    display: block;
  }

  .env-navbar-menu .menu-item-has-children.is-open > .env-navbar-caret::before {
    transform: rotate(-135deg);
  }

  /* Rispetta "riduci le animazioni". */
  @media (prefers-reduced-motion: reduce) {
    .env-navbar-menu,
    .env-navbar-backdrop {
      transition: none;
    }
  }
}

/* Icona */
.env-icon {
  color: #9d2782;
}

.env-icon svg {
  display: block;
}

/* Divisore */
.env-divider {
  border: 0;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  margin: 24px 0;
}

/* Accordion */
.env-accordion-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.env-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 16px 4px;
  cursor: pointer;
  font-weight: 600;
  /* Reset dello stile nativo del <button> (bordo, sfondo, font): serve un
     vero <button> per la tastiera/screen reader (vedi buildAccordionItemHtml
     in builder.js), ma deve apparire identico al <div> di prima. */
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.env-accordion-icon {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.env-accordion-item.is-open .env-accordion-icon {
  transform: rotate(-135deg);
}

.env-accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
  overflow: hidden;
}

.env-accordion-content > * {
  overflow: hidden;
  min-height: 0;
}

.env-accordion-answer {
  padding: 0 4px 16px;
}

.env-accordion-item.is-open .env-accordion-content {
  grid-template-rows: 1fr;
}

/* Galleria a griglia. Colonne, spazio, proporzione e raggio sono variabili CSS
   impostate dal tab Contenuto (vedi updateGalleryControls in builder.js). */
.env-gallery {
  display: grid;
  grid-template-columns: repeat(var(--env-gallery-columns, 3), 1fr);
  gap: var(--env-gallery-gap, 12px);
}

.env-gallery-item {
  width: 100%;
  /* "--env-gallery-ratio: auto" mantiene la proporzione originale delle foto. */
  aspect-ratio: var(--env-gallery-ratio, 1 / 1);
  height: auto;
  object-fit: cover;
  border-radius: var(--env-gallery-radius, 6px);
  display: block;
}

/* Nella galleria inizializzata (frontend) le immagini aprono la lightbox: la
   manina e il micro-zoom lo comunicano. Nel canvas dell'editor frontend.js non
   gira, quindi "data-env-gallery-ready" non c'è e non mostriamo il cursore. */
.env-gallery[data-env-gallery-ready="1"] .env-gallery-item {
  cursor: zoom-in;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.env-gallery[data-env-gallery-ready="1"] .env-gallery-item:hover {
  transform: scale(1.02);
  filter: brightness(1.04);
}

.env-gallery-item:focus-visible {
  outline: 2px solid #9d2782;
  outline-offset: 2px;
}

/* Colonne per tablet e mobile (impostabili a parte). */
@media (max-width: 1024px) {
  .env-gallery {
    grid-template-columns: repeat(var(--env-gallery-columns-tablet, 3), 1fr);
  }
}

@media (max-width: 575px) {
  .env-gallery {
    grid-template-columns: repeat(var(--env-gallery-columns-mobile, 2), 1fr);
  }
}

/* --- Lightbox (creata da initGalleries in frontend.js) --- */
.env-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(6, 9, 17, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.env-lightbox[hidden] {
  display: none;
}

/* Blocca lo scorrimento della pagina dietro l'overlay aperto. */
body.env-lightbox-open {
  overflow: hidden;
}

.env-lightbox-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.env-lightbox-image {
  max-width: 90vw;
  max-height: 82vh;
  border-radius: 8px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  object-fit: contain;
}

.env-lightbox-caption {
  max-width: 90vw;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  text-align: center;
}

.env-lightbox-close,
.env-lightbox-prev,
.env-lightbox-next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.env-lightbox-close:hover,
.env-lightbox-prev:hover,
.env-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.24);
}

.env-lightbox-close {
  top: 3vmin;
  right: 3vmin;
}

.env-lightbox-prev {
  left: 3vmin;
  top: 50%;
  transform: translateY(-50%);
}

.env-lightbox-next {
  right: 3vmin;
  top: 50%;
  transform: translateY(-50%);
}

.env-lightbox-counter {
  position: absolute;
  bottom: 3vmin;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
}

.env-lightbox-close:focus-visible,
.env-lightbox-prev:focus-visible,
.env-lightbox-next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .env-gallery[data-env-gallery-ready="1"] .env-gallery-item {
    transition: none;
  }
}

/* Video embed (YouTube/Vimeo) */
.env-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.env-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.env-video-embed-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
  background: #e4e6ea;
  color: #6b7280;
  font-size: 13px;
  text-align: center;
}

/* =========================================================================
   Icona carrello (widget "Icona carrello", vedi cart-icon.php). Sta in
   widgets.css - non in woocommerce.css - perché va nell'Header, quindi è
   presente su tutte le pagine, non solo sui Template WooCommerce.
   ========================================================================= */
.env-cart-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  line-height: 1;
}

.env-cart-icon-glyph {
  display: inline-flex;
}

/* Badge col numero di articoli, in alto a destra sull'icona. */
.env-cart-icon-count {
  position: absolute;
  top: -8px;
  left: 14px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #9d2782;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Carrello vuoto: badge nascosto (ma nel DOM, così l'aggiornamento AJAX di
   WooCommerce può riportarlo a >0 - vedi env_gjs_cart_count_html). */
.env-cart-icon-count.is-empty {
  display: none;
}

.env-cart-icon-total {
  font-size: 0.9rem;
  font-weight: 600;
}

.env-cart-icon:hover {
  opacity: 0.75;
}

.env-cart-icon:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Etichetta testuale opzionale accanto all'icona. */
.env-cart-icon-label {
  font-size: 0.95rem;
  font-weight: 600;
}

/* Opzione "nascondi a carrello vuoto": :has() reagisce dal vivo perché la
   classe .is-empty del badge cambia via fragment AJAX (0 <-> 1 articoli). */
.env-cart-icon[data-hide-empty="1"]:has(.env-cart-icon-count.is-empty) {
  display: none;
}

/* Badge tenuto nel DOM solo come segnale per "nascondi a vuoto" (numero
   nascosto dall'utente): serve al :has() ma non va mostrato. */
.env-cart-icon[data-count-hidden="1"] .env-cart-icon-count {
  display: none;
}

/* =========================================================================
   Mini-carrello a scomparsa (pannello laterale, vedi env_gjs_cart_drawer_html
   e initCartIcons in frontend.js). Un solo pannello per pagina, condiviso da
   tutte le icone in modalita drawer. Vale a ogni larghezza, non solo su mobile.
   Le variabili qui sotto sono il "tema" del pannello: si sovrascrivono in un
   punto solo. widgets.css e' autonomo (niente woocommerce.css sul frontend
   normale), quindi non dipendiamo da variabili esterne.
   ========================================================================= */
.env-cart-drawer {
  --env-cart-accent: #9d2782;
  --env-cart-accent-ink: #ffffff;
  --env-cart-surface: #ffffff;
  --env-cart-ink: #14161a;
  --env-cart-muted: #6b7280;
  --env-cart-line: rgba(17, 24, 39, 0.09);
  --env-cart-soft: rgba(17, 24, 39, 0.04);
  --env-cart-radius: 12px;

  position: fixed;
  inset: 0;
  z-index: 1000;
  /* Da chiuso non deve intercettare i clic sulla pagina (copre tutto il
     viewport): li riabilitiamo solo da aperto. */
  pointer-events: none;
}

.env-cart-drawer[hidden] {
  display: none;
}

.env-cart-drawer.is-open {
  pointer-events: auto;
}

/* Sfondo scurito con lieve sfocatura: chiude al clic (data-env-cart-close). */
.env-cart-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 12, 20, 0.48);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

/* Pannello che scorre da destra. */
.env-cart-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(408px, 92vw);
  height: 100dvh;
  background: var(--env-cart-surface);
  color: var(--env-cart-ink);
  box-shadow: -24px 0 60px rgba(2, 6, 23, 0.28);
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  font-size: 15px;
  line-height: 1.5;
}

.env-cart-drawer.is-open .env-cart-drawer-backdrop {
  opacity: 1;
}

.env-cart-drawer.is-open .env-cart-drawer-panel {
  transform: translateX(0);
}

/* --- Intestazione --- */
.env-cart-drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--env-cart-line);
}

.env-cart-drawer-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Filetto colorato accanto al titolo: dettaglio grafico che "firma" il pannello. */
.env-cart-drawer-title::before {
  content: "";
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: var(--env-cart-accent);
}

.env-cart-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--env-cart-soft);
  color: var(--env-cart-ink);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.env-cart-drawer-close:hover {
  background: rgba(17, 24, 39, 0.1);
  transform: rotate(90deg);
}

.env-cart-drawer-close:focus-visible {
  outline: 2px solid var(--env-cart-accent);
  outline-offset: 2px;
}

/* --- Corpo: la lista scorre, totale e pulsanti restano ancorati in basso --- */
.env-cart-drawer-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

.env-cart-drawer-body .widget_shopping_cart_content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

/* Il markup interno arriva da woocommerce_mini_cart(): normalizziamo i
   margini/allineamenti del template standard perché stia bene nel pannello.
   Anche qui l'id #env-cart-drawer alza la specificità sopra a "ul.cart_list"
   di WooCommerce. */
#env-cart-drawer .woocommerce-mini-cart {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 6px 22px;
  list-style: none;
}

#env-cart-drawer .woocommerce-mini-cart::-webkit-scrollbar {
  width: 8px;
}

#env-cart-drawer .woocommerce-mini-cart::-webkit-scrollbar-thumb {
  background: rgba(17, 24, 39, 0.16);
  border-radius: 999px;
}

/* Riga prodotto del mini-carrello. Le regole sono ancorate a #env-cart-drawer
   (l'id del pannello) di proposito: alza la specificità sopra a quella di
   WooCommerce ("​.woocommerce ul.cart_list li …", che altrimenti rimetterebbe
   padding 0 e float all'immagine, spezzando il layout). La quantità ora sta
   DENTRO il link (vedi env_gjs_cart_reflow_mini_cart in cart-icon.php):
   miniatura assoluta a sinistra, titolo e quantità impilati a destra. */
#env-cart-drawer .woocommerce-mini-cart-item {
  position: relative;
  box-sizing: border-box;
  min-height: 92px;
  padding: 16px 34px 16px 74px;
  border-bottom: 1px solid var(--env-cart-line);
}

#env-cart-drawer .woocommerce-mini-cart-item:last-child {
  border-bottom: 0;
}

/* Il link col prodotto contiene miniatura + nome + quantità: la miniatura è
   tolta dal flusso (assoluta), titolo e quantità restano in blocco. */
#env-cart-drawer .woocommerce-mini-cart-item > a:not(.remove) {
  display: block;
  color: var(--env-cart-ink);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.35;
}

#env-cart-drawer .woocommerce-mini-cart-item > a:not(.remove):hover {
  color: var(--env-cart-accent);
}

#env-cart-drawer .woocommerce-mini-cart-item img {
  position: absolute;
  left: 0;
  top: 16px;
  float: none; /* annulla il float:right del CSS di WooCommerce */
  width: 60px;
  height: 60px;
  margin: 0;
  object-fit: cover;
  border-radius: var(--env-cart-radius);
  border: 1px solid var(--env-cart-line);
  background: var(--env-cart-soft);
}

/* Quantità e prezzo unitario: subito sotto al titolo. */
#env-cart-drawer .woocommerce-mini-cart-item .quantity {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  color: var(--env-cart-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

#env-cart-drawer .woocommerce-mini-cart-item .variation {
  margin: 6px 0 0;
  color: var(--env-cart-muted);
  font-size: 0.82rem;
}

/* "×" per rimuovere: pallino discreto in alto a destra, si accende all'hover. */
#env-cart-drawer .woocommerce-mini-cart-item a.remove {
  position: absolute;
  top: 14px;
  right: 0;
  left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 50%;
  background: var(--env-cart-soft);
  color: var(--env-cart-muted) !important;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

#env-cart-drawer .woocommerce-mini-cart-item a.remove:hover {
  background: var(--env-cart-accent);
  color: var(--env-cart-accent-ink) !important;
}

/* --- Totale: fascia ancorata sopra ai pulsanti --- */
.env-cart-drawer-body .woocommerce-mini-cart__total {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 18px 22px 14px;
  border-top: 1px solid var(--env-cart-line);
  font-size: 0.95rem;
  font-weight: 600;
}

.env-cart-drawer-body .woocommerce-mini-cart__total strong {
  font-weight: 600;
  color: var(--env-cart-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.env-cart-drawer-body .woocommerce-mini-cart__total .amount,
.env-cart-drawer-body .woocommerce-mini-cart__total .woocommerce-Price-amount {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--env-cart-ink);
}

/* --- Pulsanti: primario (checkout) pieno, secondario (carrello) contornato --- */
.env-cart-drawer-body .woocommerce-mini-cart__buttons {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 4px 22px 22px;
}

.env-cart-drawer-body .woocommerce-mini-cart__buttons .button {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border-radius: var(--env-cart-radius);
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.18s ease, box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.env-cart-drawer-body .woocommerce-mini-cart__buttons .button:active {
  transform: translateY(1px);
}

/* "Visualizza carrello": secondario contornato. */
.env-cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: transparent;
  color: var(--env-cart-ink);
  border: 1.5px solid var(--env-cart-line);
}

.env-cart-drawer-body .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  border-color: var(--env-cart-accent);
  color: var(--env-cart-accent);
}

/* "Cassa": primario pieno, in evidenza. */
.env-cart-drawer-body .woocommerce-mini-cart__buttons .checkout {
  background: var(--env-cart-accent);
  color: var(--env-cart-accent-ink);
  border: 1.5px solid var(--env-cart-accent);
  box-shadow: 0 10px 22px -12px var(--env-cart-accent);
}

.env-cart-drawer-body .woocommerce-mini-cart__buttons .checkout:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 26px -12px var(--env-cart-accent);
}

/* --- Stato vuoto: messaggio centrato --- */
.env-cart-drawer-body p.woocommerce-mini-cart__empty-message {
  margin: auto;
  padding: 40px 24px;
  color: var(--env-cart-muted);
  font-weight: 600;
  text-align: center;
}

/* Blocca lo scorrimento della pagina dietro al pannello aperto. */
body.env-cart-drawer-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .env-cart-drawer-backdrop,
  .env-cart-drawer-panel,
  .env-cart-drawer-close {
    transition: none;
  }

  .env-cart-drawer-close:hover {
    transform: none;
  }
}