.tax-product_brand .brand-description{overflow:hidden;zoom:1}.tax-product_brand .brand-description img.brand-thumbnail{width:25%;float:right}.tax-product_brand .brand-description .text{width:72%;float:left}.widget_brand_description img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0 0 1em}ul.brand-thumbnails{margin-left:0;margin-bottom:0;clear:both;list-style:none}ul.brand-thumbnails:before{clear:both;content:"";display:table}ul.brand-thumbnails:after{clear:both;content:"";display:table}ul.brand-thumbnails li{float:left;margin:0 3.8% 1em 0;padding:0;position:relative;width:22.05%}ul.brand-thumbnails.fluid-columns li{width:auto}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:both}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:0}ul.brand-thumbnails.columns-1 li{width:100%;margin-right:0}ul.brand-thumbnails.columns-2 li{width:48%}ul.brand-thumbnails.columns-3 li{width:30.75%}ul.brand-thumbnails.columns-5 li{width:16.95%}ul.brand-thumbnails.columns-6 li{width:13.5%}.brand-thumbnails li img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0}@media screen and (max-width:768px){ul.brand-thumbnails:not(.fluid-columns) li{width:48%!important}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:none}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:3.8%}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd){clear:both}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even){margin-right:0}}.brand-thumbnails-description li{text-align:center}.brand-thumbnails-description li .term-thumbnail img{display:inline}.brand-thumbnails-description li .term-description{margin-top:1em;text-align:left}#brands_a_z h3:target{text-decoration:underline}ul.brands_index{list-style:none outside;overflow:hidden;zoom:1}ul.brands_index li{float:left;margin:0 2px 2px 0}ul.brands_index li a,ul.brands_index li span{border:1px solid #ccc;padding:6px;line-height:1em;float:left;text-decoration:none}ul.brands_index li span{border-color:#eee;color:#ddd}ul.brands_index li a:hover{border-width:2px;padding:5px;text-decoration:none}ul.brands_index li a.active{border-width:2px;padding:5px}div#brands_a_z a.top{border:1px solid #ccc;padding:4px;line-height:1em;float:right;text-decoration:none;font-size:.8em}.hidden {
display: none !important;
}* {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent !important;
}
a {
text-decoration: none;
color: inherit;
display: inline-block;
cursor: pointer;
}
img {
max-width: 100%;
}
html {
scroll-behavior: smooth;
}
input,
textarea {
outline: none;
border: 0;
background: transparent;
}
button,
select {
border: none;
cursor: pointer;
background: transparent;
outline: 0;
}
address {
font-style: normal;
}
ul,
ol,
dl {
list-style: none;
padding: 0;
margin: 0;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
font-weight: 500;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
}
.checkout-inline-error-message {
display: none;
}@font-face {
font-family: 'Craftwork Grotesk';
font-display: swap;
src: local('CraftworkGrotesk-Heavy'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Heavy.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Heavy.woff) format('woff'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Heavy.ttf) format('ttf');
font-weight: 900;
}
@font-face {
font-family: 'Craftwork Grotesk';
font-display: swap;
src: local('Craftwork Grotesk Bold'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Bold.woff) format('woff'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Bold.ttf) format('ttf');
font-weight: 700;
}
@font-face {
font-family: 'Craftwork Grotesk';
font-display: swap;
src: local('Craftwork Grotesk SemiBold'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.woff) format('woff'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-SemiBold.ttf) format('ttf');
font-weight: 600;
}
@font-face {
font-family: 'Craftwork Grotesk';
font-display: swap;
src: local('Craftwork Grotesk Medium'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Medium.woff) format('woff'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Medium.ttf) format('ttf');
font-weight: 500;
}
@font-face {
font-family: 'Craftwork Grotesk';
font-display: swap;
src: local('Craftwork Grotesk Regular'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Regular.woff) format('woff'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/craftwork/CraftworkGrotesk-Regular.ttf) format('ttf');
font-weight: 400;
} @font-face {
font-family: 'Benzin';
font-display: swap;
src: local('Benzin Regular'), local('Benzin-Regular'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/benzin/Benzin-Regular.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/benzin/Benzin-Regular.woff) format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Benzin';
font-display: swap;
src: local('Benzin Medium'), local('Benzin-Medium'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/benzin/Benzin-Medium.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/benzin/Benzin-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Benzin';
font-display: swap;
src: local('Benzin Semibold'), local('Benzin-Semibold'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/benzin/Benzin-Semibold.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/benzin/Benzin-Semibold.woff) format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Benzin';
font-display: swap;
src: local('Benzin Bold'), local('Benzin-Bold'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/benzin/Benzin-Bold.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/benzin/Benzin-Bold.woff) format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Benzin';
font-display: swap;
src: local('Benzin ExtraBold'), local('Benzin-ExtraBold'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/benzin/Benzin-ExtraBold.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/benzin/Benzin-ExtraBold.woff) format('woff');
font-weight: 800;
font-style: normal;
} @font-face {
font-family: 'Involve';
font-display: swap;
src: local('Involve Regular'), local('Involve-Regular'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/involve/Involve-Regular.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/involve/Involve-Regular.woff) format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Involve';
font-display: swap;
src: local('Involve Medium'), local('Involve-Medium'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/involve/Involve-Medium.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/involve/Involve-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Involve';
font-display: swap;
src: local('Involve SemiBold'), local('Involve-SemiBold'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/involve/Involve-SemiBold.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/involve/Involve-SemiBold.woff) format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Involve';
font-display: swap;
src: local('Involve Bold'), local('Involve-Bold'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/involve/Involve-Bold.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/involve/Involve-Bold.woff) format('woff');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Abel';
src: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/Abel/Abel-Regular.ttf);
font-weight: 400;
} @font-face {
font-family: 'DIN 2014 Rounded';
src: local('DIN 2014 Rounded Demi'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/din-2014/din-2014-rounded-demi.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/din-2014/din-2014-rounded-demi.woff) format('woff'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/din-2014/din-2014-rounded-demi.ttf) format('ttf');
font-weight: 600;
}
@font-face {
font-family: 'DIN 2014 Rounded';
src: local('DIN 2014 Rounded Regular'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/din-2014/din-2014-rounded-regular.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/din-2014/din-2014-rounded-regular.woff) format('woff'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/din-2014/din-2014-rounded-regular.ttf) format('ttf');
font-weight: 400;
}  @font-face {
font-family: 'Roboto';
src: local('Roboto Medium'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/roboto/Roboto-Medium.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/roboto/Roboto-Medium.woff) format('woff'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/roboto/roboto-medium.ttf) format('ttf');
font-weight: 500;
}
@font-face {
font-family: 'Roboto';
src: local('Roboto Regular'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/roboto/Roboto-Regular.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/roboto/Roboto-Regular.woff) format('woff'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/roboto/roboto-medium.ttf) format('ttf');
font-weight: 400;
}  @font-face {
font-family: 'Gilroy';
src: local('Gilroy Medium'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/gilroy/Gilroy-Medium.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/gilroy/Gilroy-Medium.woff) format('woff'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/gilroy/Gilroy-Medium.ttf) format('ttf');
font-weight: 500;
}
@font-face {
font-family: 'Gilroy';
src: local('Gilroy Medium'), url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/gilroy/Gilroy-Semibold.woff2) format('woff2'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/gilroy/Gilroy-Semibold.woff) format('woff'),
url(//cosmopet.ae/wp-content/themes/cosmopet/assets/fonts/gilroy/Gilroy-Semibold.ttf) format('ttf');
font-weight: 600;
} * {
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent !important;
}
a {
text-decoration: none;
color: inherit;
display: inline-block;
cursor: pointer;
}
img {
max-width: 100%;
}
span,
label {
display: inline-block;
}
html {
scroll-behavior: smooth;
}
input,
textarea {
outline: none;
border: 0;
background: transparent;
}
button,
select {
border: none;
cursor: pointer;
background: transparent;
outline: 0;
font-family: var(--font-family);
}
address {
font-style: normal;
}
ul,
ol,
dl {
list-style: none;
padding: 0;
margin: 0;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
font-weight: 500;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
}
:root { --radial: radial-gradient(
261.43% 263.03% at 124% -28.000000000000004%,
rgb(15, 88, 129),
rgb(30, 164, 156) 36.979%,
rgb(118, 206, 117) 66.667%,
rgb(236, 243, 159) 91.146%
);
--accent-1: radial-gradient(142.43% 141.42% at 100% 0%, #188892 0%, #1ea49c 45%, #76ce75 90%, #bbe38d 100%);
--accent-2: radial-gradient(
2700.48% 141.42% at 100% 0%,
rgb(122, 217, 231),
rgb(126, 231, 225) 25%,
rgb(181, 228, 180) 80%,
rgb(215, 238, 170) 100%
);
--accent-3: linear-gradient(6deg, rgb(244, 66, 66) 7.584%, rgb(86, 158, 240) 72.371%);
--linear: linear-gradient(-7.39deg, rgb(244, 241, 240) 23.643%, rgba(244, 241, 240, 0.3) 59.827%);
--btn-bg: radial-gradient(100% 174.56% at 100% 0%, #7ad9e7 0%, #7ee7e1 25%, #b5e4b4 80%, #d7eeaa 100%);
--font-family: 'Craftwork Grotesk', sans-serif;
--font-family-accent: 'Craftwork Grotesk', sans-serif;
--second-family: 'DIN 2014 Rounded', sans-serif;
--third-family: 'Roboto', sans-serif;
--main_white: #ffffff;
--creme-white: #f4f1f0;
--grey-f5: #f5f5f5;
--grey-f2: #f2f2f2;
--main_black: #121212;
--grey-black: #121212;
--bg-light-grey: #f5f5f5;
--interface_title: #333333;
--interface_hover: #666666;
--orange_80: #ffdf99;
--green_90: #d9ffcc;
--green-dark: #76ce75;
--violet_90: #e7caff;
--blue_90: #cce2ff;
--primary-blue: #569EF0;
--background: #f4f1f0;
--placeholder: #999999; --font-abel: 'Abel', serif;
--text-black: #121212;
--text-dark: #2b2b3b;
--text-red: #fa0505;
--text-green: #2ed15d;
--text-0: #000;
--background-white: #fff;
--background-black: #121212;
--background-grey: #f2f2f2;
--background-green: #2ed15d;
--background-green-white: #f4fff0;
--background-9: #999; --gradient-main: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%);
--gradient-main-small: radial-gradient(212.66% 158.13% at 100% -22.5%, #ee6868 0%, #569ef0 57.69%);
--gradient-blue: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%);
--gradient-turquoise: radial-gradient(
346.57% 244.17% at 149.73% -58.39%,
rgb(117, 196, 240) 0%,
rgb(126, 231, 225) 51.21689438819885%,
rgb(181, 228, 180) 80.70731163024902%,
rgb(237, 244, 164) 91.14583134651184%
);
--gradient-red: linear-gradient(22deg, #f44242 0%, #569ef0 100%);
--gradient-orange: linear-gradient(65deg, #ff9500 0%, #f05696 55.29%);
--text-white: #fff;
--text-black: #121212;
--text-grey: #999;
--text-3: #333;
--text-6: #666;
--text-9: #999;
} [data-site-region="ru"] {
--font-family: 'Involve', sans-serif;
--font-family-accent: 'Benzin', sans-serif;
} input[type='number'] {
-moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
body {
background: var(--gradient-main);
font-family: var(--font-family);
font-weight: 500;
}
.container {
max-width: 1232px;
margin: 0 auto;
@media (max-width: 1264px) {
max-width: calc(100% - 32px);
}
}
.full-width {
width: 100%;
}
.half-width {
width: 100%;
max-width: 380px;
} .message-container {
position: relative;
display: flex;
}
textarea {
height: 100px;
resize: none;
padding-right: 130px; } .author-image {
position: absolute;
right: 15px;
bottom: 0;
width: 130px;
height: 191px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.author-image img {
max-width: 100%;
max-height: 100%;
}
.submit-button {
width: 100%;
padding: 15px;
border: none;
border-radius: 25px;
background-color: #111;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.submit-button:hover {
background-color: #333;
} @media (max-width: 768px) {
.mform-content {
width: 90%;
padding: 30px 20px;
}
.mform-title {
font-size: 18px;
margin-bottom: 5px;
}
.form-row {
flex-direction: column;
}
.half-width {
width: 100%;
}
.author-image {
width: 80px;
height: 80px;
right: 50%;
transform: translateX(50%);
bottom: 0;
top: -10%;
}
textarea {
padding-right: 90px;
}
}
.wrapper {
margin: 0 auto;
max-width: 1600px;
padding-left: 24px;
padding-right: 24px;
width: 100%;
}
@media (max-width: 576px) {
.wrapper {
padding-left: 10px;
padding-right: 10px;
}
}
.modal {
display: none;
}
.modal.active {
display: flex !important;
}
.modal__login.active {
filter: blur(0px);
} .button {
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
border-radius: 20px;
text-transform: none;
cursor: pointer;
}
.button--100-perc {
width: 100%;
}
.button--white {
padding: 11px 24px;
text-align: center;
background-color: var(--background-white);
border: 1px solid var(--background-black);
transition: opacity 0.2s ease-out;
}
.button--white:hover { color: var(--text-white);
background: var(--background-black);
}
.button.button--gradient {
background: var(--gradient-main);
border: none;
transition: opacity 0.2s ease-out;
color: #fff;
}
.button--gradient:hover {
opacity: 0.8;
}
.button--base {
padding: 12px 24px;
}
.button--high {
height: 56px;
padding: 16px 24px 16px 24px;
font-weight: 700;
text-align: center;
position: relative;
}
.button--icon {
padding-right: 56px;
text-align: start;
}
.button--filter::after {
content: '';
position: absolute;
top: 16px;
right: 24px;
width: 24px;
aspect-ratio: 1;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/filter.svg);
background-repeat: no-repeat;
background-size: contain;
}
.button--black {
padding: 7px 15px;
font-family: var(--font-family);
font-weight: 500;
font-size: 24px;
line-height: 133%;
color: var(--text-white);
background: var(--background-black);
border: 1px solid var(--text-white);
}
.button--link {
text-decoration: none;
}
.button--red-48-px {
border-radius: 48px;
}
.to-know--background-none {
background: none;
}
.back {
margin-top: 16px;
margin-left: 16px;
padding: 8px;
padding-left: 32px;
background: none;
border: none;
} .modal {
position: fixed;
top: 0;
left: 0;
padding: 20px;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
opacity: 0;
z-index: 200;
transition: opacity 0.2s ease-out;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
}
.modal.active {
opacity: 1;
pointer-events: auto;
}
.modal__notification {
}
.form__button-mobile {
display: none;
}
.modal__aside {
position: fixed;
top: 0;
right: 0;
width: 0;
height: 100%;
overflow: hidden;
}
.modal__item {
height: 100%;
overflow: auto;
padding: 24px;
background: var(--background-white);
position: relative;
display: none;
filter: blur(10px);
transition: filter 0.2s ease-out;
}
.modal__item--no-title {
padding-top: 72px;
}
.modal__item.active {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.modal__close {
position: absolute;
top: 32px;
right: 24px;
width: 24px;
height: 24px;
border: none;
background: none;
}
.modal__title {
padding-right: 48px;
font-family: var(--font-family);
font-weight: 700;
font-size: 36px;
line-height: 111%;
text-transform: uppercase;
color: var(--text-black);
}
.modal__small-title {
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
color: var(--text-black);
}
.modal__text {
margin-top: 16px;
padding-right: 10px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-0);
}
.modal__form-sub {
margin-top: 48px;
}
.modal-form-sub__submit {
margin-top: 64px;
}
.modal__block-button {
margin-top: 24px;
}
.modal__button {
margin-top: 16px;
}
.modal__button:first-child {
margin-top: 0;
}
.modal__content {
margin-top: 24px;
}
.modal__filter {
width: 400px;
}
.modal__footer {
border-top: 1px solid var(--text-6);
padding-top: 23px;
}
.modal__block-price {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-block-price__title {
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.modal-block-price__price {
font-family: var(--font-family);
font-weight: 700;
font-size: 24px;
line-height: 100%;
text-transform: uppercase;
text-align: right;
color: var(--text-black);
}
.modal__basket {
width: 600px;
}
.modal__to-know,
.modal__to-know-submit,
.modal__login {
width: 412px;
}
.modal-basket__item {
padding-top: 23px;
padding-right: 15px;
padding-bottom: 24px;
display: flex;
border-top: 1px solid var(--background-grey);
position: relative;
}
.modal-basket__item::before {
content: '';
position: absolute;
top: 24px;
right: 6px;
width: 24px;
aspect-ratio: 1;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/basket.svg);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
transition: opacity 0.2s ease-out;
}
.modal-basket__item:hover .modal-basket__item::before {
opacity: 0.8;
}
.modal-basket__item--return {
padding-right: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-basket__item--return .modal-basket-item__title {
padding-right: 10px;
}
.modal-basket__item--return::before {
display: none;
}
.modal-basket-item__return {
border-radius: 20px;
padding: 4px 24px;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-white);
background: var(--background-black);
border: none;
}
.modal-basket-item__block-image {
width: 128px;
aspect-ratio: 1;
display: flex;
justify-content: center;
align-items: center;
}
.modal-basket-item__image {
width: 96px;
aspect-ratio: 1;
object-fit: contain;
}
.modal-basket-item__block-image img {
height: auto;
}
.modal-basket-item__content {
margin-left: 16px;
width: 100%;
}
.modal-basket-item__title {
padding-right: 40px;
font-family: var(--font-family);
font-weight: 500;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.modal-basket-item__sub-title {
margin-top: 8px;
font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
line-height: 133%;
color: var(--text-black);
}
.modal-basket-item__control {
margin-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-basket-item__price {
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
text-align: right;
color: var(--text-black);
}
.modal__basket .modal__header {
height: calc(100% - 92px);
margin-bottom: -36px;
}
.modal__basket .modal__content {
height: calc(100% - 100px);
overflow-x: hidden;
}
.modal__basket .modal__content::-webkit-scrollbar {
width: 7px;
background-color: #f9f9fd;
}
.modal__basket .modal__content::-webkit-scrollbar-thumb {
background-color: var(--background-black);
border-radius: 2px;
}
.modal-map {
margin: auto;
width: 1105px;
display: none;
border-radius: 24px;
border: none;
}
.modal-map.active {
display: flex;
}
.modal-map__left {
width: 600px;
padding: 24px;
position: relative;
}
.modal-map__control {
margin: 38px -12px -12px -12px;
display: flex;
}
.modal-map__control--delivery {
margin-top: 12px;
}
.modal-map-control__item {
margin: 12px;
padding: 2px;
width: calc(50% - 24px);
background: var(--background-9);
border-radius: 20px;
border: none;
}
.modal-map-control__item.active {
background: var(--gradient-main);
}
.modal-map-control__item.active .form-input-radio__circle::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 12px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--gradient-main);
}
.modal-map-control-item__content {
padding: 14px;
border-radius: 18px;
background: var(--background-white);
}
.modal-map-control-item__header {
display: flex;
align-items: center;
}
.modal-map-control-item__circle {
padding: 2px;
width: 20px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--background-9);
position: relative;
}
.modal-map-control-item__input {
display: none;
}
.modal-map-control-item-circle__content {
width: 16px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--background-white);
}
.modal-map-control__item.active .modal-map-control-item__circle {
background: var(--gradient-main);
}
.modal-map-control__item.active .modal-map-control-item__circle::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 12px;
aspect-ratio: 1;
border-radius: 50%;
background: var(--gradient-main);
}
.modal-map-control-item__title {
margin-left: 8px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-dark);
}
.modal-map-control-item__description {
margin-top: 16px;
}
.modal-map-control-item__time {
font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
text-align: start;
}
.modal-map-control-item__price {
margin-top: 8px;
font-family: var(--font-family);
font-weight: 700;
font-size: 12px;
line-height: 133%;
color: var(--text-6);
text-align: start;
}
.modal-map__form {
margin-top: 24px;
}
.modal-map-form__hidden {
}
.modal-map-form__button {
margin-top: 83px;
}
.modal-map-form__sub-button {
display: none;
}
.modal-map__right {
padding: 16px 0px 16px 16px;
}
.modal-map__map {
border: 2px solid var(--background-9);
border-radius: 16px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.modal-map__map iframe {
height: 650px;
}
.modal__age {
}
.modal__age > div {
display: none;
}
.modal__age > div.active {
display: flex;
}  .toggle {
padding-top: 26px;
padding-bottom: 25px;
border-bottom: 1px solid var(--text-3);
position: relative;
}
.toggle::after {
content: '';
position: absolute;
top: 24px;
right: 0;
width: 24px;
aspect-ratio: 1;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/black-x.svg);
transform: rotate(45deg);
transition: transform 0.2s;
pointer-events: none;
}
.toggle.active::after {
transform: rotate(0deg);
}
.toggle__title {
padding-right: 30px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-black);
cursor: pointer;
}
.toggle__block-content {
display: none;
}
.toggle__content {
padding-top: 24px;
}
.toggle-content__item {
margin: 12px -12px -12px -12px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.toggle-content__item:first-child {
margin-top: 0;
}
.toggle-content__element {
margin: 12px;
}
.toggle-content__element--width-perc-100 {
width: 100%;
}
.toggle-content__element--width-perc-50 {
width: calc(50% - 24px);
}
.toggle__content {
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.toggle__content ul li {
display: flex;
}
.toggle__content ul li::before {
height: 8px;
width: 8px;
border-radius: 50%;
margin-top: 0.5em;
margin-right: 0.5em;
flex-shrink: 0;
background-image: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%);
content: '';
}
.toggle__content p,
.toggle__content ul,
.toggle__content ol {
font-weight: 400;
margin: 0.5em 0;
}  .checkbox {
display: flex;
align-items: center;
cursor: pointer;
}
.checkbox__state {
border-radius: 4px;
width: 18px;
height: 18px;
border: 2px solid var(--background-black);
background: var(--background-white);
flex-shrink: 0;
}
.checkbox.active .checkbox__state {
background-color: var(--background-black);
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/arrow-selected-white.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 8px;
}
.checkbox__input {
display: none;
}
.checkbox__label {
padding-left: 8px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-dark);
cursor: pointer;
}
.checkbox__label a {
color: #76ce75;
text-decoration: none;
}
.checkbox--small {
margin-top: 24px;
}
.checkbox--small .checkbox__label {
padding-left: 24px;
font-weight: 500;
font-size: 12px;
line-height: 133%;
}  .radio {
display: flex;
align-items: center;
}
.radio__input {
width: 18px;
aspect-ratio: 1;
accent-color: var(--background-black);
cursor: pointer;
}
.radio__label {
padding-left: 8px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-dark);
cursor: pointer;
} .added_to_cart {
display: none !important;
}
@keyframes slidein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.remove-item {
position: absolute;
top: 0;
right: 0;
}
.modal-basket-item__content {
position: relative;
} .modal-basket__loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 10;
border-radius: 20px;
}
.modal__item.loading .modal-basket__loading {
display: flex;
}
.modal-basket__loader {
width: 48px;
height: 48px;
border: 5px solid var(--background-grey);
border-top: 5px solid var(--background-black);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .modal-basket__actions {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 24px;
}
.modal-basket__button {
flex: 1;
padding: 16px 24px;
border-radius: 20px;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
text-decoration: none;
position: relative;
}
.back::before {
content: '';
position: absolute;
top: 8px;
left: 0;
margin-right: 8px;
width: 24px;
height: 24px;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/arrow-back.svg);
}
.back::after {
content: '';
position: absolute;
bottom: 6px;
left: 0;
width: calc(100% - 8px);
height: 1px;
background: var(--text-black);
}
.button--high-46 {
padding: 12px 24px;
font-size: 20px;
font-weight: 700;
line-height: 24px;
}
.modal-basket__button--continue {
background: var(--background-white);
border: 1px solid var(--background-black);
color: var(--text-black);
}
.modal-basket__button--checkout {
background: var(--background-black);
border: 1px solid var(--background-black);
color: var(--text-white);
}
.modal-basket__button:hover {
opacity: 0.9;
transform: translateY(-2px);
} .counter {
display: flex;
align-items: center;
}
.counter__input {
width: 48px;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
text-align: center;
color: var(--text-black);
pointer-events: none;
background: none;
border: none;
}
.counter__button {
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid var(--text-3);
border-radius: 24px;
background: var(--background-white);
transition: opacity 0.2s ease-out;
}
.counter__button:hover {
opacity: 0.8;
}
.counter--small {
}
.counter--small .counter__button {
width: 32px;
height: 32px;
}
.counter--small {
}  .button {
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
border-radius: 20px;
cursor: pointer;
}
.button--100-perc {
width: 100%;
text-align: center;
}
.button--white {
padding: 11px 24px;
text-align: center;
background-color: var(--background-white);
border: 1px solid var(--background-black);
transition: opacity 0.2s ease-out;
}
.button--white.active {
background: var(--background-black);
color: var(--background-white);
}
.button--gradient {
background: var(--gradient-main);
border: none;
transition: opacity 0.2s ease-out;
}
.button--gradient:hover {
opacity: 0.8;
}
.button--base {
padding: 12px 24px;
}
.button--high {
height: 56px;
padding: 16px 24px 24px 24px;
font-weight: 700;
text-align: center;
position: relative;
}
.button--high-46 {
padding: 12px 24px;
font-size: 20px;
font-weight: 700;
line-height: 24px;
}
.button--icon {
padding-right: 56px;
text-align: start;
}
.button--filter::after {
content: '';
position: absolute;
top: 16px;
right: 24px;
width: 24px;
aspect-ratio: 1;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/filter.svg);
background-repeat: no-repeat;
background-size: contain;
}
.button--black {
padding: 7px 15px;
font-family: var(--font-family);
font-weight: 500;
font-size: 24px;
line-height: 133%;
color: var(--text-white);
background: var(--background-black);
border: 1px solid var(--text-white);
}
.button--link {
text-decoration: none;
}
.button--red-48-px {
border-radius: 48px;
}
.to-know--background-none {
background: none;
}
.back {
margin-top: 16px;
margin-left: 16px;
padding: 8px;
padding-left: 32px;
background: none;
border: none;
font-family: var(--font-family);
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
text-decoration: none;
position: relative;
}
.back::before {
content: '';
position: absolute;
top: 8px;
left: 0;
margin-right: 8px;
width: 24px;
height: 24px;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/arrow-back.svg);
}
.back::after {
content: '';
position: absolute;
bottom: 6px;
left: 0;
width: calc(100% - 8px);
height: 1px;
background: var(--text-black);
}
.wc-forward {
width: 100%;
padding: 0.5rem 0;
text-align: center;
} .woocommerce form .form-row .input-text {
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 16px;
gap: 8px;
width: 100%;
height: 48px;
background: #ffffff;
border: 1px solid #999999;
border-radius: 20px;
margin-top: 6px;
color: #000;
}
.woocommerce form .form-row textarea.input-text {
height: 150px;
}
.woocommerce-button {
padding: 20px;
margin-top: 20px;
}
.label__title,
.form-row label {
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-3);
}
.shop_table {
width: 100%;
}
.form-input__error {
margin-top: 4px;
font-family: var(--font-family);
font-weight: 500;
font-size: 12px;
line-height: 133%;
color: #f60909;
display: none;
position: relative;
}
.form-input__error--absolute {
position: absolute;
bottom: -19.95px;
left: 0;
width: 100%;
}
.form__input.error,
.form-input__phone.error {
border-color: #f60909;
}
.form__input.error + .form-input__error {
display: block;
}
.form-input__phone.error .form-input__error {
display: block;
}
.form-input-phone__input.error + .form-input__error--absolute::before {
content: '';
position: absolute;
top: -53px;
left: -1px;
width: 100%;
height: 48px;
border-radius: 20px;
border: 1px solid #f60909;
}
.form__input {
width: 100%;
border-radius: 20px;
padding: 12px 16px;
border: 1px solid var(--text-black) !important;
background: var(--background-white) !important;
font-family: var(--font-family) !important;
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black) !important;
}
.form__input::placeholder {
color: var(--text-grey);
}
.form__input--textarea {
height: 96px;
resize: none;
}
.form__input--center {
text-align: center;
}
.form__button {
width: 100%;
padding: 12px 24px;
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-white);
border-radius: 16px;
border: none;
background: var(--background-black);
cursor: pointer;
transition: background-color 0.2s ease-out;
}
.form__button:hover {
opacity: 0.8;
}
.modalProfile {
position: fixed;
top: 0;
left: 0;
padding: 20px;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.25);
z-index: 200;
opacity: 0;
transition: opacity 0.2s ease-out;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
overflow-y: auto;
padding-top: 30px;
padding-bottom: 30px;
}
.modalProfile.active {
opacity: 1;
pointer-events: auto;
}
.popup-wrap {
width: 100%;
height: 100%;
display: flex;
}
.modal-form {
margin: auto;
}
.label-name {
display: block;
margin-bottom: 6px;
}
.woocommerce-billing-fields__field-wrapper {
margin-top: 2rem;
}
.form__input--textarea {
height: 96px;
resize: none;
}
.remote-control__item {
display: none;
}
.remote-control__item.active {
display: block;
}
.order-contacts__delivery {
padding-bottom: 3rem;
} .breadcrumbs {
margin: 24px 0;
display: flex;
align-items: center;
flex-wrap: wrap;
}
@media (max-width: 1050px) {
.breadcrumbs {
padding-top: 65px;
}
}
.breadcrumbs__item {
display: block;
padding: 0px 16px;
font-family: var(--font-family);
font-weight: 700;
font-size: 16px;
line-height: 125%;
color: var(--text-6);
text-decoration: none;
position: relative;
}
.breadcrumbs__item:first-child {
padding-left: 0;
}
.breadcrumbs__item:nth-child(n + 2)::before {
content: '';
position: absolute;
top: -2px;
left: -12px;
width: 24px;
aspect-ratio: 1;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/arrow-breadcrumbs.svg);
background-repeat: no-repeat;
background-size: contain;
} .home {
padding: 0px 0 0px;
}
.wc-block-components-checkout-place-order-button {
background: var(--gradient-main);
border: none;
transition: opacity 0.2s ease-out;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
border-radius: 20px;
}
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='email'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='number'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='password'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='tel'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='text'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='url'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='email'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='number'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='password'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='tel'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='text'],
.wc-block-checkout__form.wc-block-components-form .wc-block-components-text-input input[type='url'],
.wc-block-checkout__form.wc-block-components-form .wc-blocks-components-select .wc-blocks-components-select__select {
border-radius: 10px;
}
.mt-m-3 {
margin-top: -3rem;
}
@media (max-width: 768px) {
.mt-m-3 {
margin-top: 1rem;
}
}
.container,
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.discount_block .discount_cosmodog {
margin-top: 60px;
}
.about_slider {
position: relative;
}
.modal__button--center {
margin-right: auto;
margin-left: auto;
display: block;
width: max-content;
}
.about_us-title {
font-weight: 700;
}
.button.loading::before {
content: '';
height: 36px;
width: 36px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200' style='shape-rendering: auto; display: block; background: transparent;'%3E%3Cg%3E%3Ccircle stroke-dasharray='164.93361431346415 56.97787143782138' r='35' stroke-width='10' stroke='%23000000' fill='none' cy='50' cx='50'%3E%3CanimateTransform keyTimes='0;1' values='0 50 50;360 50 50' dur='1s' repeatCount='indefinite' type='rotate' attributeName='transform'/%3E%3C/circle%3E%3Cg/%3E%3C/g%3E%3C!-- %5Bldio%5D generated by https://loading.io --%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}
.button.button--white::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200' style='shape-rendering: auto; display: block; background: transparent;'%3E%3Cg%3E%3Ccircle stroke-dasharray='164.93361431346415 56.97787143782138' r='35' stroke-width='10' stroke='%23ffffff' fill='none' cy='50' cx='50'%3E%3CanimateTransform keyTimes='0;1' values='0 50 50;360 50 50' dur='1s' repeatCount='indefinite' type='rotate' attributeName='transform'/%3E%3C/circle%3E%3Cg/%3E%3C/g%3E%3C!-- %5Bldio%5D generated by https://loading.io --%3E%3C/svg%3E");
}
.button.loading {
font-size: 0;
color: transparent !important;
position: relative;
}
.home {
position: relative; }
.discount__sale {
padding: 69px 0 80px;
border-radius: 60px;
background: var(--creme-white, #f4f1f0);
box-shadow: 6px 9px 20px 0px rgba(0, 0, 0, 0.15);
}
.discount_block .discount_form {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 0px !important;
margin-bottom: 6px;
}
.discount_block {
background: radial-gradient(
250% 285% at 120% -27.98%,
#0f5881 0%,
#1ea49c 36.98%,
#76ce75 66.67%,
#ecf39f 91.15%
) !important;
}
.discount_block_ae {
background: none !important;
}
.section_wrap {
margin-top: -70px;
padding: 178px 0 90px;
background: radial-gradient(
250% 285% at 120% -27.98%,
#0f5881 0%,
#1ea49c 36.98%,
#76ce75 66.67%,
#ecf39f 91.15%
) !important;
}
.footer-contact__submit {
width: 100%;
text-align: center;
height: 48px;
border-radius: 16px;
background: var(--main_black);
font-size: 20px;
font-weight: 400 !important;
line-height: 24px;
color: var(--main_white);
}
.footer-content span {
display: none !important;
}
@media only screen and (max-width: 1200px) {
.footer {
margin-top: 0;
padding: 24px 16px !important;
}
}
@media screen and (max-width: 768px) {
.home_ae {
background: radial-gradient(
346.57% 244.17% at 149.73% -58.39%,
#0f5881 0%,
#1ea49c 36.98%,
#76ce75 66.67%,
#ecf39f 91.15%
) !important;
}
.truth_ae .truth_top .gift_img {
width: 64vw;
margin: unset;
transform: translateX(-22%) rotate(-45deg);
margin-left: 24px !important;
}
.truth_ae .gift_line-img {
display: flex !important;
}
}
a,
button {
cursor: pointer;
}
.slider-button {
width: 48px;
height: 48px;
border: 1px solid #121212;
border-radius: 20px;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 12.364H4.5' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M21 12.364L14.636 18.728' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M21 12.364L14.636 6.00005' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
}
.slider-button-prev {
transform: scaleX(-1);
}
.swiper-button-disabled {
opacity: 0.5;
cursor: default;
}
.cookie-accept{
border-radius: 20px;
padding: 10px; box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.15);
background: #fff;
position: fixed;
z-index: 100;
bottom: 20px;
right: 20px;
display: flex;
align-items: center;
font-weight: 400;
font-size: 14px;
line-height: 150%;
color: #121212;
gap: 16px;
max-width: calc(100vw - 40px);
}
.cookie-accept-text a {
text-decoration-skip-ink: none;
background: radial-gradient(
278.91% 196.13% at 128.36% -48.29%,
rgb(238, 104, 104) 0%,
rgb(86, 158, 240) 57.692307233810425%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
.cookie-accept-text a::after {
position: absolute;
height: 1px;
bottom: 0;
left: 0;
width: 100%;
content: '';
background: radial-gradient(
278.91% 196.13% at 128.36% -48.29%,
rgb(238, 104, 104) 0%,
rgb(86, 158, 240) 57.692307233810425%
);
}
.cookie-accept-img {
flex-shrink: 0;
}
.cookie-accept-btn{
border-radius: 100px;
width: 112px;
height: 30px;
font-weight: 600;
font-size: 14px;
line-height: 171%;
flex-shrink: 0;
color: #121212;
display: flex;
align-items: center;
position: relative;
justify-content: center;
transition: all .5s;
background: radial-gradient(278.91% 196.13% at 128.36%  -48.29%, rgb(238, 104, 104) 0%, rgb(86, 158, 240) 57.692307233810425%);
}
.cookie-accept-btn::after {
border-radius: inherit;
position: absolute;
top: 2px;
left: 2px;
background-color: #fff;
content: '';
width: calc(100% - 4px);
height: calc(100% - 4px);
transition: all 0.5s;
}
.cookie-accept-btn span {
position: relative;
z-index: 2;
}
.cookie-accept-btn:hover::after {
opacity: 0;
}
.cookie-accept-btn:hover {
color: #fff;
}
@media (max-width: 640px) {
.cookie-accept {
width: calc(100vw - 20px);
max-width: calc(100vw - 20px);
right: 10px;
flex-direction: column;
}
.cookie-accept-btn {
width: 100%;
}
.cookie-accept-img {
display: none;
}
}
main.wrapper {
min-height: 41vh;
padding-top: 110px; }
.main.wrapper.--lk{
min-height: 0;
}
.main_link {
font-size: 24px;
font-weight: 500;
line-height: 28.8px;
color: var(--creme-white, #f4f1f0);
width: 221px;
height: 50px;
padding: 10px;
white-space: nowrap;
display: flex;
align-items: center;
justify-content: center;
border-radius: 48px;
border: 2px solid var(--creme-white, #f4f1f0);
transition: 0.3s ease all;
}
.main_link:hover {
background-color: #f4f1f0;
color: #121212;
}
@media only screen and (max-width: 576px) {
.main_link {
font-size: 12px;
line-height: 14.4px;
width: 129px;
height: 29px;
padding: 7px;
}
}
@media (max-width: 1050px) {
.pc-only{
display: none !important;
}
}
@media (min-width: 1051px) {
.m-only{
display: none !important;
}
}
.fancybox__backdrop{
background: rgba(0, 0, 0, .5) !important;
}.authors {
padding-bottom: 120px;
}
.authors h2 {
font-weight: bold;
font-size: 64px;
line-height: 120%;
color: white;
text-transform: uppercase;
margin-bottom: 36px;
}
.authors ul {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
gap: 24px;
}
.authors li {
background: #F5F5F5;
border-radius: 48px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3 - 16px);
}
.authors a {
padding: 52px 17px 57px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.authors .main-img {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
margin-bottom: 31px;
}
.authors .main-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.authors-name {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
line-height: 28px;
color: #121212;
margin-bottom: 5px;
}
.authors-type {
color: #121212;
font-size: 24px;
font-weight: 500;
line-height: 32px;
margin-bottom: 31px;
}
.authors p {
color: #666666;
font-weight: 500;
font-size: 20px;
line-height: 24px;
}  .author-head {
padding-bottom: 36px;
}
.author-head-content {
display: flex;
align-items: center;
gap: 31px;
margin-bottom: 17.5px;
}
.author-head .main-img {
width: 278px;
height: 278px;
flex-shrink: 0;
border-radius: 48px;
overflow: hidden;
}
.author-head .main-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-name {
font-size: 24px;
font-weight: bold;
line-height: 28px;
color: white;
margin-bottom: 5px;
text-transform: uppercase;
}
.author-type {
font-size: 24px;
font-weight: 500;
line-height: 32px;
color: white;
margin-bottom: 5px;
}
.author-description {
font-size: 24px;
font-weight: 500;
line-height: 32px;
color: white;
margin-bottom: 45px;
}
.author-head p {
font-size: 20px;
font-weight: 500;
line-height: 24px;
color: white;
}
.author-head h2 {
font-size: 64px;
font-weight: bold;
line-height: 120%;
color: white;
} .home-title {
font-size: 82px;
font-weight: bold;
line-height: 96px;
color: var(--main_white);
margin-bottom: 16px;
}
.home-description {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: var(--main_white);
text-transform: uppercase;
}
.home-description:has(+ .home-swp) {
margin-bottom: 68px;
}
.home-swp {
position: relative;
}
.home-swp__btn {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
align-items: center;
gap: 24px;
}
.home-swp__btn button {
border: 1px solid var(--main_black);
background: var(--main_white);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.home-swp .swiper-slide:not(.swiper-slide-active) {
height: 0;
overflow: hidden;
}
.home-card {
border-radius: 60px;
overflow: hidden;
display: flex;
align-items: flex-start;
gap: 24px;
position: relative;
}
.home-card.bg-yellow {
background: var(--orange_80);
}
.home-card.bg-green {
background: var(--green_90);
}
.home-card.bg-violet {
background: var(--violet_90);
}
.home-card__img {
width: 395px;
border-radius: 60px;
overflow: hidden;
height: 393px;
flex-shrink: 0;
}
.home-card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.home-card__content {
padding: 32px 79px 0 0;
}
.home-card__content-title {
font-size: 36px;
font-weight: bold;
line-height: 40px;
text-transform: uppercase;
max-width: 660px;
margin-bottom: 10px;
color: var(--interface_title);
}
.home-card__content-description {
color: var(--interface_title);
margin-bottom: 10px;
font-size: 20px;
font-weight: 500;
line-height: 24px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.home-card__content-body {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.home-card__content-body__alerts {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.home-card__content-body__alerts li {
background: var(--interface_hover);
color: var(--background);
border-radius: 16px;
padding: 6px 8px;
font-size: 16px;
font-weight: 500;
line-height: 20px;
}
.home-card__content-body__day {
color: var(--interface_hover);
font-size: 14px;
font-weight: 500;
line-height: 16px;
}
.home-card__content-body__time {
font-size: 14px;
font-weight: 500;
line-height: 16px;
color: var(--interface_hover);
}
.home-card__content-body__data {
display: flex;
align-items: center;
gap: 12px;
}
.home-card__content-body__data>div {
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
font-weight: 500;
line-height: 16px;
color: var(--interface_hover);
}
.home-card__content-body__data>div .main-img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}
.home-card__content-body__link {
border: 1px solid #000000;
border-radius: 28px;
background: var(--main_white);
position: absolute;
right: 37px;
bottom: 26px;
padding: 8.5px 16px 12.5px;
font-style: 20px;
font-weight: 500;
line-height: 24px;
}  .anons {
background: var(--main_white);
border-radius: 60px;
padding: 51px 0;
}
.anons-theme__title {
color: var(--main_black);
font-size: 24px;
font-weight: bold;
line-height: 28px;
text-transform: uppercase;
margin-bottom: 20px;
}
.anons-theme {
margin-bottom: 60px;
}
.anons-theme ul {
max-width: 1022px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.anons-theme ul span,
.anons-theme ul a {
font-size: 20px;
font-weight: 600;
line-height: 24px;
color: var(--main_black);
padding: 4px 24px;
border: 1px solid #000;
border-radius: 20px;
}
.anons-theme ul span.active {
cursor: default;
}
.anons-theme ul a:hover,
.anons-theme ul span.active {
background: var(--main_black);
color: var(--main_white);
}
.anons-best {
margin-bottom: 60px;
}
.anons-best__title {
font-size: 36px;
line-height: 40px;
font-weight: bold;
color: var(--main_black);
margin-bottom: 20px;
}
.anons-best__card-wrap {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.anons-best__card {
padding-top: 293px;
border-radius: 48px;
overflow: hidden;
position: relative;
z-index: 1;
}
.anons-best__card.light {
padding-top: 0;
border-radius: 0;
}
.anons-best__card .main-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 360px;
z-index: -1;
}
.anons-best__card .main-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.anons-best__card.light .main-img img {
border-radius: 30px;
}
.anons-best__card-alerts {
position: absolute;
top: 21px;
left: 17px;
width: calc(100% - 34px);
display: flex;
flex-wrap: wrap;
gap: 7px;
z-index: 1;
}
.anons-best__card-alerts li {
padding: 6px 8px;
font-size: 16px;
line-height: 20px;
font-weight: 500;
color: var(--background);
background: var(--main_black);
border-radius: 30px;
}
.anons-best__card-body {
background: var(--gradient-main);
padding: 30px 17px 22px;
border-radius: 48px 48px 0 0;
color: var(--main_white);
position: relative;
height: 100%;
}
.anons-best__card.light .anons-best__card-body  {
background: transparent;
color: var(--main_black);
padding: 12px 0 34px;
}
.anons-best__card-body__title {
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 14px;
line-height: 1.4;
}
.anons-best__card.light .anons-best__card-body__title {
font-size: 16px;
}
.anons-best__card-body__datas {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px 10px;
max-width: 264px;
}
.anons-best__card.light .anons-best__card-body__datas {
color: var(--placeholder);
}
.anons-best__card-body__datas p {
font-size: 14px;
line-height: 16px;
font-weight: 500;
}
.anons-best__card-body__datas ul {
display: flex;
align-items: center;
gap: 10px;
}
.anons-best__card-body__datas ul li {
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
line-height: 16px;
font-weight: 500;
}
.anons-best__card-body__datas ul .logo img {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
}
.anons-article {
margin-bottom: 40px;
}
.anons-article__title {
font-size: 36px;
line-height: 40px;
font-weight: bold;
color: var(--main_black);
margin-bottom: 20px;
}
.anons-article__card-wrap {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px 25px;
}
.anons-article__more-link {
display: flex;
align-items: center;
justify-content: center;
}
.anons-article__more-link a {
background: var(--gradient-main);
color: var(--main_white);
border-radius: 20px;
border: 1px solid var(--main_white);
padding: 16px 24px;
font-size: 20px;
font-weight: 600;
line-height: 24px;
text-transform: uppercase;
}@media only screen and (max-width: 992px) {
.authors h2 {
font-size: 48px;
margin-bottom: 24px;
}
.authors li {
border-radius: 32px;
width: calc(50% - 12px);
}
.authors .main-img {
margin-bottom: 24px;
}
.author {
padding-bottom: 24px;
}
.author h2 {
font-size: 48px;
}
.author-head-content {
flex-direction: column;
align-items: flex-start;
}
} @media only screen and (max-width: 992px) {
.author {
padding: 188px 0 36px;
}
}@media only screen and (max-width: 576px) {
.anons-best__title {
font-size: 26px;
line-height: 32px;
margin-bottom: 12px;
}
.anons-best__card {
padding-top: 205px;
}
.anons-best__card .main-img {
height: 300px;
}
.anons-best__card-body {
padding: 20px 17px;
}
.anons-best__card-body__title {
font-size: 20px;
line-height: 24px;
margin-bottom: 16px;
}
.anons-best__card.light .anons-best__card-body__title {
font-size: 20px;
line-height: 24px;
}
.authors {
padding-bottom: 138px;
}
.authors h2 {
font-size: 32px;
line-height: 38px;
margin-bottom: 15px;
}
.authors li {
border-radius: 24px;
width: 100%;
}
.authors a {
padding: 32px 17px 52px;
}
.authors .main-img {
width: 180px;
height: 180px;
margin-bottom: 20px;
}
.authors-name {
font-size: 20px;
line-height: 24px;
}
.authors-type {
font-size: 18px;
line-height: 24px;
margin-bottom: 20px;
}
.authors p {
font-size: 16px;
line-height: 20px;
}
.author-head {
padding-bottom: 15px;
}
.author-head-content {
margin-bottom: 23px;
}
.author-head .main-img {
width: 100%;
}
.author-head h2 {
font-size: 32px;
line-height: 38px;
}
.author-name {
font-size: 20px;
line-height: 24px;
}
.author-type {
font-size: 18px;
line-height: 24px;
}
.author-description {
font-size: 18px;
line-height: 24px;
margin-bottom: 24px;
}
.author-head p {
font-size: 16px;
line-height: 20px;
}
}body.bg-white {
background: var(--main_white);
}
body.bg-grey-f2 {
background: var(--grey-f2);
}
.container {
max-width: 1040px;
margin: 0 auto;
@media (max-width: 1264px) {
max-width: calc(100% - 32px);
}
}
.form-inp {
height: 48px;
width: 100%;
border: 1px solid var(--placeholder);
border-radius: 20px;
background: var(--main_white);
padding: 0 16px;
color: var(--main_black);
font-size: 20px;
font-weight: 400;
line-height: 24px;
}
.form-inp::placeholder {
color: var(--placeholder);
}
.form-inp:hover,
.form-inp:focus {
border-color: var(--main_black);
}
.form-textarea {
height: 96px;
width: 100%;
resize: none;
background: var(--main_white);
border: 1px solid var(--placeholder);
padding: 12px 16px;
border-radius: 20px;
color: var(--main_black);
font-size: 20px;
font-weight: 400;
line-height: 24px;
}
.form-textarea::placeholder {
color: var(--placeholder);
}
.form-textarea:hover,
.form-textarea:focus {
border-color: var(--main_black);
}
.button-tg {
padding: 12px 24px;
width: 100%;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
background: #121212;
border-radius: 20px;
border: solid #121212 2px;
transition: all 0.2s;
}
.button-tg__text {
font-weight: 600;
font-size: 20px;
line-height: 120%;
margin-right: 8px;
align-self: center;
color: #fff;
transition: all 0.2s;
}
.button-tg__svg {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.button-tg:hover {
background: #fff;
}
.button-tg:hover .button-tg__text {
transition: all 0.2s;
color: #121212;
}
.button-tg:hover .button-tg__svg svg path {
transition: all 0.2s;
fill: #121212;
}
.button-white-anim {
height: 54px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
background-color: #fff;
font-weight: 700;
font-size: 20px;
line-height: 120%;
color: #121212;
border-radius: 100px;
padding-left: 24px;
padding-right: 58px;
position: relative;
width: max-content;
}
.button-white-anim__text {
position: relative;
z-index: 2;
transition: all 0.5s;
font-size: 20px;
line-height: 24px;
}
.button-white-anim__arrow {
position: absolute;
background: var(--gradient-main);
height: 38px;
width: 38px;
border-radius: 19px;
top: 50%;
right: 10px;
transform: translateY(-50%);
transition: all 0.5s;
}
.button-white-anim__arrow::before {
right: 13px;
top: 50%;
transform: translateY(-50%);
height: 12px;
width: 12px;
content: '';
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.796875 1.62529C0.796875 1.09628 1.2265 0.666656 1.75551 0.666656L10.3761 0.667538C10.9052 0.667538 11.3339 1.09628 11.3339 1.62529L11.3348 10.2459C11.3348 10.7749 10.9052 11.2046 10.3761 11.2046C9.84714 11.2046 9.41752 10.7749 9.41752 10.2459L9.4184 3.93765L2.70003 10.656C2.32596 11.0301 1.71949 11.0301 1.34542 10.656C0.971356 10.282 0.971356 9.67548 1.34542 9.30141L8.06379 2.58304L1.75551 2.58392C1.2265 2.58392 0.796875 2.1543 0.796875 1.62529Z' fill='white' /%3E%3C/svg%3E");
background-size: contain;
position: absolute;
transition: all 0.5s;
}
.button-white-anim:hover .button-white-anim__arrow {
width: calc(100% - 20px);
}
.button-white-anim:hover .button-white-anim__arrow::before {
transform: rotate(45deg) translateY(-50%);
}
.button-white-anim:hover span.button-white-anim__text {
color: #fff;
}
.section-title-h2 {
text-transform: uppercase;
font-weight: 700;
font-size: 32px;
margin-bottom: 24px;
line-height: 32px;
}
@media (max-width: 1280px) {
.section-title-h2 {
font-size: calc(0.8696vw + 20.8696px);
margin-bottom: calc(0.8696vw + 12.8696px);
}
}
.section-description {
font-weight: 500;
font-size: 20px;
line-height: 150%;
margin-bottom: 40px;
max-width: 983px;
}
@media (max-width: 1280px) {
.section-description {
font-size: calc(0.6522vw + 11.6522px);
line-height: 143%;
}
}@font-face {
font-family: 'swiper-icons';
src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
font-weight: 400;
font-style: normal;
} :root {
--swiper-theme-color: #007aff; }
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0; z-index: 1;
display: block;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
touch-action: pan-y;
}
.swiper-vertical {
touch-action: pan-x;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
display: block;
}
.swiper-slide-invisible-blank {
visibility: hidden;
} .swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
} .swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
transform-style: preserve-3d;
}
.swiper-3d {
perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
transform-style: preserve-3d;
} .swiper-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none; -ms-overflow-style: none; }
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
content: '';
flex-shrink: 0;
order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after);
}  .swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .swiper-virtual .swiper-slide {
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
content: '';
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
height: 1px;
width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
width: 1px;
height: var(--swiper-virtual-size);
}
:root {
--swiper-navigation-size: 44px; }
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
opacity: 0;
cursor: auto;
pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: var(--swiper-navigation-sides-offset, 10px);
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto;
}
.swiper-button-lock {
display: none;
} .swiper-button-prev:after,
.swiper-button-next:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 10px);
left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: 'next';
} :root { }
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
display: none !important;
} .swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: var(--swiper-pagination-bottom, 8px);
top: var(--swiper-pagination-top, auto);
left: 0;
width: 100%;
} .swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
display: inline-block;
border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet:only-child {
display: none !important;
}
.swiper-pagination-bullet-active {
opacity: var(--swiper-pagination-bullet-opacity, 1);
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
right: var(--swiper-pagination-right, 8px);
left: var(--swiper-pagination-left, auto);
top: 50%;
transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform,
200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform,
200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform,
200ms right;
} .swiper-pagination-fraction {
color: var(--swiper-pagination-fraction-color, inherit);
} .swiper-pagination-progressbar {
background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
width: 100%;
height: var(--swiper-pagination-progressbar-size, 4px);
left: 0;
top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
width: var(--swiper-pagination-progressbar-size, 4px);
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-lock {
display: none;
}
:root { }
.swiper-scrollbar {
border-radius: var(--swiper-scrollbar-border-radius, 10px);
position: relative;
touch-action: none;
background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
display: none !important;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
position: absolute;
left: var(--swiper-scrollbar-sides-offset, 1%);
bottom: var(--swiper-scrollbar-bottom, 4px);
top: var(--swiper-scrollbar-top, auto);
z-index: 50;
height: var(--swiper-scrollbar-size, 4px);
width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-vertical > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
position: absolute;
left: var(--swiper-scrollbar-left, auto);
right: var(--swiper-scrollbar-right, 4px);
top: var(--swiper-scrollbar-sides-offset, 1%);
z-index: 50;
width: var(--swiper-scrollbar-size, 4px);
height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
border-radius: var(--swiper-scrollbar-border-radius, 10px);
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
} .swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
} .swiper-slide-zoomed {
cursor: move;
touch-action: none;
} .swiper .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-fade .swiper-slide-active {
pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-cube {
overflow: visible;
}
.swiper-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
pointer-events: auto;
visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
opacity: 0.6;
z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
content: '';
background: #000;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
} .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
} .swiper-flip {
overflow: visible;
}
.swiper-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
} .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
} .swiper-creative .swiper-slide {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
}
.swiper-cards {
overflow: visible;
}
.swiper-cards .swiper-slide {
transform-origin: center bottom;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}.cookie-accept {
transition: opacity 0.3s ease;
opacity: 1;
}
.cookie-accept.hidden {
opacity: 0;
pointer-events: none;
} .cookie-accept-btn {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.cookie-accept-btn:active {
transform: scale(0.98);
} @keyframes cookieSlideIn {
from {
transform: translateY(100px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.cookie-accept {
animation: cookieSlideIn 0.5s ease-out;
}
:has(.cookie-accept) #sentry-feedback {
--inset: auto 0 70px auto !important;
}
@media (max-width: 640px) {
:has(.cookie-accept) #sentry-feedback {
--inset: auto 0 100px auto !important;
}
}.form-inp {
height: 48px;
width: 100%;
border: 1px solid var(--placeholder);
border-radius: 20px;
background: var(--main_white);
padding: 0 16px;
color: var(--main_black);
font-size: 20px;
font-weight: 400;
line-height: 24px;
font-family: inherit;
}
.form-inp::placeholder {
color: var(--placeholder);
}
.form-inp:hover,
.form-inp:focus,
.form-textarea:hover,
.form-textarea:focus {
border-color: var(--main_black);
}
.form-textarea {
height: 96px;
width: 100%;
resize: none;
background: var(--main_white);
border: 1px solid var(--placeholder);
padding: 12px 16px;
border-radius: 20px;
color: var(--main_black);
font-size: 20px;
font-weight: 400;
line-height: 24px;
}
.form-textarea::placeholder {
color: var(--placeholder);
}
.form-textarea:hover,
.form-textarea:focus {
border-color: var(--main_black);
}
textarea {
font-family: inherit;
}
.discount__sale .discount_form .discount_form-btn:hover {
color: #fff;
}
.mform {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.mform-content {
position: relative;
width: 100%;
max-width: 600px;
padding: 40px;
border-radius: 20px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.mform-success .mform-content,
.mform-success-subscribe .mform-content {
background-color: #fff;
background: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/dog--new.svg) center center / auto no-repeat;
background-color: #fff;
background-position: bottom;
height: 500px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.mform-success .mform-button-container,
.mform-success-subscribe .mform-button-container {
margin-top: 200px;
}
.mform-message {
font-size: 20px;
}
.mform-success .mform-image,
.mform-success-subscribe .mform-image {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.close-button {
position: absolute;
top: 20px;
right: 20px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
color: #000;
}
.mform-title {
font-size: 32px;
font-weight: bold;
margin-bottom: 10px;
text-transform: uppercase;
} .mform-offer .mform-content {
background-color: #d6ff9f;
padding-bottom: 30px;
}
.mform-subtitle {
font-size: 18px;
margin-bottom: 20px;
}
.modal-form {
margin: auto;
width: 600px;
padding: 24px;
border-radius: 20px;
position: relative;
display: none;
}
.modal-form.active {
display: block;
}
.modal-form--white {
border: 1px solid var(--background-black);
background: var(--background-white);
}
.modal-form--green-gradient {
background: var(--gradient-main);
}
.modal-form--width-584 {
width: 584px;
}
.modal-form--cdek {
width: 836px;
}
.modal-form__close {
position: absolute;
top: 24px;
right: 24px;
width: 24px;
aspect-ratio: 1;
border: none;
background: none;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/black-x.svg);
background-repeat: no-repeat;
background-size: 24px;
background-position: center;
transition: opacity 0.2s ease-out;
z-index: 10;
}
.modal-form__close--white {
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/white-x.svg);
}
.modal-form__close:hover {
opacity: 0.8;
}
.modal-form__title {
padding-right: 50px;
font-family: var(--font-family);
font-weight: 700;
font-size: 26px;
line-height: 123%;
text-transform: uppercase;
color: var(--text-dark);
}
.modal-form__text--center {
text-align: center;
}
.modal-form__text--center-pc {
text-align: center;
}
.modal-form__title--green-gradient {
background: var(--gradient-main);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.modal-form__title--white {
color: var(--text-white);
}
.modal-form__element {
margin-top: 24px;
}
.modal-form__element--center {
display: flex;
justify-content: center;
}
.modal-form__element--top-40 {
margin-top: 40px;
}
.modal-form__text {
font-family: var(--font-family);
font-weight: 400;
font-size: 20px;
line-height: 120%;
color: var(--text-black);
}
.modal-form__text--weight-500 {
font-weight: 500;
}
.modal-form__text--white {
color: var(--text-white);
}
.modal-form__img {
width: 100%;
height: 360px;
object-fit: contain;
}
.modal-form__content {
margin-top: 40px;
}
.modal-form-content__line {
margin-top: 24px;
}
.modal-form-content__line:first-child {
margin-top: 0;
}
.modal-form-content__line--two {
display: flex;
justify-content: space-between;
}
.modal-form-content__line--two-mobile {
display: flex;
justify-content: space-between;
}
.modal-form-content__line--two-mobile .modal-form-content-line__element {
width: calc(50% - 12px);
}
.modal-form-content-line__element {
position: relative;
}
.modal-form-content-line__element--arrow::after {
content: '';
position: absolute;
right: 16px;
bottom: 16px;
width: 16px;
height: 16px;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/arrow-right-input.svg);
pointer-events: none;
}
.modal-form-content__line--two .modal-form-content-line__element {
width: calc(50% - 12px);
}
.modal-form-content__line--three {
display: flex;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(1) {
width: 85px;
flex-shrink: 0;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(2) {
margin-left: 8px;
width: 100%;
}
.modal-form-content__line--three .modal-form-content-line__element:nth-child(3) {
margin-left: 8px;
width: 85px;
flex-shrink: 0;
}
.modal-form-content__line--margin-top-16 {
margin-top: 16px;
}
.modal-form__buttons {
margin-top: 32px;
}
.modal-form__buttons--two {
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-form__buttons--two button,
.modal-form__buttons--two input {
width: calc(50% - 20px);
}
.form-group {
margin-bottom: 15px;
}
.form-row {
display: flex;
gap: 2px;
flex-direction: column;
} .mform-offer input,
.mform-offer textarea {
width: 100% !important;
padding: 12px 15px !important;
border: none !important;
border-radius: 20px !important;
font-size: 16px !important;
background-color: white !important;
font-family: inherit;
}
.mform-offer select {
font-size: 16px;
width: 100%;
padding: 12px 0;
}
.form-select-label {
width: 100%;
padding: 0px 15px;
border: none;
border-radius: 20px;
font-size: 16px;
background-color: white;
}
.mform-parthnership.mform .mform-content {
color: #fff;
background: radial-gradient(278.91% 196.13% at 128.36% -48.29%, #ee6868 0%, #569ef0 57.69%);
}
form.submiting button[type="submit"], 
form.submiting input[type="submit"]{
position: relative;
font-size: 0 !important;
}
form.submiting button[type="submit"]::before,
form.submiting input[type="submit"]::before{
position: absolute;
content: '';
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 20px; width: 20px;
background-size: contain;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round' stroke-dasharray='31.415, 31.415' transform='rotate(72.3246 25 25)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.7s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E");
}
.modal__form-sub button[type="submit"], .submit-button{
min-height: 52px;
}.category-description__content {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
transition: max-height 0.3s ease;
}
.category-description.is-open .category-description__content {
-webkit-line-clamp: unset;
overflow: visible;
}
.category-description__toggle {
display: flex;
align-items: center;
background: var(--gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
font-size: 20px;
line-height: 24px;
margin-bottom: 30px;
margin-top: 10px;
}
.category-description p,
.category-description ul li {
color: var(--grey-black);
font-size: 18px;
line-height: 140%;
font-weight: 500;
margin-bottom: 15px;
}
.category-description ul li {
margin-bottom: 5px;
}
.category-description ul {
list-style: disc;
list-style-position: inside;
margin-bottom: 15px;
margin-top: -6px;
}
.category-description h2 {
max-width: 661px;
font-size: 36px;
line-height: 40px;
font-weight: bold;
text-transform: uppercase;
color: var(--grey-black);
margin-bottom: 10px;
}
.category-description h3{
font-size: 28px;
line-height: 120%;
font-weight: bold;
text-transform: uppercase;
color: var(--grey-black);
margin-bottom: 10px;
}
.category-description h4, .category-descriptiont h5, .category-description h6{
font-size: 22px;
line-height: 120%;
font-weight: bold;
text-transform: uppercase;
color: var(--grey-black);
margin-bottom: 10px;
}
.main-food_products-card-bottom {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.main-food_products-card {
--accent-color: #e795cd;
border-radius: 24px;
padding: 0px 8px 8px 8px;
width: 265px;
min-width: 194px;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: var(--accent-color);
background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
}
.main-food_products-card.cosmo-toast__image {
justify-content: center;
align-items: center;
padding: 0;
}
.main-food_products-card.--acc-standart {
background-color: #e795cd;
}
.main-food_products-card-img {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 20px; }
.main-food_products-card.cosmo-toast__image .main-food_products-card-img {
padding-bottom: 0;
} .main-food_products-card-img img {
position: relative;
z-index: 1;
display: block;
max-width: calc(100% + 16px);
border-top-left-radius: 24px;
border-top-right-radius: 24px;
height: auto;
aspect-ratio: 1/1;
object-fit: contain;
} body[data-site-region="ae"] .main-food_products-card-img img {
max-width: calc(100% + 32px);
}
.main-food_products-card-title {
padding: 8px 12px 8px 12px;
border-radius: 20px;
font-size: 16px;
font-weight: 600;
line-height: 24px;
color: #000;
background-color: #fff;
}
.main-food_products-card-title span {
display: inline;
color: var(--accent-color);
} .--food-standart--ae.main-food_products-card .main-food_products-card-title span,
.--treats-standart--ae.main-food_products-card .main-food_products-card-title span,
.--acc-standart--ae.main-food_products-card .main-food_products-card-title span {
color: #569ef0;
}
@media (max-width: 640px) {
.main-food_products-card-title-wrapper {
background-color: white;
border-radius: 12px;
}
.main-food_products-card-title {
font-size: 8px;
line-height: 12px;
border-radius: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
padding: 0 8px 8px 8px;
}
}
.--food-lamb.main-food_products-card {
--accent-color: #863300;
}
.--food-turkey.main-food_products-card {
--accent-color: #cd0003;
}
.--food-beef.main-food_products-card {
--accent-color: #7e0092;
}
.--food-fish.main-food_products-card {
--accent-color: #48c1ed;
}
.--food-duck.main-food_products-card{
--accent-color: #d2691e;
}
.--treats-lamb.main-food_products-card {
--accent-color: #44006c;
}
.--treats-rabbit.main-food_products-card {
--accent-color: #601094;
}
.--treats-beef.main-food_products-card {
--accent-color: #004c31;
}
.--treats-assorted-flavors--ae {
--accent-color: #7c007a;
}
.--treats-salmon.main-food_products-card {
--accent-color: #7c007a;
}
.--treats-fish.main-food_products-card {
--accent-color: #7c007a;
}
.--treats-duck.main-food_products-card {
--accent-color: #326e70;
}
.--treats-duck.main-food_products-card{
--accent-color: #d2691e;
}
.--treats-catnip{
--accent-color: #3EB489;
}
.--treats-duck-cranberries{
--accent-color: #A83930;
}
.main-food_products-card-bottom {
display: flex;
justify-content: space-between;
gap: 8px;
}
.main-food_products-card-bottom-price-wrapper {
max-height: 43px;
display: flex;
justify-content: space-between;
gap: 4px;
margin-bottom: 4px;
}
.main-food_products-card-bottom-price {
border-radius: 100px;
padding: 10px 15px;
background: #fff;
text-transform: uppercase;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}
.main-food_products-card-price-old {
color: #666;
font-size: 14px;
font-style: normal;
font-weight: 600;
text-transform: uppercase;
text-decoration: line-through;
margin-left: 12px;
}
.main-food_products-card-price-new {
color: var(--accent-color);
font-weight: 600;
font-size: 20px;
line-height: 100%;
}
.main-food_products-card-raiting {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
border-radius: 100px;
padding: 5px 10px;
background: #fff;
}
.main-food_products-card-raiting-text {
font-size: 12px;
line-height: 100%;
font-weight: bold;
}
.main-food_products-card-raiting img{
height: 18px;
width: 18px;
}
@media (max-width: 1600px) {
.main-food_products-card-raiting-text {
font-size: 10px;
line-height: 100%;
font-weight: bold;
}
.main-food_products-card-raiting img{
height: 16px;
width: 16px;
}
.main-food_products-card-price-new{
font-size: 18px;
}
.main-food_products-card-price-old{
font-size: 13px;
}
}
@media (max-width: 640px) {
.main-food_products-card:not(.cosmo-toast__image) .main-food_products-card-img {
padding-bottom: 0;
}
.main-food_products-card:not(.cosmo-toast__image) .main-food_products-card-img img {
max-height: 166px;
}
.main-food_products-card-bottom {
margin-top: 0;
}
.main-food_products-card-bottom-price-wrapper {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
margin-bottom: 0;
background-color: white;
}
.main-food_products-card-bottom-price {
border-radius: 0;
padding: 8px 0px 2px 8px;
background-color: transparent;
}
.main-food_products-card-price-new {
font-size: 12px;
line-height: 12px;
}
.main-food_products-card-price-old {
font-size: 6px;
line-height: 8px;
margin-left: 4px;
margin-bottom: 4px;
}
.main-food_products-card-raiting {
gap: 2px;
}
.main-food_products-card-raiting-text {
font-size: 8px;
line-height: 8px;
}
.main-food_products-card-raiting img {
width: 8px;
height: 8px;
}
}
.main-food_products-card-percent {
font-size: 10px;
font-style: normal;
font-weight: 700;
line-height: 12px; text-transform: uppercase;
background: var(
--Radial,
radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1ea49c 45%, #76ce75 90%, #bbe38d 100%)
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.main-food_products-card-price-disc {
display: flex;
align-items: center;
gap: 4px;
}
.main-food_products-card--bottom-btn,
.main-food_products-card-added {
border: 2px solid transparent;
border-radius: 20px;
padding: 0px 32px;
height: 48px;
font-weight: 600;
font-size: 16px;
text-align: center;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
background: var(--gradient-main) padding-box, var(--gradient-main) border-box;
}
.main-food_products-card-added {
padding: 0;
white-space: nowrap;
}
@media (max-width: 640px) {
.main-food_products-card--bottom-btn,
.main-food_products-card-added {
height: 38px;
}
.main-food_products-card--bottom-btn {
font-size: 14px;
line-height: 14px;
}
.main-food_products-card-added {
max-width: 38px;
width: 38px;
}
.main-food_products-card-added::before {
content: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/svg/main/bag.svg);
width: 24px;
height: 24px;
}
.main-food_products-card-added-text {
display: none;
}
}
.main-food_products-card--bottom-btn:hover {
background: linear-gradient(white, white) padding-box, var(--gradient-main) border-box;
}
.main-food_products-card--bottom-btn:hover span {
background: var(--gradient-main);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.yith-add-to-wishlist-button-block {
margin-bottom: 10px;
height: 44px;
width: 44px;
padding: 10px;
border-radius: 800px;
background: rgba(255, 255, 255, 0.24);
}
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--anchor svg.yith-wcwl-icon-svg,
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--anchor img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
object-fit: contain;
}
.yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--themed-button)
svg.yith-wcwl-add-to-wishlist-button-icon {
color: #fff;
}
.yith-wcwl-add-to-wishlist-button:not(.yith-wcwl-add-to-wishlist-button--themed-button):hover
svg.yith-wcwl-add-to-wishlist-button-icon {
color: rgb(253 46 46 / 39%);
}
.main-food_products-card-slider .swiper-pagination-bullet {
background: rgba(255, 255, 255, 0.32);
height: 8px;
width: 8px;
border-radius: 50%;
opacity: 1;
flex-shrink: 0;
margin: 0 4px !important;
}
.main-food_products-card-slider .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: #fff;
}
.swiper-dots {
position: absolute;
bottom: 16px !important;
display: flex;
justify-content: center;
z-index: 5;
}
.main-food_products-card--bottom-btn .spinner {
height: 17px;
width: 17px;
}
.main-food_products-card--bottom-btn.loading::after {
opacity: 0;
}
.main-food_products-card--bottom-btn.loading:hover {
background: var(--gradient-main) padding-box, var(--gradient-main) border-box;
}
.main-food_products-card-title {
width: 100%;
}
.main-food_products-card__weight {
display: flex;
justify-content: flex-start;
gap: 4px;
margin-bottom: 8px;
margin-top: 8px;
white-space: nowrap;
}
.main-food_products-card__weight:empty {
display: none;
}
.main-food_products-card__weight-item {
white-space: nowrap;
flex-grow: 1;
font-weight: 600;
font-size: 12px;
color: #000;
border-radius: 100px;
padding: 5px 0;
line-height: 175%;
background: rgba(0, 0, 0, 0.04);
display: flex;
align-items: center;
justify-content: center;
}
.main-food_products-card__weight-item--none {
opacity: 0.32;
}
.main-food_products-card__weight-item.active,
.main-food_products-card__weight-item.active:hover {
color: #fff;
background: var(--accent-color);
}
.main-food_products-card__weight-item:hover {
background: #fff;
color: #000;
}
.main-food_products-card__weight-item--none:hover {
background: rgba(0, 0, 0, 0.04);
color: #000;
}
.main-food_products-card__weight-more {
margin-left: auto;
font-weight: 600;
font-size: 12px;
line-height: 175%;
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
color: #000;
border-radius: 100px;
padding: 5px 8px;
background: rgba(0, 0, 0, 0.04);
cursor: pointer;
}
.main-food_products-card__weight-more:hover {
background: #fff;
}
@media (max-width: 1200px) {
.main-food_products-card {
width: calc(50% - 5px);
min-width: 0;
}
.main-food_products-card__weight-more {
font-size: 14px;
padding: 2px 6px;
}
}
@media (max-width: 640px) {
.yith-add-to-wishlist-button-block {
width: 32px;
height: 32px;
margin: 0;
}
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--anchor svg.yith-wcwl-icon-svg,
.yith-wcwl-add-to-wishlist-button.yith-wcwl-add-to-wishlist-button--anchor img {
width: 16px;
height: 16px;
}
.main-food_products-card__weight {
margin-block: 4px;
}
.main-food_products-card__weight {
overflow-x: auto;
}
.main-food_products-card__weight-item  {
font-size: 8px;
line-height: 12px;
padding-inline: 12px;
}
.main-food_products-card {
width: 100%;
min-width: 0;
}
.main-food_products-card__weight-more {
font-size: 8px;
line-height: 12px;
}
.swiper-dots {
bottom: 4px !important;
}
.main-food_products-card-slider .swiper-pagination-bullet {
width: 4px;
height: 4px;
}
} @media (max-width: 768px) {
.main-food {
padding-top: 2rem;
}
}
.mform__review__media {
display: block;
width: 100%;
max-width: 350px;
}
.product-archive-card {
width: calc(25% - 7.5px);
}
@media (max-width: 1440px) {
.product-archive-card {
width: calc(33.333% - 6.666px);
}
}
@media (max-width: 1280px) and (min-width: 1151px) {
.product-archive-card {
width: calc(50% - 5px);
}
}
@media (max-width: 920px) {
.product-archive-card {
width: calc(50% - 5px);
}
}
@media (max-width: 640px) {
.product-archive-card {
width: 48%;
margin-left: auto;
margin-right: auto;
}
}
.product__main {
gap: 10px;
} .product-incart__wrap.loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
.product-incart__wrap.loading::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
z-index: 10;
}
.product-incart__wrap.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 11;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .product-incart__wrap.loading .product-incart__btn {
opacity: 0.5;
pointer-events: none;
} .product-incart__wrap.loading .product-incart__count {
opacity: 0.5;
}
.main-food_products-card-bottom-nv {
padding: 14px 20px;
font-size: 11px;
text-transform: uppercase;
background-color: #fff;
border-radius: 100px;
color: var(--accent-color);
align-self: stretch;
display: flex;
align-items: center;
}
.main-food_products-card-bottom-price {
flex-shrink: 0;
}
@media (max-width: 1200px) {
.main-food_products-card-bottom-nv {
font-size: 10px;
height: 44px;
padding-left: 6px;
padding-right: 6px;
display: flex;
align-items: center;
}
}
.main-food_products-card-wishlist {
position: absolute;
top: 9px;
right: 16px;
z-index: 10;
}
.main-food_products-card-flavour {
position: absolute;
right: 16px;
top: 72px;
z-index: 10;
display: flex;
flex-direction: column;
align-items: end;
}
.main-food_products-card-flavour .flavour-img {
background: var(--accent-color);
border-radius: 50%;
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
margin-bottom: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.main-food_products-card-flavour .flavour-img img {
max-width: 28px;
}
.main-food_products-card-flavour .flavour-category {
border-radius: 12px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
background: #fff;
font-weight: 500;
font-size: 14px;
line-height: 143%;
color: rgba(0, 0, 0, 0.6);
padding: 8px 10px;
}
.main-food_products-card-series-icon {
position: absolute;
right: 16px;
top: 170px;
z-index: 10;
}
.main-food_products-card-series-icon--en {
top: 130px;
}
.main-food_products-card-series-icon img {
max-width: 44px;
min-width: 44px;
max-height: 44px;
min-height: 44px;
border-radius: 100%;
}
.main-food_products-card {
position: relative;
}
.product-labels {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex-direction: column;
align-items: flex-start;
}
.product-label {
display: flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 16px;
color: #fff;
border-radius: 800px;
}
.main-food_products-card .product-labels,
.product-gallery .product-labels {
position: absolute;
top: 16px;
left: 16px;
z-index: 10;
}
.detail__content .product-labels {
flex-direction: row;
flex-wrap: wrap;
}
.product-label.--new {
background: radial-gradient(200.43% 141.42% at 100% 0%, #188892 0%, #1ea49c 45%, #76ce75 90%, #bbe38d 100%);
}
.product-label.--sale {
background: radial-gradient(437.55% 415.56% at 128.36% -48.29%, #af68ee 20.71%, #569ef0 57.69%);
}
.product-label.--profit {
background: linear-gradient(22deg, #f4ca42 23.69%, #f4a142 66.57%);
}
.product-label.--popular {
color: #121212;
background: linear-gradient(67deg, #ff9500 6.56%, #f05696 79.21%);
}
.product-incart__wrap {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
}
.product-incart__btn {
height: 50px;
width: 50px;
position: relative;
border-radius: 50%;
background-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.product-incart__btn:hover {
background: var(--accent-color);
}
.product-incart__btn:hover::before,
.product-incart__btn:hover::after {
background: #fff;
}
.product-incart__btn--minus::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 2px;
background: var(--accent-color);
border-radius: 4px;
}
.product-incart__btn--plus::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 2px;
background: var(--accent-color);
border-radius: 4px;
}
.product-incart__btn--plus::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 16px;
width: 2px;
background-color: var(--accent-color);
border-radius: 4px;
}
@media (max-width: 640px) {
.product__main {
gap: 8px;
}
.main-food_products-card {
padding: 11px 4px 4px 4px;
}
.main-food_products-card .product-labels,
.product-gallery .product-labels {
top: 12px;
left: 12px;
}
.main-food_products-card-wishlist {
right: 12px;
}
.main-food_products-card-flavour {
top: 46px;
right: 12px;
}
.main-food_products-card-flavour .flavour-img {
width: 32px;
min-width: 32px;
height: 32px;
min-height: 32px;
}
.main-food_products-card-flavour .flavour-img img {
max-width: 18px;
}
.main-food_products-card-flavour .flavour-category {
font-size: 10px;
line-height: 13px;
border-radius: 6px;
padding: 4px 5px;
}
.main-food_products-card-series-icon img {
max-width: 32px;
min-width: 32px;
max-height: 32px;
min-height: 32px;
}
.main-food_products-card-series-icon {
top: 108px;
right: 12px;
}
.main-food_products-card-series-icon--en {
top: 82px;
}
.product-label {
font-size: 10px;
line-height: 13px;
padding: 4px 12px;
}
.product-incart__btn--minus::before,
.product-incart__btn--plus::before {
width: 12px;
}
.product-incart__btn--plus::after {
height: 12px;
}
}
.product-incart__btn--plus.disabled {
opacity: 0.32;
pointer-events: none;
}
.product-incart__btn--plus.disabled:hover {
background-color: color-mix(in srgb, var(--accent-color) 12%, transparent);
}
.product-incart__btn--plus.disabled:hover::before,
.product-incart__btn--plus.disabled:hover::after {
background: var(--accent-color);
}
.product-incart {
display: flex;
align-items: center;
justify-content: space-between;
align-items: center;
padding: 23px 5px;
gap: 10px;
margin: 0 auto;
width: 159px;
height: 60px;
flex-grow: 0;
font-weight: 900;
font-size: 12px;
color: #000;
}
.product-incart__label {
border: 2px solid #fff;
border-radius: 100px;
padding: 12px 16px;
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 12px;
text-align: center;
color: #fff;
background-color: var(--accent-color);
}
.product-incart__count {
font-weight: 900;
font-size: 16px;
} .product-incart__wrap.loading {
position: relative;
pointer-events: none;
opacity: 0.7;
}
.product-incart__wrap.loading::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-color);
opacity: 0.7;
z-index: 10;
}
.product-incart__wrap.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 11;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .product-incart__wrap.loading .product-incart__btn {
opacity: 0.5;
pointer-events: none;
} .product-incart__wrap.loading .product-incart__count {
opacity: 0.5;
}
.main-food_products-card-add_block {
flex-grow: 1;
}
.main-food_products-card-add_block .product-incart__btn {
height: 44px;
width: 44px;
}
.main-food_products-card-add_block .product-incart__wrap {
margin-top: 0;
}
.main-food_products-card-add_block .product-incart {
height: auto;
padding: 2px;
flex-grow: 1;
width: auto;
}
@media (max-width: 640px) {
.main-food_products-card-add_block .product-incart {
padding: 0;
}
.product-incart__count {
font-size: 10px;
line-height: 14px;
}
.main-food_products-card-add_block .product-incart__btn {
width: 38px;
height: 38px;
}
}
.main-food_products-card.loading::after {
height: 100%;
width: 100%;
content: '';
position: absolute;
border-radius: inherit;
background-color: rgba(255, 255, 255, 0.8);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 100;
top: 0;
left: 0;
background-size: 24px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%23000000' stroke-width='5' stroke-linecap='round' stroke-dasharray='31.415, 31.415' transform='rotate(72.3246 25 25)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.7s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/circle%3E%3C/svg%3E");
}
.yith-wcwl-add-to-wishlist-button--single {
position: static;
}
.main-food_products-card--unavailable {
position: relative;
overflow: hidden;
}
.product-card__unavailable-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.6);
z-index: 12;
pointer-events: auto;
}
.product-card__unavailable-overlay > div{
font-weight: 600;
font-size: 14px;
line-height: 114%;
color: #121212;
border-radius: 800px;
padding: 8px 16px;
background: #fff;
width: fit-content;
margin-top: 16px;
margin-left: 16px;
}
.main-food_products-card--unavailable .main-food_products-card-bottom {
position: relative;
z-index: 13;
pointer-events: auto;
}
.main-food_products-card__subscribe-btn {
border-radius: 100px;
font-weight: 600;
font-size: 20px;
line-height: 120%;
color: #fff;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
height: 52px;
border: none;
}
@media (max-width: 640px) {
.product-card__unavailable-overlay > div {
font-size: 10px;
line-height: 13px;
padding: 4px 12px;
margin-top: 12px;
margin-left: 12px;
}
.main-food_products-card__subscribe-btn {
max-height: 44px;
font-size: 14px;
line-height: 14px;
}
.main-food_products-card-data:has(.main-food_products-card__weight) button {
margin-top: 0px;
}
.main-food_products-card-data:not(:has(.main-food_products-card__weight)) .main-food_products-card-bottom {
margin-top: 4px;
}
}.promo-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.promo-banner {
position: fixed; bottom: 0; left: 0;
width: 100%; z-index: 9999; display: flex;
justify-content: center;
background: transparent; } .promo-banner__wrapper {
position: relative;
width: 100%;
} .promo-banner__img {
display: block;
width: 100%; height: 48px;
} .promo-banner--ae .promo-banner__img {
content: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/promo-fix1--ae.png.webp);
}
.promo-banner--us .promo-banner__img {
content: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/promo-fix1--us.png.webp);
} .promo-banner__btn {
position: absolute;
right: 40px; top: 50%;
transform: translateY(-50%);
background: #000;
color: #fff;
border: none;
border-radius: 25px;
padding: 6px 18px;
font-size: 15px;
cursor: pointer;
transition: background 0.3s ease;
}
.promo-banner__btn:hover {
background: #333;
}
:has(#promo-banner:not(.hidden)) #sentry-feedback {
--inset: auto 0 40px auto;
} @media (max-width: 767px) {
.promo-banner__img {
content: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/promo-fix-mobile1.png.webp);
}
.promo-banner--ae .promo-banner__img {
content: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/promo-fix-mobile1--ae.png.webp);
}
.promo-banner--us .promo-banner__img {
content: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/promo-fix1--us.png.webp);
}
.promo-banner__btn {
display: none !important;
}
}
.promo-popup__content {
position: relative;
border-radius: 20px;
max-width: 500px;
width: 90%;
height: 267px;
padding: 40px 20px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); background: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/promo-desktop1.png.webp) no-repeat center/cover;
}
.promo-popup__content--ae {
background: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/promo-desktop1--ae.png.webp) no-repeat center/cover;
} @media (max-width: 767px) {
.promo-popup__content {
background: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/promo-mobile1.png.webp) no-repeat center/cover;
}
.promo-popup__content--ae {
background: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/promo-mobile1--ae.png.webp) no-repeat center/cover;
}
} .promo-popup__close {
position: absolute;
top: 15px;
right: 20px;
font-size: 28px;
color: #fff;
background: none;
border: none;
cursor: pointer;
} .promo-popup__btn {
background: #000;
color: #fff;
border: none;
border-radius: 25px;
padding: 12px 30px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease; display: block;
margin: 150px auto 40px; }
.promo-popup__btn:hover {
background: #333;
}.modal__aside {
position: fixed;
top: 0;
right: 0;
height: 100%;
transform: translateX(100%); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
background: white; z-index: 1000;
min-width: max-content;
}
.modal__aside.active {
transform: translateX(0); }
.modal__item {
opacity: 0;
filter: blur(10px);
transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
}
.modal__basket {
width: 600px!important;
max-width: 100vw;
}
.modal__item.active {
opacity: 1;
filter: blur(0);
}
.wpfFilterLayoutVer, .wpfFilterLayoutHor {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) {
.modal__aside {
width: 100% !important; min-width: 100%;
}
}
@media (min-width: 721px) {
.modal__aside {
min-width: max-content; width: auto;
width: 400px;
}
}
@media(max-width:768px){
.footer-top {
flex-direction: column;
}
.footer-bottom {
flex-direction: column;
}
.footer-content__wrap {
flex-direction: column;
}
.home__title.invisible {
font-size:28px;
}
.home .container {
padding: 0px 30px 180px!important;
}
.container {
max-width: 100%!important;
margin: 0!important;
}
.about_slider .carousel .carousel-item img  {
width: 99px!important;
height: 99px!important;
}
.reviews_block .reviews_items {
flex-wrap: unset;
gap: 20px!important;
}
.gift_line-img {
display: none!important;
}
.discount__sale .discount_text {
order: 1;
margin-top: 0;
font-size: 18px!important;
color: var(--interface-main_black, #121212);
font-family: var(--font-family-accent);
font-style: normal;
font-weight: 500;
line-height: normal;
max-width: 100%;
}
.discount__sale .discount_form {
flex-direction: column;
gap: 21px!important;
}
.modal__basket {
width: 100%!important;
}
}
.mform .close{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6L18 18' stroke='%23999999' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M18 6L6.00001 18' stroke='%23999999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
height: 24px;
width: 24px;
top: 16px;
right: 16px;
position: absolute;
}
.product-single-modal{
position: relative;
}
.mform__rev-thx__title{
font-weight: 700;
font-size: 20px;
line-height: 24px;
text-align: center;
color: #121212;
}
.mform__rev-thx__sub{
font-weight: 500;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #999999;
margin-top: 1rem;
max-width: 340px;
margin: 1rem auto;
}
.mform__rev-thx__btn{
width: 100%;
margin-top: 1rem;
}.new-footer {
--main_white-06: rgba(255, 255, 255, .6);
--transition-duration: .2s;
--transition: all var(--transition-duration);
--opacity: .8
}
.new-footer .newFooter {
padding: 39px 24px 40px;
background-color: var(--main_black);
border-top: 1px solid var(--interface-interface_title, #333);
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: var(--main_white-06);
}
.banner .error-message {
color: #ff0000;
padding-top: 10px;
padding-left: 10px;
}
.new-footer .newFooter__container {
margin: auto;
width: 1232px;
display: grid;
grid-template-areas: "one two three" "social tg last";
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr auto;
gap: 16px 100px;
position: relative
}
.new-footer .newFooter__to-up {
position: absolute;
top: 0;
right: 40px;
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
border: 1px solid rgba(18, 18, 18, .12);
background-color: var(--main_white);
transition: var(--transition)
}
@media (any-hover: hover) {
.new-footer .newFooter__to-up:hover {
opacity: var(--opacity)
}
}
@media (any-hover: none) {
.new-footer .newFooter__to-up:active {
opacity: var(--opacity)
}
}
.new-footer .newFooter__item {
display: flex;
flex-direction: column;
gap: 24px
}
.new-footer .newFooter__item:nth-child(1) {
grid-area: one;
gap: 20px;
}
.new-footer .newFooter__item:nth-child(2) {
grid-area: two
}
.new-footer .newFooter__item:nth-child(3) {
grid-area: three
}
.new-footer .newFooter__item a {
text-decoration: none;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: var(--main_white-06);
transition: var(--transition)
}
@media (any-hover: hover) {
.new-footer .newFooter__item a:hover {
opacity: var(--opacity)
}
}
@media (any-hover: none) {
.new-footer .newFooter__item a:active {
opacity: var(--opacity)
}
}
.new-footer .newFooter__logo {
transition: var(--transition)
}
@media (any-hover: hover) {
.new-footer .newFooter__logo:hover {
opacity: var(--opacity)
}
}
@media (any-hover: none) {
.new-footer .newFooter__logo:active {
opacity: var(--opacity)
}
}
.new-footer .newFooter__list {
list-style-type: none;
display: flex;
flex-direction: column;
gap: 16px
}
.new-footer .newFooter__list a:nth-child(2) {
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
color: var(--main_white)
}
.new-footer .newFooter__list--next {
gap: 12px
}
.new-footer .newFooter__title {
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: var(--main_white)
}
.new-footer .newFooter__social {
grid-area: social;
display: flex;
align-items: end;
gap: 32px
}
.new-footer .newFooter__social>a {
width: 32px;
height: 32px;
transition: var(--transition)
}
.new-footer .newFooter__social>a>img {
width: 100%;
height: 100%
}
@media (any-hover: hover) {
.new-footer .newFooter__social>a:hover {
opacity: var(--opacity)
}
}
@media (any-hover: none) {
.new-footer .newFooter__social>a:active {
opacity: var(--opacity)
}
}
.new-footer .newFooter__tg {
grid-area: tg
}
.new-footer .newFooter__chat {
text-decoration: none;
display: inline-block;
padding: 11px 23px;
border-radius: 20px;
border: 1px solid var(--main_black);
background: var(--main_white);
color: var(--main_black);
background-color: var(--main_white);
font-size: 20px;
font-weight: 600;
line-height: 24px;
transition: var(--transition)
}
@media (any-hover: hover) {
.new-footer .newFooter__chat:hover {
opacity: var(--opacity)
}
}
@media (any-hover: none) {
.new-footer .newFooter__chat:active {
opacity: var(--opacity)
}
}
@media (max-width: 1280px) {
.new-footer .newFooter__container {
width: 100%;
gap: 16px 20px;
}
}
@media (max-width: 980px) {
.new-footer .newFooter__container {
grid-template-areas:
"one two"
"three social"
"three tg"
"three last";
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
gap: 30px;
}
}
@media (max-width: 700px) {
.new-footer .newFooter{
padding: 47px 16px 48px 16px;
}
.new-footer .newFooter__to-up{
right: 8px;
}
.new-footer .newFooter__container {
grid-template-areas:
"one"
"social"
"tg"
"two"
"three";
grid-template-columns: 1fr;
grid-template-rows: repeat(5, auto);
gap: 24px;
}
}
@media (max-width: 500px){
.new-footer .newFooter__social{
padding-top: 9px;
justify-content: space-between;
}
.new-footer .newFooter__chat{
width: 100%;
text-align: center;
}
}
.nv-banner{
padding: 40px;
position: relative;
}
.nv-banner::after{
z-index: -10;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--main_white);
}
.nv-banner .banner{
margin: auto;
width: 1152px;
padding: 24px;
display: flex;
gap: 49px;
border-radius: 24px;
overflow: hidden;
position: relative;
background-image: var(--gradient-main);
}
.nv-banner .banner::after{
z-index: -2;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-main);
}
.nv-banner .banner__content{
width: 610px;
display: flex;
flex-direction: column;
gap: 16px;
}
.nv-banner .banner__title{
max-width: 410px;
font-size: 24px;
font-weight: 700;
line-height: 32px;
color: var(--main_white);
}
.nv-banner .banner__form{
display: flex;
gap: 8px;
}
.nv-banner .banner__form > *{
width: 50%;
}
.nv-banner .banner__form .btn{
margin: 0;
}
.nv-banner .banner__policy{
font-size: 16px;
font-weight: 500;
line-height: 20px;
color: var(--main_white);
opacity: .6;
}
.nv-banner .banner__policy > a{
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.nv-banner .banner__img{
position: absolute;
top: 0;
right: 0;
width: calc(100% - 684px);
height: 100%;
border-top-right-radius: 24px;
border-bottom-right-radius: 24px;
}
.nv-banner .banner__img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
}
@media (max-width: 1232px){
.nv-banner{
padding: 24px;
}
.nv-banner .banner{
width: 100%;
}
}
@media (max-width: 1000px){
.nv-banner .banner__content{
width: 60%;
}
.nv-banner .banner__img{
width: 45%;
}
}
@media (max-width: 800px){
.nv-banner .banner__content{
width: 70%;
}
.nv-banner .banner__img{
width: 40%;
}
}
@media (max-width: 700px){
.nv-banner{
padding: 24px 16px;
}
.nv-banner .banner{
padding-bottom: 240px;
display: block;
}
.nv-banner .banner__content{
width: 100%;
position: relative;
}
.nv-banner .banner__content::after{
content: '';
position: absolute;
top: -24px;
right: -35px;
width: 54px;
height: 54px;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/footer/Star-1.svg);
background-repeat: no-repeat;
}
.nv-banner .banner__content::before{
content: '';
position: absolute;
top: 63px;
left: -25px;
width: 37px;
height: 37px;
background-image: url(//cosmopet.ae/wp-content/themes/cosmopet/assets/img/footer/Star-2.svg);
background-repeat: no-repeat;
}
.nv-banner .banner__title{
font-size: 16px;
line-height: 24px;
}
.nv-banner .banner__form{
flex-direction: column;
}
.nv-banner .banner__form > *{
width: 100%;
}
.nv-banner .banner__policy {
font-size: 14px;
line-height: 20px;
}
.nv-banner .banner__img{
position: absolute;
top: auto;
right: 0;
bottom: 0;
width: 100%;
height: 240px;
}
}
@media (max-width: 470px){
.nv-banner .banner__img {
right: -23%;
bottom: 0%;
width: 130%;
height: 250px;
}
}.yith-wcwl-feedback-messages-container { 
display: none !important; 
}
.cosmo-toast-container {
position: fixed;
top: 110px; 
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 9999;
width: auto;
max-width: 360px;
}
.cosmo-toast {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border-radius: 12px;
padding: 12px 14px;
box-shadow: 0 6px 24px rgba(0,0,0,.15);
transition: .3s ease;
will-change: transform, opacity;
}
.cosmo-toast__image { 
flex: 0 0 auto; 
min-width: 70px!important;
height: 70px!important;
border-radius: 10px;
width: 70px;
}
.cosmo-toast__image img {
width: 48px; 
height: 48px;
border-radius: 6px; 
object-fit: cover;
}
.cosmo-toast__content {
flex: 1 1 auto;
min-width: 0; font-size: 14px; 
line-height: 1.35; 
color:#222;
}
.cosmo-toast__content strong { 
display:block; 
margin-bottom: 2px; 
color:#2B2B3B99 
} .cosmo-toast__content .cosmo-toast__title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: bold;
}
.cosmo-toast__weight{
margin-top:2px;
font-size:12px;
line-height:1.2;
font-weight: bold;
}    
.cosmo-toast__close {
flex: 0 0 auto;
margin-left: 8px;
background: none; 
border: 0;
font-size: 20px; 
line-height: 1;
cursor: pointer; 
color:#999;
}
@media (max-width: 1200px) {
.cosmo-toast-container {
top: 140px;
}
}
@media (max-width: 480px) {
.cosmo-toast-container {
left: 0;
right: 0;
align-items: center;
max-width: none;
width: 100%;
padding: 0 10px;
}
.cosmo-toast {
width: 100%;
max-width: none;
border-radius: 0 0 12px 12px;
}
}.cosmopet-confirm-wrapper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 32px;
border-radius: 12px;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999999;
}
.cosmopet-confirm {
width: fit-content;
display: grid;
gap: 16px;
border-radius: 12px;
padding: 32px;
background-color: white;
}
.cosmopet-confirm__text {
font-size: 18px;
grid-column: 1 / 3;
grid-row: 1;
}
.cosmopet-confirm__apply,
.cosmopet-confirm__cancel {
--inc-border-width: 2px;
--inc-border-radius: 20px;
height: 48px;
font-weight: 600;
font-size: 16px;
line-height: 120%;
border-radius: 20px;
padding: 0px 24px;
text-align: center;
color: #fff;
display: inline-flex;
justify-content: center;
align-items: center;
flex-grow: 1;
position: relative;
grid-row: 2;
}
.cosmopet-confirm__apply span,
.cosmopet-confirm__cancel span {
z-index: 3;
transition: color 0.3s ease-out;
}
.cosmopet-confirm__apply::before,
.cosmopet-confirm__cancel::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
background: var(--gradient-main) padding-box, var(--gradient-main) border-box;
z-index: 1;
}
.cosmopet-confirm__apply::after,
.cosmopet-confirm__cancel::after {
content: "";
width: calc(100% - var(--inc-border-width) - 2px);
height: calc(100% - var(--inc-border-width) - 2px);
position: absolute;
top: var(--inc-border-width);
left: var(--inc-border-width);
opacity: 0;
border-radius: calc(var(--inc-border-radius) - 2px);
background: white;
z-index: 2;
transition: opacity 0.3s ease-out;
}
@media (hover: hover) {
.cosmopet-confirm__apply:hover,
.cosmopet-confirm__cancel:hover {
color: var(--primary-blue);
}
.cosmopet-confirm__apply:hover::after,
.cosmopet-confirm__cancel:hover::after {
opacity: 1;
}
}.header--new {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
.header--new__main-logo {
flex-shrink: 0;
}
.header--new__main-logo img {
width: 180px;
}
.header--new__top {
padding-top: 12px;
padding-left: 24px;
padding-right: 24px;
background: #fff;
}
.header--new__top-menu {
display: flex;
gap: 44px;
justify-content: flex-end;
}
.header--new__top-menu-link,
.header--new__top-menu-text {
padding: 4px 8px;
color: rgba(0, 0, 0, 0.75);
font-size: 14px;
font-style: normal;
font-weight: 500;
white-space: nowrap;
line-height: 20px; }
.header--new__top-menu-list {
display: flex;
justify-content: space-between;
align-items: center;
}
.header--new__main {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.header--new__main__wrap {
padding: 4px 12px 18px 12px;
background: #fff;
border-bottom: 1px solid #333;
}
@media (max-width: 1200px) {
.header--new__main__wrap {
padding: 18px 12px;
}
}
.header--new__main-ui {
display: flex;
gap: 8px;
}
.header--new__main-ui-button {
padding: 8px;
height: 40px;
width: 40px;
}
.header--new__main-ui-button-icon,
.header--new__main-ui-button-icon img {
height: 100%;
width: 100%;
object-fit: contain;
}
.header--new__main-user-label-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.header-search-line {
flex-grow: 1;
}
.header-search-input {
border-radius: 16px;
background: #fff;
display: block;
width: 100%;
padding: 8px 54px;
align-items: center;
height: 40px;
font-size: 16px;
font-style: normal;
font-weight: 400;
position: relative;
transition: all 0.3s ease;
line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header-search-line {
position: relative;
border-radius: 16px;
background-color: #999;
padding: 1px;
transition: all 0.3s ease;
}
.header-search-line:focus-within {
background: var(--gradient-main, #ee6868);
}
.header-search-line:focus-within .header-search-button {
width: 44px;
height: 32px;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14 13.9999L12 11.9999' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cellipse cx='7.33203' cy='7.99997' rx='6' ry='5.99997' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E"),
var(--gradient-main, #ee6868);
background-size: 16px, cover;
background-position: center;
background-repeat: no-repeat;
left: 6px;
border-radius: 12px;
}
.header-search-line:focus-within .header-search-button-reset {
opacity: 1;
pointer-events: auto;
}
.header-search-line:focus-within ~ .header--new__main-menu .header--new__main-menu-item:nth-child(n + 4) {
display: none;
}
.header-search-input::placeholder {
color: #999;
}
.header-search-button-reset {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
}
.header-search-button {
position: absolute;
transition: all 0.3s ease;
top: 50%;
left: 16px;
transform: translateY(-50%);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cg opacity='0.4'%3E%3Cpath d='M21 21L18 18' stroke='%23121212' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='11' cy='12' r='9' stroke='%23121212' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");
height: 24px;
width: 24px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
border: none;
cursor: pointer;
z-index: 2;
}
.header-search-button-reset {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.8905 2.77582C12.1264 2.54333 12.5068 2.54469 12.7411 2.77875C12.9753 3.01304 12.974 3.39082 12.7381 3.62348L8.6102 7.69282L12.7381 11.7622C12.974 11.9947 12.9761 12.3735 12.742 12.6079C12.5078 12.8421 12.1265 12.8432 11.8905 12.6108L7.75668 8.53461L3.62387 12.6108C3.3879 12.8433 3.00659 12.8421 2.77231 12.6079C2.53803 12.3735 2.54026 11.9948 2.77621 11.7622L6.90219 7.69282L2.77524 3.62348C2.53969 3.39083 2.53822 3.01295 2.77231 2.77875C3.00662 2.54444 3.3879 2.54317 3.62387 2.77582L7.75668 6.85102L11.8905 2.77582Z' fill='%23121212'/%3E%3C/svg%3E");
height: 16px;
width: 16px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
border: none;
cursor: pointer;
opacity: 0;
pointer-events: none;
}
.header--new__main-menu-list {
display: flex;
gap: 8px;
}
.header--new__main-menu-link {
padding: 8px 12px;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px; text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
font-family: inherit;
}
.header--new__main-menu-link.--has-child::after {
content: '';
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2.5 5.5L7.5 10.5L12.5 5.5' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: transform 0.3s ease;
}
.header--new__main-menu-link.--has-child.active::after {
transform: rotate(180deg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_6002_49229' cx='0' cy='0' r='1' gradientTransform='matrix(-9.70119 16.3348 -11.8099 -23.2517 12.8496 -1.6675)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EE6868'/%3E%3Cstop offset='0.576923' stop-color='%23569EF0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M2.5 5.5L7.5 10.5L12.5 5.5' stroke='url(%23paint0_radial_6002_49229)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.header--new__main-menu-link.--color,
.header--new__main-menu-link.active {
background: var(--gradient-main, radial-gradient(212.66% 158.13% at 100% -22.5%, #ee6868 0%, #569ef0 57.69%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header--new__main-menu-link.--accent::before {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.939 7.14668H9.87903V2.34668C9.87903 1.22668 9.27236 1.00001 8.53236 1.84001L7.99903 2.44668L3.4857 7.58001C2.8657 8.28001 3.1257 8.85335 4.05903 8.85335H6.11903V13.6533C6.11903 14.7733 6.7257 15 7.4657 14.16L7.99903 13.5533L12.5124 8.42001C13.1324 7.72001 12.8724 7.14668 11.939 7.14668Z' fill='url(%23paint0_radial_6002_49229)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_6002_49229' cx='0' cy='0' r='1' gradientTransform='matrix(-9.70119 16.3348 -11.8099 -23.2517 12.8496 -1.6675)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EE6868'/%3E%3Cstop offset='0.576923' stop-color='%23569EF0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 16px;
height: 16px;
}
.header--new__submenu {
position: relative; border-radius: 0 0 24px 24px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
background: #fff;
display: none;
}
.header--new__submenu .wrapper {
padding-left: 24px;
padding-right: 24px;
padding-top: 36px;
padding-bottom: 36px;
display: flex;
position: relative;
gap: 44px;
min-height: 228px;
}
.header--new__submenu.active {
display: flex;
}
.header--new__submenu-block {
max-width: 275px;
width: 20%;
flex-grow: 1;
}
.header--new__submenu-block--ru:has(.header--new__submenu-block-list-item:nth-child(2)) {
margin-bottom: 20px;
}
@media (min-width: 1440px) {
.header--new__submenu-block {
max-width: 355px;
}
.header--new__submenu-block--ru:has(.header--new__submenu-block-list-item:nth-child(3)) {
margin-bottom: 20px;
}
}
.header--new__submenu-block-title {
color: #121212;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px; text-transform: uppercase;
}
.header--new__submenu-block-list-item,
.header--new__main-menu-item-submenu-link {
display: flex;
align-items: center;
gap: 8px;
align-self: stretch;
color: rgba(0, 0, 0, 0.75);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; margin-top: 2px;
}
.header--new__submenu-block-list-item a,
.header--new__main-menu-item-sub a {
padding: 4px 8px;
display: block;
width: 100%;
}
.--dogs .wrapper {
padding-left: 280px;
}
.--cats .wrapper {
padding-right: 280px;
}
.--dogs .header--new__submenu-icon {
position: absolute;
bottom: 0;
left: 0;
object-fit: contain;
pointer-events: none;
}
.--cats .header--new__submenu-icon {
position: absolute;
bottom: 0;
right: 0;
object-fit: contain;
pointer-events: none;
}
:is(.--dogs, .--cats) .header--new__submenu-icon--up {
bottom: 10px;
}
.header--new__submenu-block-list {
margin-top: 6px;
}
.header--new__main-menu-item {
position: relative;
}
.header--new__main-menu-item-sub {
position: absolute;
display: flex;
width: 220px;
padding: 12px;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 24px;
background: #fff;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
}
.header--new__main-menu-item-sub {
opacity: 0;
pointer-events: none;
}
.header--new__main-menu-item:hover .header--new__main-menu-item-sub {
opacity: 1;
pointer-events: auto;
z-index: 10;
}
@media (min-width: 1080px) and (max-width: 1600px) {
.header--new__main-menu-item-sub:focus-within
+ .header--new__main-menu
.header--new__main-menu-item:nth-child(n + 4) {
display: none;
}
}
.header--new__main-ui-button {
position: relative;
}
.header--new__main-ui-button .header--new__main-ui-button--counter {
position: absolute;
top: 0;
right: 0;
background: var(--gradient-main);
border-radius: 50%;
padding: 4px;
font-size: 7px;
color: #fff;
border-radius: 50%;
min-width: 16px;
display: flex;
align-items: center;
justify-content: center;
font-family: inherit;
}
.header--new__main-ui-button {
font-family: inherit;
}
.header-burger-btn {
display: none;
}
@media (max-width: 1200px) {
.header--new__main-menu,
.header--new__top {
display: none;
}
.header--new__main {
flex-wrap: wrap;
}
.header-burger-btn {
height: 40px;
width: 40px;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='12' fill='%23569EF0'/%3E%3Cpath d='M12 14.6H28' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 19.7999H28' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 24.7999H28' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: none;
cursor: pointer;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.header-burger-btn.active {
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_6_18)'%3E%3Cpath d='M28 0H12C5.37258 0 0 5.37258 0 12V28C0 34.6274 5.37258 40 12 40H28C34.6274 40 40 34.6274 40 28V12C40 5.37258 34.6274 0 28 0Z' fill='%23569EF0'/%3E%3Cpath d='M14 14L26 26' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M26 14L14 26' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_6_18'%3E%3Crect width='40' height='40' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.header-search-line {
order: 4;
max-width: calc(100% - 64px);
width: calc(100% - 64px);
}
.header--new__main-ui {
width: calc(100% - 180px);
justify-content: flex-end;
}
.header--new__main-logo img {
width: 140px;
}
.header--new__main-ui-button {
height: 36px;
width: 36px;
}
.header--new__main {
gap: 16px 24px;
}
.header--new__main-ui {
gap: 4px;
}
.header--new__main__wrap {
padding-left: 16px;
padding-right: 16px;
}
}
.header-burger-menu {
background: #fafafa;
padding: 24px 16px;
&:not(.active) {
display: none;
}
height: calc(100vh - 123px);
overflow: auto;
}
.header--new:has(#promo-banner[style*='display: flex']) .header-burger-menu {
padding-bottom: 72px;
}
.header-burger-menu-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.header-burger-menu-link {
display: flex;
height: 44px;
padding: 8px 12px;
align-items: center;
gap: 4px;
align-self: stretch;
border-radius: 24px;
background: #fff;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px; text-transform: uppercase;
font-family: inherit;
}
.header-burger-menu-link.--has-child::after {
content: '';
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='11' viewBox='0 0 13 11' fill='none'%3E%3Cpath d='M12 5.24268H1' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5.24268L7.75736 9.48532' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 5.24268L7.75736 1.00003' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
margin-left: auto;
flex-shrink: 0;
}
.header-burger-menu-link.--color span {
background: var(--gradient-main, radial-gradient(212.66% 158.13% at 100% -22.5%, #ee6868 0%, #569ef0 57.69%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
align-items: center;
}
.header-burger-menu-link.--accent span::before {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.939 7.14668H9.87903V2.34668C9.87903 1.22668 9.27236 1.00001 8.53236 1.84001L7.99903 2.44668L3.4857 7.58001C2.8657 8.28001 3.1257 8.85335 4.05903 8.85335H6.11903V13.6533C6.11903 14.7733 6.7257 15 7.4657 14.16L7.99903 13.5533L12.5124 8.42001C13.1324 7.72001 12.8724 7.14668 11.939 7.14668Z' fill='url(%23paint0_radial_6002_49229)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_6002_49229' cx='0' cy='0' r='1' gradientTransform='matrix(-9.70119 16.3348 -11.8099 -23.2517 12.8496 -1.6675)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EE6868'/%3E%3Cstop offset='0.576923' stop-color='%23569EF0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 16px;
height: 16px;
}
.header-burger-menu-link:not(.--pointed) {
color: rgba(18, 18, 18, 0.6);
padding-top: 16px;
padding-bottom: 16px;
border-top: 1px solid rgba(18, 18, 18, 0.12);
border-radius: 0;
background: none;
}
.header-burger-menu-link-min {
color: rgba(0, 0, 0, 0.75);
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 20px; padding: 4px 8px;
}
.header-burger-menu-list-header {
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px; text-transform: uppercase;
position: relative;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.header-burger-back {
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M1.33331 5.24316H12.3333' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.33331 5.24316L5.57595 9.4858' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.33331 5.24316L5.57595 1.00052' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: absolute;
cursor: pointer;
transition: opacity 0.2s ease-out;
}
.container {
max-width: 1230px;
}
.header--new__submenu-block-title a {
display: flex;
align-items: flex-start;
font-weight: 600;
padding: 10px 8px;
}
.header--new__submenu-block-title a::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 2L2 10M10 2V10M10 2H2' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
min-width: 12px;
height: 12px;
background-size: contain;
margin-top: 4px;
margin-left: 8px;
content: '';
}
a.header-burger-menu-link {
display: flex;
align-items: center;
}
a.header-burger-menu-link::after { height: 12px;
width: 12px;
background-size: contain;
margin-left: 8px;
content: '';
}
.hero_slider__bullets {
display: flex;
justify-content: center;
gap: 8px;
}
.hero_slider__bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.06);
}
.hero_slider__bullet:hover {
background: rgba(0, 0, 0, 0.1);
}
.hero_slider__bullet.hero_slider__bullet-active {
background: #569ef0;
}
.header--new__submenu-block-list-item,
.header--new__main-menu-item-submenu-link {
border-radius: 10px;
transition: all 0.3s;
}
.header--new__submenu-block-list-item:hover,
.header--new__main-menu-item-submenu-link:hover {
background: rgba(86, 158, 240, 0.06);
}
.header--new__submenu-block-list-item a:hover span,
.header--new__main-menu-item-submenu-link:hover span {
background: var(--gradient-main, radial-gradient(212.66% 158.13% at 100% -22.5%, #ee6868 0%, #569ef0 57.69%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header--new__submenu-block-title:hover a {
background: var(--gradient-main, radial-gradient(212.66% 158.13% at 100% -22.5%, #ee6868 0%, #569ef0 57.69%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header--new__submenu-block-title:hover a::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 2L2 10M10 2V10M10 2H2' stroke='url(%23paint0_radial_4389_62341)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_4389_62341' cx='0' cy='0' r='1' gradientTransform='matrix(-10.2689 11.8634 -12.3448 -18.5864 12.2689 -1.86339)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EE6868'/%3E%3Cstop offset='0.576923' stop-color='%23569EF0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
}
.header--new__main-menu-link:hover,
.header--new__top-menu-link:hover {
background: var(--gradient-main, radial-gradient(212.66% 158.13% at 100% -22.5%, #ee6868 0%, #569ef0 57.69%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.header--new__main-menu-link.--has-child:hover::after {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_6002_49229' cx='0' cy='0' r='1' gradientTransform='matrix(-9.70119 16.3348 -11.8099 -23.2517 12.8496 -1.6675)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EE6868'/%3E%3Cstop offset='0.576923' stop-color='%23569EF0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M2.5 5.5L7.5 10.5L12.5 5.5' stroke='url(%23paint0_radial_6002_49229)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.header--new__submenu--ru .wrapper {
padding: 36px 24px;
flex-wrap: wrap;
gap: 24px 44px;
}
.header--new__submenu--ru .header--new__submenu-icon {
left: auto;
right: 10px;
width: 628px;
height: 241px;
}.modal__login {
width: 412px;
}
.login_back {
position: absolute;
top: 24px;
left: 24px;
cursor: pointer;
}
.login_wrap {
height: 100%;
}
.login_wrap.hide {
display: none;
}
.login_inner {
display: none;
margin-top: 128px;
}
.login_inner.active {
display: block;
}
.login_title {
color: #121212;
font-size: 24px;
line-height: 28px;
text-transform: uppercase;
}
.login_subtitle {
color: #575775;
font-size: 20px;
line-height: 24px;
margin-top: 16px;
}
.login_subtitle span {
display: block;
margin-top: 8px;
}
.login_input {
margin-top: 40px;
}
.login_input.error input {
border-color: #fa0505;
}
.login_error {
font-size: 12px;
line-height: 16px;
color: #fa0505;
display: none;
}
.login_input.error .login_error {
display: block;
}
.login_input input {
border: 1px solid #999999;
color: #999999;
border-radius: 20px;
padding: 12px 16px;
width: 100%;
font-size: 20px;
line-height: 24px;
}
.login_btn {
padding: 12px 24px;
border-radius: 20px;
display: block;
width: 100%;
height: 54px;
text-transform: none;
font-size: 20px;
line-height: 24px;
text-align: center;
}
.login_btn.btn_gradient {
margin-top: 24px;
background: var(--gradient-main);
}
.login_btn.account_link {
background: #121212;
color: #fff;
}
.login_privacy {
font-size: 12px;
line-height: 16px;
color: #333333;
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
}
.login_privacy a {
color: #333333;
text-decoration: underline;
}
.login_inner.step_2 .login_subtitle,
.login_success .login_subtitle,
.login_auth .login_subtitle {
color: #121212;
}
.login_timer {
font-size: 20px;
line-height: 24px;
margin-top: 24px;
color: #121212;
}
.js-repeat-code {
display: none;
}
.login_success img {
margin: 40px 0;
}
@media (max-width: 480px) {
.modal__login {
width: 100%;
}
.login_title {
font-size: 19px;
line-height: 24px;
}
}.woocommerce-NoticeGroup {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
width: 40vw;
background: #fff;
}
.woocommerce-NoticeGroup [role="alert"] {
position: relative;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
overflow: hidden;
animation: slideIn 0.3s ease-out;
} @keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
margin: 0 !important;
padding: 0 10px;
list-style: none !important;
background: transparent !important;
border: none !important;
} .woocommerce-error::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: #e74c3c;
} .woocommerce-message::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: #27ae60;
} .woocommerce-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: #3498db;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
border-bottom: 1px solid #f0f0f0;
padding: 12px 0;   
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
padding: 16px 50px 16px 20px;    
}
.woocommerce-error li:last-child,
.woocommerce-message li:last-child,
.woocommerce-info li:last-child {
border-bottom: none;
}
.woocommerce-error li a,
.woocommerce-message li a,
.woocommerce-info li a {
color: #333;
text-decoration: none;
display: block;
}
.woocommerce-error li a:hover {
color: #e74c3c;
}
.woocommerce-message li a:hover {
color: #27ae60;
}
.woocommerce-info li a:hover {
color: #3498db;
}
.woocommerce-NoticeGroup [role="alert"]:hover::after {
color: #333;
} @media (max-width: 768px) {
.woocommerce-NoticeGroup {
top: 10px;
right: 10px;
left: 10px;
max-width: none;
width: auto;
}
} .toast-close-btn {
position: absolute;
top: 8px;
right: 12px;
background: transparent;
border: none;
font-size: 28px;
line-height: 1;
color: #999;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s ease;
z-index: 10;
}
.toast-close-btn:hover {
color: #333;
}
.toast-close-btn:focus {
outline: 2px solid #3498db;
outline-offset: 2px;
}
.woocommerce-notices-wrapper{
height: 0;
width: 0;
overflow: hidden;
position: absolute;
}