/* Visual-only layer. Ordering, pricing, product swatches and access policies stay unchanged. */
body{background-color:#fff;background-image:linear-gradient(150deg,rgba(248,244,241,.62),transparent 45%);background-attachment:fixed}
body>header{border-bottom-color:#e8dfdb;box-shadow:0 3px 16px #35271b06}
body>footer{border-top:1px solid #e8dfdb;background:#faf8f6}
.hero.front-banner{border-radius:18px;box-shadow:0 14px 35px #39291d08}
.showcase-hero-photo{grid-column:1/-1;position:relative;margin:0 calc(-1 * var(--showcase-inset,36px));width:calc(100% + 2 * var(--showcase-inset,36px));height:clamp(190px,26vw,350px);overflow:hidden;background:#e9e8e2}
.showcase-hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.showcase-hero-photo figcaption{position:absolute;left:18px;bottom:14px;max-width:calc(100% - 36px);background:#fffef4ed;border-left:3px solid #bd1c2b;color:#362c29;padding:10px 13px;font-size:11px;line-height:1.5;letter-spacing:1.1px;font-weight:750;border-radius:3px}
.showcase-hero-photo figcaption span{display:block;font-size:10px;letter-spacing:0;font-weight:500}
.hero.front-banner:has(.showcase-hero-photo){padding-top:0}
.showcase-banner{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:hidden;margin:20px 0 16px;padding:25px 28px;border:1px solid #eaded9;border-left:4px solid #bd1c2b;border-radius:12px;background:#f9f5f1;min-height:145px;color:#302b29}
.showcase-banner>div{position:relative;z-index:1;max-width:68ch}.showcase-banner h2{font-size:clamp(23px,2.4vw,31px);line-height:1.15;margin:8px 0 10px;letter-spacing:-.6px;color:#302b29}.showcase-banner p{font-size:14px;line-height:1.6;margin:0;color:#5b514c}.showcase-kicker,.showcase-banner .showcase-kicker{color:#92202c;font-size:10px;font-weight:750;letter-spacing:1.6px;line-height:1.5;margin:0 0 8px}
.showcase-ribs{position:absolute;inset:0 0 0 auto;z-index:0;width:32%;transform:skewX(-15deg) translateX(25%);background:repeating-linear-gradient(90deg,#e7e1dd 0,#e7e1dd 2px,#f4efeb 3px,#f4efeb 19px,#ded4ce 20px,#faf7f4 23px);opacity:.65;mask-image:linear-gradient(90deg,transparent,#000)}
.showcase-banner-home{background:linear-gradient(90deg,#faf6f2 0%,#faf6f2ed 62%,#faf6f288),url('/images/showcase/home-metal-hero-v2.webp') center 55%/cover}.showcase-banner-home .showcase-ribs{display:none}
.showcase-banner-trim .showcase-ribs{background:repeating-linear-gradient(135deg,#f5e9e4 0,#f5e9e4 18px,#d6bfb4 19px,#fcf8f5 22px);opacity:.75}
.showcase-banner-compact{margin:0 0 24px;min-height:140px;padding:24px 28px}.showcase-banner-compact h2{font-size:clamp(23px,3vw,32px)}
.showcase-inspiration{margin:0 0 20px;border:1px solid #e5dbd6;border-radius:12px;background:#fff;overflow:hidden}.showcase-inspiration>summary{cursor:pointer;padding:17px 20px;color:#82202c;font-weight:700;font-size:14px;min-height:48px}.showcase-inspiration[open]>summary{border-bottom:1px solid #eee7e3}.showcase-examples{padding:22px}.showcase-section-heading h2{font-size:clamp(23px,3vw,30px);letter-spacing:-.6px;margin:0 0 8px}.showcase-section-heading>p:not(.showcase-kicker){font-size:14px;line-height:1.6;color:#665a54;margin:0 0 22px}.showcase-example-grid{display:grid;grid-template-columns:1fr;gap:20px}.showcase-example-grid figure{margin:0;border:1px solid #e6dfdb;border-radius:10px;overflow:hidden;background:#fff}.showcase-example-grid figure>a{display:block;background:#f0eeea;line-height:0}.showcase-example-grid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}.showcase-example-grid figcaption{padding:18px}.showcase-example-grid h3{font-size:19px;margin:0 0 7px;color:#302b29}.showcase-example-grid p{margin:0;font-size:14px;line-height:1.6;color:#62564f}.showcase-comparison-labels{display:grid;grid-template-columns:1fr 1fr;background:#f6f2ef;border-top:1px solid #e6dfdb;border-bottom:1px solid #e6dfdb}.showcase-comparison-labels span{padding:10px 12px;text-align:center;font-size:10px;line-height:1.5;letter-spacing:.5px;font-weight:750;color:#4b413c}.showcase-comparison-labels span+span{border-left:1px solid #ddd2cb;color:#92202c;background:#fff7f5}.showcase-examples .showcase-disclosure{font-size:12px;line-height:1.7;color:#665a54;margin:18px 0 0}
@media(min-width:1200px){.showcase-example-grid{grid-template-columns:1fr 1fr}.showcase-example-grid img{aspect-ratio:3/2}}
@media(max-width:620px){.showcase-hero-photo{height:220px}.showcase-hero-photo figcaption{left:12px;bottom:12px;font-size:10px}.showcase-banner,.showcase-banner-compact{padding:20px;min-height:120px}.showcase-banner>div{max-width:100%}.showcase-ribs{opacity:.35}.showcase-banner h2{font-size:25px}.showcase-examples{padding:16px}.showcase-section-heading h2{font-size:25px}.showcase-comparison-labels span{padding:8px 5px;font-size:9px}.showcase-example-grid figcaption{padding:15px}.showcase-banner-home{background:linear-gradient(90deg,#faf6f2f7,#faf6f2da),url('/images/showcase/home-metal-hero-v2.webp') center/cover}}
@media print{body{background:#fff!important}.showcase-hero-photo,.showcase-banner,.showcase-inspiration,.showcase-examples{display:none!important}}

.showcase-skip{display:inline-flex;align-items:center;gap:18px;margin:0 0 14px;padding:12px 16px;border:1px solid #b81f2c;border-radius:7px;color:#981c28;background:#fff;text-decoration:none;font-size:14px;font-weight:700;min-height:48px}#sheet-options{scroll-margin-top:20px}
@media(max-width:900px){.hero.front-banner{--showcase-inset:28px}}@media(max-width:650px){.hero.front-banner{--showcase-inset:22px}}
@media print{.showcase-skip{display:none!important}}
