/* wsstickyaddtocart 1.2.1 — barra fissa "Aggiungi al carrello", solo telefoni */
.ws-satc { display: none; }

/* Telefoni in verticale e in orizzontale: stessa media query di front.js */
@media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
  .ws-satc {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1040; /* sotto i modali Bootstrap (1050) e il pannello del carrello */
    background: #fff;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
    /* prima riga per i browser senza env(): senza, scarterebbero tutto il padding */
    padding: 8px 12px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    transform: translateY(110%);
    -webkit-transform: translateY(110%);
    /* nascosta davvero: niente ombra visibile in fondo e niente tocchi a vuoto */
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .ws-satc.is-visible {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    visibility: visible;
    transition: transform .25s ease, visibility 0s linear 0s;
  }

  /* margini al posto di "gap", che nei flex manca su iOS prima della 14.5 */
  .ws-satc__inner { display: flex; align-items: center; }
  .ws-satc__img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex: 0 0 48px; margin-right: 10px; }
  .ws-satc__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; margin-right: 10px; }
  .ws-satc__name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--product-name-color, #222); }
  .ws-satc__price { font-size: 15px; font-weight: 700; color: var(--price-color, #222); }
  .ws-satc__btn {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 16px;
    white-space: nowrap;
    /* front.js copia i colori del pulsante originale; questi sono di riserva */
    background: #222;
    color: #fff;
    border: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .ws-satc__btn .material-icons { font-size: 20px; margin-right: 6px; }
  .ws-satc__btn.is-unavailable { opacity: .85; }

  /* Schermi molto stretti (iPhone SE prima serie, 320 px): solo l'icona del carrello */
  @media (max-width: 340px) {
    .ws-satc__btn { padding: 0 12px; }
    .ws-satc__btn .material-icons { margin-right: 0; }
    .ws-satc__label { display: none; }
  }

  /* Spazio in fondo alla pagina e widget flottanti (tema, whatsappchat, linguetta
     di cookiesplus) spostati sopra la barra. translateY funziona qualunque sia
     il loro "bottom". */
  body.ws-satc-on { padding-bottom: 72px; }
  #back-top,
  .whatsapp-badge,
  .whatsapp-bottomWidth,
  .float.float-floating,
  .whatsappchat.label-container,
  #cookiesplus-tab { transition: transform .25s ease; }
  body.ws-satc-on #back-top,
  body.ws-satc-on .whatsapp-badge:not(.top-right):not(.top-left),
  body.ws-satc-on .whatsapp-bottomWidth,
  body.ws-satc-on .float.float-floating:not(.float-left):not(.float-right),
  body.ws-satc-on .whatsappchat.label-container,
  body.ws-satc-on #cookiesplus-tab { transform: translateY(-72px); }

  /* 1.1.0, dalla 1.0.0 di casadibetty. Badge Trusted Shops: le classi interne sono casuali e il widget azzera i
     propri stili con !important. Si sposta l'elemento fisso dentro il contenitore (sul contenitore il transform
     romperebbe il position: fixed). */
  body.ws-satc-on [id^="trustbadge-container"] > div > div { transform: translateY(-72px) !important; }

  /* 1.2.1: icona del modulo a comparsa di Klaviyo (teaser, fisso in basso a destra con stile in linea e classe
     casuale "kl-teaser-…"): copriva il pulsante della barra (extensionlifestyle.it). */
  [class*="kl-teaser-"] { transition: transform .25s ease; }
  body.ws-satc-on [class*="kl-teaser-"] { transform: translateY(-72px) !important; }
}