/* B2B Storefront Styles — "style_2" theme
 *
 * Forked from themes/style_1 and re-skinned after its source shop (a Woodmart
 * WooCommerce shop): orange #fd5d07 on white, square corners, uppercase
 * micro-typography, and product cards that read as one bordered grid rather
 * than a row of floating rounded panels.
 *
 * Everything below the "STYLE 2 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: #fd5d07;
    --primary-dark: #e04f00;
    --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 foneland mark is 480x120,
       i.e. 224px at a fixed 56px height — wider than the 194px the middle
       column gets on a 320px 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, #fd5d07);
    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, #fd5d07);
    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, #e04f00);
}
/* 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, #fd5d07);
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}
.search-result-login-btn:hover {
    background: var(--primary-dark, #e04f00);
    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;
    color: var(--brand-orange);
    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(--brand-orange);
    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 the user area (the cart icon + total; the account link and
   the login/register buttons live in the top bar / mobile drawer now) */
.skeleton-user-area {
    width: 120px;
    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: #fd5d07;
    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, #e04f00);
}
.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;
}
/* On phones two side-by-side buttons are too narrow for their labels and wrap
   to two lines; stack them full width instead. */
@media (max-width: 480px) {
    .minicart-actions {
        flex-direction: column;
    }
    .minicart-actions .btn {
        flex: none;
    }
}
/* 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;
    /* Pinned top and bottom rather than sized with 100vh/100dvh: with a `top`
       offset (the dev-mode banner) a full-height box ends below the visible
       area, and the footer buttons were cut off by the browser toolbar. */
    bottom: 0;
    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, #fd5d07);
}
/* 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: #fd5d07;
}
.contact-email .contact-icon-wrap {
  background: #f59e0b;
}
/* Phone hover - deepen badge, glyph stays white */
.contact-phone:hover .contact-icon-wrap {
  background: #e04f00;
}
/* 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 2 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:
     brand orange  #fd5d07   (buttons, prices, active nav)
     accent yellow #fbbc34   (sale/hot badges)
     body copy     #777      headings/links #333
     container     1222px    gutter 15px
     radius        0         (only form controls get 5px)
     buttons       uppercase 13px/600, white on orange
     nav           uppercase 12px/600
   No web fonts: the base system stack is kept and the Woodmart
   feel comes from size/weight/letter-spacing instead.
   ============================================================ */
:root {
    --fl-orange: #fd5d07;
    --fl-orange-dark: #e04f00;
    --fl-yellow: #fbbc34;
    --fl-heading: #333;
    --fl-body: #777;
    --fl-line: #e6e6e6;
    --fl-panel: #f7f8fa;
    --fl-tile: #f7f7f7;
    --fl-radius: 0px;
    --fl-radius-form: 5px;
}
body {
    color: var(--fl-body);
    font-size: 14px;
    line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--fl-heading);
    font-weight: 600;
    line-height: 1.2;
}
a { color: var(--fl-heading); }
a:hover { color: var(--fl-orange); }
/* 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 ------------------------------------ */
.topbar-announcement { background: var(--fl-orange); }
.topbar {
    background: #fff;
    color: var(--fl-body);
    border-bottom: 1px solid var(--fl-line);
    font-size: 12px;
}
.topbar-item { color: var(--fl-body); }
.topbar-item:hover { color: var(--fl-orange); }
/* --- Header ---------------------------------------------------- */
.header-row-1 {
    box-shadow: none;
    border-bottom: 1px solid var(--fl-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 search field with a solid orange submit, as on the live site. */
.search-form {
    background: #fff;
    border: 2px solid var(--fl-line);
    border-radius: var(--fl-radius-form);
}
.search-form:focus-within { border-color: var(--fl-orange); }
.search-input {
    font-size: 14px;
    min-width: 0;  /* the input's intrinsic ~180px beats the 170px .search-box floor
     below and shoves the submit button out through the form's overflow clip */
}
.search-btn,
.mobile-header-search-btn {
    background: var(--fl-orange);
}
.search-btn:hover,
.mobile-header-search-btn:hover { background: var(--fl-orange-dark); }
.mobile-header-search-form { border-radius: var(--fl-radius-form); }
/* --- Header page links (row 1) ---------------------------------
   The live shop runs a short page menu inline between the logo and the
   search field — a `header-links` menu, separate from the brand row
   below. It sits first in .header-row-1-top, whose .search-box is
   flex:1, so the links keep their natural width and the search field
   absorbs what is left. Hidden with the whole sub-row at <=768px; also
   dropped at <=992px, where the remaining width belongs to search. */
.header-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}
.header-links-item {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fl-heading);
    text-decoration: none;
    white-space: nowrap;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}
.header-links-item:hover {
    color: var(--fl-orange);
    border-bottom-color: var(--fl-orange);
}
/* The page links, the search field and the guest login/register buttons only
   coexist in the 936px that .header-row-1-top gets beside the logo if the
   search gives up its base min-width and the row runs a tighter gap. Measured
   at 1440px: 515 + 170 + 304 + 2x16 = 1021 against a 936px row, so the search
   still absorbs the remainder — anything wider for the links pushes the
   register button off the row. */
.header-row-1-top { gap: 1rem; }
.header-row-1-top .search-box { min-width: 170px; }
/* Below ~1200px the page links, the search and the cart no longer fit and the
   cart would be pushed off the row (and the page into horizontal scroll).
   Wrap the links onto their own line rather than hiding them: between 993px
   and 1199px the mobile drawer is not available either, so hiding would leave
   these five pages with no route at all on ordinary laptop widths. (The cart
   is a lot narrower than the login/register pair this row used to carry, which
   is why the threshold dropped from 1399px.) */
@media (max-width: 1199px) {
    .header-row-1-top { flex-wrap: wrap; }
    .header-links {
        order: 1;
        flex-basis: 100%;
    }
}
@media (max-width: 992px) {
    .header-links { display: none; }
}
/* --- Top bar (header subbar) -------------------------------------
   The shop's thin top bar, as on the original header: contact info on the
   left; page links (`header-top-links` menu), language, wishlist and account
   on the right. Plain uppercase text, no icons, one hairline underneath.
   Hidden with the whole subbar at <=768px (the drawer carries the same
   things there). 44px tall to match the offset body:has(.header-subbar)
   gives the sticky category sidebar. */
.header-subbar {
    position: relative;
    z-index: 110;  /* above .header-sticky-wrapper (100), so its dropdowns open over the header below */
    border-bottom: 1px solid var(--fl-line);
}
.header-subbar-inner { min-height: 44px; }
.header-subbar .contact-icon-wrap { display: none; }
.header-subbar .contact-item,
.header-subbar .contact-label {
    padding-left: 0;
    padding-right: 0;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--fl-heading);
}
.header-subbar .contact-item { gap: 0; }
.header-subbar .contact-label { font-weight: 400; }
.header-subbar .contact-value { font-weight: 700; }
/* The email reads as a bare address, no "Email:" label. */
.header-subbar .contact-email .contact-label { display: none; }
.header-subbar .contact-divider {
    width: 1px;
    height: 12px;
    margin: 0 0.8rem;
    background: var(--fl-line);
}
.header-subbar .contact-item:hover { color: var(--fl-orange); }
/* margin-left:auto keeps the cluster on the right when there is no contact info. */
.header-subbar-right { gap: 1.1rem; margin-left: auto; }
.header-top-links {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.header-top-links-item,
.header-subbar .subbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fl-heading);
    text-decoration: none;
    white-space: nowrap;
}
.header-top-links-item:hover,
.header-subbar .subbar-link:hover { color: var(--fl-orange); }
/* Wishlist and account: separated from what precedes them by a hairline. */
.header-subbar .subbar-link {
    padding: 0 0 0 1.1rem;
    border: none;
    border-left: 1px solid var(--fl-line);
    border-radius: 0;
    background: none;
    line-height: 1.2;
}
.header-subbar .subbar-link:hover {
    background: none;
    border-left-color: var(--fl-line);
}
.header-subbar .account-btn #accountName { max-width: 140px; }
/* The language box keeps its own border; a little tighter than the base. */
.header-subbar .subbar-lang .lang-btn,
.header-subbar .subbar-currency .currency-btn {
    padding: 0.25rem 0.6rem;
    font-size: 12px;
    box-shadow: none;
}
/* The account dropdown only opens for a signed-in visitor: guests just get
   the link. header-user-state.js reveals #userAreaLoggedIn for them. */
/* Narrow desktop (769-1199px, no drawer yet): with several page links, both
   switchers, the wishlist and a long account name the right cluster can be wider
   than the bar. Let the bar and the cluster wrap instead of pushing the page
   into horizontal scroll. */
@media (min-width: 769px) and (max-width: 1199px) {
    .header-subbar-inner { flex-wrap: wrap; }
    .header-subbar-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;  /* flex:0 0 auto would otherwise keep it as wide as its content */
        row-gap: 0.4rem;
        padding: 0.4rem 0;
    }
}
.subbar-account .account-dropdown { display: none; top: 100%; }
body:has(#userAreaLoggedIn:not(.hidden)) .subbar-account .account-dropdown { display: block; }
/* --- Middle row: logo, page links, search, cart ------------------
   Search is a bordered box with the magnifier on its left; the cart is an
   icon with its item-count badge and the cart total beside it. Login /
   register are gone from this row (the top bar's account link replaces
   them). */
.header-row-1-top .search-form {
    flex-direction: row;
    align-items: center;
    background: #fff;
    border: 1px solid var(--fl-line);
    border-radius: var(--fl-radius-form);
}
.header-row-1-top .search-form:focus-within { border-color: var(--fl-heading); }
.header-row-1-top .search-form .search-btn,
.header-row-1-top .search-form .search-btn:hover {
    padding: 0.7rem 0 0.7rem 0.9rem;
    background: transparent;
    color: var(--fl-heading);
}
.header-row-1-top .search-form .search-btn:hover { color: var(--fl-orange); }
.header-row-1-top .search-form .search-input { padding-left: 0.6rem; }
.header-actions .user-area,
.header-actions .user-area-loading {
    min-width: 0;
    gap: 0;
}
.header-actions .cart-trigger {
    gap: 0.6rem;
    color: var(--fl-heading);
}
.header-actions .cart-trigger:hover { color: var(--fl-orange); }
.cart-total {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}
/* Prices hidden from guests: the total goes too (body class set by header-user-state.js). */
body.price-guest .cart-total { display: none; }
/* --- 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(--fl-line);
    border-bottom: 1px solid var(--fl-line);
}
.header-row-2 .mega-menu-link,
.header-row-2 .mega-menu-item > a { color: var(--fl-heading); }
.header-row-2 .mega-menu-link:hover,
.header-row-2 .mega-menu-item > a:hover { color: var(--fl-orange); }
/* style_1 hides nav overflow behind `overflow-x:auto` with an invisible
   scrollbar, so on desktop any tail items simply vanish. Wrap instead, so a
   site whose brand row does not fit still shows every root. The twelve live
   brands do fit one row once pulled back across the logo (below); the wrap is
   the safety net, not the intent. 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 240px 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 offset must track .logo's
   flex-basis (240px, 200px at ≤992px). */
@media (min-width: 993px) {
    .mega-menu-list {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .header-row-2 {
        margin-left: -240px;
    }
    /* .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;
    }
}
/* 0.7rem here costs 12 roots ~270px of padding and tips the row over its
   1176px into a second line by ~11px; 0.5rem lands the twelve at 1110px. */
.header-row-2 .mega-menu-link {
    padding: 0.6rem 0.5rem;
}
.nav a,
.mega-menu-item > a,
.main-nav a {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: normal;
    color: var(--fl-heading);
}
.nav a:hover,
.mega-menu-item > a:hover,
.main-nav a:hover { color: var(--fl-orange); }
/* --- Buttons --------------------------------------------------- */
.btn {
    border-radius: var(--fl-radius);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.55rem 1.4rem;
}
.btn-primary { background: var(--fl-orange); }
.btn-primary:hover { background: var(--fl-orange-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(--fl-orange);
    box-shadow: none;
}
.btn-register:hover {
    background: var(--fl-orange-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-orange */
}
.btn-outline {
    border: 2px solid var(--fl-heading);
    color: var(--fl-heading);
}
.btn-outline:hover {
    background: var(--fl-heading);
    color: #fff;
}
/* Form controls keep a small radius; everything else is square. */
input, select, textarea,
.variant-select select,
.filters,
.filters select,
.filters input {
    border-radius: var(--fl-radius-form);
}
/* --- 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(--fl-heading);
    padding: 0.9rem 0;
}
.breadcrumb a,
.breadcrumb span { color: var(--fl-heading); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--fl-orange); }
/* --- 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 --------------------------------------------
   Measured off a live category tile: 10px of #f7f7f7 around the
   whole tile, square corners, a flat 4px ambient shadow (no lift
   on hover), and every line in the info block centred. Order is
   image → title → SKU → price.                                   */
.product-card-wrapper,
.product-card {
    border-radius: var(--fl-radius);
    border: none;
    background: var(--fl-tile);
}
.product-card-wrapper {
    padding: 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
}
/* The wrapper draws the tile; the card inside must stay flat or the
   shadow is painted twice, once inset by the padding. */
.product-card-wrapper .product-card { box-shadow: none; }
.product-card-wrapper:hover,
.product-card:hover {
    transform: none;
    box-shadow: none;
}
.product-card-wrapper:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); }
/* The image keeps a white plate inside the grey tile — product shots
   are cut out on white and read as dirty on #f7f7f7. */
.product-image {
    background: #fff;
    border-bottom: none;
}
.product-info {
    padding: 10px 0 0;
    margin-top: 10px;
    gap: 6px;
    text-align: center;
    align-items: center;
}
.product-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--fl-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(--fl-orange); }
/* products/list.html prints a category line above the title that the live
   catalogue does not have; the SKU takes its place. */
.product-info .product-category { display: none; }
/* Woodmart prints the SKU under the title; the base theme hides it. */
.product-sku {
    display: block;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--fl-heading);
    margin: 0;
}
.product-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--fl-orange);
    justify-content: center;
}
.product-price .original-price { color: var(--fl-body); }
.discount-badge,
.new-badge,
.hot-badge,
.out-of-stock-badge {
    border-radius: var(--fl-radius);
    box-shadow: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.55rem;
}
.hot-badge {
    background: var(--fl-yellow);
    color: var(--fl-heading);
}
.new-badge { background: var(--fl-orange); }
/* --- 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(--fl-line);
    border-right: none;
    border-radius: var(--fl-radius);
}
.qty-btn {
    width: 28px;
    color: var(--fl-body);
    background: #fff;
    font-size: 1rem;
}
.qty-btn:hover { color: var(--fl-orange); background: #fff; }
.qty-input { width: 34px; font-weight: 400; color: var(--fl-body); }
.btn-add-to-cart,
.btn-select-variant,
.btn-out-of-stock,
.btn-inquiry {
    border-radius: var(--fl-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(--fl-orange);
    color: #fff;
}
.btn-add-to-cart:hover,
.btn-select-variant:hover { background: var(--fl-orange-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(--fl-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: 600;
    color: var(--fl-heading);
    line-height: 1.2;
}
.product-detail-sku {
    font-size: 13px;
    color: var(--fl-body);
}
.product-detail-price {
    font-size: 28px;
    font-weight: 600;
    color: var(--fl-orange);
}
.product-detail-desc { color: var(--fl-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(--fl-heading) !important; }
.stock-badge.in-stock svg { color: var(--fl-orange); }
.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(--fl-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; }
/* On phones the label is hidden (every theme collapses the button to its cart
   glyph at this width), so the glyph has to come back or the button is an
   empty box. */
@media (max-width: 820px) {
    #add-to-cart-btn > svg { display: inline-block !important; }
}
.filters {
    border: 1px solid var(--fl-line);
    box-shadow: none;
    border-radius: var(--fl-radius);
    background: #fff;
}
/* --- Footer ----------------------------------------------------
   The live footer is white with grey type, not the base theme's
   near-black panel.                                               */
.footer {
    background: #fff;
    color: #767676;
    border-top: 1px solid var(--fl-line);
    margin-top: 3rem;
}
.footer .footer-title {
    color: var(--fl-heading);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.footer a { color: var(--fl-body); font-size: 13px; }
.footer a:hover { color: var(--fl-orange); }
.footer-bottom {
    border-top: 1px solid var(--fl-line);
    color: var(--fl-body);
}
/* === 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;
  }
}