/* ============================================
Layout — змінні, сброси, сітка, утиліти
============================================ */

:root {
	--black: #393939;
	--white: #ffffff;
	--overlay: #000000;
	--overlay-scrim: #00000059;
	--light-gray: #f1f3f6;
	--gray: #bebebe;
	--gray-text: #7e7e7e;
	--dark-gray: #5b5b5b;
	--shadow-soft: #8e8e8e33;
	--shadow-hairline: #1a1a1a14;
	--red: #ff0000;
	--red-filter: invert(24%) sepia(100%) saturate(7449%) hue-rotate(1deg) brightness(92%) contrast(125%);
	--red-hover: #dd1212;
	--gold: #feba26;
	--green: #27ae60; 
	--blue: #3498db; 
	--status-success: var(--green);
	--status-success-bg: #d4edda;
	--status-success-text: #155724;
	--status-success-border: #c3e6cb;
	--status-warning: #f39c12;
	--status-warning-bg: #fff3cd;
	--status-warning-text: #856404;
	--status-danger: #e74c3c;
	--status-danger-bg: #f8d7da;
	--status-danger-text: #721c24;
	--status-danger-border: #f5c6cb;
	--status-info: var(--blue);
	--status-info-bg: #cfe2ff;
	--status-info-text: #084298;
	--status-neutral-bg: #e2e3e5;
	--status-neutral-text: #383d41;
	--primary: #FFD400;
	--primary-filter: invert(72%) sepia(78%) saturate(1061%) hue-rotate(1deg) brightness(106%) contrast(104%);
	--primary-match: #393939;
	--primary-filter-match: brightness(0%) invert(100%);
	--primary-hover: #FFC300;
	--accent: #393939;
	--accent-filter: invert(22.4%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
	--accent-match: #ffffff;
	--border: #eaeaea;

	--header-height: 106px;
	--top-bar-height: 40px;
	--container-indent: 60px;
	--blocks-indent: 20px;
	--min-col: 100px;
	--products-in-col: 5;
	--products-indent-h: 40px;
	--products-indent-w: 20px;
	--full-width: 100vw;
	--scroll-bar: 0px;
	/* Нижній край екрана: три плаваючі штуки — липучка покупки, банер cookie і кнопка
	   «нагору». Кожен компонент сам виставляє свою висоту в ці змінні, а ті, що вище в стопці,
	   додають їх до свого bottom — інакше вони лягають одна на одну (#2243) */
	--bottom-bar: 0px;
	--bottom-notice: 0px;
	--side-bar: 0px;
	--blocks-indent-category: 0px;

	--font-family-1: "Fixel Text";
	--font-family-2: "Fixel Display";

	--btn-height: 45px;
	--btn-height-small: 40px;
	--btn-padding: 0 24px;

	--radius-tiny: 4px; 
	--radius-small: 5px;
	--radius-mid: 10px;
	--radius-medium: 15px;
	--radius-large: 25px;
	--radius-max: 100%;
	--radius-pill: 100px;

	--icon-base: 24px;
	--icon-small: 24px;
	--icon-medium: 32px;
	--icon-large: 40px;
	--icon-multiplier: 2.35;
}

@media (min-width: 1921px) {
	:root {
		--full-width: 1920px;
	}
}
@media (max-width: 1279px) {
	:root {
		--header-height: 64px;
		--top-bar-height: 0px;
		--container-indent: 30px;
		--blocks-indent: 10px;
		--products-in-col: 4;
	}
}
@media (max-width: 1024px) {
	:root {
		--products-in-col: 3;
	}
}
@media (max-width: 768px) {
	:root {
		--products-indent-h: 20px;
		--products-indent-w: 10px;
		--products-in-col: 2;
	}
}

/* @font-face — генерується динамічно через OP_TA_Fonts (wp_head) */

/* Scrollbar - Start */
@media (pointer: fine) {
	:root {
		--scroll-bar: 6px;
	}
	::-webkit-scrollbar {
		width: var(--scroll-bar);
	}
	::-webkit-scrollbar-track {
		background-color: var(--white);
	}
	::-webkit-scrollbar-thumb {
		background: var(--primary);
		border-radius: var(--radius-large);
		border: 0px;
		transition: scrollbar-color 0.5s ease-out;
	}
	::-webkit-scrollbar-thumb:hover {
		background: var(--primary);
	}
	body *::-webkit-scrollbar {
		height: 3px;
		width: 3px;
	}
}
/* Scrollbar - End */

/* Reset - Start */
*,
*:after,
*:before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scrollbar-gutter: stable;
}
body {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--white);
	color: var(--black);
	font-family: var(--font-family-1);
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
	box-sizing: border-box;
	-webkit-text-size-adjust: none !important;
	-webkit-tap-highlight-color: transparent;
	cursor: default;
}
main {
	position: relative;
	margin-top: var(--header-height);
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
}
section {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
	overflow-x: clip;
}
a,
a p {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
}
.link {
	transition: all 0.3s ease;
}
.link:hover {
	color: var(--black);
}
.hover-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.underline {
	text-decoration: underline;
}
del {
	color: var(--dark-gray);
}
ins {
	text-decoration: none;
}
strong {
	font-weight: 600;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
figure.wp-block-image {
	max-width: 100%;
}
img {
	display: block;
	max-width: 100%;
	object-fit: cover;
	height: auto;
}
img.icon {
	object-fit: contain;
}
iframe {
	max-width: 100%;
}
/* Reset - End */

/* Container - Start */
.container {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--blocks-indent);
	max-width: calc(100% - var(--container-indent));
	width: calc(100% - var(--container-indent));
	margin: 0 auto;
}
.container-full {
	max-width: calc(100% - 0px);
	width: calc(100% - 0px);
	margin: 0 0;
}
.container:where(:not(.container-sidebar)) > *:where(:not([class^="col-"], [class*=" col-"])) {
	grid-column: 1 / -1; 
}
/* Контейнер с сайдбаром - Start */
.container-sidebar {
	grid-template-columns: var(--side-bar) 1fr;
}

/* Вариант с правым сайдбаром */
.container-sidebar:where(.sidebar-right) {
	grid-template-columns: 1fr var(--side-bar, 300px);
}
/* Предустановленные размеры сайдбара */
.container-sidebar[data-sidebar="200"] { --side-bar: 200px; }
.container-sidebar[data-sidebar="250"] { --side-bar: 250px; }
.container-sidebar[data-sidebar="300"] { --side-bar: 300px; }
.container-sidebar[data-sidebar="350"] { --side-bar: 350px; }
.container-sidebar[data-sidebar="400"] { --side-bar: 400px; }

/* Закрепленый сайдбар*/
.container-sidebar .sticky-sidebar {
	position: sticky;
	top: calc(var(--header-height) + 20px);
	max-height: calc(100vh - var(--header-height) - 40px);
	overflow-y: auto;
}
@media (max-width: 1279px) {
	.container-sidebar,
	.container-sidebar.sidebar-right {
		grid-template-columns: 1fr; /* Сайдбар уходит вниз */
	}
}
/* Контейнер с сайдбаром - End */

/* Работа с колонками - Start */
[class^="col-"], [class*=" col-"] {
	display: flex;
	flex-direction: column;
	gap: var(--blocks-indent);
}
.col-90 { grid-column: span 11; }
.col-80 { grid-column: span 10; } 
.col-75 { grid-column: span 9; } 
.col-70 { grid-column: span 8; }  
.col-66 { grid-column: span 8; }
.col-60 { grid-column: span 7; }   
.col-50 { grid-column: span 6; }   
.col-40 { grid-column: span 5; }  
.col-33 { grid-column: span 4; }   
.col-30 { grid-column: span 4; }   
.col-25 { grid-column: span 3; }  
.col-20 { grid-column: span 2; }  
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Адаптивность */
@media (max-width: 1279px) {
	[class^="col-"], [class*=" col-"] {
		grid-column: span 12;
	}
	.col-90-mob { grid-column: span 11; } 
	.col-80-mob { grid-column: span 10; } 
	.col-75-mob { grid-column: span 9; }  
	.col-70-mob { grid-column: span 8; }  
	.col-66-mob { grid-column: span 8; }   
	.col-60-mob { grid-column: span 7; }  
	.col-50-mob { grid-column: span 6; }   
	.col-40-mob { grid-column: span 5; } 
	.col-33-mob { grid-column: span 4; } 
	.col-30-mob { grid-column: span 4; }
	.col-25-mob { grid-column: span 3; }
	.col-20-mob { grid-column: span 2; } 
	.col-1-mob { grid-column: span 1; }
	.col-2-mob { grid-column: span 2; }
	.col-3-mob { grid-column: span 3; }
	.col-4-mob { grid-column: span 4; }
	.col-5-mob { grid-column: span 5; }
	.col-6-mob { grid-column: span 6; }
	.col-7-mob { grid-column: span 7; }
	.col-8-mob { grid-column: span 8; }
	.col-9-mob { grid-column: span 9; }
	.col-10-mob { grid-column: span 10; }
	.col-11-mob { grid-column: span 11; }
	.col-12-mob { grid-column: span 12; }
}
/* Работа с колонками - End */

.block-with-cols {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--blocks-indent);
	grid-column: 1 / -1;
}
.auto-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--min-col, 200px), 1fr));
	gap: var(--blocks-indent);
	grid-column: 1 / -1;
}
.auto-cols:where(.no-wrap) {
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-template-columns: none;
}

/* Предустановленные минимальные размеры для .auto-cols */
.auto-cols[data-min="150"] { --min-col: 150px; }
.auto-cols[data-min="200"] { --min-col: 200px; }
.auto-cols[data-min="250"] { --min-col: 250px; }
.auto-cols[data-min="300"] { --min-col: 300px; }
.auto-cols[data-min="350"] { --min-col: 350px; }
.auto-cols[data-min="400"] { --min-col: 400px; }

@media (max-width: 1279px) {
	.auto-cols[data-min="350"] { --min-col: 100%; }
	.auto-cols[data-min="400"] { --min-col: 100%; }	
}

.auto-cols[data-cols="1"] { grid-template-columns: repeat(1, 1fr); }
.auto-cols[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.auto-cols[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.auto-cols[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.auto-cols[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.auto-cols[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1680px) {
	.auto-cols[data-cols-1680="1"] { grid-template-columns: repeat(1, 1fr); }
	.auto-cols[data-cols-1680="2"] { grid-template-columns: repeat(2, 1fr); }
	.auto-cols[data-cols-1680="3"] { grid-template-columns: repeat(3, 1fr); }
	.auto-cols[data-cols-1680="4"] { grid-template-columns: repeat(4, 1fr); }
	.auto-cols[data-cols-1680="5"] { grid-template-columns: repeat(5, 1fr); }
	.auto-cols[data-cols-1680="6"] { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 1279px) {
	.auto-cols[data-cols-1279="1"] { grid-template-columns: repeat(1, 1fr); }
	.auto-cols[data-cols-1279="2"] { grid-template-columns: repeat(2, 1fr); }
	.auto-cols[data-cols-1279="3"] { grid-template-columns: repeat(3, 1fr); }
	.auto-cols[data-cols-1279="4"] { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
	.auto-cols[data-cols-768="1"] { grid-template-columns: repeat(1, 1fr); }
	.auto-cols[data-cols-768="2"] { grid-template-columns: repeat(2, 1fr); }
	.auto-cols[data-cols-768="3"] { grid-template-columns: repeat(3, 1fr); }
}

.one-column {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--blocks-indent);
	width: 100%;
	margin: 0 auto;
}
/* Container - End */

/* Gap - Start */
.gap-0 { gap: 0 !important; }
.gap-5 { gap: 5px !important; }
.gap-10 { gap: 10px !important; }
.gap-15 { gap: 15px !important; }
.gap-20 { gap: 20px !important; }
.gap-25 { gap: 25px !important; }
.gap-30 { gap: 30px !important; }
.gap-35 { gap: 35px !important; }
.gap-40 { gap: 40px !important; }
.cols-flush { gap: 0 !important; }

@media (max-width: 1279px) {
	.gap-0-mob { gap: 0 !important; }
	.gap-5-mob { gap: 5px !important; }
	.gap-10-mob { gap: 10px !important; }
	.gap-15-mob { gap: 15px !important; }
	.gap-20-mob { gap: 20px !important; }
	.gap-25-mob { gap: 25px !important; }
	.gap-30-mob { gap: 30px !important; }
	.gap-35-mob { gap: 35px !important; }
	.gap-40-mob { gap: 40px !important; }
}
/* Gap - End */

/* Alignment - Start */
.v-center { align-items: center; }
.v-start { align-items: flex-start; }
.v-end { align-items: flex-end; }
.h-center { justify-content: center; }
.h-start { justify-content: flex-start; }
.h-end { justify-content: flex-end; }

:where(.column, [class^="col-"], [class*=" col-"], .one-column).v-center { justify-content: center; }
:where(.column, [class^="col-"], [class*=" col-"], .one-column).v-start { justify-content: flex-start; }
:where(.column, [class^="col-"], [class*=" col-"], .one-column).v-end { justify-content: flex-end; }
:where(.column, [class^="col-"], [class*=" col-"], .one-column).h-center { align-items: center; }
:where(.column, [class^="col-"], [class*=" col-"], .one-column).h-start { align-items: flex-start; }
:where(.column, [class^="col-"], [class*=" col-"], .one-column).h-end { align-items: flex-end; }

@media (max-width: 1279px) {
	.v-center-mob { align-items: center; }
	.v-start-mob { align-items: flex-start; }
	.v-end-mob { align-items: flex-end; }
	.h-center-mob { justify-content: center; }
	.h-start-mob { justify-content: flex-start; }
	.h-end-mob { justify-content: flex-end; }

	:where(.column, [class^="col-"], [class*=" col-"], .one-column).v-center-mob { justify-content: center; }
	:where(.column, [class^="col-"], [class*=" col-"], .one-column).v-start-mob { justify-content: flex-start; }
	:where(.column, [class^="col-"], [class*=" col-"], .one-column).v-end-mob { justify-content: flex-end; }
	:where(.column, [class^="col-"], [class*=" col-"], .one-column).h-center-mob { align-items: center; }
	:where(.column, [class^="col-"], [class*=" col-"], .one-column).h-start-mob { align-items: flex-start; }
	:where(.column, [class^="col-"], [class*=" col-"], .one-column).h-end-mob { align-items: flex-end; }
}
/* Alignment - End */

/* Utilities - Start */
.items-group {
	display: flex;
	gap: var(--blocks-indent);
}
.wrap {
	flex-wrap: wrap !important;
}
.no-wrap {
	flex-wrap: nowrap !important;
}
.column {
	flex-direction: column !important;
}
.row {
	flex-direction: row !important;
}
.center {
	margin-left: auto !important;
	margin-right: auto !important;
}
.center-text {
	text-align: center;
}
.upp {
	text-transform: uppercase;
}
.relative {
	position: relative!important;
}
.hidden {
	display: none !important;
}
@media (max-width: 1279px) {
	.column-mob {
		flex-direction: column !important;
	}
	.row-mob {
		flex-direction: row !important;
	}
	.wrap-mob {
		flex-wrap: wrap !important;
	}
	.no-wrap-mob {
		flex-wrap: nowrap !important;
	}
	.center-mob {
		margin-left: auto !important;
		margin-right: auto !important;
	}
}
/* Utilities - End */

/* Icon Elements - Start */
.icon-element {
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	transition: all 0.3s ease;
}
.icon-element :is(img, .icon-mask) {
	min-width: var(--icon-base); 
	width: var(--icon-base); 
	height: var(--icon-base); 
	object-fit: contain;
	transition: all 0.3s ease;
}
.icon-element:where(.r-small, .r-medium, .r-large, .r-max) {
	min-width: var(--icon-box, calc(var(--icon-base) * var(--icon-multiplier)));
	width: var(--icon-box, calc(var(--icon-base) * var(--icon-multiplier)));
	height: var(--icon-box, calc(var(--icon-base) * var(--icon-multiplier)));	
}
:where(.icon-element, .icon-mask):where(.icon-small) { 
	--icon-base: var(--icon-small);
}
:where(.icon-element, .icon-mask):where(.icon-medium) { 
	--icon-base: var(--icon-medium);
}
:where(.icon-element, .icon-mask):where(.icon-large) { 
	--icon-base: var(--icon-large);
}
.icon-mask {
	display: inline-block;
	flex-shrink: 0;
	width: var(--icon-base);
	height: var(--icon-base);
	background-color: currentColor;
	-webkit-mask: var(--icon) no-repeat center / contain;
	mask: var(--icon) no-repeat center / contain;
	object-position: -9999px -9999px;
	transition: background-color 0.3s ease;
}
.icon-group {
	display: flex;
	align-items: center;
	gap: var(--blocks-indent);
}
.icon-group-content {
	display: flex;
	flex-direction: column;
}
.icon-group-label {
	color: var(--gray);
}
.icon-group-text {
	color: var(--black);
}
/* Icon Elements - End */

/* Border Radius - Start */
.r-tiny {
	border-radius: var(--radius-tiny);
}
.r-small {
	border-radius: var(--radius-small);
}
.r-mid {
	border-radius: var(--radius-mid);
}
.r-medium {
	border-radius: var(--radius-medium);
}
.r-large {
	border-radius: var(--radius-large);
}
.r-max {
	border-radius: var(--radius-max);
}
/* Border Radius - End */

/* Gutenberg - Start */
.wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
}
/* Gutenberg - End */

/* Overlay & Pseudo - Start */
.overlay:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}
.overlay > * {
	z-index: 1;
}
.overlay:where(.overlay-dark):before {
	background: rgb(0 0 0 / 20%);
}
.before,
.after {
	position: relative;
}
.before::before,
.after::after {
	content: "";
	background: var(--this-background);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* Overlay & Pseudo - End */

/* Colors - Start */
.primary {
	color: var(--primary);
}
.bg-primary {
	background: var(--primary);
}
.primary-filter {
	filter: var(--primary-filter);
}
.accent {
	color: var(--accent);
}
.bg-accent {
	background: var(--accent);
}
.accent-filter {
	filter: var(--accent-filter);
}
.gray {
	color: var(--gray);
}
.bg-gray {
	background: var(--gray);
}
.light-gray {
	color: var(--light-gray);
}
.bg-light-gray {
	background: var(--light-gray);
}
.dark-gray {
	color: var(--dark-gray);
}
.bg-dark-gray {
	background: var(--dark-gray);
}
.black {
	color: var(--black);
}
.bg-black {
	background: var(--black);
}
.white {
	color: var(--white);
}
.bg-white {
	background: var(--white);
}
.bg-image {
	background: var(--this-background);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
/* Colors - End */

/* Visibility - Start */
@media (min-width: 1280px) {
	.mob {
		display: none !important;
	}
}
@media (max-width: 1279px) {
	.pc {
		display: none !important;
	}
}
/* Visibility - End */

/* Accessibility - Start */
:focus {
	outline: none;
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	html {
		scroll-behavior: auto !important;
	}
}
/* Accessibility - End */

/* Scroll Lock - Start */
body.scroll-lock {
	overflow: hidden !important;
	position: fixed;
	width: 100%;
	top: var(--scroll-position, 0)!important;
}
/* Scroll Lock - End */