.ph-img img{display:block;width:100%;aspect-ratio:5/6;object-fit:contain;max-height:220px !important;background:transparent}
:root{--ph-yellow:#F5C748; --gap:16px}

/* Slider wrapper */
.ph-slider{
  position:relative;
  overflow:visible;              /* show external arrows */
  
  margin:0 auto;
}

/* Track: grid columns controlled by JS via --colw; centered by --sidepad */
.ph-theme-grid-4 .ph-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: var(--colw, 240px);
  gap: var(--gap, 18px);
  padding-inline: var(--sidepad, 12px);
  overflow-x:hidden;
  scroll-behavior:smooth;
 padding-inline: var(--sidepad, 16px); }

/* Cards */
.ph-card{
  box-sizing:border-box;
  background:transparent;
  border:2px solid var(--ph-yellow);
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}

.ph-body{padding:10px 10px 12px;display:flex;flex-direction:column;gap:8px}
.ph-name{margin:0;font-size:1rem;line-height:1.25;text-align:center}
.ph-name a{color:#fff;text-decoration:none}
.ph-name a:hover{color:#dfb612}
.ph-price{margin:0;text-align:center;color:#fff;font-weight:700;font-size:1rem}

/* Button */
.ph-actions{display:flex;justify-content:center}
.ph-btn-link{
  display:inline-block;min-width:140px;padding:10px 16px;border-radius:10px;
  background:#D93025;color:#fff;text-decoration:none;font-weight:800;font-size:.95rem;
  box-shadow:0 3px 0 rgba(0,0,0,.25);text-align:center
}
.ph-btn-link:hover,.ph-btn-link:focus{background:#EF4444;color:#fff;outline:0}

/* Arrows: EXTERNAL (left/right negative offset), small circle + big chevron  */
.ph-float{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;background:#E5483B;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.35);z-index:70}


@media (max-width:1024px){}
  
  
}
 /* hide arrows on mobile */
}


  
  
}


@media (max-width:640px){.ph-float{display:none!important}}}

  /* Tighter spacing so 2 cards always fit */
  .ph-theme-grid-4 .ph-track{ --gap:12px;  padding-inline: var(--sidepad, 16px); }

  /* Slightly smaller visuals for narrow screens */
  
  .ph-btn-link{ min-width:120px; padding:8px 12px; font-size:.9rem; border-radius:8px; }
  .ph-name{ font-size:1.15rem; }
  .ph-price{ font-size:1.15rem; }
}
/* === v1.7.5 size tweaks === */
           /* desktop default smaller */
@media (max-width:1024px){}
@media (max-width:640px){.ph-float{display:none!important}}
}

/* v1.7.7 - remove black bullets and default ul spacing */
.ph-theme-grid-4 .ph-track{ list-style:none; margin:0; padding-inline: var(--sidepad, 16px); padding-left:0; padding-right:0; }
.ph-card{ list-style:none; }

/* bump arrow offsets further so they don't touch card borders */



@media (max-width:1024px){}
  
}
@media (max-width:640px){.ph-float{display:none!important}}
}

/* v1.7.9 — enforce exact card width so 4/3/2 fill perfectly */
.ph-theme-grid-4 .ph-track{padding-inline:var(--sidepad, 0)}
.ph-theme-grid-4 .ph-card{flex:0 0 var(--colw) !important; width:var(--colw) !important;}

/* Safety: hide any overflow bleed from rounding */
.ph-slider{overflow:visible}

.ph-slider-wrap{overflow:visible}


/* v1.8.1 - arrow positions follow the centered side padding (no overlap with card border) */
.ph-float{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  background:#E5483B;color:#fff;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.35);z-index:70}



@media (max-width:1024px){
  
  
}
@media (max-width:640px){
  .ph-float{ display:none !important; }
}

/* v1.8.2 - remove card frame (cornice) */
.ph-card, .ph-body, .ph-panel, .ph-item, .ph-card::before, .ph-body::before {
  border: none !important;
  outline: none !important;
}

/* v1.8.3 - remove dark background (force transparent) */
.ph-slider-wrap, .ph-slider, .ph-track, .ph-card, .ph-body, .ph-panel, .ph-item {
  background: transparent !important;
  background-color: transparent !important;
}



/* v1.8.4 - arrows inside the slider area, aligned to inner padding */
.ph-float.ph-prev{ left:  calc(var(--sidepad, 0px) + 8px); }
.ph-float.ph-next{ right: calc(var(--sidepad, 0px) + 8px); }

@media (max-width:1024px){
  .ph-float.ph-prev{ left:  calc(var(--sidepad, 0px) + 6px); }
  .ph-float.ph-next{ right: calc(var(--sidepad, 0px) + 6px); }
}
@media (max-width:640px){
  .ph-float{ display:none !important; }
}


/* v1.8.5 — bottom nav ONLY on mobile */
@media (max-width:640px){
  .ph-slider-wrap .ph-mobile-nav{
    display:flex; align-items:center; justify-content:center;
    gap:18px; width:100%; margin:10px auto 0; position:relative; z-index:2;
  }
  .ph-slider-wrap .ph-mobile-nav .ph-bnav{
    width:38px; height:38px; border-radius:999px;
    display:flex; align-items:center; justify-content:center;
    background:#1f2937; color:#fff; opacity:.9;
  }
  .ph-slider-wrap .ph-mobile-nav .ph-pg{
    min-width:48px; text-align:center; color:#e5e7eb; font-weight:600;
  }
}
@media (min-width:641px){
  .ph-slider-wrap .ph-mobile-nav{ display:none !important; }
}

/* v1.8.6 — mobile bottom nav colors */
@media (max-width:640px){
  .ph-slider-wrap .ph-mobile-nav{ color:#fff; }
  .ph-slider-wrap .ph-mobile-nav .ph-pg{ color:#fff; }
  .ph-slider-wrap .ph-mobile-nav .ph-bnav{
    background:#fff;
    color:#000;
    border:0;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
  }
  .ph-slider-wrap .ph-mobile-nav .ph-bnav:active{ transform:scale(.98); }
  .ph-slider-wrap .ph-mobile-nav .ph-bnav:focus-visible{
    outline:2px solid #fff; outline-offset:2px;
  }
}


/* === Unified arrow colors & no shadow (all skins) === */
.ph-float, .ph-prev, .ph-next{
  background:#d93025 !important;
  border-color:#fff !important;
  color:#fff !important;
  box-shadow:none !important;
}
.ph-float *, .ph-prev *, .ph-next *{
  color:#fff !important; fill:#fff !important; stroke:#fff !important;
}

.ph-btn-link{ box-shadow:none !important; }


/* === Price layout: old price (del) on top, bigger; discounted (ins) below === */
.ph-price{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:.15em !important;
  line-height:1.15 !important;
}
.ph-price del{ order:1 !important; font-size:calc(1em + 2px) !important; }
.ph-price ins{ order:2 !important; font-size:1em !important; }

/* === iPhone narrow tweak (<=390px): slight left shift + tiny size reduction === */
@media (max-width: 390px){
  /* Riduci pochissimo la larghezza colonna e gap */
  .ph-slider{ --colw: calc(50% - 6px) !important; --gap: 10px !important; }
  /* Sposta leggermente a sinistra: meno padding a sinistra che a destra */
  .ph-slider .ph-track{
    grid-auto-columns: var(--colw) !important;
    gap: var(--gap) !important;
    padding-left: 6px !important;
    padding-right: 12px !important;
  }
}

/* === iPhone narrow tweak v2 (<=390px): more left shift + slightly smaller cards === */
@media (max-width: 390px){
  .ph-slider{ --colw: calc(50% - 9px) !important; --gap: 12px !important; }
  .ph-slider .ph-track{
    grid-auto-columns: var(--colw) !important;
    gap: var(--gap) !important;
    padding-left: 2px !important;
    padding-right: 14px !important;
  }
}

/* === iPhone narrow tweak v3 (<=390px): left-aligned + slightly smaller === */
@media (max-width: 390px){
  .ph-slider{ --colw: calc(50% - 12px) !important; --gap: 12px !important; }
  .ph-slider .ph-track{
    grid-auto-columns: var(--colw) !important;
    gap: var(--gap) !important;
    padding-left: 0 !important;     /* sposta ancora a sinistra */
    padding-right: 16px !important; /* più margine a destra */
  }
  .ph-slider .ph-body{ padding-left:6px !important; padding-right:6px !important; }
}

/* === iPhone narrow tweak v4 (<=390px): più a sinistra + un filo più piccole === */
@media (max-width: 390px){
  .ph-slider{ --colw: calc(50% - 14px) !important; --gap: 12px !important; }
  .ph-slider .ph-track{
    grid-auto-columns: var(--colw) !important;
    gap: var(--gap) !important;
    padding-left: 0 !important;
    padding-right: 18px !important;
    justify-content: flex-start !important;
  }
  .ph-slider .ph-viewport{ scroll-snap-type: x proximity; }
  .ph-slider .ph-card{ scroll-snap-align: start; }
  .ph-slider .ph-body{ padding-left:4px !important; padding-right:4px !important; }
}

/* === iPhone narrow tweak v5 (<=390px): -2px card width === */
@media (max-width: 390px){
  .ph-slider{ --colw: calc(50% - 16px) !important; }
}

/* === iPhone narrow tweak v6 (<=390px): tiny step smaller === */
@media (max-width: 390px){
  .ph-slider{ --colw: calc(50% - 18px) !important; } /* -2px rispetto a v5 */
  .ph-slider .ph-track{ gap: 12px !important; padding-left: 0 !important; padding-right: 16px !important; }
}

/* === iPhone narrow tweak v7 (<=390px): additional -8px width === */
@media (max-width: 390px){
  .ph-slider{ --colw: calc(50% - 26px) !important; } /* -8px from previous (-18px -> -26px) */
}

/* === iPhone small (<=390px): -6px on texts & button === */
@media (max-width: 390px){
  .ph-name, .ph-name a{ font-size: calc(1rem - 6px) !important; line-height: 1.2 !important; }
  .ph-price{ font-size: calc(1rem - 6px) !important; }
  .ph-btn-link{ 
    font-size: calc(.95rem - 6px) !important; 
    padding: 7px 12px !important; 
    min-width: 120px !important;
  }
}

/* === iPhone small (<=390px): +2px su titolo e prezzo (ora -4px vs base) === */
@media (max-width: 390px){
  .ph-name, .ph-name a{ font-size: calc(1rem - 4px) !important; }
  .ph-price{ font-size: calc(1rem - 4px) !important; }
}

/* === PH Slider mobile snap CSS (<=390px) === */
@media (max-width: 390px){
  .ph-slider .ph-viewport{ scroll-snap-type: x mandatory; }
  .ph-slider .ph-card{ scroll-snap-align: start; }
}

/* === PH Slider mobile snap CSS (<=480px) === */
@media (max-width: 900px){
  .ph-slider .ph-viewport{ scroll-snap-type: x mandatory; }
  .ph-slider .ph-card{ scroll-snap-align: start; }
}

/* === iPhone small (<=390px): -4px spazio interno schede === */
@media (max-width: 390px){
  .ph-slider .ph-body{
    /* base era ~ padding:10px 10px 12px; gap:8px; */
    padding: 6px 6px 8px !important;
    gap: 4px !important;
  }
}

/* === Mobile strict 2-per-view (<=480px) === */
@media (max-width: 900px){
  .ph-slider{
    --sidepad: 12px !important;
    --gap: 10px !important;
  }
  .ph-slider .ph-viewport{
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .ph-slider .ph-track{
    display: grid !important;
    grid-auto-flow: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: var(--sidepad) !important;
    padding-right: var(--sidepad) !important;
    gap: var(--gap) !important;
    /* 2 colonne esatte dentro la viewport */
    grid-auto-columns: calc((100% - (var(--sidepad)*2) - var(--gap)) / 2) !important;
    justify-content: flex-start !important;
  }
  .ph-slider .ph-card{
    width: auto !important;
    flex: initial !important;
    scroll-snap-align: start;
  }
}

/* === Strict 2-per-view using --colw computed from viewport (<=480px) === */
@media (max-width: 900px){
  .ph-slider .ph-viewport{ box-sizing: border-box; }
  .ph-slider .ph-track{
    box-sizing: border-box !important;
    grid-auto-columns: var(--colw, calc((100% - (var(--sidepad,12px)*2) - var(--gap,10px)) / 2)) !important;
  }
  .ph-slider .ph-card{ min-width: 0; }
}

/* defaults for big phones (<=640px) to guarantee 2-per-view */
@media (max-width: 900px){
  .ph-slider{
    --sidepad: 12px;
    --gap: 10px;
  }
  .ph-slider .ph-viewport{ scroll-snap-type:x mandatory; }
  .ph-slider .ph-card{ scroll-snap-align:start; }
}

/* ensure consistent paddings/gap for <=768px as well */
@media (max-width: 900px){
  .ph-slider{ --sidepad: 12px; --gap: 10px; }
  .ph-slider .ph-viewport{ scroll-snap-type: x mandatory; box-sizing: border-box; }
  .ph-slider .ph-track{ box-sizing: border-box; }
  .ph-slider .ph-card{ scroll-snap-align: start; }
}

/* ensure zero margins on cards to avoid overflow */
@media (max-width: 900px){
  .ph-slider .ph-card{ margin: 0 !important; }
}

/* v29: stronger fit & box sizing */
@media (max-width: 900px){
  .ph-slider .ph-viewport{ box-sizing: border-box; }
  .ph-slider .ph-track{ box-sizing: border-box; grid-auto-columns: minmax(0, var(--colw, 1fr)); }
  .ph-slider .ph-card{ box-sizing: border-box; margin: 0 !important; }
}

@media (max-width: 900px){
  .ph-slider .ph-card{ margin:0!important; box-sizing:border-box; }
  .ph-slider .ph-track{ box-sizing:border-box; }
  .ph-slider .ph-viewport{ box-sizing:border-box; }
}

/* v33: precise clamp for big phones */
@media (max-width: 900px){
  .ph-slider .ph-viewport{ box-sizing: border-box; scrollbar-gutter: stable both-edges; }
  .ph-slider .ph-track{ box-sizing: border-box; }
  .ph-slider .ph-card{ box-sizing: border-box; margin:0!important; min-width:0; }
}

/* v34: force grid to use JS-computed --colw on all mobiles (<=900px) */
@media (max-width: 900px){
  .ph-slider .ph-track{ grid-auto-columns: var(--colw) !important; }
}

/* =========================================================
   PH SLIDER — TESTI / PREZZO / OFFERTA / BOTTONE (BLACK THEME)
   (NON tocca griglia né immagini)
   ========================================================= */

/* Corpo card: più ordinato e “da shop” */
.ph-body{
  padding: 12px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Titolo prodotto */
.ph-name{
  margin: 0;
  text-align: center;
  font-size: 1.08rem;
  line-height: 1.2;
  font-weight: 650;
}
.ph-name a{
  color: #fff;
  text-decoration: none;
}
.ph-name a:hover,
.ph-name a:focus-visible{
  color: var(--ph-yellow, #F5C748);
  outline: 0;
}

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

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

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

/* Bottone: stile shop */
.ph-actions{
  display: flex;
  justify-content: center;
  margin-top: auto; /* se il titolo è lungo, il bottone resta più “in basso” */
}
.ph-btn-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

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

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

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

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

/* Mobile: compatto ma leggibile (non tocca la griglia) */
@media (max-width: 900px){
  .ph-name{ font-size: 1.02rem; }
  .ph-price{ font-size: 1.05rem; }
  .ph-price ins .amount{ font-size: 1.18rem; }
  .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); }
}