:root {
    --color-primary: #951249;
    --color-primary-hover: #7B0C3B;
    --color-secondary: #1F2428;
    --color-black: #2F353B;
    --color-grey-dark: #A9A9A9;
    --color-grey: #e7e7e7;
    --color-grey-light: #F4F4F4;
    --color-white: #FFFFFF;
    --color-success: #6BC425;
    --color-error: #F93232;
    --transition-time: 0.4s;
    --transition-time-long: 1s;
    --font-second: 'NEXT ART'
}

* {
    padding: 0;
    margin: 0;
    font-family: 'Graphik LCG', sans-serif;
    font-weight: 400;
    color: var(--color-black);
    box-sizing: border-box;
    text-decoration: none;
    cursor: default;
}

a {
    cursor: pointer;
}

a * {
    cursor: pointer;
}

ul, ol, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

::selection {
    background: var(--color-primary-hover);
    color: var(--color-grey-light);
}

.hide {
    display: none !important;
}

.overflow-hidden {
    overflow: hidden;
}

.select-none {
    user-select: none;
}

.bg-pattern {
    background: url(/static/Core/img/pattern.svg) center center;
}

.bg-white {
    background-color: var(--color-white);
}

.bg-grey-dark {
    background-color: var(--color-grey-dark);
}

.bg-grey-light {
    background-color: var(--color-grey-light);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.text-white {
    color: var(--color-white) !important;
}

.text-grey-dark {
    color: var(--color-grey-dark) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.text-secondary {
    color: var(--color-black) !important;
}

.text-error {
    color: var(--color-error);
}

.text-success {
    color: var(--color-success);
}

.text-bold {
    font-weight: 600;
}

.line-through {
    text-decoration: line-through;
}

.lh130 {
    line-height: 130%;
}

.position-absolute {
    position: absolute;
}

.position-relative {
    position: relative;
}

.position-sticky {
    position: sticky;
    top: 0px;
}

.ff-second {
    font-family: var(--font-second)
}

.fs-h {
    font-size: 40px;
}

.fs-l {
    font-size: 32px;
}

.fs-ml {
    font-size: 24px;
}

.fs-m {
    font-size: 20px;
}

.fs-s {
    font-size: 16px;
}

.fs-es {
    font-size: 14px;
}

.fs-ees {
    font-size: 12px;
}

.fw-l {
    font-weight: 300;
}

.fw-r {
    font-weight: 400;
}

.fw-m {
    font-weight: 500;
}

.fw-sb {
    font-weight: 600;
}

.fw-b {
    font-weight: 800;
}

.d-g {
    display: grid
}

.grid-l {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0px 16px;
}

.grid-h {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0px 16px;
}

.g-4 {
    gap: 4px;
}

.g-8 {
    gap: 8px;
}

.g-10 {
    gap: 10px;
}

.g-12 {
    gap: 12px;
}

.g-16 {
    gap: 16px;
}

.g-24 {
    gap: 24px;
}

.d-f {
    display: flex;
}

.d-fc {
    display: flex;
    flex-direction: column;
}

.fg-1 {
    flex-grow: 1;
}

.fh-0 {
    flex-shrink: 0;
}

.fh-1 {
    flex-shrink: 1;
}

.fw-w {
    flex-wrap: wrap;
}

.jc-s {
    justify-content: flex-start;
}

.jc-c {
    justify-content: center;
}

.jc-e {
    justify-content: flex-end;
}

.jc-sb {
    justify-content: space-between;
}

.jc-se {
    justify-content: space-evenly;
}

.ai-s {
    align-items: flex-start;
}

.ai-c {
    align-items: center;
}

.ai-e {
    align-items: flex-end;
}

.ta-s {
    text-align: start;
}

.ta-c {
    text-align: center;
}

.ta-e {
    text-align: end;
}

.fs-i {
    font-style: italic;
}

.w100 {
    width: 100%;
}

.w50 {
    width: 50%;
}

.h100 {
    height: 100%;
}

.container {
    width: 1664px;
    margin: 0px auto;
}

.z-2 {
    z-index: 2;
}

.pv-s {
    padding: 16px 0px;
}

.pv-m {
    padding: 24px 0px;
}

.pv-l {
    padding: 48px 0px;
}

.pv-h {
    padding: 96px 0px;
}

.mt-es {
    margin-top: 4px;
}

.mt-s {
    margin-top: 8px;
}

.mt-ms {
    margin-top: 12px;
}

.mt-m {
    margin-top: 16px;
}

.mt-l {
    margin-top: 24px;
}

.mt-h {
    margin-top: 46px;
}

.mb-ms {
    margin-bottom: 12px;
}

.p-s {
    padding: 12px;
}

.p-m {
    padding: 24px;
}

.p-l  {
    padding: 56px;
}

.br-s {
    border-radius: 10px;
}

.br-m {
    border-radius: 24px;
}

.br-l {
    border-radius: 42px;
}

.opacity-50 {
    opacity: 0.5;
}

.cursor-na {
    cursor: not-allowed !important;
}

.cursor-p {
    cursor: pointer;
}

.cursor-d {
    cursor: default;
}

/* <-- SVG --> */
.svg {
    width: 28px;
    height: 28px;
}
/* <-- SVG end --> */

/* <-- breadcrumb --> */
.breadcrumbs {
    padding: 12px 0px;
}
.breadcrumbs ol {
    font-size: 14px;
    font-weight: 400;
    cursor: default;
}

.breadcrumbs li::before {
    content: "›";
    margin-right: 8px;
}

.breadcrumbs li:first-child::before {
    margin-right: 0px;
    content: "";
}

.breadcrumbs a:hover span {
    color: var(--color-primary);
}

.breadcrumbs a.selected span {
    color: var(--color-primary);
}

.breadcrumbs a.disabled span {
    color: var(--color-grey-dark);
}

/* <-- breadcrumb end --> */

/* <-- FORM --> */
form {
    display: grid;
    gap: 8px;
}
/* <-- FORM end --> */

/* <-- INPUT --> */
input {
    background-color: var(--color-grey-light);
    padding: 12px 24px;
    width: 100%;
    height: 45px;
    border-radius: 10px;
    border: none;
    caret-color: var(--color-black);
    font-size: 16px;
    cursor: pointer;
}

textarea {
    background-color: var(--color-grey-light);
    padding: 12px 24px;
    width: 100%;
    border-radius: 10px;
    border: none;
    caret-color: var(--color-black);
    font-size: 16px;
    cursor: pointer;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: var(--color-grey-dark);
}

input:focus-visible, textarea:focus-visible {
    outline: none;
}

input:focus::placeholder, textarea:focus::placeholder {
    color: transparent;
}

input::-webkit-calendar-picker-indicator {
    filter: invert(60%);
}

input.error {
    border: 1px solid var(--color-error);
}

input.success {
    border: 1px solid var(--color-success);
}

input[type="checkbox"] {
    min-height: 20px;
    min-width: 20px;
    height: 20px;
    width: 20px;
    max-height: 20px;
    max-width: 20px;
    border-radius: 3px;
    border: 2px solid var(--color-grey-dark);
    accent-color: var(--color-primary);
}

input[type="radio"] {
    min-height: 20px;
    min-width: 20px;
    height: 20px;
    width: 20px;
    max-height: 20px;
    max-width: 20px;
    border-radius: 3px;
    border: 2px solid var(--color-grey-dark);
    accent-color: var(--color-primary);
}
/* <-- INPUT END --> */

/* <-- SELECT END --> */
select {
    background-color: var(--color-grey-light);
    padding: 12px 24px;
    width: 340px;
    height: 45px;
    border-radius: 10px;
    border: none;
    font-size: 16px;
}

select::-webkit-input-placeholder {
    color: var(--color-grey-dark);
}

select:focus-visible {
    outline: none;
}

select:focus::-webkit-input-placeholder {
    color: transparent;
}

option {
    background-color: var(--color-grey-light);
    font-size: 16px;
}

#order_by:has(option[value=""]:checked) {
    color: var(--color-grey-dark);
}
/* <-- SELECT END --> */

/* <-- link --> */
.link {
    color: var(--color-primary);
    transition: color var(--transition-time);
}

.link:hover {
    color: var(--color-primary-hover)
}
/* <-- link END --> */

/* <-- MODAL --> */
.modal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100dvw;
    height: 100dvh;
    background-color: rgba(47, 53, 59, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
}

.modal__inner {
    position: relative;
    background-color: var(--color-white);
    width: 520px;
    padding: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    border-radius: 42px;
}

.modal__inner.wide {
    width: 98%;
    max-width: 1024px;
    height: 98dvh;
}

.modal__close {
    position: absolute;
    top: 24px;
    right: 24px;
    cursor: pointer;
}

.modal__close img {
    cursor: pointer;
}

.BG {
    z-index: 4;
}
/* <-- MODAL END --> */

/* <-- BUTTONS --> */
.btn_p {
    min-height: 48px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-white);
    background-color: var(--color-primary);
    transition: background-color var(--transition-time), color var(--transition-time);
}

.btn_p:hover {
    background-color: var(--color-primary-hover);
}

.btn_p.active {
    background-color: var(--color-primary-hover);
}

.btn_p.disabled {
    background-color: var(--color-grey-dark);
}

.btn_s {
    min-height: 48px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-black);
    background-color: var(--color-grey-light);
    transition: background-color var(--transition-time), color var(--transition-time);
}

.btn_s:hover {
    background-color: var(--color-grey);
}

.btn_s.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn_s.disabled {
    background-color: var(--color-grey-light);
    color: var(--color-grey-dark);
}

.btn_t {
    min-height: 48px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    font-weight: 500;
    color: var(--color-black);
    background-color: var(--color-white);
    transition: background-color var(--transition-time), color var(--transition-time);
}

.btn_t:hover {
    background-color: var(--color-grey);
}

.btn_t.active {
    background-color: var(--color-black);
    color: var(--color-white);
}

.btn_t.disabled {
    background-color: var(--color-white);
    color: var(--color-grey-dark);
}
/* <-- BUTTON END --> */

/* <-- FavouriteBtn --> */
.FavouriteBtn__icon {
    cursor: pointer;
}
.FavouriteBtn__text {
    cursor: pointer;
}
/* <-- FavouriteBtn end --> */

/* <-- TAG END --> */
.tag {
    white-space: nowrap;
    cursor: pointer;
    background-color: var(--color-grey-light);
    color: var(--color-black);
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 16px;
    line-height: 130%;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color var(--transition-time), color var(--transition-time);
}

.tag:hover {
    background-color: var(--color-grey);
    color: var(--color-black);
}

.tag.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}
/* <-- TAG END --> */

/* <-- HEADER --> */
.notebook-header {
    display: none;
}

.header_mobile {
    display: none;
}

.header__logo {
    width: 210px;
    height: 60px;
}

header .btn_s img {
    cursor: pointer;
    margin: -45px;
    width: 28px;
    height: 28px;
}

header .btn_t img {
    cursor: pointer;
    margin: -45px;
}

.header_badge {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 18px;
    height: 18px;
    font-size: 9px;
    font-weight: 500;
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
/* <-- HEADER END --> */

/* <-- FOOTER --> */
/* <-- FOOTER END --> */    

/* <-- SEARCH --> */
.search_block {
    width: 625px;
    z-index: 7;
}

.search__input:focus,  .search__input:focus-visible{
    background-color: var(--color-white) !important;
    /* border-bottom: 1px solid var(--color-grey-light); */
}

.search__icon {
    user-select: none;
    right: 24px;
    top: 10px;
}

.search__results {
    width: 100%;
    position: absolute;
    top: 85%;
    padding: 24px;
    gap: 12px;
    border-radius: 0px 0px 10px 10px;
    display: grid;
    background-color: var(--color-white);
    max-height: 550px;
    overflow-x: auto;
    z-index: 6;
}

.search__results__products {
    width: 100%;
    gap: 12px;
    display: grid;
    background-color: var(--color-white);
}

.search__results__tags {
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    gap: 12px;
    background-color: var(--color-white);
}

.search__result__product {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.search__result__product--img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    padding: 10px;
}

.search__result__product--img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.search__result__product--name {
    width: 56%;
    display: grid;
    gap: 4px;
}

.search__result__product--price {
    width: 100px;
    display: grid;
    gap: 4px;
}

.header_mobile .search_block {
    width: 100%;
}

.header_mobile .search__icon {
    top: 26px;
}

.header_mobile .search__results {
    position: static;
}
/* <-- SEARCH END --> */

/* <-- CATEGORY --> */
.subcategory_card {
    position: relative;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    background-color: var(--color-grey-light);
    height: 206px;
    align-items: end;
    overflow: hidden;
    transition: background-color var(--transition-time);
}

.subcategory_card:hover {
    background-color: var(--color-grey);
}

.subcategory_card__composition {
    cursor: pointer;
    position: absolute;
    right: -50px;
    top: -12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background-color: var(--subcategory_card__composition--background);
    transition: filter var(--transition-time);
}

.subcategory_card__composition--img {
    max-width: 239px;
    max-height: 239px;
}
/* <-- CATEGORY END --> */



/* <-- SALE_BADGE --> */
.sale_badge {
    padding: 6px 12px;
    border: 2px solid var(--color-primary);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 130%;
    font-size: 16px;
    font-weight: 500;
    height: 36.8px;
}
/* <-- SALE_BADGE END --> */

/* <-- PRODUCT CARD --> */
.product_card {
    position: relative;
    border-radius: 12px;
    background-color: var(--color-white);
    width: 100%;
}

.product_card__sale {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: var(--color-white);
}

.product_card__favorite {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    cursor: pointer;
}

.product_card__favorite img {
    cursor: pointer;
}

.product_card__img {
    width: 100%;
    height: 328px;
    border-radius: 12px;
}

.product_card__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product_card__name {
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: 130%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    height: 42px;
}

.product_card__info {
    font-size: 14px;
    line-height: 130%;
    margin-top: 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.product_card__price {
    cursor: default;
    font-size: 24px;
    font-weight: 500;
    line-height: 130%;
    margin-right: 8px;
    line-height: 130%;
}

.product_card__old_price {
    cursor: default;
    font-size: 14px;
    line-height: 130%;
    color: var(--color-grey-dark);
    text-decoration: line-through;
}

.product_card.out-of-stock .product_card__sale {
    display: none;
}

.product_card.out-of-stock .product_card__img {
    opacity: 50%;
}

.product_card.out-of-stock .product_card__name {
    color: var(--color-grey-dark);
}

.product_card.out-of-stock .product_card__info {
    color: var(--color-grey-dark);
}

.product_card.out-of-stock .product_card__price {
    color: var(--color-grey-dark);
}

.product_card.out-of-stock .product_card__old_price {
    display: none;
}
/* <-- PRODUCT CARD END --> */

/* <-- PRODUCT CART --> */
.product_cart {
    display: grid;
    grid-template-columns: 124px auto 100px 120px 100px;
    gap: 16px;
    width: 1000px;
    padding: 12px;
    align-items: center;
}

.product_cart__img {
    width: 124px;
    height: 124px;
    border-radius: 12px;
}

.product_cart__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product_cart__name {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.product_cart__name--name {
    line-height: 130%;
    font-size: 16px;
}

.product_cart__buttons {
    display: flex;
    gap: 8px;
}

.product_cart__price_one {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 4px;
}

.product_cart__price_total {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 4px;
}

.product_cart__not_stock {
    grid-column: span 3;
}

.cart_action {
    position: sticky;
    top: 24px;
    padding: 56px;
    display: grid;
    gap: 24px;
    background-color: var(--color-grey-light);
    border-radius: 24px;
}

.cart_action__info {
    min-width: 320px;
}

.cart_action__info--line {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart_action__info--count {
    font-size: 16px;
    line-height: 130%;
}

.cart_action__info--total_price {
    font-size: 20px;
    line-height: 130%;
    font-weight: 500;
}

.cart_action__info--discount {
    font-size: 16px;
    line-height: 130%;
}

.cart_action__info--discount_price {
    font-size: 16px;
    line-height: 130%;
    font-weight: 500;
}

.cart_action__info--shop_discount {
    font-size: 12px;
    line-height: 130%;
}

.cart_action__info--shop_discount_price {
    font-size: 12px;
    line-height: 130%;
}

.cart_action__info--personal_discount {
    font-size: 12px;
    line-height: 130%;
}

.cart_action__info--personal_discount_price {
    font-size: 12px;
    line-height: 130%;
}

.cart_action__info--total {
    font-size: 20px;
    line-height: 130%;
    font-weight: 500;
}

.cart_action__info--actual_price {
    font-size: 20px;
    line-height: 130%;
    font-weight: 500;
}

/* <-- PRODUCT CART END --> */

/* <-- CART_BTN --> */
.CartBtn {
    cursor: pointer;
    min-height: 48px;
    min-width: 48px;
    padding: 12px 24px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-primary);
    gap: 8px;
    transition: background-color var(--transition-time), color var(--transition-time);
}

.CartBtn:hover {
    background-color: var(--color-primary-hover);
}

.CartBtn.active {
    background-color: var(--color-primary-hover);
}

.CartBtn.disabled {
    background-color: var(--color-grey-dark);
}

.CartBtn .sub img {
    user-select: none;
    cursor: pointer;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.CartBtn .cart_info {
    cursor: pointer;
    color: var(--color-white);
    font-size: 16px;
    font-weight: 500;
    line-height: 130%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.CartBtn .add img {
    user-select: none;
    cursor: pointer;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0;
    }
}

.CartBtn__loading {
    width: 20px;
    height: 20px;
    border: 1.5px solid white;
    border-radius: 7px;
    animation: loading 2.5s infinite;
}

.header_cart .header_cart_loading {
    width: 8px;
    height: 8px;
    border: 1.5px solid white;
    border-radius: 2.5px;
    animation: loading 2.5s infinite;
}
/* <-- CART_BTN END --> */

/* loading */
.loading {
    height: 36px;
    width: 36px;
    border: 4px solid var(--color-primary);
    border-radius: 14px;
    animation: loading 2.5s infinite;
}
/* loading end */

/* <-- SKELETON PRODUCT CARD --> */
@keyframes skeleton-loading {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.skeleton {
    background-color: var(--color-grey-light);
    background-image: linear-gradient(to right, var(--color-grey-light) 0%, var(--color-grey) 20%, var(--color-grey) 40%, var(--color-grey-light) 100%);
    background-size: 500px;
    background-repeat: no-repeat;
    animation: skeleton-loading 1s linear infinite alternate;
}

.product_card_skeleton {
    width: 100%;
    height: 520px;
}

.product_card_skeleton--image {
    height: 328px;
    width: 50%;
    border-radius: 10px;
    margin: 0px auto;
}

.product_card_skeleton--text {
    height: 42px;
    border-radius: 24px;
}

.product_card_skeleton--price {
    height: 42px;
    width: 40%;
    border-radius: 24px;
}

.product_card_skeleton--text_mini {
    margin-top: 8px;
    width: 70%;
    height: 18.20px;
    border-radius: 10px;
}

.product_card_skeleton--btn {
    height: 48px;
    border-radius: 10px;
}
/* <-- SKELETON PRODUCT CARD END --> */

/* <-- SKELETON TAG --> */
.skeleton-tag {
    width: 100px;
    height: 45px;
    border-radius: 10px;
}

.skeleton-tag-long {
    width: 135px;
    height: 45px;
    border-radius: 10px;
}
/* <-- SKELETON TAG END --> */

/* <-- SKELETON PRODUCT SEARCH --> */
.skeleton_product_search {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 100px;
}

.skeleton_product_search__img {
    width: 100px;
    height: 100%;
    border-radius: 10px;
}

.skeleton_product_search__name {
    width: 56%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.skeleton_product_search__name--category {
    width: 35%;
    height: 18px;
    border-radius: 10px;
}

.skeleton_product_search__name--name {
    width: 50%;
    height: 21px;
    border-radius: 10px;
}

.skeleton_product_search__price {
    width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    gap: 8px;
}

.skeleton_product_search__price--acual_price {
    width: 80%;
    height: 21px;
    border-radius: 10px;
}

.skeleton_product_search__price--price {
    width: 40%;
    height: 21px;
    border-radius: 10px;
}

/* <-- SKELETON PRODUCT SEARCH END --> */

/* <-- pagination_page.html  --> */
.pagination_page {
    width: 48px;
    height: 48px;
    padding: 12px 24px;
    border-radius: 10px;
}
/* <-- pagination_page.html --> */

/* <--  COMPILATION --> */
.compiltation_card__img {
    width: 320px;
    height: 206px;
    border-radius: 24px;
}
/* <-- COMPILATION END --> */

/* <--  LIMITERS --> */
.width_limiter1 {
    width: 542px;
}

.width_limiter2 {
    width: 1100px;
}

.height_limiter1 {
    height: 460px;
}
/* <--  LIMITERS END --> */

/* <--  product.html --> */
.product {
    display: grid;
    grid-template-columns: 544px 1fr 432px;
    grid-template-rows: auto 1fr;
    gap: 24px 32px;
    grid-template-areas:
        "product__img product__name product__action"
        "product__img product__info product__action";
}

.product__img {
    grid-area: product__img;
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 42px;
}

.product__img--img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product__name { 
    grid-area: product__name; 
}

.product__name--name {
    line-height: 130%;
}

.product__action { 
    grid-area: product__action;
}

.product__info {
    grid-area: product__info;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
}

.product__info--tags {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product__info--rating .tags {
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product__info--characteristics {
    width: 100%;
    padding: 12px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.product__info--characteristics .characteristic {
    width: 100%;
    display: flex;
}

.product__info--characteristics .characteristic .characteristic__name {
    font-size: 16px;
    font-weight: 500;
    line-height: 130%;
    white-space: nowrap;
}

.product__info--characteristics .characteristic .characteristic__line {
    align-self: flex-end;
    width: 100%;
    height: 20.8px;
    border-bottom: 1px solid var(--color-grey);
}

.product__info--characteristics .characteristic .characteristic__value {
    width: 230px;
    min-width: 230px;
    font-size: 16px;
    color: var(--color-primary);
    line-height: 130%;
    margin-left: 4px;
}

.product__info--variants .variants {
    width: 100%;
    padding-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.product__info--variants .variants .variant {
    min-width: 120px;
    padding: 12px 24px;
    display: grid;
    border-radius: 10px;
    background-color: var(--color-grey-light);
    border: 2px solid var(--color-primary);
    gap: 4px;
    transition: background-color var(--transition-time);
}

.product__info--variants .variants .variant:hover {
    background-color: var(--color-grey);
}

.product__info--variants .variants .variant .variant__price {
    font-size: 12px;
}


.product__info--variants .variants .variant.not-avalible {
    border: 2px solid var(--color-grey-light);
}

.product__info--compatibility .tags {
    padding-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.product__action__block {
    padding: 56px;
    background-color: var(--color-grey-light);
    border-radius: 24px;
    display: grid;
    gap: 24px;
    position: sticky;
    top: 24px;
}

.product__action__block--actual {
    display: flex;
    flex-direction: column;
}

.product__action__block--actual .prices {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.product__action__block--actual .prices .prices__price {
    line-height: 130%;
}

.product__action__block--actual .prices .prices__old_price {
    line-height: 130%;
    text-decoration: line-through;
    color: var(--color-grey-dark);
}

.product__action__block--actual .stock {
    width: 100%;
    margin-top: 4px;
    display: flex;
    gap: 4px;
}

.product__action__block--actual .stock .stock__satus {
    line-height: 130%;
}

.product__action__block--buttons {
    display: grid;
    gap: 8px;
}

.product__description {
    width: 1100px;
}
/* <--  product.html END --> */

/* <--  categories.html --> */
.categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
/* <--  categories.html END --> */

/* <--  category.html --> */
.product_grid {
    display: grid;
    grid-template-columns: 325px auto;
    grid-template-rows: auto auto;
    column-gap: 100px;
    row-gap: 16px;
}

.product_list_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 16px;
}

.product_list_pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: end;
}

.product_list_pagination .btn_s {
    width: 48px;
    height: 48px;
}
/* <--  category.html END --> */

/* <--  FILTERS --> */
.filters {
    display: grid;
    gap: 12px;
    grid-auto-rows: min-content;
}

.filter {
    padding: 12px 0px;
}

.filter__name {
    padding: 12px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.filter__name svg {
    cursor: pointer;
}

.filter__name.filter_open {
    border-bottom: 2px solid var(--color-primary);
}

.filter__name.filter_select .filter__name--name::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: var(--color-primary);
    border-radius: 5px;
    box-shadow: 0px 0px 5px 1px var(--color-primary-hover);
}

.filter:has(.filter__name.filter_open) {
    border-bottom: 1px solid var(--color-grey-dark);
}

.filter__name--name {
    display: flex;
    font-size: 16px;
    line-height: 130%;
    gap: 8px;
    cursor: pointer;
}

.filter__name svg {
    transition: rotate var(--transition-time);
}

.filter__name svg.rotate {
    rotate: -180deg;
}

.filter__values {
    padding-top: 12px;
    display: grid;
    gap: 12px;
}

.filter__max_height {
    max-height: 240px;
    overflow-x: auto;
}

.filter__values__price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.filter__values__value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter__values__value--value {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 130%;
    cursor: default;
}

.optional_filters_btn.selected::after {
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--color-white);
    border-radius: 6px;
    box-shadow: 0px 0px 6px 1px var(--color-white);
}

#search_filter {
    width: 340px;
}
/* <--  FILTERS END --> */

/* <--  MAP --> */
.map_block {
    position: absolute;
    right: 56px;
    top: 0px;
    background-color: var(--color-black);
    display: flex;
    padding: 56px;
    display: grid;
    gap: 24px;
    border-radius: 0px 0px 24px 24px;
}
/* <--  MAP END --> */

/* <--  contacts.html --> */
.contacts {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.contact {
    padding: 24px;
    display: flex;
    gap: 8px;
    border-radius: 12px;
    background-color: var(--color-grey-light);
}

.contact__info {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stores {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.store {
    padding: 12px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.store__info {
    width: 472px;
    display: grid;
    gap: 8px;
}

.store__schedule {
    width: 324px;
    display: grid;
    gap: 8px;
}

.store__schedule--time {
    display: flex;
    gap: 4px;
    align-items: center;
}

.store__map {
    width: 360px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-self: center;
    border-radius: 24px;
}

/* <--  contacts.html END --> */

/* <--  account.html --> */
.customers_orders {
    display: grid;
    gap: 24px;
}

.customer_orders {
    display: grid;
    gap: 12px;
}

.customer_order {
    display: grid;
    gap: 8px;
}

.product_order {
    width: 1000px;
    display: grid;
    grid-template-columns: 124px auto 164px 164px 164px;
    gap: 16px;
}

.product_order__img {
    width: 124px;
    height: 124px;
    border-radius: 12px;
}

.product_order__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.product_order__name {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.product_order__name--name {
    line-height: 130%;
    font-size: 16px;
}

.product_order__price_one {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 4px;
}

.product_order__quantity {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 4px;
}

.product_order__price_total {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 4px;
}

.form_change {
    padding: 32px;
    display: grid;
    gap: 46px;
    max-width: 544px;
    background-color: var(--color-grey-light);
    border-radius: 24px;
    width: 544px;
}

.form_change__block {
    display: grid;
    gap: 8px;
}

.form_change input {
    background-color: var(--color-white);
}

.account_settings {
    display: grid;
    gap: 16px;
    grid-template-columns: 264px min-content;
}

.account_settings__tabs_select {
    display: grid;
    gap: 8px;
    grid-auto-rows: min-content;
}

.account_settings__tabs {
    display: grid;
    gap: 8px;
    grid-auto-rows: min-content;
    grid-auto-columns: min-content;
}

.account_settings__tab {
    padding: 32px;
    border-radius: 24px;
    display: grid;
    gap: 32px;

}

.account_settings__profile_card {
    padding: 32px;
    gap: 24px;
    background-color: var(--color-grey-light);
    border-radius: 24px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min-content;
}

.account_settings__profile_card--card {
    width: 400px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    padding: 46px;
    border-radius: 24px;
}

.account_settings__profile_card--card img {
    width: 100%;
}

.account_settings__profile_card--lines {
    display: grid;
    gap: 12px;
    grid-auto-rows: min-content;
}

.account_settings__profile_card--line {
    width: 340px;
}
/* <--  account.html END --> */

/* <--  cart_order.html --> */
#order_create_form .form_grid {
    display: grid;
    gap: 32px;
    grid-auto-flow: row;
    grid-auto-rows: min-content;
}

#order_create_form .grid-3 {
    width: 1100px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

#order_create_form .store {
    padding: 24px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-grey-light);
}

#order_create_form .action_block {
    width: 466px;
}

#order_create_form .action {
    padding: 26px;
    background-color: var(--color-grey-light);
    border-radius: 24px;
    display: grid;
    gap: 24px;
    position: sticky;
    top: 24px;
}

#order_create_form .comment {
    grid-column: 1 / 3;
}

#order_create_form .order_warning {
    padding: 12px;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
}

#order_create_form .create_order__products {
    display: grid;
    gap: 8px;
}

#order_create_form .create_order__product {
    width: 100%;
    display: grid;
    grid-template-columns: 96px auto 40px 80px;
    gap: 8px;
}

#order_create_form .create_order__products__img {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    background-color: var(--color-white);
}

#order_create_form .create_order__products__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#order_create_form .create_order__products__name {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#order_create_form .create_order__products__name--name {
    font-size: 14px;
    line-height: 130%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    /* height: 54px; */
}

#order_create_form .create_order__products__quantity {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 4px;
}

#order_create_form .create_order__products__price_total {
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 4px;
}

#order_create_form .create_order__product--number {
    font-size: 14px;
    font-weight: 500;
    line-height: 130%;
}

#order_create_form .create_order__product--text_mini {
    font-size: 10px;
    line-height: 130%;
    color: var(--color-grey-dark);
}
/* <--  cart_order.html END --> */

/* <--  index.html --> */
.bg-custom {
    background: url(/static/Core/img/background.webp) center center no-repeat;
}

.categories_all {
    grid-column: 3 / 5;
    border-radius: 24px;
    display: flex;
    background-color: var(--color-grey-light);
    align-items: end;
    justify-content: end;
    transition: background-color var(--transition-time);
}

.categories_all:hover {
    background-color: var(--color-grey);
}

.loyalty_program {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 
    gap: 16px; 
    grid-template-areas: 
    "loyalty_program__discount loyalty_program__client"
    "loyalty_program__discount loyalty_program__promo"; 
}

.loyalty_program__discount {
    grid-area: loyalty_program__discount;
}

.loyalty_program__discount__percent {
    font-size: 120px;
    line-height: 82%;
}

.loyalty_program__client {
    grid-area: loyalty_program__client;
    transition: background-color var(--transition-time);
}

.loyalty_program__client:hover {
    background-color: var(--color-grey);
}

.loyalty_program__promo {
    grid-area: loyalty_program__promo;
    transition: background-color var(--transition-time);
}

.loyalty_program__promo:hover {
    background-color: var(--color-grey);
}
/* <--  index.html END --> */

/* <--  requisites.html --> */
.requisites-img {
    width: 50%;
    aspect-ratio: 1488 / 2104;
}
/* <--  requisites.html END --> */


.mobile-show {
    display: none;
}

.page_404_block {
    display: grid;
    gap: 24px;
    margin: 0px auto;
}

.page_404__img {
    height: auto;
    width: 80%;
    max-width: 544px;
}

/* blog_card */
.blog_card {
    display: grid;
    gap: 8px;
    grid-template-rows: min-content;
}

.blog_card__img {
    width: 404px;
    height: 260px;
}

.blog_card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}
/* blog_card end */

/* blog */
.blog__post_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.blog__post {
    width: 1104px;
    margin: 0px auto;
    display: grid;
    gap: 32px;
}

.blog__post__main_img {
    width: 100%;
    height: 456px;
}

.blog__post__main_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 42px;
}

.blog__post__img {
    width: 100%;
    height: 527px;
}

.blog__post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 42px;
}

.blog__post__grid_TIP {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    gap: 24px;
    grid-template-areas: 
    "blog__post__prodcuts_mini blog__post__text"
    "blog__post__prodcuts_mini blog__post__image"; 
}

.blog__post__grid_TP {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    gap: 24px;
    grid-template-areas: 
    "blog__post__text blog__post__prodcuts_mini"
}

.blog__post__grid_TI {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    gap: 24px;
    grid-template-areas: 
    "blog__post__text blog__post__image"
}

.blog__post__grid_IP {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content;
    gap: 24px;
    grid-template-areas: 
    "blog__post__image blog__post__prodcuts_mini"
}

.blog__post__prodcuts_mini {
    grid-area: blog__post__prodcuts_mini;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: 0;
    overflow-y: hidden;
    gap: 0px;
    justify-items: center;
    position: sticky;
    top: 24px;
    height: 527px;
}

.blog__post__prodcuts {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-rows: 0;
    overflow-y: hidden;
    justify-items: center;
    gap: 0px 16px;
}

.blog__post__image {
    grid-area: blog__post__image;
}

.blog__post__img {
    position: sticky;
    top: 24px;
}

.blog__post__text {
    grid-area: blog__post__text;
}
/* blog end */

.tags_filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media screen and (max-width: 1664px){
    .notebook-hide {
        display: none;
    }

    .container {
        width: 1020px;
    }

    .fs-h {
        font-size: 24px;
    }
    
    .fs-l {
        font-size: 24px;
    }

    .fs-ml {
        font-size: 20px;
    }

    .fs-m {
        font-size: 14px;
    }

    .fs-s {
        font-size: 12px;
    }

    .fs-es {
        font-size: 10px;
    }

    .br-l {
        border-radius: 24px;
    }

    .product_card__img {
        height: 240px;
    }

    .product_card__name {
        font-size: 12px;
        height: 28px;
    }

    .product_card__info {
        font-size: 10px;
    }

    .product_card__price {
        font-size: 16px;
    }
    
    .product_card__old_price {
        font-size: 12px;
    }

    .CartBtn .cart_info {
        font-size: 12px;
    }

    .product_card__favorite {
        width: 24px;
        height: 24px;
    }

    .product_card__favorite img {
        width: 100%;
        height: 100%;
    }

    .sale_badge {
        font-size: 12px;
        height: auto;
    }

    .header__logo {
        height: 50px;
    }

    .search_block {
        width: 320px;
    }

    .header__phone {
        height: 32px;
    }

    .btn_p {
        font-size: 12px;
    }

    .btn_s {
        font-size: 12px;
    }

    .btn_t {
        font-size: 12px;
    }

    .pv-l {
        padding: 36px 0px;
    }

    .p-l {
        padding: 32px;
    }

    .subcategory_card {
        height: 135px;
        padding: 12px;
    }

    .subcategory_card__composition {
        width: 160px;
        height: 160px;
    }

    .subcategory_card__composition--img {
        max-width: 100px;
        max-height: 100px;
    }

    .categories_all {
        padding: 12px;
    }

    .height_limiter1 {
        height: auto;
    }

    .width_limiter2 {
        width: 100%;
    }

    .grid-l {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 1fr;
        grid-auto-rows: 0;
        overflow-y: hidden;
        gap: 0px 14px;
    }

    .grid-h {
        grid-template-columns: repeat(5, 1fr);
        gap: 0px 14px;
    }

    .loyalty_program__discount__percent {
        font-size: 100px;
    }

    .footer__logo {
        height: 124px;
    }

    .product_grid {
        grid-template-columns: 200px auto;
        grid-template-rows: auto auto;
        column-gap: 16px;
    }

    .product_list_grid {
        gap: 12px 12px;
    }

    .filter__name--name {
        font-size: 14px;
    }

    .filter__values__value--value {
        font-size: 14px;
    }

    .select {
        font-size: 14px;
    }

    option {
        font-size: 14px;
    }

    .tag {
        font-size: 14px;
    }

    .product {
        grid-template-columns: 260px 1fr 340px;
    }

    .product__action__block {
        padding: 32px;
    }
    
    .product__info--characteristics .characteristic .characteristic__value {
        width: 164px;
        min-width: 164px;
    }

    .product_cart {
        width: 680px;
        grid-template-columns: 100px auto 80px 114px 80px;
        gap: 12px;
    }

    .cart_action {
        width: 296px;
        padding: 32px;
    }

    .cart_action__info {
        width: 100%;
        min-width: auto;
    }

    .cart_action__info--count {
        font-size: 14px;
    }

    .cart_action__info--total_price {
        font-size: 14px;
    }

    .cart_action__info--total {
        font-size: 16px;
    }

    .cart_action__info--actual_price {
        font-size: 16px;
    }

    .product_cart__img {
        width: 100px;
        height: 100px;
    }

    .product_cart__name--name {
        font-size: 14px;
    }

    #order_create_form .grid-3 {
        width: 620px;
        grid-template-columns: 1fr 1fr;
    }

    .product_order {
        width: 680px;
        grid-template-columns: 100px auto 80px 114px 80px;
        gap: 12px;
    }

    .product_order__img {
        width: 100px;
        height: 100px;
    }

    .account_settings {
        grid-template-columns: 264px 1fr;
    }

    .account_settings__profile_card--card {
        width: 290px;
        height: 180px;
        padding: 32px;
    }

    .account_settings__profile_card--line {
        width: 280px;
    }

    .contact {
        padding: 12px;
    }

    .contact__info {
        width: 224px;
    }

    .blog__post {
        width: 1024px;
    }

    .blog__post__main_img {
        height: 422px;
    }

    .blog__post__img {
        height: 394px;
    }

    .blog__post__prodcuts_mini {
        height: 394px;
    }

    .search__result__product {
        gap: 4px;
    }

    .search__result__product--img {
        width: 50px;
        height: 50px;
        padding: 0px
    }

    .search__result__product--name {
        width: 75%;
    }

    .search__result__product--price {
        width: 70px;
    }
    
    .search__results {
        padding: 16px;
    }

    .filter__values__price {
        flex-direction: column;
    }

    .filter__values__price p {
        display: none;
    }

    .product_card_skeleton {
        height: 402px;
    }
    
    .product_card_skeleton--image {
        height: 240px;
    }

    .product_card_skeleton--text {
        height: 28px;
    }
    
    .product_card_skeleton--price {
        height: 20.8px;
    }
    
    .product_card_skeleton--text_mini {
        height: 13px;
    }
    
    .product_card_skeleton--btn {
        height: 48px;
    }
}


@media screen and (max-width: 1020px) {
    .container {
        width: 94%;
    }

    .pc-header {
        display: none;
    }

    .notebook-header {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 12px;
    }

    .product_card__img {
        height: 190px;
    }

    .sale_badge {
        font-size: 10px;
    }

    .loyalty_program {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 132px;
        gap: 16px;
        grid-template-areas:
            "loyalty_program__discount loyalty_program__client"
            "loyalty_program__promo loyalty_program__promo";
    }

    .loyalty_program__discount__percent {
        font-size: 46px;
    }

    .loyalty_program__discount {
        display: grid;
        gap: 24px;
    }

    .loyalty_program__client  {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    .loyalty_program__client__img {
        width: 85%;
        align-self: center;
    }

    .width_limiter1 {
        width: auto;
    }

    .fg-1.fh-0 {
        flex-shrink: 1;
        flex-grow: 0;
    }

    .w50--1020 {
        width: 50%;
    }

    .fs-h {
        font-size: 24px;
    }

    .footer__logo {
        height: 75px;
    }

    .pv-l {
        padding: 28px 0px;
    }

    .p-l {
        padding: 24px;
    }

    .categories {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .categories_all {
        grid-column: span 3;
        height: 135px;
    }

    .pad-hide {
        display: none;
    }

    .product_grid {
        grid-template-columns: 100%;
        grid-template-rows: auto;
    }

    .select {
        width: 300px;
    }

    .product_list_grid {
        gap: 0;
        justify-items: center;
    }

    .product__action__block {
        background-color: transparent;
    }

    .product {
        gap: 16px 24px;
        grid-template-columns: 1fr 300px;
        grid-template-areas:
        "product__img  product__action"
        "product__name product__action"
        "product__info product__action";
    }

    .product__action__block {
        padding: 0px;
    }

    .product_cart {
        width: 100%;
    }

    .pad-d-fc {
        display: flex;
        flex-direction: column;
    }

    .cart_action {
        width: 50%;
        background-color: var(--color-white);
    }

    .breadcrumbs {
        display: none;
    }

    .pv-m {
        padding: 16px 0px;
    }

    #order_create_form .grid-3 {
        width: 100%;
    }

    #order_create_form {
        gap: 32px;
    }

    #order_create_form .action {
        background-color: var(--color-white);
    }

    #order_create_form .action_block {
        width: 100%;
        max-width: 640px;
    }

    .account_settings {
        grid-template-columns: 1fr;
    }

    .account_settings__profile_card--card {
        width: 352px;
        height: 212px;
        padding: 24px;
    }

    .account_settings__profile_card--line {
        width: 352px;
    }

    .account_settings__profile_card {
        grid-auto-flow: row;
    }

    .product_order {
        width: 100%;
        max-width: 680px;
    }

    .contact__info {
        width: auto;
    }

    .contacts {
        gap: 14px 2%;
    }

    .contact {
        width: 49%;
    }

    .store__info {
        width: auto;
        grid-area: store__info;
        align-self: flex-end;
    }

    .store__schedule {
        width: auto;
        grid-area: store__schedule;
        align-self: flex-start;
    }

    .store__map {
        grid-area: store__map;
    }

    .store {
        display: grid; 
        grid-template-columns: 45% 55%; 
        grid-template-rows: auto auto; 
        gap: 8px;
        grid-template-areas: 
            "store__info store__map"
            "store__schedule store__map"; 
    }
    
    .blog__post {
        width: 100%;
    }

    .blog__post__main_img {
        height: 320px;
    }

    .blog__post__img {
        height: 352px;
    }

    .blog__post__prodcuts_mini {
        height: 352px;
    }

    .header_mobile {
        min-height: 90%;
        position: absolute;
        padding: 24px 0px;
        background-color: var(--color-white);
        z-index: 8;
        box-shadow: 0px 50px 40px -30px var(--color-secondary);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 24px;
        border-radius: 0px 0px 42px 42px;
    }
}


@media screen and (max-width: 900px){
    .grid-l {
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
    }

    .grid-h {
        grid-template-columns: repeat(4, 1fr);
        justify-items: center;
    }

    .product_card_skeleton {
        height: 352px;
    }
    
    .product_card_skeleton--image {
        height: 190px;
    }

    .product_card_skeleton--text {
        height: 28px;
    }
    
    .product_card_skeleton--price {
        height: 20.8px;
    }
    
    .product_card_skeleton--text_mini {
        height: 13px;
    }
    
    .product_card_skeleton--btn {
        height: 48px;
    }
}

@media screen and (max-width: 768px){
    .header__logo {
        height: 36px;
    }

    .btn_s {
        min-height: 39px;
        padding: 12px;
    }

    header .btn_s img {
        height: 20px;
        width: 20px;
        margin: 0;
    }

    .btn_t {
        min-height: 32px;
        padding: 8px;
    }

    header .btn_t img {
        height: 20px;
        width: 20px;
        margin: 0px;
    }

    .hide-768 {
        display: none;
    }

    .pv-l {
        padding: 14px 0px;
    }

    .categories {
        grid-template-columns: repeat(2, 1fr);
    }

    .categories_all {
        grid-column: span 2;
        height: 108px;
    }

    .bg-custom {
        background-size: cover;
    }

    .subcategory_card {
        height: 108px;
    }

    .bg-pattern {
        background-size: cover;
    }

    .subcategory_card__composition {
        height: 130px;
        width: 130px;
        right: -28px;
        top: -10px;
    }

    .grid-l {
        gap: 0px;
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-h {
        gap: 0px;
        grid-template-columns: repeat(3, 1fr);
    }

    .loyalty_program {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "loyalty_program__discount"
        "loyalty_program__client"
        "loyalty_program__promo";
    }

    .loyalty_program__promo {
        height: 132px;
    }

    .mobile-hide {
        display: none;
    }

    .mobile-d-f {
        display: flex;
        flex-direction: row;
    }

    .mobile-d-fc {
        display: flex;
        flex-direction: column;
    }

    .mobile-w100 {
        width: 100%;
    }

    .fs-h {
        font-size: 20px;
    }
    
    .fs-l {
        font-size: 20px;
    }

    .fs-ml {
        font-size: 16px;
    }

    .fs-m {
        font-size: 12px;
    }

    .fs-s {
        font-size: 12px;
    }
    
    .fs-es {
        font-size: 10px;
    }

    .map_block {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 20px;
        right: 0px;
        top: 0px;
        border-radius: 24px;
        padding: 24px;
    }

    .footer__logo {
        width: 50%;
        height: auto;
    }

    .mobile-jc-c {
        justify-content: center;
    }

    .mobile-ai-c {
        align-items: center;
    }
    
    .mobile-ai-s {
        align-items: start;
    }

    .mobile-g-24 {
        gap: 24px;
    }

    .mobile-ai-s {
        align-items: start;
    }

    .mt-h {
        margin-top: 24px;
    }

    .pv-h {
        padding: 32px 0px;
    }

    .product_list_grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    select {
        width: 60%;
        font-size: 14px
    }

    .product {
        gap: 16px 24px;
        grid-template-columns: 100%;
        grid-template-areas:
        "product__img"
        "product__name"
        "product__action"
        "product__info";
    }

    .product_cart {
        display: grid; 
        grid-template-columns: 1fr 1fr 1fr 1fr; 
        grid-template-rows: 1fr 1fr; 
        gap: 4px 4px; 
        grid-template-areas: 
            "product_cart__img product_cart__name product_cart__name product_cart__name"
            "product_cart__img product_cart__btn product_cart__price_one product_cart__price_total"; 
    }
    
    .product_cart__img { grid-area: product_cart__img; }
    .product_cart__name {
        grid-area: product_cart__name;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .product_cart__btn { grid-area: product_cart__btn; }
    .product_cart__price_one { grid-area: product_cart__price_one; }
    .product_cart__price_total { grid-area: product_cart__price_total; }

    .product_cart__name--name {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .cart_action {
        margin-top: 24px;
        width: 100%;
        padding: 0px;
    }

    .CartBtn .add img {
        width: 14px;
        height: 14px;
    }

    .CartBtn {
        padding: 8px;
        min-height: 32px;
    }

    #order_create_form .grid-3 {
        grid-template-columns: 1fr;
    }

    #order_create_form .action {
        padding: 0px;
    }

    .account_settings__profile_card--card {
        width: 100%;
        height: auto;
        aspect-ratio: 1/0.6;
    }

    .account_settings__profile_card {
        padding: 12px;
    }

    .form_change {
        padding: 12px;
    }

    .form_change {
        width: 100%;
    }

    .account_settings__tabs {
        grid-auto-rows: auto;
    grid-auto-columns: auto;
    }

    .product_order {
        display: grid; 
        grid-template-columns: 1fr 1fr 1fr; 
        grid-template-rows: 1fr min-content; 
        gap: 4px 4px; 
        grid-template-areas: 
            "product_order__img product_order__name product_order__name"
            "product_order__price_one product_order__quantity product_order__price_total"; 
    }
    
    .product_order__img { grid-area: product_order__img; }
    .product_order__name {
        grid-area: product_order__name;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .product_order__quantity { grid-area: product_order__quantity; }
    .product_order__price_one { grid-area: product_order__price_one; }
    .product_order__price_total { grid-area: product_order__price_total; }

    .product_order__name--name {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        font-size: 12px;
    }

    .product_order__img {
        width: 90px;
        height: 90px;
    }

    .product_cart__img {
        width: 90px;
        height: 90px;
    }

    #search_filter {
        width: 64%;
    }

    input {
        font-size: 14px;
    }

    .mobile-show {
        display: block;
    }

    .contact {
        width: 100%;
    }

    .store__map {
        width: 100%;
    }

    .store {
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas:
        "store__info"
        "store__schedule"
        "store__map";
    }

    .product_card__img {
        height: 190px;
    }

    .mobile_filter_close {
        width: 42px;
    }

    .blog__post__main_img {
        height: 225px;
    }

    .blog__post__img {
        height: 225px;
    }

    .blog__post__prodcuts_mini {
        height: auto;
    }

    .blog__post__grid_TIP {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: min-content;
        gap: 24px;
        grid-template-areas: 
        "blog__post__text blog__post__image"
        "blog__post__prodcuts_mini blog__post__prodcuts_mini"; 
    }

    .blog__post__grid_TP {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content;
        gap: 24px;
        grid-template-areas: 
        "blog__post__text"
        "blog__post__prodcuts_mini"
    }

    .blog__post__grid_TI {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content;
        gap: 24px;
        grid-template-areas: 
        "blog__post__image"
        "blog__post__text"
    }

    .blog__post__grid_IP {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content;
        gap: 24px;
        grid-template-areas: 
        "blog__post__image"
        "blog__post__prodcuts_mini"
    }

    .product_list_pagination .btn_s {
        min-height: auto;
        width: 28px;
        height: 28px;
        padding: 4px;
    }

    .product_list_pagination {
        gap: 4px;
    }

    .tags_filter {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: scroll;
    }

    .product_card_skeleton {
        height: 336px;
    }
    
    .product_card_skeleton--image {
        height: 190px;
    }

    .product_card_skeleton--text {
        height: 28px;
    }
    
    .product_card_skeleton--price {
        height: 20.8px;
    }
    
    .product_card_skeleton--text_mini {
        height: 13px;
    }
    
    .product_card_skeleton--btn {
        height: 32px;
    }

    .FavouriteBtn__icon {
        width: 20px;
        height: 20px;
    }

    .modal__inner {
        width: 94%;
        max-width: 520px;
    }

    .order-created-svg {
        width: 40px;
        height: 40px;
    } 

    .email-timeout-svg {
        width: 40px;
        height: 40px;
    }
    
    .product__info--characteristics .characteristic .characteristic__name {
        white-space: break-spaces;
    }
}   

@media screen and (max-width: 512px){
    .product_list_grid {
        grid-template-columns: 1fr 1fr;
    }

    .grid-l {
        grid-template-columns: repeat(2, 1fr);
    }

    .modal__inner {
        padding: 32px;
    }

    .account_settings__profile_card {
        grid-auto-columns: 100%;
    }

    .account_settings__profile_card--line {
        width: 100%;
    }
}

@media screen and (max-width: 390px){
    .header__logo {
        width: 100%;
    }

    .product_card__img {
        height: 210px;
    }

    .product_list_grid {
        grid-template-columns: 1fr;
    }

    #count_products {
        display: none;
    }

    select {
        width: 100%;
    }
}

@media screen and (max-width: 340px) {
    .w-340--df-c {
        display: flex;
        flex-direction: column;
    }
}