/*
Theme Name: Fast Woo Builder
Author: Gemini
Description: Full Customizer Support (Colors, Spacing, Sticky).
Version: 9.9.0
*/

/* --- 1. Reset & Base --- */
:root {
    /* Global Colors */
    --global-bg: #ffffff;
    --global-text: #333333;
    --global-accent: #007cba; /* Твій основний колір (Синій) */
    --global-heading: #111111;

    /* --- NEW: ACTIVE MENU COLOR VARIABLE --- */
    --menu-active-color: #e31e24; /* Червоний для активних пунктів */

    --container-width: 1200px;
    --section-padding: 40px;
}
button {
    cursor: pointer;
}
.custom-logo-link img {
    max-width: 250px; /* Обмежте ширину під ваш дизайн */
    height: auto;
    display: block;
}

/* === SCROLL LOCK SUPPORT (CRITICAL FIX) === */
html.fw-no-scroll {
    overflow: hidden !important;
    height: 100vh;
}

body.fw-no-scroll {
    overflow: hidden !important;
    position: relative;
    touch-action: none; /* Важливо для iOS */
    width: 100%;
}

/* Вимикаємо анімацію паддінгу, щоб хедер не "від'їжджав" плавно, а фіксувався миттєво */
body.fw-no-scroll, 
body.fw-no-scroll .header-row, 
body.fw-no-scroll .sticky-row,
body.fw-no-scroll .fw-site-header-fixed {
    transition: padding 0s !important; 
}


/* --- CUSTOMIZER VARIABLES --- */

/* 1. Primary Buttons */
:root {
    --btn-bg: #111111;
    --btn-text: #ffffff;
    --btn-bg-hover: #007cba;
    --btn-text-hover: #ffffff;
    --btn-radius: 4px;
    --btn-padding-top: 10px; --btn-padding-right: 20px; --btn-padding-bottom: 10px; --btn-padding-left: 20px;
    --btn-border-width: 1px; --btn-border-style: solid;
    --btn-border-color: #111111; --btn-border-color-hover: #007cba;

    /* 2. Cart Buttons */
    --cart-btn-bg: #111111;
    --cart-btn-text: #ffffff;
    --cart-btn-bg-hover: #007cba;
    --cart-btn-text-hover: #ffffff;
    --cart-btn-radius: 4px;
    --cart-btn-padding-top: 10px; --cart-btn-padding-right: 20px; --cart-btn-padding-bottom: 10px; --cart-btn-padding-left: 20px;
    --cart-btn-border-width: 1px; --cart-btn-border-style: solid;
    --cart-btn-border-color: #111111; --cart-btn-border-color-hover: #007cba;

    /* 2.5. Secondary Buttons (Analogs, Continue, View Cart in Mini-Cart) */
    --sec-btn-bg: #eee;
    --sec-btn-text: #333;
    --sec-btn-bg-hover: #ddd;
    --sec-btn-text-hover: #000;
    --sec-btn-radius: 4px;
    --sec-btn-padding-top: 10px; --sec-btn-padding-right: 20px; --sec-btn-padding-bottom: 10px; --sec-btn-padding-left: 20px;
    --sec-btn-border-width: 1px; --sec-btn-border-style: solid;
    --sec-btn-border-color: #eee; --sec-btn-border-color-hover: #ddd;

    /* 3. Qty Buttons (+/-) */
    --qty-btn-bg: #ffffff;
    --qty-btn-border: #ddd;
    --qty-btn-icon: #333333;
    --qty-btn-bg-hover: #f5f5f5;
    --qty-btn-icon-hover: #007cba;

    /* 4. Remove Buttons (Links) */
    --remove-bg-color: transparent;
    --remove-text-color: #999999;
    --remove-bg-color_hover: transparent;
    --remove-text-color_hover: #e74c3c;
    --remove-confirm-yes-bg: #e74c3c;
    --remove-confirm-yes-text: #ffffff;
    --remove-confirm-no-bg: #f5f5f5;
    --remove-confirm-no-text: #333;

    /* 5. Burger Button */
    --burger-icon-color: #333333;

    /* Header */
    --header-bg-top: #f5f5f5;
    --header-bg-main: #ffffff;
    --header-bg-btm: #ffffff;
    --header-text: #333333;
    --header-icon: #333333;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; background-color: var(--global-bg); color: var(--global-text); overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { color: var(--global-heading); margin-top: 0; }
a { text-decoration: none; color: inherit; transition: all 0.3s; }
a:hover { color: var(--global-accent); }
img { max-width: 100%; height: auto; display: block; }
button { transition: all 0.3s; }
/* ========================================================================
GLOBAL BUTTONS OVERRIDE (PRIMARY)
======================================================================== */
.button-style-target,
.fcf-btn-checkout,
.fast-cart-empty a.button,
.ac-cm-replaced,
.woocommerce :where(a.button, button.button, input.button, #respond input#submit) {
    cursor: pointer;
    font-family: inherit;

    /* Full Customizer Control */
    border-width: var(--btn-border-width);
    border-style: var(--btn-border-style);
    border-color: var(--btn-border-color);
    padding: var(--btn-padding-top) var(--btn-padding-right) var(--btn-padding-bottom) var(--btn-padding-left) !important;
    border-radius: var(--btn-radius);
    border: 0;
    transition: all 0.2s ease;
    font-weight: 500 !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    min-height: 40px;

    /* Primary Style */
    background-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
}
.woocommerce :where(a.button, button.button, input.button, #respond input#submit):hover,
.fast-cart-empty a.button:hover,
.button-style-target:hover,
.ac-cm-replaced:hover,
.fw-view-all-btn:hover,
.fcf-btn-checkout:hover {
    background-color: var(--btn-bg-hover) !important;
    color: var(--btn-text-hover) !important;
    border-color: var(--btn-border-color-hover) !important;
}

/* --- ADD TO CART BUTTONS OVERRIDE (WC DEDICATED) --- */
.wc-add-to-cart-btn,
.woocommerce :where(a.button.alt, button.button.alt, input.button.alt) {
    /* Full Customizer Control */
    border-width: var(--cart-btn-border-width);
    border-style: var(--cart-btn-border-style);
    border-color: var(--cart-btn-border-color);
    padding: var(--cart-btn-padding-top) var(--cart-btn-padding-right) var(--cart-btn-padding-bottom) var(--cart-btn-padding-left);
    border-radius: var(--cart-btn-radius);

    background-color: var(--cart-btn-bg) !important;
    color: var(--cart-btn-text) !important;
}

.wc-add-to-cart-btn:hover,
.woocommerce :where(a.button.alt, button.button.alt, input.button.alt):hover {
    background-color: var(--cart-btn-bg-hover) !important;
    color: var(--cart-btn-text-hover) !important;
    border-color: var(--cart-btn-border-color-hover) !important;
}

/* --- Secondary Buttons (Analogs, Continue, View Cart in Mini-Cart) --- */
.mycf-btn-continue,
.fcf-btn-cart {
    /* Full Customizer Control */
    border-width: var(--sec-btn-border-width) !important;
    border-style: var(--sec-btn-border-style) !important;
    border-color: var(--sec-btn-border-color) !important;
    padding: var(--sec-btn-padding-top) var(--sec-btn-padding-right) var(--sec-btn-padding-bottom) var(--sec-btn-padding-left) !important;
    border-radius: var(--sec-btn-radius) !important;
    font-weight: 500;
    line-height: 1;
    background-color: var(--sec-btn-bg) !important;
    color: var(--sec-btn-text) !important;
}
.mycf-btn-continue:hover,
.fcf-btn-cart:hover {
    background-color: var(--sec-btn-bg-hover) !important;
    color: var(--sec-btn-text-hover) !important;
    border-color: var(--sec-btn-border-color-hover) !important;
}

/* --- Стиль кнопки "Аналоги" --- */
button.mycf-analogs-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #007cba !important;
    background-color: #f0f9ff !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    border: 1px solid #bae6fd !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    line-height: normal !important;
    text-decoration: none !important;
}

button.mycf-analogs-btn:hover {
    background-color: #e0f2fe !important;
    border-color: #7dd3fc !important;
}

/* Стиль нової SVG іконки */
button.mycf-analogs-btn .fw-modal-svg {
    flex-shrink: 0;
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

button.mycf-analogs-btn:hover .fw-modal-svg {
    opacity: 1;
    transform: translate(1px, -1px); /* Легкий рух вгору-вправо при наведенні */
}

/* --- Анімація завантаження (Спінер замість іконки) --- */
button.mycf-analogs-btn.is-loading .fw-modal-svg {
    display: none !important; /* Ховаємо іконку */
}

/* Створюємо спінер */
button.mycf-analogs-btn.is-loading::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor; /* Беремо колір тексту (#007cba) */
    border-right-color: transparent; /* Один край прозорий для ефекту обертання */
    border-radius: 50%;
    animation: fw-btn-spin 0.6s linear infinite; /* Миттєва безперервна анімація */
}

@keyframes fw-btn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- QTY Buttons (+/-) --- */
.fci-qty-wrapper {
    display: flex; align-items: center;
    border: 1px solid var(--qty-btn-border);
    border-radius: var(--btn-radius);
}
.fci-qty-wrapper input {
    cursor: pointer;
}
.fci-qty-btn {
    width: 32px; height: 32px;
    background: var(--qty-btn-bg);
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    color: var(--qty-btn-icon);
    padding: 0;
    cursor: pointer;
}
.fci-qty-btn:hover {
    background: var(--qty-btn-bg-hover);
    color: var(--qty-btn-icon-hover);
}
/* WC Quantity Inputs (Cart Page) */
.woocommerce .quantity .input-text,
.woocommerce .quantity .qty,
.woocommerce .quantity input.qty {
    border-color: var(--qty-btn-border) !important;
    color: var(--qty-btn-icon) !important;
}

/* --- Remove Buttons (Links) --- */
.fci-remove-trigger,
.woocommerce .product-remove a {
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    background: var(--remove-bg-color) !important;
    padding: 0 !important;
    color: var(--remove-text-color) !important;
    transition: color 0.2s;
}
.fci-remove-trigger:hover,
.woocommerce .product-remove a:hover {
    background: var(--remove-bg-color_hover) !important;
    color: var(--remove-text-color_hover) !important;
}
/* Confirm YES/NO */
.wc-remove-confirm-yes {
    background: var(--remove-confirm-yes-bg) !important;
    color: var(--remove-confirm-yes-text) !important;
}
.wc-remove-confirm-no {
    background: var(--remove-confirm-no-bg) !important;
    color: var(--remove-confirm-no-text) !important;
}

/* --- Burger Button FIX --- */
.burger-trigger {
    width: 44px; height: 44px;
    flex-direction: column;
    gap: 5px;
    color: var(--burger-icon-color);
}
.burger-trigger span {
    display: block;
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--burger-icon-color) !important;
    transition: background 0.3s;
}


/* Layout */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 15px; height: 100%; }
.site-main .container { padding-top: var(--section-padding); padding-bottom: var(--section-padding); }

/* Header & Sticky */
.site-header, .desktop-header-group, .mobile-header-group { display: contents; }
.header-row { width: 100%; position: relative; z-index: 1000; color: var(--header-text); background-color: var(--header-bg-main); }
.header-top { background-color: var(--header-bg-top); font-size: 13px; border-bottom: 1px solid rgba(0,0,0,0.05); padding: 5px 0; }

/* FIX: width: 100% замість 100vw, щоб хедер не зсувався при scroll-lock */
.header-main { background-color: var(--header-bg-main); padding: 5px 15px; width: 100%;}

.header-bottom { background-color: var(--header-bg-btm, #fff); border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05); }
.header-mobile { background-color: var(--header-bg-main); padding: 10px 0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

.h-flex { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 15px; }
.sticky-row .h-flex { align-items: unset;}
.h-col { display: flex; align-items: center; gap: 20px; 
/*height: 100%;*/
}
.h-left { justify-content: flex-start; width: 25%;}
/* FIX: flex 1 1 auto allows shrinking, but we need min-width: 0 to prevent overflow */
.h-center { justify-content: center; min-width: 0; }
.h-right { justify-content: flex-end; width: 25%; }

.sticky-row { position: sticky; top: 0; z-index: 1100; box-shadow: 0 4px 10px rgba(0,0,0,0.08); border-bottom: 3px solid; border-image: linear-gradient(90deg, var(--header-bg-main), rgb(0 0 0), var(--header-bg-main)) 1;}

@media (max-width: 768px) {
    .h-center {
        display: block;
    }
}
/* --- WIDGET LOGIC --- */
.header-widget { display: flex; align-items: center; }
.header-widget ul { display: flex; gap: 15px; align-items: center; list-style: none; margin: 0; padding: 0; }
.panel-widget { width: 100%; display: block; }
.panel-widget ul { display: block; width: 100%; list-style: none; margin: 0; padding: 0; scrollbar-width: thin; }
.panel-widget li { display: block; width: 100%; margin: 0; }

.trigger-btn { background: none; border: none; padding: 5px; display: flex; align-items: center; justify-content: center; color: var(--header-icon); }
/* Burger styles moved above */

.search-trigger, .cart-trigger { width: 44px; height: 44px; position: relative; transition: all 0.3s; }
.search-trigger:hover, .cart-trigger:hover, .fw-search-submit:hover { color: var(--global-accent); }

.header-cart-count { position: absolute; top: -2px; right: -2px; background-color: var(--global-accent); color: #fff; font-size: 11px; font-weight: bold; min-width: 18px; height: 18px; line-height: 18px; border-radius: 50%; text-align: center; padding: 0 4px; opacity: 0; transform: scale(0.8); transition: 0.3s ease; }
.header-cart-count.visible { opacity: 1; transform: scale(1); }

/* Panels Base */
.offcanvas-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99998; opacity: 0; visibility: hidden; transition: 0.3s; }
.offcanvas-overlay.active { opacity: 1; visibility: visible; }

/* Left Panel */
.slide-panel { position: fixed; top: 0; left: -320px; width: 320px; height: 100vh; background: #ffffff; z-index: 2001; transition: transform 0.3s ease; box-shadow: 5px 0 15px rgba(0,0,0,0.1); overflow-y: auto; color: var(--global-text); }
.slide-panel.active { transform: translateX(320px); }
.slide-panel .panel-content { padding-top: 60px; flex: 1; display: flex; flex-direction: column; height: 100%; overflow: auto; padding-bottom: 0; }
.slide-panel .widget { padding: 0; width: 100%; }
.slide-panel .widget_nav_menu ul { width: 100%; display: block; }
.slide-panel .widget_nav_menu li { width: 100%; display: block; border-bottom: 1px solid rgba(0,0,0,0.05); margin: 0; }
.slide-panel .widget_nav_menu a { display: block; width: 100%; padding: 15px 20px; font-size: 16px; font-weight: 500; text-align: left; color: inherit; text-decoration: none; }
.slide-panel .widget_nav_menu a:hover { background-color: rgba(0,0,0,0.03); color: var(--global-accent); }

/* Right Panel */
.slide-panel-right { position: fixed; top: 0; right: -420px; width: 420px; max-width: 90vw; height: 100%; background: #ffffff; z-index: 99999; transition: transform 0.3s ease; box-shadow: -5px 0 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
.slide-panel-right.active { transform: translateX(-420px); }
.slide-panel.active .close-panel-wrap {
    height: 60px;
    position: fixed;
    width: 100%;
    z-index: 999;
    background: #ffffff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 15px;
}
.close-panel { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 28px; color: #333; z-index: 20; padding: 5px; line-height: 1; cursor: pointer; }
.burger-close {
    position: relative;
    top: 0;
    right: 0;
}
.panel-content { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; padding: 0; }
.slide-panel-right .widget { height: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; flex: 1 !important; }

/* MINI CART */
#fast-mini-cart-wrapper { display: flex; flex-direction: column; height: 100%; background: #fff; position: relative; flex: 1; }
.fast-cart-header { padding: 20px; border-bottom: 1px solid #eee; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; background: #fff; flex-shrink: 0; }
.fast-cart-header .close-panel-btn { font-size: 24px; background: none; border: none; color: #333; padding: 0; }
.fast-cart-list { flex: 1; overflow-y: auto; padding: 0 20px; -webkit-overflow-scrolling: touch; min-height: 0; }
.fast-cart-item { display: grid; grid-template-columns: 80px 1fr; gap: 15px; padding: 20px 0; border-bottom: 1px solid #eee; position: relative; }
.fci-image img { width: 100%; height: 100px; object-fit: contain; border-radius: 4px; background: #fff; border: 1px solid #eee; }
.fci-info { display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.fci-header { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #64748b; margin-bottom: 5px; line-height: 1.2; }
.fci-sku { flex-shrink: 1; }
.fci-sku-value { font-weight: 700; color: #1e293b; font-size: 13px; margin-left: 4px; }
.fci-unit-price { flex-shrink: 0; text-align: right; font-weight: 600; font-size: 13px; color: #333; }
.fci-name a { font-weight: 600; font-size: 14px; line-height: 1.3; color: #000; text-decoration: none; display: block; margin-bottom: 5px; }
.fci-name a:hover { color: var(--global-accent); }
.fci-subtotal { font-weight: 700; font-size: 16px; margin-top: 5px; margin-bottom: 10px; }
.fci-controls { display: flex; align-items: center; justify-content: space-between; position: relative; }
.fci-confirm-overlay { position: absolute; inset: 0; background: #fff; z-index: 10; display: none; align-items: center; justify-content: flex-end; gap: 10px; }
.fci-confirm-overlay span { font-size: 12px; color: var(--remove-text-color_hover); font-weight: 600; }
.fci-confirm-yes { padding: 2px 8px; font-size: 11px; border-radius: var(--btn-radius); cursor: pointer; border: 1px solid var(--remove-confirm-yes-bg); }
.fci-confirm-no { background: var(--remove-confirm-no-bg); color: var(--remove-confirm-no-text); padding: 2px 8px; font-size: 11px; border-radius: var(--btn-radius); cursor: pointer; border: 1px solid var(--remove-confirm-no-bg); }
.fci-qty-input { width: 40px; height: 32px; border: none; border-left: 1px solid var(--qty-btn-border); border-right: 1px solid var(--qty-btn-border); text-align: center; font-size: 14px; padding: 0; -moz-appearance: textfield; }
.fci-qty-input::-webkit-outer-spin-button, .fci-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.fci-remove-trigger:hover { color: var(--remove-text-color_hover); }
/* FIX: Z-Index 1110, щоб було вище sticky-bar (1100) */
.fast-cart-footer { padding: 20px; background: #fff; border-top: 2px solid #eee; z-index: 1110; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); flex-shrink: 0; padding-bottom: 30px; padding-bottom: calc(50px + env(safe-area-inset-bottom)); }
.fcf-total { display: flex; justify-content: space-between; font-size: 18px; margin-bottom: 20px; }
.fcf-buttons { display: flex; flex-direction: column; gap: 10px; }
.fcf-btn-checkout { width: 100%; text-align: center; padding: 15px; }
.fast-cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; padding: 20px; }
.search-overlay { position: fixed; inset: 0; background: #fff; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden !important; transition: 0.25s; }
.search-overlay.active { opacity: 1; visibility: visible !important; }
@media (min-width: 993px) { .show-on-mobile { display: none !important; } }
@media (max-width: 992px) {
    .hide-on-mobile { display: none !important; }
    .h-left, .h-right { flex: 1; }
    .slide-panel-right { width: 90vw; right: -95vw; height: 100%; }
    .slide-panel-right.active { transform: translateX(-95vw); }
    .fast-cart-footer { margin-bottom: 20px; }
    #offcanvas-panel .ac-cm-user-actions {
        /*flex-direction: column;*/
        width: 100%;
    }
    #offcanvas-panel .ac-cm-user-actions a,  #offcanvas-panel .fw-partner-login-btn {
        background: none;
        border: none;
        color: inherit;
        border-radius: 0;
        padding: 16px;
        width: 100%;
        justify-content: center;
    }
    #offcanvas-panel .ac-cm-user-actions a:hover, #offcanvas-panel .fw-partner-login-btn:hover {
        background-color: rgba(0, 0, 0, 0.03);
    color: var(--global-accent);
    }
    #offcanvas-panel .panel-widget p {
        margin: 0 !important;
    }
    #offcanvas-panel .ac-cm-user-actions .fw-partner-logout-btn {
        width: unset !important;
        height: unset !important;
        padding: 16px 24px;
    }
}

/* ==================================================================
SHOP & LIST STYLES
================================================================== */
.shop-layout { display: flex; gap: 30px; align-items: flex-start; }

.shop-sidebar-area { width: 250px; flex-shrink: 0; }
.shop-products-area { flex: 1; min-width: 0; width: 100%; }

.custom-shop-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: nowrap; gap: 20px; }
.shop-controls { display: flex; align-items: center; gap: 15px; }
.view-switcher { display: flex; gap: 5px; }
.view-btn { background: #f5f5f5 !important; border: none; padding: 8px; border-radius: 4px; color: #999 !important; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.view-btn.active, .view-btn:hover { background: var(--global-accent) !important; color: #fff !important; }
@media (max-width: 992px) {
    .shop-layout {
        flex-direction: column;
    }
    .custom-shop-header {
        margin-bottom: 0;
        flex-wrap: wrap;
    }
}
@media (min-width: 769px) and (max-width: 992px) {
    .custom-shop-header__bread-controls-wrap {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
}
@media (max-width: 768px) {
    .custom-shop-header__bread-controls-wrap {
        flex-wrap: wrap;
    }
}
/* GRID VIEW CARD */
#fast-shop-grid { width: 90%; margin: 0 auto; }

#fast-shop-grid.grid-view,
#fast-shop-global-results .grid-view { display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.fw-card { background: #fff; border: 1px solid #eee; border-radius: 8px; transition: box-shadow 0.3s, transform 0.3s; overflow: hidden; position: relative; height: 100%; display: flex; flex-direction: column; }
.fw-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.08); transform: translateY(-5px); }
.fw-card-inner { display: flex; flex-direction: column; height: 100%; }
.fw-card-thumb { position: relative; padding-bottom: 100%; background: #f9f9f9; overflow: hidden; flex-shrink: 0; }
.fw-card-thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.fw-card:hover .fw-card-thumb img { transform: scale(1.05); }
.fw-badge { position: absolute; top: 10px; left: 10px; background: #e74c3c; color: #fff; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 3px; z-index: 2; }
.fw-card-content { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.fw-cats { font-size: 11px; color: #999; margin-bottom: 5px; text-transform: uppercase; }
.fw-card-title { font-size: 13px; margin-bottom: 0; line-height: 1.4;  }
.fw-card-price { font-size: 18px; font-weight: 700; color: var(--global-accent); margin-bottom: 10px;  }
.fw-card-actions .button { width: 100%; text-align: center; }

/* LIST VIEW STYLES */
.products.mycf-list-view { display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; list-style: none !important; width: 100%; gap: 15px; }
.products.mycf-list-view .product { display: flex; width: 100%; padding: 15px 10px !important; border-bottom: 2px solid #00000020; margin: 0 !important; text-align: left; background: none; box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 10%); }
.products.mycf-list-view .product:last-child { border-bottom: none; }
.mycf-list-view .mycf-product-image { flex-shrink: 0; width: 100px; margin-right: 20px; align-content: center;}
.mycf-list-view .mycf-product-image img { width: 100%; height: auto; display: block; border-radius: 4px; object-fit: cover; margin: 0 !important; }
.mycf-list-view .mycf-product-details { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.mycf-list-view .mycf-top-row { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; 
  gap: 15px;}
.mycf-list-view .mycf-sku { font-size: 16px; font-weight: 700; color: #000; padding: 0 4px; border-radius: 4px; border: 1px solid #000; }
.mycf-list-view .woocommerce-loop-product__title { margin: 0; font-size: 1.1em; line-height: 1.3; font-weight: 600; transition: all 0.3s; padding: .5em 0; }
.mycf-list-view .woocommerce-loop-product__title:hover { color: var(--global-accent); }
.mycf-list-view .mycf-price-cart-row { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 10px; width: 100%; border-top: 1px dashed #eee; flex-wrap: wrap; gap: 10px; }
.mycf-list-view .price { font-size: 1.2em; font-weight: 700; color: #111; margin: 0 !important; }
.mycf-cart-wrapper-list { position: relative; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* FIX: Стилі кнопок у списку */
.mycf-list-view .button.mycf-list-cart-btn {
    display: flex !important; align-items: center; justify-content: center;  min-width: unset !important; margin: 0 !important;
}
.mycf-list-view .button.mycf-list-cart-btn svg { width: 22px; height: 22px; }

.mycf-in-cart-label { font-size: 0.85em; color: #4ab866; font-weight: 600; background: #eef9f0; padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.mycf-out-of-stock { color: #d63638; font-weight: 600; font-size: 0.9em; text-align: right; }

/* ==================================================================
FIXED MODALS (Z-INDEX & ANIMATION)
================================================================== */

.mycf-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: none;
}

#mycf-qty-modal { z-index: 100000 !important; }
#mycf-analogs-modal { z-index: 10005 !important; }

.mycf-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    /*transition: opacity 0.25s ease;*/
}

/* Мобільна адаптація для клавіатури */
@media (max-width: 768px) {
    .mycf-modal-overlay {
        align-items: flex-start;
        padding-top: 5vh;
    }
}

.mycf-modal-content { background: #fff; padding: 20px; border-radius: 5px; width: 300px; max-width: 90%; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center; max-height: 80vh; }
#fw-modal-body-content,
#mycf-analogs-modal-body {
    overflow-y: auto;
    max-height: calc(80vh - 80px);
    scrollbar-width: thin;
}
.mycf-modal-close, .analog-modal-close, .fw-modal-close { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #999; border: none; background: none; }
#mycf-modal-title { margin-top: 0; font-size: 1.2em; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; }
#mycf-modal-product-name { font-weight: 600; margin-bottom: 20px; font-size: 1em; color: #333; }
#mycf-modal-error { color: #d63638; background: #fdf2f2; border: 1px solid #e0caca; padding: 10px; margin-bottom: 15px; border-radius: 4px; font-size: 0.9em; text-align: left; }
.mycf-modal-actions { display: flex; justify-content: center; gap: 10px; }
#mycf-modal-qty { width: 70px !important; height: 40px !important; text-align: center; font-size: 1.2em; border: 1px solid #ddd; border-radius: 4px; }
#mycf-modal-add-btn { height: 40px; padding: 0 20px; }

/* === CUSTOMER REQUEST: Disable WooCommerce visual effects for modal add-to-cart button === */
#mycf-modal-add-btn.loading {
    padding-right: 20px !important;
    text-indent: 0 !important;
}
#mycf-modal-add-btn.loading::after { display: none !important; }

.mycf-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #4ab866; border-radius: 50%; color: #fff; margin-bottom: 15px; }
.mycf-success-title { font-size: 1.1em; font-weight: 600; color: #4ab866; margin-bottom: 15px; }
.mycf-success-actions { display: flex; flex-direction: column; gap: 10px; }
.mycf-btn-continue { padding: 10px; border-radius: var(--sec-btn-radius); cursor: pointer; }
.mycf-btn-checkout { padding: 10px; border-radius: var(--cart-btn-radius); cursor: pointer; font-weight: 500; text-decoration: none; display: block; }

/* Analogs Modal specific */
#mycf-analogs-modal .mycf-modal-content { width: 800px; padding: 40px 20px; }

/* FIX GRID IN ONE COLUMN */
#mycf-analogs-modal .products,
.products.mycf-list-view {
    display: flex !important;
    flex-direction: column !important;
}

#mycf-analogs-modal .product,
.products.mycf-list-view .product {
    /*display: flex !important;*/
    width: 100% !important;
    /*flex-direction: row !important;*/
}

@media (max-width: 768px) {
    .shop-sidebar { width: 100%; margin-bottom: 30px; }
    #fast-shop-grid.grid-view { grid-template-columns: repeat(2, 1fr); }
    .mycf-list-view .mycf-product-image { margin-right: 15px; }
}


/* ==================================================================
PAGE CART OVERRIDES (Шорткод [fast_page_cart])
================================================================== */

body.woocommerce-cart {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

body.woocommerce-cart .site-footer {
    display: none !important;
}

body.woocommerce-cart .site-main .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.fast-cart-page-wrapper {
    width: 100%;
    height: auto !important;
    min-height: 60vh;
    background: #fff;
    display: block;
    border: none;
    border-radius: 0;
    position: relative;
    padding-bottom: 160px;
}

.fast-cart-page-wrapper .close-panel-btn { display: none !important; }
.fast-cart-page-wrapper .fcf-btn-cart { display: none !important; }

.fast-cart-page-wrapper .fast-cart-list {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding-bottom: 0;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

.fast-cart-page-wrapper .fast-cart-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    /*z-index: 9999;*/
    z-index: 999;
    margin: 0;
    border-top: 1px solid #ddd;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
}

.fast-cart-page-wrapper .fast-cart-footer > div {
    max-width: 1000px;
    margin: 0 auto;
}

.fast-cart-page-wrapper .fast-cart-header {
    border-bottom: 2px solid #f5f5f5;
    background: #fafafa;
    border-radius: 0;
    display: flex;
    justify-content: center;
}
.fast-cart-page-wrapper .fast-cart-header > span {
    max-width: 1000px;
    width: 100%;
    padding: 0 20px;
}


/* =========================================
INTEGRATED SEARCH STYLES (STRICT FIX)
========================================= */

/* --- 1. SHARED BASE STYLES (GLOBAL) --- */
.fw-search-wrapper {
    position: relative;
    margin: 0 auto;
}

/* Кнопка-лупа (тригер) */
.fw-search-trigger {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--search-icon);
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

/* Поле вводу та контейнер */
.fw-input-group {
    display: flex;
    align-items: center;
    border: var(--search-border-width) solid var(--search-border);
    border-radius: var(--search-radius);
    background: var(--search-bg);
    overflow: hidden;
    position: relative; /* Важливо для absolute позиціювання хрестика */
    width: 100%;
}

.fw-search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 15px;
    /* Додаємо відступ справа, щоб текст не заїжджав під хрестик, коли він з'явиться */
    padding-right: 40px; 
    color: var(--search-text);
    outline: none;
    font-size: 16px;
    min-width: 0;
    -webkit-appearance: none; 
}
/* Прибираємо стандартні хрестики браузерів */
.fw-search-input::-webkit-search-decoration,
.fw-search-input::-webkit-search-cancel-button,
.fw-search-input::-webkit-search-results-button,
.fw-search-input::-webkit-search-results-decoration { -webkit-appearance: none; display: none; }

/* Кнопка "Надіслати" (Лупа всередині форми) */
.fw-search-submit {
    background: none;
    border: none;
    padding: 10px 15px;
    color: var(--search-icon);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 11;
}

/* Кнопка очищення (Хрестик) */
.fw-search-close {
    display: none; /* За замовчуванням сховано */
    
    /* --- FIX: ABSOLUTE POSITIONING --- */
    /* Тепер хрестик не штовхає сусідні елементи, а висить "над" ними */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* Відступаємо справа на ширину кнопки Submit (~45px) */
    right: 60px; 
    z-index: 10;
    
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    padding: 5px;
    cursor: pointer;
    color: #999;
}

/* ЛОГІКА ПОЯВИ: Тільки якщо є текст (.has-text додається через JS) */
.fw-search-wrapper.has-text .fw-search-close {
    display: block !important;
}

/* Валідаційні повідомлення */
.fw-search-validation-msg {
    position: absolute;
    font-size: 12px;
    margin-top: 4px;
    margin-left: 2px;
    font-weight: 500;
    line-height: 1.2;
    min-height: 16px;
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}
.fw-search-validation-msg:not(:empty) { opacity: 1; }
.fw-search-validation-msg.status-neutral { color: #999; }
.fw-search-validation-msg.status-error { color: #e74c3c; }


/* --- 2. DESKTOP LOGIC (Min-Width: 769px) --- */
@media (min-width: 769px) {

    /* --- MODE A: DESKTOP ICON (Expandable) --- */
    .fw-search-wrapper.desktop-icon {
        width: 44px;
        height: 44px;
        position: relative;
    }
    .fw-search-wrapper.desktop-icon .fw-search-trigger {
        display: flex !important; /* Показуємо лупу */
    }
    .fw-search-wrapper.desktop-icon .fw-search-container {
        display: none; /* Ховаємо форму */
        position: absolute;
        top: 100%;
        right: 0;
        width: 320px;
        padding: 15px;
        background: #fff;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        z-index: 1200;
        border-radius: 4px;
        margin-top: 10px;
    }
    .fw-search-wrapper.desktop-icon.active .fw-search-container {
        display: block; /* Показуємо форму при кліку */
    }

    /* --- MODE B: DESKTOP FORM (Full Width) --- */
    .fw-search-wrapper.desktop-form {
        width: 100%;
        /*max-width: 600px;*/
        display: block;
    }
    .fw-search-wrapper.desktop-form .fw-search-trigger {
        display: none !important; /* Ховаємо лупу */
    }
    .fw-search-wrapper.desktop-form .fw-search-container {
        display: block !important; /* Форма завжди видима */
        position: static;
        box-shadow: none;
        padding: 0;
        background: transparent;
    }
}


/* --- 3. MOBILE LOGIC (Max-Width: 768px) --- */
@media (max-width: 768px) {
    
    /* Скидання будь-яких стилів ширини, що могли прийти з десктопу */
    .fw-search-wrapper {
        max-width: none;
    }

    /* --- MODE A: MOBILE ICON (Expandable) --- */
    .fw-search-wrapper.mobile-icon {
        width: 44px;
        height: 44px;
        position: static; /* Важливо для позиціювання попапу на весь екран */
    }
    .fw-search-wrapper.mobile-icon .fw-search-trigger {
        display: flex !important; /* Завжди показуємо лупу */
    }
    .fw-search-wrapper.mobile-icon .fw-search-container {
        display: none; /* Ховаємо форму */
        position: fixed;
        top: var(--header-height, 60px); /* Під хедером */
        left: 0;
        right: 0;
        background: #fff;
        padding: 15px;
        z-index: 2000;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
    }
    .fw-search-wrapper.mobile-icon.active .fw-search-container {
        display: block; /* Показуємо форму */
    }

    /* --- MODE B: MOBILE FORM (Fixed Layout) --- */
    .fw-search-wrapper.mobile-form {
        /* Fix: width auto allows it to fit in the flex container without pushing neighbors */
        width: auto; 
        min-width: 0; /* Critical for Flexbox shrinking */
        flex: 1; 
        display: block; 
        padding: 0; 
    }
    .fw-search-wrapper.mobile-form .fw-search-trigger {
        display: none !important; /* Ховаємо лупу */
    }
    .fw-search-wrapper.mobile-form .fw-search-container {
        display: block !important; /* Форма завжди видима */
        position: static;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }
}


/* --- 4. LIVE RESULTS DROPDOWN (GLOBAL FIX) --- */
.fw-live-results {
    position: fixed;
    top: var(--header-height, 60px);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(5px);
    border-top: 1px solid #eee;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    display: none; /* Flex when active */
    flex-direction: column;
}
.fw-live-results.active {
    display: flex !important;
}

.fw-results-list,
.fw-zero-state {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px !important;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto !important;
    flex-direction: column;
    align-items: stretch !important; 
}

.fw-result-item {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
    list-style: none;
}
.fw-result-item:last-child { border-bottom: none; }

@media (max-width: 992px) {
    .fw-result-item .fw-res-title {
        padding: 4px 0 !important;
    }
    .fw-res-title:hover {
        color: var(--global-accent);
    }
}

.fw-view-all-wrap {
    flex-shrink: 0;
    padding: 15px;
    background: #fff;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.fw-view-all-btn {
    width: 100%;
    max-width: 400px;
    padding: 12px;
    background-color: var(--btn-bg, #111);
    color: var(--btn-text, #fff);
    border-radius: var(--btn-radius, 4px);
    border: 1px solid var(--btn-bg, #111);
    text-transform: uppercase;
    font-weight: 600;
}

/* Result Item Content */
.fw-res-inner { display: flex; gap: 15px; align-items: flex-start; }
.fw-res-img { width: 90px; flex-shrink: 0; }
.fw-res-img img { border-radius: 4px; }
.fw-res-details { flex: 1; min-width: 0; }
/*.fw-res-sku { font-size: 11px; color: #999; margin-bottom: 2px; }*/
.fw-res-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--global-text); margin-bottom: 5px; }
/*.fw-res-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; flex-wrap: wrap; }*/
.fw-res-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; flex-wrap: wrap; gap: 5px; }
.fw-res-price { font-size: 14px; font-weight: 700; color: #333; }
.fw-no-results { padding: 30px; text-align: center; color: #999; }

/* Small Cart Button inside Search */
.mycf-quantity-cart-group.small-group .small-btn {
    /*width: 32px !important; height: 32px !important; padding: 0 !important;*/
}
.mycf-quantity-cart-group.small-group svg { width: 20px; height: 20px; }

/* Highlight styles */
.mycf-search-info {
    margin-bottom: 5px;
}
.mycf-search-info mark.mycf-highlight {
    background-color: #fff176; color: #000; padding: 0 2px;
}



@media (min-width: 993px) {
    .fw-results-list,
    .fw-zero-state {
       width: 70%;
    }
    .fw-results-header {
        width: 70%;
        margin: 0 auto;
    }
    
    .fw-search-submit { color: #ffffff; background: #470606;}
    .fw-search-submit:hover { color: #000000; background: none;}
    .fw-input-group { border-color: #470606; border-width: 2px; }
}
/* ==================================================================
CUSTOM AJAX PAGINATION STYLES (fast-pagination)
================================================================== */

.fast-pagination {
    margin-top: 30px;
    text-align: center;
}

.fast-pagination .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.fast-pagination .page-numbers li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.fast-pagination .page-numbers a,
.fast-pagination .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--btn-radius); /* Використовуємо радіус кнопок */
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    /*border: 1px solid var(--search-border);*/
    border: 1px solid #1111111c;
    color: var(--global-text);
    background-color: var(--global-bg);
    text-decoration: none;
}

/* Стан 'Current' та 'Hover' */
.fast-pagination .page-numbers .current,
.fast-pagination .page-numbers a:hover {
    background-color: var(--global-accent);
    color: #ffffff;
    border-color: var(--global-accent);
}

/* Кнопки 'Next' / 'Prev' */
.fast-pagination .page-numbers .prev,
.fast-pagination .page-numbers .next {
    font-size: 16px; 
    font-weight: 700;
}
.fast-pagination .page-numbers .prev:hover,
.fast-pagination .page-numbers .next:hover {
    background-color: var(--global-accent);
    color: #ffffff;
}
@media (max-width: 576px) {
    /* Дозволяємо кнопкам переноситись на новий рядок, якщо не влазять */
    .fast-pagination .page-numbers {
        flex-wrap: wrap; 
        gap: 3px; /* Трохи менший відступ для мобільних */
    }

    /* Зменшуємо розмір кнопок на мобільному */
    .fast-pagination .page-numbers a,
    .fast-pagination .page-numbers span {
        min-width: 34px;
        height: 34px;
        font-size: 13px;
        padding: 0 5px;
    }
}
/* ==================================================================
SHOP SORTING (SELECT) STYLES
================================================================== */

.shop-sorting select.ajax-ordering {
    /* Скидання стандартних стилів */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--global-bg);
    
    /* Стилі як у view-btn */
    background: #f5f5f5 !important;
    border: none;
    padding: 8px 30px 8px 12px; /* Додаємо місце для кастомної стрілки */
    border-radius: var(--btn-radius); /* Використовуємо радіус кнопок */
    color: var(--global-text) !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    
    /* Розміщення кастомної стрілки */
    position: relative;
    z-index: 1; /* Переконаємося, що select поверх контейнера */
}

/* Оболонка для позиціонування стрілки */
.shop-sorting {
    position: relative;
    display: inline-block;
    /* Вирівнювання за висотою з іншими кнопками */
    height: 36px; 
    line-height: 36px;
}

/* Додавання кастомної стрілки вниз (SVG/Icon) */
.shop-sorting::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  position: absolute;
  right: 10px;
  pointer-events: none;
  z-index: 2;
  bottom: -3px;;
}

/* Hover-ефект для сортування */
.shop-sorting:hover select.ajax-ordering {
    background: #e5e5e5 !important;
}

/* Виправлення розміру шрифту для мобільних пристроїв */
@media (max-width: 768px) {
    .shop-sorting select.ajax-ordering {
        font-size: 13px;
        padding: 8px 30px 8px 10px;
    }
}



/* --- GRID CARD ACTIONS LAYOUT (UPDATED) --- */

/* 1. Контейнер: в один рядок, однакова висота */
.grid-view .fw-card-actions.grid-actions {
    display: flex;
    flex-direction: row;
    gap: 6px; /* Відступ між кнопками */
    align-items: stretch;
    height: auto; /* Фіксована висота кнопок */
    min-height: 40px;
}
@media (max-width: 768px) {
    .grid-view .fw-card-actions.grid-actions {
        flex-direction: column;
    }
}
/* 2. Елементи (Аналоги і Група кошика) ділять ширину */
.grid-view .mycf-analogs-btn,
.grid-view .mycf-quantity-cart-group {
    width: auto !important;
    margin: 0 !important;
    position: relative; /* База для абсолютного бейджа */
    height: 100%;
}
.grid-view .mycf-quantity-cart-group {
    flex: 1;
}
/* 3. Кнопка "Купити" на всю висоту */
.grid-view .mycf-quantity-cart-group button {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--btn-radius);
}

/* 4. Стиль бейджа (Overlay зверху справа) */
.grid-view .mycf-in-cart-label {
    position: absolute;
    top: -10px;
    right: -5px;
    font-size: 10px;
    line-height: 1;
    z-index: 5;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    background: #eef9f0;
    color: #4ab866;
    border: 1px solid #c3e6cb;
}

/* 5. "Немає в наявності" - ідентична висота */
.grid-view .mycf-out-of-stock-wrap {
    height: 100%;
    width: 100%;
}

.grid-view .mycf-out-of-stock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #f5f5f5;
    color: #999;
    font-size: 12px;
    border-radius: var(--btn-radius);
    border: 1px solid #eee;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    height: 40px;
}

.fcf-buttons .button.fcf-btn-cart {
    text-align: center;
}
.fw-card-actions.grid-actions .cart-icon {
    margin-left: 4px;
}


/* Layout Особистого кабінету */
.fw-account-wrapper {
    display: flex;
    gap: 40px;
    position: relative;
    min-height: 400px; /* Щоб не стрибало */
}

/* Сайдбар */
.fw-account-nav {
    width: 250px;
    flex-shrink: 0;
    border-right: 1px solid #eee;
    padding-right: 20px;
}
.fw-account-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fw-account-nav li {
    margin-bottom: 5px;
}
.fw-account-nav a {
    display: block;
    padding: 10px 15px;
    color: var(--global-text);
    text-decoration: none;
    border-radius: var(--btn-radius);
    transition: 0.2s;
}
.fw-account-nav li.is-active a,
.fw-account-nav a:hover {
    background: #f5f5f5;
    color: var(--global-accent);
    font-weight: 600;
}

/* Контент */
.fw-account-content-wrap {
    flex-grow: 1;
    position: relative;
}

/* Мобільна адаптація */
@media (max-width: 768px) {
    .fw-account-wrapper {
        flex-direction: column;
    }
    .fw-account-nav {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }
}

/* Спінер завантаження */
#fw-account-loader {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.7);
    z-index: 10;
    display: flex;
    justify-content: center;
    padding-top: 100px;
}
.fw-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    border-top-color: var(--global-accent);
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}


/* --- Dashboard Cards --- */
.fw-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.fw-dash-card {
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 30px 20px;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}
.fw-dash-card:hover {
    background: #fff;
    border-color: var(--global-accent);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}
.fw-dash-card .icon {
    font-size: 40px;
    margin-bottom: 15px;
}
.fw-dash-card h3 {
    font-size: 18px;
    margin: 0 0 10px;
}
.fw-dash-card p {
    font-size: 13px;
    color: #777;
    margin: 0;
}

/* --- Modal UI --- */
.fw-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    backdrop-filter: blur(2px);
    overflow-y: auto;
}
.fw-modal-wrap {
    background: #fff;
    width: 95%;
    max-width: 600px;
    margin: 50px auto;
    padding: 40px 20px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    /*min-height: 200px;*/
    /*max-height: 75vh;*/
    /*overflow-y: auto;*/
}
/*.fw-modal-close {*/
/* position: absolute;*/
/* top: 10px; right: 10px;*/
/* background: none;*/
/* border: none;*/
/* font-size: 28px;*/
/* line-height: 1;*/
/* color: #999;*/
/* cursor: pointer;*/
/*}*/
.fw-modal-close:hover { color: #000; }

/* --- Products List inside Modal --- */
.fw-modal-product-row {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}
.fw-modal-product-row:last-child { border-bottom: none; }
.fw-modal-product-row .img {
    width: 60px;
    flex-shrink: 0;
}
.fw-modal-product-row .img img {
    border-radius: 4px;
    width: 100%;
    height: auto;
}
.fw-modal-product-row .info {
    flex-grow: 1;
}
.fw-modal-product-row .info a {
    text-decoration: none;
    color: var(--global-heading);
}
.fw-modal-product-row .meta {
    font-size: 12px;
    color: #888;
}
.fw-modal-product-row .price {
    font-weight: bold;
    color: var(--global-heading);
}
/* Кнопка в модалці */
.fw-modal-product-row .small-btn {
    padding: 5px 10px;
    font-size: 12px;
    background: var(--btn-bg);
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
}

/* Special Prices Styles */
.fw-modal-product-row.special-row .type-label {
    color: var(--global-accent);
    background: rgba(0,0,0,0.05);
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 3px;
}


/* Виправлення списку всередині модалки */
#fw-modal-body-content .products.mycf-list-view {
    margin: 0;
    padding: 0;
    list-style: none;
}
#fw-modal-body-content .products.mycf-list-view li {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

#fw-account-content > p {
    display: none;
}

/* --- Account Modal Tweaks --- */

/* Клас для широкої модалки (наприклад, для замовлення) */
.fw-modal-wrap.fw-wide-modal {
    max-width: 900px; /* Ширше для таблиць замовлення */
}

/* Корекція заголовків всередині модалки */
.fw-modal-wrap h2, 
.fw-modal-wrap .woocommerce-order-details__title {
    font-size: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

/* Корекція таблиці замовлення, щоб вона виглядала гарно в модалці */
.fw-modal-wrap .woocommerce-table--order-details {
    margin-bottom: 20px;
    width: 100%;
    border-collapse: collapse;
}

.fw-modal-wrap .woocommerce-table--order-details th,
.fw-modal-wrap .woocommerce-table--order-details td {
    padding: 10px;
    border: 1px solid #eee;
}

.fw-modal-wrap address {
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 4px;
    font-style: normal;
    background: #f9f9f9;
}

/* --- Order Modal: Images & SKU --- */

/* Контейнер для фото + назва */
.fw-order-item-flex {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Мініатюра */
.fw-modal-order-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #eee;
    flex-shrink: 0;
    display: block;
}

/* Назва товару */
.fw-order-item-name {
    font-weight: 500;
    line-height: 1.3;
}

/* Артикул */
.fw-order-item-sku {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #888;
}

/* Адаптація таблиці замовлення для модалки */
.fw-modal-wrap .woocommerce-table--order-details th {
    background: #f9f9f9;
    font-weight: 600;
}
.order-again a {
    background: var(--btn-bg);
    color: var(--btn-text);
    padding: 10px;
    border-radius: 4px;
}
.order-again a:hover {
    background: var(--btn-bg-hover);
}
/* Щоб лінк на товар не був синім/підкресленим, якщо не хочемо */
.fw-order-item-name a {
    color: inherit;
    text-decoration: none;
}
.fw-order-item-name a:hover {
    color: var(--global-accent);
}


/* Робимо контейнери основою для кнопки */
.fw-card-thumb, 
.mycf-product-image a {
    display: block;
    position: relative !important;
    overflow: visible !important; /* Щоб кнопку не обрізало */
}

/* Кнопка "Лупа" - ПРИМУСОВИЙ ВИГЛЯД */
.fw-zoom-trigger {
    display: flex !important;
     position: absolute !important; 
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;;
     z-index: 999 !important; 
    /*background-color: #ffffff;*/
    border: none;
    color: #333;
    align-items: center;
    justify-content: center;
    /* padding: 0; */
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
}

.fw-zoom-trigger:hover {
    /*color: #ffffff;*/
    color: var(--global-accent);
}
@media (max-width: 768px) {
    .fw-zoom-trigger {
        height: 100%;
        background-color: transparent;
    }
}

/* Іконка всередині */
.fw-zoom-trigger svg {
    display: block !important;
}

/* Приховуємо лайтбокс у футері, щоб він не заважав, поки не натиснули */
.fw-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 1000000;
    align-items: center;
    justify-content: center;
}
.fw-lightbox-overlay.active {
    display: flex;
    flex-direction: column;
}
.fw-lightbox-content {
    position: relative;
}
.fw-lightbox-content #fw-lightbox-img {
    max-height: 85vh;
}
.fw-lightbox-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: #999;
    border: none;
    background: none;
    z-index: 99;
}

/* ==================================================================
   SINGLE PRODUCT CUSTOM STYLES
   ================================================================== */

.fw-single-layout {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-direction: column;
}

.fw-single-main {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Галерея зліва, Інфо справа */
    gap: 40px;
}

/* SIDEBAR & ANALOGS */
.fw-single-sidebar {
    /*width: 300px;*/
    flex-shrink: 0;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}
.fw-sidebar-title {
    font-size: 18px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 20px;
}
.fw-analogs-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Робимо картки в сайдбарі трохи компактнішими */
.fw-analogs-grid .fw-card-content {
    padding: 10px;
}
.fw-analogs-grid .fw-card-title {
    font-size: 12px;
}

/* GALLERY */
.fw-single-gallery {
    position: relative;
}
.fw-main-image-wrapper {
    position: relative;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #fff;
}
.fw-main-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}
/* Ваша кнопка зуму з functions.php вже має стилі, але позиціонуємо її */
.fw-main-image-wrapper .fw-zoom-trigger {
    z-index: 10;
}

.fw-gallery-thumbs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
}
.fw-thumb-item {
    width: 70px;
    height: 70px;
    border: 1px solid #eee;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.7;
    transition: 0.2s;
}
.fw-thumb-item:hover, .fw-thumb-item.active {
    opacity: 1;
    border-color: var(--global-accent);
}
.fw-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SUMMARY INFO */
.fw-single-title {
    font-size: 26px;
    line-height: 1.2;
    margin-bottom: 10px;
}
.fw-single-sku {
    color: #777;
    font-size: 13px;
    margin-bottom: 15px;
}
@media (min-width: 993px) {
    .fw-single-sku {
        margin-bottom: 0;
    }
}
.fw-single-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--global-accent);
    margin-bottom: 5px;
}
.fw-single-desc {
    margin-bottom: 30px;
    color: #555;
    font-size: 15px;
}

/* ACTIONS (BUY BTN) */
.fw-single-actions {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.fw-single-btn {
    width: 100%;
    height: 50px !important; /* Більша кнопка на сторінці товару */
    font-size: 16px !important;
}
.fw-single-buy-group {
    position: relative;
}
.mycf-in-cart-label.single-badge {
    top: -25px;
    right: 0;
    font-size: 12px;
}
.fw-single-btn-sec {
    width: 100%;
    text-align: center;
    padding: 12px;
}

/* Mobile Analogs Button Hide/Show Logic */
.fw-mobile-analogs {
    display: none;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .fw-single-layout {
        flex-direction: column;
    }
    .fw-single-sidebar.desktop-only {
        display: none; /* Ховаємо сайдбар */
    }
    .fw-mobile-analogs {
        display: block; /* Показуємо кнопку */
    }
    .fw-single-main {
        grid-template-columns: 1fr; /* Одна колонка */
        gap: 20px;
        width: 100%;
    }
}
/* --- ANALOGS MOBILE FIX --- */

/* Переконаємося, що на мобільному блок аналогів займає всю ширину */
@media (max-width: 992px) {
    .fw-single-sidebar {
        width: 100% !important; /* Розтягуємо на всю ширину */
        margin-top: 20px;       /* Відступ від основного контенту */
        display: block !important; /* Примусово показуємо */
    }
    
    /* Робимо сітку аналогів на мобільному (2 в ряд, або 1 в ряд) */
    .fw-analogs-grid {
        display: grid;
        grid-template-columns: 1fr; /* Одна колонка карток, щоб було гарно */
        gap: 15px;
    }
}
/* ==================================================================
   FIXED SINGLE PRODUCT STYLES (LIST VIEW ANALOGS)
   ================================================================== */

/* Скидаємо стилі списку для аналогів */
ul.fw-analogs-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Відстань між картками */
}

/* Адаптація карток списку під вузький сайдбар (Desktop) */
.fw-single-sidebar .mycf-list-item {
    /* Робимо картку трохи компактнішою, якщо треба */
    width: 100%;
    margin-bottom: 0; /* gap вже робить відступ */
    background: #fff;
    border: 1px solid #eee; /* Рамка навколо кожної картки */
}

/* Mobile Fixes */
@media (max-width: 992px) {
    .fw-single-sidebar {
        width: 100% !important; 
        margin-top: 30px;
        display: block !important;
        border: none; /* Прибираємо загальну рамку сайдбару на мобільному */
        background: transparent;
        padding: 0;
    }
    
    .fw-analogs-list {
        /* На мобільному список розтягнеться на всю ширину */
        width: 100%;
    }
}


/* ==================================================================
   FRONT PAGE STYLES (FINAL HYBRID)
   ================================================================== */

/* ==================================================================
   HERO SECTION (FIXED & CLEAN)
   ================================================================== */

.fw-hero-section {
    background: linear-gradient(135deg, #102a43 0%, #243b53 100%); /* Глибокий синій */
    color: #fff;
    padding: 40px 0 80px; /* Трохи зменшив відступи */
    text-align: center;
    position: relative;
}

/* --- 1. AUTH ZONE (REMASTERED: Transparent & Inline) --- */
.fw-auth-zone {
    background: transparent; /* Прибрали білий фон */
    box-shadow: none;        /* Прибрали тінь */
    padding: 0;
    margin: 0 auto 30px;     /* Відступ до заголовка */
    max-width: 900px;        /* Ширше для рядка */
    width: 100%;
}

/* Сітка для гостей (В ряд) */
.fw-auth-guest-grid {
    display: flex;
    align-items: flex-end; /* Вирівнювання по низу полів */
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.auth-col {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Заголовки полів (Білі і дрібні) */
.auth-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8); /* Світлий текст */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 2px;
}

/* Розділювач (Тонка лінія) */
.auth-divider {
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.2);
    align-self: center;
}

/* Стилізація форм всередині шорткодів (Глобально для Hero) */
.fw-auth-zone form {
    display: flex;
    gap: 8px;
    margin: 0;
}

.fw-auth-zone input {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(0, 0, 0, 0.2) !important; /* Напівпрозорий темний */
    color: #fff !important;
    padding: 0 12px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    height: 36px !important;
    width: auto !important;
    min-width: 140px;
    transition: 0.3s;
}

.fw-auth-zone input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.fw-auth-zone input:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: #fff !important;
}

.fw-auth-zone button {
    background: #fff !important;
    color: #102a43 !important; /* Колір тексту кнопки під фон херо */
    border: none !important;
    padding: 0 15px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    height: 36px !important;
    white-space: nowrap;
    transition: 0.3s;
}

.fw-auth-zone button:hover {
    background: var(--global-accent) !important; /* Акцент при наведенні */
    color: #fff !important;
}

/* Стиль для залогіненого користувача */
.fw-auth-logged-in {
    background: rgba(255, 255, 255, 0.1);
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- MOBILE ADAPTATION FOR AUTH --- */
@media (max-width: 768px) {
    .fw-auth-guest-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .fw-hero-content .fw-auth-guest-grid > a {
        color: #fff !important;
    }
    .fw-hero-content .fw-auth-guest-grid > a:hover {
        color: #000 !important;
    }
    .auth-divider {
        width: 100px;
        height: 1px;
        background: rgba(255,255,255,0.1);
    }
    .auth-col {
        width: 100%;
        max-width: 320px;
        align-items: center;
    }
    .fw-auth-zone form {
        width: 100%;
        justify-content: center;
    }
    .fw-auth-zone input {
        width: 100% !important;
    }
}


/* --- 2. HERO CONTENT --- */
.fw-hero-content {max-width: 800px;
    margin: 5px auto 0;
    z-index: 2;
    position: relative;
    padding-top: 30px;
    padding-bottom: 30px;
    background: linear-gradient(90deg, rgb(255 255 255 / 0%) 0%, rgb(0 0 0) 50% 50%, rgb(0 0 0 / 0%) 100%);
}
.fw-hero-content .fw-auth-guest-grid > a {
    color: #000;
}
.importer-badge { 
    background: var(--global-accent); 
    color: #fff; 
    padding: 5px 15px; 
    border-radius: 20px; 
    font-size: 11px; 
    font-weight: 700; 
    display: inline-block; 
    margin-bottom: 20px; 
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.fw-hero-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    line-height: 1.2;
}

.fw-sub-h1 {
    display: block;
    font-size: 16px;
    font-weight: 400;
    margin-top: 10px;
    opacity: 0.8;
}

/* SEARCH COMPLEX (Search + Viber) */
.fw-search-complex {
    background: #fff;
    padding: 6px;
    border-radius: 12px;
    display: flex;
    align-items: stretch;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3); /* Тінь стала глибшою для контрасту */
    margin: 0 auto 30px;
    max-width: 750px;
}

.fw-hero-search-form { flex-grow: 1; }
.input-group { display: flex; height: 100%; position: relative; align-items: center; }
.search-icon { position: absolute; left: 15px; color: #999; z-index: 5; }

.fw-main-input { 
    width: 100%; 
    height: 54px; /* Висота поля */
    border: none; 
    background: #f4f4f4; 
    padding: 0 15px 0 45px; 
    border-radius: 8px; 
    font-size: 16px; 
    outline: none; 
    color: #333;
}

.fw-search-btn { 
    /*height: 54px; */
    /*padding: 0 25px; */
    /*background: #222; */
    /*color: #fff; */
    /*border: none; */
    /*font-weight: 700; */
    /*cursor: pointer; */
    /*border-radius: 8px; */
    /*margin-left: 6px;*/
    /*font-size: 15px;*/
}

.search-divider { 
    display: flex; 
    align-items: center; 
    padding: 0 15px; 
    color: #aaa; 
    font-size: 11px; 
    font-weight: 700; 
}

.fw-viber-btn {
    background: #7360f2; /* Viber Brand Color */
    color: #fff; 
    text-decoration: none; 
    padding: 0 20px; 
    border-radius: 8px;
    display: flex; 
    align-items: center; 
    gap: 10px; 
    transition: 0.3s;
    height: 54px; /* Така ж висота як інпути */
    white-space: nowrap;
}
.fw-viber-btn:hover { background: #5a46db; transform: translateY(-1px); }

.viber-text { line-height: 1.2; text-align: left; }
.viber-text strong { display: block; font-size: 13px; }
.viber-text span { font-size: 10px; opacity: 0.9; }

/* Pulse Animation for Viber */
.pulse-green { animation: pulse-shadow 2s infinite; }
@keyframes pulse-shadow {
    0% { box-shadow: 0 0 0 0 rgba(115, 96, 242, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(115, 96, 242, 0); }
    100% { box-shadow: 0 0 0 0 rgba(115, 96, 242, 0); }
}

/* Brands Row */
.fw-hero-brands-row {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}
.brands-list {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0 0 0 10px;
    gap: 15px;
}
.brands-list li {
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

/* RESPONSIVE HERO */
@media (max-width: 768px) {
    .fw-hero-title { font-size: 28px; }
    
    .fw-search-complex { 
        flex-direction: column; 
        gap: 10px; 
        padding: 10px; 
        background: rgba(255,255,255,0.1); /* Прозорий на мобільному */
        box-shadow: none;
    }
    
    .fw-hero-search-form { width: 100%; }
    
    .fw-main-input { 
        border-radius: 8px; 
        background: #fff; /* Білий інпут */
    }
    
    .fw-search-btn { display: none; /* Ховаємо кнопку знайти (Enter працює) */ }
    
    .search-divider { 
        display: block; text-align: center; color: rgba(255,255,255,0.5); padding: 5px;
    }
    
    .fw-viber-btn { 
        width: 100%; 
        justify-content: center; 
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
}

/* === FAST SHOP SIDEBAR === */
#fast-shop-sidebar {
    background: #fff;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 30px;
}

.fast-filter-widget {
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}
.fast-filter-widget:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.fast-filter-widget .widget-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Категорії */
.product-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}
.product-categories li {
    margin-bottom: 8px;
    position: relative; /* Важливо для позиціювання стрілки */
}
.product-categories li a {
    text-decoration: none;
    color: #555;
    font-size: 13px;
    display: block;
    padding: 4px 0;
    transition: 0.2s;
}
.product-categories li a:hover {
    color: #007cba;
}

/* Стиль посилання в дереві (залишаємо місце під стрілку) */
.fast-cat-link {
    display: inline-block;
    width: calc(100% - 30px); 
    vertical-align: middle;
}

.fast-cat-link.active,
.fast-cat-link.current-cat {
    color: #007cba;
    font-weight: 600;
}

.product-categories .count {
    font-size: 11px;
    color: #999;
    float: right;
    font-weight: normal;
}

/* Кнопка Назад (якщо використовується) */
.cat-parent-go-back a {
    color: #e74c3c !important;
    font-weight: 600;
}

/* Чекбокси (Атрибути) */
.fast-filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fast-filter-list li {
    margin-bottom: 8px;
}
.fast-filter-list label {
    cursor: pointer;
    font-size: 14px;
    color: #444;
    display: flex;
    align-items: center;
}
.fast-filter-list input[type="checkbox"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    accent-color: #007cba;
}

/* === СТИЛЬ СТРІЛОЧКИ (АКОРДЕОН) === */
.fw-cat-toggle {
    position: absolute;
    right: 0;
    top: 5px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    /* Іконка галочки вниз */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    transition: transform 0.3s ease;
    z-index: 5;
}

/* Ховер ефект для стрілки */
.fw-cat-toggle:hover {
    background-color: rgba(0,0,0,0.03);
    border-radius: 50%;
}

/* Коли категорія відкрита (клас open додається через JS) */
.widget_product_categories li.open > .fw-cat-toggle {
    transform: rotate(180deg);
}

/* Стилі для випадаючого списку (дітей) */
.widget_product_categories ul.children {
    display: none; /* Спочатку приховано */
    padding-left: 20px;
    margin-top: 5px;
    border-left: 1px solid #eee;
}

/* ВАЖЛИВО: Залишаємо display: block ТІЛЬКИ для поточної категорії при завантаженні.
   Для li.open (клік JS) ми це правило ПРИБИРАЄМО, щоб не заважати slideToggle.
*/
.widget_product_categories li.current-cat > ul.children,
.widget_product_categories li.current-cat-parent > ul.children,
.widget_product_categories li.current-cat-ancestor > ul.children {
    display: block;
}

/* Блок активних фільтрів */
.fast-active-filters {
    background: #fdfdfd;
    padding: 12px 15px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    margin-bottom: 20px;
}

.fast-af-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #333;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #eee;
}

/* Список чіпів */
.fast-af-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Сам чіп (тег) */
.fast-af-chip {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px; /* Округлені краї */
    padding: 3px 10px;
    font-size: 12px;
    color: #555;
    line-height: 1.2;
    transition: all 0.2s;
}

.fast-af-chip:hover {
    border-color: #bbb;
    background: #fafafa;
}

/* Хрестик всередині чіпа */
.fast-af-remove {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    background: #eee;
    color: #888;
    border-radius: 50%;
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
    transition: all 0.2s;
}

.fast-af-remove:hover {
    background: #e74c3c; /* Червоний при наведенні */
    color: #fff;
    text-decoration: none;
}

/* Кнопка "Очистити все" */
.fast-reset-all {
    color: #e74c3c;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
}
.fast-reset-all:hover {
    text-decoration: underline;
}


/* --- 1. Стилі випадаючого меню (Desktop) --- */
/* Батьківський елемент */
.site-header .menu-item-has-children {
    position: relative;
}

/* Ховаємо підменю за замовчуванням */
.site-header .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 99999;
    padding: 10px 0;
    border-radius: 8px;
    list-style: none;
    border: 1px solid #eee;
    flex-direction: column;
}

/* Показуємо при наведенні на батька */
.site-header .menu-item-has-children:hover > .sub-menu,
.site-header .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Стилі посилань у підменю */
.site-header .sub-menu li {
    display: block;
    margin: 0;
}

.site-header .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: #333;
    font-size: 14px;
    white-space: nowrap; /* Щоб текст не переносився */
    transition: 0.2s;
}

.site-header .sub-menu a:hover {
    background: #f8f9fa;
    color: var(--menu-active-color); /* ВИКОРИСТОВУЄМО ЗМІННУ ДЛЯ HOVER */
    padding-left: 25px; /* Ефект зсуву при наведенні */
}

/* --- 2. ПІДСВІТКА АКТИВНОЇ СТОРІНКИ (Супер важливо!) --- */

/* Якщо ми на конкретній сторінці (напр. Доставка) - підсвічуємо саме її */
.site-header .current-menu-item > a {
    color: var(--menu-active-color) !important; /* ВИКОРИСТОВУЄМО ЗМІННУ */
    font-weight: 700;
}

/* Якщо ми всередині "Інформація", то підсвічуємо і батьківський пункт "Інформація" */
.site-header .current-menu-parent > a,
.site-header .current-menu-ancestor > a {
    color: var(--menu-active-color) !important; /* ВИКОРИСТОВУЄМО ЗМІННУ */
    position: relative;
}

/* Додаємо крапку під активним батьківським пунктом */
/*.site-header .current-menu-parent > a::after,*/
/*.site-header .current-menu-ancestor > a::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    bottom: -5px;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    width: 5px;*/
/*    height: 5px;*/
/*    background: var(--menu-active-color); */
/*    border-radius: 50%;*/
/*}*/
/* Відступ для підменю на мобільному */
.mobile-header-group .sub-menu {
    display: none; /* Зазвичай відкривається JS-ом теми, але про всяк випадок */
    background: rgba(0,0,0,0.03); /* Трохи темніший фон */
    padding-left: 20px !important;
}

/* Коли клас 'toggled-on' додається скриптом теми при кліку */
.mobile-header-group .menu-item-has-children.active .sub-menu,
.mobile-header-group .sub-menu.toggled-on {
    display: block;
}

.mobile-header-group .sub-menu a {
    font-size: 14px;
    padding: 10px 0;
}
/* ==================================================================
   MOBILE MENU ACCORDION & ACTIVE STATES
   ================================================================== */

/* 1. ПІДСВІТКА АКТИВНИХ СТОРІНОК (Глобально) */
/* Це фарбує "Головна", "Магазин" або активну сторінку в червоний */
.current-menu-item > a,
.current_page_item > a {
    color: var(--menu-active-color) !important; /* ВИКОРИСТОВУЄМО ЗМІННУ */
    font-weight: 700;
}

/* 2. ПІДСВІТКА БАТЬКІВСЬКОГО ПУНКТУ */
/* Якщо ти на сторінці "Доставка", то пункт "Інформація" теж буде активним */
.current-menu-parent > a,
.current-menu-ancestor > a {
    color: var(--menu-active-color) !important; /* ВИКОРИСТОВУЄМО ЗМІННУ */
    font-weight: 600;
}

/* --- МОБІЛЬНЕ МЕНЮ (АКОРДЕОН) --- */
@media (max-width: 992px) {
    
    /* Базовий стиль посилань меню */
    .mobile-header-group ul li a {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid #f5f5f5;
        font-size: 16px;
        position: relative;
        text-decoration: none;
        color: var(--global-text);
    }

    /* Стиль для батьківського пункту (Інформація) */
    .mobile-header-group .menu-item-has-children > a {
        padding-right: 40px; /* Місце для стрілки */
    }

    /* Малюємо ПЛЮСИК (+) або стрілку */
    .mobile-header-group .menu-item-has-children > a::after {
        content: '+'; /* Можна замінити на url() з іконкою */
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #999;
        font-weight: 300;
        transition: transform 0.3s;
    }

    /* Коли меню відкрите (клас .open додасть JS) */
    .mobile-header-group .menu-item-has-children.open > a::after {
        content: '−'; /* Мінус */
        color: var(--menu-active-color); /* ВИКОРИСТОВУЄМО ЗМІННУ */
        font-weight: 700;
    }
    
    /* Якщо активний батьківський пункт - фарбуємо плюсик */
    .mobile-header-group .menu-item-has-children.current-menu-parent > a::after {
        color: var(--menu-active-color); /* ВИКОРИСТОВУЄМО ЗМІННУ */
    }

    /* ПІДМЕНЮ (Спочатку сховане) */
    .mobile-header-group .sub-menu {
        display: none; /* JS це перемкне на display: block */
        padding-left: 20px;
        background: #fafafa;
        border-left: 2px solid #eee;
        margin-bottom: 10px;
    }

    .mobile-header-group .sub-menu li a {
        font-size: 14px;
        padding: 10px 0;
        border-bottom: 1px dashed #eee;
        color: #555;
    }
    
    .mobile-header-group .sub-menu li:last-child a {
        border-bottom: none;
    }
}
/* === MOBILE ACCORDION FIX === */
@media (max-width: 992px) {
    /* Ховаємо підменю за замовчуванням і в хедері, і в боковій панелі */
    .mobile-header-group .sub-menu,
    #offcanvas-panel .sub-menu {
        display: none;
        /*padding-left: 20px;*/
        background: #fafafa;
        border-left: 2px solid #eee;
    }
    .mobile-header-group .sub-menu a,
    #offcanvas-panel .sub-menu a {
        padding-left: 40px;
    }
    #offcanvas-panel .sub-menu a::before {
    content: "";
    display: block;
    width: 2px;
    height: 60%;
    background-color: #ff000033;
    position: absolute;
    top: 20%;
    margin: 0 -10px;
}
    /* Стиль посилань */
    .mobile-header-group ul li a,
    #offcanvas-panel ul li a {
        position: relative;
        /*display: block;*/
        /*padding: 12px 0;*/
        /*border-bottom: 1px solid #f5f5f5;*/
    }

    /* Додаємо ПЛЮСИК */
    .mobile-header-group .menu-item-has-children > a::after,
    #offcanvas-panel .menu-item-has-children > a::after {
        content: '+';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: #999;
        transition: transform 0.3s;
    }

    /* Активний стан (МІНУС) */
    .mobile-header-group .menu-item-has-children.open > a::after,
    #offcanvas-panel .menu-item-has-children.open > a::after {
        content: '−';
        color: var(--menu-active-color); /* ВИКОРИСТОВУЄМО ЗМІННУ */
        font-weight: 700;
    }
}


/* === GLOBAL INFO NAVIGATION (PRE-FOOTER) === */
.fw-global-nav-section {
    background: #fff;
    border-top: 1px solid #eee;
    padding: 40px 0;
    margin-top: 0; /* Прибрати відступи якщо є */
}

.fw-gn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 280px;
    gap: 40px;
}

.fw-gn-title {
    font-size: 13px;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 15px;
    letter-spacing: 1px;
    font-weight: 700;
}

.fw-gn-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fw-gn-list li {
    margin-bottom: 8px;
}

.fw-gn-list a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: #444;
    text-decoration: none;
    border-radius: 6px;
    transition: 0.2s;
    font-weight: 500;
    font-size: 15px;
    background: #f8f9fa; /* Легкий фон за замовчуванням */
}

.fw-gn-list a:hover {
    background: #eef4ff;
    color: #007cba;
    padding-left: 15px; /* Ефект зсуву при наведенні */
}

/* Активний пункт */
.fw-gn-list li.active a {
    background: var(--menu-active-color); /* ВИКОРИСТОВУЄМО ЗМІННУ */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Нейтральна тінь */
}

/* Блок менеджера */
.fw-gn-manager-box {
    background: #fdfdfd;
    padding: 25px;
    text-align: center;
    border-radius: 12px;
    border: 1px dashed #ddd;
}

.fw-gn-manager-box p {
    margin: 0 0 15px;
    font-weight: 700;
    color: #333;
    font-size: 16px;
}

.fw-gn-btn {
    display: inline-block;
    background: #7360f2;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
    width: 100%;
    box-sizing: border-box;
    transition: 0.3s;
}

.fw-gn-btn:hover {
    background: #5e4cc4;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(115, 96, 242, 0.3);
}

/* Мобільна адаптація (Як на скріншоті) */
@media (max-width: 768px) {
    .fw-gn-grid {
        grid-template-columns: 1fr; /* Один під одним */
        gap: 30px;
    }
    
    .fw-global-nav-section {
        padding: 30px 0 50px;
        background: #fafafa; /* Трохи темніший фон на мобільному */
    }
    
    .fw-gn-list a {
        background: #fff;
        border: 1px solid #eee;
        padding: 12px 15px; /* Більші кнопки для пальця */
    }
    
    .fw-gn-manager-box {
        background: #fff;
        border-style: solid;
        box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    }
}

/*html.fw-search-active,*/
/*        body.fw-search-active {*/
/*            overflow: hidden !important;*/
/*            touch-action: none; */
/*            width: 100%; */
/*        }*/

        /* --- ВСТАВИТИ ТУТ --- */
        @keyframes fw-shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

        .fw-shake {
            animation: fw-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
            border-color: #e74c3c !important;
        }
        .fw-shake::placeholder {
            color: #e74c3c !important;
            opacity: 0.7;
        }

       .header-cart-link.cart-panel-trigger {
            display: flex;
            align-items: center;
       }
       
       
.woocommerce-cart .entry-header {
    display: none !important;
}       
       
       
/* ==================================================================
   INLINE ANALOGS SCROLLBOX (SINGLE PRODUCT)
   ================================================================== */
.fw-inline-analogs {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.fw-inline-analogs-title {
   font-size: 18px;
  margin-bottom: 15px;
  font-weight: 600;
  box-shadow: 0px 7px 5px -7px #000000a1;
  padding: 3px 10px;
}

/* Контейнер зі скролом */
.fw-analogs-scrollbox {
    max-height: 520px; /* Висота приблизно на 2.5 картки (щоб було видно, що є ще) */
    overflow-y: auto;
    padding-right: 10px; /* Відступ, щоб скрол не налізав на контент */
    
    /* Сучасна стилізація скролбару для Firefox */
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

/* Сучасна стилізація скролбару для Chrome/Safari/Edge */
.fw-analogs-scrollbox::-webkit-scrollbar {
    width: 6px;
}
.fw-analogs-scrollbox::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 10px;
}
.fw-analogs-scrollbox::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}
.fw-analogs-scrollbox::-webkit-scrollbar-thumb:hover {
    background-color: var(--global-accent);
}

/* Прибираємо нижній margin у останньої картки в списку, щоб не було зайвого місця */
.fw-analogs-scrollbox .products.mycf-list-view {
    margin: 0 !important;
    padding: 0 !important;
}
#fw-lightbox-img {
    transition: opacity 0.3s ease-in-out;
    position: relative;
    z-index: 2;
    transform-origin: center center; /* Точка масштабування по центру */
    will-change: transform; /* Апаратне прискорення для плавності на слабких Android */
}