/* PullHype Slider — Light Skin overrides for Grid 4/3/2 (scroll)
   Text & price: black; Mobile/Tablet/Desktop arrows: black circle with white chevrons
   v1.8.7-skin
*/

.ph-skin-light .ph-name a { color:#111 !important; }
.ph-skin-light .ph-name a:hover,
.ph-skin-light .ph-name a:focus { color:#111 !important; text-decoration: underline; }

.ph-skin-light .ph-price { color:#111 !important; }

/* External arrows on tablet/desktop */
.ph-skin-light .ph-float,
.ph-skin-light .ph-prev,
.ph-skin-light .ph-next {
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important; /* if glyphs are text */
}

/* Ensure arrow buttons are circular if not already */
.ph-skin-light .ph-prev,
.ph-skin-light .ph-next,
.ph-skin-light .ph-bnav {
  border-radius: 9999px !important;
}

/* Mobile bottom nav buttons */
.ph-skin-light .ph-mobile-nav .ph-bnav {
  background:#000 !important;
  border-color:#000 !important;
  color:#fff !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

/* Optional: page indicator text color inside mobile nav (e.g., 1/4) */
.ph-skin-light .ph-mobile-nav .ph-pg { color:#111 !important; }

/* Keep card borders/shadows identical to dark skin;
   if the default dark skin uses white borders, do not touch them here. */

/* === Light skin: enforce same arrow colors and remove card shadow === */
.ph-skin-light .ph-float, .ph-skin-light .ph-prev, .ph-skin-light .ph-next{
  background:#d93025 !important;
  border-color:#fff !important;
  color:#fff !important;
  box-shadow:none !important;
}
.ph-skin-light .ph-float *, .ph-skin-light .ph-prev *, .ph-skin-light .ph-next *{
  color:#fff !important; fill:#fff !important; stroke:#fff !important;
}
.ph-skin-light .ph-card{ box-shadow:none !important; }

/* =========================================================
   PH SLIDER — LIGHT SKIN
   Testi / Prezzo / Offerta / Bottone (NON tocca griglia/immagini)
   ========================================================= */

/* Corpo card: spacing coerente con shop */
.ph-skin-light .ph-body{
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Titolo */
.ph-skin-light .ph-name{
  margin: 0;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 650;
}
.ph-skin-light .ph-name a{
  color: #111 !important;
  text-decoration: none !important;
}
.ph-skin-light .ph-name a:hover,
.ph-skin-light .ph-name a:focus-visible{
  color: #111 !important;
  text-decoration: underline !important;
  outline: 0;
}

/* Prezzo: del sopra, ins sotto */
.ph-skin-light .ph-price{
  margin: 0;
  text-align: center;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;

  color: #111 !important;
  font-weight: 850 !important;
  font-size: 1.12rem !important;
  line-height: 1.1 !important;
}
.ph-skin-light .ph-price del{
  opacity: 1 !important;
  color: #111 !important;
  font-weight: 700 !important;
}
.ph-skin-light .ph-price del .amount{
  text-decoration: line-through !important;
}
.ph-skin-light .ph-price ins{
  text-decoration: none !important;
}
.ph-skin-light .ph-price ins .amount{
  color: #D93025 !important;
  font-weight: 950 !important;
  font-size: 1.28rem !important;
}

/* Bottone */
.ph-skin-light .ph-actions{
  display: flex;
  justify-content: center;
  margin-top: auto;
}
.ph-skin-light .ph-btn-link{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-width: 160px;
  padding: 10px 14px;
  border-radius: 10px;

  background: #D93025;
  color: #fff !important;
  text-decoration: none !important;

  font-weight: 900;
  font-size: 1rem;

  border: 0 !important;
  box-shadow: none !important;
}
.ph-skin-light .ph-btn-link:hover,
.ph-skin-light .ph-btn-link:focus-visible{
  background: #EF4444;
  color: #fff !important;
  outline: 0;
}

/* Mobile: compatto ma leggibile */
@media (max-width: 900px){
  .ph-skin-light .ph-name{ font-size: 1.02rem; }
  .ph-skin-light .ph-price{ font-size: 1.05rem !important; }
  .ph-skin-light .ph-price ins .amount{ font-size: 1.18rem !important; }
  .ph-skin-light .ph-btn-link{
    min-width: 130px;
    padding: 8px 12px;
    font-size: .95rem;
    border-radius: 8px;
  }
}


/* =========================================================
   PH SLIDER — CARD ALLA STESSA ALTEZZA (come griglia shop)
   NON cambia griglia/colonne; NON cambia dimensione img (solo area)
   ========================================================= */

/* Card = colonna flex, così il bottone può andare “in basso” */
.ph-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* Area immagine con altezza fissa (l'immagine resta contain + max-height 220) */
.ph-img{
  height: 260px;                 /* desktop */
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Corpo = occupa lo spazio rimanente */
.ph-body{
  flex: 1;
  display:flex;
  flex-direction:column;
}

/* Titolo: riserva SEMPRE 2 righe così i prezzi combaciano */
.ph-name{
  min-height: calc(1.2em * 2);   /* 2 righe */
}

/* Prezzo: riserva SEMPRE 2 righe (utile quando alcuni non sono in offerta) */
.ph-price{
  min-height: calc(1.15em * 2 + 6px);
}

/* Bottone sempre “in basso” nella card */
.ph-actions{
  margin-top: auto;
}

/* Responsive: riduci solo le altezze, non la griglia */
@media (max-width: 900px){
  .ph-img{ height: 220px; }      /* mobile/tablet */
  .ph-name{ min-height: calc(1.2em * 2); }
  .ph-price{ min-height: calc(1.15em * 2 + 4px); }
}