/* Storefront theme: classic — premium horizontal list + category tiles */
:root {
    --storefront-primary: var(--primary-color, #0d9488);
    --storefront-accent: var(--accent-color, #14b8a6);
    --storefront-font: var(--font-family, system-ui, sans-serif);
    --sf-classic-rail-height: 8.75rem;
}

.storefront-theme-classic {
    font-family: var(--storefront-font);
}

/* ── Recent orders strip (shared with category hub) ── */
.storefront-theme-classic .sf-recent-orders {
    background: #fff;
    border-bottom: 1px solid rgb(226 232 240 / 0.9);
}

.storefront-theme-classic .sf-recent-orders-track {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.storefront-theme-classic .sf-recent-order-card {
    scroll-snap-align: start;
}

.sf-dark .storefront-theme-classic .sf-recent-orders {
    background: #09090b;
    border-bottom-color: #3f3f46;
}

/* ── Theme layout scope ── */
.theme-layout-classic {
    position: relative;
}

.theme-layout-classic .sf-classic-shell {
    position: relative;
    z-index: 40;
}

.theme-layout-classic .sf-classic-hero {
    position: relative;
    z-index: 1;
}

.theme-layout-classic .sf-classic-topbar {
    position: relative;
    z-index: 45;
    background: var(--primary-color, #0d9488);
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #0d9488) 72%, #000);
}

.sf-dark .theme-layout-classic .sf-classic-topbar {
    background: color-mix(in srgb, var(--primary-color, #0d9488) 88%, #09090b);
    border-bottom-color: color-mix(in srgb, var(--primary-color, #0d9488) 55%, #000);
}

.theme-layout-classic .sf-classic-cover-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
}

.theme-layout-classic .sf-classic-cover {
    position: relative;
    z-index: 1;
    border-radius: 0;
    box-shadow: none;
}

.theme-layout-classic .sf-classic-logo-wrap {
    position: relative;
    z-index: 3;
}

.theme-layout-classic .sf-classic-icon-btn {
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    border: none;
    box-shadow: none;
}

.theme-layout-classic .sf-classic-icon-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color, #0d9488) 45%, transparent);
    outline-offset: 2px;
    border-radius: 0.375rem;
}

.theme-layout-classic .sf-catalog-section {
    scroll-margin-top: calc(var(--sf-sticky-menu-offset, var(--sf-classic-rail-height)) + 0.75rem);
}

.theme-layout-classic .sf-classic-profile-row {
    position: relative;
    z-index: 3;
    padding-inline: 0.375rem;
}

.theme-layout-classic .sf-classic-profile-toolbar {
    -webkit-tap-highlight-color: transparent;
    align-items: flex-start;
    flex-wrap: nowrap;
    max-width: min(48vw, 11.5rem);
}

@media (min-width: 380px) {
    .theme-layout-classic .sf-classic-profile-toolbar {
        max-width: none;
    }
}

.theme-layout-classic .sf-classic-logo {
    position: relative;
    z-index: 4;
}

.theme-layout-classic .sf-classic-contact-btn:hover {
    border-color: color-mix(in srgb, var(--primary-color, #0d9488) 35%, #cbd5e1);
    color: var(--primary-color, #0d9488);
}

.theme-layout-classic .sf-classic-fulfillment-pill {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-color, #0d9488) 28%, transparent);
}

.theme-layout-classic .sf-classic-hero-fallback {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary-color, #0d9488) 72%, #0f172a),
        #0f172a
    );
}

.theme-layout-classic .sf-classic-sticky-rail {
    position: sticky;
    top: var(--sf-announcement-offset, 0px);
    z-index: 55 !important;
    background-color: #ffffff;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgb(15 23 42 / 0.06);
}

.theme-layout-classic .sf-marketing-announcement {
    position: sticky;
    top: 0;
    z-index: 60;
}

.sf-dark .theme-layout-classic .sf-classic-sticky-rail,
.theme-layout-classic.sf-dark .sf-classic-sticky-rail,
.storefront-theme-classic.sf-dark .theme-layout-classic .sf-classic-sticky-rail {
    background-color: #18181b;
}

.theme-layout-classic .sf-classic-sticky-rail__controls {
    display: none;
}

.theme-layout-classic .sf-classic-controls--rail {
    min-height: 2.5rem;
}

.theme-layout-classic .sf-classic-control {
    -webkit-tap-highlight-color: transparent;
}

.theme-layout-classic .sf-classic-control--menu:focus-visible,
.theme-layout-classic .sf-classic-control--lang:focus-visible,
.theme-layout-classic .sf-classic-control--theme:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color, #0d9488) 45%, transparent);
    outline-offset: 2px;
}

.theme-layout-classic .sf-classic-cats-rail {
    position: relative;
    z-index: 50;
    scrollbar-width: none;
}

.theme-layout-classic .sf-classic-cats-rail::-webkit-scrollbar {
    display: none;
}

.theme-layout-classic .sf-classic-branch-status {
    -webkit-tap-highlight-color: transparent;
    border: 1px solid transparent;
}

.theme-layout-classic .sf-classic-branch-status--open {
    background: color-mix(in srgb, #10b981 12%, #ecfdf5);
    border-color: color-mix(in srgb, #10b981 28%, #a7f3d0);
    color: #047857;
}

.theme-layout-classic .sf-classic-branch-status--closing {
    background: color-mix(in srgb, #f59e0b 14%, #fffbeb);
    border-color: color-mix(in srgb, #f59e0b 32%, #fcd34d);
    color: #b45309;
}

.theme-layout-classic .sf-classic-branch-status--closed {
    background: color-mix(in srgb, #f43f5e 12%, #fff1f2);
    border-color: color-mix(in srgb, #f43f5e 28%, #fecdd3);
    color: #be123c;
}

.theme-layout-classic .sf-classic-branch-status--paused {
    background: color-mix(in srgb, #f59e0b 12%, #fffbeb);
    border-color: color-mix(in srgb, #f59e0b 30%, #fcd34d);
    color: #b45309;
}

.sf-dark .theme-layout-classic .sf-classic-branch-status--open {
    background: color-mix(in srgb, #10b981 18%, #052e16);
    border-color: color-mix(in srgb, #10b981 35%, #14532d);
    color: #6ee7b7;
}

.sf-dark .theme-layout-classic .sf-classic-branch-status--closing,
.sf-dark .theme-layout-classic .sf-classic-branch-status--paused {
    background: color-mix(in srgb, #f59e0b 16%, #451a03);
    border-color: color-mix(in srgb, #f59e0b 35%, #78350f);
    color: #fcd34d;
}

.sf-dark .theme-layout-classic .sf-classic-branch-status--closed {
    background: color-mix(in srgb, #f43f5e 16%, #4c0519);
    border-color: color-mix(in srgb, #f43f5e 35%, #881337);
    color: #fda4af;
}

.theme-layout-classic .sf-classic-rail-toolbar {
    display: none;
}

.theme-layout-classic .sf-classic-action-bar {
    position: relative;
    z-index: 49;
    background: inherit;
}

.theme-layout-classic .sf-classic-quick-action {
    -webkit-tap-highlight-color: transparent;
}

.theme-layout-classic .sf-classic-quick-action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color, #0d9488) 45%, transparent);
    outline-offset: 2px;
}

.theme-layout-classic .sf-classic-layout-bar {
    background-color: #ffffff;
}

.sf-dark .theme-layout-classic .sf-classic-layout-bar {
    background-color: #09090b;
}

.theme-layout-classic .sf-classic-layout-toggle {
    -webkit-tap-highlight-color: transparent;
}

.theme-layout-classic .sf-classic-layout-toggle:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color, #0d9488) 45%, transparent);
    outline-offset: 2px;
}

.theme-layout-classic .sf-classic-top-alert--paused {
    background: color-mix(in srgb, #f59e0b 12%, #fffbeb);
    border-color: color-mix(in srgb, #f59e0b 35%, #fcd34d);
    color: #92400e;
}

.theme-layout-classic .sf-classic-top-alert--closing {
    background: linear-gradient(180deg, color-mix(in srgb, #f59e0b 14%, #fffbeb), color-mix(in srgb, #f59e0b 8%, #fff));
    border-color: color-mix(in srgb, #f59e0b 45%, #fcd34d);
    color: #92400e;
}

.sf-dark .theme-layout-classic .sf-classic-top-alert--paused,
.sf-dark .theme-layout-classic .sf-classic-top-alert--closing {
    background: color-mix(in srgb, #f59e0b 18%, #1e293b);
    border-color: color-mix(in srgb, #f59e0b 35%, #78350f);
    color: #fde68a;
}

.theme-layout-classic .theme-layout-classic__catalog,
.theme-layout-classic .sf-menu-catalog {
    position: relative;
    z-index: 1;
    scroll-margin-top: calc(var(--sf-classic-rail-height) + 0.75rem);
    padding-top: 0.5rem;
}

.theme-layout-classic .sf-bestsellers {
    position: relative;
    z-index: 1;
    scroll-margin-top: calc(var(--sf-classic-rail-height) + 0.5rem);
}

/* ── Category pills & tiles ── */
.storefront-theme-classic .sf-classic-cat.is-active,
.theme-layout-classic .sf-classic-cat.is-active {
    background-color: var(--primary-color, #0d9488) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color, #0d9488) 32%, transparent);
}

.storefront-theme-classic .sf-classic-cat-tile__media.is-active,
.theme-layout-classic .sf-classic-cat-tile__media.is-active {
    box-shadow: 0 0 0 2px var(--primary-color, #0d9488), 0 8px 20px color-mix(in srgb, var(--primary-color, #0d9488) 24%, transparent);
}

.storefront-theme-classic .sf-classic-cat-tile.is-active .sf-classic-cat-tile__media:not(.is-active),
.theme-layout-classic .sf-classic-cat-tile.is-active .sf-classic-cat-tile__media:not(.is-active) {
    background-color: var(--primary-color, #0d9488);
    color: #fff;
}

.sf-dark .theme-layout-classic .sf-classic-cat:not(.is-active) {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}

/* Legacy aliases (deprecated shell-header classes) */
.storefront-theme-classic .sf-shell-cat.is-active {
    background-color: var(--primary-color, #0d9488) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--primary-color, #0d9488) 32%, transparent);
}

.storefront-theme-classic .sf-shell-cat-tile__media.is-active {
    box-shadow: 0 0 0 2px var(--primary-color, #0d9488), 0 8px 20px color-mix(in srgb, var(--primary-color, #0d9488) 24%, transparent);
}

.storefront-theme-classic .sf-shell-cats-rail {
    scrollbar-width: none;
}

.storefront-theme-classic .sf-shell-cats-rail::-webkit-scrollbar {
    display: none;
}

/* ── Product cards ── */
.storefront-theme-classic .sf-classic-price-amount,
.storefront-theme-classic .sf-bestseller-price.sf-classic-price-amount {
    color: var(--primary-color, #0d9488);
}

.theme-layout-classic .sf-classic-square-card {
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.theme-layout-classic .sf-classic-square-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary-color, #0d9488) 18%, #e5e7eb);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-color, #0d9488) 10%, rgba(15, 23, 42, 0.08));
}

.theme-layout-classic .sf-classic-row {
    align-items: stretch;
}

.theme-layout-classic .sf-classic-row img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

.theme-layout-classic .sf-classic-grid-card {
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.theme-layout-classic .sf-classic-grid-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary-color, #0d9488) 18%, #e5e7eb);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-color, #0d9488) 10%, rgba(15, 23, 42, 0.08));
}

.storefront-theme-classic .sf-section-heading__image {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary-color, #0d9488) 16%, rgba(15, 23, 42, 0.12));
}

.storefront-theme-classic .sf-section-heading h2 {
    color: color-mix(in srgb, var(--primary-color, #0d9488) 35%, #0f172a);
}

.storefront-theme-classic.sf-dark .sf-section-heading h2,
.sf-dark.storefront-theme-classic .sf-section-heading h2 {
    color: #fafafa;
}

.storefront-theme-classic .sf-classic-row {
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.storefront-theme-classic .sf-classic-row:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary-color, #0d9488) 18%, #e5e7eb);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-color, #0d9488) 10%, rgba(15, 23, 42, 0.08));
}

.storefront-theme-classic .sf-classic-add-btn,
.storefront-theme-classic .sf-product-action--add {
    background-color: var(--primary-color, #0d9488);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary-color, #0d9488) 34%, transparent);
}

.storefront-theme-classic .sf-classic-add-btn:hover:not(:disabled),
.storefront-theme-classic .sf-product-action--add:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color, #0d9488) 88%, #000);
}

.storefront-theme-classic .sf-product-action--view {
    background-color: #fff;
    color: var(--primary-color, #0d9488);
    border: 1px solid color-mix(in srgb, var(--primary-color, #0d9488) 28%, #e2e8f0);
    box-shadow: none;
}

.storefront-theme-classic .sf-product-action--view:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--primary-color, #0d9488) 8%, #fff);
}

.sf-product-sheet {
    animation: sf-sheet-up 0.28s ease-out;
}

@keyframes sf-sheet-up {
    from { transform: translateY(100%); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
}

.storefront-theme-classic .sf-bestsellers-strip {
    scrollbar-width: none;
}

.storefront-theme-classic .sf-bestsellers-strip::-webkit-scrollbar {
    display: none;
}

/* Same visual footprint as catalog grid-cols-2 cards — never full viewport width */
.theme-layout-classic .sf-menu-catalog .grid > article {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sf-bestseller-card .sf-bestseller-card__media {
    width: 100%;
    max-width: 100%;
}

.sf-bestseller-card .sf-bestseller-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
}

.sf-bestsellers .sf-bestseller-card {
    margin-bottom: 0;
}

.storefront-theme-classic .sf-hours-banner--closing {
    background: linear-gradient(180deg, color-mix(in srgb, #f59e0b 14%, #fffbeb), color-mix(in srgb, #f59e0b 8%, #fff));
    border-color: color-mix(in srgb, #f59e0b 45%, #fcd34d);
    color: #92400e;
}

.storefront-theme-classic.sf-dark .sf-hours-banner--closing,
.sf-dark.storefront-theme-classic .sf-hours-banner--closing {
    background: linear-gradient(180deg, color-mix(in srgb, #f59e0b 22%, #1e293b), color-mix(in srgb, #f59e0b 12%, #0f172a));
    border-color: color-mix(in srgb, #f59e0b 40%, #78350f);
    color: #fde68a;
}

.storefront-btn-primary {
    background-color: var(--primary-color);
}

.storefront-text-primary {
    color: var(--primary-color);
}