/* ==========================================================================
   EleoLab — il carrello Snipcart vestito da noi
   Carrello Snipcart v3 (cdn.snipcart.com/themes/v3.x/default/).

   Due cose fa questo foglio:
     1. lo trasforma in un cassetto laterale che entra da destra e occupa il
        30% dello schermo, invece di coprire tutta la pagina;
     2. gli passa la palette, i font e lo stile dei pulsanti del sito, cosi
        sembra una stanza della casa e non la finestra di un altro sito.

   COME FUNZIONA IL CASSETTO
   Snipcart ha gia' la modalita' laterale: si accende con l'attributo
   data-config-modal-style="side" sul div #snipcart (gia' scritto in tutte le
   pagine). Da li' in poi il pannello entra da destra con la sua animazione e
   si chiude cliccando fuori. Qui sotto ne ritocchiamo larghezza, bordo e
   colori. Sotto i 768 px Snipcart torna da solo a tutta pagina: su un
   telefono e' l'unica cosa sensata.

   NOTA: le variabili vanno messe su #snipcart perche' il carrello viene
   costruito dentro quel div, quindi le eredita tutte.
   ========================================================================== */

#snipcart {
  /* ------------------------------------------------------------- testi -- */
  --color-default: #3A4045;          /* inchiostro */
  --color-alt: #4F565C;              /* ardesia */
  --color-icon: #4F565C;
  --color-inputLabel: #4F565C;
  --color-inputPlaceholder: #9AA0A5;
  --color-link: #D98236;             /* ocra */
  --color-link-hover: #4C6B5C;       /* salvia */
  --color-link-active: #4C6B5C;
  --color-error: #B2001F;            /* gotico */
  --color-success: #4C6B5C;

  /* ------------------------------------------------------------- fondi -- */
  --bgColor-default: #FAFAFA;        /* panna */
  --bgColor-alt: #F3F1ED;            /* ghiaccio */
  --bgColor-modal: #FAFAFA;
  --bgColor-modalVeil: rgba(58, 64, 69, 0.28);
  --bgColor-input: #FAFAFA;
  --bgColor-input-focus: #FFFFFF;
  --bgColor-error: #FBEEF0;
  --bgColor-success: #EEF3F0;

  /* ------------------------------------------------------------ bordi --- */
  --borderColor-default: #E4E1DA;    /* linea */
  --borderColor-input: #E4E1DA;
  --borderColor-input-hover: #C9C4B9;
  --borderColor-input-focus: #D98236;
  --borderColor-input-error: #B2001F;
  --shadow-input-focus: 0 0 0 1px #D98236;

  /* -------------------------------------------------- pulsante primario -- */
  --bgColor-buttonPrimary: #D98236;
  --bgColor-buttonPrimary-hover: #4C6B5C;
  --bgColor-buttonPrimary-active: #4C6B5C;
  --bgColor-buttonPrimary-focus: #4C6B5C;
  --bgColor-buttonPrimary-disabled: #E4E1DA;
  --color-buttonPrimary: #FAFAFA;
  --color-buttonPrimary-hover: #FAFAFA;
  --color-buttonPrimary-active: #FAFAFA;
  --color-buttonPrimary-focus: #FAFAFA;
  --color-buttonPrimary-disabled: #9AA0A5;
  --borderColor-buttonPrimary: #D98236;
  --borderColor-buttonPrimary-hover: #4C6B5C;
  --borderColor-buttonPrimary-active: #4C6B5C;
  --borderColor-buttonPrimary-focus: #4C6B5C;
  --shadow-buttonPrimary-hover: none;
  --shadow-buttonPrimary-focus: none;
  --shadow-buttonPrimary-active: none;

  /* ------------------------------------------------ pulsante secondario -- */
  --bgColor-buttonSecondary: transparent;
  --bgColor-buttonSecondary-hover: #F3F1ED;
  --bgColor-buttonSecondary-active: #F3F1ED;
  --color-buttonSecondary: #3A4045;
  --color-buttonSecondary-hover: #3A4045;
  --borderColor-buttonSecondary: #E4E1DA;
  --borderColor-buttonSecondary-hover: #D98236;
  --shadow-buttonSecondary-hover: none;
  --shadow-buttonSecondary-focus: none;

  /* --------------------------------------------------------- pericolo --- */
  --bgColor-buttonDanger: #B2001F;
  --bgColor-buttonDanger-hover: #8E0019;
  --color-buttonDanger: #FAFAFA;
  --borderColor-buttonDanger: #B2001F;

  /* ------------------------------------------------------------ forme --- */
  /* niente angoli arrotondati: il sito e' tutto a spigolo vivo */
  --radius-base: 0;
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --shadow-default: 0 20px 60px -30px rgba(58, 64, 69, 0.35);
}

/* ==========================================================================
   1. IL CASSETTO LATERALE
   ========================================================================== */

/* SOPRA A TUTTO.
   L'intestazione del sito e' fissa con z-index 50, quindi senza questa regola
   resterebbe stampata sopra al carrello aperto: logo, voci di menu, lente e
   icona del carrello si vedrebbero attraverso il cassetto, come se fossero
   sue. Un numero altissimo toglie ogni dubbio, adesso e in futuro. */
.snipcart-modal__container,
.snipcart-modal__overlay,
.snipcart-cart-summary__overlay {
  z-index: 999999 !important;
}

/* Larghezza del pannello. Snipcart lo tiene a destra da solo (margin-left:auto
   piu' right:0): a noi basta dire quanto dev'essere largo.
   Da 768 px in su e' un cassetto largo il 30% della finestra; sotto resta a
   tutta pagina, perche' su un telefono un cassetto stretto e' illeggibile.
   max-width: none serve a scavalcare il tetto di 540 px che Snipcart impone
   di suo: senza, oltre i 1800 px il cassetto smetterebbe di crescere. */
@media (min-width: 768px) {
  .snipcart-modal__container.snipcart-cart-summary-side {
    width: 30vw;
    max-width: none;
  }
}

@media (max-width: 767px) {
  .snipcart-modal__container.snipcart-cart-summary-side {
    width: 100%;
    max-width: none;
  }
}

/* Il taglio verticale che lo stacca dalla pagina, e l'ombra morbida che lo fa
   sembrare appoggiato sopra invece che incollato. */
.snipcart-modal__container.snipcart-cart-summary-side {
  border-left: 1px solid var(--borderColor-default, #E4E1DA);
  box-shadow: 0 20px 60px -30px rgba(58, 64, 69, 0.35);
}

/* Il velo sulla pagina dietro. Snipcart non lo mette in modalita' laterale:
   senza, il cassetto sembra sospeso nel vuoto. Non intercetta i clic, cosi
   cliccare fuori continua a chiudere il carrello. */
html.snipcart-sidecart--opened .snipcart::before {
  content: "";
  position: fixed;
  inset: 0;
  /* appena sotto al cassetto, ma sopra a tutto il resto del sito:
     cosi il velo scurisce anche l'intestazione fissa */
  z-index: 999998;
  pointer-events: none;
  background: rgba(58, 64, 69, 0.28);
  animation: eleolab-velo 0.35s ease both;
}

@keyframes eleolab-velo {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.snipcart-sidecart--opened .snipcart::before { animation: none; }
  .snipcart-transition--slide-in-enter-active,
  .snipcart-transition--slide-in-leave-active { animation: none !important; }
}

/* ==========================================================================
   2. TIPOGRAFIA
   Inter per il corpo, Syne per titoli ed etichette dei pulsanti: le stesse
   due voci del resto del sito.
   ========================================================================== */

.snipcart {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 300;
  letter-spacing: 0.005em;
}

.snipcart__font--secondary,
.snipcart__font--subtitle,
.snipcart__font--subtitle-small,
.snipcart-cart-header__title,
.snipcart-cart__secondary-header-title,
.snipcart-item-line__title {
  font-family: 'Syne', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em;
}

.snipcart__font--bold,
.snipcart__font--black { font-weight: 400 !important; }

/* ==========================================================================
   3. TESTATA DEL CARRELLO
   ========================================================================== */

/* Due intestazioni diverse per due carrelli diversi: il cassetto laterale
   usa .snipcart-cart__secondary-header, il carrello a tutta pagina (telefono)
   usa .snipcart-cart-header. La striscia del marchio va su tutt'e due. */
.snipcart-cart-header,
.snipcart-cart__secondary-header { position: relative; }

/* la striscia con i sei colori del logo, in cima al pannello */
.snipcart-cart-header::before,
.snipcart-cart__secondary-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #4C6B5C 0 18%,
    #B2001F 18% 34%,
    #D98236 34% 55%,
    #8CB4D6 55% 71%,
    #EFAFA5 71% 86%,
    #8B9B6E 86% 100%);
}

.snipcart-cart-header__title,
.snipcart-cart__secondary-header-title {
  font-size: 1.0625rem !important;
  text-transform: none;
}

/* PULIZIA DELL'INTESTAZIONE.
   Nel cassetto laterale Snipcart mette solo il titolo e la X: li' non c'e'
   niente da togliere (la lente e l'icona del carrello che si intravedevano
   erano quelle dell'intestazione del sito, risolte con lo z-index qui sopra).

   Nel carrello a tutta pagina — quello del telefono, e la pagina della cassa —
   Snipcart aggiunge invece una fila di comandi in alto a destra: l'icona del
   carrello con il contatore e, se attivo, l'accesso al proprio profilo.
   Sono ripetizioni: il carrello si sta gia' guardando. Restano solo il titolo
   e il pulsante per chiudere. */
.snipcart-cart-header__options,
.snipcart-cart-header__option,
.snipcart-cart-header__count,
.snipcart-cart-header__icon,
.snipcart-cart-header__customer-account,
.snipcart-cart-header__sign-in,
.snipcart-cart-header__sign-out {
  display: none !important;
}

/* Il pulsante per chiudere non viene toccato da nessuna riga qui sopra:
   nel cassetto e' un <button> senza classe, nel carrello a tutta pagina e'
   .snipcart-cart-header__close-button. Resta visibile su ogni schermo. */

/* la linea che stacca l'intestazione dalla merce.
   Lo spazio interno lo decide Snipcart (96 px di altezza, testo centrato):
   non serve aggiungerne, la striscia in cima resta comunque libera. */
.snipcart-cart__secondary-header {
  border-bottom: 1px solid var(--borderColor-default, #E4E1DA);
}

/* ==========================================================================
   4. PULSANTI
   Stessa voce dei pulsanti del sito: maiuscoletto largo, spigolo vivo.
   ========================================================================== */

.snipcart-button-primary,
.snipcart-button-secondary,
.snipcart-base-button__label {
  font-family: 'Syne', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.snipcart-button-primary,
.snipcart-button-secondary {
  border-radius: 0 !important;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.snipcart-button-link {
  color: var(--color-link, #D98236);
  text-underline-offset: 3px;
}

/* ==========================================================================
   5. RIGHE DEI PRODOTTI E CAMPI
   ========================================================================== */

/* NIENTE ZOOM AL DOPPIO TOCCO.
   I piu' e i meno della quantita' si toccano due volte di seguito, ed e'
   normale: sono due comandi. Il telefono pero' li leggeva come un doppio
   tocco e ingrandiva la pagina, rendendo quasi impossibile cambiare la
   quantita'. Con questa riga il doppio tocco sui comandi non ingrandisce
   piu' niente. Il pizzico a due dita per ingrandire resta intatto. */
.snipcart button,
.snipcart [role="button"],
.snipcart select,
.snipcart input,
.snipcart-button-icon,
.snipcart-item-quantity__quantity button {
  touch-action: manipulation;
}

/* i comandi della quantita' sono piccoli: diamogli il bersaglio che serve
   a un dito, senza cambiarne l'aspetto */
.snipcart-item-quantity__quantity .snipcart-button-icon {
  min-width: 2.25rem;
  min-height: 2.25rem;
}

/* ------------------------------------------------------ tastini tondi ---
   Snipcart li disegna con border-radius: 100%, scritto a mano nel suo
   foglio: le nostre variabili --radius non lo raggiungono. Qui li
   squadriamo, che in questo sito non esiste un solo angolo tondo.

   Il cestino in particolare era un cerchio rosso pieno: colpa nostra, le
   variabili buttonDanger lo riempivano di gotico. Cancellare un pezzo dal
   carrello e' un gesto normale, non un allarme: sta buono in ardesia come
   tutto il resto, e diventa rosso solo quando lo punti, per dire che quello
   e' il gesto che toglie. */
.snipcart-button-icon {
  border-radius: 0 !important;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.snipcart-button-icon.is-danger {
  color: var(--color-alt, #4F565C);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}

.snipcart-button-icon.is-danger:hover,
.snipcart-button-icon.is-danger:focus-visible,
.snipcart-button-icon.is-danger:active {
  color: #B2001F;
  background: transparent;
  border-color: var(--borderColor-default, #E4E1DA);
  box-shadow: none;
}

/* anche i piu' e i meno della quantita' restano quadrati e sobri */
.snipcart-button-icon.is-secondary {
  border: 1px solid transparent;
  box-shadow: none;
}
.snipcart-button-icon.is-secondary:hover,
.snipcart-button-icon.is-secondary:focus-visible {
  border-color: var(--borderColor-default, #E4E1DA);
  box-shadow: none;
}

/* --------------------------------------------------------------- foto ---
   Snipcart le fa alte 32 px, praticamente francobolli: in un carrello di
   pezzi unici la foto e' meta' del motivo per cui uno li ha scelti.
   Le portiamo a 4:5, le stesse proporzioni del catalogo. */
.snipcart-item-line__media--small {
  width: 68px;
  min-width: 68px;
  height: auto;
  margin-right: 0.875rem;
}

.snipcart-item-line__media--small .snipcart-item-line__image,
.snipcart-item-line--cart-edit .snipcart-item-line__image {
  display: block;
  width: 68px;
  height: 85px;
  max-width: none;
  max-height: none;
  object-fit: cover;
}


.snipcart-item-line {
  border-color: var(--borderColor-default, #E4E1DA);
}

.snipcart-item-line__image { border-radius: 0; }

.snipcart-input input,
.snipcart-textbox,
.snipcart-textbox__input { border-radius: 0 !important; }

/* il totale in fondo, con lo stesso peso dei prezzi del catalogo */
.snipcart-summary-fees__total .snipcart-summary-fees__amount {
  font-family: 'Syne', ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 500 !important;
}