/* ==========================================================================
   Store page styles

   Lifted verbatim out of the three inline <style> blocks in
   pages/store.html. They only ever applied to that page, but living in the
   document meant no browser could cache them and the page carried 1,300
   lines of CSS before its first element.

   Loaded after styles/store.css, which is the order they sat in inline, so
   the cascade is unchanged.
   ========================================================================== */

/* ===== FULL-WIDTH STORE =====

   The rest of the site is a brochure: capped at 1400px so prose keeps a
   readable line length. A shop is not prose — it is a grid, and every pixel
   the cap threw away on a wide screen was a product column that could have
   been on screen. On a 1728px display the old cap wasted 164px down each
   side.

   So the store's three bands — the category strip, the search bar and the
   sidebar-plus-grid — run the full width of the window with only a gutter,
   and the product grid (auto-fill, minmax(200px, 1fr)) simply lays out more
   columns to fill it.

   The gutter stays small so the effect is edge-to-edge, but not so small
   that content touches the glass on a laptop. It is applied on each band's
   own rule further down rather than in one override block here, so nothing
   depends on which declaration the cascade happens to reach last. */
:root {
    --store-gutter: clamp(14px, 1.6vw, 28px);
}

/* Global Font */
body, html {
    font-family: var(--font-sans);
}

/* ===== ENHANCED SIDEBAR TREE STYLES ===== */

/* The category tree and the product grid are two independent scroll panes:
   each fills the height of the store area and scrolls its own content, so
   running down a long grid never carries the categories off the screen, and
   running down the tree never moves the products. The pane heights come from
   .store-content .container further down this file. */
.store-sidebar {
    flex: none;
    width: 280px;
    padding: 0;
    font-family: var(--font-sans);

    height: 100%;
    overflow-y: auto;
    /* The tree is a closed list — reaching its end should not start scrolling
       the page underneath it. The product pane deliberately does chain, so the
       newsletter and footer below are still reachable. */
    overscroll-behavior: contain;
}

.store-sidebar,
.store-main {
    scrollbar-width: thin;
    scrollbar-color: #8E8E93 transparent;
}

.store-sidebar::-webkit-scrollbar,
.store-main::-webkit-scrollbar {
    width: 8px;
}

.store-sidebar::-webkit-scrollbar-track,
.store-main::-webkit-scrollbar-track {
    background: transparent;
}

.store-sidebar::-webkit-scrollbar-thumb,
.store-main::-webkit-scrollbar-thumb {
    background: #8E8E93;
    border-radius: var(--radius-xs);
}

.store-sidebar::-webkit-scrollbar-thumb:hover,
.store-main::-webkit-scrollbar-thumb:hover {
    background: #636366;
}

/* Sidebar Category Widget */
.sidebar-category {
    background: #E5E5EA;
    margin-bottom: 16px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow var(--duration-base) var(--ease);
    position: relative;
}

/* Divider between categories */
.sidebar-category::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--ink-faint), transparent);
}

.sidebar-category:last-child::after {
    display: none;
}

.sidebar-category:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Category Header (Collapsible) */
.sidebar-title.category-header {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0;
    padding: 16px 18px;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: var(--transition-colors), var(--transition-transform), box-shadow var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
    user-select: none;
    background: linear-gradient(to right, #E5E5EA, #f0f0f5);
    border-bottom: 1px solid #d0d0d5;
}

.sidebar-title.category-header:hover {
    background: linear-gradient(to right, #dcdce1, #e8e8ed);
    color: var(--ink-strong);
}

.sidebar-title.category-header.collapsed {
    border-bottom: none;
}

.category-icon {
    font-size: var(--text-lg);
    color: #8E8E93;
    min-width: 20px;
}

.expand-icon {
    margin-left: auto;
    font-size: var(--text-2xs);
    transition: var(--transition-transform);
    color: var(--ink-soft);
}

.sidebar-title.category-header.collapsed .expand-icon {
    transform: rotate(-90deg);
}

/* Sidebar List */
.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 600px;
    overflow: hidden;
    transition: max-height var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1),
                opacity var(--duration-base) var(--ease),
                padding var(--duration-base) var(--ease);
    opacity: 1;
    padding: 8px 0;
}

.sidebar-list.collapsed {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

/* Sidebar Items */
.sidebar-item {
    padding: 12px 18px 12px 28px;
    color: #333;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: var(--transition-colors), var(--transition-transform);
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 3px solid transparent;
    position: relative;
}

.sidebar-item:hover {
    background: #F2F2F7;
    color: var(--ink-strong);
    border-left-color: #8E8E93;
    padding-left: 32px;
}

.sidebar-item.active {
    background: #E5E5EA;
    color: var(--ink-strong);
    border-left-color: #8E8E93;
    font-weight: 500;
}

.sidebar-item i {
    font-size: var(--text-sm);
    min-width: 18px;
    color: var(--ink-soft);
    transition: color var(--duration-fast) var(--ease);
}

.sidebar-item:hover i,
.sidebar-item.active i {
    color: var(--ink-strong);
}

/* Submenu Styles */
.sidebar-item.has-submenu {
    font-weight: 500;
}

.submenu-icon {
    font-size: 10px;
    transition: var(--transition-transform);
    margin-right: -6px;
}

.sidebar-item.has-submenu.open .submenu-icon {
    transform: rotate(90deg);
}

.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
    opacity: 0;
    background: rgba(0, 0, 0, 0.02);
}

.submenu.open {
    max-height: 500px;
    opacity: 1;
}

.submenu .sidebar-item {
    padding-left: 56px;
    font-size: var(--text-xs);
    font-weight: 400;
}

.submenu .sidebar-item:hover {
    padding-left: 60px;
}

/* Loading State */
.sidebar-item.loading {
    opacity: 0.6;
    pointer-events: none;
}

.sidebar-item.loading::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid #8E8E93;
    border-top-color: transparent;
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
    margin-left: auto;
}

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

/* Content Loading States */
.content-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

.content-loading i {
    font-size: var(--text-6xl);
    color: #8E8E93;
    margin-bottom: 20px;
    animation: spin 1s linear infinite;
}

.content-loading p {
    font-size: var(--text-lg);
    color: var(--ink-soft);
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* Was a photograph (assets/images/ardu-2.webp) with a dark overlay for
   legibility. Replaced with the same blue field used on .deep-band sections
   elsewhere on the site, so the store banner reads as part of the same
   design language rather than a stock photo. The .grain texture class is
   added on the element itself (scripts/store-page.js) rather than composed
   here, since .grain's ::after is additive and does not fight this rule's
   background the way a second `background:` declaration would.

   The old ::before dark overlay is gone with the photo — a solid gradient
   does not need darkening for the white text to read. */
.category-header-banner {
    background: radial-gradient(120% 120% at 65% 45%,
        var(--brand) 0%,
        var(--brand-dark) 45%,
        var(--brand-darker) 78%,
        var(--brand-ink) 100%);
    color: white;
    padding: 40px 30px;
    border-radius: 0;
    margin-bottom: 30px;
    box-shadow: none;
    animation: slideInDown 0.5s ease;
    position: relative;
    min-height: 120px;
    text-align: center;
}

/* h2/p were permanently opacity: 0 with nothing to reveal them — dead CSS
   left over from an animation that was never wired up, so the banner's
   heading and copy have been invisible against the photo this whole time. */
.category-header-banner h2,
.category-header-banner p {
    position: relative;
    z-index: 1;
    color: white;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.category-header-banner h2 {
    margin: 0 0 10px 0;
    font-size: var(--text-4xl);
    font-weight: 700;
}

.category-header-banner p {
    margin: 0;
    font-size: var(--text-base);
}

/* Breadcrumb for categories */
.category-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: var(--text-sm);
    color: var(--ink-soft);
    animation: fadeIn 0.5s ease;
}

.category-breadcrumb a {
    color: #8E8E93;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease);
}

.category-breadcrumb a:hover {
    color: #636366;
    text-decoration: underline;
}

.category-breadcrumb i {
    font-size: 10px;
    color: var(--ink-faint);
}

/* Animation for Items */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-item {
    animation: slideIn 0.3s ease forwards;
}

/* Stagger animation */
.sidebar-list:not(.collapsed) .sidebar-item:nth-child(1) { animation-delay: 0.05s; }
.sidebar-list:not(.collapsed) .sidebar-item:nth-child(2) { animation-delay: 0.08s; }
.sidebar-list:not(.collapsed) .sidebar-item:nth-child(3) { animation-delay: 0.11s; }
.sidebar-list:not(.collapsed) .sidebar-item:nth-child(4) { animation-delay: 0.14s; }
.sidebar-list:not(.collapsed) .sidebar-item:nth-child(5) { animation-delay: 0.17s; }
.sidebar-list:not(.collapsed) .sidebar-item:nth-child(6) { animation-delay: 0.20s; }

/* Responsive */
@media (max-width: 768px) {
    .store-sidebar {
        width: 100%;
    }
    
    .sidebar-category {
        border-radius: 0;
    }
    
    .sidebar-item {
        padding: 14px 18px 14px 28px;
    }
}

/* Scrollbar */
.sidebar-list {
    scrollbar-width: thin;
    scrollbar-color: #8E8E93 #e5e5ea;
}

.sidebar-list::-webkit-scrollbar {
    width: 6px;
}

.sidebar-list::-webkit-scrollbar-track {
    background: #e5e5ea;
}

.sidebar-list::-webkit-scrollbar-thumb {
    background: #8E8E93;
    border-radius: var(--radius-xs);
}

.sidebar-list::-webkit-scrollbar-thumb:hover {
    background: #636366;
}

/* ===== NAV BAR ===== */
/* First element on the store page, and .header above it is position: fixed
   with nothing reserving its height — so the top row of utility links was
   sitting underneath the header and getting clipped at every width. Reserve
   the header's height here rather than padding <body>, which would push the
   fixed header's own backdrop off. */
.store-nav-bar {
    background: #E5E5EA;
    padding: calc(var(--header-height) + 12px) 0 12px;
    font-family: var(--font-sans);
}

.store-nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    margin: 0;
    padding: 0 var(--store-gutter);
    flex-wrap: wrap;
    gap: 10px;
}

.store-nav-separator {
    width: 1px;
    height: 18px;
    background: var(--ink-faint);
}

.store-nav-contact-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.store-nav-label {
    font-size: var(--text-2xs);
    font-weight: 300;
    color: #333;
}

.store-nav-contact {
    font-size: var(--text-2xs);
    font-weight: 400;
    color: #8E8E93;
    text-decoration: underline;
}

.store-nav-country {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-2xs);
    padding: 2px 6px;
    border: 1px solid #333;
    background: transparent;
    white-space: nowrap;
}

.store-nav-link {
    text-decoration: none;
    color: #333;
    font-size: var(--text-2xs);
    font-weight: 500;
    padding: 4px 2px;
    position: relative;
}

.store-nav-link.active {
    background: none;
    box-shadow: none;
    color: #333;
}

.store-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: #333;
    transition: width var(--duration-base) var(--ease);
}

.store-nav-link:hover::after {
    width: 100%;
}

@media (max-width: 768px) {
    .store-nav-container {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 10px;
        scrollbar-width: none;
        /* The base rule wraps; without turning that off the nine links stack
           into three rows and overflow-x never engages, so this stayed a
           wrapped block instead of the intended single swipeable strip. */
        flex-wrap: nowrap;
    }

    .store-nav-container::-webkit-scrollbar {
        display: none;
    }

    .store-nav-link,
    .store-nav-label,
    .store-nav-contact,
    .store-nav-country {
        font-size: var(--text-2xs);
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Store Layout

   The store area is exactly one screen tall below the fixed header, and holds
   two scroll panes side by side. Sizing it here rather than on .container
   because styles/store.css gives this section `min-height: 100vh`, and a
   min-height beats a height — the section has to be pinned down first.

   align-items: stretch rather than flex-start: both panes need the row's full
   height for their own scrollbars to mean anything. */
.store-content {
    height: calc(100vh - var(--header-height));
    min-height: 420px;
    padding: var(--space-6) 0;
    box-sizing: border-box;
}

.store-content .container {
    display: flex;
    gap: 30px;
    align-items: stretch;
    height: 100%;
    /* Full width: .container's 1400px cap is for prose, not a product grid. */
    max-width: none;
    padding: 0 var(--store-gutter);
}

/* The newsletter and footer sit below the grid on this page. Left at the
   site-wide 1400px cap they stepped inward from a full-width shop, which read
   as a mistake rather than a choice. This sheet only loads on store.html, so
   the footer keeps its narrower measure everywhere else. */
.newsletter-section .container,
.footer .container {
    max-width: none;
    padding-left: var(--store-gutter);
    padding-right: var(--store-gutter);
}

.store-main {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    /* Padding, not margin: the gap has to sit inside the scroll pane so the
       last row of products clears the bottom edge. */
    padding-right: 4px;
}

@media (max-width: 768px) {
    /* Stacked on a phone, two independently scrolling panes would each get a
       sliver of the screen. The whole page scrolls as one again. */
    .store-content {
        height: auto;
        min-height: 0;
    }

    .store-content .container {
        flex-direction: column;
        height: auto;
    }

    .store-sidebar,
    .store-main {
        height: auto;
        overflow-y: visible;
        width: 100%;
    }
}

/* Category the shop does not stock yet. */
.category-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-soft);
}

.category-empty i {
    font-size: 64px;
    margin-bottom: 20px;
    color: var(--line);
}

.category-empty h3 {
    margin: 0 0 10px;
    color: var(--ink);
}

.category-empty p {
    margin: 0 auto;
    max-width: 44ch;
}

.category-empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

.category-empty-link {
    color: var(--brand-dark);
    font-size: var(--text-sm);
}

/* ===== COMPACT PRODUCT CARDS ===== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 10px 0;
    font-family: var(--font-sans);
}

.product-card {
    background: white;
    overflow: hidden;
    position: relative;
}

.product-card:hover {
    /* Card stays completely still */
}

.product-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    border-radius: 0;
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    z-index: 2;
    color: white;
}

.product-badge.bestseller {
    background: var(--brand);
}

.product-badge.new {
    background: #28a745;
}

.product-badge.popular {
    background: var(--danger);
}

.product-image {
    position: relative;
    height: 160px;
    background: var(--surface-sunken);
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.product-card:hover .product-image img {
    /* No zoom effect - keep image still */
}

.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: var(--transition-opacity);
}

.product-card:hover .product-overlay {
    opacity: 1;
}

.quick-view-btn,
.wishlist-btn {
    background: white;
    border: none;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--ink);
    transition: var(--transition-colors), var(--transition-transform);
}

.quick-view-btn:hover {
    background: var(--brand);
    color: var(--on-inverse);
}

.wishlist-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wishlist-btn:hover {
    background: var(--danger);
    color: white;
}

.product-info {
    padding: 12px;
}

/* ===== STOCK INDICATOR (NEW!) ===== */
.stock-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: var(--text-2xs);
}

.stock-indicator i {
    font-size: var(--text-2xs);
    color: var(--ink-soft);
}

.stock-number {
    background: #4CAF50;
    color: white;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: var(--text-2xs);
    min-width: 30px;
    text-align: center;
    line-height: 1.2;
}

.stock-text {
    color: var(--ink-soft);
    font-weight: 500;
    font-size: 10px;
}

.product-category {
    color: #8E8E93;
    font-size: var(--text-2xs);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.product-category .brand-name {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    max-width: 60%;
}

.product-category .brand-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-category i,
.product-category img.brand-logo {
    font-size: var(--text-sm);
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.product-category i {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-code {
    font-size: 10px;
    color: var(--ink-soft);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: all;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.product-code:hover {
    color: #636366;
}

.product-code i {
    font-size: 10px;
    color: var(--ink-faint);
    user-select: none;
}

.product-code:hover i {
    color: #636366;
}

.product-title {
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0 0 6px 0;
    color: var(--ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-description {
    font-size: var(--text-2xs);
    color: var(--ink-soft);
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.product-rating .stars {
    display: flex;
    gap: 2px;
}

.product-rating .stars i {
    font-size: var(--text-2xs);
    color: #ffc107;
}

.rating-count {
    font-size: var(--text-2xs);
    color: var(--ink-faint);
}

.product-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.current-price {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--ink-strong);
}

.original-price {
    font-size: var(--text-xs);
    color: var(--ink-faint);
    text-decoration: line-through;
}

.add-to-cart-btn {
    width: 100%;
    padding: 10px;
    background: #F2F2F7;
    color: var(--ink-strong);
    border: none;
    border-radius: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: var(--transition-colors), var(--transition-transform);
}

.add-to-cart-btn:hover {
    background: #8E8E93;
    color: white;
    transform: translateY(-1px);
}

.add-to-cart-btn i {
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .product-image {
        height: 140px;
    }

    .product-title {
        font-size: var(--text-sm);
    }

    .current-price {
        font-size: var(--text-base);
    }
}

/* Professional Search Bar Styling */
.store-search-bar {
    background: #f5f5f5;
    /* Clears the fixed site header. The utility nav bar that used to sit
       above this — and carried the offset — has been removed, so this row is
       first on the page again and has to reserve that height itself. */
    padding: calc(var(--header-height) + var(--space-5)) 0 var(--space-5);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-bar-container {
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    /* Centred: the row holds the logo, location, search and cart, and
       with the old "Call us" block gone there is nothing to anchor to
       the right edge, so the group sits in the middle of the page. */
    justify-content: center;
    /* Wrap at every width, not only under the 1024px breakpoint below,
       so a row that cannot fit its children breaks onto a second line
       instead of pushing past the viewport into a horizontal scroll. */
    flex-wrap: wrap;
    gap: 30px;
    padding: 0 var(--store-gutter);
    font-family: var(--font-sans);
}

.store-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.store-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

/* Location Selector Styling */
.location-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: white;
    border: 2px solid var(--line);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: var(--transition-colors), var(--transition-transform), box-shadow var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
    min-width: 220px;
    height: 51px;
    box-sizing: border-box;
}

.location-selector:hover {
    border-color: #8E8E93;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.location-icon {
    font-size: var(--text-xl);
    color: #8E8E93;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.location-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    justify-content: center;
}

.location-label {
    font-size: var(--text-2xs);
    color: var(--ink-soft);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.location-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.current-location {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink-strong);
    line-height: 1;
}

.location-dropdown i {
    font-size: 10px;
    color: var(--ink-soft);
    transition: var(--transition-transform);
    flex-shrink: 0;
}

.location-selector:hover .location-dropdown i {
    transform: rotate(180deg);
}

.search-bar-wrapper {
    display: flex;
    align-items: center;
    /* flex-basis, not width:100%. Flex breaks lines using each
       item's base size *before* any shrinking is applied, so a
       100% basis (1400px here) made the line break immediately and
       dropped the last item onto a row of its own. A modest basis
       lets every item share one line, then this one grows into
       whatever space is left, up to the max-width below. */
    min-width: 0;
    flex: 1 1 240px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    /* Not hidden: the suggestion dropdown is absolutely positioned
       below the bar and would be clipped away entirely. */
    overflow: visible;
    position: relative;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--duration-base) var(--ease),
                box-shadow var(--duration-base) var(--ease);
    max-width: 700px;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
}

.search-bar-wrapper:hover {
    border-color: var(--ink-faint);
}

/* One ring on the shell instead of a ring per control. */
.search-bar-wrapper:focus-within {
    border-color: var(--brand);
    box-shadow: var(--shadow-focus);
}
.main-search-input {
    flex: 1;
    padding: 13px 20px;
    border: none;
    font-size: var(--text-base);
    outline: none;
    font-family: var(--font-sans);
    background: transparent;
    height: 100%;
    box-sizing: border-box;
}

.main-search-input::placeholder {
    color: var(--ink-faint);
}
.category-dropdown {
    padding: 13px 15px;
    border: none;
    border-left: 1px solid var(--line);
    background: transparent;
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    cursor: pointer;
    outline: none;
    min-width: 170px;
    color: var(--ink-soft);
    height: 100%;
    box-sizing: border-box;
}

.category-dropdown:hover {
    background: var(--surface-sunken);
}

.main-search-btn {
    padding: 0 var(--space-6);
    margin: 4px;
    height: calc(100% - 8px);
    background: var(--ink-strong);
    border: none;
    border-radius: var(--radius-pill);
    color: var(--on-inverse);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--duration-base) var(--ease),
                transform var(--duration-fast) var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.main-search-btn:hover { background: var(--ink); }
.main-search-btn:active { transform: scale(0.97); }

.main-search-btn:hover {
    background: #333333;
}

.search-actions {
    display: flex;
    gap: 15px;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    transition: var(--transition-colors), var(--transition-transform), box-shadow var(--duration-base) var(--ease), opacity var(--duration-base) var(--ease);
    color: #333;
}

.action-btn:hover {
    color: #636366;
    transform: translateY(-2px);
}

.action-btn i {
    font-size: var(--text-xl);
}

.action-btn span {
    font-size: var(--text-2xs);
    font-weight: 500;
}

/* Orders and Cart Section */
.orders-cart-section {
    display: flex;
    align-items: center;
    gap: 20px;
    /* No trailing rule: it divided this from the "Call us" block, and
       with that gone it was a line hanging off the end of the row. */
}

.order-link,
.cart-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #333;
    padding: 8px 12px;
    cursor: pointer;
    position: relative;
}

.order-link i,
.cart-link i {
    font-size: var(--text-3xl);
    color: #333;
}

.order-link span,
.cart-link span {
    font-size: var(--text-2xs);
    font-weight: 500;
    white-space: nowrap;
}

.cart-badge {
    position: absolute;
    top: 2px;
    right: 6px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    display: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cart-badge:not(:empty) {
    display: block;
}

.contact-email {
    font-size: var(--text-2xs);
    color: var(--ink-soft);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease);
}

.contact-email:hover {
    color: #636366;
}

/* Location Modal */
.location-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.location-modal-content {
    background: white;
    padding: 30px;
    border-radius: var(--radius-sm);
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.location-modal-content h3 {
    margin: 0 0 10px 0;
    font-size: var(--text-2xl);
    color: var(--ink);
}

.location-modal-content p {
    margin: 0 0 20px 0;
    color: var(--ink-soft);
    font-size: var(--text-sm);
}

.location-search {
    position: relative;
    margin-bottom: 25px;
}

.location-search i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-faint);
}

.location-search input {
    width: 100%;
    padding: 12px 15px 12px 45px;
    border: 2px solid var(--line);
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
}
.location-search input:focus:not(:focus-visible) {
    outline: none;
    border-color: #8E8E93;
}

.popular-locations h4 {
    margin: 0 0 15px 0;
    font-size: var(--text-base);
    color: #333;
}

.location-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 8px;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    cursor: pointer;
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    transition: var(--transition-colors), var(--transition-transform);
}

.location-option:hover {
    background: #8E8E93;
    color: white;
    border-color: #8E8E93;
}

.location-option i {
    color: #8E8E93;
}

.location-option:hover i {
    color: white;
}

/* The bar needs roughly 900px to hold one line: the fixed items
   (logo, location, orders/cart) plus gaps, padding and a 240px
   minimum for the search field. Below that it uses the stacked
   layout — search on its own row. */
@media (max-width: 1100px) {
    .search-bar-container {
        flex-wrap: wrap;
        justify-content: center;
    }

    .location-selector {
        order: 1;
        min-width: auto;
        flex: 1;
    }

    .search-bar-wrapper {
        order: 3;
        flex-basis: 100%;
        width: 100%;
        max-width: 100%;
    }

    .search-actions {
        order: 2;
    }

    .orders-cart-section {
        order: 4;
    }
}

@media (max-width: 768px) {
    .store-search-bar {
        padding: calc(var(--header-height) + var(--space-3)) 0 var(--space-3);
    }

    .search-bar-container {
        gap: 15px;
    }

    .store-logo {
        width: 60px;
        height: 60px;
    }

    .location-selector {
        width: 100%;
        order: 2;
        justify-content: center;
        height: 48px;
    }

    .location-info {
        align-items: center;
        text-align: center;
    }

    .location-icon {
        font-size: var(--text-xl);
    }

    .search-bar-wrapper {
        height: 48px;
    }

    .category-dropdown {
        display: none;
    }

    .main-search-input {
        padding: 12px 15px;
        font-size: var(--text-sm);
    }

    .main-search-btn {
        padding: 0 20px;
    }

    .action-btn span {
        display: none;
    }

    .action-btn i {
        font-size: var(--text-xl);
    }

    .orders-cart-section {
        gap: 15px;
    }

    .order-link span,
    .cart-link span {
        font-size: var(--text-2xs);
    }

    .order-link i,
    .cart-link i {
        font-size: var(--text-xl);
    }
}