/* Generated by tools/blocks_css.py from the Auvyx UI blocks (@auvyx/ui 0.1.4): cart-01, cart-02, cart-03, checkout-01, checkout-03, orders-01, orders-02, account-01, account-02, bottom-nav-03, cart-04, cart-05, checkout-02, account-03, bottom-nav-01, bottom-nav-02, product-01, product-02, product-card-01, product-card-04, reviews-01, reviews-02, filter-01, filter-03, category-03, search-02, wishlist-01, tracking-01.
   The blocks' own rules, with Auvyx UI's component classes renamed for the ax- build. Do not edit: change the theme in
   auvyx-theme.css (loaded after this) or run the tool again. */
.shop-page { padding-block: 2rem 4rem }
.shop-h1 { margin: 0; font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em }
.shop-lead { margin: 0; color: var(--muted-foreground); font-size: 0.875rem }
.shop-header { position: sticky; inset-block-start: 0; z-index: 10; border-block-end: 1px solid var(--border); background: color-mix(in oklab, var(--background) 90%, transparent); backdrop-filter: blur(8px) }
.shop-header-row { display: flex; align-items: center; gap: 1rem; block-size: 4rem }
.shop-nav { display: flex; gap: 1.25rem; font-size: 0.875rem }
.shop-nav a { color: var(--muted-foreground); text-decoration: none }
.shop-nav a:hover, .shop-nav a[aria-current] { color: var(--foreground) }
.shop-header-search { flex: 1; max-inline-size: 20rem; margin-inline-start: auto }
.shop-header-actions { display: flex; align-items: center; gap: 0.25rem }
.shop-cart-btn { position: relative }
.shop-count { position: absolute; inset-block-start: -0.25rem; inset-inline-end: -0.25rem; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.125rem; block-size: 1.125rem; padding-inline: 0.25rem; border-radius: 999px; background: var(--primary); color: var(--primary-foreground); font-size: 0.6875rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1 }
.shop-count:empty, .shop-count[data-count="0"] { display: none }
@media (width < 48rem) { .shop-nav, .shop-header-search { display: none }.shop-header-actions { margin-inline-start: auto } }
.shop-thumb { flex: none; inline-size: 5rem; block-size: 5rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--muted); object-fit: cover }
.shop-thumb[data-size="sm"] { inline-size: 3.5rem; block-size: 3.5rem }
.shop-thumb[data-size="xs"] { inline-size: 2.5rem; block-size: 2.5rem; border-radius: calc(var(--radius) - 2px) }
html.dark .shop-thumb { filter: brightness(0.5) grayscale(1) }
.shop-lines { list-style: none; margin: 0; padding: 0 }
.shop-lines > li { display: flex; gap: 1rem; padding-block: 1.25rem; border-block-end: 1px solid var(--border) }
.shop-lines > li:first-child { padding-block-start: 0 }
.shop-lines[data-size="sm"] > li { gap: 0.75rem; padding-block: 0.875rem }
.shop-lines[data-size="sm"] > li:last-child { border-block-end: 0 }
.shop-line-body { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 0.25rem }
.shop-line-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem }
.shop-line-name { margin: 0; font-size: 0.875rem; font-weight: 500 }
.shop-line-meta { margin: 0; font-size: 0.8125rem; color: var(--muted-foreground) }
.shop-line-price { margin: 0; font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap }
.shop-line-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-start: auto; padding-block-start: 0.5rem }
.shop-qty { display: inline-flex; align-items: center; border: 1px solid var(--input); border-radius: var(--radius) }
.shop-qty > .ax-btn { border-radius: inherit }
.shop-qty > input { inline-size: 2.25rem; block-size: 2rem; border: 0; background: transparent; color: inherit; text-align: center; font: inherit; font-size: 0.875rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield }
.shop-qty > input::-webkit-inner-spin-button, .shop-qty > input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.shop-qty > input:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px }
.shop-qty[data-size="sm"] > input { inline-size: 1.75rem; block-size: 1.75rem }
.shop-remove { display: inline-flex; align-items: center; gap: 0.375rem; border: 0; padding: 0; background: none; color: var(--muted-foreground); font: inherit; font-size: 0.8125rem; cursor: pointer }
.shop-remove:hover { color: var(--destructive) }
.shop-remove svg { inline-size: 0.875rem; block-size: 0.875rem }
.shop-summary { display: grid; gap: 0.75rem; margin: 0; font-size: 0.875rem }
.shop-summary > div { display: flex; justify-content: space-between; gap: 1rem }
.shop-summary dt { color: var(--muted-foreground) }
.shop-summary dd { margin: 0; font-variant-numeric: tabular-nums }
.shop-summary > [data-total] { padding-block-start: 0.75rem; border-block-start: 1px solid var(--border); font-size: 1rem; font-weight: 600 }
.shop-summary > [data-total] dt { color: var(--foreground) }
.shop-summary > [data-discount] dd { color: var(--primary) }
.shop-cols { display: grid; gap: 2rem; align-items: start }
@media (width >= 56rem) { .shop-cols { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3rem }.shop-sticky { position: sticky; inset-block-start: 5.5rem } }
.shop-note { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.8125rem; color: var(--muted-foreground) }
.shop-note svg { inline-size: 1rem; block-size: 1rem; flex: none }
.shop-progress { display: grid; gap: 0.5rem; font-size: 0.8125rem }
.shop-progress p { margin: 0 }
.shop-full { inline-size: 100% }
.shop-count { corner-shape: round }
.block-logo { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; color: inherit; text-decoration: none }
.block-logo-mark { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: calc(var(--radius) - 2px); background: var(--primary); color: var(--primary-foreground) }
.block-logo-mark svg { inline-size: 1rem; block-size: 1rem }
.shop-promo { flex: 1; min-inline-size: 0 }
.shop-link { color: inherit; text-decoration: none }
.shop-link:hover { text-decoration: underline; text-underline-offset: 4px }
.shop-h2 { margin: 0; font-size: 1.125rem; font-weight: 600 }
html.dark .shop-product-img { filter: brightness(0.5) grayscale(1) }
.shop-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)) }
.shop-product { display: flex; flex-direction: column; gap: 0.75rem }
.shop-product-img { aspect-ratio: 1; inline-size: 100%; border-radius: var(--radius); background: var(--muted); object-fit: cover }
.shop-product h3 { margin: 0; font-size: 0.875rem; font-weight: 500 }
.shop-product p { margin: 0; font-size: 0.8125rem; color: var(--muted-foreground) }
.shop-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem }
.shop-product-foot strong { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums }
.shop-sheet-lines { flex: 1; overflow-y: auto }
.shop-form-grid { display: grid; gap: 1rem }
@media (width >= 36rem) { .shop-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
.shop-form-grid select { inline-size: 100% }
.shop-form-grid > [data-span="full"] { grid-column: 1 / -1 }
.shop-payment-fields[hidden] { display: none }
.shop-choice-price { font-size: 0.875rem; font-weight: 500; font-variant-numeric: tabular-nums }
.shop-header-secure { margin-inline-start: auto }
@media (width >= 56rem) { .shop-cols { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3rem } }
.shop-address { margin: 0; font-style: normal; font-size: 0.875rem; line-height: 1.6 }
.shop-success { display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; border-radius: 999px; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary) }
.shop-success svg { inline-size: 1.5rem; block-size: 1.5rem }
.shop-kv { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); margin: 0 }
.shop-kv dt { font-size: 0.75rem; color: var(--muted-foreground) }
.shop-kv dd { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 500 }
.shop-success { corner-shape: round }
@media (width >= 56rem) { .shop-cols.shop-cols-even { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) } }
.shop-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; font-size: 0.875rem }
.shop-next li { display: flex; gap: 0.75rem; align-items: flex-start }
.shop-next svg { inline-size: 1rem; block-size: 1rem; flex: none; margin-block-start: 0.125rem; color: var(--muted-foreground) }
.shop-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem }
.shop-order-head .shop-kv { flex: 1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)) }
.shop-order-actions { display: flex; gap: 0.5rem }
.shop-filters { display: flex; flex-wrap: wrap; gap: 0.5rem }
.shop-filters .ax-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground) }
.shop-status { gap: 0.25rem }
.shop-status::before { content: ""; inline-size: 0.375rem; block-size: 0.375rem; border-radius: 999px; background: currentColor }
.shop-status[data-status="processing"] { color: var(--muted-foreground) }
.shop-status[data-status="shipped"] { color: var(--chart-2, var(--foreground)) }
.shop-status[data-status="delivered"] { color: var(--primary) }
.shop-status[data-status="cancelled"] { color: var(--destructive) }
.shop-account { display: grid; gap: 2rem; align-items: start }
@media (width >= 48rem) { .shop-account { grid-template-columns: 14rem minmax(0, 1fr) } }
.shop-account-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem }
.shop-account-nav a, .shop-account-nav button { display: flex; align-items: center; gap: 0.625rem; inline-size: 100%; padding: 0.5rem 0.75rem; border: 0; border-radius: var(--radius); background: none; color: var(--muted-foreground); font: inherit; font-size: 0.875rem; text-align: start; text-decoration: none; cursor: pointer }
.shop-account-nav a:hover, .shop-account-nav button:hover { background: var(--accent); color: var(--accent-foreground) }
.shop-account-nav a[aria-current] { background: var(--muted); color: var(--foreground); font-weight: 500 }
.shop-account-nav svg { inline-size: 1rem; block-size: 1rem; flex: none }
.shop-account-nav hr { margin: 0.5rem 0; border: 0; border-block-start: 1px solid var(--border) }
.shop-profile { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 1rem; padding-inline: 0.75rem }
.shop-profile p { margin: 0; font-size: 0.875rem; font-weight: 500 }
.shop-profile small { display: block; font-size: 0.75rem; color: var(--muted-foreground); font-weight: 400 }
@media (width < 48rem) { .shop-account-nav ul { display: flex; overflow-x: auto }.shop-account-nav a, .shop-account-nav button { white-space: nowrap }.shop-account-nav hr, .shop-profile { display: none } }
.shop-status::before { corner-shape: round }
.shop-order-items > li { align-items: center }
.shop-order-foot { justify-content: space-between; flex-wrap: wrap; gap: 0.5rem }
.shop-profile .ax-avatar { inline-size: 2.25rem; block-size: 2.25rem }
.shop-muted { color: var(--muted-foreground) }
.shop-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.875rem }
.shop-row strong { font-variant-numeric: tabular-nums }
.shop-tracker { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; font-size: 0.8125rem }
.shop-tracker > li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; color: var(--muted-foreground) }
.shop-tracker > li::before { content: ""; position: absolute; inset-block-start: 0.875rem; inset-inline: -50% 50%; block-size: 2px; background: var(--border) }
.shop-tracker > li:first-child::before { display: none }
.shop-tracker > li[data-done]::before, .shop-tracker > li[aria-current]::before { background: var(--primary) }
.shop-tracker-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 999px; border: 2px solid var(--border); background: var(--background) }
.shop-tracker-dot svg { inline-size: 0.875rem; block-size: 0.875rem }
.shop-tracker > li[data-done], .shop-tracker > li[aria-current] { color: var(--foreground) }
.shop-tracker > li[data-done] .shop-tracker-dot { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground) }
.shop-tracker > li[aria-current] .shop-tracker-dot { border-color: var(--primary); color: var(--primary) }
.shop-tracker small { display: block; color: var(--muted-foreground); font-size: 0.75rem }
.shop-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; font-size: 0.875rem }
.shop-timeline > li { position: relative; padding-inline-start: 1.5rem }
.shop-timeline > li::before { content: ""; position: absolute; inset-inline-start: 0.25rem; inset-block-start: 0.375rem; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 999px; background: var(--border) }
.shop-timeline > li:first-child::before { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 20%, transparent) }
.shop-timeline > li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(0.5rem - 0.5px); inset-block: 1.125rem -1rem; inline-size: 1px; background: var(--border) }
.shop-timeline p { margin: 0 }
.shop-timeline time { font-size: 0.75rem; color: var(--muted-foreground) }
.shop-tracker-dot { corner-shape: round }
.shop-timeline > li::before { corner-shape: round }
.shop-back { align-self: flex-start; margin-inline-start: -0.5rem }
@media (width < 36rem) { .shop-tracker > li > span:last-child { font-size: 0.6875rem } }
.shop-review { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) }
.shop-review p { margin: 0; font-size: 0.875rem }
.shop-review h3 { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 600 }
.shop-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)) }
.shop-stat header p { display: flex; align-items: center; gap: 0.5rem }
.shop-stat header p svg { inline-size: 1rem; block-size: 1rem }
.shop-stat h3 { margin: 0; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums }
.shop-link { color: inherit; font-weight: 500; text-decoration: none }
.shop-num { text-align: end; font-variant-numeric: tabular-nums }
.shop-table-wrap { overflow-x: auto }
.shop-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem }
.shop-switch-title { font-size: 0.875rem; font-weight: 500 }
.shop-switch-row small { display: block; font-size: 0.8125rem; color: var(--muted-foreground) }
.shop-card-actions { justify-content: flex-end }
.shop-danger { border-color: color-mix(in oklab, var(--destructive) 40%, var(--border)) }
.shop-switch-row > label { flex: 1; cursor: pointer }
.shop-app { max-inline-size: 28rem; min-block-size: 100svh; margin-inline: auto; padding-block-end: calc(5rem + env(safe-area-inset-bottom, 0px)); border-inline: 1px solid var(--border) }
.shop-app-bar { position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--background); border-block-end: 1px solid var(--border) }
.shop-app-bar h1 { flex: 1; margin: 0; font-size: 1rem; font-weight: 600 }
.shop-app-body { display: grid; gap: 1.25rem; padding: 1rem }
.shop-buy-bar { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 20; display: flex; align-items: center; gap: 0.75rem; max-inline-size: 28rem; margin-inline: auto; padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px)); border-block-start: 1px solid var(--border); background: var(--background) }
.shop-buy-bar > div:first-child { display: grid }
.shop-buy-bar small { font-size: 0.75rem; color: var(--muted-foreground) }
.shop-buy-bar strong { font-size: 1.125rem; font-variant-numeric: tabular-nums }
.shop-buy-bar > .ax-btn:last-child { flex: 1 }
.shop-rating { display: flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; color: var(--muted-foreground) }
.shop-rating svg { inline-size: 0.875rem; block-size: 0.875rem; fill: currentColor; color: var(--foreground) }
.shop-swatches { display: flex; gap: 0.5rem; border: 0; margin: 0; padding: 0 }
.shop-swatches legend { margin-block-end: 0.5rem; font-size: 0.875rem; font-weight: 500 }
.shop-swatches label { position: relative; display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.5rem; block-size: 2.25rem; padding-inline: 0.75rem; border: 1px solid var(--input); border-radius: var(--radius); font-size: 0.875rem; cursor: pointer }
.shop-swatches input { position: absolute; opacity: 0; pointer-events: none }
.shop-swatches label:has(:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) }
.shop-swatches label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px }
.shop-gallery { aspect-ratio: 1; inline-size: 100%; background: var(--muted); object-fit: cover }
.shop-swatches label:has(:disabled) { opacity: 0.5; text-decoration: line-through; cursor: not-allowed }
.shop-mini { inline-size: min(24rem, calc(100vw - 2rem)) }
.shop-mini .shop-lines { max-block-size: 18rem; overflow-y: auto }
.shop-mini-foot { display: grid; gap: 0.75rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--border) }
.shop-mini-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem }
.shop-lines[data-size="sm"] > li { align-items: flex-start }
.shop-banner { display: grid; gap: 0.25rem; padding: 1.25rem; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground) }
.shop-banner p { margin: 0; font-size: 0.875rem; opacity: 0.85 }
.shop-banner strong { font-size: 1.125rem }
.shop-grid.shop-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem }
.shop-drawer-lines { overflow-y: auto; max-block-size: 45vh; padding-inline: 1rem }
.shop-drawer-foot { display: grid; gap: 0.75rem }
.shop-app { padding-block-end: 2rem }
.shop-steps { display: flex; align-items: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; font-size: 0.875rem; overflow-x: auto }
.shop-steps > li { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); white-space: nowrap }
.shop-steps > li + li::before { content: ""; inline-size: 2rem; block-size: 1px; background: var(--border) }
.shop-step-num { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 999px; border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600 }
.shop-step-num svg { inline-size: 0.875rem; block-size: 0.875rem }
.shop-steps > li[aria-current] { color: var(--foreground); font-weight: 500 }
.shop-steps > li[aria-current] .shop-step-num, .shop-steps > li[data-done] .shop-step-num { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground) }
.shop-steps > li[data-done] { color: var(--foreground) }
.shop-steps > li .shop-step-num svg, .shop-steps > li[data-done] .shop-step-num span { display: none }
.shop-steps > li[data-done] .shop-step-num svg { display: block }
.shop-step-actions { display: flex; justify-content: space-between; gap: 0.75rem }
.shop-step-num { corner-shape: round }
.shop-review h3.shop-mt { margin-block-start: 1rem }
[data-step] h2:focus { outline: none }
.shop-addresses { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)) }
.shop-add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-block-size: 12rem; border: 1px dashed var(--border); border-radius: var(--radius); background: none; color: var(--muted-foreground); font: inherit; font-size: 0.875rem; cursor: pointer }
.shop-add-card:hover { border-color: var(--ring); color: var(--foreground) }
.shop-add-card svg { inline-size: 1.25rem; block-size: 1.25rem }
.shop-addr-title { display: flex; align-items: center; gap: 0.5rem }
.shop-addr-title svg { inline-size: 1rem; block-size: 1rem; color: var(--muted-foreground) }
.shop-push { margin-inline-start: auto }
.shop-chips { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none }
.shop-chips .ax-badge { padding: 0.25rem 0.75rem }
.shop-bottom-nav { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 20; max-inline-size: 28rem; margin-inline: auto; padding-block-end: env(safe-area-inset-bottom, 0px); border-block-start: 1px solid var(--border); background: color-mix(in oklab, var(--background) 92%, transparent); backdrop-filter: blur(8px) }
.shop-bottom-nav ul { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; list-style: none; margin: 0; padding: 0 }
.shop-bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding-block: 0.625rem 0.5rem; color: var(--muted-foreground); font-size: 0.6875rem; font-weight: 500; text-decoration: none; -webkit-tap-highlight-color: transparent }
.shop-bottom-nav a svg { inline-size: 1.375rem; block-size: 1.375rem }
.shop-bottom-nav a[aria-current="page"] { color: var(--foreground) }
.shop-bottom-nav a[aria-current="page"]::before { content: ""; position: absolute; inset-block-start: 0; inline-size: 2rem; block-size: 2px; border-radius: 0 0 2px 2px; background: var(--primary) }
.shop-bottom-nav a:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px }
.shop-nav-icon { position: relative; display: inline-flex }
.shop-nav-icon > .shop-count { inset-block-start: -0.375rem; inset-inline-end: -0.625rem }
.shop-bottom-nav[data-variant="floating"] { inset-block-end: calc(1rem + env(safe-area-inset-bottom, 0px)); inset-inline: 1rem; max-inline-size: 26rem; padding: 0.375rem; border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.25) }
.shop-bottom-nav[data-variant="floating"] a { padding-block: 0.5rem; border-radius: 999px }
.shop-bottom-nav[data-variant="floating"] a[aria-current="page"] { background: var(--primary); color: var(--primary-foreground) }
.shop-bottom-nav[data-variant="floating"] a[aria-current="page"]::before { display: none }
.shop-bottom-nav[data-variant="floating"] a > span:not(.shop-nav-icon) { display: none }
.shop-bottom-nav[data-variant="floating"] a[aria-current="page"] { flex-direction: row; justify-content: center }
.shop-bottom-nav[data-variant="floating"] a[aria-current="page"] > span:not(.shop-nav-icon) { display: inline; font-size: 0.75rem }
.shop-bottom-nav { corner-shape: round }
.shop-bottom-nav a { corner-shape: round }
.shop-app { padding-block-end: calc(6.5rem + env(safe-area-inset-bottom, 0px)) }
.shop-colors label { corner-shape: round }
.shop-dots > span { corner-shape: round }
.shop-stock::before { corner-shape: round }
.shop-shot { display: block; aspect-ratio: 4 / 5; inline-size: 100%; object-fit: cover; background: var(--muted) }
.shop-shot[data-shot="2"] { transform: scaleX(-1); filter: hue-rotate(160deg) saturate(1.6) }
.shop-shot[data-shot="3"] { filter: sepia(0.6) saturate(1.4) }
.shop-shot[data-shot="4"] { transform: scaleX(-1); filter: grayscale(1) contrast(1.2) }
html.dark .shop-shot { opacity: 0.6 }
.shop-card { position: relative; display: flex; flex-direction: column; gap: 0.75rem }
.shop-card-media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--muted) }
.shop-card-media > img { display: block; aspect-ratio: 4 / 5; inline-size: 100%; object-fit: cover; transition: transform 300ms ease }
.shop-card:hover .shop-card-media > img { transform: scale(1.03) }
html.dark .shop-card-media > img { filter: brightness(0.5) grayscale(1) }
html.dark .shop-pdp-main { filter: brightness(0.5) grayscale(1) }
html.dark .shop-pdp-thumbs img { filter: brightness(0.5) grayscale(1) }
.shop-card-badge { position: absolute; inset-block-start: 0.75rem; inset-inline-start: 0.75rem }
.shop-card-tools { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; display: grid; gap: 0.375rem }
.shop-card-tools .ax-btn { background: var(--background) }
.shop-card-quick { position: absolute; inset-inline: 0.75rem; inset-block-end: 0.75rem; opacity: 0; transform: translateY(0.5rem); transition: opacity 200ms ease, transform 200ms ease }
.shop-card:hover .shop-card-quick, .shop-card:focus-within .shop-card-quick { opacity: 1; transform: none }
@media (hover: none) { .shop-card-quick { opacity: 1; transform: none } }
.shop-card-body { display: grid; gap: 0.25rem }
.shop-card-cat { margin: 0; font-size: 0.75rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.04em }
.shop-card-name { margin: 0; font-size: 0.9375rem; font-weight: 500 }
.shop-card-name a { color: inherit; text-decoration: none }
.shop-card-name a::after { content: ""; position: absolute; inset: 0 }
.shop-card-name a:focus-visible { outline: none }
.shop-card:has(.shop-card-name a:focus-visible) .shop-card-media { outline: 2px solid var(--ring); outline-offset: 2px }
.shop-card-tools { z-index: 2 }
.shop-card-quick { z-index: 2 }
.shop-dots { position: relative; z-index: 1 }
.shop-colors { position: relative; z-index: 1 }
.shop-price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; font-variant-numeric: tabular-nums }
.shop-price strong { font-size: 0.9375rem; font-weight: 600 }
.shop-price s { font-size: 0.8125rem; color: var(--muted-foreground) }
.shop-price[data-size="lg"] strong { font-size: 1.5rem }
.shop-price[data-size="lg"] s { font-size: 1rem }
.shop-wish[aria-pressed="true"] { color: var(--destructive) }
.shop-wish[aria-pressed="true"] svg { fill: currentColor }
.shop-dots { display: flex; gap: 0.375rem }
.shop-dots > span { inline-size: 0.875rem; block-size: 0.875rem; border-radius: 999px; background: var(--dot); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 15%, transparent) }
.shop-colors { display: flex; flex-wrap: wrap; gap: 0.5rem; border: 0; margin: 0; padding: 0.25rem }
.shop-colors legend { margin-block-end: 0.5rem; font-size: 0.875rem; font-weight: 500 }
.shop-colors legend span { color: var(--muted-foreground); font-weight: 400 }
.shop-colors label { position: relative; display: inline-flex; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 999px; background: var(--dot); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 15%, transparent); cursor: pointer }
.shop-colors input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.shop-colors label:has(:checked) { outline: 2px solid var(--primary); outline-offset: 2px }
.shop-colors label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px }
.shop-colors[data-size="sm"] label { inline-size: 1.25rem; block-size: 1.25rem }
.shop-cards { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)) }
.shop-cards[data-layout="list"] { grid-template-columns: 1fr; gap: 1rem }
.shop-stock { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--muted-foreground) }
.shop-stock::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 999px; background: var(--primary) }
.shop-stock[data-stock="low"]::before { background: oklch(0.77 0.16 70) }
.shop-stock[data-stock="out"]::before { background: var(--destructive) }
.shop-crumbs { font-size: 0.875rem }
.shop-pdp { display: grid; gap: 2rem; align-items: start }
@media (width >= 56rem) { .shop-pdp { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem }.shop-pdp-info { position: sticky; inset-block-start: 5.5rem } }
.shop-pdp-gallery { display: grid; gap: 0.75rem }
.shop-pdp-main { display: block; aspect-ratio: 1; inline-size: 100%; border-radius: var(--radius); background: var(--muted); object-fit: cover }
.shop-pdp-carousel .shop-pdp-main { aspect-ratio: 1; cursor: zoom-in }
.shop-pdp-carousel > ol > li > a { display: block; overflow: hidden; border-radius: var(--radius) }
.shop-pdp-carousel [data-carousel] { background: var(--background) }
.shop-pdp-count { position: absolute; inset-block-end: 0.75rem; inset-inline-end: 0.75rem; z-index: 1; font-variant-numeric: tabular-nums }
.shop-pdp-thumbs img { aspect-ratio: 1 }
.shop-pdp-info { display: grid; gap: 1.5rem }
.shop-pdp-title { margin: 0; font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance }
.shop-pdp-buy { display: flex; gap: 0.75rem }
.shop-pdp-buy > .ax-btn[data-size="lg"] { flex: 1 }
.shop-pdp-buy .shop-qty > input { block-size: 2.5rem }
.shop-perks { display: grid; gap: 0.75rem; margin: 0; padding: 1rem; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); font-size: 0.875rem }
.shop-perks li { display: flex; gap: 0.75rem; align-items: center }
.shop-perks svg { inline-size: 1.125rem; block-size: 1.125rem; flex: none; color: var(--muted-foreground) }
.shop-reviews { display: grid; gap: 2rem }
@media (width >= 48rem) { .shop-reviews { grid-template-columns: 16rem minmax(0, 1fr) } }
.shop-bars { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem }
.shop-bars li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 0.5rem }
.shop-bars li > span:last-child { text-align: end; color: var(--muted-foreground); font-variant-numeric: tabular-nums }
.shop-review-list { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none }
.shop-review-list li { display: grid; gap: 0.5rem; padding-block-end: 1.5rem; border-block-end: 1px solid var(--border) }
.shop-review-list p { margin: 0; font-size: 0.875rem }
.shop-stars { display: inline-flex; gap: 0.125rem; color: var(--foreground) }
.shop-stars svg { inline-size: 0.875rem; block-size: 0.875rem; fill: currentColor }
.shop-stars svg[data-empty] { fill: none; color: var(--muted-foreground) }
.shop-section { display: grid; gap: 1.5rem; padding-block-start: 3rem }
.shop-bars .ax-progress { block-size: 0.5rem }
.shop-qv { inline-size: min(56rem, calc(100vw - 2rem)); max-inline-size: none }
.shop-qv-grid { display: grid; gap: 1.5rem }
@media (width >= 40rem) { .shop-qv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) } }
.shop-qv-grid .shop-pdp-main { aspect-ratio: 4 / 5 }
.shop-fx-grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)) }
.shop-fx { position: relative; display: flex; flex-direction: column; gap: 0.75rem }
.shop-fx-media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--muted) }
.shop-fx-media > .shop-shot + .shop-shot { position: absolute; inset: 0; block-size: 100% }
.shop-fx-body { display: grid; gap: 0.25rem }
.shop-fx-body .ax-cluster { margin-block-start: 0.25rem }
.shop-fx-swap > .shop-shot + .shop-shot { opacity: 0; transition: opacity 400ms ease, transform 600ms ease }
.shop-fx:hover .shop-fx-swap > .shop-shot + .shop-shot { opacity: 1 }
.shop-fx-side { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.75rem; z-index: 2; display: grid; gap: 0.375rem }
.shop-fx-side > .ax-btn { background: var(--background); opacity: 0; transform: translateX(0.75rem); transition: opacity 200ms ease, transform 200ms ease }
.shop-fx-side > .ax-btn:nth-child(2) { transition-delay: 50ms }
.shop-fx-side > .ax-btn:nth-child(3) { transition-delay: 100ms }
.shop-fx:hover .shop-fx-side > .ax-btn { opacity: 1; transform: none }
.shop-fx:focus-within .shop-fx-side > .ax-btn { opacity: 1; transform: none }
.shop-fx-side > .ax-btn[aria-pressed="true"] { opacity: 1; transform: none }
.shop-fx-bar { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; display: flex; padding: 0.75rem; transform: translateY(100%); transition: transform 250ms ease }
.shop-fx-bar > .ax-btn { flex: 1 }
.shop-fx:hover .shop-fx-bar { transform: none }
.shop-fx:focus-within .shop-fx-bar { transform: none }
@media (hover: none) { .shop-fx-side > .ax-btn { opacity: 1; transform: none }.shop-fx-bar { transform: none } }
@keyframes shop-pop { from { transform: scale(0.96); opacity: 0.6 }to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .shop-fx * { transition: none !important; animation: none !important } }
.shop-rv { display: grid; gap: 2rem; align-items: start }
@media (width >= 56rem) { .shop-rv { grid-template-columns: 18rem minmax(0, 1fr); gap: 3rem }.shop-rv-aside { position: sticky; inset-block-start: 5.5rem } }
.shop-rv-score { display: flex; align-items: center; gap: 1rem }
.shop-rv-score strong { font-size: 3rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums }
.shop-rv-bars { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none }
.shop-rv-bars button { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 2.25rem; align-items: center; gap: 0.5rem; inline-size: 100%; padding: 0.25rem 0.375rem; border: 0; border-radius: calc(var(--radius) - 4px); background: none; color: inherit; font: inherit; font-size: 0.8125rem; text-align: start; cursor: pointer }
.shop-rv-bars button:hover { background: var(--accent) }
.shop-rv-bars button[aria-pressed="true"] { background: var(--muted); font-weight: 600 }
.shop-rv-bars button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px }
.shop-rv-bars button > span:first-child { display: inline-flex; align-items: center; gap: 0.25rem }
.shop-rv-bars button > span:last-child { text-align: end; color: var(--muted-foreground); font-variant-numeric: tabular-nums }
.shop-rv-bars .ax-progress { block-size: 0.5rem }
.shop-rv-attrs { display: grid; gap: 0.875rem; margin: 0 }
.shop-rv-attrs > div { display: grid; gap: 0.375rem; font-size: 0.8125rem }
.shop-rv-attrs dt { display: flex; justify-content: space-between; color: var(--muted-foreground) }
.shop-rv-attrs dd { margin: 0 }
.shop-rv-scale { position: relative; block-size: 0.375rem; border-radius: 999px; background: var(--muted) }
.shop-rv-scale > span { position: absolute; inset-block-start: 50%; inline-size: 0.875rem; block-size: 0.875rem; translate: -50% -50%; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 2px var(--background); corner-shape: round }
.shop-rv-scale-labels { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--muted-foreground) }
.shop-rv-list { display: grid; margin: 0; padding: 0; list-style: none }
.shop-rv-list > li { display: grid; gap: 0.75rem; padding-block: 1.5rem; border-block-end: 1px solid var(--border) }
.shop-rv-list > li:first-child { padding-block-start: 0 }
.shop-rv-head { display: flex; align-items: flex-start; gap: 0.75rem }
.shop-rv-head > div { flex: 1; min-inline-size: 0; display: grid; gap: 0.125rem }
.shop-rv-head p { margin: 0; font-size: 0.875rem; font-weight: 500 }
.shop-rv-head small { color: var(--muted-foreground); font-size: 0.75rem }
.shop-rv-verified { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--primary); font-size: 0.75rem }
.shop-rv-verified svg { inline-size: 0.875rem; block-size: 0.875rem }
.shop-rv-list h3 { margin: 0; font-size: 0.9375rem; font-weight: 600 }
.shop-rv-list p { margin: 0; font-size: 0.875rem; line-height: 1.6 }
.shop-rv-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.75rem; color: var(--muted-foreground) }
.shop-rv-meta strong { color: var(--foreground); font-weight: 500 }
.shop-rv-photos { display: flex; gap: 0.5rem }
.shop-rv-photos img { inline-size: 4rem; block-size: 4rem; border-radius: calc(var(--radius) - 2px); object-fit: cover; background: var(--muted) }
.shop-rv-reply { padding: 0.75rem 1rem; border-inline-start: 2px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; background: var(--muted) }
.shop-rv-reply p { font-size: 0.8125rem }
.shop-rv-reply strong { display: block; margin-block-end: 0.25rem; font-size: 0.75rem }
.shop-rv-help { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground) }
.shop-rv-help .ax-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground) }
.shop-rv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block-end: 1rem; border-block-end: 1px solid var(--border) }
.shop-rv-toolbar .ax-select { inline-size: auto }
.shop-rv-toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem }
.shop-rv-active { display: inline-flex; align-items: center; gap: 0.25rem }
.shop-rv-active[hidden] { display: none }
.shop-rv-bars button svg { inline-size: 0.75rem; block-size: 0.75rem; fill: currentColor; vertical-align: -1px }
.shop-rv-list .ax-avatar { inline-size: 2.25rem; block-size: 2.25rem; font-size: 0.75rem }
.shop-rv-photo { inline-size: 4rem; block-size: 4rem; aspect-ratio: 1; border-radius: calc(var(--radius) - 2px) }
.shop-star-input { display: flex; gap: 0.25rem; border: 0; margin: 0; padding: 0 }
.shop-star-input legend { margin-block-end: 0.5rem; font-size: 0.875rem; font-weight: 500 }
.shop-star-input label { position: relative; display: inline-flex; padding: 0.125rem; border-radius: calc(var(--radius) - 4px); color: var(--muted-foreground); cursor: pointer }
.shop-star-input label svg { inline-size: 2rem; block-size: 2rem; transition: transform 120ms ease, color 120ms ease }
.shop-star-input label:hover svg { transform: scale(1.12) }
.shop-star-input label[data-on] { color: oklch(0.8 0.16 80) }
.shop-star-input label[data-on] svg { fill: currentColor }
.shop-star-input input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px }
.shop-star-input label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px }
.shop-star-text { margin-block-end: 0.625rem; margin-inline-start: 0.5rem; font-size: 0.875rem; font-weight: 500 }
.shop-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0.25rem; border-radius: var(--radius); background: var(--muted) }
.shop-seg label { position: relative; padding: 0.5rem; border-radius: calc(var(--radius) - 4px); font-size: 0.8125rem; text-align: center; cursor: pointer; color: var(--muted-foreground) }
.shop-seg label:has(:checked) { background: var(--background); color: var(--foreground); font-weight: 500; box-shadow: 0 1px 3px rgb(0 0 0 / 0.1) }
.shop-seg label:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px }
.shop-seg input { position: absolute; opacity: 0 }
.shop-seg-wrap { display: grid; gap: 0.5rem }
.shop-drop { display: grid; justify-items: center; gap: 0.375rem; padding: 1.5rem; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted-foreground); font-size: 0.875rem; text-align: center; cursor: pointer }
.shop-drop:hover { border-color: var(--ring); background: var(--accent) }
.shop-drop[data-over] { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 6%, transparent) }
.shop-drop:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px }
.shop-drop svg { inline-size: 1.25rem; block-size: 1.25rem }
.shop-drop strong { color: var(--foreground); font-weight: 500 }
.shop-previews { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none }
.shop-previews li { position: relative }
.shop-previews img { inline-size: 4.5rem; block-size: 4.5rem; border-radius: calc(var(--radius) - 2px); object-fit: cover }
.shop-previews button { position: absolute; inset-block-start: -0.375rem; inset-inline-end: -0.375rem; display: inline-flex; align-items: center; justify-content: center; inline-size: 1.25rem; block-size: 1.25rem; padding: 0; border: 0; border-radius: 999px; background: var(--foreground); color: var(--background); cursor: pointer; corner-shape: round }
.shop-previews button svg { inline-size: 0.75rem; block-size: 0.75rem }
.shop-count-line { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted-foreground) }
.shop-count-line[data-warn] span:last-child { color: var(--destructive) }
.shop-rv-done[hidden] { display: none }
.shop-done { display: grid; justify-items: center; gap: 1rem; text-align: center }
.shop-done h1 { margin: 0; font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance }
.shop-done p { margin: 0; color: var(--muted-foreground); max-inline-size: 32rem; text-wrap: pretty }
@keyframes shop-draw { from { stroke-dashoffset: 30 } }
@keyframes shop-pop-in { from { transform: scale(0.6); opacity: 0 } }
@keyframes shop-fall { 0% { opacity: 1; transform: translateY(0) rotate(0) }100% { opacity: 0; transform: translateY(18rem) rotate(540deg) } }
.shop-error { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; color: var(--destructive) }
.shop-error svg { inline-size: 1rem; block-size: 1rem }
.shop-error[hidden] { display: none }
.shop-done h2:focus { outline: none }
.shop-section-title { margin: 0; font-size: 1rem; font-weight: 600 }
.shop-results { display: grid; gap: 2rem; align-items: start }
@media (width >= 56rem) { .shop-results { grid-template-columns: 15rem minmax(0, 1fr) } }
.shop-filters-panel { display: grid; gap: 0.25rem }
.shop-filters-panel .ax-accordion summary { font-size: 0.875rem }
.shop-check-list { display: grid; gap: 0.625rem; padding-block-end: 0.5rem }
.shop-check-list label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem }
.shop-check-list label span { margin-inline-start: auto; color: var(--muted-foreground); font-size: 0.75rem }
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem }
.shop-toolbar .ax-select { inline-size: auto }
.shop-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem }
.shop-chip-row .ax-badge { gap: 0.25rem }
.shop-chip-row .ax-badge svg { inline-size: 0.75rem; block-size: 0.75rem }
.shop-price-fields { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; color: var(--muted-foreground) }
.shop-swatches-wrap { flex-wrap: wrap }
.shop-check-list .shop-rate-label { margin-inline-start: 0.25rem; color: var(--muted-foreground); font-size: 0.8125rem }
.shop-filter-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem }
.shop-filter-head h2 { display: flex; align-items: center; gap: 0.5rem }
.shop-filter-head .ax-badge[hidden] { display: none }
.shop-filter-end { margin-inline-start: auto }
.shop-switch-row > label { font-size: 0.875rem }
@media (width < 56rem) { .shop-filters-panel { display: none } }
.shop-range-out { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums }
.shop-filter-sheet section { display: grid; gap: 0.5rem }
.shop-filter-sheet .ax-accordion summary { font-size: 0.9375rem }
.shop-filter-sheet footer { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem }
.shop-filter-btn { position: relative }
.shop-filter-btn .ax-badge { min-inline-size: 1.25rem; padding-inline: 0.25rem; justify-content: center }
.shop-filter-btn .ax-badge[hidden] { display: none }
.shop-mobile-toolbar { position: sticky; inset-block-start: 3.5rem; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--background); border-block-end: 1px solid var(--border) }
.shop-mobile-toolbar .ax-select { inline-size: 100% }
.shop-app-body > .shop-chip-row[hidden] { display: none }
.shop-switch-row { padding-block: 1rem }
.shop-filter-sheet { max-block-size: 85svh }
.shop-pills a { corner-shape: round }
.shop-tree ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem }
.shop-tree ul ul { padding-inline-start: 0.75rem; margin-block: 0.25rem; border-inline-start: 1px solid var(--border) }
.shop-tree a { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.625rem; border-radius: calc(var(--radius) - 2px); color: var(--muted-foreground); font-size: 0.875rem; text-decoration: none }
.shop-tree a:hover { background: var(--accent); color: var(--accent-foreground) }
.shop-tree a[aria-current] { background: var(--muted); color: var(--foreground); font-weight: 500 }
.shop-tree a span { font-size: 0.75rem; font-variant-numeric: tabular-nums }
.shop-tree summary { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; font-weight: 500; cursor: pointer; list-style: none }
.shop-tree summary::-webkit-details-marker { display: none }
.shop-tree summary svg { inline-size: 0.875rem; block-size: 0.875rem; transition: transform 150ms ease }
.shop-tree details[open] > summary svg { transform: rotate(90deg) }
.shop-tree summary:hover { background: var(--accent) }
.shop-pills { display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none }
.shop-pills a { flex: none; padding: 0.375rem 0.875rem; border: 1px solid var(--border); border-radius: 999px; color: inherit; font-size: 0.875rem; text-decoration: none; white-space: nowrap }
.shop-pills a:hover { background: var(--accent) }
.shop-pills a[aria-current] { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground) }
.shop-more { display: grid; justify-items: center; gap: 0.75rem; padding-block-start: 1rem }
.shop-more p { margin: 0; font-size: 0.875rem; color: var(--muted-foreground) }
.shop-more .ax-progress { inline-size: 12rem }
.shop-toolbar { flex-wrap: nowrap }
.shop-pills { min-inline-size: 0 }
.shop-pills a { display: inline-block }
@media (width < 56rem) { .shop-tree { display: none } }
.ax-button-group .ax-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-foreground) }
.shop-switch-row { padding-block-start: 1rem }
.shop-pages ul { display: flex; justify-content: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0 }
.shop-cards[data-layout="list"] .shop-card { flex-direction: row; align-items: center; gap: 1rem; padding-block-end: 1rem; border-block-end: 1px solid var(--border) }
.shop-cards[data-layout="list"] .shop-card-media { inline-size: 7rem; flex: none }
.shop-cards[data-layout="list"] .shop-card-body { flex: 1 }
.shop-cards[data-layout="list"] .shop-card-quick { display: none }
.shop-card-actions { position: relative; z-index: 1 }
.shop-card-actions { display: flex; gap: 0.5rem }
.shop-card-actions > .ax-btn:first-child { flex: 1 }
.shop-wl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem }
.shop-wl-head .ax-cluster .ax-btn { flex: none }
.shop-status-icon { corner-shape: round }
.shop-lookup { display: grid; gap: 2rem; max-inline-size: 40rem; margin-inline: auto }
.shop-lookup-form { display: grid; gap: 1rem }
@media (width >= 40rem) { .shop-lookup-form { grid-template-columns: 1fr 1fr auto; align-items: end } }
.shop-lookup-form .ax-field { margin: 0 }
.shop-result[hidden] { display: none }
.shop-status-hero { display: flex; align-items: center; gap: 1rem }
.shop-status-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; inline-size: 3rem; block-size: 3rem; border-radius: 999px; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary) }
.shop-status-icon svg { inline-size: 1.5rem; block-size: 1.5rem }
.shop-status-hero h2 { margin: 0; font-size: 1.25rem; font-weight: 600 }
.shop-status-hero p { margin: 0; font-size: 0.875rem; color: var(--muted-foreground) }
.shop-vsteps { list-style: none; margin: 0; padding: 0; display: grid }
.shop-vsteps > li { position: relative; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0 0.875rem; padding-block-end: 1.5rem }
.shop-vsteps > li:last-child { padding-block-end: 0 }
.shop-vsteps > li::before { content: ""; position: absolute; inset-inline-start: calc(0.875rem - 1px); inset-block: 1.75rem 0; inline-size: 2px; background: var(--border) }
.shop-vsteps > li:last-child::before { display: none }
.shop-vsteps > li[data-done]::before { background: var(--primary) }
.shop-vsteps .shop-tracker-dot { grid-row: span 2 }
.shop-vsteps > li[data-done] .shop-tracker-dot { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground) }
.shop-vsteps > li[aria-current] .shop-tracker-dot { border-color: var(--primary); color: var(--primary) }
.shop-vsteps p { margin: 0; font-size: 0.875rem; font-weight: 500 }
.shop-vsteps > li:not([data-done]):not([aria-current]) p { color: var(--muted-foreground); font-weight: 400 }
.shop-vsteps small { color: var(--muted-foreground); font-size: 0.75rem }
.shop-result h2:focus { outline: none }