/* One quiet studio surface for Mio categories, objects and product cards. */
.shop-page.sv1 { --shop-frame: #d8d8d2; --shop-surface: #fffefa; --shop-selected: #edf4f1; --shop-frame-ink: #183b34; --shop-relief: 0 2px 0 #d8dbd4, 0 7px 16px #243c3410; }
.shop-page.sv1 .sv1-catnav { gap: 16px; }
.shop-page.sv1 .sv1-cats { gap: 12px; padding: 4px 3px 9px; }
.shop-page.sv1 :is(.sv1-cat, .sv1-sub) { position: relative; border: 1px solid var(--shop-frame); background: var(--shop-surface); box-shadow: var(--shop-relief); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.shop-page.sv1 .sv1-cat { gap: 12px; border-radius: 18px; padding: 9px 10px; min-height: 82px; }
.shop-page.sv1 .sv1-cat__media { width: 60px; height: 60px; flex: 0 0 60px; border-radius: 13px; background: #f4ede2; border: 1px solid #e8e0d4; box-shadow: inset 0 1px 1px #fff; }
.shop-page.sv1 .sv1-cat__media img { object-fit: contain; }
.shop-page.sv1 .sv1-subs { gap: 12px; margin-inline: -3px; padding: 4px 3px 12px; scroll-padding-inline: 3px; }
.shop-page.sv1 .sv1-sub { width: 114px; min-height: 146px; padding: 9px 8px 11px; gap: 9px; border-radius: 19px; }
.shop-page.sv1 .sv1-sub__media { width: 88px; height: 88px; border-radius: 13px; background: #f4ede2; border: 1px solid #e8e0d4; box-shadow: 0 1px 0 #fff; }
.shop-page.sv1 .sv1-sub__media img { object-fit: contain; border-radius: 0; background: #f4ede2; }
.shop-page.sv1 .sv1-sub__all { color: #304a43; background: #f4ede2; font-size: .88rem; }
.shop-page.sv1 .sv1-sub strong { font-size: .75rem; line-height: 1.6; font-weight: 750; }
.shop-page.sv1 .sv1-sub small { font-size: .66rem; line-height: 1.5; }
.shop-page.sv1 :is(.sv1-cat, .sv1-sub)[aria-pressed="true"] { border-color: #547f70; background: var(--shop-selected); box-shadow: inset 0 -3px 0 #547f70, 0 2px 0 #b7c9be, 0 7px 16px #243c3412; }
.shop-page.sv1 :is(.sv1-cat, .sv1-sub)[aria-pressed="true"] strong { color: var(--shop-frame-ink); }
.shop-page.sv1 :is(.sv1-cat, .sv1-sub):focus-visible { outline: 3px solid #327a93; outline-offset: 3px; }
.shop-page.sv1 .sv2-card { border: 1px solid var(--shop-frame); border-radius: 22px; box-shadow: var(--shop-relief); background: var(--shop-surface); overflow: hidden; }
.shop-page.sv1 .sv2-card .sv1-card__media { border-bottom: 1px solid #e8e4dc; border-radius: 21px 21px 0 0; }
@media (hover: hover) { .shop-page.sv1 :is(.sv1-cat, .sv1-sub):hover { transform: translateY(-2px); border-color: #9aafa5; box-shadow: 0 3px 0 #d8dbd4, 0 10px 20px #243c3418; } }
@media (min-width: 901px) { .shop-page.sv1 .sv1-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1250px) { .shop-page.sv1 .sv1-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .shop-page.sv1 .sv1-cat { gap: 8px; } .shop-page.sv1 .sv1-cat__media { width: 52px; height: 52px; flex-basis: 52px; } }
@media (max-width: 760px) { .shop-page.sv1 .sv1-cat { min-height: 76px; } .shop-page.sv1 .sv1-cat strong { font-size: .8rem; } .shop-page.sv1 .sv1-sub { width: 106px; min-height: 138px; } .shop-page.sv1 .sv1-sub__media { width: 80px; height: 80px; } }
:root[data-theme="dark"] .shop-page.sv1 { --shop-frame: #3d4a47; --shop-surface: #202b28; --shop-selected: #2a4038; --shop-frame-ink: #e0f0e8; --shop-relief: 0 2px 0 #101b16, 0 7px 16px #0003; }
:root[data-theme="dark"] .shop-page.sv1 .sv2-card .sv1-card__media { border-bottom-color: #3d4a47; }
@media (prefers-reduced-motion: reduce) { .shop-page.sv1 :is(.sv1-cat, .sv1-sub) { transition: none; } .shop-page.sv1 :is(.sv1-cat, .sv1-sub):hover { transform: none; } }
@media (forced-colors: active) { .shop-page.sv1 :is(.sv1-cat, .sv1-sub)[aria-pressed="true"] { outline: 2px solid Highlight; } }