/* Capoli 3D, visual 02. Media wrappers own the ratio, never the image attributes. */
:root{--paper:#fff9ed}
body{max-width:none}
.header{border-bottom:1px solid #24483b20;box-shadow:0 4px 18px #24483b06}
.hero{position:relative;isolation:isolate;overflow:hidden;background:#dfeadb;padding:64px max(5%,calc((100vw - 1380px)/2));gap:6%;grid-template-columns:1fr 1.12fr}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.hero::before{width:650px;height:650px;border:70px solid #bfd8c2;border-radius:41% 59% 65% 35%;right:-180px;top:-250px;transform:rotate(25deg)}
.hero::after{width:260px;height:230px;background:#d9a441;border-radius:54% 46% 30% 70%;bottom:-160px;left:24%;transform:rotate(-15deg)}
.hero h1{font-size:clamp(48px,5.5vw,86px);position:relative;z-index:1}
.hero h1 em{color:#a3452b}
.hero-copy>p{color:#405b4c;font-size:16px;max-width:370px}
.hero .eyebrow{color:#793c29}
.hero-note{color:#405b4c}
.hero .button{border-radius:40px;box-shadow:0 7px 0 #24483b13;padding-inline:25px}
.hero-art{min-width:0;margin:8px 0 22px}
.hero-photo{position:relative;aspect-ratio:4/3;background:#fff7e8;border:8px solid #fff7e8;border-radius:26px;overflow:hidden;box-shadow:12px 14px 0 #24483b}
.hero-photo>img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;display:block;border-radius:0}
.image-caption{margin-top:24px;border:0;padding-right:115px;color:#24483b}
.maker-seal{position:absolute;bottom:-25px;right:-14px;width:125px;height:125px;border-radius:50%;background:#d9a441;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 0 0 7px #dfeadb;transform:rotate(9deg);color:#24483b}
.maker-seal img{width:44px;height:40px;object-fit:contain}.maker-seal span{text-align:center;font-size:11px;line-height:1.3}
.promise-strip{background:#24483b;border:0;color:#fff7e8;padding:25px 6%;font-size:12px}
.promise-strip span{color:#efbf63}.promise-strip b{color:#fff7e8;font-weight:600}
.palette-ribbon{display:flex;justify-content:center;align-items:center;gap:30px;background:#d9a441;color:#24483b;padding:14px 5%;font:italic 19px Georgia,serif;overflow:hidden}
.palette-ribbon i{width:9px;height:9px;background:#a8482f;border-radius:35% 65% 55% 45%;transform:rotate(25deg);flex-shrink:0}
.collection{max-width:1480px;margin:auto;padding-top:75px}.collection .section-heading h2{font-size:clamp(30px,3.2vw,45px);max-width:580px}
.catalog-tools{padding:18px;background:#e8efdf;border:1px solid #24483b18;border-radius:18px;gap:12px}
.pills button{background:#fffdf6;border-color:#becbb8}.pills button.active{background:#24483b;color:#fff}
.results-caption{margin:22px 3px 16px}
.product-grid{align-items:stretch;gap:22px}
.product-card{background:#fffefa;border:1px solid #24483b22;border-radius:19px;padding:9px 9px 16px;box-shadow:0 6px 0 #24483b08;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s,transform .2s}
.product-card:nth-child(4n+1){border-top:5px solid #c96b4b}
.product-card:nth-child(4n+2){border-top:5px solid #d9a441}
.product-card:nth-child(4n+3){border-top:5px solid #24483b}
.product-card:nth-child(4n+4){border-top:5px solid #bfd8c2}
/* Fix: width/height HTML attributes formerly left the photo 1086px tall. */
.product-image{position:relative;aspect-ratio:4/3;width:100%;height:auto;min-height:0;flex:none;padding:0;border-radius:11px;background:#f1eadc;overflow:hidden}
.product-image img{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain;object-position:center;border-radius:0}
.product-image:hover img{opacity:1}
.product-card .product-category{align-self:flex-start;background:#e5efdf;color:#365042;border-radius:5px;margin:16px 8px 9px;padding:6px 8px;font-size:9px}
.product-card:nth-child(4n+1) .product-category{background:#fae5d9;color:#853b26}.product-card:nth-child(4n+2) .product-category{background:#f9edc6;color:#685018}
.product-card h3,.product-card>p{margin-left:8px;margin-right:8px}.product-card h3{font-size:23px}.product-card>p{flex:1}
.product-bottom{margin:0 8px;padding-top:15px}.product-bottom strong{font-size:17px}.product-bottom button{background:#24483b;color:white;font-weight:500;white-space:nowrap}.product-bottom button:hover{background:#3b6351}
.story{background:#c96b4b;color:#203e32;position:relative;overflow:hidden;border-radius:32px;max-width:1340px;margin:0 auto 65px}
.story .eyebrow{color:#203e32}.story h2{font-size:44px}.story-intro p{color:#203e32}.story .watermark{opacity:.12;width:310px;bottom:-50px}
.steps{background:#fff7e8;border-radius:21px;padding:27px}.steps article{border-color:#daceb9}.steps p{color:#536457}.steps article>span{display:grid;place-items:center;align-self:flex-start;border-radius:50%;background:#d9a441;width:31px;height:31px;padding:0;flex:none;color:#24483b}
footer{background:#24483b;color:#fff7e8}footer p{color:#d2dfd3}footer .brand{background:#fff7e8;color:#24483b;padding:10px 17px;border-radius:14px}footer .plain{color:#fff7e8}
.detail-visual{background:#dfeadb}.detail-visual img{height:auto;aspect-ratio:4/3;object-fit:contain}.order-summary{padding-left:20px;font-size:13px;line-height:1.6}.order-summary li{margin:14px 0}
/* Visible by default: JS only animates elements after they enter the viewport. */
.print-surface,.product-image{isolation:isolate}
.is-printing::after{content:"";position:absolute;z-index:3;left:0;right:0;height:3px;bottom:0;background:#d9a441;box-shadow:0 0 12px #d9a441;pointer-events:none;animation:print-head 1.15s steps(24,end) both}
.is-printing::before{content:"";position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(to top,transparent 0 7px,#fff7e845 7px 8px);pointer-events:none;animation:print-lines 1.15s linear both}
@keyframes print-head{0%{bottom:0;opacity:0}8%{opacity:1}90%{opacity:1}100%{bottom:100%;opacity:0}}
@keyframes print-lines{0%,65%{opacity:1}100%{opacity:0}}
@media(hover:hover){.product-card:hover{transform:translateY(-4px);box-shadow:0 12px 22px #24483b15}}
@media(min-width:1450px){.section-wrap{padding-block:70px}.hero{padding-block:70px}.story{padding:50px}}
@media(max-width:1100px){.product-bottom{flex-direction:column;align-items:stretch;gap:12px}.product-bottom button{width:100%}.story{margin-inline:5%}.hero{gap:5%;padding:45px 5%}.hero h1{font-size:58px}.maker-seal{width:105px;height:105px;right:-5px;bottom:-25px}.maker-seal img{width:35px;height:33px}}
@media(max-width:640px){.hero{grid-template-columns:1fr;padding:35px 6% 42px;gap:30px}.hero h1{font-size:52px}.hero-copy>p{font-size:14px}.hero-art{margin:0 6px 25px 0}.hero-photo{border-width:5px;border-radius:19px;box-shadow:8px 9px 0 #24483b}.image-caption{padding-right:85px;margin-top:14px;min-height:50px;flex-direction:column;align-items:start;gap:0}.image-caption .plain{font-size:10px}.maker-seal{width:94px;height:94px;bottom:-11px;right:-12px;box-shadow:0 0 0 5px #dfeadb}.maker-seal span{font-size:9px}.promise-strip{padding:20px 5%;gap:10px}.promise-strip span{font-size:10px}.palette-ribbon{gap:13px;padding:13px 4%;font-size:14px;flex-wrap:wrap}.palette-ribbon span:last-of-type,.palette-ribbon i:last-child{display:none}.collection{padding-top:40px}.catalog-tools{padding:12px;border-radius:14px}.search-sort{grid-template-columns:1fr 98px}.pills button{font-size:10px;padding:8px 10px}.product-grid{gap:14px 10px}.product-card{padding:5px 5px 12px;border-radius:13px}.product-card h3{font-size:20px}.product-card h3,.product-card>p{margin-inline:4px}.product-card .product-category{font-size:7px;padding:5px;margin-inline:4px;letter-spacing:.06em}.product-bottom{margin-inline:4px}.product-bottom strong{font-size:16px}.product-bottom button{padding:12px 6px;font-size:10px}.product-image{border-radius:8px}.story{margin:0 5% 35px;padding:27px 22px;border-radius:23px}.story h2{font-size:35px}.steps{padding:20px 17px}.steps article{gap:12px}.steps h3{font-size:22px}.story .watermark{width:220px}.detail-visual img{width:100%;height:auto;max-height:none}footer .brand{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.is-printing::after,.is-printing::before{display:none;animation:none!important}.product-card:hover{transform:none}*{animation:none!important;transition:none!important}}