/**
* Theme Name: Machic Child
* Description: This is a child theme of Machic, generated by Merlin WP.
* Author: KlbTheme (Sinan ISIK)
* Template: machic
* Version: 1.5.6
*/
/* ========================================================== */
/* === ЖОРСТКЕ ВСТАНОВЛЕННЯ ШИРИНИ КОНТЕЙНЕРА (1680PX) === */
/* ========================================================== */
/* Зазвичай клас, що відповідає за основну обгортку контенту, називається .container або .klbth-container */
.container,
.elementor-section.elementor-section-boxed > .elementor-container,
.elementor-container {
/* Встановлюємо максимальну ширину */
max-width: 1600px !important;
/* Центруємо контейнер на великих екранах */
margin-left: auto !important;
margin-right: auto !important;
}
/* Якщо ви також використовуєте елементи з повною шириною, але з обмеженим контентом всередині: */
.klbth-container {
max-width: 1600px !important;
}
/* Примусово відображаємо вертикальну смугу прокрутки завжди */
html {
overflow-y: scroll !important;
}
/* Або, як альтернатива (менш поширена, але може знадобитися): */
body {
overflow-y: scroll !important;
/* Додаємо відступ, що відповідає ширині скролбару (приблизно 17px) */
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Встановлення білого кольору для основного тексту */
body,
td,
th
{
color: #ffffff !important; /* Чисто білий колір */
}
/* Зміна кольору для заголовків */
h1, h2, h3, h4, h5, h6,
.entry-title {
color: #ffffff !important; /* Білий колір для всіх заголовків */
}
/* Зміна кольору для посилань */
a {
color: #cccccc !important; /* Світло-сірий колір для посилань, щоб виділити їх, але зберегти світлий тон */
}
/* Зміна кольору посилань при наведенні курсору */
a:hover {
color: #ffffff !important; /* Білий колір при наведенні */
}
/* Зміна кольору фону для полів введення (вони часто залишаються білими,
але текст у них повинен бути чорним для читабельності, якщо фон білий) */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
color: #111111 !important; /* Чорний текст у полях */
background-color: #ffffff !important; /* Білий фон полів */
border-color: #333333 !important; /* Темна рамка */
}
/* Агресивний універсальний селектор для забезпечення білого кольору тексту
(Використовуйте обережно, якщо це не спрацювало) */
/*
* {
color: #ffffff !important;
}
*/
/* ВИРІШЕННЯ 1: Скидання ширини для зовнішньої обгортки футера */
/* Це дозволяє футеру розтягуватися на 100% ширини екрана */
footer.site-footer,
.site-footer .elementor-section {
max-width: none !important; /* Скасовуємо наше правило 1680px для зовнішньої обгортки */
width: 100% !important; /* Гарантуємо, що він займає всю доступну ширину */
padding-left: 0 !important;
padding-right: 0 !important;
}
.site-footer {
background-color: #f3f3f3; /* bg-gray-800 */
color: #800020 !important; /* text-white */
margin-top: auto;
}
.footer-container {
max-width: 1600px !important; /* Приблизний еквівалент контейнера */
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
padding-top: 2rem;
}
/*
* Еквівалент Tailwind-стилів:
* grid grid-cols-2 md:grid-cols-4 gap-8
*/
.footer-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
@media (min-width: 768px) { /* md breakpoint */
.footer-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/*
* Еквівалент Tailwind-стилів:
* font-bold text-lg mb-4
*/
.footer-heading {
font-weight: 700; /* font-bold */
font-size: 1.125rem; /* text-lg */
margin-bottom: 1rem; /* mb-4 */
color: #800020 !important;
}
/*
* Еквівалент Tailwind-стилів:
* space-y-2 text-gray-400
*/
.footer-list {
list-style: none;
padding: 0;
margin: 0;
color: #800020 !important; /* text-gray-400 */
}
.footer-list > li {
margin-bottom: 0.5rem; /* space-y-2 */
}
/*
* Еквівалент Tailwind-стилів:
* text-gray-400, hover:text-white
*/
.footer-link,
.social-link {
color: #800020 !important; /* text-gray-400 */
text-decoration: none;
transition: color 0.15s ease-in-out;
}
/* ========================================================= */
/* СТИЛІ ДЛЯ ПОСИЛАНЬ У ФУТЕРІ (Оновлено: Товста та Заокруглена Рамка) */
/* ========================================================= */
/* 1. БАЗОВИЙ СТАН: Резервуємо місце для рамки (уникнення "стрибків") */
.footer-link,
.social-link {
/* Товщина рамки 2px, але вона прозора */
border: 2px solid transparent;
/* Заокруглення кутів */
border-radius: 5px;
/* Внутрішні відступи для тексту */
padding: 2px 4px;
/* Для коректного обрахунку розмірів рамки та відступів */
box-sizing: border-box;
transition: all 0.2s ease-in-out;
}
/* 2. СТАН ПРИ НАВЕДЕННІ (:hover) */
.footer-link:hover,
.social-link:hover {
/* Примусово встановлюємо темний колір тексту */
color: #333333 !important;
/* Змінюємо колір прозорої рамки на #333 */
border-color: #333333 !important;
/* Заокруглення залишається 5px, товщина 2px */
}
/* 3. Колір тексту для параграфів у футері */
.footer-list p {
margin: 0;
color: #333333 !important;
}
/*
* Еквівалент Tailwind-стилів:
* flex space-x-4
*/
.social-links {
display: flex;
gap: 1rem; /* space-x-4 */
}
/* ================================================= */
/* 🚀 ФІНАЛЬНЕ ВИРІШЕННЯ: АДАПТИВНІСТЬ + УСУНЕННЯ ПОЛОСКИ */
/* ================================================= */
/* 1. Скидаємо стилі, які могли спричинити полоску, і застосовуємо обхід calc() */
.copyright {
/* Знову використовуємо calc() для обходу батьківських обмежень */
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
/* Скасовуємо всі горизонтальні відступи, які можуть спричинити полоску */
padding-left: 0 !important;
padding-right: 0 !important;
/* Скидаємо абсолютне позиціонування, якщо воно було активовано */
position: static !important;
left: auto !important;
right: auto !important;
/* Забезпечуємо, що верхній марджин чиста */
margin-top: 2rem;
margin-bottom: 0 !important;
/* Ваші стилі */
background-color: #0b0b0b;
border-top: 1px solid #131313 !important;
padding-top: 2rem;
padding-bottom: 1.4rem;
text-align: center;
color: #fafafa !important;
font-size: 0.875rem;
}
@media (max-width: 768px) { /* md breakpoint */
.copyright{
padding-top: 1rem;
padding-bottom: 1rem;
}
}
/* 2. Фіксація горизонтальної прокрутки на всіх пристроях */
body {
overflow-x: hidden !important; /* Усуває скрол зліва */
}
/* 3. АДАПТИВНІСТЬ (MOBILE FIX): Забезпечуємо, що контент має відступи всередині */
/* Ми додамо внутрішню обгортку, яка обмежує контент, але не сам фон */
.copyright .container {
max-width: 1600px !important; /* Обмежуємо внутрішній контент */
width: 90% !important; /* Для адаптивності на мобільних */
margin-left: auto !important;
margin-right: auto !important;
/* Додаємо невеликий відступ, щоб контент не прилипав до країв екрана */
padding-left: 15px !important;
padding-right: 15px !important;
}
/* ========================================================= */
/* СТИЛІ ДЛЯ ПРОМО-БАНЕРА У ФУТЕРІ (HOOKAH CTA) - ОНОВЛЕНО */
/* ========================================================= */
.promo-footer-bar {
/* Фон бургундійський, текст білий */
background-color: #800020;
color: #ffffff;
width: 100%;
/* Обмеження висоти */
min-height: 80px;
max-height: 100px;
/* Вирівнювання елементів по центру */
display: flex;
align-items: center;
justify-content: center;
padding: 10px 20px;
box-sizing: border-box;
margin-top: 100px;
}
.promo-content {
display: flex;
align-items: center;
gap: 20px; /* Відстань між іконкою, текстом і кнопкою */
max-width: 1200px; /* Обмежте ширину контенту, якщо потрібно */
width: 100%;
justify-content: space-between; /* Розтягує елементи по ширині */
}
.hookah-smoking-icon {
font-size: 40px;
line-height: 1;
/* Запобігаємо стисканню іконки */
flex-shrink: 0;
}
.promo-text-wrapper {
/* *** ВИПРАВЛЕНО: Дозволяє тексту займати більшу частину простору *** */
flex-grow: 1;
text-align: left;
/* Додаємо min-width: 0 для коректної роботи flexbox при стисненні */
min-width: 0;
}
/* *** ВИПРАВЛЕНО: Об'єднуємо обидва span в один рядок на десктопі *** */
.promo-title-text-group {
display: inline-flex;
flex-wrap: nowrap; /* Гарантує, що текст залишається в одному рядку */
gap: 5px; /* Невеликий проміжок між title та CTA текстом */
line-height: 1.2;
}
/* Прибираємо display: block, щоб елементи були inline */
.promo-title-text,
.promo-cta-text {
font-size: 16px;
margin: 0; /* Прибираємо можливі стандартні марджини */
display: inline; /* *** ВИПРАВЛЕНО *** */
}
.promo-title-text {
font-weight: 400;
}
.promo-cta-text {
font-weight: 700;
font-size: 17px; /* Основний акцент залишаємо більшим */
}
/* Стилізація кнопки Telegram */
.promo-telegram-button {
background-color: #ffffff;
color: #800020 !important;
padding: 10px 20px;
text-decoration: none;
font-weight: 600;
border-radius: 5px;
white-space: nowrap;
transition: background-color 0.3s;
/* Запобігаємо стисканню кнопки */
flex-shrink: 0;
}
.promo-telegram-button:hover {
color: #333333 !important;
}
/* ========================================================= */
/* СТИЛІ ДЛЯ FONT AWESOME ІКОНКИ */
/* ========================================================= */
.hookah-smoking-icon {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
flex-shrink: 0;
color: #ffffff; /* Встановлюємо білий колір іконки */
}
/* 🎯 Стилі для самої іконки */
.hookah-smoking-icon i {
font-size: 40px; /* Основний розмір для десктопу */
}
/* ========================================================= */
/* Адаптація для мобільних пристроїв */
/* ========================================================= */
/* ========================================================= */
/* 📱 ПОВНЕ ОНОВЛЕННЯ ДЛЯ МОБІЛЬНИХ (max-width: 768px) */
/* ========================================================= */
@media (max-width: 768px) {
.promo-footer-bar {
/* Фіксуємо висоту і додаємо більше вертикального простору */
min-height: 180px;
padding: 20px 15px;
/* Гарантуємо, що контент не обрізається батьківськими елементами */
overflow: visible !important;
width: 100% !important;
max-width: 100% !important;
}
.promo-content {
flex-direction: column; /* Елементи у стовпчик */
text-align: center;
gap: 15px; /* Більший проміжок між іконкою, текстом і кнопкою */
justify-content: center;
}
/* 1. Іконка */
.hookah-smoking-icon {
font-size: 30px;
margin-bottom: 5px;
}
/* 2. Текст */
.promo-text-wrapper {
min-width: 0; /* Дозволяємо стискатися */
flex-basis: auto; /* Дозволяємо Flexbox керувати розміром */
}
.promo-title-text-group {
display: block; /* Повертаємо текст у стандартний блок */
flex-direction: column;
gap: 0;
}
/* Зменшуємо розмір шрифту для кращої адаптивності */
.promo-title-text,
.promo-cta-text {
font-size: 14px; /* Базовий текст менший */
display: block;
text-align: center;
white-space: normal; /* Дозволяємо перенесення рядків */
word-break: break-word; /* Запобігаємо виходу за межі блоку */
}
.promo-cta-text {
font-size: 16px; /* CTA трохи більший */
margin-top: 2px;
}
/* 3. Кнопка */
.promo-telegram-button {
width: 100%;
max-width: 300px; /* Обмежте максимальну ширину */
margin-top: 15px;
font-size: 16px;
}
/* ... інші мобільні стилі ... */
.hookah-smoking-icon {
margin-bottom: 5px; /* Залишаємо відступ */
}
.hookah-smoking-icon i {
font-size: 30px; /* Зменшуємо іконку на мобільному */
}
}
/* Контейнер SEO локацій */
.footer-seo-locations {
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.seo-locations-title {
font-size: 14px;
font-weight: 600;
color: #800020; /* Бордовий акцент */
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.city-links-container {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 12px;
}
.city-links-container a {
font-size: 12px;
color: #777 !important;
text-decoration: none !important;
transition: color 0.3s ease;
position: relative;
}
/* Додаємо крапку-розділювач між містами через CSS */
.city-links-container a:not(:last-child):after {
content: "•";
margin-left: 12px;
color: #444;
pointer-events: none;
}
.city-links-container a:hover {
color: #800020 !important;
}
/* Адаптивність для мобільних */
@media (max-width: 768px) {
.footer-seo-locations {
margin-top: 30px;
}
.city-links-container {
gap: 5px 10px;
}
.city-links-container a {
font-size: 11px;
}
}
/* ========================================================== */
/* === ГЛОБАЛЬНІ СТИЛІ ТА БУРГУНДІЙ (BURGANDY) АКЦЕНТИ === */
/* ========================================================== */
:root {
--burgundy-color: #800020;
--burgundy-dark: #630019;
--promo-bg: #f9f5f5; /* Світло-рожевий/кремовий фон для промо */
}
/* Перевизначення акцентних кольорів Machic на Бургундій (якщо можливо) */
.klbth-button.primary,
.machic-primary-bg,
.machic-text-primary:hover,
a.klbth-primary-color:hover {
background-color: var(--burgundy-color) !important;
}
/* Акцентні кольори */
.burgundy-bg {
background-color: var(--burgundy-color) !important;
color: #fff;
}
.burgundy-text {
color: var(--burgundy-color) !important;
}
/* ========================================================== */
/* === МОБІЛЬНА АДАПТАЦІЯ (Менше 768px) === */
/* ========================================================== */
/* 2. Стилі для мобільного Топ-бару (Ваші контакти) */
.header-mobile {
background-color: #7a001e !important; /* Фон, щоб виділити */
padding: -5px 0;
}
.header-mobile-switcher.custom-mobile-info .header-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px; /* Забезпечуємо відступи на мобільному */
}
.mobile-contact-phone {
font-size: 14px;
font-weight: 600;
color: var(--burgundy-color);
text-decoration: none;
padding: 5px 0;
}
.mobile-contact-phone svg {
width: 16px;
height: 16px;
margin-right: 5px;
}
/* 3. Змінюємо колір іконки меню Machic на бургундій */
.header-mobile .menu-toggle a .header-addons-icon i {
color: var(--burgundy-color) !important;
font-size: 24px;
}
/* 4. Забезпечення правильного відображення логотипа */
.header-mobile .site-brand a {
display: flex;
align-items: center;
}
.header-mobile .site-brand .logo-text {
font-size: 22px; /* Трохи менший розмір на мобільному */
font-weight: 800;
}
/* ========================================================== */
/* === FLEXBOX КЛАСИ (Залишаємо для коректності) === */
/* ========================================================== */
.flex-row { display: flex; flex-direction: row; align-items: center; }
.flex-between { justify-content: space-between; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-4 { gap: 16px; }
.shrink-0 { flex-shrink: 0; }
.whitespace-nowrap { white-space: nowrap; }
.button-count,
.cart-count {
/* Встановлюємо білий колір тексту */
color: #FFFFFF !important;
}
/*
* Додайте цей CSS до ваших основних стилів.
* Якщо ви використовуєте Tailwind CLI, ці кольори мають бути в конфігурації.
*/
/* Початковий колір: #800020 */
.text-tabak-kiev-default {
color: #800020;
}
/* Колір при наведенні: чорний (припускаємо, що 'tabak-kiev-black' - це #000000) */
.group-hover\:text-tabak-kiev-black {
color: #000000 !important; /* або інший відтінок, якщо 'tabak-kiev-black' має інше значення */
}
/* ====================================
3. Мобільне Нижнє Меню (.mobile-bottom-menu)
==================================== */
.mobile-bottom-menu {
/* Фіксуємо меню внизу */
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
border-top: 1px solid var(--border-color); /* Темний роздільник зверху */
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Темна тінь */
}
.mobile-bottom-menu ul {
/* Забезпечуємо гнучке розташування елементів */
display: flex;
justify-content: space-around;
list-style: none;
padding: 0;
margin: 0;
height: 50px; /* Або інша бажана висота */
}
.mobile-bottom-menu a {
/* Стилі для посилання (іконка + текст) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--mid-gray); /* Світло-сірий колір для ІКОНКИ та посилання в цілому */
font-size: 10px; /* Малий розмір шрифту */
text-decoration: none;
padding: 5px 0;
height: 100%;
transition: color 0.2s ease;
}
/* !!! ОНОВЛЕННЯ: ЧОРНИЙ КОЛІР ТЕКСТУ ДЛЯ СПАНІВ !!! */
.mobile-bottom-menu a span {
color: #000 !important;
font-weight: 500; /* Можливо, варто додати жирність, щоб текст був помітнішим */
}
/* Стилі для іконок (за вашими класами klbth-icon-*) */
.mobile-bottom-menu .klbth-icon-user,
.mobile-bottom-menu i {
font-size: 18px; /* Розмір іконки */
line-height: 1;
color: var(--mid-gray); /* Світло-сіра іконка за замовчуванням */
margin-bottom: 2px;
}
/* Ховер для посилання в цілому */
.mobile-bottom-menu a:hover {
/* Основний колір посилання змінюється на червоний, але ми перевизначимо це для span нижче */
color: var(--tabak-kiev-red);
}
.mobile-bottom-menu a:hover i {
color: var(--tabak-kiev-red); /* Червоний колір іконки при наведенні */
}
/* !!! ОНОВЛЕННЯ: Колір тексту span при наведенні курсору (залишаємо чорним, або робимо акцентним) !!! */
.mobile-bottom-menu a:hover span {
color: var(--tabak-kiev-red); /* Змінюємо на червоний для акценту (якщо потрібно) */
/* Якщо ви хочете, щоб він залишався чорним, використовуйте:
color: #000;
*/
}
/* Встановлення базового кольору тексту посилання "All Departments" на чорний */
.all-categories {
color: #000;
}
/* Встановлення чорного кольору для тексту відділів (якщо не успадкується від батьківського .all-categories) */
.departments-text {
color: #000;
}
/* Встановлення чорного кольору для іконки відділів */
.departments-icon {
color: #000;
}
/* Встановлення чорного кольору для контейнера стрілки */
.departments-arrow {
color: #000;
}
/* Встановлення чорного кольору для самої іконки стрілки */
.klbth-icon-nav-arrow-down {
color: #000;
}
/* Якщо вам потрібно, щоб колір залишався чорним навіть при наведенні курсору (hover): */
.all-categories:hover,
.all-categories:hover .departments-text,
.all-categories:hover .departments-icon,
.all-categories:hover .klbth-icon-nav-arrow-down {
color: #000 !important; /* Використовуйте !important тільки якщо стилі не перевизначаються */
}
/* Встановлення кольору #333 для іконки кошика на мобільних пристроях */
@media (max-width: 767px) {
.klbth-icon-simple-cart {
color: #333 !important;
}
}
/* Якщо іконка розташована у нижньому мобільному меню (як видно на скріншоті)
і ви хочете, щоб колір був постійним #333 у цьому меню, використовуйте також: */
.mobile-bottom-menu .klbth-icon-simple-cart {
color: #333 !important;
}
/* Переконайтесь, що колір не змінюється при наведенні курсору (hover) на мобільному (хоча на мобільному це рідко використовується) */
@media (max-width: 767px) {
.mobile-bottom-menu a:hover .klbth-icon-simple-cart {
color: #333 !important;
}
}
/* =========================================================
Встановлення кольору #333 для іконки кошика на МОБІЛЬНИХ та ПЛАНШЕТАХ
(Діапазон від 0 до 1024px)
========================================================= */
@media (max-width: 1024px) {
/* Основне правило: застосовуємо #333 до іконки на маленьких і середніх екранах */
.klbth-icon-simple-cart {
color: #333 !important;
}
/* Якщо іконка знаходиться у нижньому мобільному меню (.mobile-bottom-menu),
це правило також застосовується */
.mobile-bottom-menu .klbth-icon-simple-cart {
color: #333 !important;
}
/* Правило для стану наведення курсору (hover) на цих пристроях */
.mobile-bottom-menu a:hover .klbth-icon-simple-cart {
color: #333 !important;
}
}
/* =========================================================
Стиль для іконки скасування (Х)
========================================================= */
.klbth-icon-cancel {
color: #333 !important;
}
/* =========================================================
Стиль для заголовка бічного кошика
========================================================= */
.cart-side-title {
color: #333 !important;
}
/* Базовий стиль для елементів з класом 'rozetka-green-text' */
.rozetka-green-text {
/* Основний колір (темний червоний/бордовий, який ви задали) */
color: #990000 !important;
font-weight: 800 !important;
transition: color 0.3s ease; /* Додаємо плавний перехід для візуального ефекту */
}
/* Стиль при наведенні курсору (HOVER) */
.rozetka-green-text:hover {
/* Робимо колір темнішим при наведенні */
color: #660000 !important;
}
/* Приховує елемент з класами 'form-select custom-width' на всіх пристроях */
.form-select.custom-width {
display: none !important;
}
/* Встановлення кольору для іконки стрілки вгору */
.klbth-icon-nav-arrow-up {
color: #990000 !important;
}
/* ==================================================
Стилі для контейнера на повну ширину (footer-full-width-section)
================================================== */
.footer-full-width-section {
width: 100%;
margin-top: 30px;
padding: 15px 0; /* Зменшуємо вертикальний відступ */
border-top: 1px solid #e0e0e0;
text-align: center; /* Центруємо заголовок та іконки (якщо вони не flex) */
}
/* ==================================================
Стилі для заголовка (Якщо потрібний менший/інший стиль)
================================================== */
.footer-full-width-section .payment-delivery-title {
text-align: center;
margin-bottom: 15px;
/* Якщо потрібно, щоб заголовок був менш помітним, ніж основні:
color: #666;
font-size: 16px;
*/
}
/* ==================================================
Стилі для контейнера ІКОНОК (payment-delivery-icons)
================================================== */
.payment-delivery-icons {
display: flex;
flex-wrap: wrap; /* Дозволяємо перенесення на мобільних пристроях */
justify-content: center; /* Центруємо логотипи по горизонталі */
align-items: center;
gap: 25px; /* Збільшений відступ між логотипами для кращого вигляду */
margin-top: 10px;
padding: 0 10px; /* Невеликий горизонтальний відступ */
}
/* ==================================================
Стилі для самих ЛОГОТИПІВ (ЗМЕНШЕННЯ)
================================================== */
.payment-logo,
.delivery-logo {
/* Обмежуємо висоту логотипів, це головний параметр зменшення */
max-height: 35px;
/* Обмежуємо максимальну ширину, щоб великі логотипи не домінували */
max-width: 100px;
width: auto;
object-fit: contain;
/* Можна додати сірий фільтр, щоб зробити їх менш кричущими:
filter: grayscale(100%);
opacity: 0.8;
*/
transition: all 0.3s ease;
}
/* Приклад стилю для ховер-ефекту: відновлення кольору при наведенні */
.payment-logo:hover,
.delivery-logo:hover {
filter: none; /* Прибираємо сірий фільтр */
opacity: 1;
}
/* =========================================================
Стилі для всього тексту в міні-кошику (#333)
========================================================= */
/* Застосовуємо базовий колір до основного контейнера */
.fl-mini-cart-content {
color: #333 !important;
}
/* Перекриття для тексту товарів, якщо він успадковується від .products */
.fl-mini-cart-content .products,
.fl-mini-cart-content .products div {
color: #333 !important;
}
/* Перекриття для тексту в підсумковій сумі (total) */
.woocommerce-mini-cart__total.total,
.woocommerce-mini-cart__total.total p {
color: #333 !important;
}
/* Стиль для кнопки оформлення/перегляду, якщо вони є посиланнями, які потрібно перекрити */
/* (Текст самих кнопок часто має свій колір, який потрібно встановлювати окремо) */
.fl-mini-cart-content a {
/* Якщо це звичайне посилання, а не кнопка */
color: #333 !important;
}
/* Додатково: Стиль для повідомлення про безкоштовну доставку,
яке знаходиться за межами .fl-mini-cart-content, але в картці */
.cart-noticy {
color: #333 !important;
}
/* =========================================================
Встановлення кольору #333333 для всіх цін та сум у міні-кошику
========================================================= */
/* Застосовуємо до загальної суми (ціна "Разом:") */
/* (Бачимо на скріншоті, що це частина елемента з класом .total) */
.woocommerce-mini-cart__total.total .amount,
.woocommerce-mini-cart__total.total .price {
color: #800020 !important;
}
/* Застосовуємо до цін окремих товарів (наприклад, $1,000.00) */
.fl-mini-cart-content .product-price .amount,
.fl-mini-cart-content .product-price .price {
color: #FFD700 !important;
}
/* Застосовуємо до кількості товарів (наприклад, 1 x ...) */
.fl-mini-cart-content .quantity,
.fl-mini-cart-content .quantity .amount {
color: #800020 !important;
}
/* Додатково: Застосовуємо до всіх з класом amount (загальна практика WooCommerce) */
.fl-mini-cart-content .amount {
color: #800020 !important;
}
/* =========================================================
Стилі для символу валюти ($, грн, €) в міні-кошику
========================================================= */
/* Націлюємося на .currency або інші вкладені елементи, які можуть містити символ */
.fl-mini-cart-content .amount .currency,
.fl-mini-cart-content .quantity .currency,
.fl-mini-cart-content .woocommerce-Price-currencySymbol {
color: #800020!important;
}
/* Якщо це просто текст, що не має окремого тегу, але знаходиться в .amount: */
.fl-mini-cart-content .amount {
color: #800020 !important;
}
/* Встановлення нижнього відступу 100px для my-account-wrapper на всіх розмірах екрана */
.my-account-wrapper {
margin-bottom: 200px !important;
}
/* Встановлення нижнього відступу 100px для cart-wrapper на всіх розмірах екрана */
.cart-wrapper {
margin-bottom: 200px !important;
}
/* Стилі для базового стану кнопки */
.checkout-button.button.alt.wc-forward {
/* Колір фону: Бургундський (приблизний колір) */
background-color: #FFFFFF !important;
/* Колір тексту: Білий */
color: #800020 !important;
/* Додаткові стилі для кращого вигляду */
border: 1px solid #800020 !important; /* Бордюр того ж кольору */
padding: 10px 20px;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Стилі для стану наведення курсору (hover) */
.checkout-button.button.alt.wc-forward:hover {
/* Робимо фон трохи темнішим або світлішим при наведенні */
background-color: #66001a !important;
/* Зберігаємо текст білим */
color: #FFFFFF !important;
/* Змінюємо колір бордюру, якщо потрібно */
border-color: #66001a !important;
}
/* --- СТИЛІ ДЛЯ КНОПКИ "ПЕРЕГЛЯНУТИ КОШИК" --- */
/* 1. Основні стилі для кнопки "Переглянути кошик" */
/* Використовуємо клас 'button' всередині контейнера кнопок міні-кошика */
.woocommerce-mini-cart__buttons .button {
/* Фоновий колір: Прозорий (для ефекту рамки) */
background-color: transparent !important;
/* Текст: Темно-сірий/світло-чорний */
color: #333333 !important;
/* Рамка (Бордер): 1px, Бургундій */
border: 1px solid #800020 !important; /* #800020 - код бургундійського */
padding: 8px 15px !important; /* Додаємо для кращого вигляду */
box-shadow: none !important;
}
/* 2. Стилі при наведенні курсору (Hover) для кнопки "Переглянути кошик" */
.woocommerce-mini-cart__buttons .button:hover {
/* Фон: Бургундій (темно-червоний/винний) */
background-color: #800020 !important;
/* Текст: Білий */
color: #ffffff !important;
}
/* --- СТИЛІ ДЛЯ КНОПКИ "ОФОРМЛЕННЯ ЗАМОВЛЕННЯ" --- */
/* 3. Основні стилі для кнопки "Оформлення замовлення" */
/* Ця кнопка має додатковий клас 'checkout' */
.woocommerce-mini-cart__buttons .button.checkout {
/* Фон: Бургундій */
background-color: #800020 !important;
/* Текст: Білий */
color: #ffffff !important;
/* Прибираємо стандартну рамку */
border: 1px solid #800020 !important;
}
/* 4. Стилі при наведенні курсору (Hover) для кнопки "Оформлення замовлення" */
.woocommerce-mini-cart__buttons .button.checkout:hover {
/* Трохи світліший відтінок Бургундій для ефекту */
background-color: #a02844 !important;
color: #ffffff !important;
}
/* Заокруглення лише лівої сторони елемента з класом form-control */
.form-control {
/* Радіус для верхнього лівого кута */
border-top-left-radius: 8px !important;
/* Радіус для нижнього лівого кута */
border-bottom-left-radius: 8px !important;
/* Обов'язково скидаємо радіус правої сторони, якщо він був встановлений раніше */
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* Встановлення загального кольору для ліній (Бургундський) */
:root {
--burgundy-line-color: #800020;
}
/* 1. Горизонтальні роздільники (HR) */
/* Стандартний HTML-роздільник */
hr {
border-color: var(--burgundy-line-color) !important;
background-color: var(--burgundy-line-color) !important;
color: var(--burgundy-line-color) !important;
}
/* 2. Загальні бордюри (для колонок, карток, блоків) */
/* Це найагресивніше правило, використовуйте його обережно! */
/* 3. Бордюри в хедері та меню (наприклад, роздільники елементів меню) */
.header,
.site-header,
.main-menu li,
.sub-menu {
border-color: #8a8a8a !important;
}
/* 4. Бордюри в футері (наприклад, роздільник copyright) */
.site-footer,
.footer-container,
.footer-full-width-section,
.copyright {
border-top-color: #ececec !important;
border-bottom-color: var(--burgundy-line-color) !important;
}
/* 5. Лінії та роздільники в міні-кошику (наприклад, між товарами) */
.fl-mini-cart-content .products li,
.fl-mini-cart-content .woocommerce-mini-cart__total.total {
border-top-color: var(--burgundy-line-color) !important;
}
/* 6. Лінії в таблицях (наприклад, у кошику або на сторінці оформлення) */
table.shop_table,
table.shop_table tr,
table.shop_table td {
border-color: var(--burgundy-line-color) !important;
}
/* Встановлення білого кольору для основного тексту ціни */
.woocommerce-Price-amount,
.amount {
color: #FFD700 !important;
font-weight:900;
}
/* =========================================================
Заокруглення країв для всіх зображень товарів (15px)
========================================================= */
/* 1. Заокруглення безпосередньо елемента ![]()
*/
.product img,
.product-content img,
.woocommerce-product-gallery__image img {
border-radius: 15px !important;
/* Важливо: Це вирішує проблему, коли зображення виходить за межі заокругленого контейнера */
display: block;
width: 100%;
height: auto;
}
/* 2. Заокруглення контейнера зображення (для теми Machic, це часто .thumbnail-wrapper) */
.thumbnail-wrapper,
.woocommerce-product-gallery__image {
/* Заокруглення контейнера */
border-radius: 15px !important;
/* Це гарантує, що зображення всередині буде обрізане по заокругленому краю */
overflow: hidden !important;
}
/* 1. СТИЛІ КНОПКИ "ДОДАТИ В КОШИК" (single_add_to_cart_button) */
/*
single_add_to_cart_button button alt
ФОН: Білий (#FFFFFF)
ТЕКСТ: Бургундій (темно-червоний/винний)
*/
.single_add_to_cart_button,
.single_add_to_cart_button.button.alt {
/* Фон: Білий */
background-color: #ffffff !important;
/* Текст: Бургундій (використовуємо поширений код #800020) */
color: #800020 !important;
/* Додаємо рамку для видимості білої кнопки на світлому фоні (за потреби) */
border: 2px solid #800020 !important;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
}
/* СТИЛІ ДЛЯ СТАНУ HOVER (при наведенні курсору) */
.single_add_to_cart_button:hover,
.single_add_to_cart_button.button.alt:hover {
/* Інвертуємо кольори, щоб було видно реакцію */
background-color: #800020 !important;
color: #ffffff !important;
font-weight: bold;
text-transform: uppercase;
}
/* ---------------------------------------------------------------------- */
/* 2. СТИЛІ КНОПКИ "СПЕЦІАЛЬНЕ ЗАМОВЛЕННЯ" (awooc-custom-order button) */
/*
awooc-custom-order button alt awooc-button-js ... no-stock-no-price
ФОН: Зелений
ТЕКСТ: Білий
*/
.awooc-custom-order.button.alt,
.awooc-custom-order-button,
.awooc-custom-order-button.wp-element-button {
/* Фон: Зелений (використовуємо стандартний #28a745, можна змінити на інший відтінок) */
background-color: #28a745 !important;
/* Текст: Білий */
color: #ffffff !important;
border: none !important;
}
/* СТИЛІ ДЛЯ СТАНУ HOVER (при наведенні курсору) */
.awooc-custom-order.button.alt:hover,
.awooc-custom-order-button:hover {
/* Трохи темніший зелений для ефекту наведення */
background-color: #1e7e34 !important;
color: #ffffff !important;
}
.klb-product-detail.col-12 h1.product_title {
/* Прибираємо зайвий відступ після головного заголовка на мобільному */
margin-bottom: 10px !important;
font-size: 32px !important; /* Робимо заголовок трохи меншим */
font-weight: 500;
}
/* Media Query для мобільних пристроїв (екрани до 767px) */
@media (max-width: 767px) {
/* 1. СТИЛІЗУЄМО КОНТЕЙНЕР ПРОДУКТУ ДЛЯ ГАРНОГО ВИГЛЯДУ */
.klb-product-detail.col-12 {
/* Додаємо внутрішній відступ, щоб контент не прилипав до країв */
padding: 20px 15px !important;
/* Додаємо зовнішній відступ зліва та справа, щоб блок не прилипав до країв екрана */
margin-left: 10px !important;
margin-right: 10px !important;
/* Центруємо сам блок (якщо він менше 100% ширини) */
width: auto !important;
max-width: 95% !important; /* Обмеження ширини, щоб залишити зовнішній відступ */
/* Додаємо легку тінь для виділення блоку (за бажанням) */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
/* Закруглюємо кути для сучасного вигляду */
border-radius: 10px !important;
}
/* 2. ВІДЦЕНТРОВУЄМО ВЕСЬ ВНУТРІШНІЙ ТЕКСТ ТА ЗОБРАЖЕННЯ */
.klb-product-detail.col-12,
.klb-product-detail.col-12 * {
/* Центруємо текст, заголовки, рейтинги та ціну */
text-align: center !important;
}
/* 3. ОПТИМІЗАЦІЯ РОЗМІРУ ТЕКСТУ ТА ВІДСТУПІВ */
.klb-product-detail.col-12 h1.product_title {
/* Прибираємо зайвий відступ після головного заголовка на мобільному */
margin-bottom: 10px !important;
font-size: 20px !important; /* Робимо заголовок трохи меншим */
}
/* 4. ЦЕНТРУВАННЯ ГРУП ЕЛЕМЕНТІВ (КНОПОК ТА СОЦМЕРЕЖ) */
.klb-product-detail.col-12 .quantity,
.klb-product-detail.col-12 .single_add_to_cart_button,
.klb-product-detail.col-12 .social-share {
/* Використовуємо Flexbox для центровки елементів управління */
display: flex !important;
justify-content: center !important;
margin-left: auto;
margin-right: auto;
}
/* 5. ПОКРАЩЕННЯ ВИГЛЯДУ КНОПОК */
.klb-product-detail.col-12 .button {
width: 100% !important; /* Кнопки на всю ширину мобільного блоку */
margin: 5px 0 !important;
}
}
/* Media Query для мобільних пристроїв */
@media (max-width: 767px) {
/* 1. Центрування блоку Модель/Артикул */
/* Цей блок має клас product-meta або знаходиться одразу під H1 */
.klb-product-detail.col-12 .product-meta {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
/* Перетворюємо на inline-block, щоб можна було відцентрувати батьківським margin:auto,
якщо він має меншу ширину, ніж 100% */
display: block !important;
}
/* 2. Центрування блоку Відгуки (зірочки та текст) */
.klb-product-detail.col-12 .product-ratings {
/* Застосовуємо Flexbox для центрування внутрішніх елементів (зірочок) */
display: flex !important;
justify-content: center !important;
/* Центруємо сам блок відгуків */
margin-left: auto !important;
margin-right: auto !important;
width: fit-content !important; /* Обмежуємо ширину до вмісту */
}
/* 3. Центрування блоку "В наявності" */
.klb-product-detail.col-12 .klb-single-stock {
display: flex !important;
justify-content: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Media Query для мобільних пристроїв */
@media (max-width: 767px) {
/* ... (попередні стилі для klb-product-detail тут залишаються) ... */
/* 3.4. Центрування блоку кількості товару */
.klb-product-detail.col-12 .quantity,
.klb-product-detail.col-12 .quantity .qty {
/* Встановлюємо, щоб елемент кількості був inline-block для коректного центрування */
display: inline-block !important;
/* Центруємо весь контейнер форми, якщо він існує */
margin-left: auto !important;
margin-right: auto !important;
}
/* Центруємо батьківський елемент, який містить поля кількості та кнопку "Додати в кошик" */
.klb-product-detail.col-12 form.cart {
display: flex !important;
flex-direction: column !important; /* Розташування елементів вертикально */
align-items: center !important; /* Центруємо всі елементи по горизонталі */
margin-bottom: 10px !important;
}
/* Забезпечуємо, щоб самі поля кількості та кнопки були відцентровані */
.klb-product-detail.col-12 .quantity {
margin-bottom: 10px !important; /* Додаємо відступ між кількістю і кнопками */
}
}
/* Встановлюємо стилі для нашого нового, унікального класу */
.custom-review-title {
/* 1. Встановлюємо чорний текст */
color: #000000 !important;
/* 2. Додаємо світлий фон для контрасту (оскільки у вас темна тема) */
background-color: #ffffff !important;
/* 3. Оптимізуємо зовнішній вигляд */
padding: 10px 15px !important;
border-radius: 5px !important;
/* 4. Центруємо сам блок */
margin-left: auto !important;
margin-right: auto !important;
width: fit-content !important; /* Обмежує ширину до вмісту */
}
/* ======================================= */
/* БАЗОВІ СТИЛІ (ДЕСКТОП) */
/* ======================================= */
.promo-banner {
width: 100%;
/* Допомагає коректно позиціонувати зображення */
overflow: hidden;
/* Встановлюємо висоту для десктопа (орієнтовно 100px) */
height: 50px;
}
.promo-banner img.promo-image {
width: 100%;
/* Висота зображення відповідає висоті контейнера */
height: 60px;
/* ОБОВ'ЯЗКОВО: Забезпечує, що зображення заповнить простір, не розтягуючи його */
object-fit: cover;
display: block;
}
/* ======================================= */
/* АДАПТИВНІ СТИЛІ (МОБІЛЬНІ ТА ПЛАНШЕТИ) */
/* ======================================= */
@media (max-width: 992px) {
/* Зменшуємо висоту контейнера на мобільних/планшетах */
.promo-banner {
height: 50px; /* Висота 50-60px для мобільних */
}
/* Зменшуємо висоту самого зображення */
.promo-banner img.promo-image {
height: 50px; /* Висота 50-60px для мобільних */
}
}
@media (max-width: 991px) {
.promo-banner {
display: none;
}
}
@media (min-width: 992px) {
.promo-banner {
display: none;
}
}
/* =========================================================
Адаптивний блок Доставки та Оплати
(Прозора інтеграція в темну тему Machic, Font Awesome Ready)
========================================================= */
.delivery-payment-block {
margin-top: 30px;
padding: 20px;
/* Колір блоку: ПРОЗОРИЙ для інтеграції в темний фон Machic */
background-color: transparent;
border-radius: 8px;
/* Залишаємо легкий бордюр, але робимо його світлим */
border: 1px solid rgba(255, 255, 255, 0.1);
}
.delivery-payment-block .block-title {
font-size: 19px;
font-weight: 700;
/* Білий колір на темному фоні */
color: #FFFFFF;
margin-bottom: 20px;
padding-bottom: 10px;
/* Світла лінія для розділення */
border-bottom: 2px solid #800020;
text-align: center;
}
/* --- Адаптивна Сітка --- */
/* Контейнер розділений на дві частини: Інфо (70%) та Контакти (30%) на десктопі */
.delivery-payment-block .main-layout {
display: flex;
flex-direction: column; /* Мобільний: вертикально */
gap: 30px;
}
.delivery-payment-block .info-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Структура тексту: робимо назву (h5) та опис (p) чіткими */
.delivery-payment-block .info-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.delivery-payment-block .info-item h5 {
font-size: 15px;
font-weight: 600;
/* Білий колір для назв */
color: #FFFFFF;
margin-bottom: 10px; /* Зменшуємо відступ між назвою та описом */
}
.delivery-payment-block .info-item p {
font-size: 13px; /* Трохи зменшуємо розмір для більшої структурованості */
/* Світло-сірий колір для деталей */
color: rgba(255, 255, 255, 0.7);
line-height: 1.4;
margin: 0;
}
/* Іконки Font Awesome */
.delivery-payment-block .delivery-icon {
font-size: 24px; /* Трохи зменшуємо розмір іконки */
color: #FFD700; /* Акцентний колір (Rozetka Red) */
line-height: 1;
/* Видаляємо Font Awesome емуляцію, оскільки тепер припускаємо використання класів FA (наприклад, ) */
}
/* --- Стилі для Контактів та Кнопок --- */
.delivery-payment-block .contact-block {
padding: 10px 40px;
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.05); /* Легкий темний фон для виділення */
}
.delivery-payment-block .contact-item {
/* Вирівнювання елементів у контакті */
display: flex;
align-items: center;
gap: 8px; /* Відступ між іконкою та текстом */
margin-bottom: 12px; /* Більший відступ між рядками контактів */
font-size: 13px;
color: #FFFFFF;
}
.delivery-payment-block .contact-item strong {
color: #800020;
font-weight: 700;
}
/* Стилі для кнопки "Запит" */
.delivery-payment-block .request-button {
display: block;
width: 100%;
text-align: center;
padding: 10px 15px; /* Зменшуємо вертикальний відступ */
margin-top: 14px;
background-color: #800020; /* Акцентний колір */
color: #FFFFFF !important; /* Білий текст */
border: none;
border-radius: 4px;
font-size: 14px; /* Зменшуємо розмір шрифту кнопки */
font-weight: 700;
text-transform: uppercase;
transition: background-color 0.3s ease;
}
.delivery-payment-block .request-button:hover {
background-color: #800020; /* Темніший червоний при наведенні */
}
/* =========================================================
Медіа-запити для адаптації
========================================================= */
/* Планшет (Tablet - Ширина > 768px) */
@media (min-width: 768px) {
.delivery-payment-block .info-grid {
/* 2 колонки для інфо-блоків */
grid-template-columns: repeat(2, 1fr);
display: grid;
gap: 25px 20px;
}
}
/* Десктоп (Desktop - Ширина > 1200px) */
@media (min-width: 1200px) {
.delivery-payment-block .main-layout {
flex-direction: row; /* Десктоп: горизонтально */
gap: 20px;
align-items: flex-start;
}
.delivery-payment-block .info-section {
/* Інфо займає більшу частину простору */
flex: 3;
margin-top: 25px;
}
.delivery-payment-block .contact-section {
/* Контакти займають меншу частину простору */
flex: 1;
min-width: 250px;
}
.delivery-payment-block .info-grid {
/* 3 колонки для інфо-блоків на десктопі */
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
}
/* Товари в схожі товари стилі */
.product-title a {
color: #ffffff !important;
text-decoration: none; /* Часто корисно прибрати підкреслення у посилань */
font-weight: normal;
}
.klbth-icon-eye-empty,
.klbth-icon-shop-1 {
color: #800020; /* Насичений темно-бордовий колір */
}
.woocommerce-Price-currencySymbol {
font-weight: bold;
/* Або, як варіант: */
/* font-weight: 500; */
}
/* Стилізація заголовка спливаючого вікна AWOOC */
.awooc-form-custom-order-title,
.awooc-popup-item .awooc-popup-title {
/* Колір: Бургундій (#800020) */
color: #800020 !important;
/* Можна додати додатковий жирний шрифт, якщо потрібно */
font-weight: bold !important;
}
p .total-price-green {
/* Зелений колір */
color: #28a745 !important;
}
/* 📐 ФІКСАЦІЯ ШИРИНИ ХЕДЕРА НА 100vw */
/* ================================================= */
#masthead.site-header {
/* 1. Встановлюємо ширину на 100% ширини вікна перегляду */
width: 100vw !important;
/* 2. Запобігаємо появі горизонтальної прокрутки,
яку може спричинити 100vw, якщо є елементи з великим відступом */
max-width: 100% !important;
/* 3. Зміщуємо хедер ліворуч, щоб компенсувати простір,
якщо він центрований і "виліз" за межі */
margin-left: 0 !important;
/* 4. Забезпечуємо повне перекриття */
left: 0 !important;
}
/* ================================================= */
/* 🖱️ ХОВЕР: ДОДАВАННЯ БОРДЕРА ДО КНОПКИ КОРЗИНИ */
/* ================================================= */
.product_type_simple.add_to_cart_button.ajax_add_to_cart {
/* Основний стиль: Встановлюємо прозорий бордер, щоб кнопка не "стрибала"
при наведенні (це важливо для стабільності розміру) */
border: 1px solid transparent;
transition: border-color 0.3s ease; /* Плавний перехід для бордера */
}
.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover {
/* Стиль при наведенні: Замінюємо прозорий бордер на бургундський */
border: 1px solid #800020 !important;
}
/* Приховуємо напівпрозорий оверлей у кошику WooCommerce */
.woocommerce-cart .blockUI.blockOverlay,
.woocommerce-cart .blockUI.blockOverlay + .blockElement {
/* Робимо його повністю прозорим */
opacity: 0 !important;
/* Можна спробувати повністю приховати (але це може викликати інші проблеми) */
/* display: none !important; */
}
/* Приховуємо іконку завантаження (спіннер), якщо вона відображається */
.woocommerce-cart .blockUI.blockElement {
display: none !important;
}
/* ================================================= */
/* 🌐 СТИЛІ ДЛЯ БЛОКУ СОЦІАЛЬНИХ МЕРЕЖ У ФУТЕРІ */
/* ================================================= */
.footer-col .social-links {
display: flex;
gap: 15px;
margin-top: 10px;
}
.footer-col .social-link {
display: flex;
align-items: center;
justify-content: center;
/* Розміри та форма */
width: 40px;
height: 40px;
border-radius: 50%; /* Робить іконку круглою */
font-size: 18px; /* Розмір самої іконки */
/* Основні кольори */
background-color: #fff; /* Напівпрозорий фон */
color: #800020; /* Білий колір іконки */
text-decoration: none;
transition: all 0.3s ease;
}
/* 🖱️ ХОВЕР-ЕФЕКТ: Бургундський фон */
.footer-col .social-link:hover {
background-color: #ffffff !important; /* Фон - Бургундський */
color: #800020 !important;
transform: scale(1.05);
}
/* ⚠️ ФІКС: Гарантуємо, що іконка з FA відображається */
.footer-col .social-link i {
font-family: 'Font Awesome 6 Brands', 'Font Awesome 5 Brands', sans-serif !important;
font-weight: 400 !important; /* Вага шрифту для FA Brands */
}
/* Встановлення фону для блоку повідомлень KLBWL (YITH Wishlist) */
.klbwl-notice {
/* Темно-сірий колір фону */
background-color: #333333 !important;
/* Для забезпечення контрасту, текст повинен бути світлим */
color: #ffffff !important;
/* Додаємо невеликі внутрішні відступи для кращої читабельності */
padding: 10px 15px !important;
/* Додаємо невелике заокруглення кутів для естетики */
border-radius: 4px;
}
/* ========================================================= */
/* СЕЛЕКТОРИ ДЛЯ ВСІХ ВІДЖЕТІВ */
/* ========================================================= */
.woocommerce-sidebar .widget,
.woocommerce-sidebar .widget_klb_product_categories,
.woocommerce-sidebar .widget_price_filter,
.woocommerce-sidebar .widget_rating_filter,
.woocommerce-sidebar .widget_layered_nav {
/* Базовий стиль для всіх віджетів - БУДЕ ПЕРЕПИСАНИЙ МЕДІА-ЗАПИТАМИ */
padding: 15px; /* Забезпечуємо відступи для візуального відокремлення */
}
/* ========================================================= */
/* 1. ДЕСКТОП (min-width: 992px): ТЕМНИЙ ФОН / СВІТЛИЙ ТЕКСТ */
/* ========================================================= */
@media (min-width: 992px) {
/* 1.1. Контейнери віджетів (Фон: #333) */
.woocommerce-sidebar .widget,
.woocommerce-sidebar .widget_klb_product_categories,
.woocommerce-sidebar .widget_price_filter {
background-color: #333333 !important;
color: #ffffff !important; /* Базовий текст білий */
}
/* 1.2. Заголовки, посилання та текст усередині (Текст: #ffffff) */
.widget-title,
.product_cat,
.widget_klb_product_categories a,
.woocommerce-sidebar .widget a {
color: #ffffff !important;
}
}
/* ========================================================= */
/* 2. МОБІЛЬНИЙ (max-width: 991px): СВІТЛИЙ ФОН / ТЕМНИЙ ТЕКСТ */
/* ========================================================= */
@media (max-width: 991px) {
/* 2.1. Контейнери віджетів (Фон: #ffffff) */
.woocommerce-sidebar .widget,
.woocommerce-sidebar .widget_klb_product_categories,
.woocommerce-sidebar .widget_price_filter {
background-color: #ffffff !important;
color: #333333 !important; /* Базовий текст темний */
}
/* 2.2. Заголовки, посилання та текст усередині (Текст: #333) */
.widget-title,
.product_cat,
.widget_klb_product_categories a,
.woocommerce-sidebar .widget a {
color: #333333 !important;
}
/* 2.3. Іконка "Закрити" (Cancel) - також темна на білому фоні */
.klbth-icon-cancel {
color: #333333 !important;
}
/* 2.4. Заголовок мобільної бічної панелі (якщо він відрізняється від контейнера) */
.sidebar-mobile-header {
background-color: #ffffff !important;
color: #333333 !important;
border-bottom: 1px solid #eee; /* Можна додати тонку лінію */
}
}
/* ========================================================= */
/* ВИПРАВЛЕННЯ: БІЛИЙ КОЛІР ДЛЯ KLBTH-ICON-CANCEL НА МОБІЛЬНОМУ */
/* ========================================================= */
@media (max-width: 991px) {
/* 1. Стилі для іконки (текст/шрифтова іконка) */
.klbth-icon-cancel {
color: #ffffff !important;
}
/* 2. Стилі для SVG-іконки (якщо вона є SVG) */
.klbth-icon-cancel svg,
.klbth-icon-cancel svg * {
fill: #ffffff !important;
stroke: #ffffff !important;
}
/* 3. Додаткове націлення (якщо вона всередині мобільного хедера) */
.sidebar-mobile-header .klbth-icon-cancel {
background-color: #333 !important;
}
}
/* ========================================================= */
/* БІЛИЙ КОЛІР ДЛЯ МІТОК ФІЛЬТРА ЦІН (ТІЛЬКИ ДЕСКТОП) */
/* ========================================================= */
@media (min-width: 992px) {
/* Націлюємося на мітки "від" та "до" у фільтрі цін */
.widget.woocommerce.widget_price_filter .price_label,
.widget.woocommerce.widget_price_filter .from,
.widget.woocommerce.widget_price_filter .to {
/* Встановлюємо білий колір тексту для контрасту з темним фоном */
color: #ffffff !important;
}
/* Додатково: Встановлюємо білий колір для відображення поточної ціни */
.widget.woocommerce.widget_price_filter .price_label .amount {
color: #ffffff !important;
}
}
/* Встановлення світло-сірого кольору для вибраного тексту в Select2 */
.select2-container .select2-selection--single .select2-selection__rendered {
/* Колір тексту: Світло-сірий */
color: #cccccc !important;
}
/* Додатково: Встановлення білого кольору для плейсхолдера, якщо він є */
.select2-container .select2-selection--single .select2-selection__placeholder {
color: #cccccc !important;
}
/* Приховуємо блок соціальних мереж */
.site-social {
display: none !important;
}
/* Базовий відступ для мобільних пристроїв */
.klbwl-list.woocommerce-cart-form {
/* Встановлюємо помірний відступ на мобільному (наприклад, 40px),
щоб уникнути надто великого пустого простору.
*/
margin-bottom: 40px !important;
}
/* Відступ для ДЕСКТОПА (екрани від 992px і більше) */
@media (min-width: 992px) {
.klbwl-list.woocommerce-cart-form {
/* Встановлюємо великий відступ 100px для десктопа */
margin-bottom: 100px !important;
}
}
/* Базовий відступ для всіх пристроїв (ефективно для мобільних) */
.customer_login {
/* Наприклад, 40px для мобільного, щоб було менше пустого місця */
margin-bottom: 40px !important;
}
/* Відступ 100px для ДЕСКТОПА (екрани від 992px і більше) */
@media (min-width: 992px) {
.customer_login {
/* Встановлюємо великий відступ 100px для десктопа */
margin-bottom: 100px !important;
}
}
/* ========================================================= */
/* ТЕКСТ #333 ДЛЯ ВСІХ ЕЛЕМЕНТІВ QUICKVIEW */
/* ========================================================= */
.quickview-product,
.quickview-product.single-product-wrapper.product.white-popup {
/* Базовий колір тексту для контейнера */
color: #333333 !important;
}
/* Націлюємося на всі заголовки, посилання, кнопки та елементи, які можуть мати власний колір */
.quickview-product h1,
.quickview-product h2,
.quickview-product h3,
.quickview-product h4,
.quickview-product p,
.quickview-product span,
.quickview-product a,
.quickview-product button,
.quickview-product i,
.quickview-product .price,
.quickview-product .summary {
color: #333333 !important;
}
/* Колір іконок та SVG-елементів всередині */
.quickview-product svg,
.quickview-product path {
fill: #333333 !important;
color: #333333 !important;
}
/* ========================================================= */
/* ПРИХОВУВАННЯ ЕЛЕМЕНТІВ МОБІЛЬНОГО ХЕДЕРА НА МОБІЛЬНОМУ */
/* ========================================================= */
/* Націлюємося на мобільні екрани (до 991px) */
@media (max-width: 991px) {
/* Приховуємо перемикач хедера (наприклад, перемикач мови/валюти) */
.header-mobile-switcher {
display: none !important;
}
/* Приховуємо блок кастомної мобільної інформації */
.custom-mobile-info {
display: none !important;
}
}
/* ========================================================= */
/* КОЛІР ДЛЯ СТАТУСУ "В НАЯВНОСТІ" */
/* ========================================================= */
.product-stock.in-stock {
/* Встановлюємо темно-червоний колір тексту */
color: #970d2f !important;
}
/* ========================================================= */
/* КОЛІР ДЛЯ ІКОНКИ КОШИКА (FA-BASKET-SHOPPING) */
/* ========================================================= */
/* 1. Мобільний (max-width: 991px): Темно-сірий колір */
@media (max-width: 991px) {
.fa-basket-shopping,
.fa-solid.fa-basket-shopping {
color: #ffffff !important;
}
}
/* 2. Десктоп (min-width: 992px): Білий колір */
@media (min-width: 992px) {
.fa-basket-shopping,
.fa-solid.fa-basket-shopping {
color: #ffffff !important;
}
}
/* =================================================================
1. КОНТЕЙНЕР ДЛЯ ЦЕНТРУВАННЯ (max-width 1600px)
================================================================= */
.machic-categories-container {
max-width: 1600px;
margin-left: auto;
margin-right: auto;
padding: 0 7px; /* Трохи зменшив бічний padding */
}
/* =================================================================
2. ОСНОВНИЙ КОНТЕЙНЕР (МОБІЛЬНИЙ СКРОЛ)
================================================================= */
.machic-custom-categories-wrapper {
margin-bottom: 20px;
padding: 5px 0;
background: transparent;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
/* НАЛАШТУВАННЯ СКРОЛУ ЗБЕРЕЖЕНО */
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
/* Приховування скролбара */
.machic-custom-categories-wrapper::-webkit-scrollbar {
display: none;
}
/* 3. Окремий елемент категорії */
.machic-category-item {
text-align: center;
border-radius: 6px;
transition: background-color 0.3s;
background: transparent;
/* Збільшуємо фіксовану ширину, щоб помістити велику іконку */
flex: 0 0 130px;
width: 150px !important;
margin: 0 5px;
}
/* 4. Посилання (обгортка іконки та тексту) */
.machic-category-link {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
/* ЗМЕНШУЄМО ДО МІНІМУМУ ВІДСТУП */
padding: 5px;
height: 100%;
}
/* 5. Іконка (PNG/SVG) - МОБІЛЬНИЙ/ПЛАНШЕТ (МАКСИМАЛЬНО ВЕЛИКІ) */
.machic-category-icon {
/* Збільшено розмір іконки */
width: 150px !important;
height: 150px !important;
/* ЗМЕНШЕНО ВІДСТУП МІЖ ІКОНКОЮ ТА ТЕКСТОМ */
margin-bottom: 3px;
object-fit: contain;
transition: transform 0.3s;
}
/* 6. Назва категорії (Жирний шрифт) - МОБІЛЬНИЙ/ПЛАНШЕТ */
.machic-category-name {
color: #ffffff;
font-size: 14px !important;
line-height: 1.3;
font-weight: 700 !important;
max-width: 100%;
display: block;
}
/* Ефект при наведенні */
.machic-category-icon:hover {
transform: none;
filter: grayscale(100%);
}
/* =================================================================
АДАПТАЦІЯ ДЛЯ ДЕСКТОПА (Grid Layout)
================================================================= */
@media (min-width: 768px) {
.machic-custom-categories-wrapper {
display: grid;
/* Grid на 6 рівних колонок (адаптується під велику іконку) */
grid-template-columns: repeat(6, 1fr);
gap: 20px;
overflow-x: hidden;
padding: 5px;
}
.machic-category-item {
width: auto;
margin: 0;
}
/* Іконка (PNG/SVG) - ДЕСКТОП (МАКСИМАЛЬНО ВЕЛИКІ) */
.machic-category-icon {
/* Максимально збільшуємо для десктопа */
width: 150px !important;
height: 150px !important;
/* ЗМЕНШЕНО ВІДСТУП МІЖ ІКОНКОЮ ТА ТЕКСТОМ */
margin-bottom: 5px;
}
/* Назва категорії - ДЕСКТОП */
.machic-category-name {
font-size: 13px !important;
line-height: 1.4;
}
.machic-category-link {
/* Зменшуємо загальний padding */
padding: 8px 5px;
}
}
/* ========================================================= */
/* ФІНАЛЬНИЙ CSS ДЛЯ ПОЗИЦІОНУВАННЯ БЕЙДЖІВ */
/* ========================================================= */
/* 1. РОБИМО ВІДНОСНИМ ГОЛОВНИЙ ЕЛЕМЕНТ КАРТКИ ТОВАРУ */
.machic-product-loop-item, /* Найімовірніший батьківський клас у Machic */
.product {
position: relative !important;
}
/* 2. ПОЗИЦІОНУВАННЯ ІКОНОК (АБСОЛЮТНО ВСЕРЕДИНІ БАТЬКІВСЬКОГО ЕЛЕМЕНТА) */
.product-badges-corner {
position: absolute;
top: 10px;
left: 10px;
z-index: 100; /* Накладаємо поверх зображення */
display: flex;
flex-direction: column;
gap: 5px;
}
/* 3. Стилізація */
.product-badges-corner img {
width: 45px;
height: 45px;
border-radius: 3px;
background-color: #ffffff;
padding: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* Контейнер блоку під кнопками */
.machic-bulk-wrapper {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
padding: 20px;
margin-top: 25px; /* Відступ від кнопок кошика */
margin-bottom: 10px;
max-width: 100%;
clear: both; /* Щоб блоки не наповзали один на одного */
}
/* Заголовок блоку */
.machic-bulk-header {
font-size: 11px;
font-weight: 600;
color: #cccccc;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 15px;
}
/* Сітка карток (4 в ряд) */
.machic-bulk-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
/* Картки цін */
.machic-bulk-card {
background: #414141;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding: 15px 5px;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s ease;
}
/* Hover-ефект */
.machic-bulk-card:hover {
background: #181818;
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-2px);
}
/* Активна картка (Роздрібна ціна) */
.machic-bulk-card.is-active {
border-color: rgba(255, 204, 0, 0.5); /* Золота рамка */
background: rgba(255, 204, 0, 0.03);
}
.machic-bulk-card.is-active .m-price {
color: #ffcc00; /* Золотий колір цифр */
}
/* Текст мітки (роздріб / кількість) */
.m-label {
font-size: 10px;
color: #cccccc;
margin-bottom: 8px;
text-transform: lowercase;
}
/* Сама ціна */
.m-price {
font-size: 19px;
font-weight: 700;
color: #ffffff;
line-height: 1;
}
/* Символ валюти */
.m-curr {
font-size: 13px;
font-weight: 400;
opacity: 0.7;
margin-left: 1px;
}
/* Примітка внизу блоку */
.machic-bulk-note {
font-size: 10px;
color: #ffffff;
text-align: center;
margin-top: 15px;
font-style: italic;
}
/* Адаптація для мобільних телефонів (2х2) */
@media (max-width: 480px) {
.machic-bulk-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.machic-bulk-wrapper {
padding: 15px;
}
.m-price {
font-size: 17px;
}
}
/* підкатегорії стилі */
/* 1. Основний контейнер */
.seo-fast-links-container {
width: 100%;
margin: 25px 0 !important;
padding: 0 10px;
display: block !important;
box-sizing: border-box;
}
/* 2. Обгортка для кнопок (гнучка сітка) */
.seo-fast-links-wrapper {
display: flex;
flex-wrap: wrap; /* Дозволяє кнопкам переноситися на новий рядок */
gap: 10px; /* Відступ між кнопками */
justify-content: flex-start;
align-items: center;
}
/* 3. Базовий стиль кнопки (Десктоп) */
.seo-tag-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border: 1px solid #686868 !important; /* Ваш бордовий */
background: transparent !important;
color: #686868 !important;
border-radius: 4px;
font-size: 13px; /* Оптимально для десктопа */
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none !important;
transition: all 0.25s ease-in-out;
white-space: nowrap; /* Текст в один рядок */
}
/* Ефект при наведенні (Десктоп) */
@media (min-width: 992px) {
.seo-tag-button:hover {
background: #800020 !important;
box-shadow: 0 4px 12px rgba(128, 0, 32, 0.5);
transform: translateY(-2px); /* Легке підняття */
}
}
/* 4. Адаптація для ПЛАНШЕТІВ (до 991px) */
@media (max-width: 991px) {
.seo-fast-links-container {
margin: 20px 0 !important;
}
.seo-tag-button {
padding: 8px 14px;
font-size: 11px; /* Трохи зменшуємо шрифт */
background: #ffffff !important; /* Білий фон для світлої мобільної теми */
color: #800020 !important;
border-color: #d1d1d1 !important; /* М'якша рамка */
}
}
/* 5. Адаптація для МОБІЛЬНИХ (до 480px) */
@media (max-width: 480px) {
.seo-fast-links-wrapper {
gap: 6px; /* Менші відступи на мобільних */
}
.seo-tag-button {
padding: 6px 10px;
font-size: 10px; /* Мінімально допустимий розмір для читання */
letter-spacing: 0.2px;
border-radius: 3px;
flex-grow: 1; /* Кнопки розтягуються, щоб заповнити рядок рівномірно */
text-align: center;
}
}
/* 6. Спеціальний фікс для темної/світлої теми */
body.dark-mode .seo-tag-button {
background: rgba(128, 0, 32, 0.2) !important;
color: #fff !important;
}
body:not(.dark-mode) .seo-tag-button {
background: #fff !important;
color: #800020 !important;
}
/* --- ОСНОВНА ПАНЕЛЬ НАВІГАЦІЇ --- */
.header-nav-row {
background: linear-gradient(90deg, #600018 0%, #800020 50%, #600018 100%);
position: relative;
z-index: 9999;
height: 55px;
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* ЛИПКИЙ СТАН (Для JS) */
.header-nav-row.is-fixed {
position: fixed !important;
top: 0 !important;
left: 0;
width: 100%;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
animation: navSlideDown 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* Корекція для адмін-панелі WP */
.admin-bar .header-nav-row.is-fixed {
top: 32px !important;
}
/* СПИСОК КАТЕГОРІЙ */
.secondary-nav-list {
display: flex;
justify-content: center;
align-items: center; /* Центрування по вертикалі всередині рядка */
list-style: none;
margin: 0;
padding: 0;
gap: 10px; /* Трохи зменшив gap, бо додалися іконки */
}
.secondary-nav-list > li {
position: relative;
}
.secondary-nav-list > li > a {
display: flex; /* Змінено на flex для вирівнювання іконки і тексту в ряд */
align-items: center; /* Центрування іконки відносно тексту */
padding: 10px 15px; /* Корекція падінгів під іконку */
color: #ffffff !important;
font-size: 13px; /* Ваш розмір тексту збережено */
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.5px;
transition: all 0.3s ease;
}
/* СТИЛІ ІКОНОК (Поруч із текстом) */
.cat-icon {
width: 30px !important; /* Оптимальний розмір для висоти 55px */
height: 30px !important;
object-fit: contain;
margin-right: 10px; /* Відступ між іконкою та текстом */
transition: transform 0.3s ease;
filter: brightness(0) invert(1); /* Робить чорні іконки білими */
}
/* Ефект при наведенні */
.secondary-nav-list > li:hover > a {
color: #ffcc00 !important;
background: rgba(255,255,255,0.05);
}
.secondary-nav-list > li:hover .cat-icon {
transform: scale(1.1);
filter: brightness(1) invert(0) sepia(1) saturate(5) hue-rotate(10deg); /* Золотистий відтінок при наведенні */
}
/* --- СЕКЦІЯ ПІДКАТЕГОРІЙ --- */
.nav-sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
background: #ffffff;
box-shadow: 0 15px 50px rgba(0,0,0,0.2);
border-radius: 0 0 10px 10px;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
padding: 20px 0;
border-top: 4px solid #ffcc00;
}
.secondary-nav-list li:hover .nav-sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-sub-menu ul { list-style: none; padding: 0; margin: 0; }
.nav-sub-menu li { padding: 0 10px; }
.nav-sub-menu li a {
display: flex;
align-items: center;
padding: 12px 20px;
color: #222222 !important;
font-size: 14px;
font-weight: 600;
text-decoration: none;
border-radius: 6px;
transition: all 0.25s ease;
position: relative;
}
.nav-sub-menu li a::before {
content: '';
width: 0;
height: 2px;
background: #800020;
position: absolute;
left: 0;
transition: width 0.3s ease;
}
.nav-sub-menu li a:hover {
background: #f8f8f8;
color: #800020 !important;
padding-left: 30px;
}
.nav-sub-menu li a:hover::before {
width: 15px;
}
/* СПЕЦІАЛЬНИЙ СТИЛЬ ДЛЯ "АКЦІЇ" */
.sale-item .cat-icon {
filter: none !important; /* Залишаємо оригінальний колір іконки акцій */
}
.sale-item a span {
background: #ffcc00;
color: #000 !important;
padding: 4px 12px;
border-radius: 50px;
font-weight: 800;
box-shadow: 0 4px 10px rgba(255, 204, 0, 0.3);
transition: all 0.3s ease;
}
/* МОБІЛЬНІ ВІДСТУПИ */
@media (max-width: 991px) {
.header-mobile {
padding-top: 25px !important;
padding-bottom: 25px !important;
background: #fff;
border-bottom: 1px solid #eee;
}
}
@keyframes navSlideDown {
from { transform: translateY(-100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* --- ГЛОБАЛЬНІ НАЛАШТУВАННЯ --- */
.custom-header-container {
max-width: 1600px !important; /* Обмеження ширини за запитом */
margin: 0 auto;
}
.header-main-row {
background: #000; /* Глибокий чорний під банери */
padding: 20px 0;
}
.header-luxury-grid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
/* --- ТЕКСТ ТА КОЛЬОРИ --- */
.logo-text { font-size: 24px; font-weight: 900; color: #7a001e; line-height: 0.85; letter-spacing: -1px; }
.luxury-label { display: block; font-size: 9px; color: #777; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 4px; }
.luxury-value { font-size: 14px; font-weight: 600; color: #fff; } /* Білий текст для графіку */
/* --- КОНТАКТИ (DROPDOWN) --- */
/* --- КОНТАКТИ (DROPDOWN) --- */
.dropdown-contacts {
position: relative;
cursor: pointer;
}
.luxury-dropdown-box {
position: absolute;
top: 100%;
left: 0;
width: 280px;
background: #fff;
padding: 12px;
box-shadow: 0 15px 40px rgba(0,0,0,0.5);
border-radius: 4px;
/* Замість display: none використовуємо прозорість */
opacity: 0;
visibility: hidden;
z-index: 10000 !important;
margin-top: 0; /* Прибираємо відступ, щоб не було розриву */
padding-top: 15px; /* Створюємо зону комфорту для курсора всередині блоку */
/* Налаштування затримки */
transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease;
transition-delay: 0.6s; /* Блок триматиметься понад півсекунди після відведення мишки */
transform: translateY(10px); /* Легкий ефект випливання */
}
.dropdown-contacts:hover .luxury-dropdown-box {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition-delay: 0s; /* З'являється миттєво при наведенні */
}
/* Додатковий фікс: щоб блок точно не зник, поки мишка "йде" до нього */
.dropdown-contacts::after {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 20px;
display: block;
}
.drop-row {
display: block;
padding: 12px;
color: #222 !important;
font-weight: 700;
border-bottom: 1px solid #f0f0f0;
transition: 0.2s;
}
.drop-row:hover {
background: #f9f9f9;
color: #7a001e !important;
}
.drop-row i { color: #7a001e; margin-right: 10px; font-size: 16px; }
.drop-row:hover { background: #f9f9f9; color: #7a001e !important; }
.drop-address { display: block; padding: 10px; font-size: 11px; color: #666; }
/* --- ПОШУК (PREMIUM BAR) --- */
.search-premium-bar {
background: #111;
border: 1px solid #fff; /* Білий бордер за запитом */
border-radius: 35px;
padding: 12px 25px;
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
min-width: 450px; /* Збільшено ширину форми */
transition: 0.3s;
}
.search-premium-bar i { color: #7a001e; font-size: 18px; }
.premium-placeholder { color: #fff; font-size: 13px; font-weight: 500; }
/* --- МОДАЛЬНИЙ ПОШУК (ЦЕНТР) --- */
.luxury-search-modal {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.95);
z-index: 100000;
display: flex;
align-items: flex-start; /* Відступ зверху */
justify-content: center;
padding-top: 80px; /* Відступ зверху 80px для кращого огляду */
opacity: 0; visibility: hidden; transition: 0.4s;
}
.luxury-search-modal.active { opacity: 1; visibility: visible; }
.search-modal-content {
width: 900px; /* Обмеження ширини 900px */
text-align: center;
}
.close-search-modal {
margin-top: 40px; /* Відступ кнопки закрити від строки */
background: none; border: 1px solid #7a001e; color: #fff;
padding: 10px 30px; border-radius: 30px; cursor: pointer;
font-weight: 700; transition: 0.3s;
}
.close-search-modal:hover { background: #7a001e; }
/* --- МОБІЛЬНИЙ ХЕДЕР ЗІ СЛОГАНОМ --- */
.header-mobile {
background: #000;
padding: 10px 0 !important; /* Ще трохи зменшив для ідеального балансу */
border-bottom: 1px solid #1a1a1a;
}
.mobile-header-container {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Контейнер логотипа та слогана */
.logo-wrap {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.logo-text {
color: #7a001e;
font-weight: 900;
font-size: 19px; /* Трохи збільшив акцент на назві */
text-transform: uppercase;
letter-spacing: -0.5px;
}
/* Преміальний слоган */
.logo-slogan {
color: #555; /* Стриманий сірий колір */
font-size: 7px; /* Дуже маленький, але читабельний шрифт */
font-weight: 700;
letter-spacing: 1.2px; /* Розрядка для преміального вигляду */
margin-top: 2px;
text-transform: uppercase;
}
/* Кнопка меню */
.custom-m-btn i {
color: #ffffff !important;
font-size: 30px !important;
}
/* Стилізація кошика */
.mobile-cart-wrapper i {
color: #fff !important;
font-size: 22px !important;
}
/* Прибираємо зайве, залишаємо лише іконку */
.header-mobile .cart-total,
.header-mobile .cart-label {
display: none !important;
}
/* Корекція лічильника */
.header-mobile .cart-count {
background: #7a001e !important;
top: -5px;
right: -8px;
}
/* ФОН ТА ЗАГАЛЬНИЙ ВИГЛЯД */
.site-offcanvas {
background: #0a0a0b !important;
width: 100% !important;
max-width: 100% !important;
}
/* ШАПКА */
.luxury-header-line {
padding: 15px 20px !important;
border-bottom: 1px solid rgba(255,255,255,0.05) !important;
background: #0a0a0b !important;
}
.gold-text { color: #800020; font-weight: 900; font-size: 25px; letter-spacing: 1px; }
.white-text { color: #ffffff; font-weight: 900; font-size: 25px; }
/* КАТЕГОРІЇ (ЩІЛЬНІШЕ) */
.premium-cat-list { list-style: none !important; padding: 10px 0 0 15px !important; margin: 20 !important; }
.premium-cat-item a {
display: flex !important;
align-items: center;
padding: 10px 15px 10px 5px !important;
text-decoration: none !important;
}
.cat-title { color: #ffffff !important; font-size: 15px; font-weight: 700; text-transform: uppercase; }
.cat-icon { width: 22px; margin-right: 12px; }
.cat-icon img { width: 100%; filter: brightness(0) invert(1); }
/* ПЛАШКИ (ДОДАЮТЬ ДИЗАЙНУ ВАГИ) */
.info-badges-row {
display: flex;
gap: 10px;
padding: 15px 20px;
}
.info-badge {
background: rgba(255,255,255,0.03);
padding: 8px 12px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(255,255,255,0.05);
}
.badge-text { color: #888; font-size: 10px; font-weight: 700; text-transform: uppercase; }
/* ІНФО-ПОСИЛАННЯ */
.info-links-compact {
list-style: none !important;
padding: 15px 20px !important;
border-top: 1px solid rgba(255,255,255,0.03);
}
.info-links-compact a {
color: #bbbbbb !important;
font-size: 15px;
margin-right: 15px;
text-decoration: none !important;
}
/* НАСИЧЕНИЙ ФУТЕР */
.premium-footer-rich {
padding: 20px !important;
background: #070708; /* Трішки темніший фон футера */
}
/* Блок адреси */
.footer-address-block {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 25px;
}
.footer-address-block i { color: #800020; font-size: 18px; margin-top: 3px; }
.address-text { display: flex; flex-direction: column; }
.address-text .city { color: #fff; font-weight: 800; font-size: 14px; text-transform: uppercase; }
.address-text .street { color: #ffffff; font-size: 12px; margin-top: 2px; }
/* Блок телефонів */
.footer-phones-block {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 45px;
margin-left: 10px;
text-align: left;
}
.phone-item {
color: #fff !important;
font-size: 20px;
font-weight: 900;
text-decoration: none !important;
}
/* Соцмережі плашками */
.footer-socials-block {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 30px;
}
.social-links {
padding: 8px 15px;
color: #ffffff !important;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
text-decoration: none !important;
transition: 0.3s;
}
.social-link:active { border-color: #800020; color: #800020 !important; }
/* Копірайт */
.site-copyright-minimal p {
color: #ffffff !important;
font-size: 9px;
letter-spacing: 1px;
text-align: center;
margin-top: 55px;
}
/* ПРЕМІУМ ФІКС ДЛЯ .PRODUCT-CONTENT */
/* 1. Базовий стан: готуємо картку */
.product-content {
background-color: transparent !important; /* Гарантуємо прозорість */
border: 1px solid transparent !important; /* Резерв під рамку */
position: relative;
border-radius: 12px !important; /* Заокруглення, як ти хотів */
}
/* 2. Стан HOVER: прибираємо білий фон Machic та додаємо білу рамку */
.product-content:hover {
background-color: transparent !important; /* Жодного білого фону! */
background: transparent !important;
border-color: #ffffff !important; /* Чистий білий бордер */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; /* Глибока тінь для преміум ефекту */
}
/* 3. Вимикаємо всі приховані шари Machic, які можуть давати білий колір */
.product-content::before,
.product-content::after,
.product-content-fade {
display: none !important;
background: transparent !important;
}
/* 4. Корекція кольору тексту, щоб він залишався читабельним на темному */
.product-content:hover .product-title a,
.product-content:hover .product-category a {
color: #ffffff !important;
}
.product-content:hover .price .amount {
color: #ffcc00 !important; /* Залишаємо ціну акцентною (жовтою) */
}
/* 5. Адаптація для мобільних (щоб рамка не вилазила за екран) */
@media (max-width: 768px) {
.product-content:hover {
padding: 5px !important; /* Менший відступ на моб */
border-color: rgba(255, 255, 255, 0.5) !important; /* М'якша рамка */
}
}
/* Логотип основний */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
.shisha-bazar-logo {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none !important;
gap: 15px; /* Компактна відстань */
padding: 5px 0;
}
/* Текст SHISHA та BAZAR */
.logo-side {
font-family: 'Montserrat', sans-serif;
font-size: 28px;
font-weight: 900;
color: #ffffff;
letter-spacing: 0.05em; /* Компактний рознос для потужного вигляду */
text-transform: uppercase;
line-height: 1;
text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}
/* Центральне коло з ефектом Бургундій + Золото */
.logo-center-circle {
width: 55px;
height: 55px;
background: radial-gradient(circle, #8a0c25 0%, #4a0412 100%); /* Глибокий бургундій */
border: 2px solid #d4af37; /* Золота рамка */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); /* Золоте сяйво навколо */
transition: all 0.3s ease;
}
/* Сяйво як на картинці (Halo effect) */
.logo-center-circle::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: #d4af37;
filter: blur(12px);
opacity: 0.3;
z-index: -1;
}
/* Сама іконка кальяну всередині кола */
.logo-center-circle img {
width: 32px;
height: 32px;
filter: brightness(0) invert(1); /* Робимо іконку чисто білою */
transition: transform 0.3s ease;
}
/* Адаптація для мобільних */
@media (max-width: 768px) {
.logo-side {
font-size: 20px;
}
.logo-center-circle {
width: 40px;
height: 40px;
}
.logo-center-circle img {
width: 22px;
height: 22px;
}
.shisha-bazar-logo {
gap: 10px;
}
}
/* Чорна іконка закриття в бічній панелі кошика */
.cart-widget-side .cart-side-close .klbth-icon-cancel {
color: #000000 !important;
}
/* Опціонально: ефект при наведенні */
.cart-widget-side .cart-side-close:hover .klbth-icon-cancel {
color: #600018 !important; /* Наш колір Burgundy для стилю */
}
/* --- УНІКАЛЬНЕ ВЕЛИКЕ ЛОГО ДЛЯ ФУТЕРА (+30%) --- */
.footer-shisha-brand {
display: flex;
justify-content: center;
padding-top: 10px;
}
.footer-large-logo {
display: flex;
align-items: center;
gap: 20px; /* Збільшена відстань між елементами */
text-decoration: none !important;
transition: all 0.3s ease;
}
/* Текст: Чорний, 32px (було 24px) */
.footer-large-logo .f-logo-side {
font-family: 'Montserrat', sans-serif;
font-size: 32px !important;
font-weight: 900;
color: #000000 !important; /* Чорний текст */
text-transform: uppercase;
letter-spacing: 2px;
}
/* Коло: 65px (було 50px) */
.f-logo-circle {
width: 65px !important;
height: 65px !important;
background: #800020; /* Оригінальний Burgundy */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
}
/* Іконка всередині: 40px (було 30px) */
.f-logo-circle img {
width: 40px !important;
height: 40px !important;
object-fit: contain;
filter: brightness(0) invert(1); /* Біла іконка */
}
/* Адаптація для мобільних (щоб не було занадто великим на телефонах) */
@media (max-width: 768px) {
.footer-large-logo .f-logo-side {
font-size: 24px !important;
}
.f-logo-circle {
width: 50px !important;
height: 50px !important;
}
.f-logo-circle img {
width: 30px !important;
height: 30px !important;
}
}
/* ================================================================
SHISHA BAZAAR - ULTIMATE DARK PREMIUM SIDEBAR
================================================================ */
/* 1. ГЛОБАЛЬНИЙ ФОН (Desktop & Mobile) */
.col.site-sidebar.filtered-sidebar,
.sidebar-mobile-wrapper,
.sidebar-mobile-header,
.sidebar-mobile-content,
.filtered-sidebar {
background-color: #0b0a0a !important;
border: none !important;
}
/* 2. ПРЕМІАЛЬНІ СКЛЯНІ КАРТКИ (WIDGETS) */
.filtered-sidebar .widget {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 20px !important;
padding: 25px !important;
margin-bottom: 25px !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
position: relative;
}
/* Ефект тонкої бордової лінії зверху для статусу */
.filtered-sidebar .widget::before {
content: "";
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 1px;
background: linear-gradient(90deg, transparent, #800020, transparent);
opacity: 0.5;
}
/* 3. ТЕКСТ: КАТЕГОРІЇ, АТРИБУТИ, НАЗВИ (БІЛИЙ) */
.filtered-sidebar .widget ul li a,
.filtered-sidebar .widget ul li label,
.filtered-sidebar .widget ul li,
.sidebar-mobile-wrapper .widget ul li a,
.sidebar-mobile-wrapper .widget ul li label,
.sidebar-mobile-wrapper .widget ul li span:not(.count) {
color: #ffffff !important;
font-weight: 500 !important;
font-size: 15px !important;
opacity: 1 !important;
transition: 0.3s ease;
}
/* Кількість товарів (19) — приглушений білий */
.filtered-sidebar .widget ul li .count,
.sidebar-mobile-wrapper .widget ul li .count {
color: rgba(255, 255, 255, 0.4) !important;
font-size: 13px !important;
font-weight: 400 !important;
}
/* Заголовки фільтрів */
.filtered-sidebar .widget-title,
.sidebar-mobile-header .title {
color: #ffffff !important;
font-size: 16px !important;
font-weight: 800 !important;
text-transform: uppercase;
letter-spacing: 1.5px;
border-bottom: 2px solid #800020 !important;
display: inline-block;
padding-bottom: 5px;
margin-bottom: 20px !important;
}
/* 4. ЕЛЕМЕНТИ ФОРМ ТА КНОПКИ */
/* Кнопка ФІЛЬТР */
.filtered-sidebar .button,
.filtered-sidebar button[type="submit"] {
background: #800020 !important;
color: #ffffff !important;
border-radius: 50px !important;
padding: 10px 25px !important;
font-weight: 700 !important;
text-transform: uppercase;
border: none !important;
box-shadow: 0 4px 15px rgba(128, 0, 32, 0.4) !important;
transition: 0.3s !important;
}
.filtered-sidebar .button:hover {
background: #a00028 !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(128, 0, 32, 0.6) !important;
}
/* Повзунок ціни */
.filtered-sidebar .price_slider_wrapper .ui-slider-range {
background: #800020 !important;
}
.filtered-sidebar .price_slider_wrapper .ui-slider-handle {
background: #ffffff !important;
border: 2px solid #800020 !important;
}
/* Випадаючі списки (Select2) */
.filtered-sidebar .select2-container--default .select2-selection--single {
background-color: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 10px !important;
}
.filtered-sidebar .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #ffffff !important;
}
/* 5. МОБІЛЬНІ СПЕЦИФІЧНІ ВИПРАВЛЕННЯ */
.sidebar-mobile-header .close-sidebar {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 50% !important;
}
/* Ховер на категорії */
.filtered-sidebar ul li a:hover {
color: #ffcc00 !important; /* Золотий акцент при наведенні */
}
/* --- FIX: REPAIR LAYOUT & PREMIUM FILTERS --- */
/* 1. ВИПРАВЛЕННЯ СІТКИ (Щоб футер не зникав) */
.woocommerce-active-filters {
display: flex !important;
flex-wrap: wrap !important; /* Дозволяє фільтрам переноситись, не ламаючи сторінку */
width: 100% !important;
clear: both !important; /* Очищує обтікання, повертаючи футер вниз */
margin-bottom: 30px !important;
}
/* 2. КОНТЕЙНЕР ФІЛЬТРА (Квадрат + Текст) */
.remove-filter-element,
.woocommerce-active-filters ul li a {
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
background: transparent !important;
border: none !important;
margin-right: 15px !important;
margin-bottom: 15px !important;
padding: 0 !important;
text-decoration: none !important;
}
/* 3. ТЕКСТОВА ПЛАШКА (БІЛА/БОРДОВА) */
.remove-filter-element,
.woocommerce-active-filters ul li a {
background: rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
padding: 8px 16px !important;
border-radius: 8px !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase;
transition: 0.3s ease;
}
/* 4. БІЛИЙ КВАДРАТ З ХРЕСТИКОМ (ПОРУЧ З ТЕКСТОМ) */
.remove-filter-element::after,
.woocommerce-active-filters ul li a::after {
content: "" !important;
display: inline-flex !important;
width: 28px !important;
height: 28px !important;
background-color: #ffffff !important; /* Білий фон */
border-radius: 6px !important;
margin-left: -15px !important; /* Відступ, щоб не накладався */
flex-shrink: 0 !important;
/* Малюємо бордовий хрестик */
background-image:
linear-gradient(45deg, transparent 44%, #800020 44%, #800020 56%, transparent 56%),
linear-gradient(-45deg, transparent 44%, #800020 44%, #800020 56%, transparent 56%) !important;
background-size: 10px 10px !important;
background-repeat: no-repeat !important;
background-position: center !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
}
/* 5. ПРИБИРАЄМО ЗАЙВЕ (Те, що могло ламати верстку) */
.remove-filter-element i,
.woocommerce-active-filters i,
.remove-filter-element::before,
.woocommerce-active-filters a::before {
display: none !important;
}
/* АКЦЕНТ ДЛЯ CLEAR ALL */
.remove-filter-element.clear-all {
background: rgba(128, 0, 32, 0.3) !important;
border: 1px solid rgba(128, 0, 32, 0.5) !important;
}
/* ЕФЕКТИ HOVER */
.remove-filter-element:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.15) !important;
}
/* --- SEARCH CONTENT COLOR RECOVERY (BLACK TEXT ON WHITE) --- */
/* Основний контейнер результатів пошуку */
.search-content {
background-color: #ffffff !important; /* Гарантуємо білий фон */
color: #1a1a1a !important; /* Основний текст (майже чорний) */
padding: 20px;
border-radius: 12px;
}
/* Заголовки результатів пошуку */
.search-content h1,
.search-content h2,
.search-content h3,
.search-content h4,
.search-content .entry-title a,
.search-content .product-title a {
color: #000000 !important;
font-weight: 800 !important;
text-decoration: none !important;
}
/* Колір посилань при наведенні */
.search-content a:hover {
color: #800020 !important; /* Твій фірмовий бордовий для акценту */
}
/* Опис товару або уривки тексту (Excerpts) */
.search-content .post-excerpt,
.search-content .entry-content,
.search-content p {
color: #333333 !important;
line-height: 1.6;
}
/* Ціни в результатах пошуку (якщо це товари) */
.search-content .price,
.search-content .amount {
color: #000000 !important;
font-weight: 700 !important;
}
/* Мета-дані (дата, категорії тощо) */
.search-content .entry-meta,
.search-content .meta-item {
color: #777777 !important;
font-size: 0.9em;
}
/* Якщо там є кнопка "Читати далі" або "Купити" */
.search-content .button,
.search-content .read-more {
background-color: #000000 !important;
color: #ffffff !important;
border-radius: 5px;
}
/* Повідомлення "Нічого не знайдено" */
.search-content .no-results,
.search-content .not-found {
color: #000000 !important;
text-align: center;
padding: 40px 0;
}
/* --- 1. META: SKU & STOCK (ЧИСТИЙ СТИЛЬ) --- */
.product_meta {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 15px !important;
margin-bottom: 25px !important;
padding: 0 !important;
}
/* Артикул */
.sku-wrapper {
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #666 !important;
}
.sku-wrapper .sku {
color: #666 !important;
font-weight: 700 !important;
margin-left: 4px;
}
/* --- СТИЛІЗАЦІЯ НАЗВИ ТОВАРУ В МІНІ-КОШИКУ --- */
/* Робимо назву товару чорною та виразною */
.woocommerce-mini-cart-item.mini_cart_item .product-title,
.woocommerce-mini-cart-item.mini_cart_item a {
color: #000000 !important;
font-weight: 700 !important;
font-size: 14px !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
line-height: 1.4 !important;
display: block !important;
}
/* Колір при наведенні (наприклад, твій фірмовий бордовий або золотий) */
.woocommerce-mini-cart-item.mini_cart_item a:hover {
color: #800020 !important; /* Бордовий акцент */
}
/* ПРИБИРАЄМО ЗАЙВІ ВІДСТУПИ ТА ОФОРМЛЮЄМО ЕЛЕМЕНТ */
.woocommerce-mini-cart-item.mini_cart_item {
padding: 15px 10px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
display: flex !important;
align-items: center !important;
}
/* Стиль ціни та кількості для балансу з чорним заголовком */
.woocommerce-mini-cart-item.mini_cart_item .quantity {
color: #666 !important;
font-size: 12px !important;
margin-top: 4px !important;
display: block !important;
}
/* --- ВИДАЛЕННЯ ЗАЙВИХ ЕЛЕМЕНТІВ --- */
/* 1. Сховати блок "People have viewed..." (попередження) на всіх пристроях */
.people-have,
.product-message.warning {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* 2. Сховати блок оплати та доставки ТІЛЬКИ на мобільних пристроях */
@media (max-width: 768px) {
.delivery-payment-block {
display: none !important;
visibility: hidden !important;
}
}
/* Додатково: видаляємо зайвий відступ під артикулом, якщо він залишився */
.product_meta br {
display: none !important;
}
.footer-full-width-section {
padding-bottom: 0px;
}
/* Робимо контейнер товару основою для позиціонування */
.product, .premium-product-card {
position: relative;
}
/* Стиль бейджа на фото */
.stock-on-image {
position: absolute;
top: 15px; /* Відступ від верхнього краю фото */
left: 15px; /* Відступ від лівого краю фото */
z-index: 10;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 4px;
letter-spacing: 0.5px;
line-height: 1;
pointer-events: none; /* Щоб напис не заважав клікати на фото */
}
/* Колір для "В наявності" */
.stock-on-image.in-stock {
background: #ffcc00; /* Насичений зелений з легкою прозорістю */
color: #000; /* Чорний текст на зеленому фоні читається найкраще */
}
/* Колір для "Немає" */
.stock-on-image.out-of-stock {
background: rgba(255, 77, 77, 0.9);
color: #fff;
box-shadow: 0 4px 12px rgba(255, 77, 77, 0.3);
}
/* Якщо на фото вже є інші стікери (Sale/Hot), зміщуємо наш статус нижче */
.stock-on-image {
margin-top: 0;
}
/* Мобільна адаптація */
@media (max-width: 768px) {
.stock-on-image {
top: 10px;
left: 10px;
font-size: 8px;
padding: 3px 6px;
}
}