/* Fluid layout; retains RECA HOME's existing typography, colours and collection. */
:root{--gutter:clamp(20px,5vw,80px)}
html{scroll-padding-top:24px;-webkit-text-size-adjust:100%}
body{min-width:280px;overflow-wrap:break-word}
header{padding-inline:var(--gutter);flex-wrap:wrap;row-gap:14px}
header .brand{white-space:nowrap;flex-shrink:0}
nav{flex-wrap:wrap;align-items:center;gap:8px clamp(16px,2.2vw,30px)}
nav a{display:inline-flex;align-items:center;min-height:44px}
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(520px,46vw,720px);max-width:1800px;margin-inline:auto}
.hero-copy{min-width:0;padding:clamp(48px,6vw,100px) clamp(24px,5vw,90px)}
h1{font-size:clamp(48px,6.5vw,100px)}
.hero>img{height:100%;min-height:520px;max-height:760px;min-width:0}
.section{padding:clamp(56px,6vw,96px) var(--gutter)}
.about{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px)}
.about>div,.about>img,.product,.photo,.contact>div{min-width:0}
.about>div{max-width:660px}
.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.5vw,52px)}
.photo img{max-width:100%}
.product h3{font-size:clamp(27px,2.5vw,38px);line-height:1.2}
.product .button{max-width:100%;min-height:46px;line-height:1.4;vertical-align:top}
.swatches{flex-wrap:wrap;gap:8px}
.swatches button,.filters button{min-height:44px;line-height:1.35}
.filters{gap:8px;margin-bottom:28px}
.contact{flex-wrap:wrap}
.contact .button{flex-shrink:0}
footer{padding:30px var(--gutter) calc(94px + env(safe-area-inset-bottom,0px));align-items:center;flex-wrap:wrap}
@media(min-width:1600px){.section{padding-inline:max(var(--gutter),calc((100vw - 1520px)/2))}header,footer{padding-inline:max(var(--gutter),calc((100vw - 1600px)/2))}}
@media(max-width:1000px){
 .hero-copy{padding-inline:var(--gutter)}
 .hero{min-height:520px}
 .about{gap:32px}
 .about p{line-height:1.75}
 .contact h2{font-size:clamp(34px,4.4vw,52px)}
}
@media(max-width:760px){
 .hero{grid-template-columns:1fr;min-height:0}
 .hero-copy{padding:56px var(--gutter) 48px}
 h1{font-size:clamp(48px,10.5vw,76px);margin:24px 0}
 .hero>img{height:clamp(340px,75vw,560px);min-height:0;max-height:none;object-position:center 55%}
 .about{grid-template-columns:1fr;gap:32px}
 .about>img{width:100%;max-height:540px;object-position:center 65%}
 .about>div{max-width:none}
 .contact{display:block}
 .contact h2{font-size:clamp(34px,7vw,52px)}
 .products{gap:36px 24px}
 footer{align-items:flex-start}
}
@media(max-width:600px){
 header{padding-block:18px 12px;gap:8px}
 header .brand{font-size:20px}
 nav{width:100%;justify-content:space-between;gap:8px;font-size:13px}
 nav a:first-child{display:inline-flex}
 .hero-copy{padding-top:40px}
 .hero-copy>p{font-size:15px;max-width:33em}
 h1{font-size:clamp(46px,12vw,66px)}
 h2{font-size:clamp(33px,8vw,44px);line-height:1.15}
 .products{grid-template-columns:minmax(0,1fr);gap:42px}
 .product h3{font-size:30px}
 .product .button{padding:14px 18px}
 .filters button{padding:11px 13px;font-size:12px}
 .about>img{max-height:460px}
 footer{gap:16px}
}
@media(max-width:360px){.product .cart-add,.product a.button{display:block;width:100%;text-align:center;margin-right:0!important}.filters{gap:6px}.filters button{padding-inline:10px}.hero>img{height:340px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
