/* Farm 3D - Hero (carosello + 2 immagini laterali) + tasti servizio. */

.f3h-hero{--f3h-h:480px;display:flex;gap:16px;align-items:stretch;width:100%;max-width:100%;box-sizing:border-box}
.f3h-hero *{box-sizing:border-box}

/* Carosello */
.f3h-carousel{position:relative;flex:2 1 0;min-width:0;height:var(--f3h-h);overflow:hidden;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.f3h-track{display:flex;height:100%;transition:transform .5s ease;will-change:transform}
.f3h-slide{flex:0 0 100%;width:100%;height:100%;margin:0}
.f3h-slide-link{display:block;width:100%;height:100%}
.f3h-slide img{width:100%;height:100%;object-fit:cover;display:block}

/* Immagini laterali */
.f3h-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px;height:var(--f3h-h)}
.f3h-side-img{flex:1 1 0;min-height:0;margin:0;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.f3h-side-link{display:block;width:100%;height:100%}
.f3h-side-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Placeholder */
.f3h-empty{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;min-height:80px;background:rgba(0,0,0,.04);border:2px dashed rgba(0,0,0,.25);color:#444;font-weight:600;padding:10px}

/* Frecce hero */
.f3h-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;min-width:42px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background .2s}
.f3h-arrow:hover{background:rgba(0,0,0,.65)}
.f3h-prev{left:12px}
.f3h-next{right:12px}

/* Dots */
.f3h-dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:8px}
.f3h-dots button{width:10px;height:10px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;transition:background .2s,transform .2s}
.f3h-dots button.is-active{background:#fff;transform:scale(1.25)}

/* === Tasti servizio === */
.f3h-services{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;margin-top:16px}
.f3h-service{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px 16px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 2px #1d2327,0 4px 14px rgba(0,0,0,.08);color:#1d2327;font-weight:700;font-size:1rem;transition:transform .2s,background .2s,box-shadow .2s}
.f3h-service:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 2px #1d2327,0 10px 20px rgba(0,0,0,.15);color:#1d2327}
.f3h-service,.f3h-service:hover,.f3h-service:focus,.f3h-service span,.f3h-service:hover span,.f3h-service i{text-decoration:none!important;border-bottom:0!important}
.f3h-service i{font-size:2.2rem;color:#2B6CB0}

/* === Articoli scorrevoli (marquee multicolore) === */
.f3h-blogrow{margin-top:28px;min-width:0;max-width:100%}
.f3h-blogrow-title{text-align:center;color:#1d2327;font-size:1.6rem;margin:0 0 16px}
.f3h-marquee{position:relative;overflow:hidden;width:100%;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.f3h-marquee-track{display:flex;gap:20px;width:max-content;padding:6px 0 16px;animation:f3h-scroll 70s linear infinite}
.f3h-marquee:hover .f3h-marquee-track{animation-play-state:paused}
.f3h-dir-right .f3h-marquee-track{animation-direction:reverse}
@keyframes f3h-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.f3h-marquee-track{animation:none}}

.f3h-bcard{flex:0 0 300px;width:300px;display:flex;flex-direction:column;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.12);border-top:4px solid var(--bc,#2B6CB0);text-decoration:none!important;transition:transform .2s,box-shadow .2s}
.f3h-bcard:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.2)}
.f3h-bcard-img{display:block;width:100%;height:160px;background:var(--bc,#2B6CB0);overflow:hidden}
.f3h-bcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.f3h-bcard-noimg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:2.6rem}
.f3h-bcard-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 18px}
.f3h-bcard-badge{align-self:flex-start;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px;background:color-mix(in srgb,var(--bc,#2B6CB0) 14%,#fff);color:var(--bc,#2B6CB0)}
.f3h-bcard-title{color:#1d2327;font-weight:700;font-size:1rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* === Immagini promo (bento 3 col: larga+quadrata / quadrata+larga) === */
.f3h-promos{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:240px;gap:16px;width:100%;margin-top:28px}
.f3h-promo{position:relative;display:block;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.14);text-decoration:none;height:100%;transition:transform .2s,box-shadow .2s}
.f3h-promo:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.24)}
.f3h-promo img{width:100%;height:100%;object-fit:cover;display:block}
.f3h-promo:nth-child(1){grid-column:1 / span 2}
.f3h-promo:nth-child(2){grid-column:3 / span 1}
.f3h-promo:nth-child(3){grid-column:1 / span 1}
.f3h-promo:nth-child(4){grid-column:2 / span 2}

/* === Materiali (tab + prodotti) === */
.f3h-mattabs{margin-top:28px;width:100%;min-width:0;max-width:100%}
.f3h-mattabs-sub{text-align:center;color:#50575e;margin:-6px 0 18px;font-size:1.02rem}
.f3h-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:20px;width:100%;max-width:100%}
.f3h-tab{appearance:none;-webkit-appearance:none;border:1px solid rgba(43,108,176,.4);background:#fff;color:#2B6CB0;font-weight:700;font-size:1rem;padding:10px 28px;border-radius:30px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.f3h-tab:hover{background:rgba(43,108,176,.08)}
.f3h-tab.is-active{background:#2B6CB0;color:#fff;box-shadow:0 6px 16px rgba(43,108,176,.35)}
.f3h-tabpanes{width:100%;min-width:0;max-width:100%}
.f3h-tabpane{display:none;width:100%;min-width:0;max-width:100%}
.f3h-tabpane.is-active{display:block}

/* === Collaborazioni (loghi brand, COLORATI) === */
.f3h-brands{margin-top:28px;min-width:0;max-width:100%}
.f3h-brands-marquee .f3h-marquee-track{gap:0;animation-duration:45s}
.f3h-brand{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:100px;padding:0 38px}
.f3h-brand img{max-height:72px;max-width:180px;width:auto;height:auto;object-fit:contain;transition:transform .25s}
.f3h-brand:hover img{transform:scale(1.08)}

/* === Modelli in evidenza (scroller WooCommerce) === */
.f3h-featured{margin-top:28px;min-width:0;max-width:100%}
.f3h-featured-title{text-align:center;color:#1d2327;font-size:1.6rem;margin:0 0 16px}
.f3h-products-wrap{position:relative;min-width:0;max-width:100%;overflow:hidden}
.f3h-products{display:flex;gap:16px;min-width:0;max-width:100%;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:4px 2px 14px;-ms-overflow-style:none;scrollbar-width:none}
.f3h-products::-webkit-scrollbar{display:none}
.f3h-product{flex:0 0 calc(25% - 12px);min-width:0;scroll-snap-align:start;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.12);display:flex;flex-direction:column;padding-bottom:14px;transition:transform .2s,box-shadow .2s}
.f3h-product:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.22)}
.f3h-product-img{display:block}
.f3h-product-img img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover}
.f3h-product-name{display:block;padding:12px 14px 6px;color:#1d2327;font-weight:600;font-size:.98rem;text-decoration:none;line-height:1.3}
.f3h-product-price{padding:0 14px;color:#1d2327;font-weight:700;margin-bottom:10px}
.f3h-product .button,.f3h-product .added_to_cart{margin:0 14px;text-align:center;text-decoration:none}
/* Card modello curata */
.f3h-mcard{flex:0 0 calc(25% - 12px);min-width:0;scroll-snap-align:start;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.12);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.f3h-mcard:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.22)}
.f3h-mcard-img{display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:#f3f4f6}
.f3h-mcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.f3h-mcard-noimg{display:flex;align-items:center;justify-content:center;color:#9aa0a6;font-size:2.6rem}
.f3h-mcard-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.f3h-mcard-title{margin:0;color:#1d2327;font-size:1.05rem;font-weight:700;line-height:1.3}
.f3h-mcard-desc{margin:0;color:#50575e;font-size:.9rem;line-height:1.4}
.f3h-mcard-btn{margin-top:auto;align-self:flex-start;display:inline-block;padding:8px 16px;border-radius:8px;background:#2B6CB0;color:#fff;font-weight:700;font-size:.88rem;text-decoration:none;transition:background .2s}
.f3h-mcard-btn:hover{background:#21558c;color:#fff}

.f3h-parrow{position:absolute;top:38%;z-index:3;width:42px;height:42px;min-width:42px;padding:0;border:none;border-radius:50%;background:rgba(29,35,39,.85);color:#fff;font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:background .2s}
.f3h-parrow:hover{background:#1d2327}
.f3h-pprev{left:4px}
.f3h-pnext{right:4px}

/* === Mobile === */
@media (max-width:781px){
  .f3h-hero{--f3h-h:300px;flex-direction:column;gap:12px}
  .f3h-product{flex:0 0 calc(60% - 8px)}
  .f3h-mcard{flex:0 0 calc(70% - 8px)}
  .f3h-promos{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .f3h-promo{height:auto;aspect-ratio:2/1}
  .f3h-promo:nth-child(1),.f3h-promo:nth-child(2),.f3h-promo:nth-child(3),.f3h-promo:nth-child(4){grid-column:auto}
  .f3h-bcard{flex:0 0 240px;width:240px}
  .f3h-bcard-img{height:135px}
  .f3h-blogrow-title{font-size:1.3rem}
  .f3h-carousel{flex:none;width:100%;height:auto}
  .f3h-track{height:auto;align-items:center}
  .f3h-slide{height:auto}
  .f3h-slide-link{height:auto}
  .f3h-slide img{height:auto;object-fit:contain;background:rgba(0,0,0,.04)}
  .f3h-side{flex:none;flex-direction:row;height:150px}
  .f3h-side-img{flex:1 1 0;min-width:0;height:100%}
  .f3h-arrow{width:36px;height:36px;min-width:36px;font-size:15px}
  .f3h-services{grid-template-columns:repeat(2,1fr);gap:12px}
  .f3h-service{padding:18px 10px}
  .f3h-service i{font-size:1.8rem}
}