/* tk-carosello-prodotti · prodotti su telefono e tablet per qualsiasi tema (1.0.0)
   Opzioni nel Personalizza: WooCommerce → Catalogo prodotti (carosello, colonne tablet)
   e WooCommerce → Layout prodotto singolo (scheda come l'app, tablet, foto ingrandite).
   Colori e larghezze arrivano come variabili (--pdt-*) dal file includes/frontend.php.
   Nato su paydea-tema 2.6.144 (9/10/2026). */

:root{
  --pdt-car-w:84%;
  --pdt-dot1:#c4b5fd;--pdt-dot2:#5eead4;--pdt-dot0:#ffffff;
  --pdt-acc1:#7c3aed;--pdt-acc2:#22b8c9;--pdt-thumb:#5eead4;
  --pdt-btn:linear-gradient(110deg,#7c3aed 0%,#5b5bf0 50%,#0fb5d6 100%);--pdt-num:#1e1b4b;--pdt-card:#fff;
}

/* ===== Carosello prodotti su telefono (la classe .pd-sl la mette il JS solo dove l'opzione è accesa):
   una card per volta, si intravede la successiva, pallini come nell'app.
   Spazio sopra e sotto per l'ombra (lo scorrimento la taglierebbe) ===== */
@media (max-width:767px){
  html body .pd-sl{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;gap:14px!important;
    overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -10px!important;padding:8px 16px 26px!important;scroll-padding-left:16px;width:auto!important;max-width:none!important}
  html body .pd-sl::-webkit-scrollbar{display:none}
  html body .pd-sl > *{flex:0 0 var(--pdt-car-w)!important;width:var(--pdt-car-w)!important;max-width:var(--pdt-car-w)!important;min-width:0!important;margin:0!important;scroll-snap-align:start;float:none!important;clear:none!important}
  html body .pd-sl::before,html body .pd-sl::after{display:none!important}
  html body .pd-sl-dots{display:flex;justify-content:center;align-items:center;gap:14px;margin:-4px 0 14px}
  html body .pd-sl-dots[hidden]{display:none}
  html body .pd-sl-pal{display:flex;align-items:center;gap:8px}
  html body .pd-sl-pal button{width:9px;height:9px;padding:0!important;border:0!important;border-radius:99px!important;
    background:rgba(255,255,255,.35)!important;background:color-mix(in srgb,var(--pdt-dot0) 35%,transparent)!important;
    transition:width .25s,background .25s;cursor:pointer;min-height:0!important}
  html body .pd-sl-pal button.on{width:28px;background:linear-gradient(90deg,var(--pdt-dot1),var(--pdt-dot2))!important}
  html body .pd-sl-num{padding:5px 14px;border-radius:99px;font-weight:800;font-size:13px;line-height:1;color:var(--pdt-num);background:linear-gradient(90deg,var(--pdt-dot1),var(--pdt-dot2))}
  /* frecce ai lati dei pallini, come la navigazione dei caroselli */
  html body .pd-sl-dots .pd-sl-arrow{width:40px!important;height:40px!important;min-height:0!important;padding:0!important;border-radius:50%!important;display:flex!important;align-items:center;justify-content:center;
    border:1.2px solid rgba(255,255,255,.45)!important;border-color:color-mix(in srgb,var(--pdt-dot0) 45%,transparent)!important;
    background:rgba(255,255,255,.07)!important;background:color-mix(in srgb,var(--pdt-dot0) 7%,transparent)!important;
    color:var(--pdt-dot0)!important;backdrop-filter:blur(6px);transition:opacity .2s,background .2s}
  html body .pd-sl-dots .pd-sl-arrow svg{width:18px;height:18px}
  html body .pd-sl-dots .pd-sl-arrow:disabled{opacity:.35}
  html body .pd-sl-dots .pd-sl-arrow:not(:disabled):active{background:rgba(255,255,255,.2)!important;background:color-mix(in srgb,var(--pdt-dot0) 20%,transparent)!important}
  /* correlati: carosello allineato al titolo (16px) */
  html body.single-product section.related.products .pd-sl{margin:0 -16px!important;padding-left:16px!important;padding-right:16px!important;scroll-padding-left:16px}
  html body.single-product .pd-sl-dots{margin-bottom:6px}
}

/* ===== Caricamento prodotti del negozio: pulsante «Mostra altri» o automatico (.pdt-carica, creato dal JS) ===== */
html body .pdt-nav-nascosta{display:none!important}
html body .pdt-carica[hidden]{display:none!important}
html body .pdt-carica{display:flex;flex-direction:column;align-items:center;gap:16px;margin:34px auto 10px;padding:0 16px;max-width:460px;text-align:center;color:inherit}
html body .pdt-carica-info{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
html body .pdt-carica-testo{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;line-height:1.4;opacity:.9}
html body .pdt-carica-testo b{font-weight:800;opacity:1}
html body .pdt-carica-testo u{cursor:pointer;font-weight:700}
html body .pdt-carica-testo svg{width:20px;height:20px;flex:none;padding:3px;border-radius:50%;color:#fff;background:linear-gradient(135deg,var(--pdt-acc1),var(--pdt-acc2))}
html body .pdt-carica-barra{display:block;width:min(240px,70%);height:6px;border-radius:99px;overflow:hidden;
  background:rgba(127,127,127,.22);background:color-mix(in srgb,var(--pdt-dot0) 20%,transparent)}
html body .pdt-carica-barra i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--pdt-dot1),var(--pdt-dot2));transition:width .6s cubic-bezier(.2,.8,.2,1)}
html body .pdt-carica-btn{position:relative;display:inline-flex!important;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px!important;border:0!important;border-radius:999px!important;cursor:pointer;
  font-size:15.5px!important;font-weight:800!important;letter-spacing:.01em;color:#fff!important;background:var(--pdt-btn)!important;overflow:hidden;
  box-shadow:0 14px 30px -14px rgba(79,70,229,.75)!important;box-shadow:0 14px 30px -14px color-mix(in srgb,var(--pdt-acc1) 85%,transparent)!important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .2s}
html body .pdt-carica-btn::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transition:left .6s}
html body .pdt-carica-btn:hover{transform:translateY(-2px)}
html body .pdt-carica-btn:hover::after{left:130%}
html body .pdt-carica-btn:active{transform:translateY(0) scale(.98)}
html body .pdt-carica-btn:focus-visible{outline:3px solid var(--pdt-dot2);outline-offset:3px}
html body .pdt-carica-btn svg{width:19px;height:19px;transition:transform .3s}
html body .pdt-carica-btn:hover svg{transform:translateY(3px)}
html body .pdt-carica-load{display:none;gap:7px;align-items:center;height:54px}
html body .pdt-carica-load i{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--pdt-dot1),var(--pdt-dot2));animation:pdt-salta .9s ease-in-out infinite}
html body .pdt-carica-load i:nth-child(2){animation-delay:.15s}
html body .pdt-carica-load i:nth-child(3){animation-delay:.3s}
@keyframes pdt-salta{0%,80%,100%{transform:translateY(0) scale(.8);opacity:.55}40%{transform:translateY(-9px) scale(1);opacity:1}}
html body .pdt-carica.sta-caricando .pdt-carica-btn{display:none!important}
html body .pdt-carica.sta-caricando .pdt-carica-load{display:flex}
html body .pdt-carica--infinite .pdt-carica-btn,html body .pdt-carica--carosello .pdt-carica-btn{display:none!important}
html body .pdt-carica.finito .pdt-carica-btn,html body .pdt-carica.finito .pdt-carica-load{display:none!important}
/* nel carosello del telefono i prodotti arrivano da soli: niente pulsante */
html body:has(.tkcp-principale.pd-sl) .pdt-carica-btn{display:none!important}
html body:has(.tkcp-principale.pd-sl) .pdt-carica{margin-top:6px}
/* card appena arrivate: salgono con una leggera dissolvenza (nel carosello entrano da destra) */
html body .pdt-nuovo{animation:pdt-entra .55s cubic-bezier(.2,.8,.2,1) both}
html body .pd-sl > .pdt-nuovo{animation-name:pdt-entra-x}
@keyframes pdt-entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes pdt-entra-x{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html body .pdt-nuovo,html body .pdt-carica-load i{animation:none}html body .pdt-carica-btn,html body .pdt-carica-btn::after,html body .pdt-carica-barra i{transition:none}}
@media (max-width:767px){html body .pdt-carica-btn{width:100%}}

/* ===== Rimbalzo che invita a scorrere il carosello (.pd-sl-invito, lo mette il JS) ===== */
@media (max-width:767px){
  html body .pd-sl.pd-sl-invito > *{animation:pdt-invito 1.4s cubic-bezier(.33,.9,.28,1) both}
}
@keyframes pdt-invito{0%{transform:none}28%{transform:translateX(-22%)}52%{transform:translateX(2%)}70%{transform:translateX(-7%)}86%{transform:translateX(1%)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){html body .pd-sl.pd-sl-invito > *{animation:none}}

/* ===== Griglie di temi diversi (masonry, float, flex, grid): nel carosello e nelle colonne le card tornano nel flusso ===== */
@media (max-width:767px){
  /* se il tema forza «display:grid» più forte di noi, il carosello scorre lo stesso: colonne automatiche in orizzontale */
  html body .tkcp-g.pd-sl.pd-sl{display:flex!important;grid-auto-flow:column!important;grid-auto-columns:var(--pdt-car-w)!important;grid-template-columns:none!important;grid-template-rows:none!important}
  /* 2-3 righe (.tkcp-righe): la griglia del tema si divide in righe .tkcp-riga, ognuna è un carosello per conto suo */
  html body .tkcp-g.tkcp-righe{display:block!important;height:auto!important;min-height:0!important;--tkcp-foto:230px}
  html body .tkcp-g.tkcp-righe.tkcp-r3{--tkcp-foto:180px}
  html body .tkcp-righe > .tkcp-riempitivo{display:none!important}
  html body .tkcp-righe > .pd-sl-dots{margin:-8px 0 14px!important}
  html body .tkcp-righe > .pd-sl-dots:last-child{margin-bottom:4px!important}
  html body .tkcp-righe > .pd-sl-dots .pd-sl-arrow{width:34px!important;height:34px!important}
  html body .tkcp-righe > .pd-sl-dots .pd-sl-num{padding:4px 12px;font-size:12px}
  /* card compatte, così le righe entrano nello schermo (foto più bassa, testi e pulsante ridotti, niente stelline) */
  html body .tkcp-righe > .tkcp-riga.pd-sl > * :is(img.wp-post-image,img.attachment-woocommerce_thumbnail,img.woocommerce-placeholder,.woocommerce-loop-image-link img,.featured-image img){height:var(--tkcp-foto)!important;max-height:var(--tkcp-foto)!important;width:100%!important;object-fit:contain!important;padding:6px!important;margin:0 auto!important;box-sizing:border-box!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * :is(.star-rating,.tk-card-rating,.woocommerce-product-rating,.wc-block-components-product-rating){display:none!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * :is(h2,h3,.woocommerce-loop-product__title,.entry-title){font-size:14px!important;line-height:1.3!important;margin:0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * .price{font-size:12px!important;line-height:1.25!important;margin:4px 0 0!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * .price :is(ins,ins .amount,ins bdi,ins .woocommerce-Price-currencySymbol){font-size:18px!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * .price > .amount,html body .tkcp-righe > .tkcp-riga.pd-sl > * .price > .amount *{font-size:18px!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * .price del :is(.amount,bdi,span){font-size:12px!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > .type-product :is(.button,a.button,.added_to_cart).button{padding:8px 10px!important;font-size:11px!important;line-height:1.2!important;min-height:0!important;height:auto!important;white-space:normal!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * .onsale{transform:scale(.85);transform-origin:top left}
  /* Renovatio (graziavecchione): spazi interni della card */
  html body .tkcp-righe > .tkcp-riga.pd-sl > * .hentry-middle{padding:8px 12px 58px!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > .type-product .hentry-wrap > .cart-button.cart-button{padding:8px 12px!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * .entry-meta{padding-top:2px!important;margin-bottom:0!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * :is(.tkwssw-btn,.tkwssc-btn){transform:scale(.8)}
  /* tk-tema e temi Kadence: la foto sta in un riquadro quadrato (aspect-ratio 1/1) che va abbassato */
  html body .tkcp-righe > .tkcp-riga.pd-sl > * :is(.woocommerce-loop-image-link,.product-thumbnail > a,a.woocommerce-LoopProduct-link:has(> img)){aspect-ratio:auto!important;height:var(--tkcp-foto)!important;padding-bottom:0!important;display:block!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * .product-thumbnail{padding-top:8px!important;padding-bottom:8px!important}
  html body .tkcp-righe > .tkcp-riga.pd-sl > * .product-thumbnail img{height:100%!important;max-height:var(--tkcp-foto)!important;object-fit:contain!important}
  /* elementi «riempitivo» dei temi: fuori dal carosello e dalle colonne */
  html body .pd-sl > .tkcp-riempitivo,html body .tkcp-g.tkcp-c1 > .tkcp-riempitivo,html body .tkcp-g.tkcp-c2 > .tkcp-riempitivo{display:none!important}
  html body .pd-sl.tkcp-g,html body .tkcp-g.tkcp-c1,html body .tkcp-g.tkcp-c2{height:auto!important;min-height:0!important}
  html body .pd-sl.tkcp-g > *,html body .tkcp-g.tkcp-c1 > *,html body .tkcp-g.tkcp-c2 > *{position:relative!important;left:auto!important;top:auto!important;right:auto!important;transform:none;float:none!important}
  /* Colonne su telefono scelte per un blocco */
  html body .tkcp-g.tkcp-c1,html body .tkcp-g.tkcp-c2{display:grid!important;column-gap:.6rem!important;row-gap:.9rem!important;margin-left:0!important;margin-right:0!important}
  html body .tkcp-g.tkcp-c1{grid-template-columns:minmax(0,1fr)!important}
  html body .tkcp-g.tkcp-c2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .tkcp-g.tkcp-c1 > *,html body .tkcp-g.tkcp-c2 > *{width:auto!important;max-width:none!important;margin:0!important}
}
/* ===== Colonne su tablet (768–1110px) per le griglie riconosciute ===== */
@media (min-width:768px) and (max-width:1110px){
  html body.tkcp-tablet-2 .tkcp-g,html body.tkcp-tablet-3 .tkcp-g{display:grid!important;gap:20px!important;height:auto!important}
  html body.tkcp-tablet-2 .tkcp-g{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body.tkcp-tablet-3 .tkcp-g{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html body[class*=tkcp-tablet-] .tkcp-g > *{position:relative!important;left:auto!important;top:auto!important;transform:none;width:auto!important;max-width:none!important;margin:0!important;float:none!important}
  html body[class*=tkcp-tablet-] .tkcp-g::before,html body[class*=tkcp-tablet-] .tkcp-g::after{display:none!important}
}