:root{--products-paper:#ded9d2;--products-ink:#151d1c}
.products-page{background:#fff;color:var(--products-ink)}
.products-page .products-header{background:rgba(255,255,255,.98);color:#111;box-shadow:0 1px 8px rgba(0,0,0,.06)}
.products-page .products-header .brand img{filter:none}
.products-page .products-header .header-language{border-color:rgba(0,0,0,.28)}
.products-page main{padding-top:100px}

.product-icon-nav{display:grid;grid-template-columns:repeat(4,1fr);min-height:170px;padding:0 7vw;background:var(--products-paper)}
.product-icon-nav>a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;color:#353b3a;text-transform:uppercase;font-size:11px;letter-spacing:.04em}
.product-icon-nav>a::after{content:"";position:absolute;bottom:23px;width:72px;height:1px;background:currentColor;transform-origin:center;transition:transform .35s}
.product-icon-nav>a:hover::after{transform:scaleX(1.55)}
.product-icon{display:grid;place-items:center;width:180px;height:72px}
.product-icon img{width:180px;height:70px;object-fit:contain;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.product-icon-nav>a:hover .product-icon img{transform:translateY(-4px)}

.product-panels{background:#111}
.product-panel{position:relative;display:block;height:clamp(520px,58vw,690px);overflow:hidden;color:#111;scroll-margin-top:78px}
.product-panel>img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .8s}
.product-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.02) 50%,rgba(0,0,0,.18));pointer-events:none;transition:background .5s}
.product-panel:hover>img{transform:scale(1.018);filter:saturate(1.04)}
.product-panel:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.02) 42%,rgba(0,0,0,.28))}
.product-panel-label{position:absolute;z-index:2;left:6.8vw;bottom:41px;display:flex;align-items:center;justify-content:space-between;min-width:245px;padding:20px 25px;background:rgba(255,255,255,.95);text-transform:uppercase;font-size:16px;font-weight:400;letter-spacing:.035em;box-shadow:0 10px 35px rgba(0,0,0,.08)}
.product-panel-label::after{content:"";position:absolute;left:25px;bottom:13px;width:114px;height:1px;background:currentColor}
.product-panel-label i{margin-left:35px;font-style:normal;font-size:19px;transition:transform .35s}
.product-panel:hover .product-panel-label i{transform:translate(3px,-3px)}
#ombrelloni>img{object-position:center 58%}
#lettini>img{object-position:center 53%}
#gazebo>img{object-position:center 48%}
#arredi>img{object-position:center 54%}

.products-habitats{padding:120px 6vw 130px;background:#f2f0ea}
.products-habitats-head{display:grid;grid-template-columns:.55fr 1.45fr;gap:6vw;align-items:start;margin-bottom:70px}
.products-habitats-head>p{display:flex;align-items:center;gap:13px;margin:12px 0 0;text-transform:uppercase;letter-spacing:.18em;font-size:10px}
.products-habitats-head>p::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.products-habitats-head h2{max-width:970px;margin:0;font:300 clamp(54px,6.3vw,96px)/.9 "Manrope",sans-serif;letter-spacing:-.06em}
.products-habitats-head h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.products-habitat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.products-habitat-grid a{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;color:#fff}
.products-habitat-grid a::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.64),transparent 58%);transition:background .4s}
.products-habitat-grid img{width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.products-habitat-grid a:hover img{transform:scale(1.035)}
.products-habitat-grid a:hover::after{background:linear-gradient(0deg,rgba(0,0,0,.74),rgba(0,0,0,.04) 65%)}
.products-habitat-grid span{position:absolute;z-index:2;left:25px;right:25px;bottom:25px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.65);font:300 clamp(22px,2.15vw,34px)/1 "Manrope",sans-serif;letter-spacing:-.035em}
.products-habitats-link{display:flex;align-items:center;justify-content:space-between;width:max-content;min-width:260px;margin:58px 0 0 auto;padding:16px 0;border-bottom:1px solid currentColor;text-transform:uppercase;letter-spacing:.11em;font-size:12px}
.products-habitats-link span{margin-left:42px;font-size:18px}

@media(max-width:1024px){
  .product-panel{height:570px}
  .products-habitat-grid{grid-template-columns:1fr 1fr}
  .products-habitat-grid a{aspect-ratio:4/3}
}
@media(max-width:820px){
  .products-page main{padding-top:78px}
  .product-icon-nav{min-height:144px;padding:0 16px}
  .product-icon{width:100%;height:66px}
  .product-icon img{width:125px;height:58px}
  .product-icon-nav>a{gap:5px;font-size:9px}
  .product-icon-nav>a::after{bottom:19px;width:48px}
  .product-panel{height:68vh;min-height:480px}
  .product-panel-label{left:20px;bottom:20px;min-width:220px}
  .products-habitats{padding:90px 20px 100px}
  .products-habitats-head{grid-template-columns:1fr;gap:28px;margin-bottom:50px}
  .products-habitats-head h2{font-size:clamp(50px,12vw,74px)}
}
@media(max-width:600px){
  .product-icon-nav{grid-template-columns:1fr 1fr;min-height:250px;padding:10px 12px}
  .product-icon-nav>a{min-height:112px}
  .product-icon-nav>a::after{bottom:10px}
  .product-icon img{width:145px;height:60px}
  .product-panel{height:auto;min-height:0;aspect-ratio:3/2}
  .product-panel-label{right:20px;width:auto;min-width:0;padding:17px 21px;font-size:14px}
  .product-panel-label::after{left:21px;bottom:10px;width:95px}
  .products-habitat-grid{grid-template-columns:1fr;gap:12px}
  .products-habitat-grid a{aspect-ratio:5/4}
  .products-habitat-grid span{font-size:31px}
  .products-habitats-link{width:100%;min-width:0}
}
@media(prefers-reduced-motion:reduce){
  .product-icon img,.product-panel>img,.product-panel-label i,.products-habitat-grid img{transition:none}
}