@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=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&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');

body {
  background-color: #ffffff;
  font-family: "Google Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "GRAD" 0;
margin: 0; padding: 0;
}
        
h1 {
  color: #333;
}

a {text-decoration: none; color: #000000;}

header {position: fixed; z-index: 999; width: 100%;}

.hdr {}
.hdr-inner {display: flex; justify-content: space-between; align-items: center; padding: 20px;}
.hdr-logo {background-color: rgba(255,255,255,0.8); padding: 10px; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.hdr-logo img {width: auto; height: 50px;}
.hdr-menu {display: flex; align-items: center; gap: 30px; background-color: rgba(0,136,206,0.8); border-radius: 30px; padding: 20px;}
.hdr-menu-phone {}
.hdr-menu-phone a {}
.hdr-menu-inner {display: flex; gap: 20px;}
.hdr-menu-item {}
.hdr-menu-item a {text-transform: uppercase; color: #ffffff;}

.hdr-plc {min-height: 120px; background-color: #f7f7f7;}

.bnnr-inner {position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;}
.bnnr img {width: 100%; height: 100dvh; object-fit: cover; display: block;}
.bnnr-text {position: absolute; bottom: 20px; left: 20px; background-color: rgba(19,82,118,0.8); padding: 20px; border-radius: 20px; color: #ffffff; z-index: 99; max-width: 500px; margin: 20px;}
.bnnr-text-title {font-size: 32px; font-weight: 500; font-family: "Geologica", sans-serif; }
.bnnr-text-sectitle {font-size: 24px; font-weight: 500; font-family: "Geologica", sans-serif;}
.bnnr-text-desc {font-size: 20px; margin: 20px 0 0 0;}
.bnnr-text-button a {display: inline-block; background-color: #a30f21; padding: 10px; border-radius: 10px; color: #ffffff; margin: 20px 0 0 0; text-transform: uppercase;}

.hdr-menu-icon {
  display: none;
  cursor: pointer;
  font-size: 24px;
  background-color: rgba(0,136,206,0.8); border-radius: 50%; aspect-ratio: 1 / 1; padding: 0; color: #ffffff; font-size: 20px;
}

@media (max-width: 1024px) {
  .hdr-menu-inner {
    display: none;
  }

  .hdr-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
  }
}

.hdr-menu-inner.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0083ce;
  z-index: 2000;
  justify-content: center;
  align-items: center;
}

.hdr-menu-close {
    display: none; 
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    color: #ffffff;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .hdr-menu-close {
        display: block; 
    }
}

.prod-list .layout__region {display: flex; flex-wrap: wrap;}
.prod-list .views-element-container {flex: 1 1 calc(50% - 50px); background-color: #f7f7f7; box-sizing: border-box; padding: 20px;}
.prod-list .views-element-container h2 {text-transform: uppercase; font-size: 26px;}

.prod-list-item {display: flex; gap: 20px; margin: 10px 0 10px 0; align-items: center;}
.prod-list-item-price {margin-left: auto;}


/* Находим кнопку добавления в корзину в Drupal Commerce */
.commerce-order-item-add-to-cart-form input[type="submit"],
.commerce-product-add-to-cart-form input[type="submit"],
.button--add-to-cart {
  position: relative;
  color: transparent !important; /* Делаем оригинальный текст невидимым */
  font-size: 0 !important;       /* Схлопываем текстовое пространство */
  
  /* Задаем аккуратные размеры для круглой или квадратной кнопки с плюсом */
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Создаем изящный плюс поверх кнопки */
.commerce-order-item-add-to-cart-form input[type="submit"]::after,
.commerce-product-add-to-cart-form input[type="submit"]::after,
.button--add-to-cart::after {
  content: "+";
  position: absolute;
  color: #fff;             /* Цвет плюса (поменяйте под ваш дизайн) */
  font-size: 24px;         /* Размер плюса */
  font-weight: 200;        /* Делаем его ультратонким и изящным */
  line-height: 1;
}

/* Легкий интерактив при наведении */
.button--add-to-cart:hover::after {
  transform: scale(1.1);   /* Плюс слегка увеличивается */
  transition: transform 0.2s ease;
}

.prod-list .views-element-container:nth-child(1) {
  background-color: #e6f3ff;
}

.prod-list .views-element-container:nth-child(2) {
  background-color: #b3ddf2;
}

.prod-list .views-element-container:nth-child(3) {
  background-color: #80c6e8;
}

.prod-list .views-element-container:nth-child(4) {
  background-color: #2c3e50; color: #ffffff;
}

#block-laun-views-block-carticon-block-1 {position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99999;
  width: 50px;
  height: 50px;
  overflow: hidden;}

#block-laun-views-block-carticon-block-1 .cart-icon {}

#block-laun-views-block-carticon-block-1 .cart-icon a {display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #E7252E;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none; z-index: 1; position: relative;}
  
#block-laun-views-block-carticon-block-1 .cart-icon img {filter: invert(1); width: 30px; height: 30px; z-index: 99999;}

#block-laun-views-block-carticon-block-1 .cart-icon a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #E7252E; /* Цвет кольца */
  animation: pulse-ring 2s ease-out infinite;
  z-index: -1;
}

/* Анимация импульса */
@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.6); /* Насколько сильно расширяется импульс */
    opacity: 0;
  }
}