/* =============================================================
   style.css – Cru Caviar
   Mobile first. Bootstrap: solo grid e componenti.
   Swiper: announcement bar + hero carousel + gift slider.
   Classi semantiche custom per tutto lo stile visivo.
   ============================================================= */

/* -------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------- */
:root {
  --color-black:      #0f0f0f;
  --color-white:      #ffffff;
  --color-off-white:  #f8f6f2;
  --color-accent:     #E60422;
  --color-accent-light: #fce8eb;
  --color-text:       #1a1a1a;
  --color-muted:      #6b6b6b;
  --color-border:     #e0ddd8;
  --color-gold:       #b8953f;
  --color-gold-light: #f5eedf;

  --font-heading:     'Playfair Display', Georgia, serif;
  --font-body:        'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-size-base:   1rem;
  --line-height-base: 1.65;

  /* Title scale – mobile-first, override nei breakpoint */
  --fs-display:   2.8rem;   /* page-hero */
  --fs-title-lg:  2.6rem;   /* titoli di sezione standard */
  --fs-title-md:  2.4rem;   /* titoli moduli text-block */

  /*
   * SPACING SYSTEM
   * --space-section  → padding verticale di ogni <section>
   * --space-content  → padding interno ai blocchi contenuto
   *                    (banner, editorial body, newsletter, ecc.)
   * Entrambi scalano nei breakpoint: un solo posto da toccare.
   */
  --space-section:    3rem;     /* mobile  → ~48px */
  --space-section-lg: 5rem;     /* desktop → ~80px */
  --space-content:    2rem;     /* mobile  → ~32px */
  --space-content-lg: 3.5rem;   /* desktop → ~56px */

  --transition-fast:  0.2s ease;
  --transition-base:  0.3s ease;

  /* Altezza header – usata per il calc() del carousel */
  --announcement-h:  36px;
  --header-main-h:   80px;
  --header-nav-h:    40px;
  /* Mobile: nav desktop assente → non si somma */
  --header-total-h:  calc(var(--announcement-h) + var(--header-main-h));

  /* Drawer */
  --drawer-width:     300px;

  /* Swiper: hero usa bianco, gift usa rosso */
  --swiper-theme-color: var(--color-white);

  /* WooCommerce: azzera border-radius globalmente */
  --wc-form-border-radius: 0px;
}

/* -------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

::selection         { background: var(--color-accent); color: var(--color-white); }
::-moz-selection    { background: var(--color-accent); color: var(--color-white); }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.75rem;
}

/* -------------------------------------------------------------
   3. BOTTONI
   ------------------------------------------------------------- */
.btn-cta {
  display: inline-block;
  padding: 0.4rem 2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-black);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.btn-cta:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn-cta--outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.btn-cta--outline:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

/* Bottone bianco pieno – usato sul carousel home */
.btn-cta--white {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-black);
}
.btn-cta--white:hover {
  background-color: transparent;
  color: var(--color-white);
}

/* Bottone rosso pieno */
.btn-cta--red {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}
.btn-cta--red:hover {
  background-color: transparent;
  color: var(--color-accent);
}

.link-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 0;
  transition: opacity var(--transition-fast);
}
.link-cta:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* -------------------------------------------------------------
   4. ANNOUNCEMENT BAR
   ------------------------------------------------------------- */
.announcement-bar {
  background-color: var(--color-accent);
  --ann-text-color: #ffffff;
  height: var(--announcement-h);
  position: relative;
  overflow: hidden;
  z-index: 300;
}

.announcement__swiper {
  height: 100%;
}

.announcement__slide {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.72rem;
  font-weight: 400;
  text-align: center;
  padding: 0 3rem;   /* spazio per le frecce */
  color: var(--ann-text-color);
  line-height: 1.3;
}
.announcement__slide strong { font-weight: 700; }

/* Frecce announcement */
.announcement__prev,
.announcement__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  color: var(--ann-text-color);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 0.6rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.announcement__prev:hover,
.announcement__next:hover { opacity: 0.7; }
.announcement__prev { left: 0; }
.announcement__next { right: 0; }

/* -------------------------------------------------------------
   5. SITE HEADER – struttura sticky
   ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--color-white);
  transition: box-shadow var(--transition-base);
}
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.09); }

/* -------------------------------------------------------------
   5a. HEADER MAIN – riga 1
   ------------------------------------------------------------- */
.header-main {
}

.header-main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-main-h);
  gap: 1rem;
  transition: height 0.3s ease;
}

/* — Left — */
.header-main__left {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex: 1;
}

/* Language switcher */
.lang-switcher { margin-right: 1rem; }
.lang-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  padding: 0.2rem 0.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.lang-switcher__btn:hover { color: var(--color-accent); }
.lang-switcher__btn.dropdown-toggle::after {
  /* Override Bootstrap caret — piccolo e allineato */
  border-top-color: currentColor;
  border-top-width: 0.28em;
  border-right-width: 0.28em;
  border-left-width: 0.28em;
  vertical-align: 0.1em;
}
/* Globe e tutte le .caviar-icon nel left hanno la stessa dimensione fissa */
.lang-switcher__globe,
.header-main__left .caviar-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.lang-switcher__menu {
  min-width: 80px;
  border-radius: 0;
  border-color: var(--color-border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 0.25rem 0;
}
.lang-switcher__item {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.9rem;
  color: var(--color-text);
  transition: color var(--transition-fast);
}
.lang-switcher__item:hover { color: var(--color-accent); background: none; }
.lang-switcher__item.is-active {
  color: var(--color-accent);
  font-weight: 700;
  background: none;
}

/* Icone SVG inline — dimensioni via CSS, mai via attributi width/height */
.caviar-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Icone header (mail, social, search, account, cart) */
.header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition-fast);
  text-decoration: none;
}
/* Separazione busta dal social */
.header-icon--mail { margin-right: 0.75rem; }
.header-icon:hover { color: var(--color-accent); }

/* Mail + social: nascosti su mobile, visibili da lg */
.header-icon--lg-only { display: none; }

/* — Center: Logo — */
.header-main__logo {
  display: block;
  flex-shrink: 0;
}
.header-main .header-main__logo-img {
  display: block;
  height: 56px;
  width: auto;
  transition: height 0.3s ease;
}

/* — Right — */
.header-main__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex: 1;
}
/* Icone destra: leggermente più grandi del left */
.header-main__right .caviar-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* Search – visibile da lg, hidden su mobile */
.header-search {
  display: none;
  align-items: center;
  gap: 0.35rem;
}
.header-search__form {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.header-search__input {
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-text);
  outline: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text);
  width: 140px;
  padding: 0.1rem 0 2px;
}
.header-search__input::placeholder { color: var(--color-muted); }
.header-search__btn {
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  cursor: pointer;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
.header-search__btn:hover { color: var(--color-accent); }

/* Search mobile: si espande verso il basso */
.header-search--mobile-open {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0.7rem 1rem;
  z-index: 10;
}
.header-search--mobile-open .header-search__form {
  flex: 1;
}
.header-search--mobile-open .header-search__input {
  width: 100%;
  flex: 1;
  font-size: 0.9rem;
}

/* Cart badge */
.header-cart { position: relative; }
.header-cart__count {
  position: absolute;
  bottom: -6px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  font-size: 0.58rem;
  font-weight: 700;
  background-color: var(--color-accent);
  color: var(--color-white);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Hamburger – posizionato nel left su mobile */
.header-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: none;
  padding: 0.25rem;
  width: 26px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.header-hamburger__line {
  display: block;
  height: 1.5px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}
/* Stato aperto: trasforma in X */
.header-hamburger.is-active .header-hamburger__line:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.header-hamburger.is-active .header-hamburger__line:nth-child(2) {
  opacity: 0;
}
.header-hamburger.is-active .header-hamburger__line:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* -------------------------------------------------------------
   5b. HEADER NAV – riga 2  (desktop only)
   ------------------------------------------------------------- */
.header-nav {
  display: none;   /* nascosta su mobile */
  border-top: none;
}

.header-nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: var(--header-nav-h);
  gap: 0;
  margin: 0;
  padding: 0;
}

.header-nav__link {
  display: block;
  padding: 0 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-text);
  height: var(--header-nav-h);
  line-height: var(--header-nav-h);
  white-space: nowrap;
  transition: color var(--transition-fast);
  position: relative;
}
.header-nav__link::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 1rem;
  right: 1rem;
  height: 1px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-fast);
}
.header-nav__link:hover { color: var(--color-accent); }
.header-nav__link:hover::after,
.header-nav__link.is-current::after { transform: scaleX(1); }

.header-nav__link--accent { color: var(--color-accent); }
.header-nav__link--accent:hover { color: var(--color-accent); opacity: 0.75; }
.header-nav__link--accent::after { background-color: var(--color-accent); }

/* Dropdown secondo livello – desktop
   Il <ul class="sub-menu"> è posizionato via JS (width + left calcolati
   rispetto a .header-nav) e mostrato/nascosto tramite mouseenter/mouseleave.
   ---------------------------------------------------------------- */
/* Sub-menu: position fixed → nessun problema di containing block,
   funziona sia in main nav sia in slim nav (is-scrolled).
   top impostato da JS (itemRect.bottom). */
.header-nav .sub-menu,
.header-slim__nav .sub-menu {
  display: none;
  position: fixed;
  top: 0;             /* sovrascritto da JS */
  left: 0;
  width: 100vw;
  z-index: 300;
  background: #fff;
  margin: 0;
  padding: 1.5rem 0;
  list-style: none;
  text-align: center;
}

.header-nav__sublink {
  display: inline-block;
  padding: 0.2rem 1.25rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-text);
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.header-nav__sublink:hover { color: var(--color-accent); }

/* Drawer mobile: dropdown accordion */
.drawer__nav-list > li { position: relative; }

.drawer__nav .sub-menu {
  display: none;
  margin: 0;
  padding: 0.25rem 0 0.5rem;
  list-style: none;
}
.drawer__nav li.is-open > .sub-menu { display: block; }
.drawer__nav .sub-menu .drawer__nav-link { padding-top: 0.5rem; padding-bottom: 0.5rem; text-transform: none; font-weight: 500; }

.drawer__nav-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 3.2rem;
  width: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast);
}
.drawer__nav-toggle svg {
  transition: transform 0.25s ease;
}
.drawer__nav li.is-open > .drawer__nav-toggle svg { transform: rotate(180deg); }
.drawer__nav-toggle:hover { color: var(--color-accent); }

/* link padre con children: spazio per il toggle button */
.drawer__nav-link--has-toggle { padding-right: 3.5rem; }

.drawer__nav-sublink {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  transition: color var(--transition-fast);
}
.drawer__nav-sublink:hover { color: var(--color-accent); }

/* -------------------------------------------------------------
   5c. SLIM NAV – duplicato inline, visibile solo su is-scrolled
   ------------------------------------------------------------- */
.header-slim__nav {
  display: none;       /* nascosto di default */
  align-items: center;
  flex: 1;
  overflow: hidden;
  margin-left: 1.5rem;
}

.header-slim__nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* I link slim riusano .header-nav__link ma con altezza dinamica */
.header-slim__nav .header-nav__link {
  height: var(--header-slim-h, 56px);
  line-height: var(--header-slim-h, 56px);
}

/* -------------------------------------------------------------
   6. MOBILE DRAWER
   ------------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;   /* inattivo finché chiuso */
}
.drawer.is-open { pointer-events: auto; }

/* Overlay */
.drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background-color 0.35s ease;
  cursor: pointer;
}
.drawer.is-open .drawer__overlay {
  background: rgba(0,0,0,0.45);
}

/* Panel */
.drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--drawer-width);
  max-width: 85vw;
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer.is-open .drawer__panel {
  transform: translateX(0);
}

/* Header drawer */
.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.drawer__logo-link { display: block; }

.drawer__close {
  background: none;
  border: none;
  padding: 0.25rem;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color var(--transition-fast);
}
.drawer__close:hover { color: var(--color-accent); }

/* Nav drawer */
.drawer__nav {
  flex: 1;
  padding: 0.5rem 0;
}
.drawer__nav-list { margin: 0; padding: 0; }
.drawer__nav-list > li { border-bottom: 1px solid var(--color-border); }

.drawer__nav-link {
  display: block;
  padding: 0.85rem 1.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.drawer__nav-link:hover {
  color: var(--color-accent);
}
.drawer__nav-link--accent { color: var(--color-accent); }

/* Footer drawer: lingua + social */
.drawer__footer {
  padding: 1.25rem 1.5rem;
  flex-shrink: 0;
}

.drawer__label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.6rem;
}

.drawer__lang { display: none; } /* hidden — EN translation not ready */

.drawer__lang-links {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.drawer__lang-item {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-border);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.drawer__lang-item:hover,
.drawer__lang-item.is-active {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.drawer__social {
  display: flex;
  gap: 1rem;
}
.drawer__social-link {
  color: var(--color-muted);
  transition: color var(--transition-fast);
  display: inline-flex;
}
.drawer__social-link:hover { color: var(--color-black); }

/* body: blocca scroll quando drawer è aperto */
body.drawer-open { overflow: hidden; }

/* -------------------------------------------------------------
   6. HOME CAROUSEL – Swiper fullscreen
   Separato da .hero (usato nelle pagine interne, più semplice)
   ------------------------------------------------------------- */
.home-carousel {
  background-color: var(--color-black);
}

.home-carousel__swiper {
  /* 90dvh - announcement bar - header main (senza nav, assente su mobile) */
  height: calc(90vh - var(--header-total-h));
  height: calc(90dvh - var(--header-total-h)); /* sovrascrive se supportato */
  min-height: 380px;
}

/* Ogni .swiper-slide ha anche .home-carousel__slide */
.home-carousel__slide {
  position: relative;
  overflow: hidden;
}

/* Immagine di sfondo con leggero Ken Burns al cambio slide */
.home-carousel__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.75;
  transition: transform 6s ease;
  transform: scale(1.04);
}
.swiper-slide-active .home-carousel__bg { transform: scale(1); }

/*
  Contenuto allineato al BOTTOM.
  padding-bottom: tiene lo spazio per i dot Swiper
  (pagination bottom: 1.5rem + dot ~8px + gap = ~3rem totali)
*/
.home-carousel__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;       /* testo al fondo */
  height: 100%;
  padding: 2rem 1.5rem 4.5rem;     /* bottom: sopra i dot */
  text-align: center;
  color: var(--color-white);
}


.home-carousel__title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 800;                /* Playfair Display ExtraBold */
  color: var(--color-white);
  margin-bottom: 0.75rem;
  line-height: 1.15;
}

.home-carousel__text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;                /* Work Sans Medium */
  line-height: 1.65;
  max-width: 420px;
  margin: 0 auto 1.75rem;
  color: rgba(255,255,255,0.92);
}

/* --- Swiper navigation – home carousel --- */
.home-carousel__btn-prev,
.home-carousel__btn-next {
  --swiper-navigation-size: 16px;
  --swiper-navigation-color: var(--color-black);
  background: transparent;
  border: none;
  width: 44px !important;
  height: 44px !important;
  border-radius: 0;
  top: 50% !important;
  transition: background-color var(--transition-fast);
}
.home-carousel__btn-prev:hover,
.home-carousel__btn-next:hover { background-color: var(--color-white); }
.home-carousel__btn-prev::after,
.home-carousel__btn-next::after { font-size: 14px !important; font-weight: 700; }
.home-carousel__btn-prev .swiper-navigation-icon,
.home-carousel__btn-next .swiper-navigation-icon { height: 60%; }

/* -------------------------------------------------------------
   7. PRODUCT CARD  (griglia + gift slider)
   ------------------------------------------------------------- */
.product-card {
  display: flex;
  flex-direction: column;
}

/* Gallery slider wrapper */
.product-card__gallery {
  position: relative;
}

/* Forza width 100% sulle slide: evita il calcolo errato di Swiper (es. 1.67e+07px) */
.product-card__gallery .swiper-slide {
  width: 100% !important;
}

.product-card__img-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--color-off-white);
}
.product-card__img-wrap .product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.product-card__img-wrap:hover .product-card__img { transform: scale(1.05); }

/* Gallery prev/next arrows */
.product-card__btn-prev,
.product-card__btn-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.product-card__btn-prev:hover,
.product-card__btn-next:hover { background-color: var(--color-white); }
.product-card__btn-prev { left: 0; }
.product-card__btn-next { right: 0; }
.product-card__btn-prev svg,
.product-card__btn-next svg { width: 7px; height: auto; color: var(--color-text); }
.product-card__btn-prev svg { transform: rotate(180deg); }

.product-card__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.2rem;
}

.product-card__body { padding: 1rem 0 0; }

.product-card__name {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.product-card__name a:hover { color: var(--color-accent); }

.product-card__sub {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.product-card__price {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  margin: 0;
}
.product-card__price--old {
  font-size: 0.82rem;
  color: var(--color-muted);
  text-decoration: line-through;
  margin-right: 0.4rem;
  font-weight: 400;
}
.product-card__price--sale {
  color: var(--color-accent);
  font-weight: 700;
}

/* -------------------------------------------------------------
   8. SEZIONE PRODOTTI CONSIGLIATI
   ------------------------------------------------------------- */
.section-products {
  padding: var(--space-section) 0;
}

.section-products__title {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

/* -------------------------------------------------------------
   9. BANNER EXPERIENCE
   ------------------------------------------------------------- */
.banner-experience {
  position: relative;
  min-height: max(50vw, 400px);
  overflow: hidden;
  padding: clamp(80px, 12vw, 200px) 0;
  /* NO align-items: il contenuto parte dall'alto */
}

.banner-experience__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.banner-experience .container { position: relative; z-index: 1; }

.banner-experience__content {
  text-align: center;
}

.banner-experience__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title-lg);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: 1rem;
}

.banner-experience__text {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 1.5rem;
}

/* -------------------------------------------------------------
   10. SEZIONE EDITORIALE  (Degustare / Ricette)
   ------------------------------------------------------------- */
.section-editorial { padding: var(--space-section) 0; }

/* Se seguito immediatamente da un altro .section-editorial, togli il padding-bottom */
.section-editorial:has(+ .section-editorial) { padding-bottom: 0; }

.section-editorial__img-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.section-editorial__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-editorial__body {
}

.section-editorial__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title-md);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

/* Modificatore: titolo nero (es. sezione Ricette) */
.section-editorial__title--dark {
  color: var(--color-text);
}

.section-editorial__text {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* -------------------------------------------------------------
   11. SEZIONE REGALO – Swiper gift
   ------------------------------------------------------------- */
.section-gift {
  padding: var(--space-section) 0;
  overflow: hidden; /* contiene lo swiper edge-to-edge senza rompere la pagina */
}

.section-gift__header {
  margin-bottom: 1.7rem;
  text-align: center;
}

.section-gift__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title-lg);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.section-gift__text {
  font-size: 1rem;
  color: var(--color-text);
}

.section-recipes__header {
  margin-bottom: 1.7rem;
  text-align: center;
}
.section-recipes__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title-lg);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: 0.5rem;
}
.section-recipes__subtitle {
  font-size: 1rem;
  color: var(--color-text);
}

/* Swiper gift: overflow visible → le card escono dal container (edge-to-edge) */
.gift__swiper {
  overflow: visible;
  padding-bottom: 1rem;
}

/* --- Swiper navigation – gift slider --- */
.gift__btn-prev,
.gift__btn-next {
  --swiper-navigation-size: 16px;
  --swiper-navigation-color: var(--color-black);
  background: transparent;
  border: none;
  width: 36px !important;
  height: 36px !important;
  border-radius: 0;
  top: 38% !important;
  transition: background-color var(--transition-fast);
}
.gift__btn-prev:hover,
.gift__btn-next:hover { background-color: var(--color-white); }

.gift__btn-prev { left: -2px; }
.gift__btn-next { right: -2px; }

.gift__btn-prev::after,
.gift__btn-next::after { font-size: 14px !important; font-weight: 700; }
.gift__btn-prev .swiper-navigation-icon,
.gift__btn-next .swiper-navigation-icon { height: 60%; }

/* -------------------------------------------------------------
   12. SEZIONE NEWS
   ------------------------------------------------------------- */
.section-news { padding: var(--space-section) 0; }

.section-news__header {
  margin-bottom: 1.7rem;
  text-align: center;
}

.section-news__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title-lg);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.4rem;
}

.section-news__intro {
  font-size: 1rem;
  color: var(--color-text);
  text-align: center;
}

/* .cru-card è il blocco base. Aggiungere .news-card o .recipe-card
   sull'<article> come hook semantico per override specifici. */
.cru-card__img-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--color-off-white);
}
.cru-card__img-wrap .cru-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.cru-card__img-wrap:hover .cru-card__img { transform: scale(1.05); }

.cru-card__body { padding: 0.75rem 0 0; }

.cru-card__title {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-text);
}
.cru-card__title a { color: var(--color-text); }
.cru-card__title a:hover { color: var(--color-accent); }

.cru-card__excerpt {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 0.5rem;
}

.cru-card__price {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.1;
}

.cru-card__label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: 0.35rem;
}

.cru-card__meta {
  font-size: 0.75rem;
  color: var(--color-muted);
  margin: 0;
}

.section-recipes {
  padding: var(--space-section) 0;
}
.page-hero + .section-news,
.page-hero + .section-recipes { padding-top: var(--space-content); }

/* ── Override per tipo:
.recipe-card .cru-card__img-wrap { aspect-ratio: 4 / 3; }
.news-card   .cru-card__title    { text-decoration: none; } */

/* -------------------------------------------------------------
   13. NEWSLETTER
   ------------------------------------------------------------- */
.section-newsletter {
  padding: var(--space-section) 0;
  /* nessun background */
}

.newsletter { text-align: center; }

.newsletter__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.newsletter__text {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 1.75rem;
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 420px;
  margin: 0 auto;
}

/* Wrapper input + freccia */
.newsletter__field {
  position: relative;
  width: 100%;
}

.newsletter__input {
  width: 100%;
  padding: 0.85rem 3rem 0.85rem 1rem; /* spazio a dx per la freccia */
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--color-text);
  border: 1px solid var(--color-text);
  background-color: transparent;
  outline: none;
  transition: border-color var(--transition-fast);
}
.newsletter__input::placeholder { color: var(--color-muted); }
.newsletter__input:focus { border-color: var(--color-black); }

/* Freccia → dentro il campo, a destra */
.newsletter__submit {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 3rem;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}
.newsletter__submit:hover { color: var(--color-accent); }

/* Privacy checkbox */
.newsletter__privacy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.newsletter__checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-text);
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.newsletter__checkbox:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: var(--color-text);
}

.newsletter__privacy-label {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text);
  cursor: pointer;
}

.newsletter__privacy-link {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.newsletter__privacy-link:hover { color: var(--color-accent); }

.newsletter__message {
  margin: 0.75rem auto 0;
  max-width: 30rem;
  font-size: 0.85rem;
}
.newsletter__message.is-success { color: #1a7f37; }
.newsletter__message.is-error   { color: var(--color-accent); }

/* -------------------------------------------------------------
   14. FOOTER MAIN
   ------------------------------------------------------------- */
.footer-main {
  background-color: #EEEEF0;
  padding: 3rem 0 2rem;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

/* Link list */
.footer__links { margin: 0; padding: 0; }
.footer__links li { margin-bottom: 0.35rem; line-height: 1.2; }
.footer__links a {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text);
  transition: color var(--transition-fast);
}
.footer__links a:hover { color: var(--color-accent); }

/* Assistenza / Spedizioni: gruppi icona + testo */
.footer__service-group {
  margin-bottom: 1.25rem;
}
.footer__service-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.footer__service-icon {
  flex-shrink: 0;
  width: 2rem;
  margin-top: 0.1rem;
}
.footer__service-icon-img {
  width: 100%;
  height: auto;
  display: block;
}
.footer__service-text {
  font-size: 0.8rem;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0;
}

/* Certificazioni */
.footer__certs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.footer__cert-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid var(--color-border);
  padding: 0.25rem 0.6rem;
  color: var(--color-text);
  background-color: var(--color-white);
}

/* Indirizzo */
.footer__address {
  font-size: 0.8rem;
  font-style: normal;
  color: var(--color-text);
  line-height: 1.7;
}
.footer__address a {
  color: var(--color-text);
  transition: color var(--transition-fast);
}
.footer__address a:hover { color: var(--color-accent); }

/* -------------------------------------------------------------
   14b. FOOTER COLOPHON
   ------------------------------------------------------------- */
.footer-colophon {
  padding: 1rem 0;
  text-align: center;
}
.footer-colophon__legal {
  font-size: 0.72rem;
  color: var(--color-text);
  margin: 0 0 0.25rem;
  line-height: 1.6;
}
.footer-colophon__credits {
  font-size: 0.7rem;
  color: var(--color-muted);
  text-transform: uppercase;
  margin: 0;
}
.footer-colophon__credits a {
  color: var(--color-muted);
  text-decoration: underline;
  transition: color var(--transition-fast);
}
.footer-colophon__credits a:hover { color: var(--color-accent); }

/* =============================================================
   MEDIA QUERIES  (mobile first → si aggiunge verso l'alto)
   ============================================================= */

/* ── md: 768px ── */
@media (min-width: 768px) {

  :root {
    --space-section: var(--space-section-lg);
    --space-content: var(--space-content-lg);
    --fs-display:    3.6rem;
    --fs-title-lg:   3.2rem;
    --fs-title-md:   2.8rem;
  }

  /* Annuncio: testo un po' più grande */
  .announcement__slide { font-size: 0.8rem; }

  /* Home carousel: title più grande su tablet + frecce a centro slide */
  .home-carousel__title { font-size: 2.2rem; }
  .home-carousel__text  { font-size: 1rem; max-width: 500px; }
  .home-carousel__btn-prev,
  .home-carousel__btn-next { top: 50% !important; }

  /* Editorial – aspect-ratio fisso 4/3, nessun override di altezza */

  /* Newsletter: form sempre colonna */
}

/* ── lg: 992px ── attivazione nav desktop e search ── */
@media (min-width: 992px) {

  /* Header: mostra nav desktop, search, mail+social */
  .header-nav           { display: block; }
  .header-search        { display: flex; }
  .header-icon--lg-only { display: inline-flex; }

  /* Logo più grande */
  .header-main .header-main__logo-img { height: 66px; }

  /* Aggiorno le variabili: header-main cresce, nav appare */
  :root {
    --header-main-h:  96px;
    --header-total-h: calc(var(--announcement-h) + var(--header-main-h) + var(--header-nav-h));
    --fs-display:    4.0rem;
    --fs-title-lg:   3.6rem;
    --fs-title-md:   3.0rem;
  }

  /* Home carousel: title ancora più grande su desktop */
  .home-carousel__title { font-size: 3rem; }
  .home-carousel__text  { font-size: 1.05rem; max-width: 560px; }

  /* ── SLIM HEADER su scroll ─────────────────────────────────
     Layout: [logo] [nav links · flex:1] [icone destra]
  ────────────────────────────────────────────────────────── */
  .site-header.is-scrolled {
    --header-slim-h: 56px;
  }

  .site-header.is-scrolled .header-main__inner {
    height: var(--header-slim-h);
  }

  /* Logo più piccolo e spostato a sinistra */
  .site-header.is-scrolled .header-main .header-main__logo-img {
    height: 34px;
  }

  /* Nascondi left (lang / mail / social) */
  .site-header.is-scrolled .header-main__left {
    display: none;
  }

  /* Mostra slim nav inline – più spazio rispetto al right */
  .site-header.is-scrolled .header-slim__nav {
    display: flex;
    flex: auto;       /* cresce quanto serve al contenuto */
  }

  /* Voci slim: font e padding ridotti per stare su una riga */
  .site-header.is-scrolled .header-slim__nav .header-nav__link {
    font-size: 0.82rem;
    padding: 0 0.55rem;
  }

  .site-header.is-scrolled .header-slim__nav {
    margin-left: 1rem;
  }

  /* Nascondi riga 2 */
  .site-header.is-scrolled .header-nav {
    display: none;
  }

  /* Search slim: rimane visibile su desktop — il toggle mobile resta per mobile */
}

/* ── xl: 1200px ── */
@media (min-width: 1200px) {
  .home-carousel__title { font-size: 3.4rem; }
  .header-search__input { width: 180px; }
}

/* =============================================================
   16. PAGE HERO  (breadcrumb + titolo + intro pagine interne)
   ============================================================= */
.page-hero {
  position: relative;
  z-index: 1;
  padding: var(--space-content) 0 calc(var(--space-content) * 0.75);
  text-align: center;
}

/* Variante breadcrumb-only: padding ridotto, nessun titolo */
.page-hero--compact {
  padding: 1rem 0;
  border-bottom: none;
}
.page-hero--compact .breadcrumb-list {
  margin-bottom: 0;
}

/* Placeholder sezione prodotto singolo */
.product-single__placeholder {
  padding: var(--space-section) 0;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}

/* Breadcrumb */
.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.breadcrumb-list__item {
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-muted);
}

.breadcrumb-list__item + .breadcrumb-list__item::before {
  content: '|';
  margin-right: 0.5rem;
  color: var(--color-border);
}

.breadcrumb-list__link {
  color: var(--color-muted);
  transition: color var(--transition-fast);
}
.breadcrumb-list__link:hover { color: var(--color-text); }

.breadcrumb-list__item--current { color: var(--color-text); }

/* Titolo pagina */
.page-hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0;
  line-height: 1.1;
}

/* Intro */
.page-hero__intro {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  margin-top: 1em;
  margin-bottom: 0;
}

/* Single ricetta e single news: titolo più contenuto */
.single-ricette .page-hero__title,
.single-post .page-hero__title {
  font-size: var(--fs-title-lg);
}

/* Pagina di ricerca: titolo ridotto */
.search-results .page-hero__title {
  font-size: var(--fs-title-md);
}

/* Area utente: titoli ("Ordine #…", "Ordini", ecc.) come titoli box, non sezione */
.woocommerce-account .page-hero__title {
  font-size: var(--fs-title-md);
}

/* =============================================================
   17. SHOP FILTERS  (barra filtri – placeholder)
   ============================================================= */
.shop-filters {
  padding: 0.85rem 0;
}

.shop-filters__inner {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid currentColor;
}

.shop-filters__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
  margin-right: 0.5rem;
}

.shop-filters__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.shop-filters__btn:hover { color: var(--color-accent); }

/* Select ordina/categoria */
.shop-filters__inner .woocommerce-ordering,
.shop-filters__inner .woocommerce-ordering .orderby {
  margin: 0;
}

.shop-filters__inner .woocommerce-ordering {
  margin-right: 10px;
}

/* Native select: stile base (usato su mobile, picker OS) */
.shop-filters__inner select,
.shop-filters__select {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0.35rem 1.2rem 0.35rem 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Ctext y='8' font-size='10' font-family='sans-serif' fill='%23111'%3E%2B%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 10px;
  cursor: pointer;
  outline: none;
  transition: color var(--transition-fast);
  max-width: 120px;
  text-overflow: ellipsis;
}
.shop-filters__inner select:hover,
.shop-filters__select:hover { color: var(--color-accent); }

/* Desktop: dopo che JS wrappa il select, nasconde il nativo */
.cru-select > select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Custom dropdown */
.cru-select {
  position: relative;
}

.cru-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.35rem 0.75rem 0.35rem 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.cru-select__trigger:hover,
.cru-select.is-open .cru-select__trigger { color: var(--color-accent); }

.cru-select__list {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background: #fff;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  min-width: 200px;
  z-index: 150;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.cru-select.is-open .cru-select__list { display: block; }

.cru-select__item {
  display: block;
  padding: 0.45rem 1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--transition-fast);
  white-space: nowrap;
}
.cru-select__item:hover,
.cru-select__item.is-active { color: var(--color-accent); }

/* =============================================================
   18. SHOP GRID  (sezione griglia archivio)
   ============================================================= */
.shop-grid {
  padding: var(--space-section) 0;
}

/* =============================================================
   19. SHOP PAGINATION
   ============================================================= */
.shop-pagination {
  display: flex;
  justify-content: center;
  padding-top: var(--space-content);
}

.shop-pagination .pagination {
  align-items: center;
  gap: 0.15rem;
  margin: 0;
}

/* Base: numeri senza bordo né sfondo */
.shop-pagination .page-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text);
  background-color: transparent;
  border: none;
  border-radius: 50% !important;
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  box-shadow: none !important;
}

.shop-pagination .page-link:hover {
  background-color: var(--color-off-white);
  color: var(--color-text);
}

/* Pagina attiva: cerchio rosso */
.shop-pagination .page-item.active .page-link {
  background-color: var(--color-accent);
  color: var(--color-white);
  font-weight: 600;
}

/* Frecce: stile più leggero */
.shop-pagination .page-link--arrow {
  color: var(--color-text);
  width: 32px;
  height: 32px;
}

.shop-pagination .page-item.disabled .page-link--arrow {
  color: var(--color-border);
}

/* Ellipsis: non cliccabile */
.shop-pagination .page-link--ellipsis {
  pointer-events: none;
  width: auto;
  padding: 0 0.25rem;
  border-radius: 0 !important;
  color: var(--color-muted);
}
.shop-pagination .page-link svg { display: block; }

/* WP native markup (the_posts_pagination) */
.shop-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.shop-pagination .page-numbers {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text);
  background-color: transparent;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.shop-pagination a.page-numbers:hover {
  background-color: var(--color-off-white);
  color: var(--color-text);
}

.shop-pagination .page-numbers.current {
  background-color: var(--color-accent);
  color: var(--color-white);
  font-weight: 600;
}

.shop-pagination .page-numbers.dots {
  pointer-events: none;
  width: auto;
  min-width: 0;
  border-radius: 0;
  color: var(--color-muted);
}

.shop-pagination .page-numbers.prev,
.shop-pagination .page-numbers.next {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

.shop-pagination .page-numbers svg { display: block; }

/* =============================================================
   20. MODULI PAGINA GENERICA (page.php)
   ============================================================= */

/* ── Hero bassa ──────────────────────────────────────────────── */
.hero-short {
  position: relative;
  min-height: clamp(260px, 35vw, 480px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-short__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.hero-short__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-content) 1rem;
  color: var(--color-white);
}

.hero-short__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title-lg);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 0.4rem;
  line-height: 1.1;
}

.hero-short__subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

/* ── Testo centrato ──────────────────────────────────────────── */
.text-block {
  padding: var(--space-section) 0;
}

.text-block__label,
.page-hero__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

.text-block__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title-md);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 1rem;
  line-height: 1.15;
}

.text-block__title--dark {
  color: var(--color-text);
}

.text-block__text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
}
.text-block__text ul,
.text-block__text ol {
  padding-left: 1.2em;
}
.text-block__text ul { list-style-type: disc; }
.text-block__text ol { list-style-type: decimal; }

/* ── Immagine fluida centrata ────────────────────────────────── */
.image-fluid {
  padding-bottom: var(--space-section);
}

.image-fluid:has(+ .text-block) {
  padding-bottom: 0;
}

.image-fluid__figure {
  margin: 0;
}

.image-fluid__img {
  display: block;
  width: 100%;
  height: auto;
}

.image-fluid__caption {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-muted);
  text-align: center;
  margin-top: 0.5rem;
}

/* ── Editorial video (YouTube iframe) ───────────────────────── */
.section-editorial__video-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-black);
}

.section-editorial__video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =============================================================
   21. ACCORDION BLOCK
   ============================================================= */
.acc-block {
  padding: var(--space-section) 0;
}

.acc-block__intro {
  margin-top: 1.25rem;
  margin-bottom: 2rem;
}

.acc-block__accordion {
  margin-top: 2rem;
  text-align: left;
}

.acc-block__item {
  background: none;
}

.acc-block__btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text);
  background: none;
  box-shadow: none !important;
}
.acc-block__btn:not(.collapsed) {
  background-color: var(--color-accent);
  color: var(--color-white);
}
.accordion-button:not(.collapsed) {
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.acc-block__body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.7;
}
.acc-block__body p:last-child { margin-bottom: 0; }

/* =============================================================
   22. CTA CARDS (lanci con prezzo)
   ============================================================= */
.section-cta {
  padding: var(--space-section) 0;
}

.section-cta__header {
  margin-bottom: 1.7rem;
  text-align: center;
}

.section-cta__title {
  font-family: var(--font-heading);
  font-size: var(--fs-title-md);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}
.section-cta__title--accent { color: var(--color-accent); }

.section-cta__intro {
  font-size: 1rem;
  color: var(--color-text);
  text-align: center;
}

/* Card */
.cta-card__img-wrap {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--color-off-white);
}
.cta-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.cta-card__img-wrap:hover .cta-card__img { transform: scale(1.05); }

.cta-card__body { padding: 0.75rem 0 0; }

.cta-card__title {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-text);
}
.cta-card__title a { color: var(--color-text); }
.cta-card__title a:hover { color: var(--color-accent); }

.cta-card__excerpt {
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.65;
  margin: 0 0 0.75rem;
}

/* Prezzo: serif pesante, grande */
.cta-card__price {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.1;
}

/* =============================================================
   23. ICON COLUMNS
   ============================================================= */
.icon-columns {
  padding: var(--space-section) 0;
}

.icon-columns__row {
  margin-top: 0;
}

.icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.icon-col__icon {
  margin-bottom: 1.5rem;
  color: var(--color-text);
  line-height: 1;
}

.icon-col__icon svg {
  display: block;
}

.icon-col__title {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.icon-col__text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
}


/* =============================================================
   24. PHOTO GRID
   ============================================================= */
.photo-grid {
  padding: var(--space-section) 0;
  overflow: hidden;
}

/* Left column: stretch to full height of the row */
.photo-grid__col-main {
  min-height: 0; /* allow flex shrink */
}

/* Generic image wrapper */
.photo-grid__img-wrap {
  display: block;
  overflow: hidden;
  width: 100%;
}

/* Left: fill entire column height */
.photo-grid__img-wrap--fill {
  flex: 1 1 auto;
  height: 100%;
}

/* Right top: 1:1 square */
.photo-grid__img-wrap--square {
  aspect-ratio: 1 / 1;
}

/* Right bottom: 2:1 wide */
.photo-grid__img-wrap--wide {
  aspect-ratio: 2 / 1;
}

.photo-grid__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-grid__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-border, #e8e4df);
}

/* =============================================================
   25. FORM BLOCK
   ============================================================= */
.form-block {
  padding: var(--space-section) 0;
}

/* Gravity Forms — variabili tema Cru Caviar
   !important su custom properties batte l'inline style di GF */
.gform-theme {

  /* Palette primaria (accento rosso) */
  --gf-color-primary:                         var(--color-accent) !important;
  --gf-color-primary-rgb:                     230, 4, 34 !important;
  --gf-color-primary-contrast:                var(--color-white) !important;
  --gf-color-primary-contrast-rgb:            255, 255, 255 !important;
  --gf-color-primary-darker:                  #b8001b !important;
  --gf-color-primary-lighter:                 #ff4d66 !important;

  /* Palette secondaria (bianco/sfondo) */
  --gf-color-secondary:                       var(--color-white) !important;
  --gf-color-secondary-rgb:                   255, 255, 255 !important;
  --gf-color-secondary-contrast:              var(--color-text) !important;
  --gf-color-secondary-contrast-rgb:          17, 17, 17 !important;
  --gf-color-secondary-darker:                var(--color-off-white) !important;
  --gf-color-secondary-lighter:               var(--color-white) !important;

  /* Bordi controlli */
  --gf-color-out-ctrl-light:                  rgba(17, 17, 17, 0.12) !important;
  --gf-color-out-ctrl-light-rgb:              17, 17, 17 !important;
  --gf-color-out-ctrl-light-darker:           var(--color-border) !important;
  --gf-color-out-ctrl-light-lighter:          var(--color-off-white) !important;
  --gf-color-out-ctrl-dark:                   var(--color-muted) !important;
  --gf-color-out-ctrl-dark-rgb:               85, 85, 85 !important;
  --gf-color-out-ctrl-dark-darker:            var(--color-text) !important;
  --gf-color-out-ctrl-dark-lighter:           rgba(17, 17, 17, 0.55) !important;

  /* Raggio — tutto a 0 */
  --gf-global-radius:                         0 !important;
  --gf-ctrl-radius:                           0 !important;
  --gf-ctrl-radius-sm:                        0 !important;
  --gf-ctrl-radius-lg:                        0 !important;
  --gf-btn-radius:                            0 !important;
  --gf-radio-size:                            1rem !important;
  --gf-checkbox-radius:                       0 !important;

  /* Ombre — nessuna */
  --gf-ctrl-shadow:                           none !important;
  --gf-ctrl-shadow-focus:                     none !important;
  --gf-ctrl-error-shadow:                     none !important;
  --gf-alert-shadow:                          none !important;

  /* Controlli: dimensioni e colori */
  --gf-ctrl-border-color:                     var(--color-border) !important;
  --gf-ctrl-border-size:                      1px !important;
  --gf-ctrl-border-style:                     solid !important;
  --gf-ctrl-bg:                               var(--color-white) !important;
  --gf-ctrl-bg-disabled:                      var(--color-off-white) !important;
  --gf-ctrl-color:                            var(--color-text) !important;
  --gf-ctrl-color-placeholder:               var(--color-muted) !important;
  --gf-ctrl-color-disabled:                   var(--color-muted) !important;
  --gf-ctrl-padding-x:                        0.75rem !important;
  --gf-ctrl-padding-y:                        0.6rem !important;

  /* Tipografia campi */
  --gf-font-size-base:                        0.85rem !important;
  --gf-font-size-sm:                          0.78rem !important;
  --gf-font-size-xs:                          0.72rem !important;
  --gf-font-family:                           var(--font-body) !important;
  --gf-font-weight:                           400 !important;
  --gf-color-text:                            var(--color-text) !important;
  --gf-color-text-secondary:                  var(--color-muted) !important;

  /* Label */
  --gf-label-font-size:                       0.78rem !important;
  --gf-label-font-weight:                     600 !important;
  --gf-label-color:                           var(--color-text) !important;
  --gf-sub-label-color:                       var(--color-muted) !important;
  --gf-description-color:                     var(--color-muted) !important;
  --gf-description-font-size:                 0.75rem !important;

  /* Bottone submit — testo e bg */
  --gf-btn-font-size:                         0.7rem !important;
  --gf-btn-font-weight:                       600 !important;
  --gf-btn-font-family:                       var(--font-body) !important;
  --gf-btn-padding-x:                         2rem !important;
  --gf-btn-padding-y:                         0.85rem !important;
  --gf-btn-bg:                                var(--color-black) !important;
  --gf-btn-color:                             var(--color-white) !important;
  --gf-btn-border-color:                      var(--color-black) !important;
  --gf-btn-bg-hover:                          transparent !important;
  --gf-btn-color-hover:                       var(--color-black) !important;
  --gf-btn-border-color-hover:                var(--color-black) !important;

  /* Errore/validazione */
  --gf-color-error:                           var(--color-accent) !important;
  --gf-ctrl-error-border-color:               var(--color-accent) !important;
  --gf-validation-msg-color:                  var(--color-accent) !important;

  /* Spaziatura sezione */
  --gf-field-gap:                             1.25rem !important;
}

.form-block .gform_wrapper {
  margin-top: 2rem;
}

/* GF — reset stile al nostro tema */
.gform-theme input,
.gform-theme select,
.gform-theme textarea {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.gform-theme .gform_footer input[type="submit"],
.gform-theme .gform_page_footer input[type="submit"],
.gform-theme input[type="submit"].gform_button,
.gform-theme button.gform_button {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 2rem !important;
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}

.gform-theme .gform_footer input[type="submit"]:hover,
.gform-theme .gform_page_footer input[type="submit"]:hover,
.gform-theme input[type="submit"].gform_button:hover,
.gform-theme button.gform_button:hover {
  background-color: transparent !important;
  color: var(--color-black) !important;
}

.gform_required_legend {
  display: none;
}

.gfield_consent_label a {
  text-decoration: underline !important;
}

.gfield_required {
  color: currentColor !important;
}

.gform-theme select {
  padding: 0 12px !important;
}

.form-block__placeholder {
  margin-top: 2rem;
  background-color: var(--color-off-white);
  border: 1px dashed var(--color-border);
  padding: var(--space-section) 1rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* =============================================================
   26. MAP BLOCK
   ============================================================= */
.map-block {
  padding: var(--space-section) 0;
}

.map-block__wrap {
  margin-top: 2rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

.map-block__wrap > iframe,
.map-block__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-block__placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-off-white);
  border: 1px dashed var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* =============================================================
   27. WC BOOKINGS FORM
   ============================================================= */

/* --- Form container --- */
.wc-bookings-booking-form {
  font-family: var(--font-body);
  color: var(--color-text);
  border: none;
  padding: 0;
}

.wc-bookings-booking-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.wc-bookings-booking-form legend,
.wc-bookings-booking-form label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

/* --- Inputs & selects --- */
.wc-bookings-booking-form input[type="text"],
.wc-bookings-booking-form input[type="number"],
.wc-bookings-booking-form input[type="date"],
.wc-bookings-booking-form select {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0.65rem 0.85rem;
  transition: border-color var(--transition-fast);
  -webkit-appearance: none;
}

.wc-bookings-booking-form input:focus,
.wc-bookings-booking-form select:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* --- Persons fields affiancati --- */
.wc-bookings-booking-form [class*="wc_bookings_field_persons_"] {
  display: inline-block;
  width: auto;
  vertical-align: top;
  margin-right: 30px;
  margin-bottom: 30px;
}
.wc-bookings-booking-form [class*="wc_bookings_field_persons_"] input[type="number"] {
  width: 100px !important;
  text-align: center;
}

/* --- Lingua della visita select (custom field) --- */
.caviar-lingua-field {
  margin-bottom: 30px;
}
.caviar-lingua-field select {
  width: 200px;
  display: block;
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23111' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}

/* =============================================================
   27a. JQUERY UI DATEPICKER (legacy booking form)
   ============================================================= */

.wc-bookings-date-picker {
  padding: 0;
}

.wc-bookings-date-picker .ui-datepicker {
  padding: 0;
  width: 100%;
  font-family: var(--font-body);
}

.wc-bookings-date-picker .ui-widget-content {
  border: none;
  background: transparent;
  box-shadow: none;
}

/* --- Calendar header (month nav) --- */
.wc-bookings-date-picker .ui-datepicker-header {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0;
  color: var(--color-text);
  text-transform: uppercase;
  padding: 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: 0.75rem;
}

.wc-bookings-date-picker .ui-datepicker .ui-datepicker-title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.4;
  padding: 0;
}

.wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev,
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-next {
  background: transparent !important;
  border: none !important;
  top: 0;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev .ui-icon,
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-next .ui-icon {
  font-size: 0 !important;
  background: none !important;
}

.wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev::before {
  content: "\2039";
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1;
}

.wc-bookings-date-picker .ui-datepicker .ui-datepicker-next::after {
  content: "\203A";
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1;
}

.wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev:hover,
.wc-bookings-date-picker .ui-datepicker .ui-datepicker-next:hover {
  background: transparent !important;
  opacity: 0.6;
}

/* --- Weekday headers --- */
.wc-bookings-date-picker .ui-datepicker th {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  background: transparent;
  border: none;
  padding: 0.5rem 0;
}

/* --- Day cells --- */
.wc-bookings-date-picker .ui-datepicker td {
  background: transparent !important;
  border: none !important;
  padding: 2px !important;
}

.wc-bookings-date-picker .ui-datepicker td .ui-state-default {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-muted);
  background: transparent !important;
  background-image: none !important;
  border: none;
  text-align: center;
  padding: 0.55rem 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* --- Other month days --- */
.wc-bookings-date-picker .ui-datepicker td.ui-datepicker-other-month {
  background: transparent !important;
}

/* --- Bookable / available days --- */
.wc-bookings-date-picker .ui-datepicker td.bookable a {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-black) !important;
  font-weight: 600;
  text-shadow: none !important;
  border-color: transparent !important;
}

.wc-bookings-date-picker .ui-datepicker td.bookable a:hover {
  background-color: color-mix(in srgb, var(--color-black) 8%, transparent) !important;
  color: var(--color-black) !important;
}

.wc-bookings-date-picker .ui-datepicker td.partial_booked a {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-black) !important;
  font-weight: 600;
  text-shadow: none !important;
  border-color: transparent !important;
}

/* --- Selected / current day (rosso accent) --- */
.wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  font-weight: 600;
}

.wc-bookings-date-picker .ui-datepicker td.bookable-range .ui-state-default {
  background-color: var(--color-accent) !important;
  color: #fff !important;
}

/* --- Fully booked --- */
.wc-bookings-date-picker .ui-datepicker td.fully_booked:not(.not_bookable_by_rules) span,
.wc-bookings-date-picker .ui-datepicker td.fully_booked:not(.not_bookable_by_rules) a {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--color-border) !important;
  text-shadow: none !important;
  text-decoration: line-through;
  cursor: default;
}

/* --- Today highlight --- */
.wc-bookings-date-picker .ui-datepicker-today a.ui-state-highlight {
  position: relative;
}

/* --- Time block picker (legacy) --- */
.wc-bookings-booking-form .block-picker {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.35rem;
}

.wc-bookings-booking-form .block-picker li {
  float: none;
  display: block;
  min-width: 0;
  width: auto;
  margin: 0;
}

.wc-bookings-booking-form .block-picker li a,
.wc-bookings-booking-form .block-picker li:nth-child(odd) a,
.wc-bookings-booking-form .block-picker li:nth-child(even) a {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100% !important;
  padding: 0.4rem 1.2rem;
  border: none !important;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text) !important;
  text-decoration: none;
  text-align: center;
  background: var(--color-light, #f0f0f0) !important;
  box-shadow: none;
  text-shadow: none !important;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.wc-bookings-booking-form .block-picker li a:hover:not(.selected),
.wc-bookings-booking-form .block-picker li a:focus:not(.selected),
.wc-bookings-booking-form .block-picker li:nth-child(odd) a:hover:not(.selected),
.wc-bookings-booking-form .block-picker li:nth-child(even) a:hover:not(.selected) {
  background: var(--color-border) !important;
  color: var(--color-text) !important;
}

.wc-bookings-booking-form .block-picker li a.selected,
.wc-bookings-booking-form .block-picker li:nth-child(odd) a.selected,
.wc-bookings-booking-form .block-picker li:nth-child(even) a.selected {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
}

/* =============================================================
   27b. BLOCK-BASED CALENDAR (modern booking form)
   ============================================================= */

.wc-bookings-calendar {
  --wc-bookings--calendar--primary-color: var(--color-white);
  --wc-bookings--calendar--primary-background-color: var(--color-accent);
  --wc-bookings--calendar--color: var(--color-text);
  --wc-bookings--calendar--background-color: var(--color-white);
  --wc-bookings--calendar--cell-padding: 0.15em 0.15em;
  --wc-bookings--calendar--nav-padding: 0.3em 0.8em;
  font-family: var(--font-body);
  max-width: 380px;
}

.wc-bookings-calendar__day {
  width: 2.4em;
  height: 2.4em;
}

.wc-bookings-calendar__header {
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}

.wc-bookings-calendar__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
}

.wc-bookings-calendar__nav {
  color: var(--color-text);
  background: transparent;
  transition: opacity var(--transition-fast);
}

.wc-bookings-calendar__nav:hover { opacity: 0.6; }

.wc-bookings-calendar__weekday {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.wc-bookings-calendar__day {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-accent);
  font-weight: 600;
  background: transparent;
  border-radius: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.wc-bookings-calendar__day:hover:not(.disabled):not(.selected) {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
}

.wc-bookings-calendar__day.disabled {
  color: var(--color-border);
  font-weight: 400;
  text-decoration: none;
  opacity: 0.5;
}

.wc-bookings-calendar__day.selected {
  background-color: var(--color-accent);
  color: var(--color-white);
  border-radius: 0;
}

.wc-bookings-calendar__day.today::after {
  background: var(--color-accent);
}

.wc-bookings-calendar__day.other-month:not(.selected) {
  opacity: 0.35;
}

/* =============================================================
   27c. BLOCK-BASED TIME SLOTS
   ============================================================= */

.wc-bookings-time-slots {
  --wc-bookings--calendar--color: var(--color-text);
  --wc-bookings--calendar--background-color: var(--color-white);
  font-family: var(--font-body);
}

.wc-bookings-time-slots__slot {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.wc-bookings-time-slots__slot:hover:not(.selected) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.wc-bookings-time-slots__slot.selected {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* =============================================================
   27d. BOOKING COST & BUTTON
   ============================================================= */

.wc-bookings-booking-cost {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-text);
  background: transparent !important;
  border: none !important;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

.wc-bookings-booking-cost strong {
  font-weight: 600;
}

.wc-bookings-booking-cost .woocommerce-Price-amount {
  font-size: 1.2rem;
  font-weight: 600;
}

/* --- Timezone block — nascosto --- */
.wc-bookings-date-picker-timezone-block {
  display: none;
}

/* --- T&C checkbox obbligatoria (tutti i prodotti booking) --- */
.booking-terms {
  margin: 1rem 0;
}

.booking-terms__label {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text);
  cursor: pointer;
}

.booking-terms__label input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 1rem;
  height: 1rem;
  margin-right: 0.4rem;
  vertical-align: middle;
  cursor: pointer;
}

.booking-terms__label a {
  color: var(--color-accent);
  text-decoration: underline;
}

.booking-terms__error {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--color-accent);
}

/* --- Pulsante prenota: vedi regola unificata in sezione 28 --- */
.wc-bookings-booking-form-button:disabled,
.wc-bookings-booking-form-button.disabled,
.wc-bookings-booking-form .single_add_to_cart_button:disabled,
.wc-bookings-booking-form .single_add_to_cart_button.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* =============================================================
   27c. GIFT CARD DATEPICKER (WooCommerce Gift Cards plugin)
   ============================================================= */

/* Header: rimuovi sfondo jQuery UI, allinea a booking */
.wc_gc_datepicker .ui-datepicker-header {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}

/* Titolo mese/anno: match booking (Playfair, uppercase, light) */
.wc_gc_datepicker .ui-datepicker-title {
  font-family: var(--font-heading) !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

/* Frecce ‹ › — nascondi testo jQuery UI */
.wc_gc_datepicker .ui-datepicker-prev .ui-icon,
.wc_gc_datepicker .ui-datepicker-next .ui-icon {
  font-size: 0 !important;
  background: none !important;
}

.wc_gc_datepicker .ui-datepicker-prev::before {
  content: "\2039";
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1;
}

.wc_gc_datepicker .ui-datepicker-next::after {
  content: "\203A";
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1;
}

/* Hover: quadrato rosso al posto del cerchio bianco */
.wc_gc_datepicker table.ui-datepicker-calendar td:after {
  border-radius: 0 !important;
}

.wc_gc_datepicker table.ui-datepicker-calendar td:not(.ui-state-disabled):hover:after {
  background-color: var(--color-accent) !important;
}

.wc_gc_datepicker table.ui-datepicker-calendar td:not(.ui-state-disabled):hover a {
  color: #fff !important;
}

/* Giorno selezionato: quadrato rosso */
.wc_gc_datepicker table.ui-datepicker-calendar td.ui-datepicker-current-day:after {
  background-color: var(--color-accent) !important;
  border-radius: 0 !important;
}

.wc_gc_datepicker table.ui-datepicker-calendar td.ui-datepicker-current-day a {
  color: #fff !important;
}

/* =============================================================
   28. SCHEDA PRODOTTO SINGOLA (WooCommerce single product)
   ============================================================= */

/* --- Layout: Bootstrap gestisce le colonne gallery/summary --- */
.single-product div.product {
  margin-top: 1rem;
}

/* --- Gallery --- */
.single-product div.product .woocommerce-product-gallery {
  position: relative;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  display: none;
}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 auto;
  width: 60px;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
  opacity: 1;
}

/* Gallery nav arrows */
.single-product div.product .woocommerce-product-gallery .flex-direction-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.single-product div.product .woocommerce-product-gallery .flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-text);
  font-size: 1.2rem;
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 2;
}

.single-product div.product .woocommerce-product-gallery:hover .flex-direction-nav a {
  opacity: 1;
}

.single-product div.product .woocommerce-product-gallery .flex-direction-nav .flex-prev { left: 0.5rem; }
.single-product div.product .woocommerce-product-gallery .flex-direction-nav .flex-next { right: 0.5rem; }

/* --- Summary --- */
.single-product div.product .summary {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Badge promo */
.single-product div.product > .onsale {
  display: inline-block !important;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-accent) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 0.25rem !important;
  text-transform: none;
  border-radius: 0 !important;
  position: static !important;
  line-height: 1.4;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: end;
}


/* Titolo prodotto */
.single-product div.product .summary .product_title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

@media (min-width: 992px) {
  .single-product div.product .summary .product_title {
    font-size: 2.2rem;
  }
}

/* Short description */
.single-product div.product .summary .woocommerce-product-details__short-description {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: var(--line-height-base);
  margin-bottom: 1.5rem;
}

.single-product div.product .summary .woocommerce-product-details__short-description p {
  margin: 0 0 0.5rem;
}

/* --- Prezzo --- */
.single-product div.product .summary .price {
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--color-text) !important;
  margin-bottom: 1.5rem;
  display: flex !important;
  align-items: baseline;
  gap: 0.75rem;
}

.single-product div.product .summary .price del {
  color: var(--color-muted) !important;
  font-size: 1rem;
  text-decoration: line-through;
  opacity: 1;
}

.single-product div.product .summary .price del .woocommerce-Price-amount {
  color: var(--color-muted) !important;
}

.single-product div.product .summary .price ins {
  text-decoration: none !important;
  color: var(--color-accent) !important;
  font-weight: 600;
  font-size: 1.2rem;
}

.single-product div.product .summary .price ins .woocommerce-Price-amount {
  color: var(--color-accent) !important;
}

/* --- Variazioni / attributi --- */
.single-product div.product .summary .variations {
  border: none;
  margin: 0 0 1.5rem;
  width: 100%;
}

.single-product div.product .summary .variations td,
.single-product div.product .summary .variations th {
  border: none;
  padding: 0 0 0.75rem;
  vertical-align: top;
  background: transparent;
}

.single-product div.product .summary .variations .label label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
}

.single-product div.product .summary .variations select {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  -webkit-appearance: none;
}

/* Reset link variazioni */
.single-product div.product .summary .reset_variations {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-muted);
}

/* --- Variazioni come bottoni (peso: 30g, 50g, ecc.) --- */
.single-product div.product .summary .variable-items-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.single-product div.product .summary .variable-items-wrapper .variable-item {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-text);
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  border-radius: 0;
  text-align: center;
  min-width: 60px;
}

.single-product div.product .summary .variable-items-wrapper .variable-item:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.single-product div.product .summary .variable-items-wrapper .variable-item.selected {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* Swatches colore (cerchi) */
.single-product div.product .summary .variable-items-wrapper .variable-item--color,
.single-product div.product .summary .variable-items-wrapper .color-variable-item {
  width: 24px;
  height: 24px;
  min-width: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--color-border);
}

.single-product div.product .summary .variable-items-wrapper .variable-item--color.selected,
.single-product div.product .summary .variable-items-wrapper .color-variable-item.selected {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-text);
}

/* --- Quantità + aggiungi al carrello --- */
.single-product div.product .summary form.cart {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.single-product div.product .summary .quantity {
  display: flex !important;
  align-items: center;
  border: 1px solid var(--color-border);
}

.single-product div.product .summary .quantity .qty {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  width: 3rem;
  text-align: center;
  border: none !important;
  background: transparent !important;
  padding: 0.5rem 0;
  -moz-appearance: textfield;
}

.single-product div.product .summary .quantity .qty::-webkit-inner-spin-button,
.single-product div.product .summary .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Pulsanti +/- quantità (se presenti via plugin o custom) */
.single-product div.product .summary .quantity .minus,
.single-product div.product .summary .quantity .plus {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  transition: color var(--transition-fast);
  line-height: 1;
}

.single-product div.product .summary .quantity .minus:hover,
.single-product div.product .summary .quantity .plus:hover {
  color: var(--color-accent);
}

/* Aggiungi al carrello */
.single-product div.product .summary .single_add_to_cart_button,
.single-product div.product .summary button.single_add_to_cart_button {
  display: inline-block !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0.85rem 2rem !important;
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.single-product div.product .summary .single_add_to_cart_button:hover,
.single-product div.product .summary button.single_add_to_cart_button:hover {
  background-color: transparent !important;
  color: var(--color-black) !important;
}

/* --- Meta prodotto (categoria, SKU) --- */
.single-product div.product .summary .product_meta {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.single-product div.product .summary .product_meta a {
  color: var(--color-text);
  text-decoration: none;
}

.single-product div.product .summary .product_meta a:hover {
  color: var(--color-accent);
}

/* --- Info lines (spedizione, blinis, contatto) --- */
.product-info-lines {
  margin-top: 1.5rem;
}

.product-info-lines__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.product-info-lines__item:last-child {
  margin-bottom: 0;
}

.product-info-lines__item p {
  margin-bottom: 0;
}

.product-info-lines__icon {
  flex-shrink: 0;
  width: 1.6em;
  height: auto;
  margin-top: 1px;
  color: var(--color-text);
}

.product-info-lines__item--accent {
  color: var(--color-accent);
}

.product-info-lines__item--accent .product-info-lines__icon {
  color: var(--color-accent);
}

/* --- Tabs / Accordion — ora dentro il summary via hook --- */
.single-product div.product .woocommerce-tabs {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.single-product div.product .woocommerce-tabs ul.tabs {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  border: none !important;
}

.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs::after {
  display: none;
}

.single-product div.product .woocommerce-tabs ul.tabs li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.single-product div.product .woocommerce-tabs ul.tabs li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  padding: 1rem 0;
}

.single-product div.product .woocommerce-tabs ul.tabs li a::after {
  content: '\2304';
  font-size: 1.4rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.single-product div.product .woocommerce-tabs ul.tabs li.active a::after {
  content: '\2303';
}

.single-product div.product .woocommerce-tabs .panel {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: var(--line-height-base);
  padding: 0 0 1.5rem;
  margin: 0;
  border-bottom: 1px solid var(--color-border);
}

.single-product div.product .woocommerce-tabs .panel h2 {
  display: none;
}

/* --- Related products (full width sotto il grid) --- */
.single-product div.product .related.products {
  grid-column: 1 / -1;
  clear: both;
  margin-top: var(--space-section);
  padding-top: var(--space-section);
  border-top: 1px solid var(--color-border);
}

.single-product div.product .related.products > h2 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.single-product div.product .related.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .single-product div.product .related.products ul.products {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1rem;
  }
}

.single-product div.product .related.products ul.products li.product {
  margin: 0 !important;
  padding: 0;
  width: auto !important;
  float: none !important;
}

.single-product div.product .related.products ul.products li.product a img {
  width: 100%;
  height: auto;
  display: block;
}

.single-product div.product .related.products ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0.5rem 0 0.15rem;
}

.single-product div.product .related.products ul.products li.product .price {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
}

/* =============================================================
   29. PRODUCT DETAIL — componenti statici
   Classi .product-detail__* usate nel template statico e
   riutilizzabili nel tema WP via hooks.
   ============================================================= */

/* --- Layout grid --- */
.product-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
}

@media (min-width: 768px) {
  .product-detail {
    grid-template-columns: 45% 1fr;
    gap: 0 4rem;
  }
}

/* --- Gallery --- */
.product-detail__gallery {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.product-detail__gallery-slide {
  display: block;
  height: 100%;
}

.product-detail__gallery .product-detail__gallery-img {
  width: 100%;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

/* Nasconde thumbnails e trigger zoom WC */
.product-detail__gallery .flex-control-nav,
.product-detail__gallery .woocommerce-product-gallery__trigger {
  display: none !important;
}

.product-detail__gallery-prev,
.product-detail__gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.product-detail__gallery-prev:hover,
.product-detail__gallery-next:hover { background-color: var(--color-white); }

.product-detail__gallery-prev { left: 0; }
.product-detail__gallery-next { right: 0; }
.product-detail__gallery-prev svg,
.product-detail__gallery-next svg { width: 7px; height: auto; color: var(--color-text); }
.product-detail__gallery-prev svg { transform: rotate(180deg); }

/* --- Summary --- */
.product-detail__summary {
}

/* Promo badge */
.product-detail__promo {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.2rem;
}

/* Title */
.product-detail__title {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 0.2rem;
  line-height: 1.4;
}

/* Short description / excerpt */
.product-detail__excerpt {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 36px;
}

/* --- Attributi (taglia, gradazione colore) --- */
.product-detail__attributes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin-bottom: 1.5rem;
}

.product-detail__attr-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.product-detail__attr-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text);
}

.product-detail__attr-swatches {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.product-detail__attr-range {
  display: flex;
  gap: 0.4rem;
  margin-left: 0.25rem;
}

.product-detail__attr-range small {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-muted);
}

/* Pallini taglia / gradazione */
.product-detail__dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--color-text);
  background: transparent;
  pointer-events: none;
  flex-shrink: 0;
}

.product-detail__dot--filled {
  background: var(--color-text);
}

/* SVG gradazione: rispetta l'aspect ratio 74×19 */
.caviar-icon--gradazione {
  width: 74px !important;
  height: 19px !important;
}

/* --- Nota aromatica --- */
.product-detail__aroma {
  margin-bottom: 1.5rem;
}

.product-detail__aroma-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.product-detail__aroma-icon {
  flex-shrink: 0;
  width: 1.6em;
  height: auto;
  color: var(--color-muted);
}

.product-detail__aroma-value span {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
}

/* --- Variazioni peso (bottoni) --- */
.product-detail__variations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.product-detail__var-btn {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-light, #f0f0f0);
  border: none;
  border-radius: 0;
  padding: 0.4rem 1.2rem;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  min-width: 60px;
  text-align: center;
}

.product-detail__var-btn:hover:not(.product-detail__var-btn--active) {
  background: var(--color-border);
}

.product-detail__var-btn--active {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* --- Prezzo --- */
.product-detail__price {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.product-detail__price-old {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: line-through;
}

.product-detail__price-sale {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
}

/* --- Quantità + aggiungi al carrello --- */
.product-detail__cart {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.product-detail__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
}

.product-detail__qty-btn {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: transparent;
  border: none;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition-fast);
}

.product-detail__qty-btn:hover {
  color: var(--color-accent);
}

.product-detail__qty-input {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  width: 2.5rem;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  background: transparent;
  padding: 0.45rem 0;
  -moz-appearance: textfield;
}

.product-detail__qty-input::-webkit-inner-spin-button,
.product-detail__qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-detail__add-to-cart {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  background-color: var(--color-black);
  color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.product-detail__add-to-cart:hover {
  background-color: transparent;
  color: var(--color-black);
}

/* --- Accordion (Bootstrap, stile identico ad acc-block) --- */
.product-detail__accordion {
  margin-top: 1.5rem;
}

.product-detail__accordion .accordion-item {
  background: none;
}

.product-detail__accordion .accordion-button {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-text);
  background: none;
  box-shadow: none !important;
}

.product-detail__accordion .accordion-button:not(.collapsed) {
  background-color: var(--color-accent);
  color: var(--color-white);
}


.product-detail__accordion .accordion-body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.7;
}

.product-detail__accordion .accordion-body p { margin: 0; }

/* --- Var group (label + bottoni variazione) --- */
.product-detail__var-group {
  margin-bottom: 1.2rem;
}

/* --- Prezzo variazione: grande, subito dopo i bottoni formato --- */
.woocommerce-price-suffix {
  font-size: 0.5em;
  font-weight: 400;
}

.product-detail__summary .woocommerce-variation-price .price {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  font-family: var(--font-body);
  font-size: 1.4rem !important;
  font-weight: 700;
  color: var(--color-text) !important;
}

.product-detail__summary .woocommerce-variation-price del,
.product-detail__summary .woocommerce-variation-price del bdi {
  font-size: 1.1rem !important;
  font-weight: 700;
  color: var(--color-muted) !important;
  opacity: 1;
  text-decoration: line-through;
}

.product-detail__summary .woocommerce-variation-price ins {
  font-size: 1.4rem !important;
  font-weight: 700;
  color: var(--color-accent) !important;
  text-decoration: none;
  background: none;
}

.product-detail__summary .woocommerce-variation-price ins bdi,
.product-detail__summary .woocommerce-variation-price .woocommerce-Price-amount bdi {
  font-size: inherit !important;
  font-weight: inherit;
}

.product-detail__summary .stock {
  font-family: var(--font-body);
  font-size: 0.85rem !important;
  font-weight: 400;
  margin: 0 0 1rem;
}

.product-detail__summary .stock.in-stock {
  color: var(--color-text) !important;
}

.product-detail__summary .stock.out-of-stock {
  color: var(--color-muted) !important;
}

.woocommerce-variation-availability .stock.out-of-stock {
  font-weight: 600;
  color: var(--color-accent) !important;
}

.product-detail__summary .woocommerce-variation-price:has(+ .woocommerce-variation-availability .stock.out-of-stock) .price {
  margin-bottom: 0;
}


/* --- Wrapper variazione: add-to-cart --- */
.woocommerce-variation-add-to-cart,
.product-detail__summary form.cart {
  margin-bottom: 1.5rem;
}

.woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* --- Bottone aggiungi al carrello --- */
.product-detail__summary .single_add_to_cart_button,
.product-detail__summary button[name="add-to-cart"],
.wc-bookings-booking-form-button,
.wc-bookings-booking-form .single_add_to_cart_button,
button.wc-bookings-booking-form-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 2rem !important;
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-black);
  border-radius: 0 !important;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  line-height: 1;
}

.product-detail__summary .single_add_to_cart_button:hover:not(.disabled):not(:disabled),
.product-detail__summary button[name="add-to-cart"]:hover,
.wc-bookings-booking-form-button:hover:not(:disabled):not(.disabled),
.wc-bookings-booking-form .single_add_to_cart_button:hover:not(:disabled):not(.disabled),
button.wc-bookings-booking-form-button:hover:not(:disabled):not(.disabled) {
  background-color: transparent;
  color: var(--color-black);
}

.product-detail__summary .single_add_to_cart_button.disabled,
.product-detail__summary .single_add_to_cart_button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* --- Layout prodotto singolo: resetta grid statica ─── */
.single-product .product-detail {
  display: block;
  max-width: none;
  margin: 0;
  padding: 2rem 0 3rem;
}


/* ── Edit post link (admin only, fixed bottom-right) ──────────────────────── */
.post-edit-link {
  position: fixed;
  z-index: 9999;
  bottom: 0;
  right: 0;
  padding: 10px 18px;
  background-color: #3c3c3c;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-top-left-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.post-edit-link:hover,
.post-edit-link:focus-visible {
  color: #fff;
  background-color: #222;
}

/* =============================================================
   30. WOOCOMMERCE PAGINATION
   ============================================================= */

.woocommerce nav.woocommerce-pagination {
  display: flex;
  justify-content: center;
  padding-top: var(--space-content);
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: flex !important;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 1px;
  padding: 0;
  border: none !important;
  white-space: normal;
  clear: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border-right: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  display: flex !important;
  overflow: visible !important;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text);
  background-color: transparent;
  border: none !important;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  background-color: var(--color-off-white) !important;
  color: var(--color-text) !important;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  font-weight: 600;
}

.woocommerce nav.woocommerce-pagination ul li span.dots {
  pointer-events: none;
  width: auto;
  border-radius: 0;
  color: var(--color-muted);
}

.woocommerce nav.woocommerce-pagination ul li .prev,
.woocommerce nav.woocommerce-pagination ul li .next {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

/* =============================================================
   31. LOGIN / REGISTER — form My Account
   ============================================================= */

.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon {
  border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent) !important;
  border-radius: 0 !important;
}

/* Checkbox "Ricordami" */
.woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text);
  cursor: pointer;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-fast);
}

.woocommerce-form-login__rememberme input[type="checkbox"]:checked {
  background-color: var(--color-text);
  border-color: var(--color-text);
}

.woocommerce-form-login__rememberme input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='1.5,6 5,9.5 10.5,2.5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.65rem no-repeat;
}

/* "Ricordami" sopra, bottone Accedi a capo sotto, entrambi allineati a sinistra */
.woocommerce-form-login p.form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
/* Forza il flex sulla label (WC la rende block → checkbox e testo non centrati) */
.woocommerce-form-login p.form-row .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Bottoni Accedi / Registrati */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 2rem !important;
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  line-height: 1 !important;
  transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}

.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover {
  background-color: transparent !important;
  color: var(--color-black) !important;
}

.woocommerce-privacy-policy-text {
  font-size: 0.7rem;
  color: var(--color-muted);
}
.woocommerce-privacy-policy-text a {
  text-decoration: underline;
}

/* Link rossi all'hover — termini e condizioni / privacy del checkout
   (sia checkout a blocchi che classico). */
.wc-block-checkout__terms a:hover,
.woocommerce-terms-and-conditions-wrapper a:hover,
.woocommerce-privacy-policy-text a:hover {
  color: var(--color-accent);
}

/* =============================================================
   32. WOOCOMMERCE NOTICES (toast bottom-right)
   ============================================================= */

.woocommerce-notices-wrapper {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 360px;
  width: calc(100vw - 3rem);
  pointer-events: none;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error li {
  pointer-events: all;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-white);
  border: none !important;
  border-top: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 1rem 1.25rem !important;
  margin: 0 !important;
  list-style: none;
}

/* Reset lista errori */
.woocommerce-notices-wrapper .woocommerce-error {
  padding: 0 !important;
  list-style: none !important;
  background: none;
  box-shadow: none;
}

.woocommerce-notices-wrapper .woocommerce-error li {
  border-left: 3px solid var(--color-accent) !important;
}

.woocommerce-notices-wrapper .woocommerce-message {
  border-left: 3px solid var(--color-text) !important;
}

.woocommerce-notices-wrapper .woocommerce-info {
  border-left: 3px solid var(--color-muted) !important;
}

.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before {
  display: none !important;
}

/* Link "Visualizza carrello" dentro la notice */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-message a.button {
  display: inline-block;
  float: none !important;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
}

/* =============================================================
   27. MY ACCOUNT — WooCommerce
   ============================================================= */

/* ── Layout ────────────────────────────────────────────────── */
.woocommerce-account .woocommerce {
  display: flex;
  align-items: flex-start;
  gap: 4rem;
}

/* ── Navigazione sidebar ────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
  flex: 0 0 180px;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}
.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--color-border);
}
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 0.65rem 0;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.woocommerce-MyAccount-navigation a:hover { color: var(--color-accent); }
.woocommerce-MyAccount-navigation li.is-active > a { color: var(--color-accent); font-weight: 700; }
.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--color-muted); }

/* ── Contenuto ──────────────────────────────────────────────── */
.woocommerce-MyAccount-content {
  flex: 1;
  min-width: 0;
}
/* Link generici nell'area account → rossi all'hover (esclusi i .button). */
.woocommerce-MyAccount-content a:not(.button):hover {
  color: var(--color-accent);
}
/* Heading di sezione — uppercase Work Sans, uniforme su tutte le pagine account.
   Gli H1 grandi serif restano (sono nel page-hero, fuori dal contenuto). */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3,
.woocommerce-MyAccount-content h4,
.woocommerce-MyAccount-content fieldset > legend {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 0.9rem;
}
.woocommerce-MyAccount-content p {
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  color: var(--color-text);
}

/* ── Notices inline (non floating) ──────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error li {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem;
  background: var(--color-white);
  border: none;
  border-left: 3px solid var(--color-text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error { border-left-color: var(--color-accent); }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info  { border-left-color: var(--color-muted); }
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before { display: none !important; }

/* ── Tabelle account (ordini, prenotazioni, dettaglio ordine) — uniformi ── */
/* WC core mette su .shop_table un box 1px + border-radius: li azzeriamo e
   usiamo solo underline scuro su header + separatore singolo chiaro sulle
   righe, identico per tutte e tre le tabelle. */
.woocommerce-MyAccount-content table.shop_table {
  width: 100%;
  margin: 0;
  border: none;
  border-radius: 0;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.8rem;
}
/* Header (solo thead): underline scuro */
.woocommerce-MyAccount-content table.shop_table thead th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  border: none;
  border-bottom: 1px solid var(--color-text);
}
/* Celle di corpo — incl. th "scope=row" (n. ordine): separatore chiaro singolo */
.woocommerce-MyAccount-content table.shop_table th,
.woocommerce-MyAccount-content table.shop_table td {
  padding: 0.65rem 0.85rem;
  border: none;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  color: var(--color-text);
}
.woocommerce-MyAccount-content table.shop_table tbody tr:last-child th,
.woocommerce-MyAccount-content table.shop_table tbody tr:last-child td { border-bottom: none; }
/* Prima colonna flush a sinistra → testo allineato ai titoli di sezione e al
   bordo del box indirizzo (tutti a filo del container). */
.woocommerce-MyAccount-content table.shop_table th:first-child,
.woocommerce-MyAccount-content table.shop_table td:first-child { padding-left: 0; }
/* tfoot del dettaglio ordine (subtotale/totale/metodo) — stessi separatori */
.woocommerce-MyAccount-content table.shop_table tfoot th,
.woocommerce-MyAccount-content table.shop_table tfoot td {
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
}
.woocommerce-MyAccount-content table.shop_table tfoot tr:last-child th,
.woocommerce-MyAccount-content table.shop_table tfoot tr:last-child td { border-bottom: none; }

/* Badge stato — minimale, grigio, squadrato. Vale per ordini (.cru-status),
   prenotazioni (.wc-bookings-status-label) e dettaglio ordine (.status-*). */
.cru-status,
.woocommerce-MyAccount-content .wc-bookings-status-label,
.woocommerce-MyAccount-content .wc-booking-summary span[class*="status-"] {
  display: inline-block;
  background: #f2f1ef;
  color: var(--color-muted);
  border: none;
  border-radius: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}

/* Box account — niente angoli tondi (riepilogo prenotazione, indirizzo, extra) */
.woocommerce-account .wc-booking-summary {
  border: 1px solid var(--color-border);
  border-radius: 0;
}
.woocommerce-account .woocommerce-customer-details address,
.woocommerce-account .wc-block-components-additional-fields-list {
  border: 1px solid var(--color-border); /* WC mette 2px su bottom/right: uniforma */
  border-radius: 0;
}

/* Margini tra le sezioni del dettaglio ordine */
.woocommerce-account .woocommerce-order-details,
.woocommerce-account .woocommerce-customer-details { margin-bottom: 2.5rem; }

/* ── Bottoni — scoped al contenuto WC, non all'intero body ───── */
/* Nella tabella Experience il numero d'ordine e' l'unica azione della riga:
   prende lo stesso bottone della tabella Ordini, cosi' le due schermate si
   comportano allo stesso modo (richiesta di Creative Lab). */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content a.button,
.woocommerce-MyAccount-content .my_account_bookings .order-number a,
.woocommerce-MyAccount-content input[type="submit"],
.woocommerce-MyAccount-content button[type="submit"] {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 2rem !important;
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  display: inline-block;
  cursor: pointer;
  line-height: 1 !important;
  transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}
.woocommerce-MyAccount-content .button:hover,
.woocommerce-MyAccount-content a.button:hover,
.woocommerce-MyAccount-content .my_account_bookings .order-number a:hover,
.woocommerce-MyAccount-content input[type="submit"]:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
  background-color: transparent !important;
  color: var(--color-black) !important;
}

/* ── Form campi ──────────────────────────────────────────────── */
/* Azzera variabili WC per il form account */
.woocommerce-MyAccount-content {
  --wc-form-border-width:      0px;
  --wc-form-border-color:      transparent;
  --wc-form-color-background:  transparent;
  --wc-form-border-radius:     0px;
}

/* Heading form (es. "Indirizzo di fatturazione" dentro il form) */
.woocommerce-MyAccount-content .woocommerce-address-fields > h3 {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 0.4rem;
  margin-bottom: 1.5rem !important;
}

/* form-row spacing */
.woocommerce-MyAccount-content .form-row {
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
}
.woocommerce-MyAccount-content label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--color-text);
}
.woocommerce-MyAccount-content label .required { color: var(--color-accent); }

/* Input / select — specificità 0,3,1 uguale a WC, nostro viene dopo → vince */
.woocommerce-MyAccount-content form .form-row .input-text,
.woocommerce-MyAccount-content form .form-row input[type="email"],
.woocommerce-MyAccount-content form .form-row input[type="password"],
.woocommerce-MyAccount-content form .form-row input[type="tel"],
.woocommerce-MyAccount-content form .form-row select,
.woocommerce-MyAccount-content form .form-row textarea {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
  padding: 0.45rem 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--color-text) !important;
  height: auto !important;
}
.woocommerce-MyAccount-content form .form-row .input-text:focus,
.woocommerce-MyAccount-content form .form-row input:focus,
.woocommerce-MyAccount-content form .form-row select:focus,
.woocommerce-MyAccount-content form .form-row textarea:focus {
  border-bottom-color: var(--color-accent) !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Input codice gift card (redeem): fuori da .form-row, restava box default
   browser → stesso stile underline degli altri input account. */
.woocommerce-MyAccount-content input[name="wc_gc_redeem_code"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
  padding: 0.45rem 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--color-text) !important;
  height: auto !important;
}
.woocommerce-MyAccount-content input[name="wc_gc_redeem_code"]:focus {
  border-bottom-color: var(--color-accent) !important;
}
/* Helper "Nome visualizzato" — testo piccolo e attenuato */
.woocommerce-MyAccount-content #account_display_name_description {
  display: block;
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-top: 0.3rem;
}

.woocommerce-MyAccount-content .password-input { position: relative; }
.woocommerce-MyAccount-content .show-password-input {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: var(--color-muted);
  cursor: pointer;
}

/* ── Indirizzi (riepilogo) ───────────────────────────────────── */
/* WC usa .col2-set con .u-column1 / .u-column2 float-based — override a grid */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .col2-set {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  width: 100% !important;
}
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after { display: none; } /* rimuove clearfix */
.woocommerce-account .u-column1,
.woocommerce-account .u-column2,
.woocommerce-account .col-1,
.woocommerce-account .col-2 {
  float: none !important;
  width: auto !important;
}

.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
/* Rimuove il clearfix WC che rompe il flex */
.woocommerce-account .addresses .title::before,
.woocommerce-account .addresses .title::after {
  display: none !important;
  content: none !important;
}
/* WC usa h2 per i titoli indirizzo — sovrascrive la regola generica h2 */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 !important;
}
.woocommerce-account .woocommerce-Address-title .edit {
  font-size: 0.7rem;
  color: var(--color-muted);
  text-decoration: underline;
  font-weight: 400;
  flex-shrink: 0;
}
.woocommerce-account address {
  font-style: normal;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--color-text);
}

/* ── Form modifica indirizzo (edit-address) ──────────────────── */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}
.woocommerce-account .woocommerce-address-fields__field-wrapper::before,
.woocommerce-account .woocommerce-address-fields__field-wrapper::after { display: none !important; }
.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-wide  { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-first,
.woocommerce-account .woocommerce-address-fields__field-wrapper > .form-row-last  {
  float: none !important;
  width: auto !important;
  clear: none !important;
}
/* Link "Torna agli indirizzi" */
.woocommerce-account p.woocommerce-customer-details + .woocommerce-address-fields,
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row {
  margin-bottom: 1.25rem;
}

/* ── Dettaglio ordine ───────────────────────────────────────── */
.woocommerce-account .woocommerce-order-details__title,
.woocommerce-account .woocommerce-column__title,
.woocommerce-account .wc-block-order-confirmation-additional-fields-wrapper h2 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 0.9rem;
}
/* Spazio intro → "Dettagli ordine" */
.woocommerce-account .woocommerce-order-details { margin-top: 1.5rem; }
/* "Informazioni aggiuntive" è dentro .customer-details, subito dopo l'indirizzo:
   serve aria che la stacchi dal box indirizzo. */
.woocommerce-account .wc-block-order-confirmation-additional-fields-wrapper { margin-top: 2.5rem; }

/* Righe del regalo ("Questo ordine è un regalo", "Scrivi un messaggio di
   auguri"): sono campi aggiuntivi del checkout a blocchi, resi da WooCommerce
   in un <dl> proprio, fuori dalla tabella dell'ordine e con tipografia sua.
   Accanto alla tabella stonavano — e' il "fuori formattazione" segnalato.
   Qui prendono la stessa tipografia delle righe della tabella: etichetta a
   sinistra in grassetto, valore a destra. */
.wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--color-border);
}
.wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dt,
.wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dd {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}
.wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dt {
  font-weight: 700;
}
.wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dd {
  font-weight: 400;
  text-align: right;
}

@media (max-width: 575.98px) {
  .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
  .wc-block-order-confirmation-additional-fields-wrapper .wc-block-components-additional-fields-list dd {
    text-align: left;
    margin-bottom: 0.6rem;
  }
}

/* Meta riga prodotto (es. dati gift card): WC fa floattare la label e mette il
   valore in un <p> con font/margini diversi → disallineato. Uniforma: label e
   valore inline, stessa dimensione, righe compatte. */
.woocommerce-account .wc-item-meta {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8rem;
}
.woocommerce-account .wc-item-meta li { margin: 0 0 0.1rem; }
.woocommerce-account .wc-item-meta .wc-item-meta-label {
  float: none;
  display: inline;
  font-weight: 700;
  margin-right: 0.35em;
}
.woocommerce-account .wc-item-meta li p {
  display: inline;
  margin: 0;
  font-size: inherit;
  line-height: 1.5;
}

/* ── Gift Card (plugin WooCommerce Gift Cards) ───────────────── */
/* Spazio sotto il form "Aggiungi una gift card" */
.woocommerce-MyAccount-content > form { margin-bottom: 2.5rem; }
/* Spazio sopra gli h2 che seguono una tabella ("Attività") */
.woocommerce-MyAccount-content > table + h2 { margin-top: 2.5rem; }

/* ── Responsive mobile ──────────────────────────────────────── */
@media (max-width: 767px) {
  .woocommerce-account .woocommerce {
    flex-direction: column;
    gap: 2rem;
  }
  .woocommerce-MyAccount-navigation { flex: none; width: 100%; }
  .woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
  .woocommerce-MyAccount-content table.shop_table th,
  .woocommerce-MyAccount-content table.shop_table td { padding: 0.5rem 0.4rem; font-size: 0.75rem; }
}

/* ── Select2 in account — azzera stili WC ───────────────────── */
.woocommerce-MyAccount-content .select2-container .select2-selection,
.woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  padding: 0.45rem 1.5rem 0.45rem 0 !important;
}
.woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 !important;
  line-height: 1.5 !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--color-text) !important;
}
.woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  height: auto !important;
}
.woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-muted) !important;
}

/* =============================================================
   28. CARRELLO VUOTO — WooCommerce Blocks
   ============================================================= */

/* Nasconde l'icona faccina triste (pseudo-elemento ::before con mask-image SVG) */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  display: none !important;
}

/* Bottoni principali WC Blocks: "Procedi al pagamento" + "Effettua ordine" */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 1rem 2rem !important;
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}

.wc-block-cart__submit-button { width: 100% !important; }

/* Bottone "Applica" coupon */
.wc-block-components-totals-coupon__button,
.wc-gift-cards-form__button {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.6rem 1.25rem !important;
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}

.wc-block-components-totals-coupon__button:not(:disabled):hover,
.wc-gift-cards-form__button:not(:disabled):hover {
  background-color: transparent !important;
  color: var(--color-black) !important;
}

.wc-block-components-totals-coupon__button:disabled,
.wc-gift-cards-form__button:disabled {
  opacity: 0.45 !important;
}

/* Gift card form — layout inline identico al coupon */
.wc-gift-cards-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
  width: 100%;
}

.wc-gift-cards-text-input {
  flex: 3 1 120px;
  margin: 0 !important;
}

.wc-gift-cards-form__button {
  flex: 1 1 auto;
}

/* Stessa larghezza bottoni coupon e gift card */
.wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button,
.wc-gift-cards-form__button {
  width: 128px;
}

/* Input coupon e gift card — stile coerente con booking form */
.wc-block-components-totals-coupon__input,
.wc-gift-cards-text-input {
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.wc-block-components-totals-coupon__input:focus-within,
.wc-gift-cards-text-input:focus-within {
  border-color: var(--color-accent) !important;
}

.wc-block-components-totals-coupon__input input,
.wc-gift-cards-text-input input {
  font-family: var(--font-body) !important;
  font-size: var(--font-size-base) !important;
  color: var(--color-text) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

.wc-block-components-totals-coupon__input label,
.wc-gift-cards-text-input label {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
}

/* Gift card input: resting identico al coupon */
.wc-gift-cards-text-input input {
  padding: 16px 12px !important;
}

/* Gift card input: attivo — padding-top extra per spingere testo sotto la label floated */
.wc-gift-cards-text-input.is-active input,
.wc-gift-cards-text-input:focus-within input {
  padding: 24px 12px 8px 12px !important;
}

/* Gift card label: resting — identico coupon (top 25px, translateY -11px, left 12px) */
.wc-gift-cards-text-input label {
  position: absolute !important;
  top: 25px !important;
  left: 12px !important;
  margin-left: 0 !important;
  transform: translateY(-11px) !important;
  font-size: 1rem !important;
  pointer-events: none !important;
  transition: transform 0.2s ease, font-size 0.2s ease, top 0.2s ease !important;
}

/* Gift card label: attivo (focus o campo pieno) */
.wc-gift-cards-text-input:focus-within label,
.wc-gift-cards-text-input.is-active label,
.wc-gift-cards-text-input input:not([value=""]) ~ label {
  top: 5px !important;
  left: 12px !important;
  margin-left: 0 !important;
  transform: none !important;
  font-size: 0.75rem !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: transparent !important;
  color: var(--color-black) !important;
}

/* Nasconde separatore e heading "Novità in negozio" rimasti orfani */
.wp-block-woocommerce-empty-cart-block .wp-block-separator,
.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
  display: none !important;
}

/* =============================================================
   30. GIFT CARD FORM — WooCommerce Gift Cards plugin
   ============================================================= */

/* Azzera WC custom properties per border-box (come my-account) */
.product-detail__summary .woocommerce_gc_giftcard_form {
  --wc-form-border-width:     0px;
  --wc-form-border-color:     transparent;
  --wc-form-color-background: transparent;
  --wc-form-border-radius:    0px;
  margin-top: 1.25rem;
}

/* ── Checkbox "Inviare come regalo?" ─────────────────────────── */
.wc_gc_send_as_gift_wrapper {
  padding: 0.75rem 0 !important;
  display: flex;
  align-items: center;
}

.wc_gc_send_as_gift_wrapper label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text);
  cursor: pointer;
  margin: 0;
}

.wc_gc_send_as_gift_wrapper input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--color-text);
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background-color var(--transition-fast);
}

.wc_gc_send_as_gift_wrapper input[type="checkbox"]:checked {
  background-color: var(--color-text);
}

.wc_gc_send_as_gift_wrapper input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='1.5,6 5,9.5 10.5,2.5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.65rem no-repeat;
}

/* ── Campi form ──────────────────────────────────────────────── */
.woocommerce_gc_giftcard_form .form-row {
  margin-bottom: 1.1rem;
  padding: 0;
}

.woocommerce_gc_giftcard_form label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--color-text);
  margin-bottom: 0.3rem;
  display: block;
}

.woocommerce_gc_giftcard_form label abbr {
  color: var(--color-accent);
  text-decoration: none;
  margin-left: 0.15rem;
}

/* Input + textarea: solo border-bottom, identico agli input del sito */
.woocommerce form .woocommerce_gc_giftcard_form .form-row .input-text,
.woocommerce_gc_giftcard_form .input-text {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--color-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.45rem 0 !important;
  font-family: var(--font-body) !important;
  font-size: 0.85rem !important;
  color: var(--color-text) !important;
  width: 100%;
  outline: none;
}

.woocommerce_gc_giftcard_form .input-text:focus {
  border-bottom-color: var(--color-accent) !important;
}

/* Textarea */
.woocommerce_gc_giftcard_form textarea.input-text {
  resize: vertical;
  min-height: 80px;
}

/* Testo descrittivo sotto i campi */
.woocommerce_gc_giftcard_form .description {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-top: 0.25rem;
  display: block;
}

/* Nasconde l'intero qty wrapper quando il plugin gift card forza input[type="hidden"]
   (quantità fissa a 1, bottoni +/- inutili) */
.product-detail__qty:has(input[type="hidden"].product-detail__qty-input) {
  display: none !important;
}

/* Link "Cancella" data consegna */
.woocommerce_gc_giftcard_form .reset_delivery_date {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-muted);
  text-decoration: underline;
  display: inline-block;
  margin-top: 0.3rem;
}

/* Prodotto omaggio — carrello e order summary checkout:
   - nasconde "0,00 €" nel prezzo totale (resta solo "Gratuito")
   - nasconde il blocco dettagli prodotto */
.wc-block-cart-items__row:has(.wc-block-components-product-details__type)
  .wc-block-cart-item__total
  .wc-block-formatted-money-amount,
.wc-block-components-order-summary-item:has(.wc-block-components-product-details__type)
  .wc-block-components-order-summary-item__total-price
  .wc-block-formatted-money-amount {
  display: none;
}

.wc-block-cart-items__row:has(.wc-block-components-product-details__type)
  .wc-block-components-product-details,
.wc-block-components-order-summary-item:has(.wc-block-components-product-details__type)
  .wc-block-components-product-details {
  display: none;
}

/* «Paga fino a 24 rate con PayPal»: il contenitore del messaggio e' fratello
   del riquadro dei totali e nasce senza margini, quindi la riga finisce
   incollata al bordo del riquadro. Il messaggio lo compone PayPal dentro un
   iframe e non e' raggiungibile da qui: si distanzia il contenitore.
   Resta a zero finche' PayPal non lo popola, quindi non lascia buchi. */
.ppcp-messages:not(:empty) {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Icone dei metodi accettati sotto "Procedi al pagamento": tolte.
   Mostravano due sole voci su quattro (carta generica e Google Pay, non
   PayPal ne' bonifico), e WooCommerce le vincola a height 24px con
   max-width 38px senza object-fit: un logo 2:1 come Google Pay ci arriva
   schiacciato. In checkout i loghi sono al posto giusto e in proporzione. */
.wp-block-woocommerce-cart-accepted-payment-methods-block {
  display: none;
}

/* =============================================================
   27. POPUP
   ============================================================= */
.cru-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2vw, 1rem);
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease;
}

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

.cru-popup {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 800px;
  max-height: 90dvh;
  background: #fff;
  overflow: hidden;
  transform: translateY(22px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(.22,.8,.3,1), opacity 0.38s ease;
}

.cru-popup-overlay.is-open .cru-popup {
  transform: translateY(0);
  opacity: 1;
}

.cru-popup__close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 10;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-black);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
  padding: 0;
}

.cru-popup__close:hover { opacity: 1; }

.cru-popup__media {
  flex: 0 0 50%;
  overflow: hidden;
  align-self: stretch;
}

.cru-popup__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cru-popup__body {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(0.75rem, 3vw, 2rem);
}

.cru-popup__title {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--color-accent);
  margin: 0 0 0.6em;
}

.cru-popup__text {
  font-family: var(--font-body);
  font-size: clamp(0.8125rem, 1.6vw, 0.9rem);
  line-height: 1.35;
  color: var(--color-text);
}

.cru-popup__text p { margin: 0; }

.cru-popup__cta {
  display: inline-block;
  margin-top: 1.25em;
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 1.4vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-black);
  padding-bottom: 0.1rem;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.cru-popup__cta:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* =============================================================
   35. CHECKOUT — CAMPO REGALO (Block Checkout)
   ============================================================= */

/* Heading "Informazioni aggiuntive" spostato via JS fuori dal suo step-container */
.wc-block-components-checkout-step__title[data-moved] {
  margin-bottom: 1rem !important;
}

/* Testo "no ricevuta" iniettato via JS sotto il campo messaggio */
.regalo-no-receipt {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* =============================================================
   34. ACCOUNT FUORI DA MYACCOUNT-CONTENT — notice, bottoni, form
   =============================================================
   Le pagine account da sloggato (login, lost-password, reset-password)
   non hanno .woocommerce-MyAccount-content, quindi non prendevano ne' lo
   stile dei bottoni ne' quello dei notice: restava il default WooCommerce
   (bottone grigio #e9e6ed, notice con fondo beige e filetto verde).
   ------------------------------------------------------------- */

/* ── Layout: niente flex dove non c'e' la navigazione account ──
   .woocommerce-account .woocommerce e' flex per affiancare menu e
   contenuto. Da sloggato il menu non esiste, e il flex lasciava il form
   largo quanto il suo contenuto (489px) e un eventuale notice stampato
   fuori dal wrapper diventava una colonna stretta di fianco al testo. */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
  display: block;
}

/* ── Notice stampati fuori dai wrapper noti ───────────────────
   Alcuni template WooCommerce (es. la conferma "email di reset inviata")
   scrivono il notice come figlio diretto di .woocommerce, senza passare
   da .woocommerce-notices-wrapper. */
.woocommerce > .woocommerce-message,
.woocommerce > .woocommerce-info,
.woocommerce > .woocommerce-error,
.woocommerce > .woocommerce-error li {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem;
  background: var(--color-white);
  border: none;
  border-top: none;
  border-left: 3px solid var(--color-text);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}
.woocommerce > .woocommerce-error { border-left-color: var(--color-accent); }
.woocommerce > .woocommerce-info  { border-left-color: var(--color-muted); }
.woocommerce > .woocommerce-message::before,
.woocommerce > .woocommerce-info::before,
.woocommerce > .woocommerce-error::before { display: none !important; }

/* ── Bottoni dei form password ────────────────────────────────
   "Resettare la password" e "Salva" escono come .woocommerce-Button
   .button, senza una classe propria su cui agganciarsi. */
.woocommerce-ResetPassword button[type="submit"],
.woocommerce-ResetPassword input[type="submit"] {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 2rem !important;
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-black) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  line-height: 1 !important;
  transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}
.woocommerce-ResetPassword button[type="submit"]:hover,
.woocommerce-ResetPassword input[type="submit"]:hover {
  background-color: transparent !important;
  color: var(--color-black) !important;
}

/* ── Allineamento dei due campi password ──────────────────────
   WooCommerce affianca i campi con float + width 47%. La label
   "Reinserisci la nuova password" andava a capo e spingeva giu' il
   proprio input di 32px rispetto all'altro. Con la griglia i due input
   restano allineati comunque vada la label. */
.woocommerce-ResetPassword:has(.form-row-first) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  align-items: end;
}
.woocommerce-ResetPassword .form-row-first,
.woocommerce-ResetPassword .form-row-last {
  float: none !important;
  width: auto !important;
}
.woocommerce-ResetPassword > p:not(.form-row-first):not(.form-row-last) {
  grid-column: 1 / -1;
}
.woocommerce-ResetPassword > .clear { display: none; }

/* ── Misuratore di forza della password ───────────────────────
   Misuratore e suggerimento vengono inseriti DENTRO la riga del primo
   campo. Quella riga cresce, e con align-items: end il secondo campo
   veniva allineato in basso, cioe' scivolava sotto: e' il "si sposta
   il campo" segnalato. Allineando in alto i due campi restano appaiati
   e il misuratore cresce verso il basso senza spostare niente.
   L'align-items: end serviva quando il contenitore era stretto e la
   label "Reinserisci la nuova password" andava a capo; oggi la griglia
   e' a 636px per colonna e non succede piu'. */
.woocommerce-ResetPassword:has(.form-row-first) { align-items: start; }

/* Aspetto: WooCommerce lo stampa come fondino pieno verde/arancione,
   fuori da qualunque linguaggio del sito. Stesso trattamento dei
   notice del tema: bianco, filetto a sinistra, spigoli vivi.
   I fondini di WooCommerce stanno su selettori con la classe di stato
   (.woocommerce-password-strength.bad): per batterli servono selettori
   di pari specificita', non basta la classe base. */
.woocommerce-password-strength,
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad,
.woocommerce-password-strength.good,
.woocommerce-password-strength.strong {
  margin-top: 0.6rem;
  padding: 0.6rem 0.9rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  text-align: left;
}
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad    { border-left-color: var(--color-accent); }
.woocommerce-password-strength.good   { border-left-color: var(--color-muted); }
.woocommerce-password-strength.strong { border-left-color: var(--color-black); }

.woocommerce-password-hint {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-muted);
}

@media (max-width: 575.98px) {
  .woocommerce-ResetPassword:has(.form-row-first) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Avviso migrazione password sul login ─────────────────────
   Stesso linguaggio visivo dei notice del tema (bianco, filetto a
   sinistra) invece del fondino beige: e' lo stile che il cliente ha
   chiesto per tutte le notifiche. */
.cru-login-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--color-white);
  border-left: 3px solid var(--color-text);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}
.cru-login-notice p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--color-text);
}
.cru-login-notice__icon {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--color-text);
  position: relative;
}
.cru-login-notice__icon::after {
  content: "i";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-white);
}
.cru-login-notice p a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.cru-login-notice p a:hover {
  color: var(--color-accent);
}

/* =============================================================
   35. AGGIUNGI METODO DI PAGAMENTO — endpoint account
   =============================================================
   Due difetti sommati. Il gateway Nexi XPay stampa i loghi dei circuiti
   senza vincolo di dimensione: le PNG uscivano a 863x431px ciascuna,
   una sotto l'altra, e schiacciavano il resto della pagina. WooCommerce
   ci mette del suo con riquadro lilla, spigoli arrotondati e bottone
   flottato a destra, tutto fuori dal linguaggio del sito.

   Due note su cosa rende ostica questa pagina:
   - specificita': WooCommerce usa "#add_payment_method #payment", due
     ID. Un selettore con una classe e un ID perde, quindi qui si
     ricalca la stessa forma.
   - la li dei metodi ha ::before e ::after di clearfix. Passando la li
     a grid quelle due diventano celle a tutti gli effetti e sfasano di
     una riga radio ed etichetta: vanno spente.
   ------------------------------------------------------------- */

/* Niente cornice: il resto dell'area account non ne ha */
#add_payment_method #payment {
  background: transparent;
  border: none;
  border-radius: 0;
}

#add_payment_method #payment ul.woocommerce-PaymentMethods {
  margin: 0 0 1.5rem;
  padding: 0;
  border-bottom: none;
}

/* Radio ed etichetta sulla stessa riga, box informativo sotto a tutta larghezza */
/* Metriche prese dal checkout a blocchi, cosi' le due pagine si somigliano:
   riga con rientro 16px, radio tondo da 20px, etichetta che parte a 48px. */
#add_payment_method #payment li.woocommerce-PaymentMethod {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  column-gap: 12px;
  padding: 16px;
}
#add_payment_method #payment li.woocommerce-PaymentMethod::before,
#add_payment_method #payment li.woocommerce-PaymentMethod::after {
  display: none !important;
}

#add_payment_method #payment li.woocommerce-PaymentMethod > input.input-radio {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-black);
}

#add_payment_method #payment li.woocommerce-PaymentMethod > label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
}

/* Rientro pari a radio + gap, cosi' nota e loghi partono sotto l'etichetta */
#add_payment_method #payment div.payment_box {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  padding: 0 0 0 32px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-muted);
}
#add_payment_method #payment div.payment_box p,
#add_payment_method #payment div.payment_box b {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  /* il plugin marca la nota in <b>: qui e' testo di servizio, non un titolo */
  font-weight: 400;
}
/* Aria fra la nota e la fila dei circuiti */
#add_payment_method #payment div.payment_box .nexixpay-loghi-container {
  margin-top: 0.75rem;
}
/* WC disegna una punta triangolare sopra il box: senza il lilla non serve */
#add_payment_method #payment div.payment_box::before,
#add_payment_method #payment div.payment_box::after {
  display: none !important;
}

/* Bottone allineato all'etichetta, non flottato a destra.
   Gli !important servono a battere ".woocommerce-MyAccount-content .form-row"
   della sezione 27, che li usa gia'. */
#add_payment_method #payment .form-row {
  margin: 1.5rem 0 0 !important;
  padding: 0 16px !important;
}
#add_payment_method #payment #place_order {
  float: none;
  display: inline-block;
}

/* ── Loghi dei circuiti ─────────────────────────────────────── */
.nexixpay-loghi-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
/* Quello dentro l'etichetta va spinto a destra, quelli nel box no */
#add_payment_method #payment li.woocommerce-PaymentMethod > label .nexixpay-loghi-container {
  margin-left: auto;
}
.nexixpay-loghi-container .internal-container { display: contents; }
.nexixpay-loghi-container .img-container {
  flex: 0 0 auto;
  width: auto;
}
.nexixpay-loghi-container .img-container img {
  display: block;
  width: auto !important;
  height: 22px !important;
  max-width: none;
  margin: 0 !important;
}

/* =============================================================
   36. NOTICE A BLOCCHI (carrello e checkout)
   =============================================================
   Carrello e checkout sono a blocchi e usano un notice diverso da
   quello legacy: .wc-block-components-notice-banner, che il tema non
   copriva affatto. Restava il default WooCommerce — fondo rosa #fff0f0,
   bordo #cc1818, angoli arrotondati e icona tonda — fuori dal
   linguaggio del sito e con un rosso che non e' quello del brand.
   Qui prende lo stesso trattamento dei notice legacy: bianco, filetto a
   sinistra, spigoli vivi.
   ------------------------------------------------------------- */

.wc-block-components-notice-banner {
  background-color: var(--color-white) !important;
  border: none !important;
  border-left: 3px solid var(--color-text) !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text) !important;
}

.wc-block-components-notice-banner.is-error   { border-left-color: var(--color-accent) !important; }
.wc-block-components-notice-banner.is-warning { border-left-color: var(--color-muted) !important; }
.wc-block-components-notice-banner.is-success { border-left-color: var(--color-text) !important; }

/* L'icona tonda di WooCommerce non c'e' negli altri notice del sito */
.wc-block-components-notice-banner > svg { display: none !important; }

/* Errori di validazione in linea (es. codice sconto non valido) */
.wc-block-components-validation-error {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-accent);
}

/* ── Checkout a blocchi: passo uniforme fra le spunte ────────────────────
   Il blocco della nota ordine porta 24px di margine sotto, che sommati ai
   16px della riga successiva davano 40px fra "nota" e "regalo" contro i
   16px fra "regalo" e "newsletter". Azzerato il margine, il passo e' uno. */
/* Due classi: WooCommerce stacca i 24px con
   `.wc-block-components-form .wc-block-components-checkout-step`, e un
   selettore a classe singola perdeva il confronto. */
/* Solo il blocco della nota: i campi aggiuntivi ora stanno in mezzo alla
   pagina, subito sopra «Opzioni di spedizione», e senza margine il titolo
   della sezione successiva si incollava all'ultima spunta. */
.wc-block-components-form .wp-block-woocommerce-checkout-order-note-block {
  margin-bottom: 0;
}

/* Sul sito EN la nota viene dopo i campi aggiuntivi: senza il margine del
   blocco la sua riga si attaccava alla precedente. Il selettore adiacente
   colpisce solo quel caso, l'italiano resta invariato. */
.wp-block-woocommerce-checkout-additional-information-block + .wp-block-woocommerce-checkout-order-note-block .wc-block-checkout__add-note {
  margin-top: 16px;
}

/* ── Checkout a blocchi: titoli di gruppo nei campi aggiuntivi ───────────
   La sezione tiene insieme i dati per la fattura, le opzioni dell'ordine e il
   consenso newsletter: senza una didascalia la spunta del regalo si leggeva
   come il sesto campo della fattura. I titoli li inserisce checkout-regalo.js,
   perche' il blocco e' reso da React e non passa da PHP. */
.wc-block-checkout__order-fields .cru-field-group {
  margin: 28px 0 12px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-black);
  letter-spacing: 0;
}

.wc-block-checkout__order-fields .cru-field-group:first-child {
  margin-top: 0;
}

/* ── Checkout a blocchi: un solo peso per le righe di scelta ─────────────
   WooCommerce stampa l'etichetta della spedizione in semibold e quelle dei
   pagamenti in regular: due elenchi identici per forma, uno piu' scuro
   dell'altro. Il prezzo accanto e' gia' in regular, quindi dentro la stessa
   riga convivevano due pesi. */
.wc-block-components-shipping-rates-control .wc-block-components-radio-control__label {
  font-weight: 400;
}

/* ── Checkout a blocchi: via l'icona generica del gateway Nexi ───────────
   Il plugin antepone ai loghi dei circuiti una carta di credito grigia
   (`cartasi-x-pay/assets/images/card.png`): due grafiche diverse sulla stessa
   riga, e la prima e' anche la piu' brutta. Nel checkout classico basta il
   filtro su woocommerce_gateway_icon, ma qui il dato arriva al browser dentro
   wcSettings.paymentMethodData, che nessun filtro PHP tocca. */
.wc-block-components-payment-method-icon[src*="cartasi-x-pay"] {
  display: none;
}

/* ── Checkout a blocchi: via il filetto sopra i termini ──────────────────
   WooCommerce stacca la riga dei termini con un bordo a tutta larghezza
   (.wc-block-checkout__terms--with-separator). Nel resto del checkout non
   c'e' un solo filetto, e quello restava appeso sotto l'ultima spunta come
   se fosse un errore di resa. Lo spazio lo tiene il margine. */
/* Due classi come nel foglio di WooCommerce: a parita' di peso vince l'ultimo
   caricato, e il nostro viene dopo. Con una classe sola perdeva il confronto. */
.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
  border-top: 0;
  padding-top: 0;
  margin-top: 24px;
}

/* Il campo del messaggio di auguri e la riga "no ricevuta" restano nascosti
   finche' la spunta regalo non e' attiva. La visibilita' era affidata solo al
   JS, che scrive uno style inline: al primo re-render di React il campo
   ricompariva con la spunta ancora vuota (visto sul checkout EN). Qui la
   regola sopravvive a ogni re-render. */
.wc-block-components-address-form:has(.wc-block-components-address-form__caviar-is_regalo input:not(:checked)) .wc-block-components-address-form__caviar-regalo_message,
.wc-block-components-address-form:has(.wc-block-components-address-form__caviar-is_regalo input:not(:checked)) .regalo-no-receipt {
  display: none;
}