#menu .cat-items{z-index:3}
#intro .wrap{position: relative; padding: 0}
.intro-swiper{position: relative; overflow: hidden}
.intro-swiper .swiper-slide{background: transparent}
.intro-swiper .intro-slide-link{display: block; width: 100%; height: 100%; cursor: pointer; text-decoration: none}
.intro-swiper .intro-slide-link img{display: block; width: 100%; height: auto; object-fit: contain; margin: 0 auto}
.intro-nav{position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; background: rgba(13, 40, 80, 0.25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 12; padding: 0; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease}
.intro-nav svg{width: 20px; height: 20px; display: block}
.intro-nav:hover{background: #1aa8a5; border-color: #1aa8a5; box-shadow: 0 8px 22px rgba(26, 168, 165, 0.45); transform: translateY(-50%) scale(1.08)}
.intro-nav:active{transform: translateY(-50%) scale(0.98)}
.intro-prev{left: 20px}
.intro-next{right: 20px}
.intro-nav.swiper-button-disabled{opacity: 0.35; pointer-events: none}
.intro-nav.swiper-button-lock{display: none}
.intro-pagination{position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; z-index: 12; line-height: 0}
.intro-pagination .swiper-pagination-bullet{position: relative; display: inline-block; width: 26px; height: 5px; margin: 0 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.4); opacity: 1; overflow: hidden; cursor: pointer; vertical-align: middle; transition: width 0.3s ease, background 0.3s ease}
.intro-pagination .swiper-pagination-bullet:hover{background: rgba(255, 255, 255, 0.7)}
.intro-pagination .swiper-pagination-bullet-active{width: 46px; background: rgba(255, 255, 255, 0.35); cursor: default}
.intro-pagination .swiper-pagination-bullet-active::after{content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: 4px; background: #fff; transform-origin: left center; animation: introBulletFill 5.5s linear forwards}
@keyframes introBulletFill{
	from{transform: scaleX(0)}
    to  {transform: scaleX(1)}
}


#additives{position: relative; overflow: hidden; padding: 72px 0 80px; background: linear-gradient(155deg, #eef4fc 0%, #dfeaf8 45%, #cfdff3 100%)}
#additives::before{content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%231d6fe0' fill-opacity='0.05'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none}
#additives .wrap{position: relative; z-index: 1}
#additives .additives-head{max-width: 820px; margin-bottom: 46px}
#additives h2{font-weight: bold; font-size: 32px; line-height: 1.25; text-transform: uppercase; color: #00688e; margin-bottom: 18px; text-wrap: pretty}
#additives h2 a{color: #00688e;text-decoration:none}
#additives h2 a:hover{text-decoration:none; opacity:0.9}
#additives .additives-sub{font-size: 16px; line-height: 1.65; color: #42567a; text-wrap: pretty}

.rosupak .items{background: #fafcfc;padding-top: 63px;padding-bottom:43px;overflow: auto;line-height: 1.25;}
.rosupak .items h3{margin: 20px 0; line-height: 1.25;color: #00688e;font-size:1.5em}
.rosupak .items p{line-height: 1.25;margin: 20px 0}
.rosupak .items p a{display:block; color:#00688e; font-size:1.2em}

.vystgrid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px}
.vystgrid img{width:auto;height:auto; max-width:100%;}

.additives-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px}
a.additive-card,
.additive-card{text-decoration:none; position: relative; display: flex; flex-direction: column; gap: 18px; background: #ffffff; border: 1px solid #d9e6f6; border-radius: 18px; padding: 28px 26px 26px; box-shadow: 0 6px 18px rgba(12, 60, 141, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease}
.additive-card::before{content: ''; position: absolute; top: 0; left: 26px; right: 26px; height: 4px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #2b7de9, #00688e); opacity: 0; transition: opacity 0.25s ease}
a.additive-card:hover,
.additive-card:hover{text-decoration:none; transform: translateY(-6px); border-color: #b9d2ef; box-shadow: 0 18px 38px rgba(12, 60, 141, 0.16)}
.additive-card:hover::before{opacity: 1}
.additive-top{display: flex; align-items: center; gap: 16px}
.additive-icon{flex: none; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, #2b7de9 0%, #00688e 100%); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(20, 90, 200, 0.35)}
.additive-icon svg{width: 26px; height: 26px; display: block; fill:#fff}
.additive-title{font-weight: bold; font-size: 17px; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; color: #00688e}
.additive-body{display: flex; flex-direction: column; gap: 16px}
.additive-group{min-width: 0}
.additive-label{font-weight: 600; font-size: 14px; line-height: 1.4; color: #1a1a1a; margin-bottom: 8px}
.additive-codes{display: flex; flex-wrap: wrap; gap: 6px}
.additive-codes span{display: inline-block; background: #0e4499; color: #fff; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: 0.04em; padding: 7px 12px; border-radius: 999px; white-space: nowrap}
.additive-card:hover .additive-codes span{background: #1257c4}
.additive-codes span.more{background: transparent; color: #42567a; font-weight: normal; border: 1px dashed #9fb6d8; padding: 6px 11px}
.additive-card:hover .additive-codes span.more{background: transparent; border-color: #2b7de9; color: #1257c4}
.additive-note{font-size: 14px; line-height: 1.55; color: #5a6c8c; text-wrap: pretty}

#visit{position: relative; overflow: hidden; padding: 0 5px 7px}
#visit::before{content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none}
#visit .visit-head{margin: 0 auto 20px; text-align: center}
#visit h2{font-weight: bold; font-size: 32px; line-height: 1.25; text-transform: uppercase; color:#00688e; margin-bottom: 14px; text-wrap: pretty}

/* карточка формы */
.visit-form{position: relative; max-width: 880px; margin: 0 auto; box-sizing: border-box; background: #ffffff; border-radius: 18px; padding:18px 20px 14px; box-shadow: 0 3px 5px rgba(4, 20, 50, 0.15); display: flex; flex-direction: column; gap: 12px}
/* honeypot — скрытое поле-ловушка для ботов */
.visit-form .visit-honeypot{position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none}
.visit-form .visit-label{font-weight: 600; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: #0c3c8d; margin-bottom: 12px}
.visit-form .visit-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 16px}
#visit .form-input{margin: 0}

/* даты — «таблетки»-чекбоксы */
.visit-date-options{display: flex; flex-wrap: wrap; gap: 10px}
.visit-date{position: relative; cursor: pointer}
.visit-date input{position: absolute; opacity: 0; pointer-events: none}
.visit-date span{display: flex; align-items: center; gap:3px; border: 1px solid #c7d9f0; border-radius: 999px; padding:5px; font-size:13px; font-weight:400; color: #42567a; background: #f4f8fd; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease}
.visit-date span::before{content: ''; width: 8px; height: 8px; border-radius: 50%; background: #c7d9f0; transition: background 0.2s ease}
.visit-date:hover span{border-color: #2b7de9; color: #0c3c8d}
.visit-date input:checked + span{background: #0e4499; border-color: #0e4499; color: #fff; box-shadow: 0 3px 7px rgba(14, 68, 153, 0.1)}
.visit-date input:checked + span::before{background: #6fe0dd}
.visit-date input:focus-visible + span{box-shadow: 0 0 0 3px rgba(43, 125, 233, 0.1)}

/* поля */
#visit .input-data{box-sizing: border-box; width: 100%; border: 1px solid #c7d9f0; border-radius: 10px; background: #f7faff; padding: 14px 16px; font-family: 'ProximaNova', Arial, sans-serif; font-size: 15px; color: #1a1a1a; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.2s ease}
#visit .input-data::placeholder{color: #8aa0c2}
#visit .input-data:focus{border-color: #2b7de9; background: #fff; box-shadow: 0 0 0 3px rgba(43, 125, 233, 0.15)}
#visit .input-data:disabled{opacity: 0.45; cursor: not-allowed}
#visit textarea.input-data{min-height: 104px}

/* контакты по желанию: чекбокс включает поле */
.visit-contact{display: flex; flex-direction: column; gap: 10px}
.visit-check{display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 600; color: #1a1a1a; width: max-content; -webkit-user-select: none; user-select: none}
.visit-check input,
#visit .form-check-input{-webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid #c7d9f0; border-radius: 6px; background: #fff; cursor: pointer; position: relative; transition: background 0.2s ease, border-color 0.2s ease}
.visit-check input:checked,
#visit .form-check-input:checked{background: #fff; border-color: #0e4499}
.visit-check input:checked::after,
#visit .form-check-input:checked::after{content: '';
  position: absolute;
  left: 6px;background: #fff;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid #0c3c8d;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
  border-width: 0 2px 2px 0;
  transform: rotate(405deg);
  z-index: 9
 }
.visit-check input:focus-visible,
#visit .form-check-input:focus-visible{box-shadow: 0 0 0 3px rgba(43, 125, 233, 0.3)}

/* согласие */
#visit .form-check{display: flex; align-items: flex-start; gap: 10px;margin-top: 0.5rem !important;min-height: 1.5rem;padding-left: 0;margin-bottom: .125rem; max-width:100%}
#visit .form-check-label{font-size: 13px; line-height: 1.55; color: #5a6c8c}
#visit .form-check-label a{color: #1257c4}

/* кнопка отправки */
#visit .visit-submit-row{display: flex; align-items: center; flex-wrap: wrap; gap: 18px}
#visit input[type="submit"].input-data{width: auto; border: none; border-radius: 999px; background: linear-gradient(135deg, #2b7de9 0%, #0c3c8d 100%); color: #fff; font-weight: bold; font-size: 15px; letter-spacing: 0.03em; padding:4px 54px; cursor: pointer; box-shadow: 0 10px 24px rgba(20, 90, 200, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease}
#visit input[type="submit"].input-data:hover{transform: translateY(-2px); box-shadow: 0 14px 30px rgba(20, 90, 200, 0.45)}
#visit input[type="submit"].input-data:active{transform: translateY(0)}
#visit input[type="submit"].input-data:disabled{opacity: 0.55; cursor: default; transform: none}
#visit .size{font-size: 12px; color: #8aa0c2; margin: 0}

/* ошибки валидации */
#visit .field-error{font-size: 13px; line-height: 1.4; color: #d23b3b; margin-top: 7px}
#visit .input-data.input-error{border-color: #d23b3b; box-shadow: 0 0 0 3px rgba(210, 59, 59, 0.12)}



@media screen and (max-width: 767.98px){
	.intro-nav{width: 40px; height: 40px}
    .intro-nav svg{width: 16px; height: 16px}
    .intro-prev{left: 10px}
    .intro-next{right: 10px}
    .intro-pagination{bottom: 10px}
    .intro-pagination .swiper-pagination-bullet{width: 18px; height: 4px}
    .intro-pagination .swiper-pagination-bullet-active{width: 32px}

	#visit { padding: 46px 0 54px; }
    #visit h2 { font-size: 22px; }
    #visit .visit-sub { font-size: 14px; }
    #visit .visit-head { margin-bottom: 26px; }
    .visit-form{    padding: 24px 18px 22px;     gap: 18px;     border-radius: 14px; }
    .visit-form .visit-grid{    grid-template-columns: 1fr; }
    .visit-date span { padding: 10px 16px; font-size: 13px; }
    #visit input[type="submit"].input-data { width: 100%; }
	.rosupak .items {padding-top: 40px;padding-bottom: 30px}
	.vystgrid {display: block}
	#cats .items .wrap a img {max-width: 100%;max-height: 110px}
	#cats .items.n1 a {display: block;width: 49%;height: 100px;border: 1px solid #f3f3f3;margin-left: 0;margin-bottom: 0}
	#cats .items.n1 a:nth-child(5n+1),
	#cats .items.n1 a:nth-child(4n+1),
	#cats .items.n1 a:nth-child(3n+1),
	#cats .items.n1 a{margin-left:0}
}


@media screen and (max-width: 1000px){
	.additives-grid{grid-template-columns: repeat(2, 1fr); gap: 18px}
    #additives{padding: 50px 0 56px}
    #additives h2{font-size: 26px}
}
@media screen and (max-width: 640px){
	.additives-grid{grid-template-columns: 1fr}
    #additives{padding: 36px 0 44px}
    #additives h2{font-size: 20px}
    #additives .additives-sub{font-size: 14px}
    #additives .additives-head{margin-bottom: 28px}
    .additive-card{padding: 22px 20px 20px}
}