/* ========================================
   NORD HEADER (Без Bootstrap та CSS-змінних)
   ======================================== */

.nord-header-wrapper {
    position: relative;
    z-index: 1000;
}

/* Сітка для ПК: [Ліво] [Центр] [Право] */
.nord-header {
    display: grid;
    grid-template-areas: "left center right";
    grid-template-columns: auto 1fr auto;
    align-items: center;
    background-color: #cadbcd;
    padding: 20px 60px;
    gap: 30px;
}

/* --- Ліва секція --- */
.nord-top-left {
    grid-area: left;
    display: flex;
    align-items: center;
    gap: 16px;
}

.nord-nav-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nord-logo {
    display: flex;
    align-items: center;
    font-size: 26px;
    font-weight: 500;
    color: #111;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.nord-icon {
    width: 22px;
    height: 22px;
    background-image: url('/icos/nord.ico');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 2px;
    margin-bottom: 2px;
}

/* --- Центральна секція (Пошук) --- */
.nord-search {
    grid-area: center;
    display: flex;
    justify-content: center;
    width: 100%;
}

.nord-vue-app {
    width: 100%;
    max-width: 650px;
}

/* --- Права секція --- */
.nord-top-right {
    grid-area: right;
    display: flex;
    align-items: center;
    gap: 24px;
}

.nord-auth {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nord-login {
    color: #111;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
}

.nord-register {
    background-color: #53bd58;
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.nord-register:hover {
    background-color: #49a74e;
    color: #000000;
}

.nord-cart {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #111;
}

.nord-cart-badge {
    font-size: 13px;
    font-weight: 600;
    padding: 3px 6px;
    border: 1px solid #53bd58;
    border-radius: 6px;
    background: transparent;
}

/* --- Меню налаштувань профілю (ПК) --- */
.nord-dropdown-container {
    position: relative;
}

.nord-user-toggle {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.nord-dropdown-list {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 8px;
    list-style: none;
    padding: 10px 0;
    min-width: 160px;
    margin-top: 10px;
}

.nord-dropdown-list li a,
.nord-dropdown-list .nord-logout-btn {
    display: block;
    width: 100%;
    padding: 10px 20px;
    text-align: left;
    color: #333;
    text-decoration: none;
    background: none;
    border: none;
    font-size: 15px;
    cursor: pointer;
}

.nord-dropdown-list li a:hover,
.nord-dropdown-list .nord-logout-btn:hover {
    background: #f5f5f5;
}
/* ========================================
   ГОЛОВНЕ МЕНЮ (Горизонтальна смуга на ПК)
   ======================================== */

.nord-menu-overlay {
    width: 100%;
    background-color: #cadbcd; /* Зелений фон як у шапки */
    padding: 15px 60px 20px 60px; /* Вирівнювання по краях шапки */
    border-top: 1px solid rgba(0, 0, 0, 0.08); /* Легка лінія відділення */
    display: block; /* За замовчуванням видиме як блок (якщо не приховане JS) */
}

/* Приховуємо меню, коли JS додає клас .hidden */
.nord-menu-overlay.hidden {
    display: none !important;
}

.nord-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row; /* На ПК елементи в один горизонтальний ряд */
    justify-content: flex-start; /* Притиснуті вліво */
    align-items: center;
    gap: 35px; /* Відстань між посиланнями */
}

.nord-nav-links > li {
    position: relative; /* Для правильного випадання підменю */
}

.nord-nav-links a {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: color 0.2s;
}

.nord-nav-links a:hover {
    color: #000;
}

/* Підменю (Сторінки) на ПК - акуратний білий блок знизу */
.nord-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 10px 15px;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    list-style: none;
    margin-top: 15px;
    min-width: 160px;
    z-index: 100;
}

.nord-submenu.hidden {
    display: none !important;
}

.nord-submenu a {
    font-size: 14px;
    color: #444;
    display: block;
    padding: 5px 0;
}

.nord-logout-mobile {
    background: none;
    border: none;
    font-size: 18px;
    color: #dc3545 !important;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
}

/* Утиліти видимості */
.hidden { display: none !important; }
.desktop-only { display: flex; }
.mobile-only { display: none; }

/* ========================================
   АДАПТИВНІСТЬ (MOBILE)
   ======================================== */
@media (max-width: 768px) {
    /* Перебудовуємо сітку. Рядок пошуку падає вниз */
    .nord-header {
        grid-template-areas:
            "left right"
            "center center";
        grid-template-columns: 1fr auto;
        padding: 0;
        background-color: transparent;
        gap: 0;
    }

    /* Верхня шапка зелена (Фіксована висота для ідеального меню) */
    .nord-top-left {
        background-color: #cadbcd;
        padding: 0 0 0 20px;
        height: 64px;
    }

    .nord-top-right {
        background-color: #cadbcd;
        padding: 0 20px 0 0;
        height: 64px;
    }

    /* Рядок пошуку на білому фоні сторінки ПІД зеленою шапкою */
    .nord-search {
        background-color: #fff;
        padding: 15px 20px;
    }

    /* Меню виїжджає рівно з-під зеленої шапки, ПЕРЕКРИВАЮЧИ пошук */
    .nord-menu-overlay {
        position: absolute; /* Повертаємо абсолютне позиціонування */
        top: 64px; /* Дорівнює висоті верхньої зеленої смуги */
        left: 0;
        width: 100%;
        height: calc(100vh - 64px);
        background-color: #fff; /* ЧИСТИЙ БІЛИЙ ФОН */
        padding: 40px 20px;
        border-top: none;
        z-index: 1001; /* Перекриває все інше */
        overflow-y: auto; /* Дозволяє скролити пункти меню */
        padding-bottom: 80px;
    }

    .nord-nav-links {
        flex-direction: column; /* Вертикально */
        align-items: center;
        gap: 25px;
    }

    .nord-nav-links a {
        font-size: 18px; /* Більший шрифт на телефоні */
        color: #111;
    }

    /* Підменю на мобільному (без фону і тіней, просто розгортається вниз) */
    .nord-submenu {
        position: static;
        background: transparent;
        box-shadow: none;
        padding: 15px 0 0 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .nord-submenu a {
        font-size: 16px;
        color: #555;
        padding: 0;
    }

    /* Ховаємо авторизацію з шапки і показуємо у випадаючому меню */
    .desktop-only { display: none !important; }
    .mobile-only {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    body.no-scroll {
        overflow: hidden !important;
    }

    .nord-mobile-auth {
        width: 80%; /* Лінія буде акуратною по центру, а не на всю ширину екрану */
        max-width: 300px;
        border-top: 1px solid #e0e0e0; /* Сама сіра лінія */
        padding-top: 15px; /* Відступ від лінії до "Вхід" або "Особистий кабінет" */
        margin-top: 10px;  /* Відступ від "Відгуки" до лінії */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile-panel{
        margin-top: 15px;
        color: #53bd58;
    }

    .mobile-login{
        margin-top: 15px;
    }

    .mobile-register{
        color: #53bd58;
        font-weight: 600;
    }
}

/* ========================================
   БАЗОВІ КОНТЕЙНЕРИ
   ======================================== */
.nord-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 40px;
    margin-bottom: 30px;
}

.mt-section {
    margin-top: 30px;
    min-height: calc(90vh - 100px);
}

.nord-section {
    margin-bottom: 50px;
}

.nord-section-title {
    font-size: 24px;
    font-weight: 600;
    color: #111;
    margin: 30px 0;
    text-align: left; /* Заголовки зліва, як на мобільному дизайні */
}

/* ========================================
   ХЛІБНІ КРИХТИ
   ======================================== */
.nord-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #666;
    padding: 0px 0 40px 0;
    overflow-x: auto; /* Дозволяємо прокрутку */
    white-space: nowrap; /* Забороняємо перенос на новий рядок */
    -webkit-overflow-scrolling: touch; /* Плавний скрол на iOS */
}

/* Забороняємо елементам стискатися, коли їм мало місця */
.nord-breadcrumbs a,
.nord-breadcrumbs span {
    flex-shrink: 0;
}

.nord-breadcrumbs a {
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}

.nord-breadcrumbs a:hover {
    color: #111;
}

.nord-breadcrumbs .sep {
    color: #aaa;
}

.nord-breadcrumbs .current {
    color: #111;
    font-weight: 500;
}

/* --- Ховаємо некрасивий системний скролбар --- */
/* Для Chrome, Safari, Edge */
.nord-breadcrumbs::-webkit-scrollbar {
    display: none;
}
/* Для Firefox та старих браузерів */
.nord-breadcrumbs {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ========================================
   СІТКА КАТЕГОРІЙ (GRID)
   ======================================== */
.nord-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 колонки на ПК */
    gap: 20px;
}

/* Картка категорії */
.nord-category-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* Пропорція трохи витягнута у висоту, як на фото */
    text-decoration: none;
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nord-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Зображення */
.nord-category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.nord-category-card:hover .nord-category-img {
    transform: scale(1.05); /* Легке збільшення фото при наведенні */
}

/* Затемнення (Overlay) для читабельності білого тексту */
.nord-category-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Напівпрозорий чорний шар */
    z-index: 1;
    transition: background 0.3s ease;
}

.nord-category-card:hover .nord-category-overlay {
    background: rgba(0, 0, 0, 0.5); /* Трохи темнішає при наведенні */
}

/* Заголовок категорії (По центру) */
.nord-category-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    z-index: 2;
    margin: 0;
}

.nord-products-wrapper {
    width: 100%;
    /* Якщо ваш <x-products> використовує Bootstrap row, він буде нормально працювати всередині цього блоку */
}

/* ========================================
   АДАПТИВНІСТЬ (MOBILE & TABLET)
   ======================================== */

@media (max-width: 992px) {
    .nord-categories-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 колонки на планшеті */
    }
}

@media (max-width: 768px) {
    .nord-container {
        padding: 0 20px;
    }

    .mt-section {
        margin-top: 10px;
    }

    .nord-categories-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки на телефоні */
        gap: 12px; /* Менші відступи на телефоні */
    }

    .nord-section-title {
        font-size: 20px;
    }

    .nord-category-title {
        font-size: 15px; /* Менший шрифт для довгих назв на мобільному */
    }
}

@media (max-width: 480px) {
    .nord-category-card {
        aspect-ratio: 1 / 1.2; /* Ще більше витягуємо на малих екранах */
    }
}

/* ========================================
   СІТКА ТОВАРІВ (Логіка 3 або 4 колонок)
   ======================================== */
.nord-products-grid {
    display: grid;
    gap: 40px 20px; /* Вертикальний (40px) і горизонтальний (20px) відступи */
    width: 100%;
}

/* Аналог col-lg-3 (4 товари) */
.nord-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Аналог col-lg-4 (3 товари) */
.nord-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
/* ========================================
   АДАПТИВНІСТЬ
   ======================================== */
@media (max-width: 1024px) {
    /* На планшетах всі сітки стають по 3 колонки */
    .nord-grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    /* На телефонах всі сітки стають по 2 колонки */
    .nord-products-grid {
        gap: 25px 12px;
    }
    .nord-grid-4, .nord-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   УНІВЕРСАЛЬНІ КНОПКИ
   ======================================== */
/* Головна зелена кнопка (текст завжди білий!) */
.nord-btn-primary {
    background-color: #53bd58;
    color: #ffffff !important; /* Гарантовано білий текст */
    border: none;
    border-radius: 6px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s, transform 0.1s;
}

.nord-btn-primary:hover {
    background-color: #00b355;
    color: #ffffff !important;
}

.nord-btn-primary:disabled {
    opacity: 0.2;
}

.nord-btn-primary:active { transform: scale(0.98); }

/* Другорядна біла кнопка (Продовжити покупки) */
.nord-btn-secondary {
    background-color: #fff;
    color: #111;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    transition: border-color 0.2s;
}
.nord-btn-secondary:hover { border-color: #111; }

/* ========================================
   СТАН "ПУСТА КОРЗИНА"
   ======================================== */
.nord-empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 0;
}

.nord-empty-cart h2 {
    font-size: 32px;
    font-weight: 600;
    color: #111;
    margin-bottom: 10px;
}

.nord-empty-cart p {
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
}

.nord-empty-cart .nord-btn-primary {
    padding: 10px 40px;
    min-width: 280px;
}

.nord-cart-actions .nord-btn-primary {
    padding: 10px 40px;
    min-width: 280px;
}

.nord-cart-actions .nord-btn-secondary {
    padding: 10px 40px;
    min-width: 280px;
}

/* ========================================
   СПИСОК ТОВАРІВ У КОРЗИНІ
   ======================================== */
.nord-cart-list {
    border-top: 1px solid #eee;
}

.nord-cart-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    gap: 20px;
}

.nord-cart-img {
    width: 80px;
    object-fit: cover;
    border-radius: 8px;
    background: #f9f9f9;
    flex-shrink: 0;
}

.nord-cart-title-wrap {
    flex-grow: 1; /* Назва займає весь вільний простір */
    min-width: 200px;
}

.nord-cart-title {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    text-decoration: none;
    line-height: 1.4;
    display: block;
}

.nord-cart-attr-wrap {
    width: 15%; /* Фіксована ширина для колонки атрибутів */
    min-width: 100px;
}

.nord-cart-attr {
    font-size: 15px;
    color: #555; /* Трохи тьмяніший колір, щоб відрізнялося від назви */
    font-weight: 500;
}

.nord-cart-controls {
    display: flex;
    align-items: center;
    gap: 40px; /* Відстань між кількістю, ціною та хрестиком */
}

/* Вибір кількості (+ / -) */
.nord-qty-selector {
    display: flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    height: 40px;
}

.nord-qty-selector button {
    background: transparent;
    border: none;
    width: 35px;
    height: 100%;
    cursor: pointer;
    font-size: 18px;
    color: #111;
    transition: background 0.2s;
}

.nord-qty-selector button:hover { background: #f5f5f5; }

.nord-qty-selector input {
    width: 45px;
    height: 100%;
    border: none;
    border-left: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: #111;
    padding: 0;
    -moz-appearance: textfield; /* Ховаємо стрілочки в Firefox */
}
/* Ховаємо стрілочки в Chrome/Safari */
.nord-qty-selector input::-webkit-outer-spin-button,
.nord-qty-selector input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Ціна (Зелена) */
.nord-cart-price {
    font-size: 16px;
    font-weight: 600;
    color: #00c65e; /* Акцентний зелений з дизайну */
    min-width: 80px;
    text-align: right;
}

/* Кнопка видалення (Хрестик) */
.nord-btn-remove {
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.nord-btn-remove:hover { border-color: #111; }

/* ========================================
   ПІДВАЛ КОРЗИНИ
   ======================================== */
.nord-cart-footer {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 25px;
}

.nord-cart-total {
    font-size: 20px;
    font-weight: 700;
    color: #111;
}

.nord-cart-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    justify-content: space-between;
}

/* ========================================
   АДАПТИВНІСТЬ (MOBILE)
   ======================================== */
@media (max-width: 768px) {
    .nord-cart-item {
        flex-direction: column; /* Ставимо все в стовпчик на телефоні */
        align-items: flex-start;
        gap: 15px;
        position: relative;
    }

    .nord-cart-controls {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    .nord-btn-remove {
        position: absolute;
        top: 20px;
        right: 0;
    }

    .nord-cart-actions {
        flex-direction: column-reverse; /* Кнопка оформлення зверху на мобілці */
    }

    .nord-cart-actions .nord-btn-primary,
    .nord-cart-actions .nord-btn-secondary {
        width: 100%;
    }
}



@media (max-width: 768px) {
    /* Робимо з картки Grid-сітку */
    .nord-cart-item {
        display: grid !important;
        grid-template-areas:
            "img title remove"
            "img attr  attr"
            "img price qty";
        grid-template-columns: 85px 1fr auto;
        align-items: center;
        gap: 4px 5px;
        padding: 15px 0;

        /* Стилі для свайпу */
        touch-action: pan-y; /* Дозволяє скролити сторінку вниз/вгору */
        transition: transform 0.3s ease-out, opacity 0.3s;
    }

    .nord-cart-img {
        grid-area: img;
        width: 80px;
        height: 105px;
    }

    .nord-cart-title-wrap {
        grid-area: title;
        margin: 0;
        align-self: end;
    }

    .nord-cart-title {
        font-size: 13px;
    }

    .nord-cart-attr-wrap {
        grid-area: attr;
        width: 100%;
        margin: 0;
        align-self: start;
    }

    .nord-cart-attr {
        font-size: 13px;
        color: #777; /* Робимо сірим, як на макеті */
        font-weight: 400;
    }

    /* Магія: розбиваємо обгортку контролів, щоб керувати її дітьми напряму */
    .nord-cart-controls { display: contents; }

    .nord-cart-price {
        grid-area: price;
        text-align: left;
        align-self: center;
        font-size: 18px;
        min-width: auto;
    }

    .nord-qty-selector {
        grid-area: qty;
        justify-self: end;
        align-self: center;
        height: 30px;
    }

    .nord-btn-remove {
        grid-area: remove;
        justify-self: end;
        align-self: start;
        position: static; /* Скидаємо старе абсолютне позиціонування */
        margin-top: -2px;
    }

    /* --- Кнопки в підвалі --- */
    .nord-cart-actions {
        flex-direction: column-reverse; /* Ставить зелену кнопку оформлення наверх */
        gap: 12px;
    }

    .nord-btn-primary, .nord-btn-secondary {
        width: 100%;
        min-width: 100%;
    }

    .nord-breadcrumbs {
        display: none;
    }

}
/* ========================================
   ОНОВЛЕНИЙ ЛОАДЕР (Зелений)
   ======================================== */
.loader {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #e5e7eb; /* Світло-сіре кільце (фон) */
    border-top-color: #00c65e; /* Ваш фірмовий зелений колір */
    animation: spin-loader 0.8s linear infinite;
}

/* Якщо лоадер з'являється саме в блоці ціни корзини - робимо його маленьким */
.nord-cart-price .loader {
    width: 20px;
    height: 20px;
    border-width: 2px; /* Робимо лінію тоншою для малого розміру */
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px; /* Відступ від символу валюти, якщо вони стоять поруч */
}

/* Чиста і сучасна анімація (тільки обертання, без зміни кольорів) */
@keyframes spin-loader {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Для підтримки старих браузерів (Safari) */
@-webkit-keyframes spin-loader {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

/* ========================================
   СТОРІНКА 404
   ======================================== */
.nord-404-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 40px 20px;
    background-color: #fff;
}

.nord-404-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.nord-404-title {
    font-size: clamp(100px, 15vw, 220px);
    font-weight: 800;
    color: #00c65e; /* Ваш фірмовий зелений */
    line-height: 1;
    margin: 0 0 20px 0;
    letter-spacing: -2px;
}

.nord-404-subtitle {
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 400;
    color: #111;
    margin: 0 0 40px 0;
}

.text-uppercase {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 14px 32px;
}

/* ========================================
   СТОРІНКА АВТОРИЗАЦІЇ / РЕЄСТРАЦІЇ
   ======================================== */
.nord-auth-wrapper {
    display: flex;
    justify-content: center;
    background-color: #fff;
}

.nord-auth-box {
    width: 100%;
    max-width: 420px; /* Компактний розмір як на дизайні */
}

/* --- Вкладки (Tabs) --- */
.nord-auth-tabs {
    display: flex;
    margin-bottom: 20px;
}

.nord-auth-tab {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #888; /* Сірий для неактивної вкладки */
    padding: 15px 10px;
    text-decoration: none;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.2s ease;
}

.nord-auth-tab:hover {
    color: #111;
}

.nord-auth-tab.active {
    color: #111;
    border-bottom: 2px solid #111; /* Чорна лінія для активної вкладки */
}

/* --- Поля введення (Inputs) --- */
.nord-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nord-input-group {
    position: relative;
    width: 100%;
}

.nord-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 40px 10px 0; /* Відступ справа для іконки ока */
    font-size: 14px;
    color: #111;
    background: transparent;
    transition: border-color 0.2s;
}

.nord-input::placeholder {
    color: rgb(134, 134, 134);
}

.nord-input:focus {
    outline: none;
    border-bottom: 1px solid #111;
}

.nord-input.has-error {
    border-bottom: 1px solid #ff3b30;
}

.nord-error-msg {
    display: block;
    color: #ff3b30;
    font-size: 13px;
    margin-top: 5px;
}

/* Іконка ока */
.nord-toggle-pwd {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #111;
}

/* --- Утиліти --- */
.w-100 { width: 100%; }
.mt-2 { margin-top: 10px; }

/* Розділювач "або" */
.nord-auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 10px 0;
    color: #999;
    font-size: 14px;
}

.nord-auth-divider::before,
.nord-auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}

.nord-auth-divider span {
    padding: 0 15px;
}

/* --- Кнопка Google --- */
.nord-btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #fff;
    color: #111;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s;
    cursor: pointer;
}

.nord-btn-google:hover {
    background-color: #f9f9f9;
}

button.nord-auth-tab {
    background: transparent;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
    font-family: inherit;
}

/* Логіка перемикання форм */
.nord-tab-content {
    display: none; /* За замовчуванням ховаємо всі форми */
    animation: fadeInTab 0.3s ease-in-out; /* Плавна поява */
}

.nord-tab-content.active {
    display: block; /* Показуємо тільки активну */
}

/* Анімація появи форми при кліку */
@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========================================
   ОФОРМЛЕННЯ ЗАМОВЛЕННЯ
   ======================================== */
.nord-checkout-section {
    padding-bottom: 60px;
}

/* Сітка для комп'ютера */
.nord-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 420px; /* Форма широка, товари 420px */
    gap: 80px;
    align-items: start;
}

.nord-checkout-title {
    font-size: 20px;
    font-weight: 600;
    color: #111;
    margin-bottom: 30px;
}

/* --- Поля вводу (Доставка) --- */
.nord-input-wrap {
    margin-bottom: 15px;
    position: relative;
}

.nord-input, .nord-select {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
    font-size: 15px;
    color: #111;
    background: transparent;
    transition: border-color 0.2s;
    outline: none;
    border-radius: 0;
}

.nord-input::placeholder { color: #888; }
.nord-input:focus, .nord-select:focus { border-bottom-color: #111; }

/* Кастомний телефонний інпут */
.nord-phone-wrap {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ddd; /* Одна суцільна лінія */
    transition: border-color 0.2s;
}

.nord-phone-wrap:focus-within {
    border-bottom-color: #111;
}

.nord-phone-prefix {
    color: #888;
    padding-right: 10px;
    font-size: 15px;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-bottom: -1px;
}

.nord-phone-wrap .nord-input {
    flex: 1;
    border-bottom: none !important;
    padding-left: 0;
}

.nord-phone-wrap .nord-input:focus {
    border-bottom: none !important;
}

/* --- Список товарів (Ваше замовлення) --- */
.nord-order-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
    overflow-y: auto;
    padding-right: 10px;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f9f9f9;
}

.nord-order-list::-webkit-scrollbar { width: 6px; }
.nord-order-list::-webkit-scrollbar-track { background: #f9f9f9; border-radius: 4px; }
.nord-order-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }

/* Підвал з сумою */
.nord-order-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin-bottom: 10px;
    background: #fff;
}

.nord-order-summary strong {
    font-size: 20px;
    color: #111;
}

.nord-order-item {
    display: flex;
    gap: 15px;
}

.nord-order-img {
    width: 85px;
    height: 95px;
    object-fit: cover;
    border-radius: 4px;
    background: #f9f9f9;
}

.nord-order-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nord-order-name a {
    font-size: 15px;
    font-weight: 500;
    color: #111;
    text-decoration: none;
}

.nord-order-attr {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

/* Сітка для ціни та кількості */
.nord-order-calc {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    font-size: 14px;
    width: 100%;
}

.nord-order-price-single { color: #111; text-align: left; }
.nord-order-qty { color: #888; font-size: 13px; text-align: center; }
.nord-order-price-total { color: #00c65e; font-weight: 600; text-align: right; }

/* --- Утиліти та Адаптивність --- */
.mobile-only { display: none !important; }
.desktop-only { display: block; }
.w-100 { width: 100%; }
.mt-4 { margin-top: 25px; }

/* МОБІЛЬНА ВЕРСІЯ (ВКЛАДКИ) */
@media (max-width: 768px) {
    .mobile-only { display: flex !important; }
    button.mobile-only { display: block !important; }
    .desktop-only { display: none !important; }

    .nord-checkout-grid { display: block; }

    /* Вкладки строго в ряд */
    .nord-checkout-tabs {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        margin-bottom: 25px;
        border-bottom: 1px solid #ddd;
        width: 100%;
    }

    .nord-tab-btn {
        width: 50% !important;
        display: block !important;
        background: none;
        border: none;
        padding: 12px 10px;
        font-size: 14px;
        font-weight: 500;
        color: #888;
        cursor: pointer;
        transition: color 0.2s;
        position: relative;
        text-align: center;
    }

    .nord-tab-btn.active { color: #111; font-weight: 600; }
    .nord-tab-btn.active::after {
        content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #111;
    }

    .nord-tab-content {
        display: none;
        animation: fadeInTab 0.3s ease-out;
    }

    .nord-tab-content.active { display: block; }

    .nord-order-list { max-height: 45vh; }
}

/* ВЕРСІЯ ДЛЯ ПК (Без вкладок, липка права колонка) */
@media (min-width: 769px) {
    .nord-checkout-tabs { display: none !important; }

    /* Ліва колонка (Доставка) */
    #tab-delivery.nord-tab-content {
        display: block !important;
    }

    /* Права колонка (Замовлення) - МАГІЯ ФЛЕКСУ */
    #tab-order.nord-checkout-order {
        display: flex !important; /* ВАЖЛИВО: flex замість block */
        flex-direction: column;
        position: sticky;
        top: 20px;
        max-height: calc(90vh - 40px);
    }

    /* Список розтягується і скролиться */
    .nord-order-list {
        flex-grow: 1;
    }

    /* Сума намертво внизу */
    .nord-order-summary {
        margin-top: auto;
    }
}

/* ========================================
   СТИЛІЗАЦІЯ SELECT2 (ТІЛЬКИ НИЖНЄ ПІДКРЕСЛЕННЯ)
   ======================================== */

/* 1. Головна рамка (Закритий стан) */
.select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: none !important; /* Прибираємо всі рамки... */
    border-bottom: 1px solid #ddd !important; /* ...залишаємо ТІЛЬКИ нижню! */
    border-radius: 0 !important; /* Жодних заокруглень для лінії */
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important; /* Прибираємо відступи, щоб текст йшов врівень з лінією */
    outline: none !important;
    box-shadow: none !important;
    transition: border-bottom-color 0.2s;
    position: relative !important;
}

/* Фокус та відкритий стан (лінія чорніє, як і в інших полях) */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-bottom: 1px solid #111 !important;
}

/* 2. Текст всередині (Міста, Відділення) */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #111 !important;
    font-size: 15px !important;
    padding-left: 0 !important; /* Текст строго по лівому краю */
    padding-right: 25px !important; /* Відступ для стрілочки справа */
    line-height: normal !important;
    width: 100%;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #888 !important;
}

/* 3. Кастомна стрілочка (SVG галочка) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important; /* Повністю вбиваємо дефолтну стрілку */
}

/* Малюємо нашу красиву стрілочку і притискаємо її вправо */
.select2-container--default .select2-selection--single::after {
    content: "";
    position: absolute !important;
    right: 0 !important; /* Стрілка чітко з правого краю */
    top: 50% !important;
    transform: translateY(-50%);
    width: 12px !important;
    height: 8px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: transform 0.2s ease !important;
    pointer-events: none !important;
}

/* Перевертаємо стрілочку при відкритті списку */
.select2-container--default.select2-container--open .select2-selection--single::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* ========================================
   ВИПАДАЮЧИЙ СПИСОК ТА ПОШУК
   ======================================== */

.select2-dropdown {
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    z-index: 9999 !important;
    background: #fff !important;
    overflow: hidden !important;
    margin-top: 5px !important; /* Легкий відступ від лінії вниз */
}

/* Поле пошуку всередині Select2 (наприклад, для вводу назви міста) */
.select2-search--dropdown {
    padding: 10px !important;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    outline: none !important;
    font-family: inherit;
    font-size: 14px !important;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: #111 !important;
}

/* ========================================
   ПУНКТИ СПИСКУ (Міста / Відділення)
   ======================================== */

.select2-container--default .select2-results__option {
    padding: 10px 15px !important;
    font-size: 14px !important;
    color: #333 !important;
    transition: background 0.1s;
}

/* При наведенні мишкою */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #f5f5f5 !important;
    color: #111 !important;
}

/* Вибраний (активний) пункт */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f0fdf4 !important;
    color: #00c65e !important;
    font-weight: 500 !important;
}

/* ========================================
   ВИПРАВЛЕННЯ ШИРИНИ ТА ПЛЕЙСХОЛДЕРА SELECT2
   ======================================== */

/* 1. Розтягуємо ТІЛЬКИ контейнер самого поля (він лежить у вашій колонці) */
.nord-input-wrap .select2-container {
    width: 100% !important;
}

/* 2. Стилізуємо випадаючий список, АЛЕ НЕ ЧІПАЄМО ШИРИНУ (Select2 вирахує її сам) */
.select2-dropdown {
    border: 1px solid #eaeaea !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
    z-index: 9999 !important;
    background: #fff !important;
    overflow: hidden !important;
    margin-top: 5px !important;
}

/* 3. Гарантовано ховаємо плейсхолдери з білого списку */
.select2-results__option[aria-disabled="true"] {
    display: none !important;
}


/* --- <<< x-prod --- */

 .prod-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.prod-row:has(> *:first-child:nth-last-child(2)) {
    grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
    justify-content: center;
}

.prod-row:has(> :last-child:nth-child(1)) {
    grid-template-columns: minmax(250px, 300px);
    justify-content: center;
}


 /* --- product-single --- */
 
.gallery-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}


.gallery-main {
    position: relative;
    width: 100%;
    aspect-ratio: 11 / 14;
    background-color: #f7f7f7;
    overflow: hidden;
}

.main-slider {
    width: 100%;
    height: 100%;
}

.main-item {
    display: none;
    width: 100%;
    height: 100%;
}

.main-item.active {
    display: block;
}

.main-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.nav-btn {
    position: absolute;
    top: 50%;
    
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: background 0.3s;
    padding: 0;
}

.nav-btn:hover {
    background: #fff;
}

.nav-btn.prev { left: 10px; }
.nav-btn.next { right: 10px; }


.gallery-thumbs {
    width: 100%;
}

.preview-cont {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: thin;
}


.preview-cont::-webkit-scrollbar {
    height: 4px;
}
.preview-cont::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.thumb-item {
    flex: 0 0 80px;
    aspect-ratio: 1 / 1;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    background: #f0f0f0;
    overflow: hidden;
    transition: border-color 0.3s;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-item.active {
    border-color: #141414;
}

.product-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.product-info-table tr {
    border-bottom: 1px solid #f0f0f0;
}

.product-info-table tr:last-child {
    border-bottom: none;
}

.info-label {
    padding: 12px 15px 12px 0;
    font-weight: 500;
    color: #666;
    vertical-align: top;
    width: 120px;
}

.info-value {
    padding: 12px 0;
    vertical-align: middle;
}


.color-search-wrapper {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sub-label {
    font-size: 0.9em;
    color: #999;
}



.availability-info {
    display: flex;
    gap: 5px;
    align-items: baseline;
    font-weight: 400;
}

#available-quantity {
    font-weight: 600;
}

.ordered-text {
    font-size: 0.9em;
    white-space: nowrap;
}

.select2 {
    width: 100%;
    max-width: 250px;
}