/* ==========================================================================
   OFFERTE D'ORO — seppia-styles.css
   1)  HEADER effetto scroll        -> SOLO su .od-hero-header
   1b) MENU A DISCESA (mobile)
   1c) HAMBURGER
   2)  HOME: categorie / pezzi unici / marchi
   3)  CARD CATEGORIA .jes-div-cat
   4)  TAB "Guida alle misure" (solo anelli)
   ========================================================================== */


/* ==========================================================================
   1) HEADER — trasparente in cima, bianco allo scroll, swap logo
   ========================================================================== */

/* ---- SFONDO ---- */
.od-hero-header {
  background-color: transparent !important;
  transition: background-color .35s ease, box-shadow .35s ease;
}

body.is-scrolled .od-hero-header {
  background-color: #fff !important;
  box-shadow: 0 6px 24px rgba(20, 15, 10, .08);
}

/* ---- LOGO ---- */
.od-hero-header .logo-default {
  display: block !important;
}

.od-hero-header .logo-scrolled {
  display: none !important;
}

body.is-scrolled .od-hero-header .logo-default {
  display: none !important;
}

body.is-scrolled .od-hero-header .logo-scrolled {
  display: block !important;
}

/* ---- TOPBAR ---- */
body.is-scrolled .od-hero-header .od-topbar {
  display: none !important;
}

/* ---- MENU PRINCIPALE (desktop, orizzontale) — NON tocca il dropdown ---- */
.od-hero-header .elementor-nav-menu--main .elementor-item,
.od-hero-header .elementor-nav-menu--main .sub-arrow {
  color: #f8f5f0 !important;
  fill: #f8f5f0 !important;
}

body.is-scrolled .od-hero-header .elementor-nav-menu--main .elementor-item,
body.is-scrolled .od-hero-header .elementor-nav-menu--main .sub-arrow {
  color: #262525 !important;
  fill: #262525 !important;
}

@media (prefers-reduced-motion: reduce) {

  .od-hero-header,
  .od-hero-header * {
    transition: none !important;
  }
}


/* ==========================================================================
   1b) MENU A DISCESA (mobile/tablet) — voci leggibili + hover/attivo
   ========================================================================== */

/* BASE: scuro, leggibile subito sul pannello bianco (anche senza scroll) */
.od-hero-header .elementor-nav-menu--dropdown a.elementor-item {
  color: #262525 !important;
}

/* HOVER / FOCUS: colore globale come header normale */
.od-hero-header .elementor-nav-menu--dropdown a.elementor-item:hover,
.od-hero-header .elementor-nav-menu--dropdown a.elementor-item:focus {
  color: var(--e-global-color-d6e8827) !important;
}

/* VOCE ATTIVA (pagina corrente): accent globale */
.od-hero-header .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.od-hero-header .elementor-nav-menu--dropdown a.elementor-item-active {
  color: var(--e-global-color-accent) !important;
}


/* ==========================================================================
   1c) HAMBURGER — cima: chiaro · scroll: accent · hover: rosso scuro · aperto: scuro
   ========================================================================== */

/* CIMA (non scrollato) = chiaro */
.od-hero-header .elementor-menu-toggle,
.od-hero-header .elementor-menu-toggle i,
.od-hero-header .elementor-menu-toggle svg,
.od-hero-header .elementor-menu-toggle svg path {
  color: #f8f5f0 !important;
  fill: #f8f5f0 !important;
}

/* SCROLL = accent globale */
body.is-scrolled .od-hero-header .elementor-menu-toggle,
body.is-scrolled .od-hero-header .elementor-menu-toggle i,
body.is-scrolled .od-hero-header .elementor-menu-toggle svg,
body.is-scrolled .od-hero-header .elementor-menu-toggle svg path {
  color: var(--e-global-color-accent) !important;
  fill: var(--e-global-color-accent) !important;
}

/* HOVER = rosso scuro (solo dispositivi con mouse) */
@media (hover: hover) {

  .od-hero-header .elementor-menu-toggle:hover,
  .od-hero-header .elementor-menu-toggle:hover i,
  .od-hero-header .elementor-menu-toggle:hover svg,
  .od-hero-header .elementor-menu-toggle:hover svg path {
    color: #A8141D !important;
    fill: #A8141D !important;
  }
}

/* MENU APERTO (la X) = scuro */
.od-hero-header .elementor-menu-toggle.elementor-active,
.od-hero-header .elementor-menu-toggle.elementor-active i,
.od-hero-header .elementor-menu-toggle.elementor-active svg,
.od-hero-header .elementor-menu-toggle.elementor-active svg path {
  color: #262525 !important;
  fill: #262525 !important;
}


/* ==========================================================================
   2) HOME — categorie / pezzi unici / marchi
   ========================================================================== */

/* --- Categorie (due immagini) --- */
.od-cat {
  position: relative;
  overflow: hidden;
}

.od-cat .od-cat-img,
.od-cat .od-cat-hover {
  position: absolute !important;
  inset: 0;
  margin: 0 !important;
}

.od-cat .od-cat-img img,
.od-cat .od-cat-hover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.od-cat .od-cat-hover {
  opacity: 0;
  z-index: 1;
  transition: opacity 0.5s ease;
}

.od-cat:hover .od-cat-hover {
  opacity: 1;
}

.od-cat .od-cat-img img {
  transition: transform 0.6s ease;
}

.od-cat:hover .od-cat-img img {
  transform: scale(1.05);
}

.od-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(20, 14, 9, 0.72), rgba(20, 14, 9, 0) 55%);
}

.od-cat .od-cat-label {
  position: absolute !important;
  left: 20px;
  bottom: 18px;
  z-index: 3;
}

/* --- Pezzi unici (carosello) --- */
.od-track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  flex-wrap: nowrap !important;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.od-track::-webkit-scrollbar {
  display: none;
}

.od-track > * {
  scroll-snap-align: start;
  flex: 0 0 auto !important;
}

.od-prodimg {
  position: relative;
  overflow: hidden;
}

.od-prodimg img {
  transition: transform 0.6s ease;
}

.od-prodimg:hover img {
  transform: scale(1.05);
}

.od-prodtag {
  position: absolute !important;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* --- Marchi (nastro) --- */
.od-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.od-marquee .od-marquee-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  align-items: center;
  animation: od-scroll 48s linear infinite;
}

.od-marquee:hover .od-marquee-track {
  animation-play-state: paused;
}

.od-marquee-track > * {
  flex: 0 0 auto !important;
}

@keyframes od-scroll {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {

  .od-marquee .od-marquee-track {
    animation: none !important;
  }

  .od-track {
    scroll-behavior: auto;
  }

  .od-cat *,
  .od-prodimg img {
    transition: none !important;
  }
}


/* ==========================================================================
   3) CARD CATEGORIA .jes-div-cat — zoom + crossfade + colore testi hover
   ========================================================================== */
.jes-div-cat {
  position: relative !important;
  overflow: hidden !important;
}

.jes-div-cat > .jes-bg-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  transform-origin: center center;
  transition: transform 0.8s ease, opacity 0.6s ease !important;
  will-change: transform, opacity;
}

.jes-bg-a {
  z-index: 0;
  opacity: 1;
}

.jes-bg-b {
  z-index: 0;
  opacity: 0;
}

.jes-div-cat > *:not(.jes-bg-layer) {
  position: relative;
  z-index: 2;
}

.jes-title-cat .elementor-heading-title {
  transition: color 0.3s ease;
}

.jes-div-cat:hover .jes-title-cat .elementor-heading-title {
  color: #D7202A !important;
}

.jes-body-cat p {
  transition: color 0.3s ease;
}

.jes-div-cat:hover .jes-body-cat p {
  color: #49453F !important;
}
/* Overlay leggibilità sulle card categoria — leggero, e assente in hover */
.jes-div-cat::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;                 /* foto z-index:0 · overlay z-index:1 · testi z-index:2 */
  pointer-events:none;
  /* gradiente leggero: scuro solo in fondo, dove stanno i testi */
  background:linear-gradient(to top, rgba(20,14,9,.45) 0%, rgba(20,14,9,.08) 40%, rgba(20,14,9,0) 70%);
  transition:opacity .4s ease;
}

/* in hover: overlay via (i testi restano leggibili sul cambio foto) */
.jes-div-cat:hover::after{
  opacity:0;
}



/* ==========================================================================
   4) TAB "Guida alle misure" — solo prodotti categoria "anelli"
   ========================================================================== */
.e-n-tabs .e-n-tab-title[aria-controls="e-n-tab-content-2428872123"] {
  display: none !important;
}

body.prodotto-anelli .e-n-tabs .e-n-tab-title[aria-controls="e-n-tab-content-2428872123"] {
  display: flex !important;
}

#e-n-tab-content-2428872123 {
  visibility: hidden !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.prodotto-anelli #e-n-tab-content-2428872123 {
  visibility: visible !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
}



/* ============================================================
   Linea continua DIETRO i 3 box (livello icone)
   ============================================================ */

.od-proc-steps,
.od-proc-steps > .e-con-inner {
  position: relative;
}

/* la linea, mandata DIETRO */
.od-proc-steps::before,
.od-proc-steps > .e-con-inner::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;                 /* altezza ~ centro icone: regola se serve */
  height: 2px;
  background: #E7DECD;
  z-index: 0;
  pointer-events: none;
}

/* i BOX davanti alla linea (questa è la parte che mancava) */
.od-proc-steps > *,
.od-proc-steps > .e-con-inner > * {
  position: relative;
  z-index: 2 !important;     /* forza i box sopra la linea */
}



/*ninja form*/

.nf-form-fields-required {
    display: none;
}

/*end ninja form*/



/* ==========================================================================
   FAQ — WIDGET ELEMENTOR + SHORTCODE ACF
   ========================================================================== */


/* ==========================================================================
   1) WIDGET ACCORDION ELEMENTOR
   Classe CSS da assegnare al widget: as-faq-elementor
   ========================================================================== */


/* Singola voce */
.as-faq-elementor .elementor-accordion-item,
.as-faq-elementor .e-n-accordion-item {
  overflow: hidden !important;

  border: 1px solid #F0E9DC !important;
  border-radius: 10px !important;

  transition: border-color 0.2s ease !important;
}


/* Elementor classico aggiunge un bordo tra le voci */
.as-faq-elementor
.elementor-accordion-item
+
.elementor-accordion-item {
  border-top: 1px solid #F0E9DC !important;
}


/* Titolo domanda */
.as-faq-elementor .elementor-tab-title,
.as-faq-elementor .e-n-accordion-item-title {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 16px !important;

  padding: 20px 24px !important;

  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;

  cursor: pointer !important;
  list-style: none !important;

  font-family:
    var(--e-global-typography-2076ec1-font-family),
    Sans-serif !important;

  font-size:
    var(--e-global-typography-2076ec1-font-size) !important;

  font-weight:
    var(--e-global-typography-2076ec1-font-weight) !important;

  line-height:
    var(--e-global-typography-2076ec1-line-height) !important;

  color:
    var(--e-global-color-primary) !important;

  user-select: none !important;
}


/* Testo domanda */
.as-faq-elementor .elementor-accordion-title,
.as-faq-elementor .e-n-accordion-item-title-text {
  flex: 1 1 auto !important;

  min-width: 0 !important;

  font: inherit !important;
  color: inherit !important;

  text-decoration: none !important;
}


/* Risposta Accordion classico */
.as-faq-elementor .elementor-tab-content {
  overflow: hidden !important;

  padding: 0 24px 20px !important;

  background: transparent !important;

  border: 0 !important;

  font-family:
    var(--e-global-typography-text-font-family),
    Sans-serif !important;

  font-size:
    var(--e-global-typography-text-font-size) !important;

  font-weight:
    var(--e-global-typography-text-font-weight) !important;

  line-height:
    var(--e-global-typography-text-line-height) !important;

  color:
    var(--e-global-color-text) !important;
}


/* Risposta Nested Accordion */
.as-faq-elementor
.e-n-accordion-item
>
.e-con,

.as-faq-elementor
.e-n-accordion-item
>
.elementor-element {
  padding: 0 24px 20px !important;
}


/* Paragrafi */
.as-faq-elementor .elementor-tab-content p,
.as-faq-elementor .e-n-accordion-item p {
  margin: 0 0 8px !important;
}

.as-faq-elementor .elementor-tab-content p:last-child,
.as-faq-elementor .e-n-accordion-item p:last-child {
  margin-bottom: 0 !important;
}



/* ==========================================================================
   2) FAQ DINAMICHE ACF
   Shortcode: [seppia_faq]
   ========================================================================== */


/* Wrapper generale */
.od-faq {
  display: flex;
  flex-direction: column;

  gap: 10px;

  width: 100%;
  max-width: 100%;
  min-width: 0;
}


/* ==========================================================================
   SINGOLA FAQ
   ========================================================================== */

.od-faq-item {
  width: 100%;
  max-width: 100%;
  min-width: 0;

  overflow: hidden;

  box-sizing: border-box;

  border: 1px solid #F0E9DC;
  border-radius: 10px;

  background: transparent;
}


/* ==========================================================================
   DOMANDA
   Reset completo per evitare gli stili globali dei button Elementor
   ========================================================================== */

.od-faq .od-faq-question,
.od-faq .od-faq-question:hover,
.od-faq .od-faq-question:focus,
.od-faq .od-faq-question:active,
.od-faq .od-faq-question:visited {

  -webkit-appearance: none !important;
  appearance: none !important;

  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  flex-direction: row !important;

  gap: 16px !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: auto !important;
  min-height: 0 !important;

  box-sizing: border-box !important;

  margin: 0 !important;

  /* stesso padding del tuo accordion Elementor */
  padding: 20px 24px !important;

  border: 0 !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;

  /*
   * IMPORTANTISSIMO:
   * annulla il fucsia del button globale Elementor/theme
   */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  outline: 0 !important;

  color:
    var(--e-global-color-primary) !important;

  font-family:
    var(--e-global-typography-2076ec1-font-family),
    Sans-serif !important;

  font-size:
    var(--e-global-typography-2076ec1-font-size) !important;

  font-weight:
    var(--e-global-typography-2076ec1-font-weight) !important;

  line-height:
    var(--e-global-typography-2076ec1-line-height) !important;

  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;

  cursor: pointer !important;

  user-select: none !important;

  transition: none !important;
}


/*
 * Annulla eventuali background applicati dal tema
 * agli elementi interni del bottone
 */
.od-faq .od-faq-question *,
.od-faq .od-faq-question:hover *,
.od-faq .od-faq-question:focus *,
.od-faq .od-faq-question:active * {
  background: transparent !important;
  background-color: transparent !important;

  box-shadow: none !important;
}


/* ==========================================================================
   TESTO DOMANDA
   ========================================================================== */

.od-faq-question-text {
  flex: 1 1 auto !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  font: inherit !important;
  color: inherit !important;

  background: transparent !important;

  text-decoration: none !important;
}


/* ==========================================================================
   ICONA + / -
   ========================================================================== */

.od-faq-icon {
  position: relative !important;

  display: block !important;

  flex: 0 0 15px !important;

  width: 15px !important;
  height: 15px !important;

  min-width: 15px !important;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--e-global-color-accent) !important;

  background: transparent !important;
}


/* Linea orizzontale */
.od-faq-icon::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 15px;
  height: 2px;

  background-color: currentColor;

  transform:
    translate(-50%, -50%);
}


/* Linea verticale */
.od-faq-icon::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 2px;
  height: 15px;

  background-color: currentColor;

  transform:
    translate(-50%, -50%)
    scaleY(1);

  transform-origin: center;

  opacity: 1;

  transition:
    transform 0.35s ease,
    opacity 0.20s ease;
}


/* Aperta = resta solamente il meno */
.od-faq-item.is-open
.od-faq-icon::after {
  transform:
    translate(-50%, -50%)
    scaleY(0);

  opacity: 0;
}


/* ==========================================================================
   PANNELLO RISPOSTA
   ========================================================================== */

.od-faq-panel {
  display: grid;

  grid-template-rows: 0fr;

  width: 100%;

  opacity: 0;

  background: transparent;

  border: 0;

  transition:
    grid-template-rows 0.4s
      cubic-bezier(.4, 0, .2, 1),
    opacity 0.25s ease;
}


/* Aperto */
.od-faq-item.is-open
.od-faq-panel {
  grid-template-rows: 1fr;

  opacity: 1;
}


/* Necessario all'animazione */
.od-faq-panel-inner {
  min-height: 0;

  overflow: hidden;

  background: transparent;
}


/* ==========================================================================
   RISPOSTA
   ========================================================================== */

.od-faq-answer {
  width: 100%;

  box-sizing: border-box;

  padding:
    0
    24px
    20px;

  background: transparent;

  font-family:
    var(--e-global-typography-text-font-family),
    Sans-serif;

  font-size:
    var(--e-global-typography-text-font-size);

  font-weight:
    var(--e-global-typography-text-font-weight);

  line-height:
    var(--e-global-typography-text-line-height);

  color:
    var(--e-global-color-text);
}


/* Paragrafi WYSIWYG */
.od-faq-answer p {
  margin: 0 0 8px;
}

.od-faq-answer p:last-child {
  margin-bottom: 0;
}


/* Titoli eventualmente inseriti nel WYSIWYG */
.od-faq-answer h1,
.od-faq-answer h2,
.od-faq-answer h3,
.od-faq-answer h4,
.od-faq-answer h5,
.od-faq-answer h6 {
  margin-top: 0;
}


/* Liste */
.od-faq-answer ul,
.od-faq-answer ol {
  margin-top: 8px;
  margin-bottom: 8px;

  padding-left: 20px;
}


/* Link */
.od-faq-answer a {
  color:
    var(--e-global-color-accent);

  text-decoration: underline;
}


/* ==========================================================================
   FOCUS ACCESSIBILE
   ========================================================================== */

.od-faq .od-faq-question:focus-visible {
  outline:
    2px solid
    var(--e-global-color-accent) !important;

  outline-offset: -2px !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

  .od-faq .od-faq-question,
  .od-faq .od-faq-question:hover,
  .od-faq .od-faq-question:focus,
  .od-faq .od-faq-question:active {

    padding:
      20px
      20px !important;
  }


  .od-faq-answer {
    padding:
      0
      20px
      20px;
  }

}


/* ==========================================================================
   RIDUZIONE ANIMAZIONI
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .od-faq-panel,
  .od-faq-icon::after {
    transition: none !important;
  }

}

.search-filter-component-combobox-base__listbox-option--selected {
  color: white !important; 
  font-weight: 700 !important;
  background: #D7202A !important;
}

.sf-filters-desktop-container,
.sf-filters-mobile-container 
{
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.sf-filters-desktop-container h2,
.sf-filters-mobile-container h2
{
  font-family: var(--e-global-typography-07f24b9-font-family), Sans-serif;
  font-size: var(--e-global-typography-07f24b9-font-size);
  font-weight: var(--e-global-typography-07f24b9-font-weight);
  line-height: var(--e-global-typography-07f24b9-line-height);
}

li.container-megamenu-catalogo ul.sub-menu li a {
  color: #262525 !important;
  font-family: var(--e-global-typography-b9ff509-font-family), Sans-serif !important;
  font-size: var(--e-global-typography-b9ff509-font-size) !important;
  font-weight: var(--e-global-typography-b9ff509-font-weight) !important;
  text-transform: uppercase !important;
}
li.container-megamenu-catalogo ul.sub-menu li a.elementor-item-active,
li.container-megamenu-catalogo ul.sub-menu li a:hover {
  color: #D7202A !important;
  text-decoration: underline !important;
  text-decoration-color: #D7202A !important;
}


/* ==========================================================================
   5) RICERCA MOBILE FULL SCREEN
   Widget Elementor Search
   Classe da assegnare a ENTRAMBI i widget: od-search-mobile
   ========================================================================== */

@media (max-width: 767px) {

  /* Widget */
  .od-search-mobile {
    width: auto !important;
  }

  /* ------------------------------------------------------------------------
     LENTE CUSTOM NELL'HEADER
     ------------------------------------------------------------------------ */

  .od-search-mobile .od-search-trigger,
  .od-search-mobile .od-search-trigger:hover,
  .od-search-mobile .od-search-trigger:focus,
  .od-search-mobile .od-search-trigger:active {
    -webkit-appearance: none !important;
    appearance: none !important;

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

    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    outline: 0 !important;

    color: #262525 !important;
    cursor: pointer !important;
  }

  .od-search-mobile .od-search-trigger svg {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    color: #262525 !important;
    fill: none !important;
    stroke: currentColor !important;
  }

  .od-search-mobile .od-search-trigger svg * {
    fill: none !important;
    stroke: currentColor !important;
  }

  /* Ricerca chiusa */
  .od-search-mobile:not(.is-open) .e-search {
    display: none !important;
  }

  /* Ricerca aperta */
  .od-search-mobile.is-open .od-search-trigger {
    display: none !important;
  }

  .od-search-mobile.is-open .e-search {
    display: block !important;

    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding:
      max(32px, env(safe-area-inset-top))
      28px
      max(28px, env(safe-area-inset-bottom))
      28px !important;

    box-sizing: border-box !important;

    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    z-index: 9999999 !important;
  }

  /* ------------------------------------------------------------------------
     FORM
     ------------------------------------------------------------------------ */

  .od-search-mobile.is-open .e-search form,
  .od-search-mobile.is-open form.e-search-form {
    position: relative !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 16px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
  }

  /* ------------------------------------------------------------------------
     FRECCIA INDIETRO CUSTOM
     ------------------------------------------------------------------------ */

  .od-search-mobile .od-search-back,
  .od-search-mobile .od-search-back:hover,
  .od-search-mobile .od-search-back:focus,
  .od-search-mobile .od-search-back:active {
    -webkit-appearance: none !important;
    appearance: none !important;

    flex: 0 0 44px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
    outline: 0 !important;

    color: #262525 !important;
    cursor: pointer !important;
  }

  .od-search-mobile .od-search-back svg {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    color: #262525 !important;
    fill: none !important;
    stroke: currentColor !important;
  }

  .od-search-mobile .od-search-back svg * {
    fill: none !important;
    stroke: currentColor !important;
  }

  /* ------------------------------------------------------------------------
     IMPORTANTE:
     Elementor genera una .e-search-label per l'icona della ricerca.
     È questa che può restare sopra al placeholder anche se il submit è nascosto.
     ------------------------------------------------------------------------ */

  .od-search-mobile.is-open .e-search-label,
  .od-search-mobile.is-open .e-search-label::before,
  .od-search-mobile.is-open .e-search-label::after {
    display: none !important;
    content: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    background: none !important;
    border: 0 !important;

    color: transparent !important;
    box-shadow: none !important;
  }

  /* ------------------------------------------------------------------------
     WRAPPER INPUT
     ------------------------------------------------------------------------ */

  .od-search-mobile.is-open .e-search-input-wrapper {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
  }

  /* ------------------------------------------------------------------------
     INPUT
     ------------------------------------------------------------------------ */

  .od-search-mobile.is-open .e-search-input,
  .od-search-mobile.is-open .e-search-input:hover,
  .od-search-mobile.is-open .e-search-input:focus,
  .od-search-mobile.is-open .e-search-input:active {
    -webkit-appearance: none !important;
    appearance: none !important;

    display: block !important;

    width: 100% !important;
    height: 48px !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;

    color: #262525 !important;
    caret-color: #262525 !important;
  }

  .od-search-mobile.is-open .e-search-input::placeholder {
    color: #b8b8b8 !important;
    opacity: 1 !important;
  }

  /* Safari / iOS: rimuove decorazioni native del campo search */
  .od-search-mobile .e-search-input::-webkit-search-decoration,
  .od-search-mobile .e-search-input::-webkit-search-cancel-button,
  .od-search-mobile .e-search-input::-webkit-search-results-button,
  .od-search-mobile .e-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     NASCONDE LA LENTE SUBMIT ORIGINALE ELEMENTOR
     ------------------------------------------------------------------------ */

  .od-search-mobile.is-open .e-search-submit,
  .od-search-mobile.is-open .e-search-submit *,
  .od-search-mobile.is-open .e-search button[type="submit"],
  .od-search-mobile.is-open .e-search button[type="submit"] *,
  .od-search-mobile.is-open .e-search-form button[type="submit"],
  .od-search-mobile.is-open .e-search-form button[type="submit"] * {
    display: none !important;

    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    color: transparent !important;
    fill: transparent !important;
    stroke: transparent !important;

    box-shadow: none !important;
    overflow: hidden !important;
  }

  /* Nasconde le icone native Elementor dentro al campo */
  .od-search-mobile.is-open .e-search-input-wrapper > svg,
  .od-search-mobile.is-open .e-search-input-wrapper > i {
    display: none !important;
  }

  /* Niente pseudo-elementi residui */
  .od-search-mobile.is-open .e-search-input-wrapper::before,
  .od-search-mobile.is-open .e-search-input-wrapper::after,
  .od-search-mobile.is-open .e-search::before,
  .od-search-mobile.is-open .e-search::after {
    display: none !important;
    content: none !important;
  }

  /* ------------------------------------------------------------------------
     RESET BOTTONI: evita colori globali/fucsia
     ------------------------------------------------------------------------ */

  .od-search-mobile.is-open button,
  .od-search-mobile.is-open button:hover,
  .od-search-mobile.is-open button:focus,
  .od-search-mobile.is-open button:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* ------------------------------------------------------------------------
     RISULTATI LIVE EVENTUALI
     ------------------------------------------------------------------------ */

  .od-search-mobile.is-open .e-search-results-container {
    width: 100% !important;

    margin: 20px 0 0 !important;
    padding: 0 !important;

    background: #fff !important;
    background-color: #fff !important;

    border: 0 !important;
    box-shadow: none !important;
  }

  /* Blocca lo scroll della pagina sotto */
  body.od-search-open {
    overflow: hidden !important;
  }
}


/* Desktop: Elementor resta normale */
@media (min-width: 768px) {

  .od-search-mobile .od-search-trigger,
  .od-search-mobile .od-search-back {
    display: none !important;
  }

}

/* ==========================================================================
   Badge Prodotti Venduti (Fix Absolute per Elementor Loop)
   ========================================================================== */

/* 1. Rende il contenitore dell'immagine il riferimento per il posizionamento */
.grid-card-product-img {
	position: relative !important;
}

/* 2. Resetta i wrapper di Elementor attorno allo shortcode per evitare interferenze */
.grid-card-product-img .elementor-widget-shortcode,
.grid-card-product-img .elementor-shortcode {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* 3. Badge Base (Posizionato nell'angolo in basso a destra dell'immagine) */
.c-badge-venduto {
	position: absolute !important;
	bottom: 10px !important;
	right: 10px !important;
	top: auto !important;
	left: auto !important;
	z-index: 10;
	
	width: fit-content;
	margin: 0 !important;
	padding: 4px 12px;
	
	/* Tipografia */
	font-family: "Inter", sans-serif;
	font-size: 0.7vw;
	font-weight: 600;
	line-height: 1.4em;
	text-transform: uppercase;
	text-align: center;
	
	/* Stile visuale */
	color: var(--e-global-color-secondary);
	background-color: var(--e-global-color-d6e8827);
	border: 1px solid var(--e-global-color-d6e8827);
	border-radius: 2px;
	
	/* Permette il click sull'immagine sottostante */
	pointer-events: none;
}

/* 4. Modificatore: Single Product (Ripristina layout relativo standard) */
.c-badge-venduto--single {
	position: relative !important;
	bottom: auto !important;
	right: auto !important;
	z-index: auto;
	
	margin: 0 0 calc(var(--kit-widget-spacing, 0px) + 0px) 0 !important;
	padding: 8px 20px;
	font-size: 1vw;
	border-color: var(--e-global-color-secondary);
	pointer-events: auto;
}

/* Mobile Responsive (max-width: 767px) */
@media screen and (max-width: 767px) {
	.c-badge-venduto {
		font-size: 2.5vw;
		bottom: 8px !important;
		right: 8px !important;
	}
	
	.c-badge-venduto--single {
		font-size: 3.5vw;
	}
}