/* B2B Storefront Styles — "style_3" theme
 *
 * Forked from themes/style_1 and re-skinned after its source shop (a Woodmart
 * WooCommerce shop): blue #007bc4 on white, square corners, uppercase
 * micro-typography, and a product grid whose tiles share hairline borders
 * rather than floating as rounded panels.
 *
 * Deliberately forked from style_1, NOT from themes/style_2 — style_2 is
 * the same Woodmart shape in orange, and chaining the two would make every
 * later style_1 sync a two-hop diff. The re-skin below borrows style_2's
 * structural sections (they are Woodmart-generic) with this theme's palette and
 * the places the two shops genuinely differ rewritten.
 *
 * Everything below the "STYLE 3 SKIN" banner at the end of this file is the
 * re-skin; the rest is style_1 with the palette swapped, so a later style_1
 * change can still be diffed in.
 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --primary: #007bc4;
    --primary-dark: #0068a6;
    --brand-orange-light: #ffa64d;
    --brand-orange: #f58220;
    --brand-orange-dark: #e16d0a;
    --brand-green-light: #4dd07a;
    --brand-green: #27ae60;
    --brand-green-dark: #1f8b4d;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
}
html {
    /* Note: overflow-x on html breaks position:sticky - only set on body */
    max-width: 100%;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--gray-800);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll from marquee */
}
/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 400px;
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateX(120%);
    transition: transform 0.3s ease;
    pointer-events: auto;
}
.toast.show {
    transform: translateX(0);
}
.toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.toast-success .toast-icon {
    color: #22c55e;
}
.toast-error .toast-icon {
    color: #ef4444;
}
.toast-message {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-800);
}
.toast-close {
    flex-shrink: 0;
    padding: 0.25rem;
    background: none;
    border: none;
    color: var(--gray-600);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
}
.toast-close:hover {
    background: var(--gray-100);
}
/* Loading Spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Mobile toast positioning */
@media (max-width: 640px) {
    .toast-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }
    .toast {
        transform: translateY(-120%);
    }
    .toast.show {
        transform: translateY(0);
    }
}
/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.2s;
}
.modal-overlay.show {
    opacity: 1;
}
.modal-container {
    background: white;
    border-radius: 12px;
    max-width: 800px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.2s;
}
.modal-overlay.show .modal-container {
    transform: translateY(0);
}
.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background 0.15s;
}
.modal-close:hover {
    background: var(--gray-100);
}
/* Variant Modal */
.variant-modal .modal-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.variant-modal-image {
    aspect-ratio: 1;
    background: var(--gray-100);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.variant-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.variant-modal-details {
    padding: 1.5rem 1.5rem 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.variant-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}
.variant-modal-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}
.variant-modal-price .original-price {
    font-size: 1rem;
    color: var(--gray-500);
    text-decoration: line-through;
    font-weight: 400;
    margin-left: 0.5rem;
}
.variant-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.variant-option-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.variant-option-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}
.variant-option-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.variant-option-btn {
    padding: 0.5rem 1rem;
    border: 2px solid var(--gray-300);
    border-radius: 6px;
    background: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.variant-option-btn:hover {
    border-color: var(--gray-400);
}
.variant-option-btn.selected {
    border-color: var(--primary);
    background: rgba(37, 99, 235, 0.05);
    color: var(--primary);
}
.variant-option-btn.out-of-stock {
    opacity: 0.5;
    cursor: not-allowed;
    text-decoration: line-through;
}
/* Color swatch buttons */
.variant-option-btn.color-swatch {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    position: relative;
}
.variant-option-btn.color-swatch.selected {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--primary);
}
.variant-option-btn.color-swatch.out-of-stock::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -2px;
    right: -2px;
    height: 2px;
    background: var(--gray-500);
    transform: rotate(-45deg);
}
.variant-quantity {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.variant-quantity label {
    font-weight: 600;
    color: var(--gray-700);
}
.variant-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin: 0;
}
.btn-block {
    width: 100%;
    justify-content: center;
    height: 48px;
    font-size: 1rem;
}
/* Mobile modal */
@media (max-width: 640px) {
    .modal-container {
        max-height: 100vh;
        border-radius: 0;
        height: 100%;
    }
    .variant-modal .modal-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .variant-modal-image {
        aspect-ratio: 4/3;
    }
    .variant-modal-details {
        padding: 0 1rem 1rem;
    }
    .modal-close {
        top: 0.5rem;
        right: 0.5rem;
    }
}
/* Header */
.header {
    background: white;
    color: var(--gray-800);
}
/* Sticky wrapper - direct child of body, not constrained by <header> */
.header-sticky-wrapper {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
}
/* Header Row 1 (logo, search, user area)
   Left padding is 0 so the logo column can be exactly the sidebar width (240px),
   making the logo's right edge and the menu's left edge land on the same x as
   the category-tree's right border in the body grid below. */
.header-row-1 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.6rem 1.6rem 0.6rem 0;
    display: flex;
    align-items: center;
    gap: 0;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* ============================================
   Header Row 1 - Right Column Stack
   Desktop: search/actions on top, contact info below (next to logo)
   Mobile:  collapses; contact bar becomes full-width row below logo
   ============================================ */
.header-row-1-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-width: 0;
}
.header-row-1-top {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
.header-row-1-top .search-box {
    flex: 1;
}
/* ============================================
   Header Subbar (between announcement bar and header-row-1)
   - Desktop: contact info (left) + language switcher (right, white background)
   - Mobile: hidden via CSS; contact info appears inside mobile menu drawer
   ============================================ */
.header-subbar {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.header-subbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.32rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}
.header-subbar-left {
    flex: 1 1 auto;
    min-width: 0;
}
.header-subbar-left .contact-info-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.header-subbar-left .contact-item:first-child {
    padding-left: 0;
}
/* Keep all 4 contact items on a single row in the subbar: trim the item
   padding, divider width, and font so the long email no longer wraps to a
   second line. The .header-subbar-compact overrides below stay more compact
   for the currency-switcher case (less room beside the right cluster). */
.header-subbar .contact-item {
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
}
.header-subbar .contact-label {
    font-size: 0.76rem;
}
.header-subbar .contact-divider {
    width: 1rem;
}
/* Compact subbar: kicks in when currency switcher is enabled so all 4 contact
   items still fit on a single line beside the wider right cluster. */
.header-subbar-compact .header-subbar-left .contact-info-inner {
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}
.header-subbar-compact .contact-item {
    padding: 0.25rem 0.55rem;
    font-size: 0.76rem;
    gap: 0.35rem;
}
.header-subbar-compact .contact-icon-wrap {
    width: 22px;
    height: 22px;
}
.header-subbar-compact .contact-icon {
    width: 12px;
    height: 12px;
}
.header-subbar-compact .contact-label {
    font-size: 0.72rem;
}
.header-subbar-compact .contact-divider {
    width: 0.85rem;
}
.header-subbar-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.subbar-lang .lang-btn,
.subbar-currency .currency-btn {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.subbar-lang .lang-btn:hover,
.subbar-currency .currency-btn:hover {
    border-color: var(--gray-400);
    background: #f9fafb;
}
/* Mobile (<=768px): hide subbar; collapse right wrapper into parent grid */
@media (max-width: 768px) {
    .header-subbar {
        display: none;
    }
    .header-row-1-right {
        display: contents;
    }
    .header-row-1-top {
        display: none;
    }
    /* Cap the height, but let a wide wordmark shrink below it rather than
       force the logo column past the viewport. The cellb2b mark is 640x125,
       i.e. 287px at a fixed 56px height — wider than the 249px the middle
       column gets on a 375px phone, which pushed the cart button off screen.
       max-width lets the browser scale the artwork down proportionally. */
    .header-row-1 .logo img {
        height: auto;
        max-height: 56px;
        max-width: 100%;
    }
    /* The skin sets `.logo { padding: 0 1rem 0 0 }` further down the file, so
       the plain `.logo` reset in the mobile block below loses on source order
       and leaves 16px of dead space that shifts the centred logo left. */
    .header-row-1 .logo {
        padding-right: 0;
    }
}
/* Header Row 2 - Not sticky (horizontal menu)
   Single continuous left-to-right gradient: blue → green.
   Intermediate stops use teal hues so the blue → green midpoint stays vivid
   (a flat 2-stop blend muddies into grey-teal). */
.header-row-2 {
    background: linear-gradient(
        90deg,
        var(--primary) 0%,
        #1e88c7 35%,
        #1ea98a 65%,
        var(--brand-green) 100%
    );
    border-top: 1px solid var(--primary-dark);
}
/* ============================================
   Mega Menu Styles
   ============================================ */
.mega-menu {
    max-width: none;
    margin: 0;
    padding: 0;
}
.mega-menu-list {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.mega-menu-list::-webkit-scrollbar {
    display: none;
}
.mega-menu-item {
    position: relative;
    flex-shrink: 0;
}
.mega-menu-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 0.8rem;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.mega-menu-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
/* Right last item (typically Contact) - sits on green end of bar gradient */
.mega-menu-list > .mega-menu-item:last-child > .mega-menu-link {
    background: transparent;
    font-weight: 600;
}
.mega-menu-list > .mega-menu-item:last-child > .mega-menu-link:hover {
    background: rgba(0, 0, 0, 0.15);
}
/* Special filter shortcuts moved here from sidebar (new / hot / sale). */
.mega-menu-special > .mega-menu-link {
    font-weight: 600;
}
.mega-menu-special--hot > .mega-menu-link::before  { content: "🔥"; margin-right: 0.3rem; }
.mega-menu-special--sale > .mega-menu-link::before { content: "🏷️"; margin-right: 0.3rem; }
.mega-menu-special--new > .mega-menu-link::before  { content: "🆕"; margin-right: 0.3rem; }
.mega-menu-link .dropdown-arrow {
    opacity: 0.6;
    transition: transform 0.2s;
}
/* Arrow rotation also controlled by JS (.active class) only */
.mega-menu-item.active .dropdown-arrow {
    transform: rotate(180deg);
}
/* Menu Badge */
.menu-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 10px;
    background: var(--primary);
    color: white;
}
.menu-badge.badge-red { background: #ef4444; }
.menu-badge.badge-green { background: #22c55e; }
.menu-badge.badge-orange { background: #f97316; }
.menu-badge.badge-blue { background: #3b82f6; }
/* Simple Dropdown */
.simple-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: white;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 1000;
}
/* Dropdown visibility controlled by JS (.active class) only
   to prevent immediate open on page load when cursor is over menu */
.mega-menu-item.active > .simple-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dropdown-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}
.dropdown-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    color: var(--gray-800);
    text-decoration: none;
    font-size: 0.875rem;
    transition: background 0.15s, color 0.15s;
}
.dropdown-item a:hover {
    background: var(--gray-50);
    color: var(--primary);
}
/* Submenu */
.dropdown-item.has-submenu {
    position: relative;
}
.submenu-list {
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 200px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.dropdown-item.has-submenu:hover > .submenu-list {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}
/* Mega Dropdown */
.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 1000;
}
.mega-dropdown[data-width="full"] {
    /* Position fixed relative to viewport, centered with max-width constraint */
    position: fixed;
    /* CSS fallback: calculate from typical header height (~140px), JS will override */
    top: var(--mega-menu-top, 140px);
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2rem);
    max-width: 1200px;
    margin-left: 0;
    border-radius: 0 0 12px 12px;
    /* Prevent dropdown from covering entire screen */
    max-height: calc(100vh - var(--mega-menu-top, 140px) - 2rem);
    overflow-y: auto;
}
.mega-dropdown[data-width="auto"] {
    min-width: 600px;
    max-width: 900px;
}
.mega-dropdown[data-width="800px"] { width: 800px; }
.mega-dropdown[data-width="1000px"] { width: 1000px; }
.mega-dropdown[data-width="1200px"] { width: 1200px; }
/* Dropdown visibility controlled by JS (.active class) only
   to prevent immediate open on page load when cursor is over menu */
.mega-menu-item.active > .mega-dropdown {
    opacity: 1;
    visibility: visible;
}
.mega-menu-item.active > .mega-dropdown[data-width="full"] {
    opacity: 1;
    visibility: visible;
}
.mega-dropdown-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    display: flex;
    gap: 2rem;
}
/* Mega Columns */
.mega-columns {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--columns, 4), 1fr);
    gap: 1.5rem;
}
.mega-column {}
.column-title {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-900);
}
.column-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.column-title a:hover {
    color: var(--primary);
}
.column-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.column-links li {
    margin-bottom: 0.375rem;
}
.column-links a {
    color: var(--gray-600);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: color 0.15s;
}
.column-links a:hover {
    color: var(--primary);
}
/* Mega Tabs - Vertical Layout (Default) */
.mega-tabs {
    flex: 1;
    display: flex;
    gap: 1.5rem;
}
.mega-tabs-nav {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 160px;
    border-right: 1px solid var(--gray-200);
    padding-right: 1.5rem;
}
.mega-tab-btn {
    padding: 0.625rem 1rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mega-tab-btn:hover {
    background: var(--gray-50);
    color: var(--gray-900);
}
.mega-tab-btn.active {
    background: var(--primary);
    color: white;
}
.mega-tabs-content {
    flex: 1;
}
.mega-tab-panel {
    display: none;
}
.mega-tab-panel.active {
    display: block;
}
/* Mega Tabs - Horizontal Layout */
.mega-tabs[data-tab-layout="horizontal"] {
    flex-direction: column;
    gap: 1rem;
}
.mega-tabs[data-tab-layout="horizontal"] .mega-tabs-nav {
    flex-direction: row;
    min-width: auto;
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    padding-right: 0;
    padding-bottom: 0;
    gap: 0;
}
.mega-tabs[data-tab-layout="horizontal"] .mega-tab-btn {
    text-align: center;
    border-radius: 6px 6px 0 0;
    padding: 0.75rem 1.5rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.mega-tabs[data-tab-layout="horizontal"] .mega-tab-btn:hover {
    background: var(--gray-50);
    border-bottom-color: var(--gray-300);
}
.mega-tabs[data-tab-layout="horizontal"] .mega-tab-btn.active {
    background: white;
    color: var(--primary);
    border-bottom-color: var(--primary);
}
/* Mega Promo */
.mega-promo {
    flex-shrink: 0;
    width: 220px;
}
.mega-promo a {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.mega-promo img {
    width: 100%;
    height: auto;
    display: block;
}
.mega-promo .promo-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    font-weight: 500;
    font-size: 0.875rem;
}
/* Featured Image in Mega Menu */
.mega-featured-image {
    flex-shrink: 0;
    width: 200px;
}
.mega-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
/* Click trigger (for touch devices) */
.mega-menu-item[data-trigger="click"] > .mega-dropdown,
.mega-menu-item[data-trigger="click"] > .simple-dropdown {
    pointer-events: none;
}
.mega-menu-item[data-trigger="click"].active > .mega-dropdown,
.mega-menu-item[data-trigger="click"].active > .simple-dropdown {
    pointer-events: auto;
}
/* ============================================
   End Mega Menu Styles
   ============================================ */
/* Logo column spans the same width as the category-tree sidebar so its right
   edge lines up with the sidebar's right vertical border, and the horizontal
   menu (in the next flex column with gap:0) starts on that same line.
   Tight padding + width:100% on the image lets the logo fill the column,
   maximising visual presence within the aspect-ratio limit. */
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
    flex: 0 0 240px;
    box-sizing: border-box;
    padding: 0.4rem 0.6rem;
    align-self: stretch;
}
.logo img {
    width: 100%;
    height: auto;
    max-height: 96px;
    display: block;
}
@media (max-width: 992px) {
    .logo {
        flex-basis: 200px;
    }
}
/* Mobile Header Search Bar (between header and contact info, mobile only) */
.mobile-header-search {
    display: none;
    position: relative;
    background: #fff;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.mobile-header-search-form {
    display: flex;
    width: 100%;
    background: #f3f4f6;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: border-color 0.2s;
}
.mobile-header-search-form:focus-within {
    border-color: var(--primary, #007bc4);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.mobile-header-search-input {
    flex: 1;
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.9375rem;
    color: #1f2937;
}
.mobile-header-search-input::placeholder {
    color: #9ca3af;
}
.mobile-header-search-btn {
    padding: 0.625rem 0.875rem;
    background: var(--primary, #007bc4);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.mobile-header-search-btn:hover {
    background: var(--primary-dark, #0068a6);
}
/* Search Box — fills whatever space is left after logo and the user-area
   (cart + account). max-width is intentionally unset so a longer username
   shrinks the search input dynamically instead of overflowing. */
.search-box {
    flex: 1 1 auto;
    min-width: 220px;
    position: relative;
}
.search-form {
    display: flex;
    background: #f8f9fa;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    overflow: hidden;
}
.search-input {
    flex: 1;
    padding: 0.7rem 1.1rem;
    border: none;
    outline: none;
    font-size: 0.875rem;
    color: var(--gray-800);
    background: transparent;
}
.search-input::placeholder {
    color: var(--gray-500);
}
.search-btn {
    padding: 0.7rem 1.4rem;
    background: var(--brand-orange);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}
.search-btn:hover {
    background: var(--brand-orange-dark);
}
/* Search Dropdown */
.search-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}
.search-dropdown.active {
    display: block;
}
.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.15s;
}
.search-result-item:hover {
    background: var(--gray-50);
}
.search-result-item:last-of-type {
    border-bottom: none;
}
.search-result-info {
    flex: 1;
    min-width: 0;
}
.search-result-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gray-800);
}
.search-result-sku {
    font-size: 0.8rem;
    color: var(--gray-600);
}
.search-result-price {
    font-weight: 600;
    color: var(--primary);
    flex-shrink: 0;
}
/* Login button in search results (when price hidden) */
.search-result-login-btn {
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    background: var(--primary, #007bc4);
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}
.search-result-login-btn:hover {
    background: var(--primary-dark, #0068a6);
    color: white;
}
.search-no-results {
    padding: 20px;
    text-align: center;
    color: var(--gray-600);
}
.search-view-all {
    display: block;
    padding: 12px;
    text-align: center;
    background: var(--gray-50);
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 8px 8px;
}
.search-view-all:hover {
    background: var(--gray-100);
}
/* Mobile Fullscreen Search Dropdown */
@media (max-width: 768px) {
    .search-dropdown {
        /* Align right edge to screen right, then expand full width to left */
        position: absolute;
        top: 100%;
        left: auto;
        right: -56px; /* Offset for menu toggle button + padding (44px + 12px) */
        width: 100vw;
        border-radius: 0;
        border-left: none;
        border-right: none;
        max-height: 70vh;
        max-height: 70dvh;
        margin-top: 0;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        transform: none;
    }
    .search-result-item {
        padding: 14px 16px;
        gap: 14px;
    }
    .search-result-name {
        font-size: 1rem;
    }
    .search-view-all {
        padding: 16px;
        font-size: 1rem;
        position: sticky;
        bottom: 0;
        background: white;
        border-radius: 0;
    }
}
/* Search Section Headers */
.search-section {
    border-bottom: 4px solid var(--gray-300);
}
.search-section:last-of-type {
    border-bottom: none;
}
.search-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-900);
    padding: 10px 12px 6px;
    margin: 0;
    background: var(--gray-50);
}
/* Category Results in Dropdown */
.search-result-category {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.15s;
}
.search-result-category:hover {
    background: var(--gray-50);
}
.search-category-group {
    border-bottom: 1px solid var(--gray-200);
}
.search-category-group:last-child {
    border-bottom: none;
}
.search-category-group-header {
    font-size: 0.75rem;
    color: var(--gray-500);
    padding: 8px 12px 4px;
    background: var(--gray-50);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-category-group .search-result-category {
    border-bottom: 1px solid var(--gray-100);
}
.search-category-group .search-result-category:last-child {
    border-bottom: none;
}
.search-result-category-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.search-result-category-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.search-result-matched-codes {
    margin-left: 8px;
    color: #dc2626;
    font-style: italic;
    font-size: 0.875rem;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: bottom;
}
/* Show More Link */
.search-view-more {
    display: block;
    padding: 8px 12px;
    text-align: center;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    background: var(--gray-50);
    transition: background 0.15s;
}
.search-view-more:hover {
    background: var(--gray-100);
}
/* Search Results Page */
.search-results-header {
    margin-bottom: 1.5rem;
}
.search-query-info {
    color: var(--gray-600);
    margin-top: 0.5rem;
}
/* Header Actions — pinned to the right edge of header-row-1-top so cart/
   account always sit at the far right while the search-box absorbs the
   leftover space. */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    margin-left: auto;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--gray-700);
    cursor: pointer;
    padding: 0.5rem;
}
.mobile-menu-toggle svg {
    width: 24px;
    height: 24px;
}
/* Mobile Cart Toggle (hidden on desktop) */
.mobile-cart-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    /* Match the live cellb2b look: near-black icon (same as the hamburger),
       blue count badge — not the orange inherited from style_2. */
    color: var(--gray-700);
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem;
    position: relative;
}
.mobile-cart-toggle svg {
    width: 24px;
    height: 24px;
    display: block;
    transform: translateX(-2px);
}
.mobile-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid white;
    box-sizing: content-box;
}
.mobile-cart-badge:empty {
    display: none;
}
/* Desktop Navigation - Hidden by default (moved to mobile menu) */
.nav {
    display: none;
}
.nav a {
    color: var(--gray-800);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.nav a:hover { color: var(--primary); }
/* User area - dynamic loading for cacheability */
.user-area {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    /* Fixed dimensions to prevent CLS during AJAX load */
    min-height: 38px;
    min-width: 188px;
}
/* Push the cart wrapper to the end of the user area regardless of HTML order
   (kept first in markup for accessibility/skeleton stability). */
.user-area .cart-wrapper {
    order: 99;
}
/* Loading placeholder with skeleton UI to prevent CLS */
.user-area-loading {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    min-width: 188px;
    min-height: 38px;
}
.user-area-skeleton {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}
.skeleton-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
/* Single skeleton for entire user area (Cart + Account or Login + Register) */
.skeleton-user-area {
    width: 188px;
    height: 38px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
/* Legacy skeleton styles for backwards compatibility */
.skeleton-btn {
    width: 100px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--gray-700) 25%, var(--gray-600) 50%, var(--gray-700) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.skeleton-btn-sm {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--gray-700) 25%, var(--gray-600) 50%, var(--gray-700) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Legacy loading dots fallback */
.loading-dots {
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
#userAreaLoggedIn,
#userAreaGuest {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 33px;
}
/* Override nav link styles for minicart dropdown */
/* Mobile Navigation Overlay */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
}
.nav-overlay.open {
    display: block;
}
/* Mobile Navigation Styles */
@media (max-width: 768px) {
    .header-row-1 {
        display: grid;
        /* minmax(0, ...), not a bare 1fr: a bare fr floors at min-content, so a
           logo wider than the free space grows the middle track and shoves the
           cart column past the right edge instead of scaling the logo down. */
        grid-template-columns: 48px minmax(0, 1fr) 48px;
        align-items: center;
        gap: 0;
        padding: 0.5rem 1rem;
    }
    .mobile-menu-toggle {
        order: 0;
        justify-self: start;
    }
    .logo {
        order: 1;
        justify-self: center;
        text-align: center;
        flex: 0 1 auto;
        padding-left: 0;
        padding-right: 0;
    }
    /* Hide search box from header on mobile */
    .search-box {
        display: none;
    }
    /* Show mobile header search bar */
    .mobile-header-search {
        display: block;
    }
    /* Fix dropdown alignment for mobile header search */
    .mobile-header-search .search-dropdown {
        left: 0;
        right: 0;
        width: auto;
        margin-left: 0;
    }
    .header-row-2 {
        display: none;
    }
    /* Hide header-actions on mobile, show only mobile-menu-toggle */
    .header-actions {
        display: none;
    }
    .mobile-menu-toggle {
        display: flex;
        flex-shrink: 0;
    }
    /* Show mobile cart icon on right side */
    .mobile-cart-toggle {
        display: flex;
        order: 2;
        justify-self: end;
        flex-shrink: 0;
    }
    .nav {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 85%;
        max-width: 340px;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height - accounts for mobile browser chrome (no -webkit-fill-available: it caps short on iOS and leaves a bottom gap) */
        background: white;
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
        gap: 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 101;
        overflow-y: auto;
        color: var(--gray-800);
    }
    .nav.open {
        transform: translateX(0);
    }
    .nav > a,
    .nav > .btn,
    .nav > .lang-switcher,
    .nav > .currency-switcher,
    .nav > .cart-wrapper {
        width: 100%;
        padding: 1rem 0;
        border-bottom: 1px solid var(--gray-200);
        font-size: 1rem;
        color: var(--gray-800);
    }
    .nav > .btn {
        text-align: center;
        margin-top: 0.5rem;
        padding: 0.75rem 1rem;
        border-bottom: none;
    }
    .nav > .btn-primary {
        margin-top: 1rem;
    }
    .lang-switcher,
    .currency-switcher {
        width: 100%;
    }
    .lang-btn,
    .currency-btn {
        width: 100%;
        justify-content: flex-start;
        background: var(--gray-50);
        color: var(--gray-800);
        border: 1px solid var(--gray-200);
        border-radius: 10px;
        padding: 0.75rem 1rem;
        box-shadow: none;
    }
    .lang-dropdown,
    .currency-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        display: none;
        margin-top: 0.5rem;
        overflow: hidden;
    }
    .lang-switcher.open .lang-dropdown,
    .currency-switcher.open .currency-dropdown {
        display: block;
    }
    .lang-option,
    .currency-option {
        color: var(--gray-800) !important;
        padding: 0.75rem 1rem;
    }
    .lang-option:hover,
    .currency-option:hover {
        background: var(--gray-100);
    }
    /* Mobile User Area */
    .mobile-user-area {
        width: 100%;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--gray-200);
    }
    .mobile-user-area .nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 0;
        color: var(--gray-700);
        text-decoration: none;
        border-bottom: 1px solid var(--gray-200);
    }
    .mobile-user-area .nav-link:hover {
        color: var(--primary);
    }
    .mobile-user-area .logout-link {
        color: #ef4444;
    }
    .mobile-user-area .btn {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }
    #mobileUserAreaLoggedIn,
    #mobileUserAreaGuest {
        display: block;
    }
    #mobileUserAreaLoggedIn.hidden,
    #mobileUserAreaGuest.hidden {
        display: none;
    }
}
/* Mobile only elements - hidden on desktop */
.mobile-only {
    display: none;
}
@media (max-width: 768px) {
    .mobile-only {
        display: block;
    }
}
.btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-outline {
    border: 1px solid var(--gray-400);
    color: var(--gray-700);
    background: transparent;
}
.btn-outline:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}
.btn-register {
    background: linear-gradient(135deg, var(--brand-orange-light) 0%, var(--brand-orange) 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(245, 130, 32, 0.25);
}
.btn-register:hover {
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
    box-shadow: 0 3px 10px rgba(245, 130, 32, 0.35);
    color: #fff;
}
.btn-secondary {
    background: var(--gray-100);
    color: var(--gray-800);
}
.btn-secondary:hover { background: var(--gray-200);
    color: var(--gray-800);  /* see .btn-primary:hover — the skin's blanket a:hover steals this */
}
/* Language Switcher */
.lang-switcher {
    position: relative;
}
.lang-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    color: var(--gray-700);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.lang-btn:hover {
    border-color: var(--gray-400);
    background: var(--gray-100);
}
.lang-flag {
    font-size: 1.1rem;
    line-height: 1;
}
.lang-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
    z-index: 200;
    overflow: hidden;
}
.lang-switcher:hover .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #1f2937 !important;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.lang-option:hover {
    background: var(--gray-100);
}
.lang-option.active {
    background: var(--gray-50);
    font-weight: 500;
}
.lang-option .lang-flag {
    font-size: 1.25rem;
}
.lang-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.lang-switcher:hover .lang-arrow {
    transform: rotate(180deg);
}
/* Currency Switcher */
.currency-switcher {
    position: relative;
}
.currency-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    color: var(--gray-700);
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.2s;
}
.currency-btn:hover {
    border-color: var(--gray-400);
    background: var(--gray-100);
}
.currency-symbol {
    font-weight: 500;
}
.currency-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
    z-index: 200;
    overflow: hidden;
}
.currency-switcher:hover .currency-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.currency-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #1f2937 !important;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.currency-option:hover {
    background: var(--gray-100);
}
.currency-option.active {
    background: var(--gray-50);
    font-weight: 500;
}
.currency-option .currency-symbol {
    font-size: 1.1rem;
    min-width: 1.5rem;
    text-align: center;
}
.currency-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.currency-switcher:hover .currency-arrow {
    transform: rotate(180deg);
}
/* Account Dropdown */
.account-dropdown-wrapper {
    position: relative;
}
.account-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    color: var(--gray-700);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.account-btn:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}
.account-btn svg {
    flex-shrink: 0;
}
.account-btn #accountName {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s;
}
.account-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 200px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}
.account-dropdown-wrapper:hover .account-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.account-dropdown-wrapper:hover .account-arrow {
    transform: rotate(180deg);
}
.account-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #1f2937 !important;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s;
}
.account-option:hover {
    background: var(--gray-100);
}
.account-option svg {
    flex-shrink: 0;
    color: var(--gray-500);
}
.account-option:hover svg {
    color: var(--primary);
}
.account-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 0.25rem 0;
}
.account-logout {
    color: #dc2626 !important;
}
.account-logout svg {
    color: #dc2626;
}
.account-logout:hover {
    background: #fef2f2;
}
.account-logout:hover svg {
    color: #dc2626;
}
/* Mobile account dropdown */
@media (max-width: 768px) {
    .account-dropdown-wrapper {
        width: 100%;
    }
    .account-btn {
        width: 100%;
        justify-content: flex-start;
        border: none;
        padding: 0;
    }
    .account-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        display: none;
        margin-top: 0.5rem;
    }
    .account-dropdown-wrapper.open .account-dropdown {
        display: block;
    }
    .account-option {
        color: var(--gray-700) !important;
        padding: 0.75rem 1rem;
    }
    .account-option:hover {
        background: var(--gray-100);
    }
    .account-logout {
        color: #ef4444 !important;
    }
    .account-divider {
        background: var(--gray-200);
    }
}
/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}
/* Sections */
.section {
    padding: 4rem 0;
}
.section-title {
    font-size: 1.75rem;
    margin-bottom: 2rem;
}
.category-product-count {
    font-size: 0.9rem;
    color: var(--gray-500);
    margin: -1rem 0 1.5rem;
    text-align: center;
}
.homepage-layout .section-title {
    text-align: center;
    font-size: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-200);
}
/* Breadcrumb */
.breadcrumb {
    padding: 1rem 0;
    font-size: 1.05rem;
}
.breadcrumb a {
    color: var(--gray-700, #374151);
    text-decoration: underline;
    text-decoration-color: var(--gray-400);
    text-underline-offset: 2px;
}
.breadcrumb a:hover {
    color: var(--primary);
    text-decoration-color: var(--primary);
}
.breadcrumb span { color: var(--gray-700, #374151); }
.breadcrumb-sep {
    margin: 0 0.35rem;
    color: var(--gray-500, #6b7280);
}
/* Category Card */
.category-grid {
    --grid-columns: 4; /* Default, can be overridden by inline style */
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    gap: 1.5rem;
}
@media (max-width: 1200px) {
    .category-grid {
        grid-template-columns: repeat(min(var(--grid-columns), 3), minmax(0, 1fr));
    }
}
@media (max-width: 992px) {
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}
/* Categories Header */
.categories-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.categories-header .section-title {
    text-align: center;
    font-size: 2.25rem;
    margin-bottom: 0;
}
.categories-header .products-header {
    width: 100%;
    margin-bottom: 0;
}
.category-card {
    background: white;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    text-align: left;
    border: 1px solid var(--gray-200);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    overflow: hidden;
    min-width: 0; /* Prevent grid overflow */
}
.category-card:hover {
    border-color: var(--primary);
    background: var(--primary-50, #eff6ff);
}
/* Category card text-only mode (no images) */
.category-card.text-only {
    justify-content: center;
    text-align: center;
}
.category-card.text-only .category-info h3,
.category-card.text-only .category-card-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
}
/* Compact text-only grid: dense multi-column list, no card chrome.
   Uses CSS multi-column for column-major fill order
   (fills column 1 top-to-bottom, then column 2, then column 3). */
.category-grid--compact {
    display: block;
    columns: 3;
    column-gap: 1.5rem;
    gap: 0;
}
.category-grid--compact .category-card.text-only {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.25rem 0;
    justify-content: flex-start;
    text-align: left;
    transition: color 0.15s;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
.category-grid--compact .category-card.text-only:hover {
    background: transparent;
    color: var(--primary);
}
.category-grid--compact .category-card.text-only .category-info h3 {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--gray-700);
    /* Wrap long names to 2 lines (clamp inherited from .category-info h3) */
    overflow-wrap: anywhere;
}
.category-grid--compact .category-card.text-only:hover .category-info h3 {
    color: var(--primary);
}
@media (max-width: 992px) {
    .category-grid--compact {
        columns: 2;
    }
}
@media (max-width: 480px) {
    .category-grid--compact {
        columns: 2;
        column-gap: 1rem;
    }
}
.category-icon {
    width: 60px;
    height: 60px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 1.5rem;
}
.category-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}
.category-card p {
    display: none;
}
/* Category Image Support */
.category-image {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.category-card.has-image .category-image {
    width: 40px;
    height: 40px;
    min-width: 40px;
}
.category-image img.category-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}
.category-card:hover .category-image img.category-img {
    transform: scale(1.05);
}
/* Category placeholder icon (folder) */
.category-image svg {
    width: 24px;
    height: 24px;
    color: var(--primary);
}
.category-card:hover .category-image svg {
    color: var(--primary-dark);
}
.category-card.has-image .category-image {
    border-radius: 6px;
}
.category-info {
    min-width: 0;
    flex: 1;
}
.category-info h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.category-info p {
    display: none;
}
/* Product Card */
.product-grid {
    --grid-columns: 4; /* Default, can be overridden by inline style */
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: 1.5rem;
}
@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(min(var(--grid-columns), 3), 1fr);
    }
}
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}
.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    overflow: hidden;
    border-bottom: 1px solid var(--gray-200);
}
.product-image img:not(.product-image-placeholder) {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12px;
}
.product-image-primary {
    transition: opacity 0.3s ease;
}
.product-image-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.product-card:hover .product-image.has-hover-image .product-image-primary {
    opacity: 0;
}
.product-card:hover .product-image.has-hover-image .product-image-hover {
    opacity: 1;
}
.product-image svg,
.product-image-placeholder {
    width: 64px;
    height: 64px;
    opacity: 0.5;
}
.product-info {
    padding: 0.875rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-price {
    margin-top: auto;
}
.product-category {
    font-size: 0.75rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.product-sku {
    font-size: 0.75rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: none;
}
.product-name {
    font-size: 0.75rem;
    font-weight: 600;
    margin: 0.25rem 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: var(--product-name-lines, 7);
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.product-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
}
.product-min-order {
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
}
/* Product Badges */
.product-badges {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 10;
}
.discount-badge,
.new-badge,
.hot-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.discount-badge {
    background: #dc2626;
    color: white;
}
.new-badge {
    background: #007bc4;
    color: white;
}
.hot-badge {
    background: #f97316;
    color: white;
}
/* Sale Price Styling */
.product-price .sale-price {
    color: #dc2626;
    font-size: 1.1em;
}
.product-price .original-price {
    text-decoration: line-through;
    color: var(--gray-500);
    font-size: 0.85em;
    font-weight: 400;
    margin-left: 0.5rem;
}
.product-detail-price .sale-price {
    color: #dc2626;
}
.product-detail-price .original-price {
    text-decoration: line-through;
    color: var(--gray-500);
    font-size: 0.6em;
    font-weight: 400;
    margin-left: 0.5rem;
}
/* Quick Add to Cart Styles */
.product-card-wrapper {
    position: relative;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid transparent;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.product-card-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--gray-300);
}
.product-card-wrapper .product-card {
    box-shadow: none;
    border-radius: 0;
    transform: none;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-card-wrapper .product-card:hover {
    transform: none;
    box-shadow: none;
}
.quick-add-section {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
    background: var(--gray-50);
}
.quantity-selector {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    overflow: hidden;
    background: white;
}
.quantity-selector.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.qty-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 1.25rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-btn:hover {
    background: var(--gray-200);
}
.qty-btn:active {
    background: var(--gray-300);
}
.qty-input {
    width: 48px;
    height: 36px;
    border: none;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gray-900, #111827);
    background: white;
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.btn-add-to-cart,
.btn-select-variant,
.btn-inquiry {
    flex: 1;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-add-to-cart {
    background: var(--primary);
    color: white;
}
.btn-add-to-cart:hover {
    background: var(--primary-dark, #0068a6);
}
.btn-add-to-cart:active {
    transform: scale(0.98);
}
.btn-add-to-cart.loading {
    pointer-events: none;
    opacity: 0.7;
}
.btn-select-variant {
    background: var(--gray-700);
    color: white;
}
.btn-select-variant:hover {
    background: var(--gray-800);
}
.btn-out-of-stock {
    flex: 1;
    height: 36px;
    background: var(--gray-200);
    color: var(--gray-500);
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: not-allowed;
    white-space: nowrap;
}
.out-of-stock-badge {
    background: #6b7280;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}
/* Mobile responsive for quick add */
@media (max-width: 640px) {
    .quick-add-section {
        flex-direction: column;
        gap: 0.5rem;
    }
    .quantity-selector {
        width: 100%;
        justify-content: center;
    }
    .qty-btn {
        width: 48px;
        height: 36px;
    }
    .qty-input {
        flex: 1;
        max-width: 80px;
        height: 36px;
    }
    .btn-add-to-cart,
    .btn-select-variant,
    .btn-inquiry,
    .btn-out-of-stock {
        width: 100%;
        height: 40px;
    }
}
/* Product Detail Gallery Badge */
.product-gallery {
    position: relative;
}
.product-gallery-main-wrapper {
    position: relative;
}
.product-gallery-main-wrapper > .product-badges {
    top: 0.75rem;
    left: 0.75rem;
}
.product-gallery-main-wrapper > .product-badges .discount-badge,
.product-gallery-main-wrapper > .product-badges .new-badge,
.product-gallery-main-wrapper > .product-badges .hot-badge {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
}
@media (max-width: 768px) {
    .product-gallery-main-wrapper > .product-badges {
        left: 0.75rem;
        top: 0.75rem;
    }
}
/* Product Detail */
.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}
@media (max-width: 768px) {
    .product-detail { grid-template-columns: 1fr; }
}
/* Product gallery styles moved to template for better control */
.product-detail-info h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.product-detail-sku {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.product-detail-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 1rem;
    min-height: 2.5rem;
    line-height: 1.25;
}
.product-detail-desc {
    color: var(--gray-600);
    margin-bottom: 2rem;
}
.variant-select {
    margin-bottom: 1rem;
}
.variant-select label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.variant-select select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 1rem;
}
/* Filters */
.filters {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.filter-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.filter-row select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}
/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--gray-600);
}
.empty-state h3 {
    margin-bottom: 0.5rem;
    color: var(--gray-800);
}
/* "Not found" state: the page heading carries the message, so this block is
   only the explanation, the way out, and a suggestion strip. Layered on top of
   .empty-state, which already supplies the centering and vertical padding. */
.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}
.not-found-suggestions {
    margin-top: 2rem;
}
.not-found-suggestions-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-800);
    text-align: center;
    margin-bottom: 1.5rem;
}
/* Footer */
.footer {
    background: var(--gray-900);
    color: var(--gray-200);
    padding: 3rem 0 1.5rem;
    margin-top: 4rem;
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}
.footer .footer-title {
    color: white;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 1rem;
}
.footer a {
    color: var(--gray-200);
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
.footer a:hover { color: white; }
.footer-bottom {
    border-top: 1px solid #374151;
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
}
/* Mini Cart */
.cart-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.cart-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
    position: relative;
}
.cart-trigger:hover { color: var(--brand-orange); }
/* Anchor for the cart badge so it sits on the icon, not on the trailing text */
.cart-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.cart-text {
    white-space: nowrap;
}
.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--brand-orange);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}
.cart-badge:empty,
.cart-badge.hidden { display: none; }
/* Mini Cart Dropdown (Desktop) */
.minicart-dropdown {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    width: 420px;
    max-height: min(480px, calc(100vh - 100px));
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.minicart-dropdown.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.minicart-dropdown.pinned {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.minicart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--gray-200);
}
.minicart-header h3 {
    font-size: 1rem;
    color: var(--gray-900);
    margin: 0;
}
.minicart-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--gray-600);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}
.minicart-close:hover { color: var(--gray-900); }
.minicart-items {
    flex: 1;
    overflow-y: auto;
    max-height: 280px;
    padding-top: 0.5rem;
}
.minicart-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem 0.75rem 1.5rem;
    border-bottom: 1px solid var(--gray-100);
    align-items: start;
}
.minicart-item:last-child { border-bottom: none; }
.minicart-item-image {
    position: relative;
    width: 60px;
    height: 60px;
    background: var(--gray-100);
    border-radius: 8px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}
.minicart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.minicart-item-image svg {
    width: 24px;
    height: 24px;
    color: var(--gray-400);
}
.minicart-item-info {
    min-width: 0;
}
.minicart-item-name,
.minicart-dropdown .minicart-item-name,
.minicart-drawer .minicart-item-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    color: #111 !important;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.minicart-item-name:hover,
.minicart-dropdown .minicart-item-name:hover,
.minicart-drawer .minicart-item-name:hover {
    color: #333 !important;
    text-decoration: underline;
}
.minicart-item-name:visited,
.minicart-dropdown .minicart-item-name:visited,
.minicart-drawer .minicart-item-name:visited {
    color: #111 !important;
}
.minicart-item-variant {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-top: 0.25rem;
    margin-bottom: 0.375rem;
    padding: 0.2rem 0.5rem;
    background: var(--gray-100);
    border-radius: 4px;
    display: inline-block;
}
.minicart-item-image a {
    display: block;
}
.minicart-item-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.minicart-item-price {
    font-size: 0.85rem;
    color: var(--gray-600);
}
.minicart-item-total {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
}
.minicart-item-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.minicart-qty-btn {
    width: 24px;
    height: 24px;
    border: 1px solid var(--gray-200);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: var(--gray-600);
    transition: all 0.2s;
}
.minicart-qty-btn:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}
.minicart-qty-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.minicart-qty-value {
    font-size: 0.9rem;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    color: var(--gray-800);
}
.minicart-item-remove {
    position: absolute;
    top: -21px;
    left: -21px;
    width: 18px;
    height: 18px;
    padding: 15px;
    background: #dc2626;
    background-clip: content-box;
    border: none;
    border-radius: 50%;
    box-sizing: content-box;
    color: white;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 1;
}
.minicart-item-remove:hover {
    background-color: #b91c1c;
    transform: scale(1.1);
}
.minicart-footer {
    border-top: 1px solid var(--gray-200);
    padding: 1rem 1.25rem;
}
.minicart-subtotal {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 1rem;
}
.minicart-subtotal-label { color: var(--gray-600); }
.minicart-subtotal-value {
    font-weight: 700;
    color: var(--gray-900);
}
.minicart-actions {
    display: flex;
    gap: 0.75rem;
}
.minicart-actions .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem;
    min-height: 52px;
}
.minicart-actions .btn-outline {
    background: white;
    border: 2px solid var(--primary);
    color: var(--primary);
}
.minicart-actions .btn-outline:hover {
    background: var(--primary);
    color: white;
}
.minicart-actions a {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}
/* Empty mini cart */
.minicart-empty {
    padding: 3rem 1.25rem;
    text-align: center;
    color: var(--gray-600);
}
.minicart-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    color: var(--gray-300);
}
.minicart-empty p {
    margin-bottom: 1rem;
}
/* Loading state */
.minicart-loading {
    padding: 3rem 1.25rem;
    text-align: center;
}
.minicart-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Mobile Mini Cart (Drawer) */
.minicart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
.minicart-overlay.open {
    opacity: 1;
    visibility: visible;
}
.minicart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 400px;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height - accounts for mobile browser chrome */
    max-height: -webkit-fill-available; /* iOS Safari fallback */
    background: white;
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}
.minicart-drawer.open {
    transform: translateX(0);
}
.minicart-drawer .minicart-header {
    flex-shrink: 0;
}
.minicart-drawer .minicart-items {
    flex: 1;
    max-height: none;
    min-height: 0; /* Allow flex item to shrink below content size */
    overflow-y: auto;
}
.minicart-drawer .minicart-footer {
    flex-shrink: 0;
    background: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
}
/* Responsive */
@media (max-width: 767px) {
    .minicart-dropdown {
        display: none !important;
    }
}
@media (min-width: 768px) {
    /* Allow overlay and drawer to be shown on desktop when explicitly opened */
    .minicart-overlay:not(.open),
    .minicart-drawer:not(.open) {
        display: none;
    }
    .minicart-overlay.open,
    .minicart-drawer.open {
        display: block;
    }
    .minicart-drawer.open {
        display: flex;
    }
}
/* ============================================
   Responsive Typography & Spacing
   ============================================ */
/* Tablet Adjustments */
@media (max-width: 992px) {
    .section {
        padding: 3rem 0;
    }
    .section-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .footer {
        padding: 2rem 0 1rem;
        margin-top: 3rem;
    }
    .footer-content {
        gap: 1.5rem;
    }
}
/* Mobile Adjustments */
@media (max-width: 768px) {
    body {
        font-size: 0.95rem;
    }
    .container {
        padding: 0 1rem;
    }
    .section {
        padding: 2rem 0;
    }
    .section-title {
        font-size: 1.35rem;
        margin-bottom: 1.25rem;
    }
    /* Product card mobile */
    .product-card {
        border-radius: 8px;
    }
    .product-info {
        padding: 1rem;
    }
    .product-name {
        font-size: 0.95rem;
    }
    .product-price {
        font-size: 1.1rem;
    }
    .product-min-order {
        font-size: 0.75rem;
    }
    /* Category card mobile */
    .category-card h3,
    .category-info h3 {
        font-size: 0.95rem;
    }
    /* Footer mobile */
    .footer {
        padding: 2rem 0 1rem;
        margin-top: 2rem;
    }
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .footer .footer-title {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
    }
    .footer a {
        font-size: 0.85rem;
        margin-bottom: 0.4rem;
    }
    .footer-bottom {
        padding-top: 1rem;
        font-size: 0.8rem;
    }
    /* Buttons mobile */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    .btn-primary,
    .btn-outline {
        padding: 0.6rem 1.25rem;
    }
}
/* Small Mobile Adjustments */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }
    .section {
        padding: 1.5rem 0;
    }
    .section-title {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    .product-info {
        padding: 0.75rem;
    }
    .product-name {
        font-size: 0.9rem;
    }
    .product-price {
        font-size: 1rem;
    }
    .category-card {
        padding: 0.5rem 0.6rem;
        gap: 0.5rem;
    }
    .category-image {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
    .category-card.has-image .category-image {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
    .category-image svg {
        width: 20px;
        height: 20px;
    }
    .category-info h3 {
        font-size: 0.8rem;
    }
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer .footer-title {
        margin-bottom: 0.5rem;
    }
}
/* ==========================================================================
   Utility Classes (CSP-compliant replacements for inline styles)
   ========================================================================== */
/* Display */
.hidden { display: none !important; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
/* Overflow */
.overflow-hidden { overflow: hidden; }
/* Flexbox */
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
/* Gap */
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 2rem; }
/* Text alignment */
.text-center { text-align: center; }
.text-right { text-align: right; }
/* Font */
.font-normal { font-weight: normal; }
.font-semibold { font-weight: 600; }
.text-sm { font-size: 0.85rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.25rem; }
.text-xl { font-size: 1.5rem; }
/* Colors */
.text-gray-500 { color: var(--gray-500, #6b7280); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700, #374151); }
/* Spacing - Margin */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-6 { margin-top: 3rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.ml-2 { margin-left: 0.5rem; }
/* Spacing - Padding */
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
/* Width */
.w-auto { width: auto; }
.w-full { width: 100%; }
/* Grid */
.grid-col-full { grid-column: 1 / -1; }
/* Opacity */
.opacity-30 { opacity: 0.3; }
/* Cursor */
.cursor-pointer { cursor: pointer; }
/* Image */
.img-contain { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Line height */
.leading-relaxed { line-height: 1.8; }
/* Status colors */
.text-success { color: #10b981; }
.text-warning { color: #f59e0b; }
/* Specific component styles for CSP compliance */
.section-title-centered { text-align: center; }
.qty-form-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.remember-me-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.remember-me-group input {
    width: auto;
    margin: 0;
}
.remember-me-group label {
    margin: 0;
    font-weight: normal;
    color: var(--gray-700, #374151);
}
.optional-label {
    font-weight: normal;
    color: var(--gray-600);
}
.billing-fields-container {
    /* visibility controlled by .hidden class via JS toggle */
}
.billing-same-label {
    margin: 0;
    cursor: pointer;
}
.btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
}
.btn-md {
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
}
.btn-lg {
    padding: 1rem 2rem;
}
.product-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}
/* PDP Action Row - Single line for quantity + add to cart + wishlist */
.pdp-action-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0;
}
.pdp-action-row .variant-select {
    margin-bottom: 0;
    flex-shrink: 0;
}
.pdp-action-row .variant-input {
    width: 80px !important;
    padding: 0.625rem !important;
    flex-shrink: 0;
    text-align: center;
}
.pdp-action-row .btn {
    flex-shrink: 0;
}
.pdp-action-row .btn-primary {
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
    height: 44px;
}
.pdp-action-row .btn-secondary {
    padding: 0.625rem 1.25rem;
    font-size: 0.9rem;
    height: 44px;
}
/* Force wishlist section onto its own line to prevent CLS during add-to-cart */
.pdp-action-row #wishlist-detail-section {
    flex-basis: 100%;
}
/* Mobile/tablet-portrait: collapse quantity + add-to-cart + wishlist onto one line, icon-only buttons */
@media (max-width: 820px) {
    .pdp-action-row #wishlist-detail-section {
        flex-basis: auto !important;
        flex-shrink: 0 !important;
    }
    .pdp-action-row .btn-primary {
        padding: 0 !important;
        width: 44px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .pdp-action-row .btn-primary .btn-label {
        display: none !important;
    }
    .pdp-action-row .wishlist-btn-detail {
        padding: 0 !important;
        width: 44px !important;
        height: 44px !important;
        justify-content: center !important;
        gap: 0 !important;
    }
    .pdp-action-row .wishlist-btn-detail span {
        display: none !important;
    }
}
.product-description-section {
    margin-top: 3rem;
}
.product-description-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}
.product-description-content {
    color: var(--gray-600);
    line-height: 1.8;
}
.subcategories-section {
    margin-bottom: 3rem;
}
.subcategories-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}
.order-details-grid-section {
    margin-top: 1.5rem;
}
.order-placed-date {
    color: var(--gray-600);
    margin-top: 0.25rem;
}
.checkout-note {
    text-align: center;
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-top: 1rem;
}
.items-ordered-title {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.variant-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
}
.account-info-readonly {
    color: var(--gray-600);
    margin-bottom: 1rem;
}
.account-note {
    color: var(--gray-600);
    font-size: 0.85rem;
    margin-top: 1rem;
}
.po-number-small {
    color: var(--gray-500, #6b7280);
}
/* Products Header */
.products-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    background: var(--gray-50);
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
}
@media (min-width: 768px) {
    .products-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .products-header .subcategories-title {
        margin-bottom: 0;
    }
}
/* Storefront Pagination */
.storefront-pagination {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: white;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
@media (min-width: 640px) {
    .storefront-pagination {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}
.pagination-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.pagination-per-page {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--gray-600);
    white-space: nowrap;
}
.pagination-per-page label {
    margin: 0;
}
.pagination-per-page select {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 0.9rem;
    background: white;
    cursor: pointer;
    min-width: 70px;
}
.pagination-per-page select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.pagination-total {
    font-size: 0.9rem;
    color: var(--gray-600);
}
.pagination-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pagination-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--gray-700);
    background: white;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s;
}
.pagination-btn:hover:not(.disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(37, 99, 235, 0.05);
}
.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.pagination-btn svg {
    flex-shrink: 0;
}
.pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.pagination-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--gray-700);
    text-decoration: none;
    transition: all 0.2s;
}
.pagination-page:hover:not(.active) {
    background: var(--gray-100);
}
.pagination-page.active {
    background: var(--primary);
    color: white;
    font-weight: 600;
}
.pagination-ellipsis {
    padding: 0 0.25rem;
    color: var(--gray-400);
}
.pagination-bottom {
    margin-top: 2rem;
}
@media (max-width: 480px) {
    .pagination-btn span {
        display: none;
    }
    .pagination-btn {
        padding: 0.5rem;
    }
    .pagination-pages {
        display: none;
    }
}
@media (max-width: 480px) {
    .sub-pagination .pagination-pages {
        display: flex;
    }
    .sub-pagination .pagination-page {
        min-width: 28px;
        height: 28px;
        font-size: 0.8rem;
        padding: 0;
    }
}
/* ============================================
   SPECIAL PAGES: Notification Bar & Promo Banner
   ============================================ */
/* Notification Bar */
.notification-bar {
    position: relative;
    padding: 12px 48px 12px 16px;
    text-align: center;
    font-size: 14px;
    line-height: 1.5;
    z-index: 9998;
}
.notification-bar-content {
    display: inline;
}
.notification-bar-content a {
    color: inherit;
    text-decoration: underline;
}
.notification-bar-content p {
    margin: 0;
    display: inline;
}
.notification-bar-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: inherit;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    line-height: 1;
    padding: 4px 8px;
}
.notification-bar-close:hover {
    opacity: 1;
}
/* Adjust body when notification bar is visible */
body.has-notification-bar .dev-mode-active .minicart-drawer,
body.has-notification-bar .dev-mode-active .minicart-overlay {
    top: calc(42px + var(--notification-bar-height, 44px));
}
/* Promotional Banner Modal */
.promo-banner-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: promoBannerFadeIn 0.3s ease;
}
@keyframes promoBannerFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.promo-banner-modal {
    background: white;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: promoBannerSlideUp 0.3s ease;
}
@keyframes promoBannerSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.promo-banner-content {
    padding: 32px;
}
.promo-banner-content img {
    max-width: 100%;
    height: auto;
}
.promo-banner-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 1;
}
.promo-banner-close:hover {
    background: rgba(0, 0, 0, 0.2);
}
@media (max-width: 480px) {
    .promo-banner-overlay {
        padding: 10px;
    }
    .promo-banner-modal {
        max-height: 90vh;
    }
    .promo-banner-content {
        padding: 24px 16px;
    }
}
/* ============================================
   Mobile Menu Redesign - Tab + Accordion
   ============================================ */
/* Mobile Menu Header (title + close button) */
.mobile-menu-header {
    display: none;
}
@media (max-width: 768px) {
    .mobile-menu-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid var(--gray-200);
    }
    .mobile-menu-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--gray-900);
        letter-spacing: 0.01em;
    }
    .mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: -0.5rem;
        background: transparent;
        border: none;
        border-radius: 8px;
        color: var(--gray-700);
        cursor: pointer;
        transition: background-color 0.15s, color 0.15s;
    }
    .mobile-menu-close:hover,
    .mobile-menu-close:focus-visible {
        background: var(--gray-100);
        color: var(--gray-900);
    }
}
/* Mobile Menu Search (inside menu) */
.mobile-menu-search {
    display: none;
}
@media (max-width: 768px) {
    .mobile-menu-search {
        display: block;
        width: 100%;
        padding: 0 0 1rem;
        border-bottom: 1px solid var(--gray-200);
        margin-bottom: 1rem;
    }
    .mobile-menu-search .search-form {
        display: flex;
        width: 100%;
        background: var(--gray-100);
        border: 1px solid var(--gray-200);
        border-radius: 8px;
        overflow: hidden;
    }
    .mobile-menu-search .search-input {
        flex: 1;
        min-width: 0; /* allow input to shrink so the search button is never clipped on narrow viewports */
        padding: 0.75rem 1rem;
        background: transparent;
        border: none;
        color: var(--gray-800);
        font-size: 1rem;
    }
    .mobile-menu-search .search-input::placeholder {
        color: var(--gray-400);
    }
    .mobile-menu-search .search-btn {
        padding: 0.75rem 1rem;
        flex-shrink: 0; /* keep the button at full width even when space is tight */
        background: var(--primary);
        border: none;
        color: white;
    }
}
/* Mobile Menu Tabs */
.mobile-menu-tabs {
    display: none;
}
@media (max-width: 768px) {
    .mobile-menu-tabs {
        display: flex;
        width: 100%;
        border-bottom: 1px solid var(--gray-200);
        margin-bottom: 1rem;
    }
    .mobile-menu-tabs .tab-btn {
        flex: 1;
        padding: 0.875rem 1rem;
        background: transparent;
        border: none;
        color: var(--gray-500);
        font-weight: 500;
        font-size: 0.9375rem;
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }
    .mobile-menu-tabs .tab-btn:hover {
        color: var(--gray-700);
    }
    .mobile-menu-tabs .tab-btn.active {
        color: var(--gray-900);
        border-bottom-color: var(--primary);
    }
}
/* Tab Content */
.tab-content {
    display: none;
    width: 100%;
}
.tab-content.active {
    display: block;
}
/* Category Accordion */
.category-accordion {
    display: flex;
    flex-direction: column;
}
.accordion-item {
    border-bottom: 1px solid var(--gray-200);
}
.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.accordion-header .category-link {
    flex: 1;
    padding: 0.875rem 0;
    color: var(--gray-800);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s;
}
.accordion-header .category-link:hover {
    color: var(--primary);
}
.accordion-toggle {
    padding: 0.875rem;
    background: transparent;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.accordion-toggle:hover {
    color: var(--gray-800);
}
.accordion-toggle .chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}
.accordion-toggle[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
}
.accordion-children {
    padding-left: 1rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}
.accordion-item.expanded > .accordion-children {
    opacity: 1;
}
/* Nested levels indentation */
.accordion-children .accordion-item {
    border-bottom-color: var(--gray-100);
}
.accordion-children .category-link {
    font-size: 0.875rem;
    color: var(--gray-600);
}
.accordion-children .accordion-children .category-link {
    font-size: 0.8125rem;
    color: var(--gray-500);
}
/* Loading state */
.category-accordion .loading-spinner {
    padding: 2rem;
    text-align: center;
    color: var(--gray-400);
}
/* Accordion loading indicator */
.accordion-children.loading::after {
    content: '';
    display: block;
    padding: 0.75rem;
    text-align: center;
    color: var(--gray-400);
}
/* Mobile menu New / Hot / Sale shortcuts — mirror desktop horizontal nav */
.mobile-menu-special-links {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gray-200);
}
.mobile-menu-special-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--gray-200);
    transition: color 0.2s;
}
.mobile-menu-special-link:last-child { border-bottom: none; }
.mobile-menu-special-link--new  { color: #16a34a; }
.mobile-menu-special-link--hot  { color: #ea580c; }
.mobile-menu-special-link--sale { color: #dc2626; }
.mobile-menu-special-link:hover { opacity: 0.85; }
.mobile-menu-special-icon {
    font-size: 1rem;
    line-height: 1;
}
/* Hide desktop menu links on mobile when tabs are active */
@media (max-width: 768px) {
    .nav > a:not(.category-link):not(.nav-link) {
        display: none;
    }
    /* Tab menu links - more spacious */
    #tab-menu > a {
        display: block;
        width: 100%;
        padding: 1rem 0;
        border-bottom: 1px solid var(--gray-200);
        color: var(--gray-800);
        text-decoration: none;
        font-size: 1rem;
    }
    #tab-menu > a:hover {
        color: var(--primary);
    }
    /* Switchers inside tab-menu */
    #tab-menu .lang-switcher,
    #tab-menu .currency-switcher {
        width: 100%;
        padding: 1rem 0;
        border-bottom: 1px solid var(--gray-200);
    }
    #tab-menu .lang-btn,
    #tab-menu .currency-btn {
        width: 100%;
        font-size: 1rem;
        justify-content: flex-start;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: var(--gray-50);
        color: var(--gray-800);
        border: 1px solid var(--gray-200);
        border-radius: 10px;
        padding: 0.75rem 1rem;
        box-shadow: none;
    }
    #tab-menu .lang-btn:hover,
    #tab-menu .currency-btn:hover {
        background: var(--gray-100);
        border-color: var(--gray-300);
    }
    #tab-menu .lang-dropdown,
    #tab-menu .currency-dropdown {
        background: white;
        border: 1px solid var(--gray-200);
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-top: 0.5rem;
        overflow: hidden;
    }
    #tab-menu .lang-option,
    #tab-menu .currency-option {
        color: var(--gray-800) !important;
    }
    #tab-menu .lang-option:hover,
    #tab-menu .currency-option:hover {
        background: var(--gray-100);
    }
    /* Align flag and currency symbol */
    #tab-menu .lang-flag,
    #tab-menu .currency-symbol {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        min-width: 1.5rem;
        text-align: center;
    }
    /* Mobile user area inside tab-menu */
    #tab-menu .mobile-user-area {
        width: 100%;
        padding-top: 1rem;
        margin-top: 0.5rem;
        border-top: 1px solid var(--gray-200);
    }
    #tab-menu .mobile-user-area .nav-link {
        display: flex;
        width: 100%;
        padding: 1rem 0;
        font-size: 1rem;
        color: var(--gray-700);
        border-bottom: 1px solid var(--gray-200);
    }
    #tab-menu .mobile-user-area .btn {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
        margin-top: 0.75rem;
    }
}
/* ============================================
   SIDEBAR LAYOUT STYLES (v5)
   ============================================ */
/* === Topbar Announcement === */
.topbar-announcement {
  background: #16a34a;
  color: white;
  text-align: center;
  padding: 8px 0;
  font-size: 13px;
}
/* Announcement bar size variants */
.topbar-announcement.size-small {
  padding: 8px 0;
  font-size: 13px;
}
.topbar-announcement.size-medium {
  padding: 12px 0;
  font-size: 15px;
}
.topbar-announcement.size-large {
  padding: 16px 0;
  font-size: 17px;
}
.topbar-announcement .announcement-link {
  color: white;
  text-decoration: underline;
}
.topbar-announcement .announcement-link:hover {
  opacity: 0.9;
}
.topbar-announcement .announcement-text {
  display: inline-block;
}
/* === Topbar === */
.topbar {
  background: var(--gray-900);
  color: var(--gray-300);
  font-size: 0.8rem;
  padding: 0.4rem 0;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.topbar-item {
  color: var(--gray-300);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}
.topbar-item:hover {
  color: white;
}
.topbar-divider {
  color: var(--gray-600);
  margin: 0 0.25rem;
}
.topbar a {
  color: var(--gray-300);
  transition: color 0.2s;
}
.topbar a:hover {
  color: white;
}
/* === Horizontal Nav === */
.horizontal-nav {
  background: var(--primary);
}
.nav-scroll {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav-scroll::-webkit-scrollbar {
  display: none;
}
.nav-item {
  padding: 0.75rem 1.25rem;
  color: white;
  white-space: nowrap;
  font-weight: 500;
  transition: background-color 0.2s;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
/* === Mobile Categories (hidden on desktop) === */
.mobile-categories {
  display: none;
}
/* === Homepage Slider (Full Width Above Sidebar) === */
.homepage-slider-wrapper {
  padding: 1rem 0;
}
.homepage-slider-wrapper .slider {
  border-radius: 12px;
  overflow: hidden;
}
.homepage-slider-wrapper .slider--full {
  width: 100%;
  margin-left: 0;
}
/* === Sidebar Layout === */
.homepage-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 1.5rem;
  padding: 1rem 0 1.5rem;
}
.homepage-layout > .main-content {
  min-width: 0;
}
/* === Sidebar Categories === */
/* Sticky top matches the sidebar's natural document position so it stays
   visually pinned from scroll=0 — no Phase-1 movement before the threshold. */
.sidebar-categories {
  background: white;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: calc(125px + 1rem);  /* header (logo + search + menu rows) + spacing */
  height: fit-content;
  max-height: calc(100vh - 125px - 2rem);
  overflow-y: hidden;
}
/* When the contact subbar is present above the sticky header, the sidebar's
   natural top sits ~44px lower; bumping `top` to match avoids the scroll-jitter
   before sticky activates, keeping the sidebar visually fixed throughout. */
body:has(.header-subbar) .sidebar-categories {
  top: calc(125px + 1rem + 44px);
  max-height: calc(100vh - 125px - 2rem - 44px);
}
.sidebar-categories.has-expanded {
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar-all-categories {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  min-height: 44px;
  background: var(--brand-orange);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  transition: background 0.2s;
}
.sidebar-all-categories:hover {
  background: var(--brand-orange-dark);
  /* restated: the style_2/style_3 skins add a blanket a:hover whose
     (0,1,1) outranks this class, and brand-on-brand-orange is unreadable */
  color: #fff;
}
.sidebar-all-categories-title {
  flex: 1;
}
.sidebar-all-categories-arrow {
  opacity: 0.7;
}
.category-search {
  padding: 0.75rem;
  border-bottom: 1px solid var(--gray-200);
}
.category-search input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 0.875rem;
}
.category-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.category-list {
  display: flex;
  flex-direction: column;
}
.category-item {
  padding: 0.625rem 0.75rem;
  color: var(--gray-700);
  border-radius: 6px;
  transition: all 0.2s;
  font-size: 0.9rem;
}
.category-item:hover {
  background: var(--gray-100);
  color: var(--primary);
}
/* === Category Accordion === */
.category-accordion {
  min-height: 200px;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.category-skeleton {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.category-skeleton .skeleton-line {
  height: 44px;
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-bottom: 1px solid var(--gray-200);
}
.category-skeleton .skeleton-line:last-child {
  border-bottom: none;
}
.category-accordion-item {
  position: relative;
}
/* Root level items (depth 0) */
.category-accordion-item[data-depth="0"] {
  border-bottom: 1px solid var(--gray-200);
}
.category-accordion-item[data-depth="0"]:last-child {
  border-bottom: none;
}
.category-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}
/* Root level header styling */
.category-accordion-item[data-depth="0"] > .category-accordion-header {
  background: var(--primary);
}
.category-accordion-item[data-depth="0"] > .category-accordion-header .category-accordion-link {
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
}
.category-accordion-item[data-depth="0"] > .category-accordion-header .category-toggle {
  color: white;
}
/* Collapsed root items - lighter background */
.category-accordion-item[data-depth="0"]:not(.expanded) > .category-accordion-header {
  background: white;
}
.category-accordion-item[data-depth="0"]:not(.expanded) > .category-accordion-header .category-accordion-link {
  color: var(--gray-800);
}
.category-accordion-item[data-depth="0"]:not(.expanded) > .category-accordion-header .category-toggle {
  color: var(--gray-500);
}
.category-accordion-item[data-depth="0"]:not(.expanded) > .category-accordion-header:hover {
  background: var(--gray-50);
}
/* Sub-level items (depth 1+) */
.category-accordion-item[data-depth="1"] > .category-accordion-header,
.category-accordion-item[data-depth="2"] > .category-accordion-header,
.category-accordion-item[data-depth="3"] > .category-accordion-header,
.category-accordion-item[data-depth="4"] > .category-accordion-header {
  background: white;
  border-bottom: 1px solid var(--gray-100);
}
/* Expanded sub-level items - same blue background as root */
.category-accordion-item[data-depth="1"].expanded > .category-accordion-header,
.category-accordion-item[data-depth="2"].expanded > .category-accordion-header,
.category-accordion-item[data-depth="3"].expanded > .category-accordion-header,
.category-accordion-item[data-depth="4"].expanded > .category-accordion-header {
  background: var(--primary);
}
.category-accordion-item[data-depth="1"].expanded > .category-accordion-header .category-accordion-link,
.category-accordion-item[data-depth="2"].expanded > .category-accordion-header .category-accordion-link,
.category-accordion-item[data-depth="3"].expanded > .category-accordion-header .category-accordion-link,
.category-accordion-item[data-depth="4"].expanded > .category-accordion-header .category-accordion-link {
  color: white;
  font-weight: 600;
}
.category-accordion-item[data-depth="1"].expanded > .category-accordion-header .category-toggle,
.category-accordion-item[data-depth="2"].expanded > .category-accordion-header .category-toggle,
.category-accordion-item[data-depth="3"].expanded > .category-accordion-header .category-toggle,
.category-accordion-item[data-depth="4"].expanded > .category-accordion-header .category-toggle {
  color: white;
}
.category-accordion-item[data-depth="1"]:not(.expanded) > .category-accordion-header:hover,
.category-accordion-item[data-depth="2"]:not(.expanded) > .category-accordion-header:hover,
.category-accordion-item[data-depth="3"]:not(.expanded) > .category-accordion-header:hover,
.category-accordion-item[data-depth="4"]:not(.expanded) > .category-accordion-header:hover {
  background: var(--gray-50);
}
/* Toggle button - now on right side with +/- */
.category-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  cursor: pointer;
  color: var(--gray-500);
  transition: background-color 0.15s ease;
  font-size: 1.25rem;
  font-weight: 300;
  flex-shrink: 0;
  order: 2; /* Move to right */
}
.category-toggle:hover {
  color: var(--gray-700);
  background: rgba(0, 0, 0, 0.1);
}
.category-toggle-spacer {
  display: none; /* Hide spacer since toggle is on right */
}
.category-accordion-link {
  flex: 1;
  color: var(--gray-700);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.15s;
  word-break: break-word;
  order: 1; /* Keep link on left */
}
.category-accordion-link:hover {
  color: var(--primary);
}
.category-accordion-link.active {
  color: var(--primary);
  font-weight: 600;
}
/* Current category (not expanded) - light highlight */
.category-accordion-item.current-category:not(.expanded) > .category-accordion-header {
  background: var(--primary-light, #e0e7ff);
}
/* Current category (expanded) - blue background like other expanded items */
.category-accordion-item.current-category.expanded > .category-accordion-header {
  background: var(--primary);
}
.category-accordion-item.current-category.expanded > .category-accordion-header .category-accordion-link {
  color: white;
  font-weight: 600;
}
.category-accordion-item.current-category.expanded > .category-accordion-header .category-toggle {
  color: white;
}
.category-accordion-item.search-match > .category-accordion-header .category-accordion-link {
  color: var(--primary);
  font-weight: 500;
}
/* Depth-0 expanded paints the header --primary; without this the
   .search-match rule above would also paint the label --primary, hiding it. */
.category-accordion-item[data-depth="0"].expanded.search-match > .category-accordion-header .category-accordion-link {
  color: white;
}
/* Children container - animated accordion (max-height set by JS via scrollHeight) */
.category-accordion-children {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
.category-accordion-item.expanded > .category-accordion-children {
  opacity: 1;
}
/* Leaf items (no children) - simpler style */
.category-accordion-item:not(.has-children) > .category-accordion-header {
  padding-left: 1.5rem;
}
.category-accordion-item:not(.has-children) > .category-accordion-header .category-accordion-link {
  font-size: 0.8125rem;
  color: var(--gray-600);
}
/* Depth-based left padding for hierarchy */
.category-accordion-item[data-depth="1"] > .category-accordion-header { padding-left: 1.5rem; }
.category-accordion-item[data-depth="2"] > .category-accordion-header { padding-left: 2rem; }
.category-accordion-item[data-depth="3"] > .category-accordion-header { padding-left: 2.5rem; }
.category-accordion-item[data-depth="4"] > .category-accordion-header { padding-left: 3rem; }
/* Load error state */
.category-accordion .load-error {
  padding: 1rem;
  text-align: center;
  color: var(--gray-500);
  font-size: 0.875rem;
}
/* === Product Sections === */
.product-section {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gray-100);
}
.section-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.section-icon {
  font-size: 1.1em;
}
.view-all {
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 500;
}
.view-all:hover {
  text-decoration: underline;
}
/* === Skeleton Loading (CLS Prevention) === */
.product-grid {
  min-height: 320px;
}
.product-grid[data-loading="true"] {
  contain: layout;
}
.product-card-skeleton {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.skeleton-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}
.skeleton-title {
  height: 1rem;
  margin: 0.75rem 0.75rem 0.5rem;
  background: var(--gray-100);
  border-radius: 4px;
  animation: skeleton-shimmer 1.5s infinite;
}
.skeleton-price {
  height: 0.875rem;
  width: 60%;
  margin: 0 0.75rem 0.75rem;
  background: var(--gray-100);
  border-radius: 4px;
  animation: skeleton-shimmer 1.5s infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.load-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem;
  color: var(--gray-500);
  font-size: 0.9rem;
}
/* === Responsive === */
@media (max-width: 992px) {
  .homepage-layout {
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}
@media (max-width: 768px) {
  .topbar-left {
    display: none;
  }
  .horizontal-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-item {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
  .homepage-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 1rem;
  }
  /* Mobile slider - full width, and the slider's own ratio */
  .homepage-slider-wrapper {
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  .homepage-slider-wrapper .slider {
    border-radius: 0;
    width: 100%;
    max-width: 100%;
  }
  /* No mobile height override on purpose. The rule that used to sit here
     forced `aspect-ratio: 5/4` "for mobile banners", which only works for
     portrait-ish artwork. This shop runs the same wide banners as its source
     site (~2.5:1); `.slider__image` is `object-fit: cover`, so squeezing one
     into a 5/4 box throws away more than half the image *width* — on a 390px
     phone the headline and the call-to-action button were both outside the
     frame. Letting the base `.slider::before { padding-top: var(--slider-height) }`
     through keeps the whole banner visible, exactly as the source site does.
     Do not reintroduce a fixed mobile ratio here without checking what the
     active slider's artwork is shaped like. */
  /* Ensure main content doesn't overflow on mobile */
  .homepage-layout .main-content,
  .homepage-layout > main {
    width: 100%;
    min-width: 0;  /* Prevent grid blowout */
    overflow: hidden;  /* Clip any overflow */
  }
  .sidebar-categories {
    display: none;
  }
  .mobile-categories {
    display: flex !important;
    overflow-x: auto;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: white;
    border-bottom: 1px solid var(--gray-100);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobile-categories::-webkit-scrollbar {
    display: none;
  }
  .mobile-categories .category-chip {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    background: var(--gray-100);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--gray-700);
    white-space: nowrap;
  }
  .mobile-categories .category-chip:hover,
  .mobile-categories .category-chip.active {
    background: var(--primary);
    color: white;
  }
  .product-section {
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 0;
  }
  .section-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
  }
  .section-header h2 {
    font-size: 1.1rem;
  }
  .view-all {
    font-size: 0.8rem;
  }
  .product-section .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .product-grid {
    min-height: 280px;
  }
  /* Ensure product cards don't overflow on mobile */
  .product-card,
  .product-card-wrapper {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .product-info {
    padding: 0.875rem;
  }
  .product-name {
    font-size: 0.8rem;
    -webkit-line-clamp: 8;
  }
}
@media (max-width: 480px) {
  .topbar {
    padding: 0.3rem 0;
    font-size: 0.75rem;
  }
  .topbar-divider {
    margin: 0 0.15rem;
  }
  .product-section .product-grid {
    gap: 0.5rem;
  }
  .product-section {
    padding: 0.75rem;
  }
  .section-header h2 {
    font-size: 1rem;
  }
  .mobile-categories {
    padding: 0.5rem 0.75rem;
  }
  .mobile-categories .category-chip {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }
  /* Product card mobile optimization */
  .product-card,
  .product-card-wrapper {
    min-width: 0;
    max-width: 100%;
  }
  .product-info {
    padding: 0.75rem;
  }
  .product-name {
    font-size: 0.75rem;
    -webkit-line-clamp: 8;
    line-height: 1.3;
  }
  .product-sku,
  .product-category {
    font-size: 0.65rem;
  }
  .product-price {
    font-size: 1rem;
  }
  /* Quick add section on mobile */
  .quick-add-section {
    padding: 0.5rem;
    flex-direction: column;
    gap: 0.5rem;
  }
  .quantity-selector {
    width: 100%;
    justify-content: center;
  }
  .btn-add-to-cart {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.8rem;
  }
}
/* ============================================
   Contact Info Bar (Static)
   ============================================ */
.contact-info-bar {
  background: #ffffff;
  position: relative;
  z-index: 99;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  padding: 0.55rem 1rem;
}
.contact-info-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}
/* Contact Items */
.contact-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 1.2rem;
  color: #1f2937;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  position: relative;
  transition: color 0.25s ease;
  letter-spacing: 0.01em;
}
.contact-item:hover {
  color: #1f2937;
}
a.contact-item {
  cursor: pointer;
}
a.contact-item:hover {
  color: var(--primary, #007bc4);
}
/* Icon wrapper - subtle colored circle */
.contact-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f0f4ff;
  flex-shrink: 0;
  transition: background 0.25s ease, transform 0.2s ease;
}
a.contact-item:hover .contact-icon-wrap,
.contact-wechat:hover .contact-icon-wrap {
  transform: scale(1.08);
}
.contact-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #fff;
  transition: color 0.25s ease;
}
.contact-label {
  color: #9ca3af;
  font-weight: 400;
  font-size: 0.78rem;
}
.contact-value {
  font-weight: 600;
  color: #374151;
}
/* Divider - thin vertical line */
.contact-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 1.2rem;
  position: relative;
}
.contact-divider::before {
  content: '';
  width: 1px;
  height: 100%;
  background: #e5e7eb;
}
/* Branded badge colors (resting state) - white glyph on brand color */
.contact-wechat .contact-icon-wrap {
  background: #07c160;
}
.contact-whatsapp .contact-icon-wrap {
  background: #25d366;
}
.contact-phone .contact-icon-wrap {
  background: #007bc4;
}
.contact-email .contact-icon-wrap {
  background: #f59e0b;
}
/* Phone hover - deepen badge, glyph stays white */
.contact-phone:hover .contact-icon-wrap {
  background: #0068a6;
}
/* Email hover */
.contact-email:hover .contact-icon-wrap {
  background: #d97706;
}
.contact-email:hover .contact-value {
  color: #d97706;
}
/* WeChat */
.contact-wechat {
  cursor: pointer;
  position: relative;
}
.contact-wechat:hover .contact-icon-wrap {
  background: #06ad56;
}
/* WhatsApp hover */
.contact-whatsapp:hover .contact-icon-wrap {
  background: #1ebe5d;
}
.contact-whatsapp:hover .contact-value {
  color: #1ebe5d;
}
/* WeChat QR Dropdown */
.wechat-qr-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.contact-wechat:hover .wechat-qr-dropdown,
.contact-wechat:focus-within .wechat-qr-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0.35s;
}
.wechat-qr-content {
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  text-align: center;
  margin-top: 0.6rem;
  position: relative;
  border: 2px solid #e5e7eb;
}
.wechat-qr-content::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #ffffff;
  filter: drop-shadow(0 -1px 0 #e5e7eb);
}
.wechat-qr-image {
  width: 200px;
  background: var(--gray-100, #f3f4f6);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}
.wechat-qr-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
.qr-placeholder {
  color: var(--gray-400, #9ca3af);
  font-size: 0.8rem;
  font-weight: 500;
}
.wechat-qr-hint {
  color: #6b7280;
  font-size: 0.75rem;
  margin: 0;
  font-weight: 500;
}
/* Responsive: Tablet */
@media (max-width: 768px) {
  .contact-info-bar {
    padding: 0.4rem 0.5rem;
  }
  .contact-info-inner {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.3rem 1.5rem;
    justify-content: center;
    justify-items: start;
    padding-left: 0;
  }
  .contact-item {
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    gap: 0.35rem;
  }
  .contact-label {
    display: none;
  }
  .contact-icon-wrap {
    width: 24px;
    height: 24px;
  }
  .contact-icon {
    width: 12px;
    height: 12px;
  }
  .contact-divider {
    display: none;
  }
  .wechat-qr-image {
    width: 170px;
  }
}
/* Responsive: Small mobile */
@media (max-width: 480px) {
  .contact-info-bar {
    padding: 0.35rem 0.25rem;
  }
  .contact-info-inner {
    gap: 0;
  }
  .contact-item {
    padding: 0.2rem 0.4rem;
    font-size: 0.72rem;
  }
  .contact-label {
    display: none;
  }
  .contact-divider {
    width: 0.5rem;
  }
  .contact-value {
    font-size: 0.7rem;
  }
}
/* ============================================
   Mobile menu drawer contact info
   Parent .nav drawer is itself mobile-only, so these rules only render on mobile.
   Vertical layout overrides desktop/grid contact-info-inner styling.
   ============================================ */
.mobile-menu-contact {
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}
.mobile-menu-contact .contact-info-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    grid-template-columns: none;
    max-width: none;
    margin: 0;
    padding: 0;
}
.mobile-menu-contact .contact-item {
    padding: 0.6rem 0;
    width: 100%;
    font-size: 0.85rem;
    white-space: normal;
}
.mobile-menu-contact .contact-divider {
    display: none;
}
.mobile-menu-contact .contact-label {
    display: inline;
}
.mobile-menu-contact .wechat-qr-dropdown {
    display: none;
}
/* Product Sort Controls */
.sort-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sort-control label {
    font-size: 0.875rem;
    color: var(--gray-600);
    white-space: nowrap;
}
.sort-select {
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
}
.sort-select:hover {
    border-color: var(--gray-400);
}
.sort-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.products-header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
    flex: 1;
    justify-content: space-between;
}
/* Hide text labels — compact controls for all languages */
.products-header-controls .pagination-per-page label,
.products-header-controls .pagination-per-page .per-page-suffix {
    display: none;
}
/* Hide Previous/Next text, keep only arrow icons */
.products-header-controls .pagination-btn span {
    display: none;
}
/* Hide verbose "Showing X-Y of Z" in top toolbar — keep in bottom pagination */
.products-header-controls .pagination-total {
    display: none;
}
/* Flatten pagination when inside products-header */
.products-header-controls .storefront-pagination {
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 0.75rem;
    flex-direction: row;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}
@media (max-width: 480px) {
    .products-header-controls {
        gap: 0.25rem;
    }
    .products-header-controls .sort-select,
    .products-header-controls .pagination-per-page select {
        font-size: 0.8rem;
        padding: 0.35rem 1.5rem 0.35rem 0.5rem;
        min-width: unset;
    }
    .products-header-controls .storefront-pagination {
        gap: 0.25rem;
    }
    /* Hide prev/next arrows in top toolbar on mobile — bottom pagination is sufficient */
    .products-header-controls .pagination-nav {
        display: none;
    }
}
/* Price-gated sections: invisible but layout-preserving (reduces CLS for logged-in users) */
.price-gated {
    visibility: hidden;
    pointer-events: none;
}
/* Authenticated: reveal price-gated sections (body class set by inline user-state script) */
body.price-authed .price-gated {
    visibility: visible;
    pointer-events: auto;
}
/* Guest: show controls as disabled (body class set by inline user-state script) */
body.price-guest .price-gated {
    visibility: visible;
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
}
/* Legacy collapse: kept for price-loader.js backwards compatibility */
.price-gated-collapse {
    display: none !important;
}
/* Legacy disabled: kept for price-loader.js backwards compatibility */
.price-gated-disabled {
    visibility: visible;
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
}
/* ==========================================================================
   Price Loader - Hide price for guest users
   ========================================================================== */
.price-placeholder .price-skeleton {
    display: inline-block;
    width: 120px;
    height: 1.2em;
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    vertical-align: middle;
}
/* Detail page price skeleton — taller to match multi-line tax price */
.product-detail-price .price-skeleton {
    width: 200px;
    height: 1.8em;
}
@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.price-placeholder.price-loaded .price-skeleton {
    display: none;
}
.login-to-view-price {
    color: var(--primary);
    font-size: 0.85em;
    text-decoration: underline;
    cursor: pointer;
}
.login-to-view-price:hover {
    color: var(--primary-dark, var(--primary));
    text-decoration: none;
}
/* ============================================================
   STYLE 3 SKIN
   ------------------------------------------------------------
   Overrides that turn the style_1 base above into the
   source shop's Woodmart look. Kept in one appended block —
   not scattered through the file — so a future style_1 sync is a
   diff of everything *before* this banner.
   Design tokens read off the live site with Chrome and
   cross-checked against its woodmart theme options:
     brand blue    #007bc4   (buttons, prices, active nav)
     announcement  #1e73be   (the strip is a shade off the brand)
     accent yellow #fbbc34   (sale/hot badges)
     body copy     #777      headings #242424   links #333
     container     1222px    gutter 15px
     radius        0         everywhere, form controls included
     buttons       uppercase 13px/600, white on blue
     nav           uppercase 13px/700
     tiles         transparent, hairline rgba(0,0,0,.106), 15px
                   padding, grid gap 0 (products_bordered_grid = 1
                   with style = inside)
     card meta     category name under the title, 13.3px/400 #a5a5a5
     footer        #0a0a0a with rgba(255,255,255,.8) type
     hero          #0a0a0a band ~202px, h1 68px/600 white, centred
   No web fonts: the base system stack is kept and the Woodmart
   feel comes from size/weight/letter-spacing instead.
   This skin is a *sibling* of themes/style_2, not a child: both
   are style_1 plus their own block, and neither imports the other.
   style_2 is the same Woodmart parent theme in orange, so the
   sections that are Woodmart-generic (nav wrapping, full-width
   catalogue, the fixed-width quantity stepper) were carried across
   on purpose. The sections where the two shops genuinely differ —
   tiles, category hero, footer, form radius — are written fresh
   here; do not "resync" them against style_2.
   ============================================================ */
:root {
    --cb-blue: #007bc4;
    --cb-blue-dark: #0068a6;
    --cb-yellow: #fbbc34;
    --cb-heading: #333;
    --cb-body: #777;
    --cb-line: #e6e6e6;
    /* The tile grid's shared hairline. Deliberately the live site's
       rgba and not a flat hex: it sits over both white and the grey
       section bands. */
    --cb-hairline: rgba(0, 0, 0, 0.106);
    /* Footer and category hero share one near-black. */
    --cb-ink: #0a0a0a;
    --cb-radius: 0px;
    /* Desktop logo column. The nav row below is pulled back across the
       column by exactly this amount (see the ≥993px block), so the three
       users — .logo flex-basis, .logo max-width and the .header-row-2
       margin — must never drift apart. 324px preserves the current
       artwork's rendered size (307px at the 60px height cap, plus the
       column's 1rem right padding). */
    --cb-logo-col: 324px;
}
body {
    color: var(--cb-body);
    font-size: 14px;
    line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--cb-heading);
    font-weight: 600;
    line-height: 1.2;
}
a { color: var(--cb-heading); }
a:hover { color: var(--cb-blue); }
/* Woodmart's grid is a touch wider than the 1200px base. */
.container,
.header-row-1,
.header-subbar-inner {
    max-width: 1222px;
    padding-left: 15px;
    padding-right: 15px;
}
/* --- Announcement + topbar ------------------------------------ */
/* Not var(--cb-blue): the live strip is a slightly deeper, less
   saturated blue than the buttons. Measured, not eyeballed. */
.topbar-announcement { background: #1e73be; }
.topbar {
    background: #fff;
    color: var(--cb-body);
    border-bottom: 1px solid var(--cb-line);
    font-size: 12px;
}
.topbar-item { color: var(--cb-body); }
.topbar-item:hover { color: var(--cb-blue); }
/* --- Header ---------------------------------------------------- */
.header-row-1 {
    box-shadow: none;
    border-bottom: 1px solid var(--cb-line);
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.header-subbar { box-shadow: none; }
.logo { padding: 0 1rem 0 0; }
.logo img { max-height: 60px; width: auto; }
/* Square 46px search field with a solid blue submit, as on the live site. */
.search-form {
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--cb-radius);
    height: 46px;
}
.search-form:focus-within { border-color: var(--cb-blue); }
.search-input { font-size: 14px; }
.search-btn,
.mobile-header-search-btn {
    background: var(--cb-blue);
}
.search-btn:hover,
.mobile-header-search-btn:hover { background: var(--cb-blue-dark); }
.mobile-header-search-form { border-radius: var(--cb-radius); }
/* --- Navigation ------------------------------------------------
   style_1 paints the menu strip with a four-stop rainbow gradient;
   the live menu is plain white between two hairlines. */
.header-row-2 {
    background: #fff;
    border-top: 1px solid var(--cb-line);
    border-bottom: 1px solid var(--cb-line);
}
.header-row-2 .mega-menu-link,
.header-row-2 .mega-menu-item > a { color: var(--cb-heading); }
.header-row-2 .mega-menu-link:hover,
.header-row-2 .mega-menu-item > a:hover { color: var(--cb-blue); }
/* A full brand nav (12 roots) plus the four built-in shortcuts overflows one
   1222px row. style_1 hides that behind `overflow-x:auto` with an invisible
   scrollbar, so on desktop the tail items simply vanish. Wrap instead — the
   live site likewise carries its brands over two rows. The scroll behaviour is
   left alone below 993px, where a swipeable strip is the right answer.
   base.html nests this row inside .header-row-1-right, i.e. it starts after
   the logo column. On the live site the brand row spans the full container,
   so it is pulled back across the logo — which is also what keeps the wrap
   at two rows instead of three.
   The pull-back must equal the column's RENDERED width, not just its
   flex-basis: the skin gives .logo img `width:auto` under a 60px height
   cap, and a flex item's implicit `min-width:auto` then refuses to shrink
   below that intrinsic width — a wide wordmark quietly grows the column
   past its basis and the nav drifts right (83px with the cellb2b logo).
   So the column and the offset share --cb-logo-col, and the image is
   capped to the column so the width can never come from the artwork. */
@media (min-width: 993px) {
    .mega-menu-list {
        flex-wrap: wrap;
        overflow-x: visible;
        justify-content: space-between;
    }
    /* space-between alone spreads a short last row to the two extremes — with
       ten roots that leaves VENTA hard left and CONTÁCTENOS hard right, 894px
       apart. Letting the items absorb the slack instead keeps every row full
       and the labels evenly placed; the base pins flex-shrink:0 for the
       swipeable strip below this breakpoint, which `flex: 1 1 auto` only
       relaxes up here. */
    .mega-menu-list > .mega-menu-item {
        flex: 1 1 auto;
    }
    .mega-menu-list > .mega-menu-item > .mega-menu-link {
        justify-content: center;
    }
    /* The first root sits exactly under the logo's left edge — flush, not
       centred inside its stretched box like its siblings. */
    .mega-menu-list > .mega-menu-item:first-child > .mega-menu-link {
        justify-content: flex-start;
        padding-left: 0;
    }
    .header-row-2 {
        margin-left: calc(-1 * var(--cb-logo-col));
    }
    /* .logo is align-self:stretch in the base, so it spans both header rows and
       the pulled-back nav would be drawn straight over it. Pinning it to the
       top leaves the space under the logo free for the nav to occupy. */
    .logo {
        align-self: flex-start;
        flex-basis: var(--cb-logo-col);
        max-width: var(--cb-logo-col);
    }
    .logo img {
        max-width: 100%;
    }
}
.header-row-2 .mega-menu-link {
    padding: 0.6rem 0.7rem;
}
/* The carried-over base styles special-case :last-child for the contact
   shortcut that used to sit on the bar's gradient end (fw 600, dark hover
   wash). style_3 dropped that shortcut, so the rules would now restyle
   whichever DB item happens to sort last — pin last-child back to what its
   siblings get. */
.mega-menu-list > .mega-menu-item:last-child > .mega-menu-link {
    font-weight: 700;
}
.mega-menu-list > .mega-menu-item:last-child > .mega-menu-link:hover {
    background: rgba(255, 255, 255, 0.12);
}
.nav a,
.mega-menu-item > a,
.main-nav a {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: normal;
    color: var(--cb-heading);
}
.nav a:hover,
.mega-menu-item > a:hover,
.main-nav a:hover { color: var(--cb-blue); }
/* --- Buttons --------------------------------------------------- */
.btn {
    border-radius: var(--cb-radius);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.55rem 1.4rem;
}
.btn-primary { background: var(--cb-blue); }
.btn-primary:hover { background: var(--cb-blue-dark); color: #fff; }  /* the blanket a:hover below outranks .btn-primary; without this,
     every <a class="btn btn-primary"> loses its white text on hover */
.btn-register {
    background: var(--cb-blue);
    box-shadow: none;
}
.btn-register:hover {
    background: var(--cb-blue-dark);
    box-shadow: none;
    color: #fff;  /* see .btn-primary:hover — the skin's blanket a:hover steals this */
}
.nav a.btn-register,
.nav a.btn-register:hover {
    color: #fff;  /* the .nav a heading-color rule above outranks .btn-register,
     leaving the mobile drawer's register button dark-on-blue */
}
.btn-outline {
    border: 2px solid var(--cb-heading);
    color: var(--cb-heading);
}
.btn-outline:hover {
    background: var(--cb-heading);
    color: #fff;
}
/* Square right through, form controls included — the base theme rounds these
   and the live site does not round anything. */
input, select, textarea,
.variant-select select,
.filters,
.filters select,
.filters input {
    border-radius: var(--cb-radius);
}
/* --- Section headings + breadcrumb ----------------------------- */
/* Woodmart's section headings are sentence case, not uppercase — the
   uppercase treatment is reserved for nav and buttons. */
.section-title,
.homepage-layout .section-title {
    font-size: 24px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: #242424;
    border-bottom: none;
}
.breadcrumb {
    font-size: 14px;
    font-weight: 600;
    color: var(--cb-heading);
    padding: 0.9rem 0;
}
.breadcrumb a,
.breadcrumb span { color: var(--cb-heading); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--cb-blue); }
/* --- Category hero ---------------------------------------------
   The category name is a full-width dark band ~202px tall, not a
   .section-title inside the grid. categories/detail.html emits it as
   a sibling of .container for exactly that reason — the comment
   there explains why full-bleed-by-100vw was not used. base.html
   puts <main> at full width with no max-width of its own, which is
   what lets this span the viewport.                                */
.category-hero {
    /* The live site's page-title band: its dark phone photo (2560×500,
       lifted from the source shop's uploads) over the ink fallback that
       shows until the image arrives and on error. */
    background: var(--cb-ink) url("/static/images/themes/style_3/category-hero.jpg") center / cover no-repeat;
    padding: 60px 0;
    text-align: center;
}
.category-hero h1 {
    color: #fff;
    font-size: 68px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}
.category-hero .category-product-count {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0.5rem 0 0;
}
/* 68px is a desktop measurement; on a phone a two-word category name
   already wraps to three lines at that size. */
@media (max-width: 768px) {
    .category-hero { padding: 32px 0; }
    .category-hero h1 { font-size: 32px; }
}
/* --- Brand mega dropdowns (Woodmart tab panels) ----------------
   The live dropdowns are WPBakery tab modules: a row of grey
   rounded tab buttons on top, then a white full-width panel whose
   links flow in five plain columns. Series groups (Serie P…) get a
   bold heading inside the panel instead of a tab of their own.
   Content comes from menu_item_tabs.custom_content (seeded from
   the live menu) rendered by the direct Jinja path with
   tab_layout=horizontal — the ajax JS renderer never runs. */
.mega-dropdown[data-width="full"] {
    border-radius: 0;
    border-top: 1px solid var(--cb-line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
}
.mega-dropdown-inner { padding: 1.4rem 1.75rem 1.75rem; }
.mega-tabs[data-tab-layout="horizontal"] { gap: 1.25rem; }
.mega-tabs[data-tab-layout="horizontal"] .mega-tabs-nav {
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--cb-line);
}
.mega-tabs[data-tab-layout="horizontal"] .mega-tab-btn {
    background: #f4f4f4;
    border: 1px solid var(--cb-line);
    /* keep 1px so the active button can paint it white and melt
       into the panel across the nav's own border underneath */
    border-bottom: 1px solid var(--cb-line);
    border-radius: 4px 4px 0 0;
    margin-bottom: -1px;
    padding: 0.6rem 1.3rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--cb-body);
}
.mega-tabs[data-tab-layout="horizontal"] .mega-tab-btn:hover {
    background: #ececec;
    color: var(--cb-heading);
    border-bottom-color: var(--cb-line);
}
.mega-tabs[data-tab-layout="horizontal"] .mega-tab-btn.active {
    background: #fff;
    color: var(--cb-heading);
    border-bottom-color: #fff;
}
.mega-columns { gap: 1rem 2rem; }
.column-title {
    margin-bottom: 0.6rem;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--cb-heading);
}
.column-links li { margin-bottom: 0.45rem; }
.column-links a { font-size: 13px; color: var(--cb-body); }
.column-links a:hover { color: var(--cb-blue); }
/* --- Full-width catalogue -------------------------------------
   The live site has no persistent category tree beside the grid —
   browsing is driven by the header menu. The rail itself is gone
   from this theme's page templates (that also stops the 270 KB
   /api/v1/categories/tree fetch); this just collapses the grid
   that used to hold it. Each tile gains ~80px, which the labelled
   add-to-cart button needs. */
.homepage-layout {
    grid-template-columns: 1fr;
    gap: 0;
}
/* --- Product cards --------------------------------------------
   The live catalogue is Woodmart's "bordered grid, borders inside"
   (products_bordered_grid = 1, style = inside): tiles have no
   background and no shadow, and the whole grid reads as one ruled
   table. Info block order is image → title → category → price; there
   is no SKU line.
   How the ruling stays 1px: each tile draws only its right and
   bottom edge and the grid container draws the top and left, so no
   two borders ever land on the same pixel. The obvious alternative —
   a full border on every tile plus -1px margins to collapse them —
   needs overflow:hidden on the container, which then clips the outer
   right and bottom edges back off. An incomplete last row leaves the
   right of the frame notched; so does the live site.               */
.product-grid {
    gap: 0;
    border-top: 1px solid var(--cb-hairline);
    border-left: 1px solid var(--cb-hairline);
}
.product-card-wrapper,
.product-card {
    border-radius: var(--cb-radius);
    background: transparent;
    box-shadow: none;
}
.product-card-wrapper {
    padding: 15px;
    border: none;
    border-right: 1px solid var(--cb-hairline);
    border-bottom: 1px solid var(--cb-hairline);
}
/* The live tiles are inert: no lift, no shadow, only the title takes
   the hover colour. */
.product-card-wrapper:hover,
.product-card:hover {
    transform: none;
    box-shadow: none;
}
.product-image {
    background: #fff;
    border-bottom: none;
}
.product-info {
    padding: 10px 0 0;
    gap: 4px;
    text-align: center;
    align-items: center;
}
.product-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--cb-heading);
    line-height: 1.4;
    /* Fallback matches every other .product-name rule and the admin default;
       base.html always emits --product-name-lines on <body>, so this only
       applies to markup rendered outside the storefront layout. */
    -webkit-line-clamp: var(--product-name-lines, 7);
    text-align: center;
}
.product-card:hover .product-name { color: var(--cb-blue); }
/* Woodmart's categories_under_title: the category name is the tile's
   second line, in light grey. This theme's templates emit it *after*
   the title (the shared trees put it before, and style_2 hides it),
   so this needs no `order` — keep it that way, source order and
   visual order should not disagree. */
.product-info .product-category {
    display: block;
    font-size: 13.3px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #a5a5a5;
    margin: 0;
}
/* The category name took the SKU's slot. */
.product-info .product-sku { display: none; }
.product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--cb-blue);
    justify-content: center;
}
.product-price .original-price { color: var(--cb-body); }
.discount-badge,
.new-badge,
.hot-badge,
.out-of-stock-badge {
    border-radius: var(--cb-radius);
    box-shadow: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.55rem;
}
.hot-badge {
    background: var(--cb-yellow);
    color: var(--cb-heading);
}
.new-badge { background: var(--cb-blue); }
/* --- Quick add ------------------------------------------------- */
.quick-add-section {
    border-top: none;
    background: transparent;
    justify-content: center;
    padding: 10px 0 0;
    gap: 0;
}
/* The stepper is fixed-width so the button keeps the rest of the row —
   with both on flex:1 the label ellipsises down to nothing. */
.quantity-selector {
    flex: 0 0 auto;
    border: 1px solid var(--cb-line);
    border-right: none;
    border-radius: var(--cb-radius);
}
.qty-btn {
    width: 28px;
    color: var(--cb-body);
    background: #fff;
    font-size: 1rem;
}
.qty-btn:hover { color: var(--cb-blue); background: #fff; }
.qty-input { width: 34px; font-weight: 400; color: var(--cb-body); }
.btn-add-to-cart,
.btn-select-variant,
.btn-out-of-stock,
.btn-inquiry {
    border-radius: var(--cb-radius);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: normal;
    /* The label ("AÑADIR AL CARRITO") is long enough to blow the button past
       its flex basis in a 4-column grid; min-width:0 lets it shrink and the
       tight padding buys back the room. */
    min-width: 0;
    padding: 0 0.6rem;
}
.btn-add-to-cart,
.btn-select-variant {
    background: var(--cb-blue);
    color: #fff;
}
.btn-add-to-cart:hover,
.btn-select-variant:hover { background: var(--cb-blue-dark); }
.btn-add-to-cart-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 640px) {
    /* Two columns on phones leave no room for a side-by-side stepper and
       label, so the base theme stacks them into a column here. That turns the
       shared `flex: 1` into a flex-basis on the *height* — the base height is
       then ignored and the button collapses to a one-line sliver with the
       label ellipsised away. Size it on the cross axis instead and give a
       long label room to wrap inside the box. */
    .quick-add-section { gap: 6px; }
    /* The stepper drops its right edge to read as one pill with the button
       beside it; stacked, that leaves the box hanging open. */
    .quantity-selector { border-right: 1px solid var(--cb-line); }
    .btn-add-to-cart,
    .btn-select-variant,
    .btn-out-of-stock,
    .btn-inquiry {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        min-height: 38px;
        font-size: 11px;
        padding: 4px 0.35rem;
        line-height: 1.3;
    }
    .btn-add-to-cart-label { white-space: normal; overflow: visible; }
}
/* --- Product detail -------------------------------------------- */
.product-detail-info h1 {
    font-size: 34px;
    font-weight: 500;
    color: var(--cb-heading);
    line-height: 40.8px;
}
.product-detail-sku {
    font-size: 13px;
    color: var(--cb-body);
}
.product-detail-price {
    font-size: 28px;
    font-weight: 600;
    color: var(--cb-blue);
}
.product-detail-desc { color: var(--cb-body); }
/* Woodmart states availability as a bare orange tick plus dark text, not a
   coloured pill. The badge carries its colours as inline style attributes in
   products/detail.html — about a dozen sites, several built in JS — so
   !important is the only lever that reaches it from a stylesheet. */
.stock-badge {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.stock-badge.in-stock { color: var(--cb-heading) !important; }
.stock-badge.in-stock svg { color: var(--cb-blue); }
.stock-badge.low-stock { color: #92400e !important; }
.stock-badge.out-of-stock { color: #991b1b !important; }
/* The PDP's cart row is taller than the card grid's — 42px on the live site. */
#add-to-cart-btn,
.product-detail-info .btn-add-to-cart,
.product-detail-info .quantity-selector,
.product-detail-info .qty-btn,
.product-detail-info .qty-input {
    height: 42px;
}
#add-to-cart-btn,
.product-detail-info .btn-add-to-cart { padding: 5px 20px; }
#add-to-cart-btn {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--cb-radius);
}
/* Live PDP labels the button in words only — the glyph is style_1's.
   !important because the svg carries display:inline-block inline. */
#add-to-cart-btn > svg { display: none !important; }
.filters {
    border: 1px solid var(--cb-line);
    box-shadow: none;
    border-radius: var(--cb-radius);
    background: #fff;
}
/* --- Footer ----------------------------------------------------
   Same near-black panel as the base theme, a shade deeper, with the
   live site's translucent white type. Kept as a delta rather than a
   rewrite — the base layout is already right.                      */
.footer {
    background: var(--cb-ink);
    color: rgba(255, 255, 255, 0.8);
    margin-top: 3rem;
}
.footer .footer-title {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.footer a { color: rgba(255, 255, 255, 0.8); font-size: 13px; }
.footer a:hover { color: #fff; }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}
/* === Facet Filters === */
/* Grid width is driven by what the layout actually contains, not by which
   theme is rendering. Pinning the column count per theme is composition-blind:
   the day a theme gains or loses its category rail, the row silently wraps.
   The two rules share specificity (0,2,0) — `:not(:has())` adds none — so the
   order below decides, and reversing it breaks the two-sidebar case. */
/* Where :has() is unsupported (old in-app webviews) these rules are ignored
   rather than erroring, and the base `240px 1fr` still lays out the
   two-child case correctly. Only a base/style_1 site with facets ON would
   degrade — main would wrap below the two rails — and no such site exists;
   the gate is off everywhere except the style_2 tenant. */
@media (min-width: 769px) {
  .homepage-layout:has(> .sidebar-facets):has(> .sidebar-categories) {
    grid-template-columns: 240px 240px 1fr;
    gap: 1.5rem;
  }
  .homepage-layout:has(> .sidebar-facets):not(:has(> .sidebar-categories)) {
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
  }
}
/* The media guard above is required, not tidiness: (0,2,0) outranks the
   single-column `.homepage-layout` rules in the max-width:768px block and the
   unmediated one further down, so without it a 360px phone renders columns. */
@media (min-width: 769px) and (max-width: 992px) {
  .homepage-layout:has(> .sidebar-facets):has(> .sidebar-categories) {
    grid-template-columns: 200px 200px 1fr;
    gap: 1rem;
  }
  .homepage-layout:has(> .sidebar-facets):not(:has(> .sidebar-categories)) {
    grid-template-columns: 220px 1fr;
    gap: 1rem;
  }
}
/* A separate aside, never folded into .sidebar-categories: that one is
   `display: none` under 768px, which would leave phones with no filters at
   all — the devices that need them most. */
.sidebar-facets {
  min-width: 0;
}
.facet-panel {
  background: #fff;
  border: 1px solid var(--fl-line, #e5e7eb);
  border-radius: var(--fl-radius, 6px);
  padding: 0.75rem 1rem;
}
.facet-panel-summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  padding: 0.25rem 0;
}
.facet-panel-summary::-webkit-details-marker {
  display: none;
}
.facet-group {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}
.facet-group-title {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0;
  margin-bottom: 0.4rem;
}
.facet-values {
  max-height: 260px;
  overflow-y: auto;
}
.facet-value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0;
  font-size: 0.85rem;
  cursor: pointer;
}
/* Tick marks in the theme's own colour rather than the UA's blue. Ignored by
   browsers without accent-color, which then render the default control. */
.facet-value input {
  accent-color: var(--primary, #2563eb);
}
.facet-value-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.facet-value-count {
  color: #6b7280;
  font-size: 0.78rem;
}
.facet-value.is-selected .facet-value-label {
  font-weight: 600;
}
.facet-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #d1d5db;
  flex: 0 0 auto;
}
.facet-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.facet-apply {
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: var(--fl-radius-form, 4px);
  background: var(--primary, #2563eb);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
}
.facet-clear {
  font-size: 0.82rem;
  color: #6b7280;
}
/* Desktop: the element is rendered open, so all this does is drop the toggle
   the user does not need. Nothing here has to force a closed <details> open —
   that is unreliable across browsers and its failure mode is a desktop visitor
   with no filters at all. */
@media (min-width: 769px) {
  .facet-panel-summary {
    display: none;
  }
}
@media (max-width: 768px) {
  .sidebar-facets {
    margin-bottom: 1rem;
  }
}