.commerce-shell { width:100%; max-width:1320px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.commerce-showcase { padding:clamp(56px,7vw,96px) 0; background:#f5f3ee; color:#161616; }
.commerce-intro { max-width:740px; margin-bottom:36px; }
.commerce-intro h2 { font-size:clamp(2.4rem,4.6vw,4.4rem); line-height:1; margin:16px 0; }
.commerce-intro p,.commerce-card p,.commerce-copy p { color:#65625d; line-height:1.75; }
.commerce-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.commerce-card { display:flex; flex-direction:column; background:#fff; border:1px solid #e3e0d8; min-width:0; }
.commerce-card__image { position:relative; display:block; background:#eae7df; overflow:hidden; }
.commerce-card__image img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform .3s; }
.commerce-card__image:hover img { transform:scale(1.025); }
.commerce-card__image > span { position:absolute; bottom:14px; left:16px; padding:7px 11px; background:#fff; color:#161616; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; }
.commerce-card__body { padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; flex:1; }
.commerce-card--retail .commerce-card__body { border-top:3px solid #b98c74; }
.commerce-card--wholesale .commerce-card__body { border-top:3px solid #505e55; }
.commerce-card h3 { font-size:clamp(1.8rem,2.6vw,2.5rem); line-height:1.05; margin:12px 0 16px; }
.commerce-card ul { padding:0; list-style:none; margin:20px 0 28px; font-size:.85rem; line-height:1.6; }
.commerce-card li { padding:9px 0; border-bottom:1px solid #eceae4; }
.commerce-button { display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:15px 20px; background:#161616; color:#fff; text-decoration:none; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; margin-top:auto; }
.commerce-button:hover { background:#353535; color:#fff; }
.commerce-button--light { background:transparent; border:1px solid #aaa69d; color:#161616; }
.commerce-button--light:hover { background:#eae7df; color:#161616; }
.commerce-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.commerce-version { background:#fff; }
.commerce-version__hero { padding:clamp(48px,7vw,100px) 0; background:#f5f3ee; }
.commerce-version__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(28px,5vw,64px); }
.commerce-version h1 { font-size:clamp(2.8rem,5.2vw,5.5rem); line-height:.98; margin:18px 0 22px; }
.commerce-version__hero p { color:#65625d; line-height:1.75; max-width:560px; }
.commerce-media { margin:0; min-width:0; }
.commerce-media img,.commerce-media video { display:block; width:100%; height:auto; border:1px solid #e3e0d8; background:#f5f3ee; }
.commerce-media figcaption { color:#777; font-size:.75rem; line-height:1.6; margin-top:12px; }
.commerce-version__nav { padding:18px 0; border-bottom:1px solid #e3e0d8; }
.commerce-version__nav .commerce-shell { display:flex; gap:24px; flex-wrap:wrap; }
.commerce-version__nav a { color:#555; font-size:.8rem; text-decoration:none; }
.commerce-feature { padding:clamp(48px,7vw,88px) 0; border-bottom:1px solid #eceae4; scroll-margin-top:90px; }
.commerce-feature:nth-of-type(even) { background:#fbfaf7; }
.commerce-feature h2 { font-size:clamp(2rem,3.6vw,3.3rem); line-height:1.05; margin:12px 0 20px; }
.commerce-copy ul { padding-left:18px; margin-top:18px; color:#444; line-height:1.8; }
.commerce-feature--reverse .commerce-media { order:-1; }
.commerce-flow { display:grid; gap:0; margin:0; padding:24px; list-style:none; background:#f2f3ee; border:1px solid #e3e0d8; }
.commerce-flow li { display:grid; grid-template-columns:34px minmax(0,1fr); gap:14px; padding:20px 0; border-bottom:1px solid #dcded5; }
.commerce-flow li:last-child { border:0; }
.commerce-flow b { font-size:.8rem; color:#777; }
.commerce-flow strong { display:block; margin-bottom:6px; }
.commerce-flow p { margin:0; font-size:.85rem; color:#65625d; line-height:1.65; }
.commerce-note { font-size:.85rem; line-height:1.7; padding:18px 20px; border-left:2px solid #a89177; background:#f5f3ee; margin-top:24px; color:#555; }
.commerce-comparison { padding:64px 0; background:#f5f3ee; }
.commerce-comparison h2 { font-size:2.5rem; margin-bottom:16px; }
.commerce-button:focus-visible,.commerce-version__nav a:focus-visible { outline:2px solid #a16b43; outline-offset:4px; }
@media(max-width:760px) {
 .commerce-cards,.commerce-version__grid { grid-template-columns:minmax(0,1fr); }
 .commerce-feature--reverse .commerce-media { order:0; }
 .commerce-actions .commerce-button { width:100%; }
 .commerce-version__nav .commerce-shell { gap:12px 20px; }
}
@media(prefers-reduced-motion:reduce) { .commerce-card__image img { transition:none; } }

.home-page > .commerce-showcase { position:relative; z-index:2; }
.commerce-capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.commerce-capability-card { min-width:0; padding:28px; border:1px solid #e3e0d8; background:#fff; }
.commerce-capability-card h3 { font-size:1.65rem; line-height:1.1; margin-bottom:14px; }
.commerce-capability-card p { color:#65625d; line-height:1.75; }
.commerce-capability-card ul { padding-left:18px; margin-top:16px; color:#444; line-height:1.8; font-size:.9rem; }
.commerce-capability-visual { display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,.65fr); align-items:center; gap:28px; margin:0 0 28px; background:#f5f3ee; }
.commerce-capability-visual img { display:block; width:100%; height:auto; }
.commerce-capability-visual figcaption { padding:24px; color:#65625d; line-height:1.8; }
.commerce-recording { margin-top:28px; border:1px solid #e3e0d8; background:#fff; padding:20px; }
.commerce-recording summary { cursor:pointer; font-size:.9rem; }
.commerce-recording[open] summary { margin-bottom:20px; }
@media(max-width:760px) { .commerce-capability-grid,.commerce-capability-visual { grid-template-columns:minmax(0,1fr); } .commerce-capability-card { padding:22px; } .commerce-capability-visual { gap:0; } }

.commerce-sample-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:28px; }
.commerce-sample-gallery a { display:block; }
@media(max-width:760px) { .commerce-sample-gallery { grid-template-columns:minmax(0,1fr); } }