/* Marin Life - Hero + servizi + acquari + promo + banner + about + prodotti + brand + alimentazione (tab). Fondo trasparente (pesci dietro). */

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

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

/* Immagini laterali */
.mlh-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px;height:var(--mlh-h)}
.mlh-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)}
.mlh-side-link{display:block;width:100%;height:100%}
.mlh-side-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Placeholder */
.mlh-empty{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;min-height:80px;background:rgba(255,255,255,.15);border:2px dashed rgba(255,255,255,.6);color:#1E3A8A;font-weight:600;padding:10px}

/* Frecce hero */
.mlh-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}
.mlh-arrow:hover{background:rgba(0,0,0,.65)}
.mlh-prev{left:12px}
.mlh-next{right:12px}

/* Dots */
.mlh-dots{position:absolute;left:0;right:0;bottom:12px;z-index:3;display:flex;justify-content:center;gap:8px}
.mlh-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}
.mlh-dots button.is-active{background:#fff;transform:scale(1.25)}

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

/* === Acquari (vetrina, contenitore traslucido) — immagine sopra, testo traslucido sotto === */
.mlh-aquariums{margin-top:16px}
.mlh-aq-heading{text-align:center;color:#1E3A8A;font-size:1.7rem;margin:0 0 18px}
.mlh-aq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mlh-aq{display:flex;flex-direction:column;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.2);transition:transform .2s,box-shadow .2s}
.mlh-aq,.mlh-aq:hover,.mlh-aq .mlh-aq-title{text-decoration:none!important;border-bottom:0!important}
.mlh-aq:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,.3)}
.mlh-aq img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.mlh-aq-title{padding:14px 12px;color:#0f2a52;font-weight:700;font-size:1.05rem;text-align:center;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);border:1px solid rgba(30,58,138,.4);border-top:none}

/* === Alimentazione (tab + prodotti) — width:100%/min-width:0 perché .content-section è flex (align-items:center) === */
.mlh-foodtabs{margin-top:16px;width:100%;min-width:0;max-width:100%}
.mlh-foodtabs-sub{text-align:center;color:#0f2a52;margin:-6px 0 18px;font-size:1.02rem}
.mlh-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:20px;width:100%;max-width:100%}
.mlh-tab{appearance:none;-webkit-appearance:none;border:1px solid rgba(30,58,138,.4);background:rgba(255,255,255,.2);backdrop-filter:blur(4px);color:#1E3A8A;font-weight:700;font-size:1rem;padding:10px 24px;border-radius:30px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.mlh-tab:hover{background:rgba(255,255,255,.42)}
.mlh-tab.is-active{background:#1E3A8A;color:#fff;box-shadow:0 6px 16px rgba(30,58,138,.35)}
.mlh-tabpanes{width:100%;min-width:0;max-width:100%}
.mlh-tabpane{display:none;width:100%;min-width:0;max-width:100%}
.mlh-tabpane.is-active{display:block}
.mlh-foodtabs .mlh-products-wrap{width:100%;min-width:0;max-width:100%}
/* immagini food uniformi: mostra tutto il prodotto (contain), niente zoom */
.mlh-foodtabs .mlh-product-img{background:#fff}
.mlh-foodtabs .mlh-product-img img{object-fit:contain;padding:10px;aspect-ratio:1/1}

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

/* === Banner grande (in container traslucido, rimpicciolito e centrato) === */
.mlh-single{position:relative;display:block;width:100%;max-width:1000px;margin:16px auto 0;padding:14px;border-radius:12px;background:rgba(255,255,255,.18);border:1px solid rgba(30,58,138,.3);backdrop-filter:blur(4px);box-shadow:0 4px 14px rgba(0,0,0,.12);text-decoration:none;box-sizing:border-box;transition:transform .25s,box-shadow .25s}
.mlh-single:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.2)}
.mlh-single img{width:100%;height:auto;display:block;border-radius:8px}
.mlh-banner-txt{position:absolute;left:14px;right:14px;bottom:14px;padding:16px 14px;color:#fff;font-weight:700;font-size:1.3rem;text-align:center;border-radius:0 0 8px 8px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 100%)}

/* === Card presentazione === */
.mlh-about{margin-top:16px;padding:32px 28px;border-radius:12px;background:rgba(255,255,255,.2);border:2px solid #1E3A8A;backdrop-filter:blur(5px);color:#0f2a52;text-align:center}
.mlh-about h2{margin:0 0 14px;color:#1E3A8A;font-size:1.9rem}
.mlh-about-body{font-size:1.05rem;line-height:1.6;max-width:820px;margin:0 auto}

/* === Prodotti in evidenza === */
.mlh-featured{margin-top:24px;min-width:0;max-width:100%}
.mlh-featured-title{text-align:center;color:#1E3A8A;font-size:1.7rem;margin:0 0 16px}
.mlh-products-wrap{position:relative;min-width:0;max-width:100%;overflow:hidden}
.mlh-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}
.mlh-products::-webkit-scrollbar{display:none}
.mlh-product{flex:0 0 calc(25% - 12px);min-width:0;scroll-snap-align:start;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.15);display:flex;flex-direction:column;padding-bottom:14px;transition:transform .2s,box-shadow .2s}
.mlh-product:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,.25)}
.mlh-product-img{display:block}
.mlh-product-img img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover}
.mlh-product-name{display:block;padding:12px 14px 6px;color:#1d2327;font-weight:600;font-size:.98rem;text-decoration:none;line-height:1.3}
.mlh-product-price{padding:0 14px;color:#1E3A8A;font-weight:700;margin-bottom:10px}
.mlh-product .button,.mlh-product .added_to_cart{margin:0 14px;text-align:center;text-decoration:none}
.mlh-parrow{position:absolute;top:38%;z-index:3;width:42px;height:42px;min-width:42px;padding:0;border:none;border-radius:50%;background:rgba(30,58,138,.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}
.mlh-parrow:hover{background:#1E3A8A}
.mlh-pprev{left:4px}
.mlh-pnext{right:4px}

/* === Marquee condiviso (nuovi prodotti + brand) === */
.mlh-new,.mlh-brands{margin-top:28px;min-width:0;max-width:100%}
.mlh-marquee{position:relative;overflow:hidden;width:100%;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mlh-marquee-track{display:flex;gap:16px;width:max-content;padding:4px 0 14px;animation:mlh-scroll 60s linear infinite}
.mlh-marquee:hover .mlh-marquee-track{animation-play-state:paused}
.mlh-nproduct{flex:0 0 240px;width:240px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.15);display:flex;flex-direction:column;padding-bottom:14px;transition:transform .2s,box-shadow .2s}
.mlh-nproduct:hover{transform:translateY(-4px);box-shadow:0 10px 22px rgba(0,0,0,.25)}
@keyframes mlh-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mlh-marquee-track{animation:none}}

/* === Collaborazioni (loghi brand) === */
.mlh-brands-marquee .mlh-marquee-track{gap:0;animation-duration:45s}
.mlh-brand{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:90px;padding:0 38px}
.mlh-brand img{max-height:64px;max-width:170px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.7;transition:filter .25s,opacity .25s}
.mlh-brand:hover img{filter:grayscale(0);opacity:1}

/* === Mobile === */
@media (max-width:781px){
  .mlh-hero{--mlh-h:300px;flex-direction:column;gap:12px}
  /* Carosello mobile: niente crop, altezza segue immagine reale */
  .mlh-carousel{flex:none;width:100%;height:auto}
  .mlh-track{height:auto;align-items:center}
  .mlh-slide{height:auto}
  .mlh-slide-link{height:auto}
  .mlh-slide img{height:auto;object-fit:contain;background:rgba(255,255,255,.06)}
  .mlh-side{flex:none;flex-direction:row;height:150px}
  .mlh-side-img{flex:1 1 0;min-width:0;height:100%}
  .mlh-arrow{width:36px;height:36px;min-width:36px;font-size:15px}
  .mlh-services{grid-template-columns:repeat(2,1fr);gap:12px}
  .mlh-service{padding:18px 10px}
  .mlh-service i{font-size:1.8rem}
  .mlh-aq-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .mlh-tab{padding:8px 16px;font-size:.92rem}
  .mlh-promos{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
  .mlh-promo{height:auto;aspect-ratio:2/1}
  .mlh-promo:nth-child(1),.mlh-promo:nth-child(2),.mlh-promo:nth-child(3),.mlh-promo:nth-child(4){grid-column:auto}
  .mlh-single{max-width:100%;padding:10px}
  .mlh-banner-txt{left:10px;right:10px;bottom:10px;font-size:1.05rem;padding:12px 10px}
  .mlh-product{flex:0 0 calc(60% - 8px)}
  .mlh-nproduct{flex:0 0 160px;width:160px}
  .mlh-brand{height:70px;padding:0 24px}
  .mlh-brand img{max-height:46px;max-width:120px}
  .mlh-about{padding:24px 18px}
  .mlh-about h2{font-size:1.5rem}
}