/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/




/* ==================================================
   UTILITIES
================================================== */

/* Puntatore */
.pointer {
  cursor: pointer;
}

/* Modifica grassetto */
strong,
b {
  font-variation-settings: "wght" 600;
}



/* Live blinking */
.blinking-text-live {
  animation: blinker 2s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}


input:focus,
select:focus,
textarea:focus {
  outline: #c06c50;
  border-color: #c06c50;
}





/* ==================================================
   GESTIONE MENU AREE
================================================== */

.brxe-nav-menu .bricks-nav-menu a {
  display: inline-block;
  padding: 0.6em 1em 1.6em; /* spazio per testo sotto */
  position: relative;
  background: none;
}

/* ==================================================
   COLORI TESTO FISSI PER AREA
================================================== */

.brxe-nav-menu .area-terra > a {
  color: #c06c50;
}

.brxe-nav-menu .area-uomo > a {
  color: #606d60;
}

.brxe-nav-menu .area-cielo > a {
  color: #4a7fa7;
}

/* Mantiene il colore invariato */

.brxe-nav-menu .area-terra > a:hover,
.brxe-nav-menu .area-terra.current-menu-item > a {
  color: #c06c50;
}

.brxe-nav-menu .area-uomo > a:hover,
.brxe-nav-menu .area-uomo.current-menu-item > a {
  color: #606d60;
}

.brxe-nav-menu .area-cielo > a:hover,
.brxe-nav-menu .area-cielo.current-menu-item > a {
  color: #4a7fa7;
}

/* ==================================================
   SFONDO BIANCO SULLO STATO ATTIVO
================================================== */

.brxe-nav-menu .bricks-nav-menu li.current-menu-item > a {
  background-color: #ffffff;
}

/* ==================================================
   LINETTA (delay SOLO in uscita)
================================================== */

.brxe-nav-menu .bricks-nav-menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: 60%;
  height: 2px;
  background-color: currentColor;
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transition-delay: 0.2s; /* ⬅️ delay SOLO quando esce */
}

/* Hover / Active: linea immediata */

.brxe-nav-menu .bricks-nav-menu a:hover::after,
.brxe-nav-menu .bricks-nav-menu li.current-menu-item > a::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
  transition-delay: 0s;
}

/* ==================================================
   TESTO SOTTO LABEL (delay SOLO in entrata)
================================================== */

.brxe-nav-menu .bricks-nav-menu a::before {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 0.65em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: currentColor;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.25s ease;
  transition-delay: 0s; /* ⬅️ esce subito */
}

/* Testi per area */

.brxe-nav-menu .area-terra > a::before {
  content: "nutrimento";
}

.brxe-nav-menu .area-uomo > a::before {
  content: "energia";
}

.brxe-nav-menu .area-cielo > a::before {
  content: "evoluzione";
}

/* Hover + Active: testo con delay */

.brxe-nav-menu .bricks-nav-menu a:hover::before,
.brxe-nav-menu .bricks-nav-menu li.current-menu-item > a::before {
  opacity: 1;
  transition-delay: 0.2s; /* ⬅️ entra dopo la linea */
}




/* EFFETTO ZOOM su elemento diverso */
/* Wrapper comune: applicalo all’item/card che fa da trigger */
.zoom-trigger {
  position: relative;
  isolation: isolate;

  /* DEFAULT IMG */
  --zoom-img-scale: 1.05;                 /* livello di zoom */
  --zoom-img-duration: .3s;              /* velocità */
  --zoom-img-ease: cubic-bezier(.22,.61,.36,1);
  --zoom-img-origin: center;

  /* DEFAULT BG */
  --zoom-bg-pre-scale: 1.02;              /* leggero pre-scale anti-bordi */
  --zoom-bg-scale: 1.07;                  /* livello di zoom */
  --zoom-bg-duration: .55s;               /* velocità */
  --zoom-bg-ease: cubic-bezier(.22,.61,.36,1);
  --zoom-bg-origin: center;
}

/* Clip pulito (border radius, no sbordi) – opzionale */
.zoom-clip {
  overflow: hidden;
  border-radius: 12px;
}

/* ---------- IMG ---------- */
.zoom-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: var(--zoom-img-origin);
  transition: transform var(--zoom-img-duration) var(--zoom-img-ease);
  will-change: transform;
  backface-visibility: hidden;
}
.zoom-trigger:hover .zoom-img,
.zoom-trigger:focus-within .zoom-img,
.zoom-trigger:active .zoom-img {
  transform: scale(var(--zoom-img-scale));
}

/* ---------- BACKGROUND (via ::before) ---------- */
.zoom-bg {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;                 /* base */
  border-radius: inherit;
}
/* layer che zooma */
.zoom-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;                    /* clona il background */
  border-radius: inherit;
  transform-origin: var(--zoom-bg-origin);
  transform: scale(var(--zoom-bg-pre-scale));
  transition: transform var(--zoom-bg-duration) var(--zoom-bg-ease);
  will-change: transform;
  z-index: 0;
}
/* contenuto sopra, se presente */
.zoom-bg > * { position: relative; z-index: 1; }

.zoom-trigger:hover .zoom-bg::before,
.zoom-trigger:focus-within .zoom-bg::before,
.zoom-trigger:active .zoom-bg::before {
  transform: scale(var(--zoom-bg-scale));
}

/* Accessibilità */
@media (prefers-reduced-motion: reduce) {
  .zoom-img,
  .zoom-bg::before { transition: none; }
}
/* FINE EFFETTO ZOOM su elemento diverso */


/* EFFETTO ZOOM su stesso elemento */
/* Da assegnare all’elemento con background in Bricks */
.bg-zoom2 {
  position: relative;
  overflow: hidden;
  border-radius: 16px;                 /* clip pulito */
  isolation: isolate;                  /* evita mixing z-index esterni */
}

/* Il trucco: il background dell’elemento viene “ereditato” dal ::before */
.bg-zoom2::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;                 /* copia background-image/pos/size */
  background-clip: padding-box;
  border-radius: inherit;
  transform: scale(1.02);              /* leggero pre-scale per evitare bordi */
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  z-index: 0;
}

/* Il contenuto resta sopra, non viene scalato */
.bg-zoom2 > * {
  position: relative;
  z-index: 1;
}

/* Hover / tap */
.bg-zoom2:hover::before,
.bg-zoom2:active::before {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .bg-zoom2::before { transition: none; }
}
/* FINE EFFETTO ZOOM su stesso elemento */




/* EFFETTO SOTTOLINEATO su elemento diverso */
:root {
  --u-thickness: 2px;
  --u-offset: 2px;
  --u-fade: .2s; /* durata fade */
}

/* Applica al testo da sottolineare */
.hover-underline-fade {
  text-decoration: underline;
  text-decoration-thickness: var(--u-thickness);
  text-underline-offset: var(--u-offset);
  text-decoration-color: transparent;
  transition: text-decoration-color var(--u-fade) linear, color var(--u-fade) linear;
}

/* Trigger: hover sulla div genitore (o focus tastiera interno) */
.hover-trigger:hover .hover-underline-fade,
.hover-trigger:focus-within .hover-underline-fade {
  text-decoration-color: currentColor; /* fade-in */
}
/* FINE EFFETTO SOTTOLINEATO su elemento diverso */






/* =========================================
   Checkbox + label multiline – allineamento top
========================================= */

.options-wrapper li {
  display: flex;
  align-items: flex-start; /* ALLINEAMENTO PRIMA RIGA */
  gap: 2px !important;
}

.options-wrapper input[type="checkbox"],
.options-wrapper input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  margin-top: -3px !important; /* micro-correzione ottica */
  flex-shrink: 0;
}

.options-wrapper label {
  line-height: 1.4;
  cursor: pointer;
}


/* =========================================
   Sidecart – Layout corretto
========================================= */

.brx-offcanvas-inner {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* wrapper minicart */
.bu-minicart-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* area scrollabile */
.sidecart-top {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* footer fisso (totali, CTA) */
.sidecart-bottom {
  flex-shrink: 0;
}

/* =========================================
   FIX FINALE WRAPPER BU MINI CART
========================================= */

.brxe-bu-mini-cart,
.brxe-bu-mini-cart > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}