:root {
    /* Brand Design Tokens (Logo One.png) */
    --brand-primary: #ff7f50;
    --brand-primary-rgb: 255, 127, 80;
    --brand-primary-hover: #e86738;
    --brand-primary-active: #d65426;
    --brand-primary-light: #fff5f2;
    --brand-primary-border: #ffd5c7;
    --brand-primary-contrast: #ffffff;
    --brand-primary-text: #d65426;

    --os-brand-coral: #ff7f50;
    --os-primary: #ff7f50;
    --os-primary-hover: #e86738;
    --os-primary-dark: #e86738;
    --os-bg: #fff8fa;

    --bs-primary: #ff7f50;
    --bs-primary-rgb: 255, 127, 80;
    --bs-link-color: #d65426;
    --bs-link-hover-color: #e86738;
}

body {
    background-color: var(--os-bg);
}

.btn-primary {
    --bs-btn-bg: var(--os-primary);
    --bs-btn-border-color: var(--os-primary);
    --bs-btn-hover-bg: var(--os-primary-hover);
    --bs-btn-hover-border-color: var(--os-primary-hover);
    --bs-btn-active-bg: #d65426;
    --bs-btn-active-border-color: #d65426;
    --bs-btn-disabled-bg: var(--os-primary);
    --bs-btn-disabled-border-color: var(--os-primary);
    box-shadow: 0 4px 12px rgba(255, 127, 80, 0.2);
}

.os-topbar {
    background-color: var(--os-primary-dark);
}

.os-brand {
    color: var(--os-primary);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.os-hero {
    background: linear-gradient(135deg, #ffe3ec 0%, #fff 100%);
}

.os-product-img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}

.os-product-placeholder {
    background: #f1e4e9;
}

/* ---------- Client header: selected Store ---------- */
.os-store-context strong {
    margin-left: 0.25rem;
}

/* ---------- Staff / Admin shell ---------- */
.os-app {
    --os-appbar-height: 56px;
    --os-sidebar-bg: #fff;
    background-color: #f6f7fb;
    min-height: 100vh;
}

.os-appbar {
    background-color: #2b2d42;
    min-height: var(--os-appbar-height);
}

.os-app--admin .os-appbar {
    background: linear-gradient(90deg, #ff7f50 0%, #e86738 100%);
    box-shadow: 0 2px 10px rgba(232, 103, 56, 0.2);
}

.os-scope-badge {
    background-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 500;
    padding: 0.45em 0.8em;
}

.os-sidebar {
    background-color: var(--os-sidebar-bg);
}

@media (min-width: 992px) {
    .os-sidebar {
        position: sticky;
        top: var(--os-appbar-height);
        height: calc(100vh - var(--os-appbar-height));
        overflow-y: auto;
        border-right: 1px solid var(--bs-border-color);
    }
}

.os-store-scope {
    background-color: #f6f7fb;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.75rem;
}

.os-store-scope__label {
    color: var(--bs-secondary-color);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.os-nav-link {
    color: var(--bs-body-color);
    border-radius: 0.5rem;
}

.nav-pills .os-nav-link.active {
    background-color: var(--os-primary);
    color: #fff;
}

.os-nav-link.disabled {
    color: var(--bs-secondary-color);
    cursor: not-allowed;
}

/* ---------- Shared components ---------- */
.os-stat {
    border: 1px solid #e2e8f0;
    border-radius: 0.625rem;
    background: #ffffff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.os-stat:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.os-stat__value {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0f172a;
}

.os-table th {
    white-space: nowrap;
}

.table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
    white-space: nowrap;
}

.table-actions .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* ---------- Catalog, Product Detail, Store Finder ---------- */
.os-product-card .os-product-img,
.os-product-card .os-product-placeholder {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
}

.os-store-availability li + li {
    margin-top: 0.25rem;
}

.os-product-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.os-product-description {
    white-space: pre-line;
}

.os-store-card dt {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.os-store-card dd {
    margin-bottom: 0.35rem;
}

.os-topbar .btn-link {
    font-size: inherit;
}

/* ---------- Admin: images ---------- */
.os-brand-logo {
    max-width: 160px;
    max-height: 160px;
    object-fit: contain;
}

.os-brand-logo-sm {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.os-price {
    white-space: nowrap;
}

/* ---------- Cart ---------- */
.os-cart-quantity {
    width: 5.5rem;
}

.os-cart-item-info {
    min-width: 12rem;
}

.os-cart-subtotal {
    min-width: 6.5rem;
}

@media (min-width: 992px) {
    .os-cart-summary {
        position: sticky;
        top: 5rem;
    }
}


/* ----- shared accessibility & consistency (client, staff, admin) ----- */
.os-skip-link {
    position: absolute;
    z-index: 2000;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: #fff;
    color: #d65426;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

:focus-visible {
    /* Opaque, high-contrast focus indicator on both pale and dark OneShop surfaces. */
    outline: 3px solid #1f2937;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px #ffffff;
}

/* dark coral for small text on white: 5.46:1 (WCAG AA) where the light coral (#ff7f50) is only ~2.6:1 */
.text-coral-strong {
    color: #d65426;
}

/* Small coral text and links meet AA on white; do not use the lighter brand-only coral as text. */
.text-coral {
    color: #d65426 !important;
}

/* data tables keep at least 14px on desktop (audit: no 11-12px for essential data) */
.os-table th,
.os-table td {
    font-size: 0.875rem;
}

/* dense admin/staff tables scroll sideways on purpose instead of breaking the page at 390/768px */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
    .btn,
    .form-control,
    .form-select {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
    }
}

/* muted helper text with AA contrast (#667085 on white = 5.0:1); the theme's .text-secondary is a pale coral */
.os-muted-text {
    color: #667085;
}