/* Product collection; independent of the existing sections. */
.products-section{background:#EDE3D0;color:#443A2A;padding:75px 5% 80px;scroll-margin-top:20px}
.products-inner{max-width:1600px;margin:0 auto}
.products-heading{text-align:center;margin:0 auto 26px}
.products-heading>p{font-size:10px;letter-spacing:2px;font-weight:600;color:#9E4A2E;margin:0 0 12px}
.products-heading h2{font:400 clamp(36px,3.2vw,54px)/1.1 Georgia,'Times New Roman',serif;margin:0 0 16px;letter-spacing:-1px}
.products-heading-note{font-size:13px;line-height:1.7;color:#70634c}
.products-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:50px clamp(14px,1.7vw,30px)}
.product-tile{min-width:0;text-align:center;--product-color:#C46A3A}
/* Wheat keeps each panel's hue and saturation; only HSL lightness is increased by 10 points. */
.product-wheat{--product-color:#D9A94C}
.product-sienna{--product-color:#9E4A2E}
.product-olive{--product-color:#8A8B5C}
.product-cocoa{--product-color:#4A342A}
.product-cream{--product-color:#DCCBAA}
.product-seafoam{--product-color:#9DB8B2}
.product-lavender{--product-color:#AC9BA6}
.product-graphite{--product-color:#505455}
.product-plum{--product-color:#683C49}
.product-stage{position:relative;isolation:isolate;aspect-ratio:1/1.55;display:flex;align-items:flex-end;justify-content:center;padding-bottom:3%}
.product-stage:after{content:"";position:absolute;left:9%;right:9%;bottom:3%;height:7%;background:radial-gradient(ellipse,#443a2a3d,transparent 68%);filter:blur(5px);z-index:-1;pointer-events:none}
.product-paint{position:absolute;inset:0 1% 12%;overflow:hidden;background:var(--product-color);mask:url('../images/product-brush-mask.webp') center/100% 100% no-repeat;z-index:-2}
.product-paint:after{content:"";position:absolute;inset:0;background:url('../images/product-paint-texture.webp') center/cover;mix-blend-mode:soft-light;opacity:.6}
/* Source alpha is 60%; 0.6 layer opacity gives 36% effective opacity. */
.product-paint:before{content:"";position:absolute;top:0;right:0;width:80%;aspect-ratio:185/215;mask-position:right top;mask-size:contain;mask-repeat:no-repeat;mask-mode:alpha;opacity:.6;z-index:1;pointer-events:none}
/* Each product has its own independently editable wheat color and PNG. */
.product-pumpkin .product-paint:before{background-color:hsl(20.870 54.331% 59.804%);mask-image:url('../images/basak-kelebek.webp')}
.product-wheat .product-paint:before{background-color:hsl(39.574 64.977% 67.451%);mask-image:url('../images/basak-carliston.webp')}
.product-sienna .product-paint:before{background-color:hsl(15 54.902% 50%);mask-image:url('../images/basak-iri-midye.webp')}
.product-olive .product-paint:before{background-color:hsl(61.277 20.346% 55.294%);mask-image:url('../images/basak-fiyonk.webp')}
.product-cocoa .product-paint:before{background-color:hsl(18.750 27.586% 32.745%);mask-image:url('../images/basak-yuksuk.webp')}
.product-cream .product-paint:before{background-color:#E9DDC8;mask-image:url('../images/basak-ince-kesme.webp')}
.product-seafoam .product-paint:before{background-color:#B9CDCA;mask-image:url('../images/basak-dirsek.webp')}
.product-lavender .product-paint:before{background-color:#C4B8C0;mask-image:url('../images/basak-iri-dirsek.webp')}
.product-graphite .product-paint:before{background-color:#697072;mask-image:url('../images/basak-boncuk.webp')}
.product-plum .product-paint:before{background-color:#88505F;mask-image:url('../images/basak-diyadaki.webp')}
.product-stage>img{display:block;width:84%;height:67%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 9px 5px #443a2a33);transform:none;transition:filter .3s ease}
.product-tile:hover .product-stage>img{filter:drop-shadow(0 10px 6px #443a2a40)}
.product-tile h3{font:400 clamp(23px,1.8vw,31px)/1.2 Georgia,'Times New Roman',serif;letter-spacing:1.5px;text-transform:uppercase;margin:13px 0 7px}
.product-tile>p{font:400 13px/1.4 Georgia,serif;letter-spacing:2px;color:#70634c;margin:0}
@media(max-width:991px){.products-section{padding:55px 5% 65px}.products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px}.products-inner{max-width:760px}.product-tile h3{font-size:27px}}
@media(max-width:420px){.products-section{padding:45px 25px 50px}.products-heading{margin-bottom:28px}.products-heading-note{font-size:12px}.products-grid{grid-template-columns:1fr;gap:34px;max-width:310px;margin:0 auto}.product-tile h3{font-size:26px;margin-top:10px}}
@media(prefers-reduced-motion:reduce){.product-stage>img{transition:none}}
