/* 
Theme Name: S99 Child
Theme URI: https://studio99.sm
Description: S99 Child is a child theme of S99, created by Studio99 team
Author: Studio99 Team
Author URI: https://studio99.sm
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/


/* =========================
   CUSTOM HEADER ANIMATED
========================= */

.s99-header {
  height: 120px;
  position: relative;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stato iniziale: completamente trasparente e senza blur.
   L'effetto vive nello pseudo-elemento (per non creare un containing block
   che romperebbe i figli "fixed", come il carrello). */
.s99-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
  z-index: -1;
  pointer-events: none;
  /* Transizione morbida verso lo stato "scrolled" */
  transition:
    background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stato "scrolled": altezza ridotta */
.s99-header.s99-header--scrolled {
  height: 100px !important;
  min-height: 100px !important;
}

/* Stato "scrolled": effetto liquid glass sfocato */
.s99-header.s99-header--scrolled::before {
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  /* Bordo interno sottile e ombra morbida per rinforzare l'effetto vetro */
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    0 8px 32px rgba(0, 0, 0, 0.08);
}

/* Header mobile: stato iniziale trasparente e senza blur */
.s99-header-mobile {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition:
    background 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header mobile: stato "scrolled" con liquid glass */
.s99-header-mobile.s99-header--scrolled {
  background: rgba(255, 255, 255, 0.15) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
}

/* =========================
   MODIFICA DEL PULSANTE “AGGIUNGERE QUANTITÀ”
========================= */

.quantity{
    position: relative;
    width: 120px;
  
    border: 1px solid #d9d9d9;
    background: #fff;
    overflow: hidden;
}


.quantity input.qty{
    width: 100% !important;
    min-width: 100% !important;
    height: 100%;
    border: none !important;
    background: transparent;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    padding: 0 35px !important;
    outline: none;
    box-shadow: none;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}


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


.quantity .qty-minus,
.quantity .qty-plus{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 300;
    color: #777;
    cursor: pointer;
    user-select: none;
    z-index: 5;
}


.quantity .qty-minus{
    left: 14px;
}

.quantity .qty-plus{
    right: 14px;
}


.quantity:hover{
    border-color: #fff;
    transition: .25s ease;
}

.quantity:hover .qty-minus,
.quantity:hover .qty-plus{
    color: #fff;
}