/* Storefront base styles + layout primitives (brief D10).
   Mobile-first: the design map's M (393) frame is the primary spec <768px, the D (1440) frame
   applies ≥1024px. All colors/spacing via the --oo-* tokens in tokens.css — no raw brand colors.
   Class prefix: oo- (single global sheet; no Blazor scoped-CSS bundle in this host). */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--oo-font);
    color: hsl(var(--oo-label-primary));
    background: hsl(var(--oo-surface));
    line-height: 1.45;
}

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

button { font-family: inherit; }

a { color: hsl(var(--oo-accent)); }

:focus-visible {
    outline: 2px solid hsl(var(--oo-accent));
    outline-offset: 2px;
}

/* Screen-reader-only text (labels for icon-only / placeholder-only controls) */
.oo-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

.oo-shell { min-height: 100vh; display: flex; flex-direction: column; }

.oo-header {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: var(--oo-space-4);
    height: var(--oo-header-height);
    padding: 0 var(--oo-space-4);
    background: hsl(var(--oo-surface-card));
    border-bottom: 1px solid hsl(var(--oo-border));
}

.oo-header__brand {
    font-weight: 700; font-size: 17px; color: hsl(var(--oo-label-primary));
    text-decoration: none; white-space: nowrap;
}

.oo-header__menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none; background: none; cursor: pointer;
    border-radius: var(--oo-radius-sm); color: hsl(var(--oo-label-primary));
}
.oo-header__menu-btn:hover { background: hsl(var(--oo-surface-muted)); }

.oo-header__search {
    flex: 1; display: none; max-width: 420px;
}
.oo-header__search input {
    width: 100%; height: 40px; padding: 0 var(--oo-space-4) 0 38px;
    border: none; border-radius: var(--oo-radius-md);
    background: hsl(var(--oo-surface-muted)) no-repeat 12px center;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    font: inherit; font-size: 14px; color: hsl(var(--oo-label-primary));
}
.oo-header__search input::placeholder { color: hsl(var(--oo-label-tertiary)); }

.oo-header__spacer { flex: 1; }

.oo-header__actions { display: flex; align-items: center; gap: var(--oo-space-3); margin-left: auto; }

.oo-cart-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: none; cursor: pointer;
    border-radius: var(--oo-radius-md); background: hsl(var(--oo-surface-muted));
    color: hsl(var(--oo-label-primary)); text-decoration: none;
}
.oo-cart-btn__badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--oo-radius-pill);
    background: hsl(var(--oo-destructive)); color: hsl(var(--oo-destructive-foreground));
    font-size: 11px; font-weight: 700;
}

.oo-signin-chip {
    display: inline-flex; align-items: center; gap: var(--oo-space-2);
    height: 36px; padding: 0 var(--oo-space-4);
    border: 1px solid hsl(var(--oo-border)); border-radius: var(--oo-radius-pill);
    background: hsl(var(--oo-surface-card)); color: hsl(var(--oo-label-tertiary));
    font-size: 13px; font-weight: 600; cursor: not-allowed;
}

/* Desktop floating side rail */
.oo-siderail {
    display: none;
    position: fixed; left: var(--oo-space-6); top: calc(var(--oo-header-height) + var(--oo-space-6));
    z-index: 30; width: 232px; padding: var(--oo-space-4);
    background: hsl(var(--oo-surface-card));
    border-radius: var(--oo-radius-lg);
    border: 1px solid hsl(var(--oo-border));
    box-shadow: 0 8px 24px hsl(var(--oo-label-primary) / 0.06);
}
.oo-siderail nav { display: flex; flex-direction: column; gap: var(--oo-space-1); }

.oo-siderail__item {
    display: flex; align-items: center; gap: var(--oo-space-3);
    padding: var(--oo-space-3) var(--oo-space-4);
    border-radius: var(--oo-radius-md); border: none; background: none;
    font-size: 15px; font-weight: 600; color: hsl(var(--oo-label-primary));
    text-decoration: none; cursor: pointer; text-align: left;
}
.oo-siderail__item:hover { background: hsl(var(--oo-surface-muted)); }
.oo-siderail__item--active {
    background: hsl(var(--oo-accent)); color: hsl(var(--oo-accent-foreground));
}
.oo-siderail__item--active:hover { background: hsl(var(--oo-accent)); }
.oo-siderail__item--disabled {
    color: hsl(var(--oo-label-tertiary)); cursor: not-allowed;
}
.oo-siderail__item--disabled:hover { background: none; }
.oo-siderail__hint { font-size: 11px; font-weight: 500; margin-left: auto; }

/* Mobile nav drawer */
.oo-drawer-scrim {
    position: fixed; inset: 0; z-index: 60;
    background: hsl(var(--oo-label-primary) / 0.4);
}
.oo-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 61;
    width: min(320px, 85vw);
    background: hsl(var(--oo-surface-card));
    padding: var(--oo-space-6);
    display: flex; flex-direction: column; gap: var(--oo-space-2);
    overflow-y: auto;
}
.oo-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--oo-space-4);
}
.oo-drawer__brand { font-size: 20px; font-weight: 700; }
.oo-drawer__close {
    width: 40px; height: 40px; border: none; background: none; cursor: pointer;
    font-size: 20px; color: hsl(var(--oo-label-primary)); border-radius: var(--oo-radius-sm);
}
.oo-drawer__row {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; padding: var(--oo-space-4) 0;
    border: none; border-bottom: 1px solid hsl(var(--oo-border));
    background: none; text-align: left; cursor: pointer; text-decoration: none;
}
.oo-drawer__row-title { font-size: 16px; font-weight: 700; color: hsl(var(--oo-label-primary)); }
.oo-drawer__row-sub { font-size: 13px; color: hsl(var(--oo-label-secondary)); }
.oo-drawer__row--disabled .oo-drawer__row-title,
.oo-drawer__row--disabled .oo-drawer__row-sub { color: hsl(var(--oo-label-tertiary)); }
.oo-drawer__row--disabled { cursor: not-allowed; }

.oo-main { flex: 1; width: 100%; }

.oo-footer {
    padding: var(--oo-space-8) var(--oo-space-4);
    display: flex; flex-direction: column; align-items: center; gap: var(--oo-space-2);
    color: hsl(var(--oo-label-tertiary)); font-size: 13px;
}

/* ── Shared primitives ─────────────────────────────────────────────────── */

.oo-container {
    width: 100%; max-width: var(--oo-max-width); margin: 0 auto;
    padding: 0 var(--oo-space-4);
}

.oo-card {
    background: hsl(var(--oo-surface-card));
    border: 1px solid hsl(var(--oo-border));
    border-radius: var(--oo-radius-lg);
}

.oo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--oo-space-2);
    height: 52px; padding: 0 var(--oo-space-6);
    border: none; border-radius: var(--oo-radius-pill);
    font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.oo-btn--accent { background: hsl(var(--oo-accent)); color: hsl(var(--oo-accent-foreground)); }
.oo-btn--dark { background: hsl(var(--oo-surface-dark)); color: hsl(var(--oo-surface-dark-foreground)); }
.oo-btn--ghost {
    background: hsl(var(--oo-surface-card)); color: hsl(var(--oo-label-primary));
    border: 1px solid hsl(var(--oo-border));
}
.oo-btn--block { width: 100%; }
.oo-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.oo-link-btn {
    border: none; background: none; padding: 0; cursor: pointer;
    color: hsl(var(--oo-accent)); font-size: 14px; font-weight: 600;
}
.oo-link-btn--destructive { color: hsl(var(--oo-destructive)); }

.oo-back-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex: none;
    border: 1px solid hsl(var(--oo-border)); border-radius: var(--oo-radius-pill);
    background: hsl(var(--oo-surface-card)); cursor: pointer;
    color: hsl(var(--oo-label-primary)); text-decoration: none; font-size: 15px;
}

.oo-page-head {
    display: flex; align-items: flex-start; gap: var(--oo-space-4);
    padding: var(--oo-space-6) 0 var(--oo-space-4);
}
.oo-page-head h1 { margin: 0; font-size: 28px; }
.oo-page-head__sub { margin: 4px 0 0; color: hsl(var(--oo-label-secondary)); font-size: 14px; }

.oo-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--oo-space-3); padding: var(--oo-space-12) var(--oo-space-6);
}
.oo-empty__glyph {
    width: 72px; height: 72px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: hsl(var(--oo-surface-muted)); font-size: 28px;
    color: hsl(var(--oo-label-secondary));
}
.oo-empty h2 { margin: var(--oo-space-2) 0 0; font-size: 20px; }
.oo-empty p { margin: 0; color: hsl(var(--oo-label-secondary)); font-size: 14px; }

.oo-banner {
    display: flex; align-items: center; gap: var(--oo-space-3);
    padding: var(--oo-space-3) var(--oo-space-4);
    border-radius: var(--oo-radius-md); font-size: 14px;
}
.oo-banner--info { background: hsl(var(--oo-surface-muted)); color: hsl(var(--oo-label-secondary)); }
.oo-banner--closed { background: hsl(var(--oo-success-surface)); color: hsl(var(--oo-label-primary)); }

/* ── Landing ───────────────────────────────────────────────────────────── */

.oo-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, hsl(var(--oo-surface-dark)), hsl(var(--oo-accent) / 0.55));
    color: hsl(var(--oo-surface-dark-foreground));
}
.oo-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.oo-hero__body {
    position: relative; max-width: var(--oo-max-width); margin: 0 auto;
    padding: var(--oo-space-12) var(--oo-space-4);
}
.oo-hero__eyebrow { letter-spacing: 0.14em; font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: 0.85; margin: 0; }
.oo-hero__title { margin: var(--oo-space-2) 0 0; font-size: 34px; line-height: 1.1; }
.oo-hero__sub { margin: var(--oo-space-4) 0 0; max-width: 560px; font-size: 15px; opacity: 0.9; }

.oo-landing__section-title { font-size: 26px; margin: var(--oo-space-8) 0 var(--oo-space-1); }
.oo-landing__section-sub { margin: 0 0 var(--oo-space-6); color: hsl(var(--oo-label-secondary)); font-size: 14px; }

.oo-method-grid { display: grid; grid-template-columns: 1fr; gap: var(--oo-space-4); }

.oo-method-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--oo-space-3);
    padding: var(--oo-space-6); text-align: left;
    background: hsl(var(--oo-surface-card));
    border: 1px solid hsl(var(--oo-border)); border-radius: var(--oo-radius-lg);
    cursor: pointer; font: inherit; position: relative;
}
.oo-method-card--active:hover, .oo-method-card--active:focus-visible { border-color: hsl(var(--oo-accent)); }
.oo-method-card--disabled { cursor: not-allowed; }
.oo-method-card--disabled .oo-method-card__title,
.oo-method-card--disabled .oo-method-card__desc,
.oo-method-card--disabled .oo-method-card__meta { color: hsl(var(--oo-label-tertiary)); }
.oo-method-card__icon {
    width: 52px; height: 52px; border-radius: var(--oo-radius-md);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: hsl(var(--oo-surface-muted)); color: hsl(var(--oo-label-primary));
}
.oo-method-card--active .oo-method-card__icon { background: hsl(var(--oo-accent)); color: hsl(var(--oo-accent-foreground)); }
.oo-method-card__title { font-size: 19px; font-weight: 700; margin: 0; }
.oo-method-card__desc { margin: 0; font-size: 14px; color: hsl(var(--oo-label-secondary)); }
.oo-method-card__meta { display: flex; align-items: center; gap: var(--oo-space-2); font-size: 13px; color: hsl(var(--oo-label-secondary)); }
.oo-method-card__cta { margin-top: var(--oo-space-2); font-size: 15px; font-weight: 700; color: hsl(var(--oo-accent)); }
.oo-method-card__soon {
    position: absolute; top: var(--oo-space-4); right: var(--oo-space-4);
    padding: 4px 10px; border-radius: var(--oo-radius-pill);
    background: hsl(var(--oo-surface-muted)); color: hsl(var(--oo-label-secondary));
    font-size: 12px; font-weight: 600;
}

/* ── Pickup location ───────────────────────────────────────────────────── */

.oo-pickup { display: grid; grid-template-columns: 1fr; gap: var(--oo-space-6); }

.oo-store-list { display: flex; flex-direction: column; gap: var(--oo-space-3); }

.oo-store-row {
    display: flex; align-items: center; gap: var(--oo-space-3); width: 100%;
    padding: var(--oo-space-4); text-align: left; font: inherit;
    background: hsl(var(--oo-surface-card));
    border: 1px solid hsl(var(--oo-border)); border-radius: var(--oo-radius-md);
    cursor: pointer;
}
.oo-store-row--selected { border-color: hsl(var(--oo-accent)); box-shadow: 0 0 0 1px hsl(var(--oo-accent)); }
.oo-store-row__name { font-weight: 700; font-size: 16px; }
.oo-store-row__meta { font-size: 13px; color: hsl(var(--oo-label-secondary)); }
.oo-store-row__state { font-size: 13px; font-weight: 600; }
.oo-store-row__state--open { color: hsl(var(--oo-success)); }
.oo-store-row__state--closed { color: hsl(var(--oo-destructive)); }
.oo-store-row__state--unknown { color: hsl(var(--oo-label-tertiary)); }

.oo-map-placeholder {
    display: none; min-height: 420px; border-radius: var(--oo-radius-lg);
    background:
        linear-gradient(hsl(var(--oo-border)) 1px, transparent 1px) 0 0 / 100% 120px,
        linear-gradient(90deg, hsl(var(--oo-border)) 1px, transparent 1px) 0 0 / 160px 100%,
        hsl(var(--oo-surface-muted));
}

/* ── Store / menu ──────────────────────────────────────────────────────── */

.oo-store-hero {
    height: 180px; position: relative; overflow: hidden;
    background: linear-gradient(135deg, hsl(var(--oo-surface-dark)), hsl(var(--oo-accent) / 0.5));
}
.oo-store-hero img { width: 100%; height: 100%; object-fit: cover; }

.oo-store-meta { padding: var(--oo-space-6) 0 var(--oo-space-4); }
.oo-store-meta h1 { margin: 0; font-size: 30px; }
.oo-store-meta__line { margin: var(--oo-space-2) 0 0; color: hsl(var(--oo-label-secondary)); font-size: 14px; }
.oo-store-meta__state--open { color: hsl(var(--oo-success)); font-weight: 600; }
.oo-store-meta__state--closed { color: hsl(var(--oo-destructive)); font-weight: 600; }

.oo-cat-tabs {
    position: sticky; top: var(--oo-header-height); z-index: 20;
    display: flex; gap: var(--oo-space-2); overflow-x: auto;
    padding: var(--oo-space-3) 0;
    background: hsl(var(--oo-surface));
    border-bottom: 1px solid hsl(var(--oo-border));
    scrollbar-width: none;
}
.oo-cat-tabs::-webkit-scrollbar { display: none; }
.oo-cat-tab {
    flex: none; padding: var(--oo-space-2) var(--oo-space-4);
    border: none; border-radius: var(--oo-radius-pill); background: none;
    font-size: 15px; font-weight: 600; color: hsl(var(--oo-label-secondary));
    cursor: pointer; text-decoration: none;
}
.oo-cat-tab:hover { background: hsl(var(--oo-surface-muted)); color: hsl(var(--oo-label-primary)); }
.oo-cat-tab--active { color: hsl(var(--oo-label-primary)); text-decoration: underline; text-underline-offset: 10px; }

.oo-store-body { display: grid; grid-template-columns: 1fr; gap: var(--oo-space-6); padding-bottom: 120px; }

.oo-cat-section h2 { font-size: 24px; margin: var(--oo-space-6) 0 var(--oo-space-4); }

.oo-item-grid { display: grid; grid-template-columns: 1fr; gap: var(--oo-space-4); }

.oo-item-card {
    display: flex; gap: var(--oo-space-4); padding: var(--oo-space-4);
    background: hsl(var(--oo-surface-card));
    border: 1px solid hsl(var(--oo-border)); border-radius: var(--oo-radius-md);
    cursor: pointer; text-align: left; font: inherit; width: 100%; position: relative;
}
.oo-item-card:hover { border-color: hsl(var(--oo-label-tertiary)); }
.oo-item-card__body { flex: 1; min-width: 0; }
.oo-item-card__name { font-size: 16px; font-weight: 700; margin: 0; }
.oo-item-card__desc {
    margin: var(--oo-space-1) 0 0; font-size: 13px; color: hsl(var(--oo-label-secondary));
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.oo-item-card__price { margin-top: var(--oo-space-2); font-size: 14px; font-weight: 700; }
.oo-item-card__photo {
    position: relative; flex: none; width: 96px; height: 96px;
    border-radius: var(--oo-radius-md); overflow: hidden;
    background: hsl(var(--oo-surface-muted));
    display: flex; align-items: center; justify-content: center;
    color: hsl(var(--oo-label-tertiary)); font-size: 26px; font-weight: 700;
}
.oo-item-card__add {
    position: absolute; right: 6px; bottom: 6px;
    width: 30px; height: 30px; border-radius: 50%;
    background: hsl(var(--oo-surface-card)); border: 1px solid hsl(var(--oo-border));
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; line-height: 1; color: hsl(var(--oo-label-primary));
    cursor: pointer;
}
.oo-item-card__add:hover { background: hsl(var(--oo-accent)); color: hsl(var(--oo-accent-foreground)); border-color: hsl(var(--oo-accent)); }

/* Desktop order-summary rail */
.oo-rail { display: none; }
.oo-rail__inner {
    position: sticky; top: calc(var(--oo-header-height) + 56px);
    padding: var(--oo-space-6);
}
.oo-rail h3 { margin: 0 0 var(--oo-space-4); font-size: 20px; }
.oo-rail__line {
    display: flex; justify-content: space-between; gap: var(--oo-space-3);
    padding: var(--oo-space-3) 0; border-bottom: 1px solid hsl(var(--oo-border));
    font-size: 14px;
}
.oo-rail__empty { color: hsl(var(--oo-label-tertiary)); font-size: 14px; padding: var(--oo-space-4) 0; }

.oo-totals { margin-top: var(--oo-space-4); border-radius: var(--oo-radius-md); background: hsl(var(--oo-surface-muted)); padding: var(--oo-space-4); }
.oo-totals__row { display: flex; justify-content: space-between; font-size: 14px; color: hsl(var(--oo-label-secondary)); padding: 2px 0; }
.oo-totals__row--grand { font-size: 18px; font-weight: 700; color: hsl(var(--oo-label-primary)); padding-top: var(--oo-space-2); }

/* Mobile sticky view-cart pill */
.oo-cart-pill {
    position: fixed; left: var(--oo-space-3); right: var(--oo-space-3); bottom: var(--oo-space-4);
    z-index: 50; height: 56px;
    display: flex; align-items: center; justify-content: space-between; gap: var(--oo-space-3);
    padding: 0 var(--oo-space-5);
    border: none; border-radius: var(--oo-radius-pill);
    background: hsl(var(--oo-accent)); color: hsl(var(--oo-accent-foreground));
    font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: 0 8px 24px hsl(var(--oo-label-primary) / 0.25);
}
.oo-cart-pill__count {
    width: 26px; height: 26px; border-radius: 50%;
    background: hsl(var(--oo-accent-foreground)); color: hsl(var(--oo-accent));
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}

/* ── Search / category ─────────────────────────────────────────────────── */

.oo-search-input {
    width: 100%; height: 48px; padding: 0 var(--oo-space-4);
    border: 1px solid hsl(var(--oo-border)); border-radius: var(--oo-radius-md);
    font: inherit; font-size: 16px; background: hsl(var(--oo-surface-card));
}

/* ── Item customise ────────────────────────────────────────────────────── */

.oo-item-page { display: grid; grid-template-columns: 1fr; gap: var(--oo-space-6); padding-bottom: 120px; }

.oo-item-photo {
    width: 100%; aspect-ratio: 1 / 1; max-height: 420px;
    border-radius: var(--oo-radius-lg); overflow: hidden;
    background: hsl(var(--oo-surface-muted));
    display: flex; align-items: center; justify-content: center;
    font-size: 64px; font-weight: 700; color: hsl(var(--oo-label-tertiary));
}
.oo-item-photo img { width: 100%; height: 100%; object-fit: cover; }

.oo-item-detail h1 { margin: 0; font-size: 30px; }
.oo-item-detail__price { margin: var(--oo-space-2) 0 0; font-size: 20px; font-weight: 700; }
.oo-item-detail__desc { margin: var(--oo-space-3) 0 0; color: hsl(var(--oo-label-secondary)); font-size: 14px; border-bottom: 1px solid hsl(var(--oo-border)); padding-bottom: var(--oo-space-5); }

.oo-group { margin-top: var(--oo-space-6); }
.oo-group h3 { margin: 0 0 var(--oo-space-3); font-size: 17px; }
.oo-group__hint { font-size: 13px; color: hsl(var(--oo-label-secondary)); margin: -8px 0 var(--oo-space-3); }

.oo-choice-row {
    display: flex; align-items: center; gap: var(--oo-space-3); width: 100%;
    padding: var(--oo-space-4); margin-bottom: var(--oo-space-2);
    background: hsl(var(--oo-surface-card));
    border: 1px solid hsl(var(--oo-border)); border-radius: var(--oo-radius-md);
    font: inherit; text-align: left; cursor: pointer;
}
.oo-choice-row--selected { border-color: hsl(var(--oo-accent)); box-shadow: 0 0 0 1px hsl(var(--oo-accent)); }
.oo-choice-row:disabled { opacity: 0.5; cursor: not-allowed; }
.oo-choice-row__control {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid hsl(var(--oo-border));
    display: flex; align-items: center; justify-content: center;
    background: hsl(var(--oo-surface-card));
}
.oo-choice-row__control--checkbox { border-radius: 6px; }
.oo-choice-row--selected .oo-choice-row__control {
    border-color: hsl(var(--oo-accent)); background: hsl(var(--oo-accent));
    color: hsl(var(--oo-accent-foreground)); font-size: 12px;
}
.oo-choice-row__control--radio-dot { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--oo-accent-foreground)); }
.oo-choice-row__label { flex: 1; font-size: 15px; font-weight: 600; }
.oo-choice-row__delta { font-size: 14px; color: hsl(var(--oo-label-secondary)); }

.oo-qty-stepper {
    display: inline-flex; align-items: center; gap: var(--oo-space-2);
    border: 1px solid hsl(var(--oo-border)); border-radius: var(--oo-radius-pill);
    padding: 4px;
    background: hsl(var(--oo-surface-card));
}
.oo-qty-stepper button {
    width: 34px; height: 34px; border: none; border-radius: 50%;
    background: none; font-size: 18px; cursor: pointer; color: hsl(var(--oo-label-primary));
    display: flex; align-items: center; justify-content: center;
}
.oo-qty-stepper button:hover { background: hsl(var(--oo-surface-muted)); }
.oo-qty-stepper button:disabled { color: hsl(var(--oo-label-tertiary)); cursor: not-allowed; }
.oo-qty-stepper__value { min-width: 24px; text-align: center; font-weight: 700; }

.oo-item-actions {
    display: flex; align-items: center; gap: var(--oo-space-4);
    margin-top: var(--oo-space-8);
}
.oo-item-actions .oo-btn { flex: 1; }

/* ── Cart ──────────────────────────────────────────────────────────────── */

.oo-cart-layout { display: grid; grid-template-columns: 1fr; gap: var(--oo-space-6); padding-bottom: var(--oo-space-12); }

.oo-cart-lines { padding: var(--oo-space-2) var(--oo-space-5); }

.oo-cart-line {
    display: grid; grid-template-columns: 64px 1fr auto; gap: var(--oo-space-4);
    padding: var(--oo-space-5) 0; border-bottom: 1px solid hsl(var(--oo-border));
}
.oo-cart-line:last-child { border-bottom: none; }
.oo-cart-line__photo {
    width: 64px; height: 64px; border-radius: var(--oo-radius-md);
    background: hsl(var(--oo-surface-muted));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 20px; color: hsl(var(--oo-label-tertiary));
}
.oo-cart-line__name { font-weight: 700; font-size: 16px; margin: 0; }
.oo-cart-line__mods { margin: 2px 0 0; font-size: 13px; color: hsl(var(--oo-label-secondary)); }
.oo-cart-line__controls { display: flex; align-items: center; gap: var(--oo-space-4); margin-top: var(--oo-space-3); }
.oo-cart-line__price { font-weight: 700; font-size: 15px; text-align: right; }

.oo-promo { display: flex; gap: var(--oo-space-2); margin-top: var(--oo-space-4); }
.oo-promo input {
    flex: 1; height: 44px; padding: 0 var(--oo-space-4);
    border: 1px solid hsl(var(--oo-border)); border-radius: var(--oo-radius-md);
    font: inherit; background: hsl(var(--oo-surface-muted)); color: hsl(var(--oo-label-tertiary));
}
.oo-promo button {
    height: 44px; padding: 0 var(--oo-space-5); border: none;
    border-radius: var(--oo-radius-md); background: hsl(var(--oo-surface-muted));
    color: hsl(var(--oo-label-tertiary)); font-weight: 600; cursor: not-allowed;
}

/* ── Responsive: tablet+ ───────────────────────────────────────────────── */

@media (min-width: 768px) {
    .oo-header { padding: 0 var(--oo-space-6); }
    .oo-header__search { display: block; }
    .oo-method-grid { grid-template-columns: repeat(3, 1fr); }
    .oo-item-grid { grid-template-columns: repeat(2, 1fr); }
    .oo-pickup { grid-template-columns: 440px 1fr; }
    .oo-map-placeholder { display: block; }
    .oo-hero__title { font-size: 44px; }
}

/* ── Responsive: desktop ───────────────────────────────────────────────── */

@media (min-width: 1024px) {
    .oo-siderail { display: block; }
    .oo-store-body { grid-template-columns: 1fr 360px; }
    .oo-rail { display: block; }
    .oo-cart-pill { display: none; }
    .oo-store-hero { height: 260px; border-radius: 0; }
    .oo-item-page { grid-template-columns: minmax(0, 600px) 1fr; padding-top: var(--oo-space-8); }
    .oo-cart-layout { grid-template-columns: 1fr 480px; align-items: start; }
    .oo-drawer, .oo-drawer-scrim { display: none; }
}