/* Open architectural rooms, paired with readable glass storefronts. */
.commerce-live[hidden],.commerce-live [hidden],.glass-artwork[hidden]{display:none!important}
.glass-scene[data-commerce-hero]{position:relative;isolation:isolate}
.glass-scene[data-commerce-hero]:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:12px}
#commerce-help{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.commerce-live{position:absolute;inset:0;perspective:1100px}
.commerce-canvas{position:absolute;inset:-7% -7% 0 -3%;overflow:hidden;mask-image:linear-gradient(transparent,#000 6%,#000 84%,transparent 98%)}
.commerce-canvas canvas{width:100%;height:100%;display:block}
.commerce-panel-stack{position:absolute;z-index:3;left:1%;top:32%;width:50%;transform:perspective(900px) rotateY(var(--panel-turn,-8deg)) rotateZ(-2deg);transform-origin:70% 50%;will-change:transform;filter:drop-shadow(0 18px 18px #102a361b)}
.commerce-panel{border:1px solid #73b8c599;background:linear-gradient(135deg,#fafffff7,#edf8f5ed);border-radius:10px;overflow:hidden;box-shadow:inset 2px 2px 2px #fff,0 1px 0 #fff;backdrop-filter:blur(12px);padding:12px}
.commerce-panel-head{display:flex;align-items:center;gap:8px;border-bottom:1px solid #c7dfe0;padding-bottom:8px;margin-bottom:10px;font-size:11px;font-weight:600}
.commerce-panel-head img{width:20px;height:20px;border-radius:5px;object-fit:contain}
.commerce-panel-head>small{font-size:8px;font-weight:500;letter-spacing:.03em;color:var(--muted);margin-left:auto}
.commerce-panel h3{font-size:18px;line-height:1.2;margin-bottom:8px;letter-spacing:-.04em}
.commerce-panel p{color:var(--ink-soft);font-size:10px;line-height:1.5}
.commerce-panel-link{display:inline-flex;align-items:center;gap:16px;min-height:36px;font-size:10px;color:var(--accent);text-decoration:none;font-weight:600;margin-top:6px}
.commerce-panel-link:hover{text-decoration:underline}
.commerce-panel footer{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #d5e2e3;padding-top:6px;font-size:8px;line-height:1.3;color:var(--muted)}
.commerce-table{border-collapse:collapse;width:100%;font-size:9px;margin-bottom:10px}
.commerce-table td,.commerce-table th{border-bottom:1px solid #d5e2e377;padding:6px 3px;text-align:left;font-weight:400}
.commerce-table th{font-size:8px;color:var(--muted)}.commerce-table td:last-child{text-align:right}
.commerce-chip{padding:4px 6px;border-radius:4px;background:#ddefef;color:#086470;white-space:nowrap;font-size:8px}
.commerce-chip.attention{background:#f2e5d5;color:#785431}
.commerce-metric{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #d5e2e388;font-size:10px;line-height:1.4;color:var(--ink-soft)}
.commerce-metric b{font-weight:600;color:var(--ink)}
/* Three distinct website concepts, with a real storefront hierarchy. */
.coffee-site,.storefront-site{padding:12px 14px;position:relative;min-height:185px;overflow:hidden;border-radius:3px}
.storefront-nav{display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid currentColor;padding-bottom:8px;margin-bottom:16px;color:inherit}
.storefront-nav b{font-size:9px;letter-spacing:.08em}.storefront-nav span{font-size:6px;letter-spacing:.02em}
.commerce-panel .coffee-site h3,.commerce-panel .storefront-site h3{font-family:Georgia,serif;font-weight:400;font-size:27px;line-height:1.06;letter-spacing:-.055em;margin:0 0 9px;width:63%;color:inherit}
.commerce-panel .coffee-site p,.commerce-panel .storefront-site p{font-size:8px;max-width:56%;color:inherit;opacity:.8}
.storefront-cta{display:inline-block;font-size:7px;line-height:1.4;border-bottom:1px solid currentColor;padding-bottom:3px;margin-top:11px;color:inherit}
.coffee-site{background:#f0f1e8;color:#244b44}
.coffee-bag{position:absolute;right:14px;top:62px;width:27%;height:107px;transform:rotate(8deg);border-radius:5px 5px 12px 12px;background:linear-gradient(100deg,#204f47,#397c6d 30%,#244f47);box-shadow:6px 10px 12px #244b4430;border-top:6px solid #527569}
.coffee-bag::before{content:"NORTH\A COFFEE";white-space:pre;position:absolute;top:25%;left:8%;right:8%;padding:9px 0;background:#f2eee1;color:#31554d;text-align:center;font-size:9px;line-height:1.6;letter-spacing:.1em}
.coffee-bag::after{content:"250g";position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#d1dace;font-size:7px}
.fashion-site{background:#eeeae2;color:#272f30}.commerce-panel .fashion-site h3{font-family:Arial,sans-serif;font-weight:500;font-size:26px;letter-spacing:-.075em}
.fashion-art{position:absolute;right:8px;top:54px;width:35%;height:119px;background:linear-gradient(130deg,#d4c9b9,#e1d9cd);overflow:hidden}
.fashion-shirt{position:absolute;width:66%;height:74%;left:15%;top:9%;background:linear-gradient(90deg,#cfc4b2,#fffaf0 45%,#e9dfd0 65%,#b9ae9d);clip-path:polygon(32% 0,45% 8%,58% 0,78% 11%,100% 48%,83% 56%,70% 31%,77% 100%,12% 100%,21% 30%,9% 54%,0 45%,17% 11%);transform:rotate(-8deg)}
.fashion-trousers{position:absolute;width:28%;height:61%;right:-2%;bottom:-15%;background:#294953;transform:rotate(-20deg);clip-path:polygon(0 0,100% 0,100% 100%,58% 100%,48% 28%,35% 100%,0 100%)}
.fashion-art>span{position:absolute;left:7px;bottom:7px;font-size:4px;letter-spacing:.12em}
.florist-site{background:#eaf0e3;color:#354e3c}.floral-art{position:absolute;right:7px;top:63px;width:35%;height:106px}
.floral-art i{position:absolute;width:43%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#c9a136 12%,transparent 15%),radial-gradient(ellipse at 50% 25%,#e8a9a1 31%,transparent 33%),radial-gradient(ellipse at 25% 64%,#d78c89 36%,transparent 38%),radial-gradient(ellipse at 75% 64%,#f1c1b0 36%,transparent 38%);z-index:2}
.floral-art i:nth-child(1){top:0;left:27%}.floral-art i:nth-child(2){top:20%;left:0;transform:rotate(-20deg)}.floral-art i:nth-child(3){top:25%;right:0;transform:rotate(20deg)}.floral-art i:nth-child(4){top:39%;left:22%;transform:scale(.9)}.floral-art i:nth-child(5){top:7%;right:0;transform:scale(.7)}
.floral-art span{position:absolute;inset:30% 7% 0;background:linear-gradient(115deg,#789064 10%,#a6b293 32%,#ddd1b6 34%,#f2e9d5 55%,#cebd9a 85%);clip-path:polygon(0 0,50% 20%,100% 0,67% 100%,35% 100%);transform:rotate(-6deg)}
.commerce-ready>.glass-artwork{visibility:hidden}
.vector-home .hero-baseline{margin-top:0}
@media(min-width:681px) and (max-width:1000px){
 .vector-home .glass-scene[data-commerce-hero]{aspect-ratio:.86}.commerce-panel-stack{width:60%;left:1%;top:25%}
 .commerce-panel-head>small{font-size:6px}.commerce-panel{padding:10px}.commerce-panel h3{font-size:17px}
 .coffee-site,.storefront-site{padding:10px;min-height:168px}.commerce-panel .coffee-site h3,.commerce-panel .storefront-site h3{font-size:23px}
 .coffee-bag{height:90px;top:55px}.fashion-art{height:105px}.floral-art{height:95px}
}
/* Keep the opening message clear at tablet widths. The artwork can use the full
   row here instead of projecting its glass card over the last line of copy. */
@media(min-width:681px) and (max-width:1100px){
 .vector-home .hero-layout{grid-template-columns:minmax(0,1fr);gap:0;min-height:0}
 .vector-home .hero-copy{padding:35px 0 0}
 .vector-home .hero-copy .lede{max-width:600px}
 .vector-home .glass-scene[data-commerce-hero]{width:min(100%,700px);height:auto;margin:8px auto 0;aspect-ratio:1}
}
@media(max-width:680px){
 .vector-home .glass-scene[data-commerce-hero]{aspect-ratio:.86;margin-top:15px}.commerce-canvas{inset:-4% -7% 0 -2%;mask-image:linear-gradient(transparent,#000 6%,#000 84%,transparent 98%)}
 .commerce-panel-stack{left:1%;top:24%;width:59%;transform:perspective(700px) rotateY(var(--panel-turn,-8deg)) rotateZ(-2deg)}
 .commerce-panel{padding:9px;border-radius:7px}.commerce-panel-head{padding-bottom:6px;margin-bottom:8px;font-size:9px;gap:6px}.commerce-panel-head img{width:18px;height:18px}.commerce-panel-head>small{font-size:6px;letter-spacing:0}
 .commerce-panel h3{font-size:16px;line-height:1.2;margin-bottom:6px}.commerce-metric{font-size:8px;padding:5px 0}.commerce-table{font-size:8px}.commerce-table td,.commerce-table th{padding:5px 2px}.commerce-chip{font-size:7px;padding:3px}
 .commerce-panel-link{min-height:32px;margin-top:4px;font-size:8px;gap:8px}.commerce-panel footer{font-size:7px;padding-top:5px}
 .coffee-site,.storefront-site{padding:9px;min-height:158px}.storefront-nav{margin-bottom:13px}.storefront-nav b{font-size:7px}.storefront-nav span{font-size:4px}
 .commerce-panel .coffee-site h3,.commerce-panel .storefront-site h3{font-size:21px}.commerce-panel .coffee-site p,.commerce-panel .storefront-site p{font-size:6px}.storefront-cta{font-size:6px;margin-top:8px}
 .coffee-bag{top:54px;right:8px;height:80px}.coffee-bag::before{font-size:6px;padding:6px 0}.coffee-bag::after{font-size:5px}.fashion-art{height:92px;top:49px}.floral-art{height:90px;top:54px}
}
@media(min-width:500px) and (max-width:680px){.vector-home .glass-scene[data-commerce-hero]{width:100%;margin:15px auto 0}}
@media(max-width:380px){.vector-home .glass-scene[data-commerce-hero]{aspect-ratio:.78}.commerce-panel-stack{top:22%}.commerce-panel-head>small{font-size:5px}.commerce-panel-head{gap:4px;font-size:8px}.commerce-panel footer{font-size:6px}}
@media(prefers-reduced-motion:reduce){.commerce-panel-stack{will-change:auto}}