@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//albertsdelikatessen.de/wp-content/themes/woodmart/fonts/woodmart-font-1-400.woff2?v=7.5.0") format("woff2");
}

:root {
	--wd-text-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(34,34,34);
	--wd-text-font-size: 14px;
	--wd-title-font: "Playfair Display SC", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: rgb(34,34,34);
	--wd-entities-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Inter", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-primary-color: #1A2238;
	--wd-alternative-color: rgb(229,193,133);
	--wd-link-color: #333333;
	--wd-link-color-hover: rgb(229,193,133);
	--btn-default-bgcolor: rgb(229,193,133);
	--btn-default-bgcolor-hover: rgb(229,174,84);
	--btn-accented-bgcolor: rgb(229,193,133);
	--btn-accented-bgcolor-hover: rgb(229,174,84);
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
}
.woodmart-woocommerce-layered-nav .wd-scroll-content {
	max-height: 223px;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url(https://gold-dugong-308077.hostingersite.com/wp-content/uploads/2021/07/promo-popup.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	--wd-popup-width: 800px;
}
.page-title-default {
	background-color: #0a0a0a;
	background-image: url(https://albertsdelikatessen.de/wp-content/uploads/2021/08/organic-page-title.jpg);
	background-size: cover;
	background-position: center center;
}
.footer-container {
	background-color: #ffffff;
	background-image: none;
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 35px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
[data-vc-full-width]:not([data-vc-stretch-content]),
:is(.vc_section, .vc_row).wd-section-stretch {
padding-left: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
padding-right: calc((100vw - 1222px - var(--wd-sticky-nav-w) - var(--wd-scroll-w)) / 2);
}
}


.main-page-wrapper {
 margin-top: 0px;
}

.wd-product-stock{
	display: none;
}

.home .main-page-wrapper {
    margin-top: -40px;
}

.vc_column-inner{
	
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.whb-header{
	margin-bottom: 0 !important;
}

/* Главный контейнер (Фикс. высота 800px для ПК) */
.custom-hero-banner {
    position: relative;
    width: 100vw;
    height: 800px; 
    margin-left: calc(-50vw + 50%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Контейнер видео */
.custom-hero-banner .video-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.custom-hero-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Затемнение видео (Тёмно-синий #1A2238 с прозрачностью) */
.custom-hero-banner .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); 
    z-index: 2;
}

/* Общий контейнер контента */
.custom-hero-banner .hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
}

/* Главный заголовок */
.custom-hero-banner .hero-title {
    font-family: 'Playfair Display', serif;
    color: #FFFFFF !important;
    font-size: 56px;
    font-weight: 700;
    margin: 0 0 20px 0;
    line-height: 1.15;
}

/* Подзаголовок */
.custom-hero-banner .hero-subtitle {
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 400;
    margin: 0 0 45px 0;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Лёгкая тень для читаемости */
}

/* Кнопка (Золотая с тёмно-синим текстом) */
.custom-hero-banner .hero-btn {
    font-family: 'Inter', sans-serif;
    display: inline-block;
    padding: 16px 42px;
    background-color: #E5C185; /* Золотой */
    color: #1A2238; /* Тёмно-синий */
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Ховер кнопки */
.custom-hero-banner .hero-btn:hover {
    background-color: #FFFFFF; /* При наведении становится белой */
    color: #1A2238;
    box-shadow: 0 4px 15px rgba(229, 193, 133, 0.4); /* Золотое свечение */
}

/* Текст под кнопкой */
.custom-hero-banner .hero-note {
    font-family: 'Inter', sans-serif;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8; /* Делаем чуть тусклее, чтобы не отвлекало от кнопки */
    margin: 20px 0 0 0;
}

/* Адаптив для мобилок (Фикс. высота 600px) */
@media (max-width: 768px) {
	
	
	.wd-rs-6a01a9a358e37{
	
		padding: 0 20px;
	}	
	
    .custom-hero-banner {
        height: 600px;
    }
    
    .custom-hero-banner .hero-title {
        font-size: 32px;
        margin-bottom: 15px;
    }
    
    .custom-hero-banner .hero-subtitle {
        font-size: 16px;
        margin-bottom: 35px;
    }
    
    .custom-hero-banner .hero-btn {
        font-size: 15px;
        padding: 14px 32px;
    }

    .custom-hero-banner .hero-note {
        font-size: 12px;
    }
}



/* Фон выпадающего меню */
.wd-header-secondary-nav .wd-dropdown-menu {
    background-color: #1A2238 !important;
}

/* Цвет текста в выпадающем меню */
.wd-header-secondary-nav .wd-dropdown-menu .woodmart-nav-link,
.wd-header-secondary-nav .wd-dropdown-menu .nav-link-text {
    color: #FFFFFF !important;
}

/* Цвет текста при наведении (опционально, чтобы было видно, куда наводишь) */
.wd-header-secondary-nav .wd-dropdown-menu li:hover > .woodmart-nav-link,
.wd-header-secondary-nav .wd-dropdown-menu li:hover > .woodmart-nav-link .nav-link-text {
    color: #D1D5DB !important; 
}



/* --- 2. Стилизация выпадающих меню (Dropdowns) главного меню --- */
/* Задаем синий фон для контейнера дропдауна */
.wd-header-main-nav .wd-dropdown-menu {
    background-color: #1A2238 !important;
}

/* Красим ссылки внутри саб-меню в белый */
.wd-header-main-nav .wd-dropdown-menu .woodmart-nav-link {
    color: #FFFFFF !important;
}

/* Цвет ссылок при наведении (светло-серый, как в переключателе языков) */
.wd-header-main-nav .wd-dropdown-menu li:hover > .woodmart-nav-link {
    color: #D1D5DB !important;
}

/* Если у дропдауна есть стрелочка/треугольник сверху (опционально для дизайна default) */
.wd-header-main-nav .menu-simple-dropdown .wd-dropdown-menu:before {
    color: #1A2238 !important;
}

/* --- 3. Стилизация выпадающего меню "Мой аккаунт" --- */
/* Задаем синий фон для контейнера */
.wd-header-my-account .wd-dropdown-menu {
    background-color: #1A2238 !important;
}

/* Красим ссылки и текст внутри них в белый */
.wd-header-my-account .wd-dropdown-menu a,
.wd-header-my-account .wd-dropdown-menu a span {
    color: #FFFFFF !important;
}

/* Цвет ссылок при наведении */
.wd-header-my-account .wd-dropdown-menu li:hover > a,
.wd-header-my-account .wd-dropdown-menu li:hover > a span {
    color: #D1D5DB !important;
}

/* Если у этого меню тоже появляется стандартная стрелочка WoodMart сверху */
.wd-header-my-account .wd-dropdown-menu:before {
    color: #1A2238 !important;
}

/* 1. Настройка заголовка товара (Название рыбы) */

.wd-product .wd-entities-title a {

    font-weight: 700 !important; 

    font-size: 22px !important; /* Увеличиваем размер текста заголовка */

    transition: color 0.3s ease !important; 

}



/* Изменение цвета заголовка при наведении на ВСЮ карточку */

.wd-product:hover .wd-entities-title a {

    color: #FF8A00 !important;

}



/* 2. Настройка названия категории (Сушеная рыба) */

.wd-product .wd-product-cats a {

    font-weight: 600 !important; 

    font-size: 18px !important; /* Увеличиваем размер категории */

    transition: color 0.3s ease !important;

}



/* Изменение цвета категории при наведении на ВСЮ карточку */

.wd-product:hover .wd-product-cats a {

    color: #FF8A00 !important;

}



/* 3. Опционально: делаем цену более выразительной и крупной */

.wd-product .price {

    font-weight: 700 !important; 

    font-size: 20px !important; /* Увеличиваем размер цены */

}





/* 1. Светло-голубая подложка для текстового блока */

.wd-product .product-element-bottom {

    background-color: #D6EAF8 !important; /* Мягкий светло-голубой цвет */

    padding: 20px 15px !important; 

    border-radius: 0 0 8px 8px !important; 

}

/* =========================================
   1. АДАПТИВНОСТЬ ШРИФТОВ
   ========================================= */

/* Для планшетов (ширина экрана до 1024px) */
@media (max-width: 1024px) {
    .wd-product .wd-entities-title a {
        font-size: 18px !important; 
    }
    .wd-product .wd-product-cats a {
        font-size: 16px !important; 
    }
    .wd-product .price {
        font-size: 18px !important; 
    }
}

/* Для смартфонов (ширина экрана до 767px) */
@media (max-width: 767px) {
    .wd-product .wd-entities-title a {
        font-size: 16px !important; 
    }
    .wd-product .wd-product-cats a {
        font-size: 14px !important; 
    }
    .wd-product .price {
        font-size: 16px !important; 
    }
    
    /* Слегка уменьшаем отступы самой голубой подложки на телефонах, 
       чтобы сэкономить место на маленьком экране */
    .wd-product .product-element-bottom {
        padding: 15px 10px !important; 
    }
}

/* =========================================
   2. ВЫРАВНИВАНИЕ КАРТОЧЕК ПО ВЫСОТЕ
   ========================================= */

/* Заставляем саму карточку и ее внутреннюю обертку тянуться на всю высоту ряда */
.wd-product,
.wd-product .product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Указываем голубому блоку заполнять всё оставшееся свободное пространство внизу карточки */
.wd-product .product-element-bottom {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Главный трюк: отталкиваем блок с ценой к самому низу голубой подложки. 
   Теперь, даже если в одном товаре название занимает 1 строку, а в другом 3 строки, 
   цены у них будут выровнены по одной линии внизу! */
.wd-product .product-rating-price {
    margin-top: auto !important;
}

.product-wrapper{
 gap: 0 !important;
}





/* =========================================
   1. ПРОПОРЦИИ КАРТИНОК 3:2 В КАРУСЕЛИ
   ========================================= */

/* Задаем жесткое соотношение сторон для всех фото товара (основных и ховер-картинок) */
.wd-carousel-item .product-element-top img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2 !important; /* Магия современных браузеров: точная пропорция */
    object-fit: cover !important; /* Обрезает лишнее по краям, не сплющивая саму рыбу */
}

/* =========================================
   2. ВЫРАВНИВАНИЕ ВЫСОТЫ КАРТОЧЕК В КАРУСЕЛИ
   ========================================= */

/* Делаем сам слайд карусели "резиновым" по высоте */
.wd-carousel-item {
    height: auto !important;
    display: flex !important;
}

/* Заставляем карточку занимать всю доступную высоту слайда */
.wd-carousel-item .wd-product {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Внутренняя обертка товара тоже тянется */
.wd-carousel-item .product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    width: 100% !important;
}

/* Голубой блок (с текстом) заполняет всё пустое пространство до низа */
.wd-carousel-item .product-element-bottom {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* Отталкиваем блок с ценой к самому низу */
.wd-carousel-item .product-rating-price {
    margin-top: auto !important;
}



.category-grid-item .category-image-wrapp {
    position: relative;
    overflow: hidden;
}

.woodmart-cat-hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    z-index: 2;
}

.category-grid-item:hover .woodmart-cat-hover-img {
    opacity: 1;
}

/* Отключаем стандартный зум (увеличение) картинок в категориях Woodmart при наведении */
.category-grid-item:hover .category-image-wrapp img,
.wd-cat:hover .wd-cat-image img {
    transform: none !important;
}

.category-grid-item.cat-design-alt:hover .category-image img,
.category-grid-item.cat-design-alt:hover .category-image-wrapp img {
    transform: none !important;
}

/* Полное отключение эффекта увеличения (зума) в дизайне cat-design-alt */
.category-grid-item.cat-design-alt:hover .category-image img,
.category-grid-item.cat-design-alt:hover .woodmart-cat-hover-img,
.category-grid-item.cat-design-alt .category-image-wrapp:hover img {
    transform: none !important;
    -webkit-transform: none !important; /* Для совместимости с Safari */
}

/* 1. Жестко отключаем зум ЛЮБЫХ элементов внутри категории при наведении */
.category-grid-item.cat-design-alt:hover .category-image-wrapp,
.category-grid-item.cat-design-alt:hover .category-image,
.category-grid-item.cat-design-alt:hover .category-image img {
    transform: none !important;
    -webkit-transform: none !important;
}


/* 1. Отключаем зум (увеличение) при наведении */
.category-grid-item.cat-design-alt:hover .category-image-wrapp,
.category-grid-item.cat-design-alt:hover .category-image,
.category-grid-item.cat-design-alt:hover .category-image img {
    transform: none !important;
    -webkit-transform: none !important;
}

/* 2. Задаем пропорции 1:1 (квадрат) для главного контейнера-обертки */
.category-grid-item.cat-design-alt .category-image-wrapp {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    position: relative !important; /* Точка отсчета для координат */
    display: block !important;
    overflow: hidden !important;
}

/* 3. Растягиваем тег ссылки (<a>) на весь этот квадрат */
.category-grid-item.cat-design-alt .category-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

/* 4. Заставляем обе картинки идеально вписаться в этот квадрат */
.category-grid-item.cat-design-alt .category-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Магия здесь: обрезает края без искажения пропорций рыбы/снеков */
    max-width: none !important; /* Блокируем внутренние лимиты Woodmart */
    margin: 0 !important;
}

/* 5. Логика плавной смены второй картинки */
.woodmart-cat-hover-img {
    opacity: 0;
    transition: opacity 0.4s ease-in-out !important;
    z-index: 10;
}

.category-grid-item.cat-design-alt:hover .woodmart-cat-hover-img {
    opacity: 1 !important;
}

/* 1. Скрываем количество товаров в скобках (например, "(17)") */
.category-grid-item.cat-design-alt .wd-entities-title .count {
    display: none !important;
}

/* 2. Скрываем блок с текстом "17 товаров" при наведении */
.category-grid-item.cat-design-alt .more-products {
    display: none !important;
}

/* 3. Делаем заголовок категории жирнее */
.category-grid-item.cat-design-alt .wd-entities-title {
    font-weight: 700 !important; /* 700 - стандартный жирный, можно поставить 800 или 900, если шрифт позволяет */
}

/* 1. Делаем баннер строгим квадратом (1:1) */
.promo-banner-wrapper .promo-banner {
    aspect-ratio: 1 / 1 !important;
    min-height: unset !important; /* Убираем стандартные ограничения высоты темы */
    position: relative;
    overflow: hidden;
}

/* 2. Растягиваем фоновую картинку баннера (чтобы обрезалась без искажений) */
.promo-banner-wrapper .main-wrapp-img,
.promo-banner-wrapper .banner-image {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.promo-banner-wrapper .banner-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 3. Центрируем кнопку по вертикали и горизонтали (перебиваем настройки билдера) */
.promo-banner-wrapper .wrapper-content-banner {
    display: flex !important;
    align-items: center !important; /* По центру вертикально */
    justify-content: center !important; /* По центру горизонтально */
}

/* 4. Выравниваем сам блок с кнопкой внутри по центру */
.promo-banner-wrapper .content-banner,
.promo-banner-wrapper .wd-button-wrapper {
    text-align: center !important;
    width: 100%;
}


/* Общий белый фон плашки */
.cky-consent-bar {
    background-color: #FFFFFF !important; 
    border-color: #F4F4F4 !important; /* легкая светло-серая рамка */
}

/* Заголовок и основной текст (оставляем темными для читаемости на белом) */
.cky-title, 
.cky-notice-des, 
.cky-notice-des p {
    color: #212121 !important; 
}

/* Основная кнопка "Alle akzeptieren" (Принять все) */
.cky-btn-accept {
    background-color: #E5C185 !important; 
    border-color: #E5C185 !important;     
    color: #212121 !important; /* темный текст для контраста */
}

/* Кнопка "Alles ablehnen" (Отклонить все) */
.cky-btn-reject {
    background-color: transparent !important; 
    border-color: #E5C185 !important; 
    color: #E5C185 !important; /* текст в цвет главной кнопки */
}

/* Кнопка "Anpassen" (Настроить) */
.cky-btn-customize {
    background-color: transparent !important;
    border-color: #E5C185 !important;
    color: #E5C185 !important;
}

/* Скрываем логотип "Powered by CookieYes", чтобы плашка была аккуратнее */
[data-cky-tag="powered-by"] {
    display: none !important;
}

/* Пропорция 3:2 для изображений товаров на ПК */
.wd-product .product-element-top img {
    aspect-ratio: 3 / 2;
    width: 100%;
    height: auto;
    object-fit: cover; /* Картинка обрезается под пропорцию без сплющивания */
}