/* ==========================================================================
   uwin.css — основний шар стилів сайту.
   Нові компоненти пишемо тут.
   Legacy: style.min.css, production-style.css (поступово переносимо сюди).

   Правила:
   - кольори та радіуси — тільки через токени var(--...)
   - BEM з унікальним префіксом блоку: .block, .block__element, .block--modifier
   - mobile-first: базові стилі для мобільних, далі @media (min-width: 576 / 768 / 992 / 1200px)
   - без !important; специфічність — через блок або клас сторінки на body
   - без <style> і style="" у .tpl
   ========================================================================== */

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--c-brand: #ec6465;
	--c-brand-hover: #f08485;
	--c-text: #333;
	--c-muted: #7d7d7d;
	--c-border: #ebebeb;
	--c-bg-soft: #f0f2f4;
	--c-link: #0969b1;
	--c-white: #fff;

	--radius: 6px;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* ==========================================================================
   Shipping & Payment page (.dp-* / .sp-*)
   ========================================================================== */
.dp-wrap { background: #fff }
.dp-section { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px dashed #d0d0d0; background: #fff }
.dp-section--gray {
	background-color: #DDDDDD;
	background-image:
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' fill='%23434935' opacity='0.18'/></svg>");
	background-size: 200px 200px;
}
.dp-section-wrap { border-bottom: 1px dashed #d0d0d0; background: #fff }
.dp-section-wrap .dp-section { border-bottom: none }
.dp-section-wrap--last { border-bottom: none }
.dp-col-left { padding: 36px 40px 36px 20px; border-right: 1px solid #d8d8d8 }
.dp-col-right { padding: 36px 20px 36px 40px }
.dp-col-right--center { display: flex; align-items: center; justify-content: center }
.dp-title { font-family: AvenirBold; font-size: 24px; color: #111; letter-spacing: .05em; margin-bottom: 16px }
.dp-wrap p { font-size: 14px; color: #555; line-height: 1.65; margin-bottom: 12px }
.dp-sub-title { font-family: AvenirBold; font-size: 14px; color: #111; letter-spacing: .02em; margin-bottom: 14px; line-height: 1.4 }
.dp-wrap ul { list-style: none; padding: 0; margin: 0 0 10px 0 }
.dp-wrap ul > li { font-size: 13px; color: #444; line-height: 1.6; padding-left: 18px; position: relative; margin-bottom: 10px }
.dp-wrap ul > li::before { content: "\2022"; color: #333; font-size: 16px; position: absolute; left: 0; top: -3px }
.dp-wrap ul a { color: #0875D1 !important; text-decoration: none }
.dp-wrap b, .dp-wrap strong { font-weight: 600 }
.dp-np-icons { display: flex; gap: 32px; justify-content: center; align-items: flex-start }
.dp-np-item { display: flex; flex-direction: column; align-items: center; max-width: 120px }
.dp-np-circle { width: 100px; height: 100px; border-radius: 50%; border: 2px solid #E30613; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; flex-shrink: 0; overflow: hidden }
.dp-np-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50% }
.dp-np-label { font-size: 12px; color: #333; text-align: center; line-height: 1.35; font-weight: 600 }
.dp-pay-card { display: flex; align-items: center; gap: 20px; background: #fff; border: 1px solid #d8d8d8; border-radius: 8px; padding: 18px 28px; box-shadow: 0 2px 8px rgba(0,0,0,.07) }
.dp-pay-card img { max-height: 30px }
.dp-pay-mono { background: #1d1d1d; color: #fff; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 4px; white-space: nowrap }
.dp-pay-mc { display: inline-flex; align-items: center }
.dp-pay-mc-r { width: 32px; height: 32px; border-radius: 50%; background: #EB001B; display: inline-block }
.dp-pay-mc-y { width: 32px; height: 32px; border-radius: 50%; background: #F79E1B; margin-left: -14px; display: inline-block }
.dp-pay-visa { background: #1a1f71; color: #FFD200; font-size: 18px; font-weight: 800; font-style: italic; padding: 7px 14px; border-radius: 4px; letter-spacing: .06em }
.dp-note-gray {
	background-color: #DDDDDD;
	background-image:
		url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' fill='%23434935' opacity='0.18'/></svg>");
	background-size: 200px 200px;
	padding: 20px 40px;
	font-size: 14px;
	color: #444;
	line-height: 1.65;
}

.garant1{	    font-family: AvenirBold;}
@media (min-width: 768px) {
	.dp-note-gray.garant1 { margin-top: 30px }
}
.dp-container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; max-width: 1400px }

/* Stock status legend */
.sp-status-list { list-style: none; padding: 0; margin: 0; width: 100% }
.sp-status-item { display: flex; align-items: center; gap: 12px; padding: 14px 0 !important; border-bottom: 1px solid #ebebeb; margin-bottom: 0 !important }
.sp-status-item::before { content: none !important }
.sp-status-item:last-child { border-bottom: none }
.sp-status-item--inline { display: inline-flex; vertical-align: middle; padding: 0 !important; border-bottom: none; margin-bottom: 0 !important; gap: 5px; }
.sp-status-icon { display: flex; align-items: center; justify-content: center; width: 16px; flex-shrink: 0 }
.sp-status-label { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0 }
.sp-status-label--green { color: #09B10C }
.sp-status-label--orange { color: #E49713 }
.sp-status-label--gray { color: #919191 }
.sp-status-label--red { color: #B11709 }
.sp-status-item--inline .sp-status-label { font-size: 12px; }

@media (max-width: 767px) {
	.dp-section { grid-template-columns: 1fr }
	.dp-col-left { border-right: none; border-bottom: 1px solid #d8d8d8; padding: 24px 0 }
	.dp-col-right { padding: 20px 0 }
	.dp-title { font-size: 20px }
	.dp-np-circle { width: 80px; height: 80px }
	.dp-pay-card { flex-wrap: wrap; padding: 14px 16px; gap: 14px }
	.dp-note-gray { padding: 16px; margin-left: -15px; margin-right: -15px }
	.dp-pay-card img { max-height: 25px }
}

@media (max-width: 390px) {
	.dp-pay-card img { max-height: 20px }
}

/* ==========================================================================
   Home page components
   ========================================================================== */
.common-home .slider-title { text-align: center; font-size: 24px; margin-top: 25px }
.common-home .section-category { background-size: 24px }
.common-home .section-category .img-category__title { font-size: 24px }

.section-serial img { width: 100%; height: auto; display: block }
.section-serial__title { color: #333; font-size: 24px; font-weight: 700; line-height: normal; display: block; width: 100%; padding: 0 15px 10px; margin-bottom: 15px; margin-top: 0; text-align: center }
.section-serial .col-6 { padding-right: 5px; padding-left: 5px; margin-bottom: 5px; margin-top: 5px }

/* Активна серія (сторінка категорії з фільтром серії) */
.section-serial li a { position: relative; display: block }
.section-serial li a::after { content: ''; position: absolute; inset: 0; border: 3px solid transparent; pointer-events: none; transition: border-color .2s }
.section-serial img { transition: filter .25s, opacity .25s }
.section-serial.has-active li:not(.is-active) img { filter: grayscale(1); opacity: .45 }
.section-serial.has-active li:not(.is-active) a:hover img { filter: none; opacity: 1 }
.section-serial li.is-active a::after { border-color: #333 }
/* Серія без товарів з поточними фільтрами */
.section-serial li.is-disabled a { cursor: default; pointer-events: none }
.section-serial .row li.is-disabled img { filter: grayscale(1); opacity: .25 }
.section-serial li.is-active a::before { content: '\2713'; position: absolute; top: 8px; right: 8px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: #333; color: #fff; font-size: 16px; line-height: 28px; text-align: center }

/* Варіант з логотипами: на телефонах/планшетах замість картинок — круглі логотипи серій, 4 в ряд */
.section-serial .section-serial__logo { display: none }

@media (max-width: 991px) {
	.section-serial--logos .section-serial__title { font-size: 18px; padding-bottom: 0; margin-bottom: 5px }
	.section-serial--logos .section-serial__photo { display: none }
	.section-serial--logos .section-serial__logo { display: block; width: 64px; max-width: 100%; height: auto; margin: 0 auto; border-radius: 50% }
	.section-serial--logos li a::after { display: none }
	.section-serial--logos li.is-active .section-serial__logo { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #333 }
	.section-serial--logos li.is-active a::before { display: none }
}

/* Всередині #content (без власного .container) — вирівняти ряд під відступи колонок */
.main-category .section-serial .row { margin-right: -5px; margin-left: -5px }

@media (min-width: 992px) {
	.section-serial .col-lg-3 { padding-right: 10px; padding-left: 10px }
	.main-category .section-serial .row { margin-right: -10px; margin-left: -10px }
	.main-category .section-serial__title { display: none }
	.main-category .section-serial { margin-top: 15px; margin-bottom: 20px }
}

/* ==========================================================================
   404 page help blocks (.not-found-help)
   ========================================================================== */
.not-found-help { display: flex; flex-direction: column; gap: 28px; margin: 28px 0 30px }
.not-found-help__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px }
.not-found-help__actions .button-continue__button { margin-bottom: 0 }
.not-found-help .not-found-help__button--outline { background: transparent; color: var(--c-text); border-color: var(--c-border) }
.not-found-help .not-found-help__button--outline:hover,
.not-found-help .not-found-help__button--outline:focus { background: var(--c-bg-soft); color: var(--c-text) }


.not-found-help__contacts { text-align: center; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 22px 16px }
.not-found-help__title { font-size: 18px; font-weight: 700; color: var(--c-text); margin: 0 0 6px }
.not-found-help__text { color: var(--c-muted); margin: 0 0 14px }
.not-found-help__phones { display: flex; flex-direction: column; align-items: center; gap: 8px }
.not-found-help__phones .phone-ms__number { font-size: 18px; font-weight: 600; color: var(--c-text) }
.not-found-help__phones .phone-ms__messengers { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; list-style: none; padding: 0; margin: 6px 0 0 }
.not-found-help__phones .phone-ms__messengers a { display: flex; align-items: center; gap: 6px; color: var(--c-text) }

.not-found-help__products .img-category__title { display: block; text-align: center; font-size: 22px; font-weight: 700; margin: 0 0 15px }

@media (max-width: 575px) {
	.not-found-help__actions .button-continue__button { flex: 1 1 100% }
}

/* 404 hero за макетом html/404.php: сіра панель, картинка, заголовок у кутиках */
.not-found-hero { display: flex; flex-direction: column; align-items: center; gap: 0; background: #ddd; border-radius: 16px; padding: 48px 16px 40px; text-align: center }
.not-found-hero__image { display: block; max-width: 90%; height: auto }
.not-found-hero__corners { position: relative; display: inline-block; min-width: min(416px, 90%); padding: 12px 20px; margin: 16px 0 40px }
.not-found-hero__corners .corner { position: absolute; width: 8px; height: 8px; border: 0 solid #0f0f0f; pointer-events: none }
.not-found-hero__corners .corner-top-left { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px }
.not-found-hero__corners .corner-top-right { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px }
.not-found-hero__corners .corner-bottom-right { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px }
.not-found-hero__corners .corner-bottom-left { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px }
.not-found-hero__title { margin: 0; color: #606060; font-size: 18px; font-weight: 500; line-height: 1.4; text-transform: none }


@media (min-width: 992px) {
	.not-found-hero { padding: 80px 16px 64px }
	.not-found-hero__corners { margin-bottom: 64px }
}
.not-found-hero .not-found-help__button--outline { background: var(--c-white); border-color: var(--c-white); color: var(--c-text) }
.not-found-hero .not-found-help__button--outline:hover,
.not-found-hero .not-found-help__button--outline:focus { background: var(--c-bg-soft); border-color: var(--c-bg-soft); color: var(--c-text) }

/* Банер слайдера: розміри з width/height без спотворення */
.main-slider picture{display:block}
.main-slider__image{height:auto}

/* Плитки "Каталог спорядження": одне посилання на плитку */
.sub-category__item{display:block;text-decoration:none}
.sub-category__item:hover,.sub-category__item:focus{text-decoration:none}
.sub-category__item:hover .sub-category__link,.sub-category__item:focus .sub-category__link{color:#0969b1}