/* Hallmark · macrostructure: Ecosystem Index + Index-First operations queue · genre: custom modern-minimal commerce · theme: custom
 * nav: N5 floating pill · footer: Ft5 statement · components: F1 category mosaic, F6 product grid, C2 inline form
 * enrichment: supplied logo + product photography · glass: functional floating surfaces only
 * display: Sora · body: Manrope · axes: dark / geometric / cool-electric
 * audit: contrast pass (40-41) · slop pass (42-45) · honest pass (46) · chrome pass (47) · tokens pass (48) · responsive pass (49) · icons pass (30) · mobile pass (34, 49, 50-57)
 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
@import url("./tokens.2f99351eede0.css");

*,
*::before,
*::after {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    overflow-x: clip
}

html {
    scroll-behavior: smooth;
    background: var(--color-paper)
}

body {
    min-width: 20rem;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    text-rendering: optimizeLegibility
}

body:has(dialog[open]) {
    overflow: clip
}

main {
    min-height: 60dvh;
    padding-block-start: calc(var(--announcement-height) + var(--nav-height) + var(--space-md))
}

img,
svg {
    display: block;
    max-width: 100%
}

button,
input,
select,
textarea {
    color: inherit;
    font: inherit
}

button,
select {
    cursor: pointer
}

a {
    color: inherit;
    text-underline-offset: .22em
}

h1,
h2,
h3,
p,
figure,
dl,
dd {
    margin: 0
}

h1,
h2,
h3 {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.045em;
    line-height: 1.04
}

h1 {
    font-size: var(--text-display-small)
}

h2 {
    font-size: clamp(var(--text-xl), 4.5vw, var(--text-3xl))
}

h3 {
    font-size: var(--text-lg)
}

.icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.skip-link {
    position: fixed;
    inset: .5rem auto auto .5rem;
    z-index: var(--z-tooltip);
    padding: .75rem 1rem;
    background: var(--color-ink);
    color: var(--color-paper);
    transform: translateY(-150%)
}

.skip-link:focus {
    transform: none
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px
}

.section-shell {
    width: min(100%, var(--content-max));
    margin-inline: auto;
    padding-inline: var(--page-gutter)
}

.glass-surface {
    border: 1px solid color-mix(in oklch, var(--color-rule) 72%, var(--color-transparent));
    background: var(--surface-glass);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%)
}

.eyebrow {
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.eyebrow--bright {
    color: color-mix(in oklch, var(--color-accent) 72%, var(--color-ink))
}

.button {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--color-transparent);
    border-radius: var(--radius-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out)
}

.button:active,
.circle-action:active,
.icon-button:active,
.copy-button:active {
    transform: translateY(2px)
}

.button:disabled,
button:disabled {
    cursor: not-allowed;
    opacity: .45
}

.button--accent {
    background: var(--color-accent);
    color: var(--color-accent-ink)
}

.button--quiet {
    border-color: var(--color-rule);
    background: var(--color-transparent);
    color: var(--color-ink)
}

.button--outline {
    border-color: var(--color-rule);
    background: var(--color-paper-2);
    color: var(--color-ink)
}

.button--full {
    width: 100%
}

.button--grow {
    flex: 1
}

.button[data-state="loading"]::before {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-inline-end-color: var(--color-transparent);
    border-radius: 50%;
    content: "";
    animation: spin .8s linear infinite
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap
}

.text-link .icon {
    width: 1rem;
    height: 1rem
}

.icon-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-transparent)
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-nav);
    pointer-events: none
}

.announcement {
    height: var(--announcement-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-2xl);
    background: var(--color-brand-deep);
    color: var(--color-ink);
    font-size: var(--text-xs);
    pointer-events: auto;
    transition: opacity var(--dur-short);
    overflow: hidden
}

.announcement p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.announcement a {
    font-weight: 700
}

.announcement__close {
    position: absolute;
    inset: .1rem .25rem auto auto;
    color: var(--color-ink)
}

.site-header.is-dismissed .announcement {
    height: 0;
    opacity: 0
}

.site-header.is-dismissed+.mobile-menu {}

.nav-wrap {
    padding: var(--space-md) var(--page-gutter) 0;
    pointer-events: none
}

.nav-shell {
    width: min(100%, 80rem);
    height: var(--nav-height);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-pill);
    pointer-events: auto;
    transition: transform var(--dur-short), background-color var(--dur-short)
}

.site-header.is-compact .nav-shell {
    transform: translateY(calc(var(--announcement-height) * -1));
    background: var(--surface-glass-strong)
}

.site-header.is-dismissed .nav-shell {
    transform: none
}

.brand {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    line-height: 1;
    text-decoration: none
}

.brand img {
    width: 3.7rem;
    height: 3.1rem;
    border-radius:;
    object-fit: cover;
    object-position: center
}

.brand__name {
    display: none;
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.03em;
    white-space: nowrap
}

.desktop-nav {
    display: none;
    align-items: center;
    gap: 1.5rem
}

.desktop-nav a,
.nav-icon-link {
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap
}

.nav-actions,
.nav-icon-link {
    display: flex;
    align-items: center
}

.nav-actions {
    gap: var(--space-2xs)
}

.nav-icon-link {
    min-height: 2.75rem;
    gap: var(--space-xs);
    padding-inline: var(--space-sm);
    border-radius: var(--radius-pill);
    line-height: 1
}

.nav-icon-link>span {
    display: none
}

.bag-count {
    min-width: 1.55rem;
    height: 1.55rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-size: .7rem;
    font-variant-numeric: tabular-nums
}

.mobile-menu {
    position: fixed;
    inset: 0;
    width: min(calc(100% - 2rem), 32rem);
    max-height: min(88dvh, 48rem);
    margin: auto;
    padding: 0;
    border-radius: var(--radius-lg);
    color: var(--color-ink);
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity var(--dur-short), transform var(--dur-short), overlay var(--dur-short) allow-discrete, display var(--dur-short) allow-discrete
}

.mobile-menu[open] {
    opacity: 1;
    transform: none
}

.mobile-menu::backdrop {
    background: var(--color-scrim)
}

.mobile-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem .75rem
}

.mobile-menu__head p {
    font-family: var(--font-display);
    font-weight: 600
}

.mobile-menu__links {
    display: grid;
    padding: .5rem 1.25rem 1.5rem
}

.mobile-menu__links a {
    min-height: 3.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-block-end: 1px solid var(--color-rule-2);
    font-weight: 700;
    text-decoration: none
}

.message-stack {
    position: fixed;
    inset: calc(var(--announcement-height) + var(--nav-height) + 1.25rem) var(--page-gutter) auto auto;
    z-index: var(--z-toast);
    width: min(calc(100% - 2rem), 28rem);
    display: grid;
    gap: .5rem
}

.message {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--surface-glass-strong);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px)
}

.message--error {
    border-color: var(--color-error);
    background: var(--color-error-soft)
}

.message--success {
    border-color: var(--color-success);
    background: var(--color-success-soft)
}

.hero {
    min-height: auto;
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: start;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--page-gutter) calc(var(--space-xl) + var(--space-sm));
    overflow: clip;
    background: linear-gradient(135deg, var(--color-paper) 0%, var(--color-paper-2) 72%, var(--color-brand-deep) 180%)
}

.hero__content {
    min-width: 0;
    max-width: 60rem;
    display: grid;
    gap: var(--space-md)
}

.hero h1 {
    font-size: clamp(2.1rem, 10.5vw, 3.25rem);
    line-height: 1.02
}

.hero h1 br {
    display: none
}

.hero h1 span,
.page-hero h1 span,
.footer-statement h2 span {
    color: color-mix(in oklch, var(--color-accent) 72%, var(--color-ink))
}

.hero__lede {
    max-width: 58ch;
    color: var(--color-ink-2);
    font-size: clamp(1rem, 2vw, 1.2rem)
}

.hero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm)
}

.hero__actions .button {
    width: 100%
}

.hero__brand {
    position: relative;
    inset: auto;
    z-index: var(--z-base);
    order: 3;
    width: 100%;
    opacity: .9;
    mix-blend-mode: normal
}

.hero__brand img {
    width: 100%;
    height: min(56vw, 13rem);
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-lg)
}

[data-theme="light"] .hero__brand {
    mix-blend-mode: normal
}

.hero-search {
    order: 2;
    width: min(100%, 62rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md)
}

.hero-search input,
.catalog-search input {
    min-height: 3.25rem;
    border: 0;
    background: var(--color-transparent)
}

.hero-search button {
    grid-column: 1/-1;
    min-height: 3.25rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-ink);
    color: var(--color-paper);
    font-weight: 700;
    white-space: nowrap
}

@media (min-width:23rem) {
    .hero-search {
        grid-template-columns: auto minmax(0, 1fr) auto
    }

    .hero-search button {
        grid-column: auto;
        padding-inline: var(--space-md)
    }
}

.entrance>* {
    opacity: 0;
    transform: translateY(.5rem);
    animation: settle var(--dur-long) var(--ease-out) forwards
}

.entrance>:nth-child(2) {
    animation-delay: 80ms
}

.entrance>:nth-child(3) {
    animation-delay: 140ms
}

.entrance>:nth-child(4) {
    animation-delay: 200ms
}

.section-heading {
    display: grid;
    gap: var(--space-lg);
    margin-block-end: var(--space-xl)
}

.section-heading>div {
    display: grid;
    gap: var(--space-sm)
}

.section-heading>p {
    max-width: 52ch;
    color: var(--color-muted)
}

.section-heading--line {
    padding-block-end: var(--space-lg);
    border-block-end: 1px solid var(--color-rule-2)
}

.category-index,
.product-section {
    padding-block: var(--space-3xl)
}

.category-mosaic {
    display: grid;
    gap: var(--space-md)
}

.category-tile {
    min-height: 15rem;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: space-between;
    gap: var(--space-xl);
    padding: var(--space-lg);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
    text-decoration: none;
    overflow: hidden
}

.category-tile__number {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-muted)
}

.category-tile>div {
    grid-column: 1/-1;
    align-self: end
}

.category-tile h3 {
    font-size: clamp(1.5rem, 4vw, 2.5rem)
}

.category-tile p {
    max-width: 45ch;
    margin-block-start: var(--space-xs);
    color: var(--color-muted);
    font-size: var(--text-sm)
}

.category-tile>.icon {
    position: absolute;
    inset: var(--space-lg) var(--space-lg) auto auto
}

.category-tile--1 {
    min-height: 20rem;
    background: linear-gradient(145deg, var(--surface-accent-soft), var(--color-paper-2))
}

.product-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl) var(--space-lg)
}

.product-card {
    min-width: 0;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--color-rule-2)
}

.product-card__media {
    grid-column: 1/-1;
    position: relative;
    display: block;
    aspect-ratio: 4/5;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-paper-2);
    text-decoration: none
}

.product-card__media img,
.product-card__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-long) var(--ease-out)
}

.product-card__media video {
    display: block;
    background: var(--color-paper-3)
}

.product-placeholder {
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    color: var(--color-muted);
    text-align: center;
    background: var(--color-paper-2)
}

.product-placeholder>.icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-accent)
}

.product-placeholder b {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-md)
}

.product-placeholder small {
    font-size: var(--text-xs)
}

.product-card__topline {
    position: absolute;
    inset: var(--space-sm) var(--space-sm) auto;
    display: flex;
    justify-content: space-between;
    pointer-events: none
}

.product-badge,
.image-count,
.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-size: .7rem;
    font-weight: 700
}

.image-count {
    margin-inline-start: auto;
    background: var(--surface-glass-strong);
    color: var(--color-ink);
    backdrop-filter: blur(10px)
}

.image-count .icon {
    width: .9rem;
    height: .9rem
}

.stock-badge {
    position: absolute;
    inset: auto auto var(--space-sm) var(--space-sm);
    background: var(--color-paper);
    color: var(--color-ink)
}

.product-card__info {
    min-width: 0;
    display: grid;
    gap: var(--space-2xs)
}

.product-card__info h3 {
    font-size: 1.05rem;
    letter-spacing: -.025em
}

.product-card__info h3 a {
    text-decoration: none
}

.price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
    font-variant-numeric: tabular-nums
}

.price strong {
    font-size: 1.05rem
}

.price s {
    color: var(--color-neutral);
    font-size: var(--text-sm)
}

.product-card__action {
    align-self: end
}

.circle-action {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-rule);
    border-radius: 50%;
    background: var(--color-paper-2);
    color: var(--color-ink);
    transition: background-color var(--dur-short), border-color var(--dur-short), transform var(--dur-micro)
}

.process {
    display: grid;
    background: var(--color-paper-3);
    color: var(--color-ink)
}

.process__intro {
    display: grid;
    align-content: start;
    gap: var(--space-md);
    padding: var(--space-3xl) var(--page-gutter)
}

.process__intro>p:last-child {
    max-width: 48ch;
    color: var(--color-ink-2)
}

.process__steps {
    display: grid
}

.process__steps article {
    display: grid;
    grid-template-columns: 2rem 2.5rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-md);
    padding: var(--space-xl) var(--page-gutter);
    border-block-start: 1px solid color-mix(in oklch, var(--color-ink) 18%, var(--color-transparent))
}

.process__steps article>span {
    color: var(--color-ink-2);
    font-size: var(--text-xs)
}

.process__steps article>.icon {
    width: 2rem;
    height: 2rem
}

.process__steps article>div {
    display: grid;
    gap: var(--space-xs)
}

.process__steps article p {
    max-width: 48ch;
    color: var(--color-ink-2)
}

.restock-panel {
    display: grid;
    gap: 2rem;
    align-items: end;
    padding-block: clamp(4rem, 8vw, 7rem)
}

.restock-panel>div {
    display: grid;
    gap: .75rem
}

.restock-panel>div p:last-child {
    color: var(--color-muted)
}

.newsletter-form {
    display: grid;
    gap: .75rem
}

.newsletter-form--inline {
    grid-template-columns: minmax(0, 1fr)
}

.page-hero,
.page-head {
    display: grid;
    gap: 1.5rem;
    padding: clamp(4rem, 9vw, 8rem) var(--page-gutter) clamp(3rem, 6vw, 5rem);
    background: linear-gradient(145deg, var(--color-paper-2), var(--color-brand-deep) 180%)
}

.page-hero h1 {
    font-size: var(--text-display)
}

.page-head>div {
    display: grid;
    gap: .75rem
}

.page-head>p {
    max-width: 52ch;
    align-self: end;
    color: var(--color-ink-2)
}

.catalog-search {
    width: min(100%, 54rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md)
}

.catalog-search .button {
    grid-column: 1/-1
}

.catalog-toolbar {
    padding-block: var(--space-lg)
}

.filter-list {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    overflow-x: auto;
    padding-block: var(--space-2xs);
    scrollbar-width: thin
}

.filter-list a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap
}

.filter-list a[aria-current="page"] {
    border-color: var(--color-accent);
    background: var(--surface-accent-soft);
    color: var(--color-ink)
}

.product-section--catalog {
    padding-block-start: 2rem
}

.results-line {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-end: 2rem;
    padding-block-end: 1.25rem;
    border-block-end: 1px solid var(--color-rule-2)
}

.results-line>div {
    display: grid;
    gap: .5rem
}

.results-line h2 {
    font-size: var(--text-xl)
}

.results-line>span {
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums
}

.empty-state {
    min-height: 26rem;
    display: grid;
    place-content: center;
    justify-items: start;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.empty-state>.icon {
    width: 3rem;
    height: 3rem;
    color: var(--color-accent)
}

.empty-state p {
    max-width: 45ch;
    color: var(--color-muted)
}

.empty-state--cart {
    margin-block: 4rem 7rem
}

.product-detail {
    display: grid;
    gap: var(--space-xl);
    padding-block: var(--space-2xl)
}

.product-gallery {
    min-width: 0
}

.product-gallery__stage {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-paper-2)
}

.product-gallery__stage>img,
.product-gallery__stage>video {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.product-gallery__stage>video {
    display: block;
    background: #000
}

.product-gallery__stage>[hidden] {
    display: none
}

.product-gallery__stage>.product-badge {
    position: absolute;
    inset: var(--space-md) auto auto var(--space-md)
}

.product-placeholder--large {
    min-height: 100%
}

.product-gallery__thumbs {
    display: flex;
    gap: var(--space-sm);
    margin-block-start: var(--space-sm);
    padding: var(--space-2xs);
    overflow-x: auto
}

.gallery-thumb {
    width: 4.5rem;
    height: 4.5rem;
    flex: none;
    padding: var(--space-2xs);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    overflow: hidden
}

.gallery-thumb.is-active {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-accent) 25%, var(--color-transparent))
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    border-radius: .5rem;
    object-fit: cover
}

.gallery-thumb--video {
    position: relative;
    color: #fff;
    background: #111
}

.gallery-thumb--video span {
    position: absolute;
    inset: auto var(--space-2xs) var(--space-2xs);
    padding: .15rem .25rem;
    border-radius: .25rem;
    background: rgb(0 0 0 / 72%);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.2
}

.product-detail__info {
    display: grid;
    align-content: start;
    gap: 1.25rem
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    color: var(--color-muted);
    font-size: var(--text-sm)
}

.breadcrumb a {
    text-decoration: none
}

.product-detail__price strong {
    font-size: var(--text-xl)
}

.product-detail__description {
    max-width: 62ch;
    color: var(--color-ink-2)
}

.product-facts {
    display: grid;
    border-block: 1px solid var(--color-rule-2)
}

.product-facts>div {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-block-end: 1px solid var(--color-rule-2)
}

.product-facts>div:last-child {
    border: 0
}

.product-facts>div>.icon {
    color: var(--color-accent)
}

.product-facts span {
    display: grid
}

.product-facts b {
    font-size: var(--text-sm)
}

.product-facts small {
    color: var(--color-muted)
}

.add-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm)
}

.quantity-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem 3.25rem 2.75rem;
    align-items: center;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    overflow: hidden
}

.quantity-picker>span {
    padding-inline: var(--space-md);
    color: var(--color-muted);
    font-size: var(--text-sm)
}

.quantity-picker button {
    height: 3rem;
    display: grid;
    place-items: center;
    border: 0;
    background: var(--color-paper-2)
}

.quantity-picker input {
    height: 3rem;
    padding: 0;
    border: 0;
    border-inline: 1px solid var(--color-rule);
    border-radius: 0;
    text-align: center;
    background: var(--color-paper)
}

.product-detail__assurance,
.summary-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    color: var(--color-muted);
    font-size: var(--text-sm)
}

.product-detail__assurance .icon,
.summary-note .icon {
    margin-block-start: var(--space-2xs);
    color: var(--color-success)
}

.mobile-buy-bar {
    position: fixed;
    inset: auto var(--space-sm) var(--space-sm);
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md)
}

.mobile-buy-bar>span {
    min-width: 0;
    display: grid
}

.mobile-buy-bar small {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-muted)
}

.related-products {
    padding-block-start: var(--space-xl)
}

.cart-layout,
.checkout-layout {
    display: grid;
    gap: var(--space-xl);
    padding-block: var(--space-2xl)
}

.cart-lines {
    display: grid;
    gap: var(--space-md)
}

.cart-line {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.cart-line__media {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-paper);
    text-decoration: none
}

.cart-line__media>img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.cart-line__media .image-count {
    position: absolute;
    inset: var(--space-2xs) var(--space-2xs) auto auto;
    padding: var(--space-2xs)
}

.cart-line__body {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: var(--space-2xs)
}

.cart-line__body h2 {
    font-size: var(--text-md)
}

.cart-line__body h2 a {
    text-decoration: none
}

.cart-line__sku {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.quantity-control {
    width: fit-content;
    display: grid;
    grid-template-columns: 2.75rem 2.75rem 2.75rem;
    align-items: center;
    margin-block-start: var(--space-sm);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-pill);
    overflow: hidden
}

.quantity-control form {
    display: grid
}

.quantity-control button,
.quantity-control>span {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 0;
    background: var(--color-transparent);
    text-align: center
}

.quantity-control button {
    background: var(--color-paper)
}

.quantity-control .icon {
    width: 1rem;
    height: 1rem
}

.cart-line__price {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md)
}

.cart-line__price>strong {
    font-family: var(--font-display);
    font-size: var(--text-md)
}

.remove-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs);
    border: 0;
    background: var(--color-transparent);
    color: var(--color-error);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap
}

.remove-action .icon {
    width: 1rem;
    height: 1rem
}

.order-summary {
    height: fit-content;
    display: grid;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border-radius: var(--radius-lg)
}

.order-summary h2 {
    font-size: var(--text-xl)
}

.order-summary dl {
    display: grid
}

.order-summary dl>div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-block-end: 1px solid var(--color-rule-2);
    font-size: var(--text-sm)
}

.order-summary dd {
    text-align: end
}

.order-summary__total {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block-start: var(--space-2xs);
    font-size: var(--text-lg);
    font-variant-numeric: tabular-nums
}

.order-summary .text-link {
    justify-self: start;
    font-size: var(--text-sm)
}

.checkout-form {
    display: grid;
    gap: var(--space-md)
}

.checkout-step {
    margin: 0;
    padding: var(--space-lg);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.checkout-step legend {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 var(--space-xs);
    font-family: var(--font-display);
    font-size: var(--text-md)
}

.checkout-step legend span {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-family: var(--font-body);
    font-size: var(--text-xs)
}

.checkout-step__intro {
    margin-block: var(--space-2xs) var(--space-lg);
    color: var(--color-muted);
    font-size: var(--text-sm)
}

.form-grid {
    display: grid;
    gap: var(--space-md)
}

.field {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: var(--space-xs)
}

.field label {
    font-size: var(--text-sm);
    font-weight: 700
}

.field__helper {
    min-height: 1lh;
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.field__error {
    color: var(--color-error);
    font-weight: 700
}

.field[hidden] {
    display: none
}

input,
select,
textarea {
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-sm);
    outline: 2px solid var(--color-transparent);
    outline-offset: 1px;
    background: var(--color-paper);
    color: var(--color-ink);
    transition: border-color var(--dur-short), background-color var(--dur-short)
}

textarea {
    min-height: 7rem;
    resize: vertical
}

input::placeholder,
textarea::placeholder {
    color: var(--color-neutral);
    opacity: 1
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--color-accent);
    outline-color: var(--color-focus)
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: var(--color-error)
}

input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
    opacity: .55;
    background: var(--color-paper-2)
}

.form-alert {
    padding: var(--space-md);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-sm);
    background: var(--color-error-soft)
}

.bank-details {
    display: grid;
    margin-block: var(--space-md) var(--space-lg);
    border-block-start: 1px solid var(--color-rule)
}

.bank-details>div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-block-end: 1px solid var(--color-rule-2)
}

.bank-details span {
    color: var(--color-muted)
}

.bank-details strong {
    text-align: end;
    font-variant-numeric: tabular-nums
}

.copy-button {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-sm);
    padding: var(--space-xs) 0;
    border: 0;
    border-block-end: 1px solid currentColor;
    background: var(--color-transparent);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap
}

.copy-button[data-state="copied"] {
    color: var(--color-success)
}

.upload-control {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 5.5rem;
    padding: var(--space-md);
    border: 1px dashed var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper)
}

.upload-control>.icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-accent)
}

.upload-control>div {
    display: grid
}

.upload-control b {
    font-size: var(--text-sm)
}

.upload-control span {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.upload-control input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer
}

.checkout-items {
    display: grid;
    gap: var(--space-sm)
}

.checkout-items>div {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    padding-block-end: var(--space-sm);
    border-block-end: 1px solid var(--color-rule-2)
}

.checkout-item__image {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-paper-3)
}

.checkout-item__image img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover
}

.checkout-item__image>b {
    position: absolute;
    inset: calc(var(--space-2xs) * -1) calc(var(--space-2xs) * -1) auto auto;
    min-width: 1.25rem;
    height: 1.25rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font-size: .65rem
}

.checkout-items>div>span:nth-child(2) {
    min-width: 0;
    display: grid
}

.checkout-items>div>span:nth-child(2) strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-sm)
}

.checkout-items small {
    color: var(--color-muted)
}

.checkout-items>div>b {
    font-size: var(--text-sm)
}

.order-received {
    display: grid;
    justify-items: start;
    gap: 1.25rem;
    padding-block: clamp(4rem, 9vw, 8rem)
}

.order-received__mark {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-success);
    color: var(--color-paper)
}

.order-received__mark .icon {
    width: 2rem;
    height: 2rem
}

.order-received>p:not(.eyebrow) {
    max-width: 58ch;
    color: var(--color-ink-2)
}

.order-reference {
    width: min(100%, 42rem);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.25rem;
    border-radius: var(--radius-md)
}

.order-reference span {
    color: var(--color-muted);
    font-size: var(--text-sm)
}

.order-reference strong {
    font-family: var(--font-display);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums
}

.received-summary {
    width: min(100%, 42rem);
    display: grid
}

.received-summary>div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-block-end: 1px solid var(--color-rule-2)
}

.order-received__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem
}

.site-footer {
    border-block-start: 1px solid var(--color-rule-2);
    background: var(--color-paper-2)
}

.footer-statement {
    width: min(100%, var(--content-max));
    margin: auto;
    padding: var(--space-3xl) var(--page-gutter)
}

.footer-statement>p {
    margin-block-end: var(--space-md);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase
}

.footer-statement h2 {
    font-size: clamp(2.7rem, 8vw, 7rem)
}

.footer-grid {
    width: min(100%, var(--content-max));
    margin: auto;
    display: grid;
    gap: var(--space-xl);
    padding: 0 var(--page-gutter) var(--space-2xl)
}

.footer-column {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-sm)
}

.footer-column h3,
.footer-newsletter h3 {
    margin-block-end: var(--space-2xs);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: .12em;
    text-transform: uppercase
}

.footer-column a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-ink-2);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap
}

.footer-column .icon {
    width: 1rem;
    height: 1rem
}

.footer-newsletter>div {
    display: grid;
    gap: var(--space-xs)
}

.footer-newsletter p {
    color: var(--color-muted);
    font-size: var(--text-sm)
}

.newsletter-form__row {
    display: grid;
    gap: var(--space-xs)
}

.footer-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg) var(--page-gutter);
    border-block-start: 1px solid var(--color-rule-2);
    color: var(--color-muted);
    font-size: var(--text-xs)
}

@media (hover:hover) and (pointer:fine) {
    .button--accent:hover {
        background: color-mix(in oklch, var(--color-accent) 86%, var(--color-ink))
    }

    .button--quiet:hover,
    .button--outline:hover {
        border-color: var(--color-accent)
    }

    .desktop-nav a:hover,
    .nav-icon-link:hover,
    .text-link:hover,
    .breadcrumb a:hover,
    .footer-column a:hover {
        color: color-mix(in oklch, var(--color-accent) 72%, var(--color-ink))
    }

    .nav-icon-link:hover,
    .icon-button:hover {
        background: var(--surface-accent-soft)
    }

    .circle-action:hover {
        background: var(--color-accent)
    }

    .product-card__media:hover img,
    .product-card__media:focus-visible img {
        transform: scale(1.025)
    }

    .category-tile:hover {
        border-color: var(--color-accent)
    }

    .gallery-thumb:hover {
        border-color: var(--color-muted)
    }

    input:hover,
    select:hover,
    textarea:hover {
        background: var(--color-paper-2)
    }
}

@media (min-width:40rem) {
    .brand__name {
        display: inline
    }

    .nav-icon-link>span {
        display: inline
    }

    .hero-search,
    .catalog-search {
        grid-template-columns: auto minmax(0, 1fr) auto
    }

    .hero-search button,
    .catalog-search .button {
        grid-column: auto
    }

    .hero h1 br {
        display: initial
    }

    .hero__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center
    }

    .hero__actions .button {
        width: auto
    }

    .hero__brand img {
        height: min(44vw, 22rem);
        aspect-ratio: 2/1
    }

    .section-heading {
        grid-template-columns: minmax(0, 1.2fr) minmax(16rem, .8fr);
        align-items: end
    }

    .section-heading--line {
        display: flex;
        justify-content: space-between
    }

    .category-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr)
    }

    .category-tile--1 {
        grid-row: span 2
    }

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .newsletter-form--inline,
    .newsletter-form__row {
        grid-template-columns: minmax(0, 1fr) auto
    }

    .results-line {
        flex-direction: row;
        align-items: end;
        justify-content: space-between
    }

    .add-form {
        flex-direction: row
    }

    .quantity-picker {
        width: 17rem;
        flex: none
    }

    .cart-line {
        grid-template-columns: 8rem minmax(0, 1fr) auto
    }

    .cart-line__price {
        grid-column: auto;
        flex-direction: column;
        align-items: end;
        justify-content: space-between
    }

    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .field[data-field-name="delivery_method"],
    .field[data-field-name="address"],
    .field[data-field-name="payment_receipt"],
    .field[data-field-name="notes"] {
        grid-column: 1/-1
    }

    .order-reference {
        flex-direction: row;
        align-items: center;
        justify-content: space-between
    }

    .footer-grid {
        grid-template-columns: minmax(0, .65fr) minmax(0, .8fr) minmax(0, 1.55fr)
    }

    .footer-meta {
        flex-direction: row;
        justify-content: space-between
    }
}

@media (min-width:64rem) {
    main {
        padding-block-start: calc(var(--announcement-height) + var(--nav-height) + var(--space-lg))
    }

    .nav-shell {
        padding-inline: var(--space-md)
    }

    .desktop-nav {
        display: flex
    }

    .mobile-menu-button {
        display: none
    }

    .hero {
        min-height: calc(100svh - var(--announcement-height) - var(--nav-height) - var(--space-md));
        grid-template-columns: minmax(0, 1.15fr) minmax(24rem, .85fr);
        align-items: center;
        padding-block: var(--space-xl) var(--space-2xl)
    }

    .hero__content {
        gap: var(--space-lg);
        grid-column: 1
    }

    .hero__brand {
        position: relative;
        inset: auto;
        z-index: var(--z-base);
        order: 0;
        grid-column: 2;
        grid-row: 1;
        width: auto;
        opacity: .72
    }

    .hero__brand img {
        height: auto;
        aspect-ratio: 3/2;
        box-shadow: var(--shadow-float)
    }

    .hero-search {
        order: 0;
        grid-column: 1/-1
    }

    .category-mosaic {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr) minmax(0, .75fr)
    }

    .category-tile--1 {
        grid-row: span 2
    }

    .category-tile:nth-child(6) {
        grid-column: 2/4
    }

    .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .process {
        grid-template-columns: minmax(20rem, .8fr) minmax(0, 1.2fr)
    }

    .restock-panel {
        grid-template-columns: minmax(0, 1fr) minmax(24rem, .8fr)
    }

    .page-head {
        grid-template-columns: minmax(0, 1.25fr) minmax(24rem, .75fr);
        align-items: end
    }

    .product-detail {
        grid-template-columns: minmax(0, 1.15fr) minmax(24rem, .85fr);
        gap: var(--space-3xl)
    }

    .product-gallery {
        display: grid;
        grid-template-columns: 5.5rem minmax(0, 1fr);
        gap: var(--space-sm)
    }

    .product-gallery__stage {
        grid-column: 2
    }

    .product-gallery__thumbs {
        grid-column: 1;
        grid-row: 1;
        flex-direction: column;
        margin: 0;
        overflow-y: auto
    }

    .gallery-thumb {
        width: 5rem;
        height: 5rem
    }

    .product-detail__info {
        position: sticky;
        inset-block-start: calc(var(--nav-height) + var(--space-xl));
        height: fit-content;
        padding-block: var(--space-md)
    }

    .mobile-buy-bar {
        display: none
    }

    .cart-layout,
    .checkout-layout {
        grid-template-columns: minmax(0, 1.35fr) minmax(22rem, .65fr);
        gap: var(--space-3xl)
    }

    .order-summary {
        position: sticky;
        inset-block-start: calc(var(--nav-height) + var(--space-xl))
    }

    .checkout-step {
        padding: var(--space-xl)
    }

    .footer-meta {
        padding-inline: max(var(--page-gutter), calc((100vw - var(--content-max))/2 + var(--page-gutter)))
    }
}

@media (min-width:90rem) {
    .product-grid {
        gap-inline: 1.75rem
    }

    .hero {
        padding-inline: max(var(--page-gutter), calc((100vw - var(--content-max))/2 + var(--page-gutter)))
    }
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation-duration: var(--dur-micro) !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: var(--dur-micro) !important
    }

    .entrance>* {
        opacity: 1;
        transform: none
    }
}

.product-gallery__stage>img {
    transition: opacity var(--dur-micro) var(--ease-out)
}

@keyframes settle {
    to {
        opacity: 1;
        transform: none
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* Live commerce controls */
.nav-search,
.favourite-link {
    display: none
}

.favourite-count {
    min-width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-paper-3);
    color: var(--color-ink);
    font-size: .65rem
}

.theme-toggle__sun {
    display: none
}

[data-theme="light"] .theme-toggle__sun {
    display: block
}

[data-theme="light"] .theme-toggle__moon {
    display: none
}

.favourite-action {
    position: absolute;
    inset: auto var(--space-sm) 7rem auto;
    z-index: var(--z-raised)
}

.favourite-action .icon-button {
    border: 1px solid var(--color-rule);
    background: var(--surface-glass-strong);
    color: var(--color-ink);
    backdrop-filter: blur(12px)
}

.favourite-action .icon-button.is-active,
.product-purchase-actions .is-active {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-ink)
}

.favourite-action .is-active .icon,
.product-purchase-actions .is-active .icon {
    fill: currentColor
}

.product-purchase-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm)
}

.product-purchase-actions>form:last-child .button {
    width: 100%
}

.live-search {
    position: relative
}

.search-suggestions {
    position: absolute;
    inset: calc(100% + .5rem) 0 auto;
    z-index: var(--z-sticky);
    max-height: min(26rem, 65dvh);
    padding: var(--space-xs);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-md);
    background: var(--surface-glass-strong);
    box-shadow: var(--shadow-float);
    backdrop-filter: blur(18px);
    overflow-y: auto
}

.search-suggestion {
    min-height: 4.25rem;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    text-decoration: none
}

.search-suggestion img,
.search-suggestion__placeholder {
    width: 3rem;
    height: 3rem;
    border-radius: .55rem;
    object-fit: cover;
    background: var(--color-paper-3)
}

.search-suggestion>span {
    min-width: 0;
    display: grid
}

.search-suggestion b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.search-suggestion small {
    color: var(--color-muted)
}

.search-suggestion>strong {
    font-size: var(--text-sm);
    white-space: nowrap
}

.async-status {
    position: fixed;
    inset: auto var(--space-md) var(--space-md) auto;
    z-index: var(--z-toast);
    max-width: min(24rem, calc(100% - 2rem));
    padding: .75rem 1rem;
    border: 1px solid var(--color-error);
    border-radius: var(--radius-sm);
    background: var(--color-error-soft);
    color: var(--color-ink);
    box-shadow: var(--shadow-card);
    opacity: 0;
    pointer-events: none;
    transform: translateY(.5rem);
    transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out)
}

.async-status.is-visible {
    opacity: 1;
    transform: none
}

.cart-line.is-removing {
    opacity: 0;
    transform: translateX(-.5rem);
    transition: opacity var(--dur-short) var(--ease-in-out), transform var(--dur-short) var(--ease-in-out)
}

/* Staff workbench */
.staff-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    padding-block: clamp(3rem, 7vw, 6rem) var(--space-xl)
}

.staff-head>div {
    display: grid;
    gap: var(--space-sm)
}

.staff-head>div>p:last-child {
    color: var(--color-muted)
}

.staff-head h1 {
    font-size: var(--text-display-small)
}

.staff-nav {
    display: flex;
    gap: var(--space-2xs);
    padding: var(--space-xs);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
    overflow-x: auto
}

.staff-nav a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: .65rem .9rem;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap
}

.staff-nav a[aria-current="page"] {
    background: var(--color-accent);
    color: var(--color-accent-ink)
}

.staff-nav .icon {
    width: 1rem;
    height: 1rem
}

.staff-content {
    padding-block: var(--space-xl) var(--space-3xl)
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-block-end: var(--space-xl)
}

.metric-grid article {
    min-width: 0;
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-lg);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.metric-grid span,
.metric-grid small {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.metric-grid strong {
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    line-height: 1
}

.staff-grid {
    display: grid;
    gap: var(--space-lg)
}

.staff-panel {
    min-width: 0;
    padding: var(--space-lg);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.staff-panel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-md);
    margin-block-end: var(--space-lg)
}

.staff-panel__head>div {
    display: grid;
    gap: var(--space-2xs)
}

.staff-panel__head h2 {
    font-size: var(--text-lg)
}

.data-list {
    display: grid
}

.data-list>a {
    min-height: 4.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--color-rule-2);
    text-decoration: none
}

.data-list>a>span {
    min-width: 0;
    display: grid
}

.data-list b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.data-list small,
.panel-empty {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.data-list>a>strong {
    text-align: end;
    font-size: var(--text-xs)
}

.staff-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-xs);
    margin-block-end: var(--space-lg);
    padding: var(--space-xs);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.staff-search>.icon {
    margin-inline-start: var(--space-sm)
}

.staff-search .button {
    grid-column: 1/-1
}

.staff-product-list {
    display: grid;
    gap: var(--space-sm)
}

.staff-product-list article {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.staff-product-list article>span {
    min-width: 0;
    display: grid
}

.staff-product-list article>span:nth-of-type(3),
.staff-product-list article>span:nth-of-type(4) {
    display: none
}

.staff-product-list article>.button {
    grid-column: 2/4;
    justify-self: start
}

.staff-product-image {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--color-paper-3);
    overflow: hidden
}

.staff-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.staff-product-main small,
.staff-product-list article>span small {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.status-chip {
    width: fit-content;
    padding: .2rem .5rem;
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
    font-size: .7rem;
    font-weight: 700
}

.status-chip.is-success {
    background: var(--color-success-soft);
    color: var(--color-success)
}

.staff-form {
    padding: var(--space-lg);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.staff-form__grid {
    display: grid;
    gap: var(--space-md)
}

.staff-form .field>small {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.staff-form input[type="checkbox"] {
    width: 1.25rem;
    min-height: 1.25rem;
    justify-self: start
}

.staff-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--color-rule-2)
}

.gallery-manager {
    margin-block-start: var(--space-lg)
}

.gallery-manager>div {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto
}

.gallery-manager figure {
    width: 8rem;
    flex: none
}

.gallery-manager img {
    width: 8rem;
    height: 8rem;
    border-radius: var(--radius-sm);
    object-fit: cover
}

.gallery-manager figcaption {
    margin-block-start: .25rem;
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.inventory-list {
    display: grid;
    gap: var(--space-md)
}

.inventory-list article {
    display: grid;
    gap: var(--space-sm);
    padding-block-end: var(--space-md);
    border-block-end: 1px solid var(--color-rule-2)
}

.inventory-list article>span {
    display: grid
}

.inventory-list small {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.inventory-list form {
    display: grid;
    grid-template-columns: minmax(5rem, .55fr) minmax(4rem, .4fr) minmax(0, 1fr);
    gap: var(--space-xs)
}

.inventory-list form .button {
    grid-column: 1/-1
}

.movement-list {
    display: grid
}

.movement-list article {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--color-rule-2)
}

.movement-list article>span:last-child {
    display: grid
}

.movement-list small {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.movement-delta {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-error-soft);
    color: var(--color-error);
    font-size: var(--text-xs);
    font-weight: 700
}

.movement-delta.is-positive {
    background: var(--color-success-soft);
    color: var(--color-success)
}

.pos-new {
    width: 100%;
    display: grid;
    gap: var(--space-xs)
}

.pos-layout {
    display: grid;
    gap: var(--space-lg)
}

.staff-search--pos {
    display: grid;
    margin: 0 0 var(--space-md)
}

.staff-search--pos input {
    border: 0;
    background: var(--color-transparent)
}

.pos-product-list {
    display: grid;
    gap: var(--space-xs);
    max-height: 42rem;
    overflow-y: auto
}

.pos-product-list article {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs);
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-sm)
}

.pos-product-list article>span:nth-child(2) {
    min-width: 0;
    display: grid
}

.pos-product-list article small {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.pos-product-list article strong {
    font-size: var(--text-sm)
}

.pos-product-list form {
    display: flex;
    align-items: center
}

.pos-product-list form input {
    width: 3.5rem;
    padding-inline: .25rem;
    text-align: center
}

.pos-product-list form .icon-button {
    border: 1px solid var(--color-rule);
    background: var(--color-accent);
    color: var(--color-accent-ink)
}

.pos-cart-lines {
    display: grid
}

.pos-cart-lines article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
    border-block-end: 1px solid var(--color-rule-2)
}

.pos-cart-lines article>span {
    display: grid
}

.pos-cart-lines small {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.pos-cart-lines form {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-xs)
}

.pos-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-lg)
}

.pos-total strong {
    font-family: var(--font-display);
    font-size: var(--text-xl)
}

.pos-checkout {
    display: grid;
    gap: var(--space-sm);
    padding-block-start: var(--space-lg);
    border-block-start: 1px solid var(--color-rule-2)
}

.pos-checkout label {
    display: grid;
    gap: .25rem;
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700
}

.pos-sidebar {
    display: grid;
    align-content: start;
    gap: var(--space-lg)
}

@media (max-width:24rem) {
    .cart-line {
        grid-template-columns: 4.75rem minmax(0, 1fr);
        gap: var(--space-sm);
        padding: var(--space-sm)
    }

    .cart-line__price {
        gap: var(--space-xs)
    }

    .checkout-items>div {
        grid-template-columns: 3rem minmax(0, 1fr)
    }

    .checkout-items>div>b {
        grid-column: 2
    }

    .checkout-item__image {
        width: 3rem;
        height: 3rem
    }

    .page-head,
    .page-hero {
        padding-inline: 1rem
    }

    .metric-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .inventory-list form {
        grid-template-columns: 1fr 1fr
    }

    .inventory-list form input[name="note"] {
        grid-column: 1/-1
    }
}

@media (min-width:40rem) {

    .nav-search,
    .favourite-link {
        display: flex
    }

    .product-purchase-actions {
        flex-direction: row
    }

    .product-purchase-actions>form:first-child {
        flex: 1
    }

    .product-purchase-actions>form:last-child .button {
        width: auto
    }

    .staff-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between
    }

    .metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .staff-search {
        grid-template-columns: auto minmax(0, 1fr) auto
    }

    .staff-search .button {
        grid-column: auto
    }

    .staff-product-list article {
        grid-template-columns: 4rem minmax(0, 1.5fr) minmax(5rem, .6fr) minmax(4rem, .35fr) auto auto
    }

    .staff-product-list article>span:nth-of-type(3),
    .staff-product-list article>span:nth-of-type(4) {
        display: grid
    }

    .staff-product-list article>.button {
        grid-column: auto
    }

    .staff-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .staff-form .field--wide {
        grid-column: 1/-1
    }

    .inventory-list form {
        grid-template-columns: minmax(6rem, .5fr) 5rem minmax(8rem, 1fr) auto
    }

    .inventory-list form .button {
        grid-column: auto
    }

    .pos-new {
        width: min(100%, 34rem);
        grid-template-columns: minmax(0, 1fr) auto
    }
}

@media (min-width:64rem) {
    .staff-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .staff-grid--inventory {
        grid-template-columns: minmax(0, 1.4fr) minmax(20rem, .6fr)
    }

    .pos-layout {
        grid-template-columns: minmax(18rem, .8fr) minmax(24rem, 1.2fr)
    }

    .pos-sidebar {
        grid-column: 1/-1;
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (min-width:82rem) {
    .pos-layout {
        grid-template-columns: minmax(18rem, .8fr) minmax(24rem, 1.1fr) minmax(18rem, .65fr)
    }

    .pos-sidebar {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr)
    }
}

.glass-surface,
.search-suggestions {
    color: var(--color-ink)
}

/* Product reviews */
.product-rating-summary {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-decoration: none
}

.product-rating-summary>span:first-child,
.review-stars>span,
.review-empty>span {
    color: var(--color-accent)
}

.product-rating-summary b {
    color: var(--color-ink)
}

.reviews-section {
    padding-block: var(--space-3xl)
}

.reviews-layout,
.review-list,
.review-form,
.review-form-panel {
    display: grid
}

.reviews-layout {
    gap: var(--space-xl)
}

.review-list {
    align-content: start;
    gap: var(--space-md)
}

.review-card,
.review-empty,
.review-form-panel {
    border: 1px solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.review-card {
    padding: var(--space-lg)
}

.review-card header {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-block-end: var(--space-md)
}

.review-card header>div {
    display: grid
}

.review-card time,
.review-form small,
.review-empty p {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.review-stars {
    white-space: nowrap;
    letter-spacing: .08em
}

.review-stars i {
    color: var(--color-rule);
    font-style: normal
}

.review-empty {
    min-height: 18rem;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl);
    text-align: center
}

.review-empty>span {
    font-size: 2rem
}

.review-form-panel {
    align-content: start;
    gap: var(--space-xs);
    padding: var(--space-lg)
}

.review-form {
    gap: var(--space-md);
    margin-block-start: var(--space-md)
}

.review-form .field {
    display: grid;
    gap: var(--space-2xs)
}

.review-form label {
    font-size: var(--text-sm);
    font-weight: 700
}

.review-form .button {
    width: 100%
}

.review-form__note {
    text-align: center
}

.field-error,
.form-errors {
    color: var(--color-error);
    font-size: var(--text-xs)
}

@media (min-width:64rem) {
    .reviews-layout {
        grid-template-columns: minmax(0, 1.25fr) minmax(22rem, .75fr);
        align-items: start
    }
}

/* Staff operations expansion */
.staff-head--compact h1 {
    font-size: clamp(2rem, 5vw, 4rem)
}

.staff-index,
.order-workspace,
.tracking-shell,
.system-checks {
    display: grid;
    gap: var(--space-xl)
}

.ops-index {
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
    overflow: hidden
}

.ops-index__head,
.editor-section__head {
    display: grid;
    gap: var(--space-2xs);
    padding: var(--space-lg)
}

.ops-index__head p,
.editor-section__head p,
.sync-note {
    color: var(--color-muted);
    font-size: var(--text-sm)
}

.ops-index__rows {
    display: grid
}

.ops-index__rows>a,
.system-check {
    min-height: 4.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-block-start: var(--rule-hair) solid var(--color-rule-2);
    color: var(--color-ink);
    text-decoration: none
}

.ops-index__rows span,
.system-check>span,
.notification-ledger__copy,
.order-items-compact span {
    min-width: 0;
    display: grid;
    gap: var(--space-2xs)
}

.ops-index__rows small,
.system-check small,
.notification-ledger small,
.order-items-compact small,
.tracking-result p,
.tracking-timeline small {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.ops-index__rows>a>strong {
    min-width: var(--space-xl);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
    text-align: center;
    font-family: var(--font-display)
}

.quick-actions {
    display: grid;
    gap: var(--space-sm)
}

.quick-actions a {
    min-height: 6rem;
    display: grid;
    align-content: center;
    gap: var(--space-2xs);
    padding: var(--space-lg);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
    text-decoration: none
}

.quick-actions span {
    font-family: var(--font-display);
    font-weight: 700
}

.quick-actions small {
    color: var(--color-muted)
}

.ops-totals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--rule-hair);
    margin: 0;
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-rule-2);
    overflow: hidden
}

.ops-totals div {
    min-width: 0;
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background: var(--color-paper-2)
}

.ops-totals dt {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.ops-totals dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700
}

.staff-filter {
    display: grid;
    gap: var(--space-sm);
    margin-block-end: var(--space-lg);
    padding: var(--space-md);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.staff-filter label {
    display: grid;
    gap: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700
}

.notification-ledger,
.activity-ledger,
.order-ledger {
    display: grid;
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
    overflow: hidden
}

.notification-ledger article,
.activity-ledger article,
.order-ledger>a {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-block-end: var(--rule-hair) solid var(--color-rule-2)
}

.notification-ledger__deliveries,
.notification-ledger__actions,
.order-ledger__meta,
.activity-ledger article>dl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs)
}

.delivery,
.status-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--color-paper-3);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700
}

.delivery--sent,
.status-badge--completed,
.status-badge--dispatched {
    background: var(--color-success-soft);
    color: var(--color-success)
}

.delivery--failed,
.status-badge--cancelled {
    background: var(--color-error-soft);
    color: var(--color-error)
}

.order-ledger>a {
    color: inherit;
    text-decoration: none
}

.activity-ledger__main,
.activity-ledger__main>div,
.activity-ledger article>dl>div {
    display: grid;
    gap: var(--space-2xs)
}

.activity-ledger__main>div {
    grid-template-columns: auto 1fr;
    align-items: center
}

.activity-ledger time,
.activity-ledger small,
.import-review__source small {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.activity-ledger article>dl {
    margin: 0
}

.activity-ledger article>dl dd {
    margin: 0
}

.order-ledger h2,
.import-grid h2 {
    font-size: var(--text-md)
}

.status-workflow {
    display: grid;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    background: var(--surface-accent-soft)
}

.status-workflow>div:first-child {
    display: grid;
    gap: var(--space-xs)
}

.status-workflow p {
    color: var(--color-muted)
}

.status-actions {
    display: flex;
    gap: var(--space-xs);
    overflow-x: auto;
    padding-block-end: var(--space-2xs)
}

.status-actions form {
    flex: none
}

.status-actions button,
.gallery-sort button {
    min-height: 2.75rem;
    padding: var(--space-xs) var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    color: var(--color-ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap
}

.status-actions button[disabled] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    cursor: default
}

.order-workspace__grid,
.order-workspace__main {
    display: grid;
    gap: var(--space-lg)
}

.order-items-compact,
.order-money,
.order-facts,
.tracking-facts {
    display: grid;
    margin: 0
}

.order-items-compact>div,
.order-money>div,
.order-facts>div,
.tracking-facts>div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-sm);
    border-block-end: var(--rule-hair) solid var(--color-rule-2)
}

.order-money dt,
.order-facts dt,
.tracking-facts dt {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.order-money dd,
.order-facts dd,
.tracking-facts dd {
    margin: 0;
    max-width: 65%;
    text-align: end;
    overflow-wrap: anywhere
}

.fulfilment-form form,
.tracking-form,
.import-review-form {
    display: grid;
    gap: var(--space-md)
}

.fulfilment-form .field,
.tracking-form .field,
.import-review-form .field {
    display: grid;
    gap: var(--space-2xs)
}

.product-editor {
    display: grid;
    gap: var(--space-xl);
    padding: 0;
    background: var(--color-transparent)
}

.editor-section,
.editor-advanced {
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2);
    overflow: hidden
}

.editor-section .staff-form__grid,
.editor-advanced>div {
    padding: 0 var(--space-lg) var(--space-lg)
}

.editor-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-sm)
}

.editor-toggle span {
    display: grid
}

.editor-toggle small,
.gallery-sort>p,
.new-image-preview small {
    color: var(--color-muted);
    font-size: var(--text-xs)
}

.media-editor {
    display: grid;
    gap: var(--space-lg);
    padding: 0 var(--space-lg) var(--space-lg)
}

.upload-preview,
.new-image-preview {
    min-height: 10rem;
    display: grid;
    place-items: center;
    margin-block-start: var(--space-sm);
    padding: var(--space-sm);
    border: var(--rule-hair) dashed var(--color-rule);
    border-radius: var(--radius-sm);
    color: var(--color-muted)
}

.upload-preview img {
    width: min(100%, 20rem);
    max-height: 20rem;
    border-radius: var(--radius-sm);
    object-fit: contain
}

.upload-preview video {
    width: min(100%, 28rem);
    max-height: 24rem;
    border-radius: var(--radius-sm);
    background: #000
}

.new-image-preview {
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    align-content: start
}

.new-image-preview figure {
    min-width: 0;
    margin: 0
}

.new-image-preview img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    object-fit: cover
}

.gallery-sort {
    display: grid;
    gap: var(--space-sm);
    padding: 0 var(--space-lg) var(--space-lg)
}

.gallery-sort__list {
    display: grid;
    gap: var(--space-xs)
}

.gallery-sort article {
    display: grid;
    grid-template-columns: auto 5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-sm);
    background: var(--color-paper-3)
}

.gallery-sort article.is-dragging {
    opacity: .55
}

.gallery-sort article img {
    width: 5rem;
    height: 5rem;
    border-radius: var(--radius-sm);
    object-fit: cover
}

.gallery-sort article>div {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs)
}

.drag-handle {
    color: var(--color-muted);
    cursor: grab
}

.editor-advanced summary {
    padding: var(--space-lg);
    font-family: var(--font-display);
    font-weight: 700;
    cursor: pointer
}

.import-grid,
.import-review,
.import-review__images {
    display: grid;
    gap: var(--space-lg)
}

.import-review__source {
    display: grid;
    align-content: start;
    gap: var(--space-md)
}

.import-grid article {
    display: grid;
    gap: var(--space-md);
    padding: var(--space-md);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.import-grid article>img,
.import-grid article>video,
.import-review__source>video,
.import-review__images img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    object-fit: cover
}

.import-grid article>div {
    display: grid;
    align-content: start;
    gap: var(--space-sm)
}

.import-grid__placeholder {
    display: grid;
    place-items: center;
    min-height: 13rem;
    border-radius: var(--radius-sm);
    background: var(--color-paper-3);
    color: var(--color-muted)
}

.system-instructions {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.system-instructions code {
    overflow-wrap: anywhere;
    color: var(--color-accent)
}

.tracking-shell {
    max-width: 52rem;
    padding-block: var(--space-2xl) var(--space-3xl)
}

.tracking-shell>header {
    display: grid;
    gap: var(--space-sm)
}

.tracking-shell>header h1 {
    font-size: var(--text-display-small)
}

.tracking-shell>header p {
    color: var(--color-muted)
}

.tracking-form,
.tracking-result {
    padding: var(--space-lg);
    border: var(--rule-hair) solid var(--color-rule-2);
    border-radius: var(--radius-md);
    background: var(--color-paper-2)
}

.tracking-result {
    display: grid;
    gap: var(--space-lg)
}

.tracking-result__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md)
}

.tracking-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none
}

.tracking-timeline li {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: var(--space-sm);
    min-height: 4rem;
    color: var(--color-muted)
}

.tracking-timeline li>span {
    width: var(--space-sm);
    height: var(--space-sm);
    margin-block-start: var(--space-2xs);
    border: var(--rule-strong) solid var(--color-rule);
    border-radius: var(--radius-round);
    background: var(--color-paper-2);
    box-shadow: 0 var(--space-lg) 0 calc(0rem - var(--space-2xs)) var(--color-rule)
}

.tracking-timeline li.is-reached {
    color: var(--color-ink)
}

.tracking-timeline li.is-reached>span {
    border-color: var(--color-success);
    background: var(--color-success)
}

.tracking-timeline li.is-current>div b {
    color: var(--color-accent)
}

@media (min-width:40rem) {
    .quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ops-totals {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .staff-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        align-items: end
    }

    .notification-ledger article,
    .activity-ledger article,
    .order-ledger>a {
        grid-template-columns: minmax(0, 1.5fr) auto;
        align-items: center
    }

    .media-editor,
    .import-review {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .import-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .import-grid article {
        grid-template-columns: minmax(8rem, .7fr) minmax(0, 1fr)
    }
}

@media (min-width:64rem) {
    .quick-actions {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .order-workspace__grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(20rem, .65fr);
        align-items: start
    }

    .fulfilment-form {
        position: sticky;
        inset-block-start: calc(var(--nav-height) + var(--space-md))
    }

    .import-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .import-grid article {
        grid-template-columns: minmax(0, 1fr)
    }
}

@media (hover:hover) {
    .ops-index__rows>a:hover,
    .quick-actions a:hover,
    .order-ledger>a:hover {
        background: var(--surface-accent-soft)
    }

    .status-actions button:not([disabled]):hover,
    .gallery-sort button:hover {
        border-color: var(--color-accent)
    }
}

@media (prefers-reduced-motion:reduce) {
    .gallery-sort article {
        transition: none
    }
}