@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Finlandica+Text:ital,wght@0,100..900;1,100..900&family=Geologica:wght,CRSV@100..900,0&family=Golos+Text:wght@400..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Manrope:wght@200..800&family=Onest:wght@100..900&family=Oswald:wght@200..700&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

body {background-color: #0e1f4e; color: #333333; font-family: Arial, sans-serif; min-height: 100vh; position: relative; margin: 0; font-family: 'Roboto', sans-serif;}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* SVG шум */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  
  opacity: 0.05; /* Настраиваем прозрачность мурашек */
  pointer-events: none; /* Чтобы слой не мешал кликать по кнопкам */
  z-index: -1; /* Уводим за контент */
}

h1 {font-family: 'Montserrat', sans-serif; font-size: 21px;}

/* Шапка */

.header-content {}
.header-content-inner {position: relative; width: 100%; min-height: 100dhv; display: flex; /* Помогает дочерним блокам правильно распределяться */
    flex-direction: column;}

#block-arsing-logotip {display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; z-index: 10; width: 100%; left: 50%; transform: translateX(-50%); box-sizing: border-box; padding: 20px 20px 0 20px;}

.logo {background-color: rgba(5,16,48,1.0); height: 70px; width: 70px; flex-shrink: 0; padding: 10px; border-radius: 50%; text-align: center}
.logo img {width: auto; height: 70px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.1)); transition: transform 0.3s ease;}
.logo img:hover {transform: scale(1.05);}



.header-content .menu-list {background-color: rgba(5,16,48,1.0); border-radius: 20px; margin-left: auto; display: flex; gap: 30px; padding: 0 30px 0 30px; height: 60px; justify-content: center; align-items: center;}
.header-content .menu-item a {text-decoration: none; color: #ffffff; text-transform: uppercase; font-size: 14px;}


/* --- Десктоп: скрываем всё лишнее --- */
.menu-toggle-wrapper, .menu-close {
    display: none !important;
}

/* --- Мобильная версия --- */
@media (max-width: 991px) {
    
    /* Контейнер-кружок */
    .menu-toggle-wrapper {
        display: flex !important;
		margin-left: auto;
        align-items: center;
        justify-content: center;
        width: 54px !important;
        height: 54px !important;
        background: #002147 !important; /* Цвет как у логотипа */
        border-radius: 50% !important;
        cursor: pointer;
        position: relative;
        z-index: 1001;
        border: none;
    }

    /* Сама область иконки */
    .menu-toggle {
        display: block !important;
        width: 30px !important;
        height: 20px !important;
        background: transparent !important;
        border: none !important;
        position: relative;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Общие стили для полосок */
    .menu-toggle span {
        display: block !important;
        position: absolute !important;
        height: 2px !important;
        background: #ffffff !important; /* Цвет полосок — БЕЛЫЙ */
        border-radius: 2px;
        transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
        right: 0; /* Выравнивание по правому краю */
    }

    /* Ступенчатая длина линий (Вариант 1) */
    .menu-toggle span:nth-child(1) {
        top: 0;
        width: 100%; /* Верхняя — длинная */
    }

    .menu-toggle span:nth-child(2) {
        top: 9px;
        width: 75%;  /* Средняя — короче */
    }

    .menu-toggle span:nth-child(3) {
        top: 18px;
        width: 50%;  /* Нижняя — самая короткая */
    }

    /* Эффект при открытии (когда добавлен класс .active) */
    .menu-toggle-wrapper.active .menu-toggle span {
        width: 100% !important;
        background: #ffffff !important;
    }

    .menu-toggle-wrapper.active .menu-toggle span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .menu-toggle-wrapper.active .menu-toggle span:nth-child(2) {
        opacity: 0;
        transform: translateX(10px);
    }

    .menu-toggle-wrapper.active .menu-toggle span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* 2. Полноэкранное меню */
    .menu-list {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: #000b1e !important; /* Глубокий синий фон */
        z-index: 9999 !important;
        margin: 0 !important;
    }

    .menu-list.is-open {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Контейнер для ссылок (чтобы не перекрывали крестик) */
    .menu-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    /* 3. КРЕСТИК В УГЛУ */
    .menu-close {
        display: block !important;
        position: fixed !important; /* Всегда прибит к экрану */
        top: 25px !important;
        right: 25px !important;
        width: 50px !important;
        height: 50px !important;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important; /* Белый крестик */
        font-size: 60px !important; /* Крупный для удобства */
        line-height: 50px !important;
        text-align: center !important;
        cursor: pointer !important;
        z-index: 10001 !important; /* Выше всего */
        font-family: Arial, sans-serif;
        font-weight: 100 !important;
		transition: transform 0.3s ease;
    }
	
.menu-close:hover {
    transform: rotate(90deg); /* Крутится при наведении */
}

    /* Ссылки */
    .menu-list a {
        color: #ffffff !important;
        font-size: 24px !important;
        padding: 20px !important;
        text-decoration: none !important;
        font-weight: bold;
        letter-spacing: 1px;
    }
}







/*
#block-arsing-banner {width: 100%;
    height: 100dvh;
    overflow: hidden;}
#block-arsing-banner img {width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;}
*/

/* Конец шапки */

/* Содержимое */

#main-content {margin: 130px 20px 20px 20px; padding: 20px;}
.content {background-color: #F9FAFB; padding: 20px; border-radius: 20px; }	
	
/* Каталог товаров */

.catlist {display: flex; flex-wrap: wrap; gap: 20px;}
.catlist-item {
	flex: 1 1 25%; min-width: 250px;
    border-radius: 20px;
    background: #fff;
    height: 100%;
    transition: transform 0.3s ease;
	position: relative;}
	
.catlist-item:hover {transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.2);}

.catlist-item-img {width: 100%;
    aspect-ratio: 3 / 4;
    background: #dddddd;
	border-radius: 20px;}
.catlist-item-img img {width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
	border-radius: 20px;}
.catlist-item-text {display: flex; align-items: center; justify-content: space-between; gap: 30px; position: absolute; bottom: 0px; background-color: rgba(0,0,0,0.8); padding: 10px; width: 100%; box-sizing: border-box; border-radius: 0 0 20px 20px; clip-path: polygon(0% 15%, 5% 0%, 12% 12%, 25% 3%, 38% 14%, 55% 2%, 72% 11%, 88% 0%, 100% 13%, 100% 100%, 0% 100%);
    padding-top: 25px;}
.catlist-item-title {flex: 1 1 auto; line-height: 1.2em; height: 2.4em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.catlist-item-title a {text-decoration: none; text-transform: uppercase; color: #ffffff; font-weight: 400; font-size: 16px;}
.catlist-item-title-first {font-size: 16px; font-weight: 700;}
.catlist-item-title-sec {font-size: 12px; text-transform: lowercase;}
.catlist-item-more {flex: 0 0 auto; padding: 10px; margin-left: auto;}
.catlist-item-more img {filter: invert(100%);}
.catlist-item-more a {display: inline-block; text-decoration: none; color: #ffffff; border-radius: 5px; padding: 5px 15px 5px 15px; background-color: #a91414; text-transform: uppercase; font-size: 14px;}

.catlist-item-more a:hover {
    transform: scale(1.2) rotate(15deg);
}

.catlist-item-price-handwritten {
    position: absolute;
    top: 20px;       /* Отступ сверху */
    right: 15px;      /* Отступ справа */
    z-index: 9;     /* Поверх всего, даже поверх плашки с текстом */
    
    /* Стили шрифта */
    font-family: 'Caveat', cursive; /* Используем рукописный шрифт */
    font-size: 24px;   /* Размер побольше, чтобы читалось */
    color: #000000;    /* Цвет "ручки" */
    /* Стили самого бейджа (фона) */
    background-color: rgba(255, 255, 255, 0.9); /* Полупрозрачный белый */
    padding: 8px 15px;
    border-radius: 5px; /* Немного скруглим углы */
    
    /* Эффект рваного края или неровности (опционально, для стиля) */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);

    /* ТА САМАЯ МАГИЯ: Поворот под углом */
    transform: rotate(10deg); /* Положительное значение - по часовой, отрицательное - против */
    
    /* Чтобы текст не выделялся и не мешал кликам (опционально) */
    pointer-events: none; 
    
    /* Анимация при наведении на карточку */
    transition: transform 0.3s ease, background-color 0.3s ease;
	
	text-shadow: 1px 1px 0px rgba(255,255,255,0.5); /* Эффект блика на краске */
	
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; 
    border: 1px solid #cdcdcd; /* Тонкая рамка как контур бумажки */
}

/* Эффект при наведении на всю карточку */
.catlist-item:hover .catlist-item-price-handwritten {
    background-color: rgba(255, 255, 255, 1); /* Фон становится плотнее */
    transform: rotate(5deg) scale(1.05); /* Немного меняем угол и увеличиваем */
}

.catlist-item-size-badge {
    position: absolute;
    top: 20px;
    left: 15px;
    font-size: 12px;
    text-transform: uppercase;
    background: rgba(0,0,0,0.3);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    backdrop-filter: blur(2px); /* Эффект матового стекла */
}

/* Карточка товара */

.field-field-foto.swiper {
    width: 50%;      /* Занимает половину ширины родителя */
    margin-left: 0;
	float: left;
	margin-right: 30px; 
    margin-bottom: 20px;
    /* Фиксируем высоту для всего блока, чтобы он был стабильным */
    max-height: 70vh; 
    padding: 20px 0;
}

@media (max-width: 768px) {
    .field-field-foto.swiper {
        width: 100%;
        float: none;
        margin-right: 0;
    }
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* Убираем эффект "прозрачности" для неактивных слайдов, если нужно */
    opacity: 0.5; 
}

/* Делаем активный слайд ярким и чуть больше */
.swiper-slide-active {
    opacity: 1;
    transform: scale(1.05);
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Или contain, если важно видеть фото целиком */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Вариации товара */

/* Сетка плиток 
.product-custom-variations .view-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 15px 0;
}*/

/* Оформление плитки 
.variation-item {
	border: 1px solid #ddd;
    padding: 12px;
    border-radius: 6px;
    cursor: pointer;
    background: #fff;
    transition: 0.2s;
}
*/
/* Эффект при наведении */
.variation-item:hover {
    border-color: #bbb;
}

/* Стиль активной плитки 
.variation-item.active {
    border-color: #007bff;
    background-color: #f0f7ff;
}
*/
.v-label {
    display: block;
    font-weight: bold;
    font-size: 1.1em;
}

.v-price-display {
    color: #666;
    font-size: 0.9em;
}

.product-custom-variations .variation-item.active {
    border-color: #000 !important;
    background-color: #f0f0f0 !important;
    outline: 1px solid #000 !important;
}

/*.product-custom-variations .views-element-container > div {display: flex; gap: 20px; flex-wrap: wrap;} */
.variation-item-wrapper {flex: 0 0 auto;}



.product-custom-variations {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/*.variation-item {
    padding: 5px 10px;
    border: 1px solid #ddd;
    cursor: pointer;
    min-width: 60px;
    text-align: center;
}
.variation-item.active {
    border-color: #000;
    background: #f0f0f0;
}
*/
/* Контейнер для всех вариаций */
.product-custom-variations {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/*.variation-item {
    padding: 8px 12px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}


.variation-item.active {
    border-color: #007bff;
    background: #e7f1ff;
    font-weight: bold;
}
*/
/* Стилизация для "Роста" (чтобы они визуально отличались от Размеров) */
.is-height-child {
    border-radius: 20px; /* Сделаем их овальными "чипсами" */
    font-size: 13px;
    background: #f9f9f9;
}


/* Контейнер для кнопок роста */
.height-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

/* Сами кнопки роста */
.height-btn {
    display: inline-block;
    padding: 6px 15px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: 4px; /* Если хотите как размеры */
    font-size: 14px;
    transition: all 0.2s ease;
}

/* Состояние при наведении */
.height-btn:hover {
    border-color: #000;
}

/* Активная кнопка роста */
.height-btn.active {
    background: #000;
    color: #fff;
    border-color: #000;
}




/* Сами плитки размеров 
.variation-item.is-size-root {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 60px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box !important;
}
*/

/**/

/* 1. ГЛАВНЫЙ КОНТЕЙНЕР-СКРОЛЛЕР */
.variations-scroller-container {
    display: flex;
    flex-direction: row; /* Строго в ряд */
    flex-wrap: nowrap;   /* Запрещаем перенос */
    overflow-x: auto;    /* Включаем горизонтальный скролл */
    gap: 10px;
    width: 100%;
    padding: 10px 2px;
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iPhone */
}

/* УБИРАЕМ ПЕРЕНОСЫ И ОШИБКИ ПОЗИЦИОНИРОВАНИЯ ДЛЯ ВСЕХ ВЛОЖЕННЫХ DIV */
.variations-scroller-container > div,
.variations-scroller-container .views-row,
.variation-item-wrapper {
    display: contents;
}

/* Убираем обертки Drupal, которые могут мешать флексу */
.variations-scroller-container > .views-row,
.variations-scroller-container > div {
    display: contents; 
}

/* Скрываем полосу в Chrome/Safari */
.variations-scroller-container::-webkit-scrollbar {
    display: none;
}

.variations-scroller-container {
    scrollbar-width: none; /* Firefox */
}

/* 2. КНОПКИ РАЗМЕРОВ (ROOT) */
.variation-item.is-size-root {
    flex: 0 0 auto; /* Кнопка сохраняет свой размер и не сплющивается */
    min-width: 60px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap; /* Текст внутри не переносится */
}

/* Активный размер */
.variation-item.is-size-root.active {
    border-color: #000;
    background-color: #f0f0f0;
    box-shadow: inset 0 0 0 1px #000;
}

/* 3. КНОПКИ РОСТА (НИЖНИЙ РЯД) */
.height-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.height-btn {
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.height-btn.active {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Прайс-лист */



.pl-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  border: 1px solid #dddddd;
  background-color: #ffffff;
  margin: 5px 0 5px 0;
  padding: 10px;
  justify-content: end;
  align-items: end;
}

.pl-item-full {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px;}
.pl-item-cart {}

.pl-item-cart .commerce-order-item-variation-cart-form-form {display: grid; grid-template-columns: auto 1fr; gap: 10px;}
.pl-item-cart label {display: none;}
.pl-item-cart .form-number {width: 30px;}

/* Первая страница раздела */

.catland-item {position: relative;}
.catland-item-desc {position: absolute; left: 50%; bottom: 5%; transform: translate(-50%, 0); padding: 30px 20px 30px 20px; color: #ffffff; text-align: center; min-width: 250px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; min-height: 30%; clip-path: polygon(0 15%, 10% 0, 100% 0, 100% 85%, 90% 100%, 0 100%); transition: clip-path 0.4s ease;}

.catland-item-1 {background-color: rgba(5, 16, 48, 0.85);}
.catland-item-2 {background-color: rgba(84, 62, 28, 0.85);}
.catland-item-3 {background-color: rgba(52, 51, 48, 0.85);}

.catland-item-desc:hover {
    clip-path: polygon(0 0, 15% 0, 100% 0, 100% 100%, 85% 100%, 0 100%);
}

.catland-item-img {width: 100%; height: 100dvh;}
.catland-item-img img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}

.catland-item-desc-headerzone {}
.catland-item-desc-header {font-size: 30px; font-family: 'Finlandica Text',sans-serif; text-transform: uppercase; font-weight: 900;}
.catland-item-desc-secheader {font-size: 20px; font-family: 'Finlandica Text',sans-serif; text-transform: uppercase; font-weight: 500; margin: 10px 0 20px 0;}

.catland-item-desc-buttons {display: flex; gap: 20px; margin: 50px 0 0 0; align-items: center; justify-content: center; width: 100%; box-sizing: border-box;}
.catland-item-desc-button-1 a {background-color: #5D6D7E; color: #ffffff; padding: 10px 20px 10px 20px; font-size: 14px; text-transform: uppercase; border-radius: 10px; text-decoration: none;}
.catland-item-desc-button-2 a {background-color: #921123; color: #ffffff; padding: 10px 20px 10px 20px; font-size: 14px; text-transform: uppercase; border-radius: 10px; text-decoration: none;}

@media (max-width: 768px) {
    .catland-item-desc-text {display: none;}
	.catland-item-desc-buttons {margin: 10px 0 0 0; flex-wrap: wrap;}
}


/* Категории товаров */

.categs {
  display: grid;
  /* 1 колонка на мобилках */
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0;
}

.categs-item {
  position: relative; /* Нужно, чтобы растянуть ссылку по всему блоку */
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}

/* Эффект при наведении на всю карточку целиком */
.categs-item:hover {
  background-color: #ffffff;
  border-color: #ced4da;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Растягиваем саму ссылку на всю площадь div */
.categs-item a {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

/* Делаем кликабельной всю зону карточки */
.categs-item a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Планшеты и десктопы (от 768px и шире) — сетка 3 в ряд */
@media (min-width: 768px) {
  .categs {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  
  .categs-item {
    display: flex;
    min-height: 80px;
  }

  .categs-item a {
    width: 100%;
    text-align: center;
    justify-content: center; /* Центрируем текст по горизонтали на ПК */
  }
}

/* На главной разделы 

.podborcat {display: flex; flex-wrap: wrap; gap: 30px; align-items: center; justify-content: space-between; margin: 20px;}
.podborcat-item {flex: 1 1 250px; display: flex; min-height: 150px; }
.podborcat-item a {background-color: #192e69; border-radius: 20px; display: flex; align-items: start;  justify-content: left; width: 100%; height: 100%; min-height: 150px; color: #ffffff; text-decoration: none; font-size: 30px; font-weight: 300; padding: 25px; transition: background-color 0.3s ease, transform 0.3s ease; background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 20px 20px;}

.podborcat-item a:hover {
  background-color: #244296;
  transform: translateY(-5px);
}
*/

/* Подвал */

.ftr {background-color: #192e69; border-radius: 20px; color: #ffffff; margin: 20px;}
.ftr a {color: #ffffff; text-decoration: none; border-bottom: 1px solid #ffffff;}
.ftr-inner {display: flex; gap: 30px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 20px;}
.ftr-col-1 {flex: 1 1 250px;}
.ftr-col-2 {flex: 1 1 250px; font-size: 12px;}
.ftr-col-3 {flex: 1 1 250px;}

/* Корзина */

.cart-item {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; margin: 20px; background-color: #f7f7f7;}

.cart-item-row-2 {display: flex; gap: 20px; align-items: center;}

.cart-item-col {flex: 1 1 auto;}
.cart-item-col-1 {flex: 1 1 250px; min-width: 250px;}
.cart-item-col-2 {flex: 1 1 20px;}
.cart-item-col-3 {flex: 1 1 50px;}
.cart-item-col-4 {flex: 1 1 50px;}
.cart-item-col-5 {flex: 1 1 50px;}

.cart-item-col-1 a {color: #000000; font-size: 16px; text-decoration: none; border-bottom: 1px solid #000000;}

.cart-item-col-2 input {display: block; max-width: 30px; height: 25px; padding: 5px;}

.order-total-line__subtotal {display: none;}


.cart-item-col-4 input {
font-size: 24px !important; /* Делаем крестик крупным */
  color: #718096 !important;    /* Делаем цвет по умолчанию темнее и заметнее */
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
}

/* Эффект при наведении на крестик */
.cart-item-col-4 input:hover {
  background-color: #fff5f5 !important;
  color: #e53e3e !important;    /* Яркий красный при наведении */
}

.cart-item-col-4 input { /* замените селектор на ваш */
  font-size: 0; /* Прячем исходный текст "удалить" */
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

/* Рисуем крестик через ::before */
.cart-item-col-4 input::before {
  content: "×";
  font-size: 22px;
  color: #a0aec0;
  display: block;
  line-height: 28px;
  text-align: center;
}

.cart-item-col-4 input:hover {
  background-color: #fff5f5;
}

.cart-item-col-4 input:hover::before {
  color: #e53e3e;
}

/**/

.views-form #edit-submit {
  background-color: #f7fafc;
  color: #4a5568;
  border: 1px solid #cbd5e0;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.views-form  #edit-submit:hover {
  background-color: #edf2f7;
  border-color: #a0aec0;
  color: #2d3748;
}

.views-form  #edit-checkout {
  background-color: #102147; /* Тёмно-синий цвет в тон вашей шапки */
  color: #ffffff;
  border: 1px solid #102147;
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.views-form  #edit-checkout:hover {
  background-color: #1a365d; /* Чуть светлее/насыщеннее при наведении */
  border-color: #1a365d;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.commerce-checkout-flow-multistep-default .form-wrapper label {display: none;}
.commerce-checkout-flow-multistep-default input {min-width: 250px;}

.pg-title {text-transform: uppercase; font-weight: 400; font-size: 30px; margin: 0; padding: 0;}
.pg-title-sec {text-transform: uppercase; font-weight: 400; font-size: 18px; margin: 0; padding: 0; color: #dddddd;}
.shop-title {}
.shop-list {margin: 30px 0 30px 0; display: flex; gap: 30px; align-items: stretch; justify-content: center; flex-wrap: wrap;}
.shop-item {flex: 1 1 250px; min-width: 40%; background-color: #ffffff;}
.shop-item a {text-decoration: none; font-size: 22px; font-weight: 300; color: #000000; display: flex; width: 100%; height: 100%; padding: 20px; min-height: 200px;}

/**/
.field-field-magazin-contacts {}
/* ==========================================================================
   1. МОБИЛЬНЫЕ УСТРОЙСТВА И МАЛЕНЬКИЕ НОУТБУКИ (Экран меньше 1200px)
   Здесь работает горизонтальный скроллбаp
   ========================================================================== */
@media (max-width: 1199px) {
  .field-field-magazin-photos {
    display: flex;
    gap: 20px;
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    padding-bottom: 16px;
    align-items: flex-start; 
  }

  .field-field-magazin-photos > * {
    flex-shrink: 0; 
    width: 280px; /* На небольших экранах делаем карточки чуть компактнее */
    height: 220px; 
    border-radius: 8px;
    overflow: hidden;
  }

  .field-field-magazin-photos img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
  }
}

/* ==========================================================================
   2.БОЛЬШИЕ ЭКРАНЫ И НОУТБУКИ (Экран 1200px и больше)
   Здесь фото выстраиваются строго по 4 в ряд и растягиваются без скролла
   ========================================================================== */
@media (min-width: 1200px) {
  .field-field-magazin-photos {
    display: grid;
    /* Разделяет контейнер ровно на 4 одинаковые колонки */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    overflow-x: visible; /* Отменяем прокрутку */
    padding-bottom: 0;
  }

  .field-field-magazin-photos > * {
    width: 100%; /* Элементы занимают всю ширину своей CSS-сетки (Grid) */
    height: 250px; 
    border-radius: 8px;
    overflow: hidden;
  }

  .field-field-magazin-photos img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
  }
  
  /* Отключаем отображение полосы прокрутки, так как скролла больше нет */
  .field-field-magazin-photos::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   3. ОБЩИЕ СТИЛИ СKРОЛЛБАРА (Оставляем для мобильного режима)
   ========================================================================== */
@media (max-width: 1199px) {
  .field-field-magazin-photos::-webkit-scrollbar {
    height: 6px; 
  }
  .field-field-magazin-photos::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px;
  }
  .field-field-magazin-photos::-webkit-scrollbar-thumb {
    background: #bcbcbc; 
    border-radius: 10px;
  }
  .field-field-magazin-photos::-webkit-scrollbar-thumb:hover {
    background: #888888; 
  }
}

.layout--onecol:has(.field-field-magazin-contacts) .layout__region--content {display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 30px 0;}

.layout--onecol:has(.field-field-magazin-contacts) .layout__region--content > div {flex: 1 1 40%; min-width: 250px;}

.field-field-magazin-contacts {background-color: #ffffff; padding: 20px; border-radius: 20px;}

.field-field-magazin-map .field-field-media-image div {
  max-width: 900px; /* Максимальная ширина кадра */
  width: 100%;
  height: 400px;    /* Жесткая высота окна/клипа */
  border-radius: 20px;
  overflow: hidden; /* Обрезает всё, что вылезает за пределы рамки */
  margin: 0 auto;
}

/* 2. Кадрируем картинку по центру */
.field-field-magazin-map .field-field-media-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Заполняет весь кадр */
  object-position: center; /* Держит фокус строго по центру (обрезает лишнее с верха, низа и боков) */
  display: block;
}

.cont-wrapper {display: flex; gap: 20px; align-items: center; justify-content: center; flex-wrap: wrap;}
.cont-cont {flex: 1 1 250px; background-color: #ffffff; padding: 20px; min-height: 250px; border-radius: 20px;}
.cont-cont a {text-decoration: none; color: #000000;} 
.cont-header {text-transform: uppercase; font-weight: 400; font-size: 26px; margin: 0 0 30px 0; padding: 0;}

.cont-cont-phone {margin: 0 0 15px 0;}
.cont-cont-info {}
.cont-cont-info-email {margin: 0 0 15px 0;}
.cont-cont-info-addr {margin: 0 0 15px 0;}
.cont-cont-info-shed {}

.cont-shop {flex: 1 1 250px; background-color: #ffffff; padding: 20px; min-height: 250px; border-radius: 20px;}
.cont-shop-list {}
.cont-addr-shop-item {margin: 0 0 20px 0;}
.cont-addr-shop-item a {font-size: 20px; color: #000000; text-decoration: none; border-bottom: 1px solid #000000;}

/**/

.service-list {margin: 30px 0 30px 0; display: flex; gap: 30px; align-items: stretch; justify-content: center; flex-wrap: wrap;}
.service-list-item {flex: 1 1 250px; min-width: 40%; background-color: #ffffff;}
.service-list-item a {text-decoration: none; font-size: 22px; font-weight: 300; color: #000000; display: flex; width: 100%; height: 100%; padding: 20px; min-height: 200px;}

/**/

/* Основной контейнер баннера */
.block-arsing-bnnr {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    box-sizing: border-box; /* Чтобы отступы не раздували элемент */
}

/* Картинка на заднем плане */
.block-arsing-bnnr img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Блок категорий поверх картинки (общие стили) */
.podborcat {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
    padding: 20px 30px; /* Чуть уменьшили вертикальный паддинг */
    box-sizing: border-box; /* КРИТИЧЕСКИ ВАЖНО: чтобы padding не прибавлялся к 100% ширины/высоты */
    z-index: 2;
}

/* Элементы списка */
.podborcat-item {
    flex: 1;
    max-width: 400px;
    display: flex;
    min-height: 100px;
    box-sizing: border-box;
}

/* Стили ссылки-карточки */
.podborcat-item a {
    background-color: rgba(25, 46, 105, 0.85);
    backdrop-filter: blur(5px);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    min-height: 100px;
    color: #ffffff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 300;
    padding: 20px 25px;
    box-sizing: border-box; /* Учитываем padding внутри ссылки */
    transition: background-color 0.3s ease, transform 0.3s ease;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
}

.podborcat-item a:hover {
    background-color: rgba(36, 66, 150, 0.95);
    transform: translateY(-5px);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .block-arsing-bnnr {
        height: 100dvh;
    }

    .podborcat {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        flex-direction: column;
        gap: 20px; /* Уменьшаем отступ между карточками, чтобы точно влезли */
        padding: 10px 15px; /* Компактные отступы снизу и по бокам */
        box-sizing: border-box;
    }

    .podborcat-item {
        max-width: 100%;
        width: 100%;
        min-height: auto;
    }

    .podborcat-item a {
        font-size: 20px;
        min-height: 100px; /* Компактная высота для мобильных */
        padding: 10px 15px;
        box-sizing: border-box;
    }
}

/**/

/* Контейнер для вывода плиток */
.product-custom-variations {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

/* Внешний вид одной плитки */
.variation-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
}

/* Наведение */
.variation-item:hover {
  border-color: #000;
}

/* Активное (выбранное) состояние */
.variation-item.active {
  border-color: #000;
  background-color: #000;
  color: #fff;
}

/* Текст размера внутри плитки */
.variation-item .v-label {
  font-weight: 600;
}

.field-field-cat-fullname {text-transform: uppercase; font-weight: 300; font-size: 30px; margin: 0 0 30px 0; padding: 0; text-align: center;}