:root {                       
	--wColorWhite:      #FFF;
	--wColor10:         #EBF5FC;		        /* Light background */
    --wColor12:         #EBEBEB;
	--wColor15:         #DEF0F9;
	--wColor17:         rgba(53,154,222,0.2);   /* = 359ADE 20% */
    --wColor18:         #c2e0f5; /* rgba(53,154,222,0.3);   /* = 359ADE 30% */
	--wColor20:         rgba(53,154,222,0.5);   /* = 359ADE 50% */
	--wColorBlack:      #359ADE;                /* most dark blue for text and dark backgrounds. like black */
	--wColorBlackPlus:  #308BC8;                /* For hover on text */
	--wColorRed:        #E53D42;

    --wMaxContainerWidth:    97vw;   /* 721->699.37 720->698.4 360->349.2  delta from 1600 to 699.37 -> 900.63   delta from 698.4 to 349.2 -> 349.2 */
	--wNormalContainerWidth: 1600px; /* 97vw @ 1649.48px->1600px */
    --wMinFullWidth: min(var(--wNormalContainerWidth), var(--wMaxContainerWidth)); /* Потрібно для zoom- коли робочий простір більше за 1600 px. Контейнер не збільшуватиметься вище за 1600px, отже залежні відносні розміри теж не ставатимуть більші. */

    --w08-05:   calc(var(--wMinFullWidth) / 300.21 + 2.670px);
    --w10-05:   calc(var(--wMinFullWidth) / 180.13 + 1.118px);
    --w16-13:   calc(var(--wMinFullWidth) / 300.21 + 10.67px); /* Changes from 16px to 13px while page size changes from full size (1600+50) to minimum size (350+10) */
    --w18-13:   calc(var(--wMinFullWidth) / 180.13 + 9.118px);
    --w20-10:   calc(var(--wMinFullWidth) / 90.063 + 2.235px); /* Розділити дельту width (900.63) на дельту розміру (наприклад, 20-10=10) - це перше число. Розділити максимум (1600) на це число і відняти максимум розміру - це друге число. */
    --w20-15:   calc(var(--wMinFullWidth) / 180.13 + 11.12px);
    --w22-18:   calc(var(--wMinFullWidth) / 225.16 + 14.89px);
    --w24-12:   calc(var(--wMinFullWidth) / 75.053 + 2.682px);
    --w24-20:   calc(var(--wMinFullWidth) / 225.16 + 16.93px);
    --w30-15:   calc(var(--wMinFullWidth) / 60.042 + 3.352px);
    --w30-20:   calc(var(--wMinFullWidth) / 90.063 + 12.23px);
    --w32-18:   calc(var(--wMinFullWidth) / 64.331 + 7.129px);
    --w32-20:   calc(var(--wMinFullWidth) / 75.053 + 10.68px);
    --w32-24:   calc(var(--wMinFullWidth) / 112.58 + 17.79px);
    --w32-28:   calc(var(--wMinFullWidth) / 225.16 + 24.89px);
    --w40-10:   calc(var(--wMinFullWidth) / 30.021 - 13.30px);
    --w40-20:   calc(var(--wMinFullWidth) / 45.032 + 4.470px);
    --w56-42:   calc(var(--wMinFullWidth) / 64.331 + 31.13px);
    --w64-32:   calc(var(--wMinFullWidth) / 28.145 + 7.152px);
    --w72-54:   calc(var(--wMinFullWidth) / 50.035 + 40.02px);
    --w80-40:   calc(var(--wMinFullWidth) / 22.516 + 8.939px);
    --w96-48:   calc(var(--wMinFullWidth) / 18.763 + 10.73px);
    --w306-200: calc(var(--wMinFullWidth) / 5.4916 + 14.65px); /* Тут інші коефіціенти бо розмір повинен змінюватись швидше, щоб на точці перемикання (720) уйти трохи далі. І навпаки, на меншому розмірі екрану розмір повинен бути більшим. */
    --w330-170: calc(var(--wMinFullWidth) / 5.6289 + 45.75px);
    --w460-170: calc(var(--wMinFullWidth) / 3.1056 - 55.20px); /* Тут вийшла одна дельта менше іншої. Взагалі, коли рахуєш ці константи, слід вмикати мозок. Або можна написати 3-поверхову формулу в кожний рядок, але там розмір буде повторюватись. */
    --w622-340: calc(var(--wMinFullWidth) / 3.1937 + 121.0px);

    --wThinGap:  1px;
	--wThinGap2: 2px;
}

@media (max-width: 720px) { /* (721->699.37 720->698.4 360->349.2) */
    :root {
        --w08-05:   calc(var(--wMaxContainerWidth) / 300.21 + 3.837px);
        --w10-05:   calc(var(--wMaxContainerWidth) / 180.13 + 3.061px);
        --w16-13:   calc(var(--wMaxContainerWidth) / 300.21 + 11.84px); /* Changes from 16px to 13px while page size changes from full size (1600+50) to minimum size (350+10) */
        --w18-13:   calc(var(--wMaxContainerWidth) / 180.13 + 11.06px);
        --w20-10:   calc(var(--wMaxContainerWidth) / 90.063 + 6.123px); /* Взяти перше число з root. Розділити мінімум (349.2) на це число і відняти мінімум розміру - це друге число. */
        --w20-15:   calc(var(--wMaxContainerWidth) / 180.13 + 13.06px);
        --w22-18:   calc(var(--wMaxContainerWidth) / 225.16 + 16.45px);
        --w24-12:   calc(var(--wMaxContainerWidth) / 75.053 + 7.347px);
        --w24-20:   calc(var(--wMaxContainerWidth) / 225.16 + 18.45px);
        --w30-15:   calc(var(--wMaxContainerWidth) / 60.042 + 9.184px);
        --w30-20:   calc(var(--wMaxContainerWidth) / 90.063 + 16.12px);
        --w32-18:   calc(var(--wMaxContainerWidth) / 64.331 + 12.57px);
        --w32-20:   calc(var(--wMaxContainerWidth) / 75.053 + 15.35px);
        --w32-24:   calc(var(--wMaxContainerWidth) / 112.58 + 20.90px);
        --w32-28:   calc(var(--wMaxContainerWidth) / 225.16 + 26.45px);
        --w40-10:   calc(var(--wMaxContainerWidth) / 30.021 - 1.632px);
        --w40-20:   calc(var(--wMaxContainerWidth) / 45.032 + 12.25px);
        --w56-42:   calc(var(--wMaxContainerWidth) / 64.331 + 36.57px);
        --w64-32:   calc(var(--wMaxContainerWidth) / 28.145 + 19.59px);
        --w72-54:   calc(var(--wMaxContainerWidth) / 50.035 + 47.02px);
        --w80-40:   calc(var(--wMaxContainerWidth) / 22.516 + 24.49px);
        --w96-48:   calc(var(--wMaxContainerWidth) / 18.763 + 29.39px);
        --w306-200: calc(var(--wMaxContainerWidth) / 1.8080 + 6.8584px); /* Тут інший коефіцієнт, і в більшому варіанті (до перемикання) також. Не лінійна зміна розміру, бо це зображення, і їх з 3х раптом стає 1 в ряд. */
        --w330-170: calc(var(--wMaxContainerWidth) / 5.629 + 107.96px);
        --w460-170: calc(var(--wMaxContainerWidth) / 3.1056 + 57.58px);
        --w622-340: calc(var(--wMaxContainerWidth) / 3.1937 + 230.7px);
    }
}

.wFontSize12F   { font-size: 12px; }
.wFontSize13F   { font-size: 13px; }
.wFontSize15F   { font-size: 15px; }
.wFontSize16R13 { font-size: var(--w16-13); }
.wFontSize16F   { font-size: 16px; }
.wFontSize18R13 { font-size: var(--w18-13); }
.wFontSize22R18 { font-size: var(--w22-18); }
.wFontSize22F   { font-size: 22px; }
.wFontSize24F   { font-size: 24px; }
.wFontSize24R20 { font-size: var(--w24-20); }
.wFontSize32R18 { font-size: var(--w32-18); }
.wFontSize32R20 { font-size: var(--w32-20); }
.wFontSize32R24 { font-size: var(--w32-24); }
.wFontSize32F   { font-size: 32px; }
.wFontSize64R32 { font-size: var(--w64-32); }
.wFontSize64F   { font-size: 64px; }
.wFontSize96R48 { font-size: var(--w96-48); }
.wFontSize96F   { font-size: 96px; }

.wFW200 { font-weight: 200; }
.wFW300 { font-weight: 300; }
.wFW400 { font-weight: 400; }
.wFW500 { font-weight: 500; }
.wFW600 { font-weight: 600; }
.wFW700 { font-weight: 700; }
.wFW800 { font-weight: 800; }

.wLH16  { line-height: 16px; }
.wLH100 { line-height: 100%; }
.wLH110 { line-height: 110%; }
.wLH120 { line-height: 120%; }
.wLH130 { line-height: 130%; }
.wLH140 { line-height: 140%; }
.wLH150 { line-height: 150%; }

@font-face {
	font-family: 'VelaSans'; font-weight: 200; font-style: normal;
	src: local('VelaSans ExtraLight'), local('VelaSans Extra Light'), local('VelaSans-ExtraLight'), local('VelaSans Extra-Light'), local('VelaSans-Extra-Light'),
         url('fonts/VelaSans-ExtraLight.woff2') format("woff2"), url('fonts/VelaSans-ExtraLight.woff') format("woff"), url('fonts/VelaSans-ExtraLight.otf') format('opentype'), url('fonts/VelaSans-ExtraLight.ttf') format('truetype');
}
@font-face {
	font-family: 'VelaSans'; font-weight: 300; font-style: normal;
	src: local('VelaSans Light'), local('VelaSans-Light'),
         url('fonts/VelaSans-Light.woff2') format("woff2"), url('fonts/VelaSans-Light.woff') format("woff"), url('fonts/VelaSans-Light.otf') format('opentype'), url('fonts/VelaSans-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'VelaSans'; font-weight: 400; font-style: normal;
	src: local('VelaSans Regular'), local('VelaSans-Regular'),
         url('fonts/VelaSans-Regular.woff2') format("woff2"), url('fonts/VelaSans-Regular.woff') format("woff"), url('fonts/VelaSans-Regular.otf') format('opentype'), url('fonts/VelaSans-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'VelaSans'; font-weight: 500; font-style: normal;
	src: local('VelaSans Medium'), local('VelaSans-Medium'),
         url('fonts/VelaSans-Medium.woff2') format("woff2"), url('fonts/VelaSans-Medium.woff') format("woff"), url('fonts/VelaSans-Medium.otf') format('opentype'), url('fonts/VelaSans-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'VelaSans'; font-weight: 600; font-style: normal;
	src: local('VelaSans SemiBold'), local('VelaSans Semi Bold'), local('VelaSans-SemiBold'), local('VelaSans Semi-Bold'), local('VelaSans-Semi-Bold'),
         url('fonts/VelaSans-SemiBold.woff2') format("woff2"), url('fonts/VelaSans-SemiBold.woff') format("woff"), url('fonts/VelaSans-SemiBold.otf') format('opentype'), url('fonts/VelaSans-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'VelaSans'; font-weight: 700; font-style: normal;
    src: local('VelaSans Bold'), local('VelaSans-Bold'),
         url('fonts/VelaSans-Bold.woff2') format("woff2"), url('fonts/VelaSans-Bold.woff') format("woff"), url('fonts/VelaSans-Bold.otf') format('opentype'), url('fonts/VelaSans-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'VelaSans'; font-weight: 800; font-style: normal;
	src: local('VelaSans ExtraBold'), local('VelaSans Extra Bold'), local('VelaSans-ExtraBold'), local('VelaSans Extra-Bold'), local('VelaSans-Extra-Bold'),
         url('fonts/VelaSans-ExtraBold.woff2') format("woff2"), url('fonts/VelaSans-ExtraBold.woff') format("woff"), url('fonts/VelaSans-ExtraBold.otf') format('opentype'), url('fonts/VelaSans-ExtraBold.ttf') format('truetype');
}

/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,
audio, video, button, input, textarea { margin: 0; padding: 0; border: 0; vertical-align: baseline; outline: none; box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

html { scroll-behavior: smooth; }

div { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; text-align: left; }

body {
	font-family: 'VelaSans';
	background-color: var(--wColorWhite);
	color: var(--wColorBlack);
	/* overflow: overlay; */
	transition-duration: 0.4s;
	/*background-image: URL('static_images/background.png');*/
}

h1, h2, h3, h4, h5 { line-height: 100%; margin: 0px; color: var(--wColorBlack); }

a { color: var(--wColorBlack); }
a:not(:hover) { text-decoration: none; }

.wHidden        { display: none; }
.wDisabled      { pointer-events: none; cursor: initial; opacity: 0.57; }
.wActiveButton  { pointer-events: none; cursor: initial; font-weight: 700; }
.wWidth100      { width: 100%; }
.wHeight100     { height: 100%; }
.wCanWrap       { flex-wrap: wrap; }
.wNoWrap        { white-space: nowrap; }
.wStretch       { align-self: stretch; }
.wGrow          { flex-grow: 1; }
.wUppercase     { text-transform: uppercase; }
.wBR4           { border-radius: 4px; overflow: hidden; }
.wBR6           { border-radius: 6px; overflow: hidden; }
.wBR8           { border-radius: 8px; overflow: hidden; }
.wBR10          { border-radius: var(--w10-05); overflow: hidden; }
.wBR24          { border-radius: var(--w24-12); overflow: hidden; }

.wGap1              { column-gap: var(--wThinGap); row-gap: var(--wThinGap); }
.wGap2              { column-gap: var(--wThinGap2); row-gap: var(--wThinGap2); }
.wColumnGap08R05    { column-gap: var(--w08-05); }
.wColumnGap08F      { column-gap: 8px; }
.wColumnGap10R05    { column-gap: var(--w10-05); }
.wColumnGap20R10    { column-gap: var(--w20-10); }
.wColumnGap40R20    { column-gap: var(--w40-20); }
.wRowGap20R10       { row-gap: var(--w20-10); }
.wRowGap20R15       { row-gap: var(--w20-15); }
.wRowGap40R20       { row-gap: var(--w40-20); }

/*button:disabled:hover {
    background-color: var(--wColorBlack);
}*/

.wRoundedButton {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 24px;
	background-color: var(--wColorBlack);
	color: var(--wColorWhite);
	background-repeat: no-repeat;
	background-position-y: center;
	white-space: nowrap;
	font-weight: 500;
	overflow: hidden;
    padding-bottom: 1px;
}
.wSimpleButton {
    height: 48px;
    padding-left: 24px;
	padding-right: 24px;
	font-size: var(--w22-18);
}
.wRoundedButton.wPopupCloseButton, .wRoundedButton.wDeleteButton, .wRoundedButton.wMinusButton, .wRoundedButton.wPlusButton {
    background-color: var(--wColorWhite);
    color: var(--wColorBlack);
}
.wRoundedButton:hover:not(:disabled) {
	background-color: var(--wColorBlackPlus);
}
.wRoundedButton.wPopupCloseButton:hover:not(:disabled), .wRoundedButton.wDeleteButton:hover:not(:disabled) {
	background-color: var(--wColor10);
}
.wRoundedButton.wPlusButton:hover:not(:disabled), .wRoundedButton.wMinusButton:hover:not(:disabled) {
	background-color: var(--wColorWhite);
}
#wBasketButton {
	text-align: right;
	height: 44px;
	background-image: URL('../static_images/basket.svg');
	background-position-x: 16px;
	padding-left: 48px;
	padding-right: 16px;
	font-size: var(--w22-18);
}
.wOpenCatButton, .wMakeOrderButton {
	text-align: left;
	height: 48px;
	padding-left: 24px;
	padding-right: 24px;
	font-size: var(--w22-18);
}
.wOpenCatButton:after, .wMakeOrderButton:after {
    content: url('../static_images/arrow_right.svg');
    margin-left: 12px;
    margin-top: 4px; /* Не можу це пояснити. Це потрібно, інакше стрілка не по центру. */
}
.wGoCatButton, .wDeleteButton, .wPlusButton, .wMinusButton {
	height: 48px; min-height: 48px; max-height: 48px;   /* Для круглих кнопок вкрай бажано зазначати min=normal=max */
	width: 48px; min-width: 48px; max-width: 48px;      /* Для круглих кнопок вкрай бажано зазначати min=normal=max */
    background-position: center;
}
.wPopupCloseButton {
    height: 48px; min-height: 48px; max-height: 48px;   /* Для круглих кнопок вкрай бажано зазначати min=normal=max */
    width: 48px; min-width: 48px; max-width: 48px;      /* Для круглих кнопок вкрай бажано зазначати min=normal=max */
    font-size: 24px;
}
.wGoCatButton {
	background-image: URL('../static_images/arrow_right.svg');
}
.wDeleteButton {
	background-image: URL('../static_images/delete.svg');
}
.wPlusButton {
    background-image: URL('../static_images/basket_plus.svg');
}
.wMinusButton {
    background-image: URL('../static_images/basket_minus.svg');
}
.wBasketIcon {
	min-width: 54px;
	min-height: 54px;
	background-image: URL('../static_images/basket_black.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 27px;
}

.fullPageBlock {
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
	align-items: center;
}
.fullPageColumn {
	flex-direction: column;
	position: relative;
	flex-grow: 1;
	max-width: var(--wMaxContainerWidth);
	width: var(--wNormalContainerWidth);
}
.mainContentBlock {
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
}
.mainContentAsForm {
	width: 100%;
	flex-grow: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 10vh;
}
.messageBox {
	display: none;
	position: fixed;
	left: 50vw;
	top: 50vh;
	transform: translate(-50%, -50%);
	z-index: 20;
	border-radius: var(--w24-12);
	background-color: var(--wColorWhite);
	flex-direction: column;
	row-gap: 20px;
	padding: 10px;
	align-items: flex-start;
    border: 1px solid var(--wColorBlack);
    -webkit-box-shadow: 1px 1px 3px 1px var(--wColor17);
	-moz-box-shadow: 1px 1px 3px 1px var(--wColor17);
    box-shadow: 1px 1px 3px 1px var(--wColor17);
}
#messageBox, #messageBoxOneButton {
    padding: 20px;
}
.messageBoxText {
	align-items: flex-start;
	text-align: center;
	width: 100%;
	flex-direction: column;
}
.messageBoxButtonBlock {
	justify-content: center;
	width: 100%;
	column-gap: 20px;
}
#spinner {
	top: 40vh;
	left: 50vw;
	position: fixed;
	display: none;
	width: 70px;
	height: 70px;
	border: 5px solid rgba(55,155,255,.5);
	border-radius: 50%;
	border-top-color: rgba(0,100,200,.9);
	-webkit-box-shadow: 0px 0px 10px 10px lightblue;
	-moz-box-shadow: 0px 0px 10px 10px lightblue;
	box-shadow: 0px 0px 10px 10px lightblue;
	animation: spin 1s ease-in-out infinite;
	-webkit-animation: spin 1s ease-in-out infinite;
	background-color: lightblue;
    z-index: 50;
}
@keyframes spin { to { -webkit-transform: rotate(360deg); }}
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); }}
#popupWindow {
	min-height: 400px;
	min-width: 300px;
    padding: 0px;
}
#popupButtonsBlock .btn {
	min-width: 120px;
}

.wRowStartCenter, .wRowStartStart, .wRowStartEnd, .wRowCenterCenter, .wRowCenterStart, .wRowCenterEnd,
.wRowSpaceStart, .wRowSpaceCenter, .wRowSpaceEnd, .wRowEndEnd, .wRowEndStart, .wRowEndCenter { flex-direction: row; }

.wColumnStartCenter, .wColumnStartStart, .wColumnStartEnd, .wColumnCenterStart, .wColumnCenterCenter, .wColumnCenterEnd,
.wColumnEndStart, .wColumnEndCenter, .wColumnEndEnd, .wColumnSpaceStart, .wColumnSpaceCenter, .wColumnSpaceEnd { flex-direction: column; }

.wRowStartCenter, .wRowStartStart, .wRowStartEnd, .wColumnStartCenter, .wColumnStartStart, .wColumnStartEnd { justify-content: flex-start; }

.wRowCenterCenter, .wRowCenterStart, .wRowCenterEnd, .wColumnCenterStart, .wColumnCenterCenter, .wColumnCenterEnd { justify-content: center; }

.wRowSpaceStart, .wRowSpaceCenter, .wRowSpaceEnd, .wColumnSpaceStart, .wColumnSpaceCenter, .wColumnSpaceEnd { justify-content: space-between; }

.wRowEndEnd, .wRowEndStart, .wRowEndCenter, .wColumnEndStart, .wColumnEndCenter, .wColumnEndEnd { justify-content: flex-end; }

.wRowStartCenter, .wRowCenterCenter, .wRowSpaceCenter, .wRowEndCenter, .wColumnStartCenter, .wColumnCenterCenter, .wColumnEndCenter, .wColumnSpaceCenter { align-items: center; }

.wRowStartStart, .wRowCenterStart, .wRowSpaceStart, .wRowEndStart, .wColumnStartStart, .wColumnCenterStart, .wColumnEndStart, .wColumnSpaceStart { align-items: flex-start; } 

.wRowStartEnd, .wRowCenterEnd, .wRowSpaceEnd, .wRowEndEnd, .wColumnStartEnd, .wColumnCenterEnd, .wColumnEndEnd, .wColumnSpaceEnd { align-items: flex-end; }

.tooltip-inner {
    max-width: 300px!important;
    font-size: 110%!important;
}

.wRectangle12 {
	background-color: var(--wColor10);
	width: 800px;
	max-width: calc(min(calc(var(--wMaxContainerWidth) / 2), calc(var(--wNormalContainerWidth) / 2)) - calc(var(--wThinGap2) * 1 / 2));
	min-height: calc(min(calc(var(--wMaxContainerWidth) / 2), calc(var(--wNormalContainerWidth) / 2)) - calc(var(--wThinGap2) * 1 / 2));
	padding: var(--w40-20);
}
.wSquare14 {
	background-color: var(--wColor10);
	width: 400px;
    height: 400px;
	max-width: calc(min(calc(var(--wMaxContainerWidth) / 4), calc(var(--wNormalContainerWidth) / 4)) - calc(var(--wThinGap2) * 3 / 4)); /* х 3 / 4 = Помножити на кількість проміжків і поділити на кількість блоків */
	max-height: calc(min(calc(var(--wMaxContainerWidth) / 4), calc(var(--wNormalContainerWidth) / 4)) - calc(var(--wThinGap2) * 3 / 4));
}
.wWidth12 {
    width: calc(min(calc(var(--wMaxContainerWidth) / 2), calc(var(--wNormalContainerWidth) / 2)) - 10px);
    flex-grow: 1;
}
.wRectangle13 {
    background-color: var(--wColorWhite);
    width: calc(min(calc(var(--wMaxContainerWidth) / 3), calc(var(--wNormalContainerWidth) / 3)) - calc(var(--wThinGap) * 8 / 3)); /* 8 вдвічі більше ніж треба, тому що під час масштабування, бордер збільшується, це робить браузер. Тому відстань збільшено і встановлено flex-grow. */
    flex-grow: 1;
    align-self: stretch;
}
.wRectangle14 {
    background-color: var(--wColorWhite);
	width: calc(min(calc(var(--wMaxContainerWidth) / 4), calc(var(--wNormalContainerWidth) / 4)) - calc(var(--wThinGap2) * 10 / 4)); /* х 3 / 4 = Помножити на кількість проміжків і поділити на кількість блоків */
    flex-grow: 1;
	min-height: calc(min(calc(var(--wMaxContainerWidth) / 4), calc(var(--wNormalContainerWidth) / 4)) - calc(var(--wThinGap2) * 10 / 4));
    align-self: stretch;
}
.wRectangle14Strict {
    background-color: var(--wColorWhite);
	width: calc(min(var(--wMaxContainerWidth), var(--wNormalContainerWidth)) / 4 - 1px);
    min-width: calc(min(var(--wMaxContainerWidth), var(--wNormalContainerWidth)) / 4 - 1px);
    flex-grow: 1;
	min-height: calc(min(var(--wMaxContainerWidth), var(--wNormalContainerWidth)) / 4 - 1px);
    align-self: stretch;
}
.wBlockLink {
    cursor: pointer;
}
.wBlockLink:hover {
    background-color: var(--wColor12);
}
#wLogoImg { height: 44px; }
.wHeaderDiv33 {
	width: 33%;
}
.wGoCatAndButton {
	padding: 0px var(--w40-20) var(--w30-15) var(--w40-20);
}
.wTopicCard {
    padding: var(--w20-10);
    row-gap: var(--w20-10);
}
#wHeroH1, .wCategoryH2, .wCatHeader>h1 {
	letter-spacing: -0.03em;
}
.wHeroImage {
    background: center no-repeat;
    background-size: cover;
}
.wCatImageSmall {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.wISOImg {
    height: var(--w96-48);
}
.wBlockDivider {
    height: var(--w80-40);
}
.wMPPCFooter { /* MPPC = Main Page Product Card */
    padding: 0px var(--w30-15) var(--w30-15) var(--w30-15);
}
.wOldPriceMPPC {
    color: var(--wColor20);
}
.wOldPriceMPPCValue {
    text-decoration: line-through;
    margin-right: 3px;
    white-space: nowrap;
}
.wActualPriceMPPC {
    line-height: 100%;
}
.wActualPriceMPPCValue {
    margin-right: 6px;
    white-space: nowrap;
}
.wMPPCImage3-2 { /* Перехід з 3 до 2. Desktop - 3 картки в ряд, мобільний - 2 картки в ряд.  */
    width: var(--w460-170);
    height: var(--w460-170);
}
.wMPPCImage4-2 { /* Перехід з 4 до 2. Desktop - 4 картки в ряд, мобільний - 2 картки в ряд.  */
    width: var(--w330-170);
    height: var(--w330-170);
}
.wTopicImageContainer3-1 {
    height: var(--w306-200);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.wActionBadgeMPPC {
    background-color: var(--wColorRed);
    color: var(--wColorWhite);
    line-height: 140%;
    padding: 0px 6px;
}
.wMPPCBlock {
    background-color: var(--wColor15);
    border: 1px solid var(--wColor15);
}
.wCat12BlockH2 {
    line-height: 130%;
    word-spacing: 99vw;
}
.wFooterContacts, .wFooterLogo {
    align-self: stretch;
    width: 50%;
    padding: var(--w80-40) var(--w40-20) var(--w80-40) var(--w40-20);
}
.wFooterAllContacts {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.wWholeFooter {
    flex-direction: row-reverse;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-grow: 1;
}
.wFooterLogo>img {
    max-height: 100%;
    max-width: 100%;
}
.wContactRecord, .wSocialRecord {
    padding: 5px 0px;
}
.wSocialRecord:last-child {
    padding-bottom: initial;
}
.wSocialRecord:after {
    content: URL('../static_images/arrow_angle.svg');
    margin-left: 4.5px;
}
.wPromoGrid {
    width: 100%;
    display: grid;
    grid-template-columns: 20px 1fr minmax(10px, auto);
}
.wPromoGrid>div {
    min-height: var(--w32-28);
    align-self: stretch;
    align-items: center;
    border-bottom: 1px solid var(--wColor17);
}
.wPromoGrid>div:nth-child(-n + 3) {
    border-top: 1px solid var(--wColor17);
}
.wBigCatImgBackground {
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 71.875%;
    cursor: pointer;
}
.wRect12HContainer {
    padding-bottom: 40%;
}
.wRect12HContainer>div {
    width: min-content;
}
.wCatHeaderBlock1, .wCatHeaderBlock2 {
    background-color: var(--wColor10);
    padding-left: var(--w40-20);
    padding-right: var(--w40-20);
}
.wCatHeaderBlock2 {
    padding-top: 4px;
    padding-bottom: 4px;
}
.wBreadCrumbs {
    column-gap: 4px;
    padding-top: var(--w24-12);
    padding-bottom: var(--w24-12);
}
.wCatHeader {
    padding-bottom: var(--w40-10);
}
.wCatMenu {
    column-gap: 2px;
    row-gap: 2px;
    padding-bottom: 4px;
    padding-top: 4px;
    flex-wrap: wrap;
}
.wMenuLink {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    column-gap: 2px;
    background-color: var(--wColor10);
    cursor: pointer;
    height: 46px;
    white-space: nowrap;
}
.wMenuLink:hover {
    background-color: var(--wColorWhite);
}
.wMenuLink.wSelected {
    background-color: var(--wColorBlack);
    color: var(--wColorWhite);
    cursor: initial;
}
.wSelectContainerType {
    padding-right: 8px;
    display: none;
}
.wSelectContainerDiam {
    border-left: 1px solid var(--wColorWhite);
    padding-left: 8px;
}
.wSelectTypeAndDiam {
    column-gap: 8px;
    padding: 8px 8px 8px 16px;
    cursor: pointer;
    height: 38px;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.wSelectTypeAndDiam:hover {
    background-color: var(--wColorWhite);
}
.wSelectType {
    justify-content: flex-start;
}
.wSelectDiam {
    justify-content: flex-end;
}
.wSelectTypeAndDiamIcon {
    width: 16px;
    height: 16px;
    background: center no-repeat URL('../static_images/arrow_down.svg');
    background-size: 60%;
}
.wSelectTypeAndDiamItems {
    position: absolute;
    background-color: var(--wColor10);
    border: 1px solid var(--wColor20);
    white-space: nowrap;
    z-index: 1;
    padding: 6px 0px;
}
.wSelectType .wSelectTypeAndDiamItems {
    transform: translate(-16px, calc(21px + 50%));
}
.wSelectDiam .wSelectTypeAndDiamItems {
    transform: translate(8px, calc(21px + 50%));
}
.wSelectTypeAndDiamItem {
    padding: 7px 26px 7px 18px;
    align-self: stretch;
}
.wSelectTypeAndDiamItem:hover {
    background-color: var(--wColor12);
}
.wSelectTypeAndDiam.wCollapsed .wSelectTypeAndDiamItems {
    display: none;
}
.wSelectTypeAndDiamText {
    flex-grow: 1;
}
.wArrowLinkBC {
    display: none;
}
.wStickyFooterAdditionalMargin {
    height: 80px;
    display: none;
}
.wProductImgContainer {
    position: sticky;
    top: 20px;
    background-color: var(--wColor12);
    background-position: center;
    background-size: calc(var(--w622-340) * 0.9132);
    background-repeat: no-repeat;
    height: var(--w622-340);
    padding: var(--w40-20);
    row-gap: 8px;
    cursor: pointer;
}
.wProductThumbnail {
    width: 64px;
    height: 64px;
    background-color: var(--wColorWhite);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 1px solid var(--wColorBlack);
    opacity: 0.5;
    cursor: pointer;
}
.wProductThumbnail:hover {
    opacity: 1;
}
.wProductThumbnail.wActive {
    opacity: 1;
    border-width: 2px;
}
.wProductInfo {
    border: 1px solid var(--wColor15);
    background-color: var(--wColor15);
    row-gap: var(--wThinGap);
}
.wProductInfo>div {
    background-color: var(--wColorWhite);
    width: 100%;
    padding-left: var(--w40-20);
    padding-right: var(--w40-20);
}
#wProductPageH1 {
    margin-bottom: 20px;
}
.wRecFuel {
    row-gap: 10px;
}
.wFuelImg {
    width: 56px;
    height: 56px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.wPriceBuyButton {
    padding-top: 10px;
    padding-bottom: 10px;
    column-gap: var(--w30-20);
    row-gap: var(--w30-20);
    width: 100%;
    background: var(--wColorWhite);
    z-index: 2;
    flex-wrap: wrap;
}
.wBuyButton {
	text-align: center;
	height: 48px;
    max-width: 280px;
    min-width: 170px;
    flex-grow: 1;
	padding-left: 24px;
	padding-right: 24px;
	font-size: var(--w22-18);
}
.wBuyButton:before {
    content: url('../static_images/basket.svg');
    vertical-align: -50%;
    height: calc(var(--w22-18) * 1.246);
    /*width: 20px; /* mobile - 16.67 */
    margin-right: 12px; /* desktop - 5 */
}
.wAccessory {
    background-color: var(--wColorWhite);
    row-gap: 8px;
    padding: 7px;
    min-width: 143px;
    flex-grow: 1;
    cursor: pointer;
}
.wAccessory:hover {
 /*   background-color: var(--wColor12); */
}
.wAccessoryImgCheckBox {
    height: 48px;
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: center;
    background-size: contain;
}
.wAccessoryCheckBox {
    width: 18px;
    min-width: 18px;
    max-width: 18px;
    height: 18px;
    min-height: 18px;
    max-height: 18px;
    margin: 3px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: URL('../static_images/checkbox_unchecked.svg');
    background-size: contain;
}
.wAccessoryText {
    height: 28px;
    padding-right: 10px;
}
.wAccessoryContainerSingleAll {
    min-height: 102px;
    column-gap: 10px;
    row-gap: 10px;
}
.wAccessoryContainerSingleAll .wAccessory {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--wColor18);
    height: 102px;
    width: 146px;
}
.wAccessoryContainerSingleAll .wAccessory:hover, .wAccessoryContainerSingleAll .wAccessory.wActive {
    border: 2px solid var(--wColorBlack);
    padding: 6px;
}
.wAccessoryContainerGroup {
    min-height: 102px;
    border-radius: 6px;
    overflow: hidden;
    row-gap: 3px;
    column-gap: 3px;
    background-color: var(--wColor18);
    border: 1px solid var(--wColor18);
    padding: 1px;
}
.wAccessoryContainerGroup .wAccessory {
    height: 100px;
    width: 154px;
    margin: -1px;
    background-color: var(--wColorWhite);
}
.wAccessoryContainerGroup:hover, .wAccessoryContainerGroup.wActive {
    border: 2px solid var(--wColorBlack);
    padding: 0px;
}
.wAccessoryContainerGroup .wAccessory:last-child {
    width: 150px;
}
.wAccessoryContainerGroup .wAccessory:first-child {
    width: 150px;
}
.wAccessory.wActive .wAccessoryCheckBox {
    background-image: URL('../static_images/checkbox_checked.svg');
}
.wAccessory:not(.wActive):hover .wAccessoryCheckBox {
    background-image: URL('../static_images/checkbox_unchecked_hover.svg');
}
.wSelectContainerLength {
    width: 100%;
}
.wSelectLength {
    column-gap: 10px;
    padding: 10px 10px 10px 15px;
    cursor: pointer;
    min-height: 44px;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 112px;
    align-items: center;
    border: 1px solid var(--wColor18);
    flex-grow: 1;
    width: 100%;
    min-width: 125px;
}
.wSelectLength:hover {
    border: 2px solid var(--wColorBlack);
    padding: 9px 9px 9px 14px;
}
.wSelectLengthIcon {
    width: 24px;
    height: 24px;
    background: center no-repeat URL('../static_images/arrow_down.svg');
    background-size: 50%;
}
.wSelectLengthItems {
    position: absolute;
    transform: translate(-15px, calc(23px + 50%));
    background-color: var(--wColorWhite);
    border: 1px solid var(--wColor20);
    white-space: nowrap;
    z-index: 3;
    padding: 6px 0px;
    min-width: 125px;
    max-height: 255px;
    overflow: overlay;
}
.wSelectLengthItems::-webkit-scrollbar {
    width: 8px;
}
.wSelectLengthItems::-webkit-scrollbar-track {
    background: none;
}
.wSelectLengthItems::-webkit-scrollbar-thumb {
    background: var(--wColorBlack);
    border-radius: 8px;
}
.wSelectLengthItem {
    padding: 7px 26px 7px 18px;
    align-self: stretch;
}
.wSelectLengthItem:hover {
    background-color: var(--wColor12);
}
.wSelectLengthText {
    flex-grow: 1;
}
.wSwitcherDiamButton {
    padding: 10px;
    width: 100px;
    min-height: 44px;
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--wColorWhite);
    border-left: 1px solid var(--wColor18);
    border-top: 1px solid var(--wColor18);
    border-bottom: 1px solid var(--wColor18);
    overflow: hidden;
    flex-grow: 1;
}
.wSwitcherDiamButton:not(.wActive) {
    cursor: pointer;
}
.wSwitcherDiamButton.wActive {
    cursor: default;
}
.wSwitcherDiamButton:not(.wActive):hover {
    background-color: var(--wColor12);
}
.wSwitcherDiamButton:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.wSwitcherDiamButton:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-right: 1px solid var(--wColor18);
}
.wSwitcherDiamButton.wActive {
    border: 2px solid var(--wColorBlack);
    padding: 9px;
}
.wSwitcherDiamButton.wActive+div.wSwitcherDiamButton {
    border-left: none;
    padding-left: 11px;
}
.wLengthAndDiamSelect {
    flex-direction: row-reverse;
    justify-content: flex-end;
    row-gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.wSpecsGrid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.wSpecsGrid>div {
    min-height: var(--w32-28);
    align-self: stretch;
    align-items: center;
    border-bottom: 1px solid var(--wColor17);
}
.wSpecsGrid>div:nth-child(-n + 2) {
    border-top: 1px solid var(--wColor17);
}
.wFileLinkPDF {
    font-weight: 500;
    line-height: 150%;
    font-size: var(--w16-13);
}
.wFileLinkPDF:before {
    content: url('../static_images/pdf_icon.svg');
    vertical-align: -50%;
    /*height: calc(var(--w16-13) * 1.246);*/
    margin-right: 8px;
    display: flex;
    align-self: stretch;
    align-items: center;
}
.wStaticPageLinkWithIcon {
    font-weight: 500;
    line-height: 150%;
    font-size: var(--w16-13);
}
.wStaticPageLinkWithIcon:before {
    content: url('../static_images/link_icon.svg');
    vertical-align: -50%;
    /*height: calc(var(--w16-13) * 1.246);*/
    margin-right: 8px;
    display: flex;
    align-self: stretch;
    align-items: center;
}
.wKitList li {
    margin-left: 24px;
}
.wSliderLeftButton, .wSliderRightButton {
    width: var(--w56-42);
    height: var(--w72-54);
    border-width: 1px;
    border-style: solid;
    border-color: var(--wColor17);
    z-index: 1;
    background-color: var(--wColorWhite);
    position: relative;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-position-y: center;
    bottom: 10px;
}
.wSliderLeftButton.wActive, .wSliderRightButton.wActive {
    cursor: pointer;
    background-color: var(--wColor10);
}
.wSliderLeftButton {
    border-top-right-radius: 36px;
    border-bottom-right-radius: 36px;
    background-image: URL('../static_images/arrow_left.svg');
    margin-right: calc(var(--w56-42) * -1);
    background-position-x: var(--w08-05);
}
.wSliderRightButton {
    border-top-left-radius: 36px;
    border-bottom-left-radius: 36px;
    background-image: URL('../static_images/arrow_right2.svg');
    margin-left: calc(var(--w56-42) * -1);
    background-position-x: calc(100% - var(--w08-05));
}
.wSliderLeftButton:hover.wActive, .wSliderRightButton:hover.wActive {
    background-color: var(--wColor12);
}
#wSlidesContainer {
    transition-duration: 0.3s;
}
.wWholePopupBlock {
    flex-direction: column; justify-content: space-between; align-items: flex-start;
    width: 960px; height: 800px;
    max-width: var(--wMaxContainerWidth); max-height: 100vh;
    overflow: overlay;
}
.wPopupHeaderBlock {
    flex-direction: row; align-self: stretch; justify-content: space-between; align-items: center;
    width: 100%;
    column-gap: var(--w20-10); padding: var(--w20-10);
    border-bottom: 1px solid var(--wColor18);
}
.wPopupFooterBlock {
    flex-direction: row; justify-content: center; align-items: center;
    width: 100%;
    padding: var(--w20-10);
}
#popupButtonsBlock {
    background-color: var(--wColor10);
    flex-direction: row; justify-content: center; align-items: center;
    flex-wrap: wrap;
    border-radius: 6px;
    column-gap: var(--w20-10); row-gap: var(--w20-10);
    width: 100%; height: 100%; padding: var(--w20-10);
}
#popupBodyBlock {
    flex-direction: column;
    width: 100%;  height: 100%; padding: 0px var(--w20-10);
    overflow: overlay;
}
.wPopupBasketProductCard {
    flex-direction: column;
    width: 100%;
    column-gap: var(--w20-10); row-gap: 10px;
    padding: 10px 0px;
    border-bottom: 1px solid var(--wColor17);
}
.wPopupBasketProductCardTop {
    flex-direction: row; justify-content: space-between; align-items: center;
    width: 100%;
    column-gap: var(--w20-10); row-gap: 10px;
}
.wPBPCImage {
    justify-content: center; align-items: center;
    width: 120px; min-width: 120px;
    height: 120px; min-height: 120px;
    background-color: var(--wColor12);
    background-position: center; background-size: contain; background-repeat: no-repeat;
}
.wPBPCCentral {
    flex-direction: row; justify-content: space-between; align-items: center; align-self: stretch;
    width: 320px;
    flex-grow: 1;
    column-gap: 10px; row-gap: var(--w20-10);
}
.wPBPCNameAndDescription {
    flex-direction: column; justify-content: center; align-items: flex-start;
    height: 100%;
    row-gap: var(--w08-05);
}
.wPBPCStepperBlock {
    flex-direction: row; justify-content: center; align-items: center;
}
.wPBPCPriceBlock {
    flex-direction: column; justify-content: center; align-items: flex-end; align-self: stretch;
    min-width: 134px;
}
.wPBPCDelete {
    justify-content: center; align-items: center; align-self: stretch;
}
.wAmountInput {
    width: 64px; height: 40px;
    border: 1px solid var(--wColor18);
    -webkit-appearance: none;
    appearance: none;
    color: var(--wColorBlack);
    text-align: center;
}
.wAmountInput::-webkit-outer-spin-button, .wAmountInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
}
.wPBPCRightSide {
    flex-direction: row-reverse; justify-content: flex-start; align-items: center; align-self: stretch;
    column-gap: var(--w20-10);
    flex-wrap: wrap;
}
.wHideableWord {
    display: inline;
    padding-left: 8px;
}
.wCheckoutFullBlock {
    flex-direction: row; justify-content: center;
    flex-wrap: wrap;
    column-gap: var(--w40-20); row-gap: var(--w40-20);
    width: 100%;
}
.wCheckoutLeft {
    flex-direction: column;
    width: 640px;
    flex-grow: 1;
    border-radius: var(--w24-12);
    border: 1px solid var(--wColor18);
    overflow: hidden;
}
.wCheckoutRight {
    position: sticky;
    top: 20px;
    flex-direction: column;
    max-width: 460px;
    flex-grow: 1;
    padding: var(--w40-20);
    row-gap: var(--w20-10);
    border-radius: var(--w24-12);
    overflow: hidden;
    background-color: var(--wColor10);
}
.wCheckoutUserBlock {
    flex-direction: column;
    padding: var(--w40-20);
    row-gap: var(--w20-10); column-gap: var(--w20-10);
    width: 100%;
    border-bottom: 1px solid var(--wColor18);
}
.wCheckoutProductsBlock {
    flex-direction: column;
    padding: var(--w20-10) var(--w40-20) var(--w40-20) var(--w40-20);
    width: 100%;
}
.wCheckoutForm {
    display: flex; flex-direction: row;
    flex-wrap: wrap;
    column-gap: 10px; row-gap: 20px;
    width: 100%;
}
.wCheckoutInputContainer {
    flex-direction: column;
    min-width: 260px;
    flex-grow: 1;
}
.wCheckoutInputLabel {
    font-size: 15px; line-height: 150%; font-weight: 700;
    margin-bottom: 5px;
}
.wCheckoutInput {
    height: 40px;
    width: 100%;
    border-radius: 6px; border: 1px solid var(--wColor18);
    padding: 3px 8px;
    color: var(--wColorBlack);
    font-size: 17px; font-weight: 500;
}
.orderUserComment {
    width: 100%;
    min-height: 80px;
}
.wCheckoutProductCard {
    flex-direction: column;
    width: 100%;
    column-gap: var(--w20-10); row-gap: 10px;
    padding-top: var(--w20-10);
}
.wCheckoutProductCard:not(:last-child) {
    border-bottom: 1px solid var(--wColor17);
    padding-bottom: var(--w20-10);
}
.wCheckoutProductCardTop {
    flex-direction: row; justify-content: space-between; align-items: center;
    width: 100%;
    column-gap: var(--w20-10); row-gap: 10px;
}
.wCPCImage {
    justify-content: center; align-items: center;
    width: 120px; min-width: 120px;
    height: 120px; min-height: 120px;
    background-color: var(--wColor12);
    background-position: center; background-size: contain; background-repeat: no-repeat;
}
.wCPCCentral {
    flex-direction: row; justify-content: space-between; align-items: center; align-self: stretch;
    width: 320px;
    flex-grow: 1;
    column-gap: 10px; row-gap: var(--w20-10);
}
.wCPCNameAndDescription {
    flex-direction: column; justify-content: center; align-items: flex-start;
    height: 100%;
    row-gap: var(--w08-05);
    margin-right: var(--w40-20);
}
.wCPCPriceBlock {
    flex-direction: column; justify-content: center; align-items: flex-end; align-self: stretch;
    min-width: 150px;
}
.wCPCRightSide {
    flex-direction: row; justify-content: flex-end; align-items: center;
    column-gap: var(--w40-20);
    row-gap: var(--w20-15);
    flex-wrap: wrap;
}
.wCheckoutSumBlock {
    flex-direction: column;
    width: 100%;
    padding: var(--w20-10) 0px;
    row-gap: var(--w20-10);
}
.wCheckoutFullSum {
    flex-direction: row; justify-content: space-between; align-items: center;
    width: 100%;
    padding: var(--w20-10) 0px;
    column-gap: 20px;
    border-top: 1px solid var(--wColor18);
    border-bottom: 1px solid var(--wColor18);
}
.wSuccessFullBlock {
    flex-direction: column;
    width: 100%;
    border-radius: var(--w24-12);
    border: 1px solid var(--wColor18);
    overflow: hidden;
    margin-bottom: var(--w20-10);
}
.wSuccessTopBlock {
    flex-direction: column;
    padding: var(--w40-20) var(--w40-20) var(--w20-15) var(--w40-20);
    row-gap: var(--w20-10); column-gap: var(--w20-10);
    width: 100%;
    border-bottom: 1px solid var(--wColor18);
}
.wSuccessBottomBlock {
    flex-direction: column;
    padding: var(--w40-20) var(--w40-20) var(--w40-20) var(--w40-20);
    width: 100%;
    row-gap: 5px;
}
.wSuccessProductsBlock {
    flex-direction: column;
    width: 100%;
}
.wSuccessProductCard {
    flex-direction: column;
    width: 100%;
    column-gap: var(--w20-15); row-gap: 10px;
    padding-top: var(--w20-15);
}
.wSuccessProductCard:not(:last-child) {
    border-bottom: 1px solid var(--wColor17);
    padding-bottom: var(--w20-15);
}
.wSuccessProductCardTop {
    flex-direction: row; justify-content: space-between; align-items: center;
    width: 100%;
    column-gap: var(--w20-10); row-gap: 10px;
}
.wSPCImage {
    justify-content: center; align-items: center;
    width: 120px; min-width: 120px;
    height: 120px; min-height: 120px;
    background-color: var(--wColor12);
    background-position: center; background-size: contain; background-repeat: no-repeat;
}
.wSPCCentral {
    flex-direction: row; justify-content: space-between; align-items: center; align-self: stretch;
    width: 320px;
    flex-grow: 1;
    column-gap: 10px; row-gap: var(--w20-10);
}
.wSPCNameAndDescription {
    flex-direction: column; justify-content: center; align-items: flex-start;
    height: 100%;
    row-gap: var(--w08-05);
    margin-right: var(--w20-10);
}
.wSPCPriceBlock {
    flex-direction: column; justify-content: center; align-items: flex-end; align-self: stretch;
    min-width: 150px;
}
.wSPCRightSide {
    flex-direction: row; justify-content: flex-end; align-items: center;
    column-gap: var(--w40-20);
    row-gap: var(--w20-15);
    flex-wrap: wrap;
}
.wAboutProductBlock p {
    font-weight: 500;
    line-height: 140%;
    font-size: var(--w16-13);
}
.wLinkContents {
    display: contents;
}




.wOPRC {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center; align-items: center; text-align: center;
    padding: 1px 3px;
}
.wOPRC:nth-child(1) {
    width: 35px;
}
.wOPRC:nth-child(2) {
    width: 300px;
    flex-grow: 1;
    justify-content: flex-start;
}
.wOPRC:nth-child(3) {
    width: 80px;
}
.wOPRC:nth-child(4) {
    width: 140px;
}
.wOPRC:nth-child(5) {
    width: 140px;
}
.wOPRC:nth-child(6) {
    width: 140px;
}
.wOrderClientComment {
    width: 100%;
    border: 1px solid var(--wColor17);
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
}
.wOrderRowDetail {
    flex-direction: column;
    width: 100%;
    row-gap: 5px;
    padding: 10px;
}
.wSettingTable {
    flex-direction: column;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--wColor20);
    background-color: var(--wColor20);
    row-gap: 1px;
}
.wSettingTableRow {
    flex-wrap: wrap;
    width: 100%;
    column-gap: 1px; row-gap: 1px;
}
.wSettingTableRow:first-child {
    font-weight: 600;
}
.wSettingTableCell {
    flex-wrap: wrap;
    align-items: center;
    align-self: stretch;
    width: 100px;
    flex-grow: 1;
    background-color: var(--wColorWhite);
    padding: 5px 10px;
    column-gap: 10px; row-gap: 10px;
}
.wSettingTableCell:first-child {
    flex-grow: 5;
}
.wSettingTableCell:nth-child(2) {
    flex-grow: 5;
}
.wSettingTableCell:nth-child(3) {
    flex-grow: 1;
}
.wSettingTableCell svg {
    width: 24px;
    height: 24px;
}
.wProductTable {
    flex-direction: column;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--wColor20);
    background-color: var(--wColor20);
    row-gap: 1px;
}
.wProductTableRow {
    flex-wrap: wrap;
    width: 100%;
    column-gap: 1px; row-gap: 1px;
}
.wProductTableRow:first-child {
    font-weight: 600;
}
.wProductTableCell {
    flex-wrap: wrap;
    align-items: center;
    align-self: stretch;
    width: 100px;
    flex-grow: 1;
    background-color: var(--wColorWhite);
    padding: 5px 10px;
    column-gap: 10px; row-gap: 10px;
    transition-duration: 0.2s;
}
.wProductTableCell:first-child {
    flex-grow: 5;
}
.wProductTableCell:nth-child(2) {
    flex-grow: 1;
}
.wProductTableCell:nth-child(3) {
    flex-grow: 1;
}
.wProductTableCell:nth-child(4) {
    flex-grow: 1;
}
.wProductTableCell:nth-child(5) {
    flex-grow: 1.5;
}
.wProductTableCell svg {
    width: 24px;
    height: 24px;
}
button>svg {
    fill: var(--bs-btn-color);
    width: 24px;
    height: 24px;
}
.wBtnTextIcon {
    min-width: 40px;
    min-height: 40px;
    font-size: 120%;
    line-height: 120%;
    font-weight: 500;
    padding: 5px;
}
.wBtnSvgIcon {
    min-width: 40px;
    min-height: 40px;
    padding: 5px;
}
.wBtnSvgIcon.wBtnSvgIconSmall {
    min-width: 32px; width: 32px;
    min-height: 32px; height: 32px;
    padding: 1px;
    justify-content: center; align-items: center;
}
button:hover>svg {
    fill: var(--bs-btn-hover-color);
}
.wHasPriorityDelta .wProductTableCell, .wHasPriorityDelta .wProductTableCell input {
    /*background-color: #ddeeff;*/
    color: blue;
}
.wCheckoutInput::placeholder {
    color: #ccc;
    opacity: 0.45;
}
.wCheckoutInput.wGreen {
    background-color: #99ffbb;
}
.wOrderRowContainer {
    flex-direction: column;
    overflow: hidden;
    width: 100%;
    max-height: 1500px;
    transition: 0.25s;
}
.wOrderRowContainer.wCollapsed {
    max-height: 66px;
}
.wOrderRowSummary {
    flex-direction: row;
    width: 100%;
    min-height: 66px;
    flex-wrap: wrap;
    font-weight: 600;
}
.wOrderRowSummary:not(.dummyHeader) {
    cursor: pointer;
}
.wORSC {
    justify-content: center; align-items: center; text-align: center;
    flex-wrap: wrap;
    flex-grow: 1;
    align-self: stretch;
    column-gap: 20px;
    padding: 3px 9px 3px 9px;
    border-top: 1px solid var(--wColor20);
}
.wORSC:nth-child(1) {
    justify-content: flex-start;
    text-align: left;
    width: 120px;
    min-width: 170px;
}
.wORSC:nth-child(2) {
    width: 100px;
    min-width: 150px;
}
.wORSC:nth-child(3) {
    justify-content: flex-start;
    text-align: left;
    width: 200px;
    min-width: 300px;
    flex-grow: 2;
}
.wORSC:nth-child(4) {
    justify-content: flex-start;
    text-align: left;
    width: 150px;
    min-width: 240px;
    flex-grow: 2;
}
.wORSC:nth-child(5) {
    width: 50px;
    min-width: 100px;
}
.wORSC:nth-child(6) {
    justify-content: flex-start;
    text-align: left;
    flex-grow: 2;
    width: 100px;
    min-width: 200px;
}
.wORSC:nth-child(7) {
    width: 50px;
    min-width: 110px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.wORSC:not(:first-child) {
    border-left: 1px solid var(--wColor17);
}
.wOrderRowProducts {
    flex-direction: column;
    width: 100%;
}
.wOrderProductRow {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 5px;
}
.wOrderAdminComment {
    min-height: 90px;
    width: 100%;
    border: 1px solid var(--wColor17);
    border-radius: 3px;
    padding: 2px 5px 2px 5px;
    color: var(--wColorBlack);
    transition: 350ms;
}
.wFixedBottomButtonsContainer {
    width: min(var(--wMaxContainerWidth), var(--wNormalContainerWidth));
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 15px;
    row-gap: 15px;
    padding: 15px;
    position: sticky;
    bottom: 0px;
    left: 50vw;
    background-color: var(--wColorWhite);
    opacity: 0.9;
}
.wSelect {
    column-gap: 10px;
    padding: 3px 8px;
    cursor: pointer;
    height: 40px;
    white-space: nowrap;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 112px;
    align-items: center;
    border: 1px solid var(--wColor18);
    flex-grow: 1;
    width: 100%;
    min-width: 125px;
}
.wSelect:hover {
    border: 2px solid var(--wColorBlack);
    padding: 2px 7px;
}
.wSelectIcon {
    width: 24px;
    height: 24px;
    background: center no-repeat URL('../static_images/arrow_down.svg');
    background-size: 50%;
}
.wSelectItems {
    position: absolute;
    transform: translate(-8px, calc(20px + 50%));
    background-color: var(--wColorWhite);
    border: 1px solid var(--wColor20);
    white-space: nowrap;
    z-index: 3;
    padding: 3px 0px;
    min-width: 125px;
    max-height: 240px;
    overflow: overlay;
}
.wSelectItem {
    padding: 3px 8px;
    align-self: stretch;
}
.wSelectItem:hover {
    background-color: var(--wColor12);
}
.wSelect.wCollapsed .wSelectItems {
    display: none;
}
.wSelectText {
    flex-grow: 1;
}
#pricesTable .wProductTableCell {
    flex-grow: 1;
    width: 100px;
    justify-content: center;
    row-gap: 5px;
}
#pricesTable .wCheckoutInput {
    text-align: center;
    padding-right: 5px; padding-left: 5px;
}
#pricesTable input::-webkit-outer-spin-button,
#pricesTable input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
#pricesTable input[type=number] {
  -moz-appearance: textfield;
}
.priceTableInnerDiv {
    align-items: center;
    column-gap: 5px;
}
#productChars .wProductTableCell, #productKit .wProductTableCell, #productFiles .wProductTableCell {
    /*flex-grow: 0; */
    width: 300px;
    row-gap: 5px;
}
#productChars.wProductTable, #productKit.wProductTable, #productFiles.wProductTable {
    width: initial;
}
.wImgEditContainer {
    width: 290px;
    height: 290px;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--wColor20);
}
.wImgEditContainer button {
    margin: 1px;
}
.wProductTableRow.wDeleted input, .wProductTableRow.wDeleted a {
    text-decoration: line-through;
    background-color: var(--wColor12);
}
.wImgEditContainer.wDeleted {
    opacity: 0.4;
}
.wImgEditContainer.wDeleted button.dummyDeleteButton svg, .dummyProductDataRow.wDeleted button.dummyDeleteButton svg {
    fill: blue;
}
.wImgEditContainer.wHasPriorityDelta {
    border-color: blue;
}
.wSettingTableRow.wGreen .wSettingTableCell {
    background-color: #99ffbb;
}
.wProductTableRow.wDeactivated .wProductTableCell {
    background-color: #f6f3f0;
}
.wProductTableRow.wGreen .wProductTableCell {
    background-color: #99ffbb;
}
#productPriceContainer {
    background-color: #ffef54;
    border-radius: 6px;
    padding: 10px;
}
.wSelectOverlay {
    display: none;
    background: rgba(0, 0, 0, 0.32);
    position: fixed;
    width: 200vw;
    height: 200vh;
    left: -50vw;
    top: -50vh;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    z-index: 17;
}
.wFixedSelectItemsPopup {
    position: fixed;
    height: 40vh;
    max-height: 40vh;
    bottom: 0px;
    width: 100vw;
    background-color: var(--wColorWhite);
    border-radius: 16px 16px 0px 0px;
    overflow: hidden;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.wPopupHeaderBlock { /* Суто для цієї сторінки */
    padding: 0px 4px 0px 16px;
}
.wFixedSelectItemsListContainer {
    width: 100%;
    height: 100px; flex-grow: 1;
    padding: 6px;
}
.wFixedSelectItemsList {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: scroll;
}
.wFixedSelectItemsList::-webkit-scrollbar {
    width: 8px;
}
.wFixedSelectItemsList::-webkit-scrollbar-track {
    background: none;
}
.wFixedSelectItemsList::-webkit-scrollbar-thumb {
    background: var(--wColorBlack);
    border-radius: 8px;
}
.wFixedSelectItemsListItem {
    padding: 8px 16px;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 16px;
}
.wFixedSelectItemsListItem.wSelected, .wFixedSelectItemsListItem:hover, .wFixedSelectItemsListItem:active {
    background-color: var(--wColor12);
}
.wSelectLength.wCollapsed .wSelectLengthItems { /** "По жизни" flex, при наличии collapsed - none, а при размере экрана меньше 721 всегда none, хоть collapsed хоть нет. */
    display: none;
}
.wSPCDescription1 { display: flex; }
.wSPCDescription2 { display: none; }
.wCPCDescription1 { display: flex; }
.wCPCDescription2 { display: none; }
.wPBPCDescription1 { display: flex; }
.wPBPCDescription2 { display: none; }
@media (max-width: 1170px) {
    .wLengthAndDiamSelect>div {
        width: 100%;
    }
    .wPriceBuyButton {
        padding-right: 20px;
        padding-left: 20px;
        position: fixed;
        bottom: 0px;
        left: 0px;
        width: 100vw;
        box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
        min-height: 60px;
        justify-content: center;
    }
}
@media (max-width: 920px) {
    .wOpenCatButton { width: 100%; }
    .wGoCatButton { display: none; }
}
@media (max-width: 920px) and (min-width: 721px) {
    #wISOImages { display: none; }
}
@media (max-width: 720px) { /* (721->699.37 720->698.4 360->349.2) */
    .wMainPage14Block { display: none; }
    #wHeadTelAndText { display: none; }
    .wGoCatButton { display: none; }
    #wLogoImg { height: 36px; }
    .wBasketIcon { display: none; }
    .wSelectLength .wSelectLengthItems { display: none; }
    .wSelectLength:not(.wCollapsed) .wSelectOverlay { display: flex; } /** "По жизни" none, но при размере экрана менее 721 если не collapsed - flex. */
    .wRectangle12 {
        max-width: var(--wMaxContainerWidth);
        min-height: var(--wMaxContainerWidth);
    }
    .wRectangle12.wHeroRectangle {
        min-height: calc(var(--wMaxContainerWidth) * 0.8);
    }
    .wSquare14 {
        max-width: calc(var(--wMaxContainerWidth) / 2 - var(--wThinGap2) * 1 / 2);
        max-height: calc(var(--wMaxContainerWidth) / 2 - var(--wThinGap2) * 1 / 2);
    }
    .wWidth12 {
        width: calc(var(--wMaxContainerWidth) - 10px);
    }
    .wRectangle13 {
        width: calc(var(--wMaxContainerWidth) / 2 - var(--wThinGap) * 6 / 2); /* 6 вдвічі більше ніж треба, тому що під час масштабування, бордер збільшується, це робить браузер. Тому відстань збільшено і встановлено flex-grow. */
        /* height auto, responsible */
    }
    .wRectangle13.wTopicCard {
        width: calc(var(--wMaxContainerWidth) - var(--wThinGap) * 4); /* Хз, може взагалі це не обов'язково, коли flex-grow: 1. Втім, нехай буде. */
    }
    .wRectangle14 {
        width: calc(var(--wMaxContainerWidth) / 2 - var(--wThinGap2) * 6 / 2);
        min-height: calc(var(--wMaxContainerWidth) / 2 - var(--wThinGap2) * 6 / 2);
    }
    .wRectangle14Strict {
        background-color: var(--wColorWhite);
        width: calc(var(--wMaxContainerWidth) / 2 - 1px);
        min-width: calc(var(--wMaxContainerWidth) / 2 - 1px);
        min-height: calc(var(--wMaxContainerWidth) / 2 - 1px);
    }
    .wOpenCatButton {
        height: 44px;
    }
    .wCat12BlockH2 {
        line-height: 100%;
    }
    .wProductImgContainer {
        position: initial;
        top: initial;
    }
    .wFooterContacts, .wFooterLogo {
        width: 100%;
    }
    .wFooterAllContacts {
        flex-direction: row;
    }
    .wSelectContainerType {
        display: flex;
        width: 40%;
        flex-grow: 1;
    }
    .wSelectContainerDiam {
        width: 40%;
        flex-grow: 1;
    }
    .wTextLinkBB {
        display: none;
    }
    .wBreadCrumbsDivider {
        display: none;
    }
    .wArrowLinkBC {
        display: initial;
    }
    .wCatMenu {
        display: none;
    }
    .wCatHeaderBlock2 {
        padding-left: 8px;
        padding-right: 8px;
    }
    .wSelectTypeAndDiam {
        flex-grow: 1;
    }
    .wPBPCDescription1 { display: none; }
    .wPBPCDescription2 { display: flex; }
    .wCPCDescription1 { display: none; }
    .wCPCDescription2 { display: flex; }
    .wSPCDescription1 { display: none; }
    .wSPCDescription2 { display: flex; }
    #popupWindow {
        width: 100vw; height: 100%;
        transform: translate(-50vw, -50vh);
        border-radius: 0px;
    }
    .wWholePopupBlock {
        width: 100%;
        height: 100%;
    }
    .wPopupFooterBlock:not(.dummyPhotoSliderFooter) {
        padding: initial;
        position: fixed;
        bottom: 0px;
        box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
    }
    #popupBodyBlock {
        padding-bottom: 100px;
    }
    #popupButtonsBlock {
        border-radius: 0px;
    }
    .wHideableWord {
        display: none;
    }
}
@media (max-width: 450px) {
    #wISOImages { display: none; }
}
@media (max-width: 260px) {
    .wOpenCatButton:after { display: none; }
}