.page { width: min(100%, var(--container)); min-height: 100vh; margin-inline: auto; overflow: clip; background: var(--color-canvas); }
.section { padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vw, 6.25rem); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.site-main { min-height: 50vh; }
.breadcrumb { padding: 1.25rem clamp(1.25rem, 4vw, 3rem) 0; font-size: .875rem; color: var(--color-ink-soft); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li:not(:last-child)::after { margin-left: .4rem; content: "/"; color: #8994a3; }
@media (max-width: 68.75rem) { .hero, .product-main { grid-template-columns: 1fr !important; } .product-main > div[style*="sticky"] { position: static !important; } }
@media (max-width: 47.5rem) { .section, section[style], footer[style] { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } section[style*="margin:0 48px"] { margin-left: 1.25rem !important; margin-right: 1.25rem !important; } .grid { grid-template-columns: 1fr; } }