/* #region import fonts */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

/* #endregion */


/* #region main html elements */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Poppins', sans-serif;
    overflow: visible !important;
    overflow-x: clip !important;
    scroll-behavior: smooth;
}

html:has(.modal-filter.active),
html:has(.share-area-filter.active),
html:has(#header-menu-mobile-filter.active),
html:has(#main-popup-filter.active),
body:has(.modal-filter.active),
body:has(.share-area-filter.active),
body:has(#header-menu-mobile-filter.active),
body:has(#main-popup-filter.active) {
    overflow: hidden !important;
}

.grecaptcha-badge {
    display: none !important;
}

/* #endregion */


/* #region variables */

:root {
    --site-red: #ff4c4c;
    --site-orange: #ff8d00;
    --site-orange2: #ffca15;
    --site-light-red: #fee0e0;
    --site-white: #ffffff;
    --site-black: #000000;
    --line-color: #d2d2d2;
    --footer-bg: #f4f4f4;
    --site-gray: #404040;
    --breadcrumb-bg: #f4f4f4;
    --site-light-gray: #cecccc;
    --site-antrasit: #666666;
    --transfer-badge-blue: #007bff;
    --site-green: #008000;
    --wp-green: #49ab3c;
    --text-color: rgb(70, 70, 70);
    --contact-form-bg: #ffe0dd;
    --promotion-item-label-color: #bcbdbb;


    --product-card-img-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);

    --topBar-fsize: 0.9em;
    --header-user-fsize: 0.8em;
    --hu-count-fsize: 0.8em;
    --header-menu-fsize: 1em;
    --slider-title-fsize: 2.375em;
    --slider-desc-fsize: 1.2em;
    --btn-fsize: 1em;
    --product-card-title-fsize: 1em;
    --product-card-price-fsize: 1em;
    --ftr-h3-fsize: 1.3em;
    --ftr-li-fsize: 1em;
    --ftr-sub-fsize: 0.95em;
    --plfi-info-text-h4-fsize: 1em;
    --plfi-info-text-p-fsize: 0.8em;
    --filter-title-h3-fsize: 1.4em;
    --filter-li-fsize: 1em;
    --sort-select-fsize: 0.9em;
    --breadcrumb-title-fsize: 1.4em;
    --breadcrumb-li-fsize: 1em;
    --product-card-badge-fsize: 0.75em;
    --pla-opened-filters-fsize: 0.8em;
    --pd-model-code-fsize: 0.9em;
    --pd-transfer-discount-fsize: 1em;
    --pd-ictxt-text-fsize: 0.95em;
    --pd-table-td-fsize: 1.1em;
    --cart-product-txt-p-fsize: 0.9em;
    --cart-summary-item-fsize: 1.1em;
    --cart-summary-item-discount-fsize: 1em;
    --cart-summary-safety-payment-fsize: 0.9em;
    --csa-ictx-fsize: 1.1em;
    --cart-product-price-fsize: 1em;
    --paa-address-content-p-fsize: 1em;
    --t-col-label-fsize: 1.1em;
    --pm-note-fsize: 0.95em;
    --transfer-item-p-fsize: 1em;
    --agreement-onay-p-fsize: 0.9em;
    --login-sb-txt-fsize: 0.9em;
    --transfer-badge-fsize: 0.8em;
    --order-detail-val-fsize: 1em;
    --orders-table-btn-fsize: 0.9em;
    --order-detail-product-txt-fsize: 1em;
    --sa-item-p-fsize: 1em;
    --tab-title-fsize: 1.2em;
    --mcart-product-txt-p-fsize: 1.1em;
    --mcart-total-p-fsize: 1.2em;
    --mcart-free-delivery-p-fsize: 0.95em;
    --add-note-note-limit-fsize: 0.9em;
    --other-blog-txt-span-fsize: 0.9em;
    --tpa-tabs-ul-li-fsize: 1.8em;
    --pdt-tabs-ul-li-fsize: 1.2em;
    --cart-product-before-fsize: 0.9em;
    --mobile-sub-menu-li-fsize: 1em;
    --pd-counter-fsize: 1em;
    --pd-detail-counter-fsize: 1.2em;
    --mcart-variants-p-fsize: 0.9em;
    --product-card-badge-mini-fsize: 0.65em;
    --promotion-item-countdown-label-fsize: 0.75em;

    --h2-fsize: 1.8em;
    --h3-fsize: 1.5em;
    --h4-fsize: 1.3em;
    --p-fsize: 1.1em;

    --site-ara-space: 50px;
}

@media (max-width: 1360px) {
    :root {
        --pdt-tabs-ul-li-fsize: 1em;
    }
}

@media (max-width: 1280px) {
    :root {
        --header-menu-fsize: 0.9em;
    }
}

@media (max-width: 1024px) {
    :root {
        --h2-fsize: 1.6em;
    }
}

@media (max-width: 768px) {
    :root {
        --slider-title-fsize: 1.8em;
        --slider-desc-fsize: 1em;
        --btn-fsize: 0.95em;
        --tpa-tabs-ul-li-fsize: 1.4em;
    }
}

@media (max-width: 520px) {
    :root {
        --product-card-title-fsize: 0.9em;
        --product-card-price-fsize: 0.8em;
        --product-card-badge-fsize: 0.7em;
        --tpa-tabs-ul-li-fsize: 1em;
        --site-ara-space: 30px;
        --tab-title-fsize: 1em;
        --cart-product-txt-p-fsize: 0.8em;
        --topBar-fsize: 0.8em;
    }
}

@media (max-width: 450px) {
    :root {
        --product-card-title-fsize: 0.8em;
        --product-card-price-fsize: 0.65em;
        --product-card-badge-fsize: 0.6em;
        --mobile-sub-menu-li-fsize: 0.8em;
    }
}

/* #endregion */


/* #region Text Elements */

h1 {
    font-size: var(--h2-fsize);
}

h2 {
    font-size: var(--h2-fsize);
    font-weight: 600;
}

h3 {
    font-size: var(--h3-fsize);
}

h4 {
    font-size: var(--h4-fsize);
}

p {
    font-size: var(--p-fsize);
    line-height: 1.6;
    color: var(--text-color);
}

.title-line {
    position: relative;
    padding-left: 15px;
}

.title-line::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 8px;
    height: 92%;
    background-color: var(--site-red);
}

@media (max-width: 768px) {
    .title-line::before {
        height: 100%;
    }
}

/* #endregion */


/* #region max width */

.mw-90 {
    max-width: 90%;
}

/* #endregion */


/* #region container */

.container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
}

@media (max-width: 1440px) {
    .container {
        max-width: 1280px;
    }
}

@media (max-width: 1360px) {
    .container {
        max-width: 1024px;
    }
}

@media (max-width: 1080px) {
    .container {
        max-width: 768px;
    }
}

@media (max-width: 820px) {
    .container {
        max-width: 640px;
    }
}

@media (max-width: 680px) {
    .container {
        max-width: 95%;
    }
}

/* #endregion */


/* #region padding & margin */

.pv-site {
    padding-top: var(--site-ara-space);
    padding-bottom: var(--site-ara-space);
}

.pb-site {
    padding-bottom: var(--site-ara-space);
}

.pt-site {
    padding-top: var(--site-ara-space);
}

.mt-site-half {
    margin-top: calc(var(--site-ara-space) / 2);
}

.mt-site {
    margin-top: var(--site-ara-space);
}

.pb-site-half {
    padding-bottom: calc(var(--site-ara-space) / 2);
}

.pv-site-half {
    padding-top: calc(var(--site-ara-space) / 2);
    padding-bottom: calc(var(--site-ara-space) / 2);
}

.pt-site-half {
    padding-top: calc(var(--site-ara-space) / 2);
}

.pb-site-half {
    padding-bottom: calc(var(--site-ara-space) / 2);
}

/* #endregion */


/* #region top bar */

.topBar {
    width: 100%;
    background-color: var(--site-red);
    color: var(--site-white);
    display: flex;
    align-items: center;
    padding: 7px 0;
    position: relative;
    z-index: 101;
}

.topBar-item {
    width: fit-content;
    display: flex;
    gap: 10px;
    align-items: center;
}

.topBar-item span,
.topBar-item a {
    font-size: var(--topBar-fsize);
    display: block;
}

.topBar-item img {
    width: 23px;
    height: 23px;
}

@media (max-width: 768px) {
    .topBar-item:not(.main) {
        display: none;
    }

    .topBar-item.main {
        margin: 0 auto;
        text-align: center;
    }
}

.hvr-sub-line:hover {
    text-decoration: underline;
}

/* #endregion */


/* #region header */

header {
    width: 100%;
    background-color: var(--site-white);
    border-bottom: 1px solid var(--line-color);
    display: flex;
    align-items: center;
    padding: 20px 0;
    z-index: 101;
    position: relative;
}

header .container {
    gap: 20px;
}

.header-search-input-box {
    position: relative;
}

.header-search-input {
    border-radius: 0;
    border: 1px solid var(--line-color);
    height: 40px;
    width: 280px;
    padding: 10px 40px 10px 15px;
}

.header-search-input-box img {
    width: 23px;
    height: 23px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.header-logo {
    width: auto;
    height: 40px;
}

.header-user-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-user-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-user-item span {
    font-size: var(--header-user-fsize);
    display: block;
}

.header-user-item img {
    width: 20px;
    height: 20px;
    margin-top: -2px;
}

.hu-count {
    position: absolute;
    display: block;
    background-color: var(--site-red);
    color: var(--site-white);
    border-radius: 100%;
    width: 17px;
    height: 17px;
    text-align: center;
    line-height: 17px;
    aspect-ratio: 1/1;
    font-size: var(--hu-count-fsize) !important;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    z-index: 1;
}

.menu-btn {
    display: none;
}

@media (max-width: 1080px) {
    .header-desktop {
        display: none;
    }
}

@media (max-width: 768px) {
    .header-user-item span:not(.hu-count) {
        display: none;
    }

    .header-user-item {
        width: 20px;
        height: 20px;
        margin-top: 0;
    }

    header {
        padding: 20px 0;
    }

    .menu-btn {
        display: block;
        flex-shrink: 0;
        width: 25px;
        height: 25px;
    }

    .menu-btn img {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 480px) {
    .header-logo {
        width: auto;
        height: 30px;
    }
}

@media (max-width: 450px) {
    .yokl-450 {
        display: none;
    }
}

/* #endregion */


/* #region header menu */

.header-menu {
    width: 100%;
    background-color: var(--site-white);
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-menu ul {
    display: flex;
    align-items: start;
    gap: 30px;
    background-color: var(--site-white);
}

.header-menu ul::before {
    width: 100%;
    content: '';
    position: absolute;
    height: 100%;
    left: 0;
    background: var(--site-white);
}

.header-menu ul li {
    font-size: var(--header-menu-fsize);
    display: block;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--site-white);
    width: 100%;
}

.header-menu ul li>a {
    padding-right: 20px;
    padding-top: 13px;
    padding-bottom: 13px;
    display: block;
    white-space: nowrap;
}

.header-menu>ul>li:hover {
    color: var(--site-red);
}

.header-menu ul li.header-menu--red a {
    color: var(--site-red);
}


.header-menu>ul>li.have-sub.header-menu--red:before {
    background: var(--site-red);
    -webkit-mask: url('../images/menu-sub-arrow.svg') no-repeat center/cover;
    mask: url('../images/menu-sub-arrow.svg') no-repeat center/cover;
}

.header-menu ul li.header-menu--red:hover > a {
    color: var(--site-red);
}

.header-menu ul li.header-menu--black a {
    color: #333;
}

.header-menu ul li.header-menu--black:hover > a {
    color: var(--site-red);
}

.header-menu-sub ul li.header-menu--red a {
    color: var(--site-red);
}

.header-menu-sub ul li.header-menu--black a {
    color: #333;
}

.header-menu ul li.have-sub:before {
    content: '';
    position: absolute;
    background-image: url('../images/menu-sub-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 12px;
    height: 12px;
    top: 50%;
    transform: translate(0%, -50%);
    right: 2px;
}

.header-menu>ul>li.have-sub:hover:before {
    background: var(--site-red);
    -webkit-mask: url('../images/menu-sub-arrow.svg') no-repeat center/cover;
    mask: url('../images/menu-sub-arrow.svg') no-repeat center/cover;
}

.header-menu.shadow {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
}

.header-menu-sub {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--site-white);
    width: fit-content;
    min-width: 250px;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    transform: translateY(-100%);
    z-index: -1;
}

.header-menu-sub .header-menu-sub {
    top: 0;
    transform: translateY(0);
}

.header-menu-sub li:hover>.header-menu-sub {
    left: 100%;
}

.header-menu ul li:hover>.header-menu-sub {
    opacity: 1;
    visibility: visible;
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

.header-menu-sub ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.header-menu-sub ul li {
    padding: 0;
}

.header-menu-sub ul li a {
    font-size: var(--header-menu-fsize);
    display: block;
    padding: 15px 20px;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--site-black);
    position: relative;
}

.header-menu-sub ul li:not(:last-child) a {
    border-bottom: 1px solid var(--line-color);
}

.header-menu-sub ul li:hover a {
    background-color: var(--footer-bg);
    color: var(--site-red);
}

.header-menu-sub ul li.have-sub:before a {
    right: 20px;
    transform: translateY(-50%) rotate(-90deg);
}

.header-menu-sub ul li.have-sub:hover:before a {
    background: var(--site-red);
    -webkit-mask: url('../images/menu-sub-arrow.svg') no-repeat center/cover;
    mask: url('../images/menu-sub-arrow.svg') no-repeat center/cover;
}

.highlighted {
    color: var(--site-red);
}

.highlighted:hover {
    color: var(--site-black) !important;
}

@media (max-width: 768px) {
    .header-menu {
        display: none;
    }
}

/* #endregion */


/* #region buttons */

.btn {
    font-size: var(--btn-fsize);
    padding: 7px 25px;
    border-radius: 0;
    display: block;
    width: fit-content;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 150px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: none !important;
}

.btn span img {
    max-height: 17px;
    max-width: 17px;
}

@media (max-width: 1080px) {
    .btn {
        padding: 8px 20px;
        min-width: 100px;
    }

    .btn span img {
        max-height: 15px;
        max-width: 15px;
    }
}

.btn span {
    display: flex;
    font-size: var(--btn-fsize);
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

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

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

.btn.bg-red:before,
.btn.btn-border:before,
.btn.bg-gray:before,
.btn.bg-black:before,
.btn.bg-light-gray:before {
    content: '';
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 0;
    transition: all 0.3s ease;
    width: 0;
}

@media (hover: hover) and (pointer: fine) {

    .btn.bg-red:hover:before,
    .btn.btn-border:hover:before,
    .btn.bg-gray:hover:before,
    .btn.bg-black:hover:before,
    .btn.bg-light-gray:hover:before {
        width: 100%;
    }
}


.btn.btn-border {
    border: 1px solid var(--site-black);
    color: var(--site-black);
}

.btn.bg-red:before,
.btn.btn-border:before {
    background-color: var(--site-black);
}

@media (hover: hover) and (pointer: fine) {
    .btn.btn-border:hover span {
        color: var(--site-white);
    }
}

.btn.btn-border span img {
    filter: brightness(0) invert(0);
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .btn.btn-border:hover span img {
        filter: brightness(0) invert(1);
    }
}

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

.btn.no-radius {
    border-radius: 0;
}

.btn.no-radius:before {
    border-radius: 0 !important;
}

.btn.bg-gray:before {
    background-color: var(--site-black);
}

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

@media (hover: hover) and (pointer: fine) {
    .btn.bg-black:hover span {
        color: var(--site-white);
    }
}

.btn.bg-black span img {
    filter: brightness(0) invert(0);
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .btn.bg-black:hover span img {
        filter: brightness(0) invert(1);
    }
}

.btn.bg-black:before {
    background-color: var(--site-red);
}

.btn.w-full {
    width: 100%;
}

.btn.bg-light-gray {
    background-color: var(--site-light-gray);
    color: var(--site-black);
}

@media (hover: hover) and (pointer: fine) {
    .btn.bg-light-gray:hover span {
        color: var(--site-white);
    }
}

.btn.bg-light-gray span img {
    filter: brightness(0) invert(0);
    transition: all 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .btn.bg-light-gray:hover span img {
        filter: brightness(0) invert(1);
    }
}

.btn.bg-light-gray:before {
    background-color: var(--site-black);
}

.btn.radius-mini {
    border-radius: 9px;
    border-radius: 0;
}

.btn.radius-mini:before {
    border-radius: 9px;
    border-radius: 0;
}

.cart-added-btn::before,
.cart-added-btn::after {
    display: none;
}

.cart-added-btn {
    background-color: var(--site-red) !important;
    color: var(--site-white) !important;
}

.cart-added-btn.rd {
    background-color: var(--site-red) !important;
}

/* #endregion */


/* #region home slider */

.home-slider {
    width: 100%;
    height: auto;
    aspect-ratio: 2560/935;
}

.hs-item {
    width: 100%;
    height: 100%;
    position: relative;
}

.home-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hs-content-area {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, var(--slider-filter-opacity));
}

.hs-content {
    width: fit-content;
    height: fit-content;
    max-width: 520px;
}

@media (max-width: 1024px) {
    .hs-content {
        max-width: 400px;
    }
}

.slider-title {
    font-size: var(--slider-title-fsize);
    color: var(--site-white);
}

.slider-desc * {
    font-size: var(--slider-desc-fsize);
    color: var(--site-white);
}

.slider-desc {
    margin-top: 30px;
    margin-bottom: 30px;
}

.hs-content-area-dark-text .slider-title,
.hs-content-area-dark-text .slider-desc * {
    color: var(--site-black);

}

.hs-content-area-right-text .hs-content {
    margin-left: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

@media (max-width: 1024px) {
    .home-slider {
        aspect-ratio: 1024/550;
    }

    .slider-desc {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .home-slider {
        aspect-ratio: 480/560;
    }
}

/* #endregion */


/* #region tab product area */

.tpa-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.tpa-tabs ul {
    display: flex;
    align-items: center;
    gap: 40px;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
}

.tpa-tabs ul li {
    font-size: var(--tpa-tabs-ul-li-fsize);
    display: block;
    cursor: pointer;
    user-select: none;
}

.tpa-tabs-line {
    height: 6px;
    background-color: var(--site-red);
    position: absolute;
    bottom: -5px;
    left: 0;
    transition: all 0.4s ease;
}

.tpa-tab-contents {
    display: flex;
    transition: all 0.4s ease;
    height: fit-content !important;
}

.tpa-tab-content {
    visibility: hidden;
    transition: all 0.4s ease;
    opacity: 0;
    display: none;
    overflow: hidden;
    padding: 3px;
    width: 100%;
    height: fit-content !important;
}

.tpa-tab-content .ttc-d {
    display: flex;
    column-gap: 20px;
    row-gap: 25px;
    flex-wrap: wrap;
    width: 100%;
    height: fit-content !important;
}

.tpa-tab-content.active {
    visibility: visible;
    opacity: 1;
    display: flex;
}

.tpa-tab-content .ttc-d .product-card {
    width: calc(20% - 16px);
}

.tpa-tab-content .ttc-m {
    width: 100%;
    display: none;
}

.tpa-tab-contents {
    margin-top: 30px;
}

@media (max-width: 1360px) {
    .tpa-tab-content .ttc-d .product-card {
        width: calc(25% - 15px);
    }

    .tpa-tab-content,
    .tpa-tab-contents {
        height: fit-content !important;
    }
}

@media (max-width: 825px) {
    .tpa-tab-content .ttc-d .product-card {
        width: calc(33.33% - 13.333px);
    }
}

@media (max-width: 768px) {
    .tpa-tabs ul {
        gap: 20px;
    }
}

@media (max-width: 560px) {
    .tpa-tab-content .ttc-d .product-card {
        width: calc(50% - 10px);
    }

    :root {
        --cart-summary-item-discount-fsize: 0.9em !important;
    }
}

@media (max-width: 480px) {
    .tpa-tabs ul {
        gap: 10px;
    }

    .tpa-tabs ul li {
        text-align: center;
        position: relative;
        border: 1px solid var(--line-color);
        padding: 5px 10px;
        transition: all 0.3s ease;
        border-radius: 5px;
    }

    .tpa-tabs-line {
        display: none;
    }

    .tpa-tabs ul li.active {
        background-color: var(--site-black);
        border-color: var(--site-black);
        color: var(--site-white);
    }

    .tpa-tab-contents {
        margin-top: calc(var(--site-ara-space) / 2);
    }
}

/* #endregion */


/* #region product card */

.product-card {
    height: fit-content;
    cursor: pointer;
}

.product-card-img {
    width: 100%;
    height: auto;
    aspect-ratio: 12/16;
    overflow: hidden;
    border-radius: 0;
    position: relative;
    box-shadow: var(--product-card-img-shadow);
}

.product-card-img-video {
    width: 100%;
    height: 100%;
    aspect-ratio: 12/16;
    overflow: hidden;
    border-radius: 0;
    position: relative;
    box-shadow: var(--product-card-img-shadow);
}

.product-card-img-video .product-crd-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 1;
    transition: all 0.3s ease;
}

.product-card-img-video .product-crd-img.selected-img {
    opacity: 1;
}

.product-card-video-icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    background-color: var(--site-red);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 60% 50%;
    z-index: 3;
    border-radius: 100%;
    border: 2px solid var(--site-white);
    background-image: url('../images/play.svg');
    opacity: 1;
    transition: all 0.3s ease;
}

.product-card-img:has(.product-card-img-video.imgv-video) .product-card-video-icon {
    opacity: 0 !important;
}

.product-card-img-video .product-crd-video {
    width: 100%;
    aspect-ratio: 356/632;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    opacity: 0;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

.product-card-img-video.imgv-video .product-crd-video {
    opacity: 1;
}

.product-card-img-video.imgv-video .product-card-img-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 2;
}

.product-card-img:has(.product-card-img-video.imgv-video) .campaign-badge {
    opacity: 0;
}

.product-card-img:hover .campaign-badge {
    opacity: 0;
}

.product-card-img-video .img-sections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
}

.product-card-img-video .img-section {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.product-card-title {
    margin-top: 20px;
}

.product-card-title span {
    font-size: var(--product-card-title-fsize);
    font-weight: 500;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.product-card-price .product-normal-price {
    font-size: var(--product-card-price-fsize);
}

.product-card-price .product-discount-rate {
    font-size: var(--product-card-price-fsize);
    font-weight: 500;
}

.product-card-price .product-old-price {
    font-size: var(--product-card-price-fsize);
    font-weight: 500;
    text-decoration: line-through;
    color: var(--site-antrasit);
}

.product-card-price .product-new-price {
    font-size: var(--product-card-price-fsize);
    color: var(--site-red);
    font-weight: 500;
}

.product-card-price {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.product-discount-arrow {
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 14px solid var(--site-red);
    border-radius: 3px;
}

.product-discount-area {
    display: flex;
    align-items: center;
    gap: 5px;
}

.campaign-badge {
    position: absolute;
    left: 0;
    bottom: 45px;
    padding: 5px 10px;
    background-color: var(--site-red);
    max-width: 100%;
    z-index: 3;
    transition: all 0.3s ease;
}

.campaign-badge span {
    font-size: var(--product-card-badge-fsize);
    color: var(--site-white);
    display: block;
}

.pci-btns {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    transform: scale(0.7);
    z-index: 5;
}

.pci-btns .pci-btn {
    width: 33px;
    height: 33px;
    background-color: var(--site-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pci-btns .pci-btn img,
.add-favorites-icon,
.add-compare-icon {
    width: 20px;
    height: 20px;
}

.add-favorites-icon {
    background-image: url('../images/heart.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.add-favorites.active .add-favorites-icon {
    background-image: url('../images/heart-filled.svg');
}

.add-compare-icon {
    background-image: url('../images/compare.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.add-compare.active .add-compare-icon {
    background-image: url('../images/tick.svg');
}

.product-atc {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background-color: var(--site-white);
    border-radius: 100%;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.7);
}

.product-atc .patc-plus-1 {
    width: 17px;
    height: 3px;
    background-color: var(--site-black);
    position: absolute;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.product-atc .patc-plus-2 {
    width: 3px;
    height: 17px;
    background-color: var(--site-black);
    position: absolute;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.product-atc.active {
    background-color: var(--site-red);
}

.product-atc.active .patc-plus-1 {
    background-color: var(--site-white);
    transform: rotate(45deg) translateY(160%) translateX(10%);
    width: 35%;
}

.product-atc.active .patc-plus-2 {
    background-color: var(--site-white);
    transform: rotate(25deg) translateY(-8%) translateX(123%);
    height: 55%;
}

.product-card:hover .pci-btns,
.product-card:hover .product-atc {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.discount-counter {
    position: absolute;
    width: calc(100% - 10px);
    height: 30px;
    background-color: var(--site-orange);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-white);
    font-size: var(--pd-counter-fsize);
    z-index: 3;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
}

.product-card-img:hover .discount-counter {
    opacity: 0;
}

.product-card-image-swiper {
    height: 100%;
}

.product-card-title .pci-btn.add-favorites {
    display: none;
}

@media (max-width: 560px) {
    .pci-btns {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        top: 15px;
        right: 15px;
    }

    .pci-btns {
        display: none !important;
    }

    .pci-btns .pci-btn {
        width: 30px;
        height: 30px;
        border-radius: 5px;
    }

    .product-card-video-icon {
        z-index: 10;
    }

    .product-card-img:has(.product-card-img-video.imgv-video) .product-card-video-icon {
        opacity: 1 !important;
        background-image: url('../images/pause.svg');
        background-position: center;
    }

    .img-sections {
        display: none !important;
    }

    .campaign-badge {
        padding: 3px 5px;
        bottom: auto;
        top: 20px;
    }

    .product-card-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .add-favorites-icon {
        width: 16px;
        height: 16px;
    }

    .product-card-video-icon {
        bottom: 15px;
        right: 15px;
    }

    .product-card-title .pci-btn.add-favorites {
        display: block;
    }
}

@media (max-width: 480px) {
    .product-discount-arrow {
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 10px solid var(--site-red);
        border-radius: 3px;
    }

    .product-card-price {
        gap: 5px;
    }

    .product-card-title {
        margin-top: 10px;
    }

    .product-card-title a {
        line-height: 1.1;
    }
}

/* #endregion */


/* #region home vitrin double */

.home-vitrin-double {
    width: 100%;
    display: flex;
    position: relative;
}

.home-vitrin-double-item {
    width: 100%;
    position: relative;
}

.hvdi-img {
    width: 100%;
    height: auto;
    aspect-ratio: 70/51;
    overflow: hidden;
    border-radius: 0;
}

.hvdi-content {
    width: fit-content;
    height: fit-content;
    position: absolute;
    bottom: 50px;
    left: 50px;
}

.hvdi-content .btn {
    margin-top: 10px;
}

.double-vitrin-slider {
    border-radius: 0;
    overflow: hidden;
}

.double-vitrin-slider,
.double-vitrin-slider .swiper-wrapper,
.double-vitrin-slider .swiper-slide {
    width: 100%;
}

@media (max-width: 1080px) {
    .hvdi-content {
        bottom: 30px;
        left: 30px;
    }
}

@media (max-width: 768px) {

    .hvdi-content h2,
    .hvsi-content h2,
    .hvti-content h2 {
        font-size: 1.4em;
    }

    .hvdi-content .btn,
    .hvsi-content .btn,
    .hvti-content .btn {
        padding: 6px 18px;
    }
}

@media (max-width: 700px) {
    .home-vitrin-double-item {
        width: 100%;
    }
}

/* #endregion */


/* #region home vitrin single */

.home-vitrin-single {
    width: 100%;
    display: flex;
    position: relative;
}

.single-vitrin-slider {
    border-radius: 0;
    overflow: hidden;
}

.single-vitrin-slider,
.single-vitrin-slider .swiper-wrapper,
.single-vitrin-slider .swiper-slide {
    width: 100%;
}

.home-vitrin-single-item {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.hvs-img {
    width: 100%;
    height: auto;
    aspect-ratio: 136/51;
    overflow: hidden;
    border-radius: 0;
}

.hvs-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hvsi-content {
    width: fit-content;
    height: fit-content;
    position: absolute;
    bottom: 50px;
    left: 50px;
    max-width: 60%;
}

.hvsi-content .btn {
    margin-top: 10px;
}

.product-card-imgs-pagination {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: fit-content;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 7px;
    padding: 7px;
    border-radius: 10px;
    transition: all 0.3s ease;
    align-items: center;
}

.product-card-imgs-pagination .product-card-img-pagination-item {
    width: 7px;
    height: 7px;
    background-color: var(--site-black);
    border-radius: 100%;
    transition: all 0.2s ease;
}

.product-card-imgs-pagination .product-card-img-pagination-item.active {
    background-color: var(--site-red);
}

@media (max-width: 1080px) {
    .hvsi-content {
        bottom: 30px;
        left: 30px;
    }
}

@media (max-width: 520px) {
    .hvs-img {
        aspect-ratio: 3/2;
    }
}

/* #endregion */


/* #region home vitrin triple */

.home-vitrin-triple {
    width: 100%;
    display: flex;
    position: relative;
    justify-content: center;
}

.triple-vitrin-slider {
    border-radius: 0;
    overflow: hidden;
}

.triple-vitrin-slider,
.triple-vitrin-slider .swiper-wrapper,
.triple-vitrin-slider .swiper-slide {
    width: 100%;
}

.home-vitrin-triple-item {
    width: 100%;
    position: relative;
}

.hvti-img {
    width: 100%;
    height: auto;
    aspect-ratio: 47/51;
    overflow: hidden;
    border-radius: 0;
}

.hvti-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hvti-content {
    width: fit-content;
    height: fit-content;
    position: absolute;
    bottom: 50px;
    left: 50px;
}

.hvti-content .btn {
    margin-top: 10px;
}

@media (max-width: 1360px) {
    .hvti-content {
        bottom: 30px;
        left: 30px;
    }
}



/* #endregion */


/* #region product list */

.product-list-5 {
    display: flex;
    flex-wrap: wrap;
}

.product-list-5 .product-card {
    width: 100%;
}

.product-swiper {
    overflow-x: clip;
    padding-left: 3px;
    padding-right: 3px;
}

.prli-va {
    margin-top: 20px;
    width: 100%;
    display: none;
}

.tpagination-area {
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 40px;
    border-top: 1px solid var(--footer-bg);
}

@media (max-width: 768px) {
    .tpagination-area {
        flex-wrap: wrap;
        height: auto;
        gap: 25px;
    }
}

.t-pagination {
    display: flex;
    align-items: center;
    gap: 5px;
}

.tpagination-per-page {
    width: fit-content;
}

.tpagination-btn,
.distpagination-btn {
    min-width: 30px;
    min-height: 0;
    width: fit-content;
    height: fit-content;
    padding: 5px 10px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.tpagination-btn:not(.srbbtn) {
    aspect-ratio: 1/1;
}

.tpagination-btn.btn-primary,
.distpagination-btn.btn-primary {
    background-color: var(--site-antrasit);
    color: var(--site-white);
}

.tpagination-btn.btn-secondary {
    background-color: var(--footer-bg);

    color: var(--site-black);
}

.tpagination-total {
    width: fit-content;
}

.tpagination-total label {
    font-size: 1em;
}

.pla-description-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    padding-top: 30px;
    border-top: 1px solid var(--footer-bg);
}

.product-list-mobile-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}

.product-list-mobile-2 .product-card {
    width: calc(50% - 10px);
}

@media (max-width: 480px) {
    .prli-va {
        display: block;
    }

    .prli-va-d {
        display: none;
    }
}

/* #endregion */


/* #region gift options */

.goa-img {
    border: 10px solid var(--site-white);
    width: 50%;
    height: auto;
    aspect-ratio: 6/5;
    position: relative;
    overflow: hidden;
}

.goa-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.goa-text {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 10%;
    max-width: 46.5%;
    overflow: hidden;
}

.goa-text .swiper-slide {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.goa-text .swiper-wrapper {
    display: flex;
    align-items: center;
}

.gvib {
    font-family: 'Great Vibes', cursive;
    color: var(--site-red);
    margin-top: 10px;
}

.goa-text .goa-desc * {
    margin-top: 20px;
    margin-bottom: 20px;
}

.goa-title {
    text-transform: uppercase;
}

.gift-options-area {
    position: relative;
}

.gift-options-area:before {
    content: '';
    position: absolute;
    width: 60%;
    height: 60%;
    background-color: var(--site-red);
    top: 50%;
    right: 0;
    z-index: -1;
    transform: translateY(-50%);
    opacity: 0.19;
}

.special-vitrin-text-slider {
    width: 100%;
    overflow: hidden;
}


@media (max-width: 1080px) {
    .goa-text {
        padding-right: 5%;
        max-width: 53.5%;
    }

    .gvib {
        margin-top: 5px;
    }

    .goa-text .goa-desc * {
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

@media (max-width: 820px) {
    .gift-options-area .container {
        flex-direction: column-reverse;
    }

    .goa-img {
        width: 100%;
        border: none;
    }

    .goa-text {
        max-width: 100%;
        align-items: flex-start;
        text-align: left;
        margin-top: 20px
    }

    .gift-options-area:before {
        display: none;
    }
}


/* #endregion */


/* #region footer */

footer {
    width: 100%;
    background-color: var(--footer-bg);
    transition: all 0.3s ease;
}

.ftr-cols {
    display: flex;
    gap: 30px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ftr-col {
    width: fit-content;
}

@media (min-width: 1360px) {
    .ftr-col {
        max-width: 20%;
    }
}

.footer-mbl {
    display: none;
}

@media (max-width: 1360px) {
    .ftr-cols {
        gap: 40px;
    }

    .ftr-col {
        width: calc(33.33% - 26.666px);
        flex-shrink: 0;
    }
}

@media (max-width: 820px) {
    .ftr-cols {
        margin-bottom: 40px;
    }

    .ftr-col {
        width: calc(50% - 20px);
    }
}

@media (max-width: 560px) {
    .ftr-cols {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .ftr-col {
        width: 95%;
    }

    .footer-nmbl {
        display: none;
    }

    .ftr-col .footer-title {
        position: relative;
        margin-bottom: 0;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .ftr-col .footer-title:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(0, -50%);
        width: 15px;
        height: 3px;
        background-color: var(--site-black);
    }

    .ftr-col .footer-title:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(-6px, -50%);
        width: 3px;
        height: 15px;
        background-color: var(--site-black);
        transition: all 0.3s ease;
    }

    .ftr-col ul {
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .ftr-col.active ul {
        height: var(--data-height) !important;
    }

    .ftr-col.active h3:after {
        transform: translate(-8px, -50%) rotate(-90deg);
    }

    .ftr-col.active .footer-title {
        margin-bottom: 20px;
    }

    .footer-mbl {
        display: block;
    }

    .footer-mbl .ftr-social {
        margin-top: 20px;
    }

    .ftr-banks {
        margin: 0;
    }

    .ftr-logo {
        height: 30px !important;
    }

    :root {
        --ftr-h3-fsize: 1.2em;
    }
}

.ftr-logo {
    width: auto;
    height: 40px;
}

.ftr-social {
    margin-top: 40px;
}

.ftr-social-icons {
    display: flex;
    gap: 10px;
}

.ftr-social-icons .fsi {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 1px solid var(--site-black);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.ftr-social-icons .fsi img {
    width: 50%;
    height: 50%;
    object-fit: contain;
    transition: all 0.3s ease;
}

.ftr-social-icons .fsi:hover {
    background-color: var(--site-red);
    border-color: var(--site-red);
}

.ftr-social-icons .fsi:hover img {
    filter: brightness(0) invert(1);
}

.ftr-col ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ftr-col ul li {
    font-size: var(--ftr-li-fsize);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ftr-col ul li:hover {
    color: var(--site-red);
}

.bulletin-input {
    width: 100%;
    padding: 10px 20px;
    background-color: var(--site-white);
    border: 1px solid var(--line-color);
    font-size: var(--p-fsize);
    margin-bottom: 20px;
}

.ftr-col h3 {
    margin-bottom: 20px;
    white-space: nowrap;
    font-size: var(--ftr-h3-fsize);
    font-weight: 500;
}

.ftr-sub {
    border-top: 1px solid var(--line-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.ftr-sub * {
    font-size: var(--ftr-sub-fsize);
}

/* #endregion */


/* #region breadcrumb */

.breadcrumb {
    width: 100%;
    background-color: var(--breadcrumb-bg);
    padding: 8px 0;
}

.breadcrumb .container {
    flex-wrap: wrap;
    gap: 20px;
}

.breadcrumb ul {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.breadcrumb ul li {
    font-size: var(--breadcrumb-li-fsize);
    color: var(--site-gray);
}

.breadcrumb ul li:last-child {
    color: var(--site-red);
}

.breadcrumb ul li:not(:last-child) {
    padding-right: 20px;
    position: relative;
}

.breadcrumb ul li:not(:last-child):after {
    content: '';
    width: 10px;
    height: 10px;
    background-image: url('../images/menu-sub-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
}

.breadcrumb-title {
    font-size: var(--breadcrumb-title-fsize);
    font-weight: 500;
}

.breadcrumb-home-btn svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 560px) {
    .breadcrumb-title {
        display: none;
    }
}

/* #endregion */


/* #region product list area */

.product-list-area {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.pla-filter-area {
    width: calc(20% - 20px);
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 235px;
    overflow-x: hidden;
}

.pla-filters-buttons {
    margin-top: 0px;
}

.pla-filter-area .pla-fa-item:not(:first-child):before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--line-color);
    top: -15px;
    left: 0;
    transform: translateY(50%);
}

.pla-fa-item {
    position: relative;
}

.pla-fa-item-title {
    width: 100%;
    position: relative;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.pla-fa-item.active .pla-fa-item-title {
    margin-bottom: 10px;
}

.pla-fa-item-title:before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background-image: url('../images/menu-sub-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    transition: all 0.3s ease;
}

.pla-fa-item.active .pla-fa-item-title:before {
    transform: translateY(-50%) rotate(-180deg);
}

.pla-fa-item-content {
    width: 110%;
    overflow: hidden;
    transition: all 0.3s ease;
    padding-right: 19px;
}

.pla-fa-item.active .pla-fa-item-content {
    height: var(--data-height) !important;
    overflow: auto;
}

.pla-fa-item-content ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pla-fa-item-content ul li {
    font-size: var(--filter-li-fsize);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.pla-fa-item-content ul li:hover {
    color: var(--site-red);
}

.pla-fa-item-content ul li.active {
    color: var(--site-red);
    font-weight: 700;
}

.pla-fa-item-content ul li.active a {
    color: var(--site-red);
    font-weight: 700;
}

.pla-fa-item-content ul li.plafa-menu--black a {
    color: #333;
}

.pla-fa-item-content ul li.plafa-menu--black:hover a {
    color: var(--site-red);
}

.pla-fa-item-content ul li.plafa-menu--black.active a {
    color: var(--site-red);
    font-weight: 700;
}

.pla-fa-item-content ul li.plafa-menu--red > .plafa-cat-title > a,
.pla-fa-item-content ul li.plafa-menu--red > a {
    color: var(--site-red) !important;
    font-weight: normal;
}

.pla-fa-item-content ul li.plafa-menu--red:hover a {
    color: var(--site-red);
}

.pla-fa-item-content ul li.plafa-menu--red.active a {
    color: var(--site-red);
    font-weight: 700;
}

/* Filter category tree (accordion) */
.pla-filter-area .plafa-cat-tree {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: hidden;
    min-width: 0;
}

.pla-filter-area .plafa-cat-extras {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line-color);
}

.pla-filter-area .plafa-cat-tree > li {
    position: relative;
    min-width: 0;
}

.pla-filter-area .plafa-cat-tree > li.plafa-cat-has-sub {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.pla-filter-area .plafa-cat-has-sub .plafa-cat-title {
    width: 100%;
    min-width: 0;
    position: relative;
    display: block;
    padding-right: 25px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.pla-filter-area .plafa-cat-has-sub .plafa-cat-title:before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background-image: url('../images/menu-sub-arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    transition: transform 0.35s ease;
}

.pla-filter-area .plafa-cat-has-sub.plafa-cat-open .plafa-cat-title:before {
    transform: translateY(-50%) rotate(-180deg);
}

.pla-filter-area .plafa-cat-has-sub .plafa-cat-title a {
    color: inherit;
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pla-filter-area .plafa-cat-has-sub.plafa-cat-open .plafa-cat-title,
.pla-filter-area .plafa-cat-has-sub.plafa-cat-open .plafa-cat-title a {
    color: var(--site-red);
}

.pla-filter-area .plafa-cat-has-sub .plafa-cat-title:hover,
.pla-filter-area .plafa-cat-has-sub .plafa-cat-title:hover a {
    color: var(--site-red);
}

.pla-filter-area .plafa-cat-children {
    border-left: 1px solid var(--line-color);
    margin: 8px 0 0 12px;
    padding: 0 0 0 15px;
    overflow: hidden;
    height: 0;
    transition: height 0.35s ease-out;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}

.pla-filter-area .plafa-cat-has-sub:not(.plafa-cat-open) .plafa-cat-children {
    border-width: 0;
    margin-top: 0;
    padding-top: 0;
}

.pla-filter-area .plafa-cat-tree .plafa-cat-children li {
    font-size: var(--filter-li-fsize);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 0;
}

.pla-filter-area .plafa-cat-tree .plafa-cat-children li a {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pla-filter-area .plafa-cat-tree .plafa-cat-children li.plafa-menu--black a {
    color: #333;
}

.pla-filter-area .plafa-cat-tree .plafa-cat-children li.plafa-menu--black:hover a {
    color: var(--site-red);
}

.pla-filter-area .plafa-cat-tree .plafa-cat-children li.plafa-menu--red a {
    color: var(--site-red);
}

.pla-filter-area .plafa-cat-tree .plafa-cat-children li.active a {
    color: var(--site-red);
    font-weight: 700;
}

.range-txt-inputs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.range-txt-inputs input {
    width: 100%;
    padding: 5px 45px 5px 10px;
    border: 1px solid var(--line-color);
    border-radius: 0;
    font-size: var(--filter-li-fsize);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    -moz-appearance: textfield;
}

.range-txt-inputs input::-webkit-outer-spin-button,
.range-txt-inputs input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.range-txt-inputs span {
    font-size: var(--filter-li-fsize);
}

.range-txt-inputs .cur-tag {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--footer-bg);
    height: calc(100% - 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.pla-fa-item-content ul li label,
.pla-fa-item-content ul li input[type="checkbox"] {
    cursor: pointer;
}

.plfi-info-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.plfi-info-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 100%;
    border: 1px solid var(--line-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.plfi-info-icon img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

.plfi-info-text {
    display: flex;
    flex-direction: column;
}

.plfi-info-text h4 {
    font-size: var(--plfi-info-text-h4-fsize);
    font-weight: 500;
}

.plfi-info-text p {
    font-size: var(--plfi-info-text-p-fsize);
}

.plfi-info-list {
    gap: 20px !important;
}

.plfi-info-list li:hover {
    color: var(--site-black) !important;
}

.pla-list-area {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 100%;
    width: 100%;
}

.mw-no {
    max-width: none;
}

.pla-list-area,
.pla-top-area,
.pla-opened-filters {
    height: fit-content;
}

.pla-list-area.w-full {
    width: 100%;
    max-width: 100%;
}

.pla-list-area[data-col-count="5"] .product-card {
    width: calc(20% - 25px);
}

.pla-list-area[data-col-count="4"] .product-card {
    width: calc(25% - 22.5px);
}

/* 3'lü gösterimde ara boşlukları azalt */
.pla-list-area[data-col-count="3"] {
    gap: 10px;
}

.pla-list-area[data-col-count="3"] .product-card {
    width: calc(33.33% - 6.67px);
}

@media (max-width: 560px) {

    /* 560px altında 3'lü gösterimde sadece görsel/video göster, başlık ve fiyat gizle */
    .pla-list-area[data-col-count="3"] .product-card .product-card-title,
    .pla-list-area[data-col-count="3"] .product-card .product-card-price {
        display: none;
    }

    /* 3'lü gösterimde mobilde ara boşlukları daha da azalt */
    .pla-list-area[data-col-count="3"] {
        gap: 5px;
    }

    .pla-list-area[data-col-count="3"] .pla-top-area {
        margin-bottom: 10px;
    }

    .pla-list-area[data-col-count="3"] .product-card {
        width: calc(33.33% - 3.33px);
    }

    /* 560px altında listeleme sayfasındaki sıralama gizle */
    .pla-top-area .sort-select {
        display: none;
    }
}

.pla-list-area[data-col-count="2"] .product-card {
    width: calc(50% - 15px);
}

.pla-list-area[data-col-count="1"] .product-card {
    width: 100%;
}

.pla-top-area {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.pla-top-area.category-top img {
    border-radius: 0;
}

.pla-fa-item-title h3 {
    font-size: var(--filter-li-fsize);
    font-weight: 500;
}

.col-selects {
    display: flex;
    gap: 10px;
}

.col-selects span {
    width: 25px;
    height: 25px;
    border-radius: 5px;
    border: 1px solid var(--line-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: var(--filter-li-fsize);
}

.col-selects span.active {
    background-color: var(--site-black);
    border-color: var(--site-black);
    color: var(--site-white);
}

.pla-opened-filters {
    width: 100%;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pla-opened-filters p {
    font-size: var(--pla-opened-filters-fsize);
    padding: 5px 10px;
    position: relative;
    border-right: 1px solid var(--line-color);
}

.pla-opened-filters span {
    font-size: var(--pla-opened-filters-fsize);
    padding: 3px 40px 3px 10px;
    border-radius: 0;
    border: 1px solid var(--line-color);
    position: relative;
    display: flex;
    align-items: center;
}

.pla-opened-filters span input[type="button"] {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--site-antrasit);
    width: auto;
    height: calc(100% + 2px);
    aspect-ratio: 1/1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--site-white);
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}

.pla-opened-filters span:hover input[type="button"] {
    color: var(--site-red);
}

.col-select[data-col-count="1"] {
    display: none;
}

.product-filter-backdrop {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

.plafa-title {
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 20px;
    margin-bottom: -15px;
    display: flex;
}

.plafa-title h3 {
    font-size: var(--filter-title-h3-fsize);
    font-weight: 500;
}

.plafa-title button {
    border: none;
    color: transparent;
    font-weight: 500;
    cursor: pointer;
    background-image: url('../images/cross.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 30px;
    height: 30px;
}

.pla-filter-area .plafa-title+.pla-fa-item::before {
    display: none;
}

.filter-modal-btn {
    display: block;
    padding: 4px 15px;
}

@media (max-width: 330px) {
    .filter-modal-btn span span {
        display: none;
    }

    .filter-modal-btn {
        min-width: 0 !important;
        padding: 5px 10px !important;
    }
}

.pla-filter-area {
    position: fixed;
    background-color: var(--site-white);
    top: 0;
    left: 0;
    width: 30%;
    min-width: 320px;
    max-width: 400px;
    height: 100%;
    z-index: 1003;
    padding: 25px 35px 25px 25px;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

.pla-filter-area.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.product-filter-backdrop.active {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.pagi-select {
    width: fit-content !important;
    min-width: 0 !important;
    padding-left: 5px !important;
    padding-right: 25px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
}

.pla-no-products-area {
    width: 100%;
    text-align: center;
    padding: 20px;
    border: 1px solid var(--line-color);
    border-radius: 0;
    margin-top: 20px;
}

@media (max-width: 1360px) {
    .col-select[data-col-count="1"] {
        display: flex;
    }

    .col-select[data-col-count="5"] {
        display: none;
    }
}

@media (max-width: 1080px) {
    .col-select[data-col-count="4"] {
        display: none;
    }
}

/* 3'lü gösterim 560px altında da kullanılabilir */

.pla-description-area {
    --p-fsize: 0.9em;
}

/* #endregion */


/* #region price range */

.price-range-area {
    height: 30px;
    display: flex;
    align-items: center;
    position: relative;
}

input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    outline: none;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    background-color: transparent;
    pointer-events: none;
}

.price-range-track {
    width: 100%;
    height: 3px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    border-radius: 3px;
}

input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    height: 3px;
}

input[type="range"]::-moz-range-track {
    -moz-appearance: none;
    height: 3px;
}

input[type="range"]::-ms-track {
    appearance: none;
    height: 3px;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    height: 0.9em;
    width: 0.9em;
    background-color: var(--site-red);
    cursor: pointer;
    transform: translateY(-40%);
    pointer-events: auto;
    border-radius: 50%;
}

input[type="range"]::-moz-range-thumb {
    appearance: none;
    -webkit-appearance: none;
    height: 0.9em;
    width: 0.9em;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--site-red);
    pointer-events: auto;
    border: none;
}

input[type="range"]::-ms-thumb {
    appearance: none;
    height: 1.1em;
    width: 1.1em;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--site-red);
    pointer-events: auto;
}

input[type="range"]:active::-webkit-slider-thumb {
    background-color: #ffffff;
    border: 1px solid var(--site-red);
}

/* #endregion */


/* #region checkbox */

input[type="checkbox"] {
    accent-color: var(--site-red);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* #endregion */


/* #region product detail */

.product-detail-area {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.product-images-area {
    width: calc(50% - 30px);
    display: flex;
    gap: 20px;
    position: relative;
    height: fit-content;
}

.other-images {
    width: calc(15% - 10px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 3px;
    cursor: pointer;
    position: relative;
    justify-content: center;
    align-items: center;
}

.other-images-up {
    width: 25px;
    height: 25px;
    transform: rotate(-180deg);
}

.other-images-down {
    width: 25px;
    height: 25px;
}

.other-images .other-image {
    width: 100%;
    aspect-ratio: 3/4;
    height: auto;
    object-fit: cover;
    border: 1px solid var(--footer-bg);
    position: relative;
}

.other-images-swiper .swiper-slide {
    width: 100%;
    aspect-ratio: 3/4;
    height: auto !important;
}

.other-images-swiper {
    height: 100%;
    overflow: hidden;
}

.main-img {
    width: calc(85% - 10px);
    height: fit-content;
}

.main-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    box-shadow: var(--product-card-img-shadow);
}

.product-text-area {
    width: calc(50% - 30px);
}

.oi-filter {
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
}

.oiy-filter {
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oiy-filter img {
    width: 50%;
}

.oiy-filter-video {
    background-color: transparent !important;
    display: none;
}

.oiy-filter-video video {
    max-height: 100%;
}


.pd-fav-btn .add-favorites-icon,
.pd-compare-btn .add-compare-icon {
    width: 28px;
    height: 28px;
}

.pd-model-code {
    margin-top: 5px;
}

.pd-model-code span {
    color: var(--site-antrasit);
    font-size: var(--pd-model-code-fsize);
}

.pd-carat {
    margin-top: 5px;
}

.pd-carat span {
    color: var(--site-black);
    font-size: var(--pd-model-code-fsize);
}

.pd-price {
    margin-top: 25px !important;
}

.pd-transfer-discount {
    margin-top: 10px;
}

.pd-transfer-discount p {
    color: var(--site-red);
    font-size: var(--pd-transfer-discount-fsize);
}

.pd-desc {
    margin-top: 25px;
}

.pd-desc.mt-big {
    margin-top: 50px;
}

.pd-desc p {
    font-size: var(--p-fsize);
}

.pd-selects {
    margin-top: 50px;
    display: flex;
    gap: 20px;
}

.pd-selects+.pd-selects {
    margin-top: 20px;
}

.pd-selects select,
.pd-selects input {
    width: 100%;
}

.variant-group-title {
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

.pd-btns {
    margin-top: 50px;
    display: flex;
    gap: 20px;
}

.preorder-info {
    margin-bottom: 0px;
    margin-top: 20px;
    padding: 12px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
}

.preorder-info p {
    margin: 0;
    font-size: 14px;
    color: #856404;
    line-height: 1.5;
}

.preorder-info+.pd-btns {
    margin-top: 10px;
}

.pd-btns .btn {
    flex-shrink: 1;
}

.pd-ictxts {
    margin-top: 25px;
    display: flex;
    column-gap: 30px;
    row-gap: 15px;
    flex-wrap: wrap;
}

.pd-ictxt {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pd-ictxt-icon {
    width: 25px;
    height: 25px;
}

.pd-ictxt-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 560px) {
    .pd-ictxt-icon.pdii-mn {
        width: 20px;
        height: 20px;
    }

    .pd-ictxt-icon.pdii-gft {
        width: 23px;
        height: 23px;
    }

    :root {
        --pd-ictxt-text-fsize: 0.85em;
    }
}

.pd-ictxt-text p {
    font-size: var(--pd-ictxt-text-fsize);
}

.product-detail-table-area {
    border: 2px solid var(--line-color);
    padding: 40px;
}

.pdt-tabs {
    width: 100%;
    display: flex;
    border-bottom: 2px solid var(--line-color);
    position: relative;
}

.pdt-tabs ul {
    display: flex;
    align-items: center;
    width: fit-content;
}

.pdt-tabs ul li {
    font-size: var(--pdt-tabs-ul-li-fsize);
    display: block;
    cursor: pointer;
    user-select: none;
    padding: 10px 20px;
    transition: all 0.2s ease;
}

.pdt-tabs ul li:first-child {
    padding-left: 0;
}

.pdt-tabs ul li.active {
    font-weight: 500;
}

.pdt-tabs-line {
    height: 6px;
    background-color: var(--site-red);
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    transform: translate(0, -30%);
    transition: all 0.4s ease;
}

.pdt-table td {
    font-size: var(--pd-table-td-fsize);
    padding-top: 10px;
    padding-bottom: 10px;
}

.pdt-table tr {
    border-bottom: 1px solid var(--line-color);
}

.pdt-table tr td:first-child {
    padding-right: 50px;
}

.pdt-table tr td:last-child {
    padding-right: 30px;
}

.pdt-tab-contents {
    margin-top: 30px;
    transition: all 0.3s ease;
}

.pdt-table-desc {
    font-size: var(--pd-table-td-fsize);
    margin-top: 20px;
}

.pdt-tab-content {
    overflow: hidden;
    transition: all 0.3s ease;
    height: var(--data-height) !important;
    opacity: 0;
}

.pdt-tab-content.active {
    opacity: 1;
}

.rfmcp {
    font-size: var(--p-fsize);
    color: var(--site-black);
    font-weight: 600;
    text-align: center;
}

.product-comments {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
}

.product-comment {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.product-comment-pp {
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: var(--site-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-comment-text {
    width: calc(100% - 80px);
}

.product-comment-pp span {
    font-size: var(--p-fsize);
    color: var(--site-white);
    font-weight: 500;
}

.comment-username {
    font-size: var(--tab-title-fsize);
    color: var(--site-black);
    font-weight: 500;
}

.comment-stars {
    --percent: calc(var(--rating) / 5 * 100%);
    display: inline-block;
    font-size: 20px;
    font-family: Times;
    line-height: 1;
    margin-top: 5px;
    margin-bottom: 5px;
}

.comment-stars::before {
    content: '★★★★★';
    letter-spacing: 3px;
    background: linear-gradient(90deg, rgb(255, 192, 0) var(--percent), #ccc var(--percent));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.make-star-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.make-star-rating .rating {
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
}

.rating:not(:checked)>input {
    position: absolute;
    appearance: none;
}

.rating:not(:checked)>label {
    float: right;
    cursor: pointer;
    font-size: 25px;
    color: var(--site-black);
}

.rating:not(:checked)>label:before {
    content: '★';
}

.rating:not(:checked)>label:hover,
.rating:not(:checked)>label:hover~label {
    color: var(--site-red);
}

.rating>input:checked~label {
    color: var(--site-red);
}

.comment-textarea {
    margin-top: 20px;
    height: 150px;
}

.comment-btns {
    margin-top: 20px;
}

.make-comment {
    overflow: hidden;
    border: 1px solid var(--line-color);
    position: relative;
    border-radius: 0;
    transition: all 0.5s ease;
    padding-bottom: 0 !important;
}

.make-comment * {
    opacity: 0;
    transition: all 0.5s ease;
}

.make-comment:not(.active) {
    cursor: pointer;
}

.make-comment.btn-form::before {
    content: var(--message);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--p-fsize);
    font-weight: 500;
    color: var(--site-black);
    z-index: 1;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}

.make-comment.btn-form::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--p-fsize);
    font-weight: 500;
    background-color: var(--site-black);
    z-index: 0;
    top: 0;
    left: 0;
    width: 0;
    transition: all 0.3s ease;
}

.make-comment.btn-form:hover::after {
    width: 100%;
}

.make-comment.btn-form:hover::before {
    color: var(--site-white);
}

.make-comment.active::before {
    display: none !important;
}

.make-comment.active::after {
    display: none !important;
}

.make-comment.active {
    height: var(--data-height) !important;
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--line-color) !important;
    padding-bottom: 30px !important;
}

.make-comment.active * {
    opacity: 1;
}

.pdt-title {
    display: none;
}

.product-comment-answer {
    width: calc(100% - 80px);
    background-color: var(--footer-bg);
    padding: 15px;
    border-radius: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-comment-answer-pp {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: var(--site-black);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-comment-answer-pp img {
    height: 50%;
}

.product-comment-answer-text {
    width: calc(100% - 40px);
}

.comment-answer-username {
    font-size: var(--tab-title-fsize);
    color: var(--site-black);
    font-weight: 500;
    margin-top: 20px;
}

.pd-matched-products {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pd-matched-product {
    width: calc(16.6666666667% - 10px);
    aspect-ratio: 12/16;
    overflow: hidden;
    border: 1px solid var(--footer-bg);
    border-radius: 0;
    transition: all 0.3s ease;
}

.pd-matched-product img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-matched-products-title p {
    font-weight: 600;
    color: var(--site-black);
    margin-top: 25px;
}

.pd-matched-product:hover {
    transform: scale(1.05);
}

.pd-counter {
    margin-top: 20px;
}

.pd-counter .discount-counter {
    position: relative;
    width: fit-content;
    height: fit-content;
    background-color: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--site-orange);
    font-size: var(--pd-detail-counter-fsize);
    z-index: 3;
    left: 0;
    top: 0;
    transform: translateX(0);
}

.pd-counter p {
    font-size: var(--pd-counter-fsize);
    color: var(--site-gray);
    font-weight: 500;
    margin-top: 3px;
}

.pd-counter-title {
    display: flex;
    align-items: center;
    gap: 5px;
}

.color-select-area {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.color-select-item {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0, 0, 0, 1);
}

.color-select-item.active {
    width: 45px;
    height: 45px;
    border: 4px solid #ffffff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 1);
}

.color-select-item::before {
    content: var(--title);
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 0.8em;
    font-weight: 500;
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--site-white);
    padding: 5px 10px;
    border-radius: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.color-select-item:hover::before {
    opacity: 1;
    visibility: visible;
}

.box-select-area {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.box-select-item {
    padding: 5px 15px;
    border: 1px solid var(--line-color);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.box-select-item.active {
    border: 1px solid var(--site-antrasit);
    background-color: var(--site-antrasit);
    color: var(--site-white);
}

.box-select-item:hover {
    background-color: var(--site-antrasit);
    color: var(--site-white);
}

.product-title {
    color: var(--text-color) !important;
    font-weight: 500 !important;
    max-width: 80%;
}

.product-title+.add-favorites {
    margin-top: 7px;
}

.product-normal-price {
    color: var(--text-color) !important;
}

.pdt-table tr td:last-child {
    position: relative;
    padding-left: 10px;
}

.pdt-table tr td:last-child:before {
    content: ":";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    font-size: var(--pd-table-td-fsize);
}

.product-main-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.product-main-video.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.duo-swip .product-card+.product-card {
    padding-top: 30px;
    display: block;
}

@media (max-width: 1080px) {
    .product-detail-area {
        flex-direction: column;
    }

    .product-text-area {
        width: 100%;
    }

    .product-images-area {
        width: 70%;
    }

    .other-images {
        width: calc(25% - 10px);
    }

    .main-img {
        width: calc(75% - 10px);
    }

    .pdt-tabs {
        display: none;
    }

    .pdt-tab-contents {
        margin-top: 0;
    }

    .product-detail-table-area {
        padding: 0;
        border: 0;
    }

    .pdt-title {
        display: flex;
        width: 100%;
        position: relative;
    }

    .pdt-tab-content {
        border-bottom: 1px solid var(--line-color);
        padding-bottom: 7px;
    }

    .pdttctct {
        padding: 0 20px;
        box-sizing: border-box;
        transition: all 0.5s ease;
        overflow: hidden;
    }

    .pdt-tab-content.active .pdttctct {
        padding: 20px;
        height: var(--data-height) !important;
    }

    .pdt-title:before {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0, -50%);
        width: 15px;
        height: 3px;
        background-color: var(--site-black);
    }

    .pdt-title:after {
        content: "";
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(-6px, -50%) rotate(0);
        width: 3px;
        height: 15px;
        background-color: var(--site-black);
        transition: all 0.3s ease;
    }

    .pdt-tab-content.active .pdt-title:after {
        transform: translate(-6px, -50%) rotate(90deg);
    }

    .pdt-tab-content {
        opacity: 1;
        height: fit-content !important;
    }

    .pdt-tab-content+.pdt-tab-content {
        margin-top: 20px;
    }

    .comment-msg:not(.nlmt) {
        line-clamp: 3;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pdt-tab-content.active .pdt-title {
        border-bottom: 1px solid var(--line-color);
        padding-bottom: 7px;
    }

    .order-aom .product-detail-table-area {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .order-aom {
        padding: 10px;
    }

    .order-aom .pdt-tab-content .pdttctct {
        padding: 0 10px !important;
    }

    .order-aom .pdt-tab-content.active .pdttctct {
        padding: 10px !important;
    }
}

@media (max-width: 820px) {
    .mch {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 560px) {
    .product-detail-area {
        padding-top: 0;
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px;
        --h2-fsize: 1.2em;
        --pd-transfer-discount-fsize: 0.9em;
    }

    .cart-summary-items {
        gap: 10px !important;
    }

    #payment-page-summary-price-area {
        gap: 10px;
    }

    :root {
        --h3-fsize: 1.1em;
        --cart-summary-item-fsize: 1em;
    }

    .ppa-price {
        gap: 9px !important;
    }

    .product-title {
        font-weight: 500 !important;
    }

    .ppa-price h3.product-normal-price {
        font-weight: normal !important;
    }

    .product-text-area {
        max-width: 95% !important;
        margin: 0 auto;
    }

    .main-img img {
        box-shadow: none;
    }

    .pd-desc.mt-big {
        margin-top: 20px !important;
    }

    .pd-price {
        margin-top: 5px !important;
    }

    .pd-model-code {
        display: none;
    }

    .pd-counter {
        margin-bottom: 20px !important;
    }

    .product-detail-area .pd-fav-btn .add-favorites-icon {
        width: 24px;
        height: 24px;
    }

    .product-detail-area .product-discount-arrow {
        width: 0 !important;
        height: 0 !important;
        border-left: 11px solid transparent !important;
        border-right: 11px solid transparent !important;
        border-top: 14px solid var(--site-red) !important;
        border-radius: 3px !important;
    }

    .other-images-up {
        display: none !important;
    }

    .other-images-down {
        display: none !important;
    }

    .other-images,
    .other-images-swiper {
        width: 100% !important;
    }

    .f-button.is-arrow.is-next,
    .f-button.is-arrow.is-prev {
        display: none !important;
    }

    [data-fancybox-close] {
        width: 30px !important;
        height: 30px !important;
    }

    .f-carousel__toolbar.is-absolute {
        padding: 0 !important;
    }

    :root {
        --pd-table-td-fsize: 1em;
        --p-fsize: 1em;
    }

    .pdt-table tr td:first-child {
        padding-right: 5px;
        width: 50%;
    }

    .pdt-table tr td:last-child {
        padding-right: 0;
        width: 50%;
    }
}

@media (max-width: 500px) {
    .product-images-area {
        flex-direction: column-reverse;
    }

    .main-img {
        width: 100%;
    }

    .other-images-swiper {
        width: calc(100% - 70px);
    }

    .other-images {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

    .product-detail-area {
        flex-direction: column;
    }

    .product-text-area {
        width: 100%;
    }

    .product-images-area {
        width: 100%;
    }

    .pd-selects {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }

    .pd-btns {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }

    .pd-desc {
        margin-top: 30px;
    }

    .pdt-title h3 {
        font-size: 1.1em;
    }
}

/* #endregion */


/* #region site inputs */

.site-select {
    width: fit-content;
    padding: 7px 20px;
    min-width: 200px;
    background-color: var(--site-white);
    border: 1px solid var(--line-color);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    background-image: url('../images/select-arrow.svg');
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    font-size: var(--filter-li-fsize);
}

.sort-select {
    font-size: var(--sort-select-fsize);
    padding: 4px 15px;
    min-width: 170px;
}

.site-input {
    width: fit-content;
    padding: 7px 20px;
    min-width: 200px;
    background-color: var(--site-white);
    border: 1px solid var(--line-color);
    border-radius: 0;
    font-size: var(--filter-li-fsize);
    outline: none;
}

.site-select:has(.site-select-placeholder:checked) {
    color: var(--site-antrasit);
}

.site-select.w-full,
.site-input.w-full {
    width: 100%;
}

.filter-select {
    width: 100% !important;
    padding: 7px 10px !important;
    min-width: 0 !important;
    background-color: var(--site-white);
    border: 1px solid var(--line-color);
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: pointer;
    background-image: url('../images/select-arrow.svg');
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    font-size: var(--filter-li-fsize);
}

/* #endregion */


/* #region cart page */

.cart-area {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.cart-left-area {
    width: calc(67% - 20px);
}

.cart-products {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.cart-product {
    display: flex;
    gap: 20px;
    padding: 25px 0;
    border-top: 2px solid var(--line-color);
    align-items: center;
    justify-content: space-between;
}

.cart-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-product-txt h3 {
    font-size: var(--p-fsize);
    font-weight: 500;
}

.cart-product-txt p {
    font-size: var(--cart-product-txt-p-fsize);
}

.carats-area {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.cart-product-discount {
    color: var(--site-red);
    font-weight: 500;
}

.cart-product-price p,
.cart-product-final-price p {
    font-size: var(--cart-product-price-fsize);
}

.cart-product-price .cp-old-price,
.cart-product-final-price .cp-old-price {
    text-decoration: line-through;
    color: var(--line-color);
    color: var(--site-antrasit);
}

.cart-product-price .cp-old-price+p,
.cart-product-final-price .cp-old-price+p {
    color: var(--site-red);
}

.qty-input {
    display: flex;
    align-items: center;
}

.qty-input input {
    width: 35px;
    height: 35px;
    background-color: var(--footer-bg);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.qty-input input.qty-input-minus {
    color: transparent;
    background-image: url('../images/minus.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.qty-input input.qty-input-plus {
    color: transparent;
    background-image: url('../images/plus.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.qty-input input.qty-input-number {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    cursor: text;
    -moz-appearance: textfield;
}

.qty-input input.qty-input-number::-webkit-outer-spin-button,
.qty-input input.qty-input-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.cart-product-final-price p {
    font-size: var(--cart-product-price-fsize);
    font-weight: 500;
}

.cart-product-final-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}

.cart-product-remove img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    flex-shrink: 0;
}

.cart-product-img {
    margin-bottom: auto;
    width: 13%;
    min-width: 120px;
    aspect-ratio: 12/16;
}

.cart-product-ctt {
    display: flex;
    width: 87%;
    align-items: center;
    justify-content: space-between;
}

.cart-product-ctt>*:not(.cart-product-qty) {
    padding: 0 15px;
}

.cart-product-txt {
    padding-left: 0 !important;
}

.cart-product-qty {
    margin: 0 15px;
    flex-shrink: 0;
}

.cart-product-txt {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cart-product-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-product-remove {
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin-bottom: 10px;
    position: absolute;
    top: 0;
    right: 15px;
    transform: translateY(calc(-100% - 10px));
}

.cart-summary-area {
    width: calc(33% - 20px);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.cart-summary {
    width: 100%;
    background-color: var(--footer-bg);
    height: fit-content;
    padding: 40px;
}

.cart-summary h3 {
    font-size: var(--h3-fsize);
    font-weight: 500;
    text-transform: uppercase;
}

.cart-summary-items {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#payment-page-summary-price-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cart-summary-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-summary-item p {
    font-size: var(--cart-summary-item-fsize);
}

.csid p+p {
    color: var(--site-red);
}

.cart-summary-item>p {
    max-width: calc(65% - 5px);
}

.cart-summary-item p+p {
    max-width: calc(35% - 5px);
}

.cs-total {
    margin-top: 20px;
    align-items: start;
    border-top: 1px solid var(--line-color);
    padding-top: 20px;
}

.cs-total div p {
    font-size: var(--cart-summary-item-fsize);
    display: block;
}

.cs-total div span {
    font-size: var(--cart-summary-item-discount-fsize);
    display: block;
    color: var(--site-antrasit);
}

.cs-total>p {
    font-size: var(--p-fsize);
    display: flex;
    align-items: start;
}

.cs-btn {
    margin-top: 20px;
}

.safety-payment-area {
    margin-top: 10px;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.safety-payment-area p {
    font-size: var(--cart-summary-safety-payment-fsize);
    font-weight: 500;
}

.safety-payment-area-icons {
    display: flex;
    gap: 5px;
}

.cart-sub-area {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.csa-img {
    width: calc(50% - 25px);
    aspect-ratio: 700/415;
    position: relative;
}

.csa-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csa-txt {
    width: calc(50% - 25px);
    height: fit-content;
}

.yt-filter {
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.yt-filter img {
    width: 98px;
    height: 98px;
    object-fit: contain;
}

.csa-ictxs {
    display: flex;
    column-gap: 10px;
    row-gap: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
}

.csa-ictx {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(50% - 5px);
}

.csa-ictx p {
    font-size: var(--csa-ictx-fsize);
}

.csa-ictx img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.add-note-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

#add-note-input {
    width: 100%;
    height: 300px;
    resize: none;
}

.note-limit {
    font-size: var(--add-note-note-limit-fsize);
}

.cp-price-area {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.cp-price-area p {
    white-space: nowrap;
}

.cpndsktp {
    display: none;
}

.cpqnumb {
    display: flex;
    align-items: center;
    gap: 5px;
}

.cart-product-txt-2 {
    display: none;
}

@media (max-width: 1440px) {
    .cart-area {
        flex-direction: column;
        gap: calc(var(--site-ara-space) / 2);
    }

    .cart-left-area,
    .cart-summary-area {
        width: 100%;
    }
}

@media (max-width: 1080px) {
    .cart-product-ctt {
        flex-direction: column;
        align-items: start;
        gap: 10px;
        width: 100%;
    }

    .cart-product-price {
        width: 100%;
        position: relative;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 10px 0 !important;
        border-bottom: 1px dashed var(--line-color);
    }

    .cart-product-price::before {
        content: attr(data-title) ": ";
        font-weight: 500;
        font-size: var(--cart-product-before-fsize);
    }

    .cart-product-qty {
        width: 100% !important;
        position: relative;
        text-align: right !important;
        display: flex;
        align-items: center !important;
        justify-content: space-between;
        padding: 0 0 10px 0 !important;
        border-bottom: 1px dashed var(--line-color);
        margin: 0 !important;
    }

    .cart-product-qty::before {
        content: attr(data-title) ": ";
        font-weight: 500;
        font-size: var(--cart-product-before-fsize);
    }

    .cart-product-final-price {
        width: 100% !important;
        position: relative;
        text-align: right !important;
        display: flex;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 !important;
        margin: 0 !important;
        flex-direction: row !important;
    }

    .cart-product-final-price::before {
        content: attr(data-title) ": ";
        font-weight: 500;
        font-size: var(--cart-product-before-fsize);
    }

    .cp-final-price-area {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .cart-product-remove {
        position: relative;
        top: 0;
        transform: none;
        right: 0;
    }

    .cpnmbl {
        display: none;
    }

    .cpndsktp {
        display: flex;
        gap: 10px;
        padding: 0 0 10px 0 !important;
        border-bottom: 1px dashed var(--line-color);
        width: 100%;
        flex-wrap: wrap;
    }

    .cart-sub-area {
        flex-direction: column;
        gap: 20px;
    }

    .csa-img,
    .csa-txt {
        width: 100%;
    }

    .csa-ictxs {
        justify-content: flex-start;
        column-gap: 30px;
    }

    .csa-ictx {
        width: fit-content;
    }

    .cpqnumb-txt {
        display: none;
    }

    .cart-product-final-price p,
    .cart-product-price p {
        font-size: var(--cart-product-before-fsize);
        font-weight: 500;
    }
}

@media (max-width: 520px) {
    .cart-product-img {
        width: 90px;
        min-width: 90px;
    }

    .cart-product-txt-2 {
        display: flex;
        flex-direction: column;
        gap: 5px;
        max-width: calc(100% - 100px);
        white-space: wrap;
        justify-content: center;
    }

    .cart-product-txt-2 h3 {
        font-size: var(--p-fsize);
        font-weight: 500;
    }

    .cart-product-txt-2 p {
        font-size: var(--cart-product-txt-p-fsize);
    }

    .mnyokl {
        display: none;
    }
}

@media (max-width: 480px) {
    .cart-summary {
        padding: 20px;
    }
}

/* #endregion */


/* #region payment page */

.payment-addresses-area {
    width: 100%;
    margin-top: 40px;
    transition: all 0.3s ease;
    overflow-y: clip;
    height: 0;
}

.step-address .payment-addresses-area {
    height: fit-content;
}

.step-address:not(.cart-left-area) .payment-addresses-area {
    margin-top: 0;
}

.paa-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.paa-addresses {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

.paa-address-select {
    font-size: var(--paa-address-select-fsize);
    margin-top: 20px;
}

.paa-address,
.paa-invoice-address {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 25px;
    width: calc(50% - 10px);
    border-radius: 0;
    box-shadow: var(--product-card-img-shadow);
    transition: all 0.3s ease;
}

.paa-address.clickable,
.paa-invoice-address.clickable {
    cursor: pointer;
}

.paa-address-title p {
    font-weight: 500;
}

.paa-address-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.paa-address-content p {
    font-size: var(--paa-address-content-p-fsize);
}

.paa-address.selected,
.paa-invoice-address.selected {
    background-color: var(--footer-bg);
    animation: paa-address-select 0.3s ease forwards;
}

.paa-address.selected p,
.paa-invoice-address.selected p {
    color: var(--site-black);
}

@keyframes paa-address-select {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.99);
    }

    100% {
        transform: scale(1);
    }
}

.invoice-address {
    overflow-y: clip;
    transition: all 0.3s ease;
    opacity: 0;
}

.invoice-address.show {
    height: var(--data-height) !important;
    opacity: 1;
}

.invoice-address-toggle-area {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
    cursor: pointer;
}

.invoice-address-toggle-area * {
    cursor: pointer;
}

.payment-methods-area {
    width: 100%;
    transition: all 0.3s ease;
    overflow-y: clip;
    opacity: 0;
    visibility: hidden;
    height: 0;
}

.cart-left-area.step-payment .payment-methods-area {
    height: fit-content;
    opacity: 1;
    visibility: visible;
}

.poa {
    overflow-y: clip;
    transition: all 0.3s ease;
}

.payment-methods {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pm-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background-color: var(--footer-bg);
    padding: 10px 20px;
    border-radius: 0;
}

.payment-method {
    overflow-y: clip;
    transition: all 0.3s ease;
}

.payment-method.active {
    height: var(--data-height) !important;
}

.payment-method.active .pm-content {
    height: var(--data-height) !important;
    padding: 20px 5px 0 5px;
    opacity: 1;
}

.pm-content {
    padding: 0 5px;
    transition: all 0.3s ease;
    opacity: 0;
}

.pm-note {
    margin-top: 10px !important;
}

.pm-note p {
    font-size: var(--pm-note-fsize);
    color: var(--site-antrasit);
}

.transfer-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.transfer-item {
    display: flex;
    gap: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 15px 0;
    align-items: center;
}

.transfer-item img {
    height: 40px;
    width: auto;
}

.transfer-item p {
    font-size: var(--transfer-item-p-fsize);
    cursor: pointer;
    transition: all 0.3s ease;
}

.transfer-item-checkbox {
    margin-top: 5px;
}

.transfer-item.active p {
    color: var(--site-black);
}

.transfer-items .transfer-item:not(:last-child) {
    border-bottom: 1px solid var(--line-color);
}

.agreement-onay {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.aor {
    display: flex;
    align-items: start;
    gap: 10px;
    cursor: pointer;
}

.agreement-onay.active {
    height: var(--data-height) !important;
}

.agreement-onay p {
    font-size: var(--agreement-onay-p-fsize);
}

.agreement-onay input {
    flex-shrink: 0;
    margin-top: 5px;
}

.address-box-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 1080px) {

    .paa-address,
    .paa-invoice-address {
        width: 100%;
    }
}


/* #endregion */


/* #region modals */

.modal-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1002;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-filter.active {
    opacity: 1;
    visibility: visible;
}

.modal-filter.active .modal-ctt-area {
    transform: translateY(0) scale(1);
}

.modal-ctt-area {
    width: 750px;
    height: fit-content;
    background-color: var(--site-white);
    border-radius: 0;
    max-width: 95%;
    max-height: 85dvh;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s ease;
}

.modal-content {
    width: 100%;
    padding: 25px 35px;
    height: fit-content;
    max-height: calc(85dvh - 190px);
    overflow-y: auto;
}

.agreement-onay-modal .modal-content,
.masak-onay-modal .modal-content {
    max-height: calc(85dvh - 190px - 60px);
    overflow: hidden;
    padding: 0;
}

.modal-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--footer-bg);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 25px;
}

.close-modal {
    cursor: pointer;
    padding: 0;
    color: transparent;
    width: 30px;
    height: 30px;
    background-image: url('../images/cross.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.modal-footer {
    display: flex;
    gap: 10px;
    background-color: var(--footer-bg);
    padding: 25px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.modal-footer .btn {
    flex-shrink: 1;
}

.t-row {
    width: 100%;
    display: flex;
    gap: 20px;
}

.t-row+.t-row {
    margin-top: 20px;
}

.t-title+.t-row,
.t-row+.t-title {
    margin-top: 30px !important;
}

.t-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 200px;
}

.t-col label {
    font-size: var(--t-col-label-fsize);
    font-weight: 500;
}

.t-col select,
.t-col input:not([type="checkbox"]),
.t-col textarea {
    width: 100%;
}

.t-col textarea {
    height: 100px;
}

.t-title {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 20px;
    position: relative;
    padding: 10px 0;
}

.t-title:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100% + 70px);
    transform: translateX(-50%);
    height: 100%;
    background-color: var(--footer-bg);
    z-index: -1;
}

.t-title.norm-bf {
    padding: 10px 15px !important;
}

.t-title.norm-bf:before {
    width: 100% !important;
}

.t-title h3 {
    white-space: nowrap;
}

.t-col.w-30 {
    width: 30%;
}

.company-info-aap {
    overflow-y: clip;
    transition: all 0.3s ease;
    opacity: 0;
}

.company-info-aap.show {
    height: var(--data-height) !important;
    opacity: 1;
}

.agreements-tabs {
    width: 100%;
    display: flex;
    border-bottom: 2px solid var(--line-color);
    position: relative;
}

.agreements-tabs ul {
    width: 100%;
    display: flex;
}

.agreements-tabs li {
    width: fit-content;
    padding: 15px 20px;
    font-size: var(--tab-title-fsize);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.agreements-tabs-line {
    height: 6px;
    background-color: var(--site-red);
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    transform: translate(0, -30%);
    transition: all 0.4s ease;
}

.agreements-tab-contents {
    transition: all 0.3s ease;
    display: flex;
    width: 100%;
    position: relative;
    height: calc(85dvh - 190px - 60px - 50px) !important;
}

.agreements-tab-contents table,
.pdt-tab-contents-agreements table {
    width: 100%;
}

.agreements-tab-contents table td,
.agreements-tab-contents table th,
.pdt-tab-contents-agreements table td,
.pdt-tab-contents-agreements table th {
    border: 1px solid var(--line-color);
    text-align: center;
    padding: 10px;
}

.agreements-tab-contents * {
    color: var(--text-color) !important;
}

.agreements-tab-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    padding: 25px;
    animation: agreements-tab-content-inactive 0.5s ease forwards;
}

.agreements-tab-content.active {
    animation: agreements-tab-content-active 0.5s ease forwards;
}

@keyframes agreements-tab-content-active {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes agreements-tab-content-inactive {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

.pmh-note {
    margin-bottom: 10px !important;
}

.pmh-note p {
    font-size: var(--pm-note-fsize);
    color: var(--site-antrasit);
}

@media (max-width: 750px) {
    .t-row {
        flex-wrap: wrap;
    }

    .t-col.w-30 {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .agreements-tabs li {
        padding: 10px 15px;
    }
}

/* #endregion */


/* #region login page */

.entrance-area {
    max-width: 500px;
    width: 100%;
    box-shadow: var(--product-card-img-shadow);
    border-radius: 0;
}

.entrance-tabs {
    width: 100%;
    display: flex;
    border-bottom: 2px solid var(--line-color);
    position: relative;
}

.entrance-tabs ul {
    width: 100%;
    display: flex;
}

.entrance-tabs li {
    width: 100%;
    padding: 15px 20px;
    font-size: var(--tab-title-fsize);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

.entrance-tabs-line {
    height: 6px;
    background-color: var(--site-red);
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    transform: translate(0, -30%);
    transition: all 0.4s ease;
}

.entrance-tab-contents {
    transition: all 0.3s ease;
    display: flex;
    width: 100%;
    position: relative;
    height: fit-content;
    overflow: hidden;
}

.entrance-tab-content {
    width: 100%;
    flex-shrink: 0;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(100%);
    opacity: 0;
    padding: 25px;
    transform: translateX(100%);
    transition: all 0.5s ease;
}

.entrance-tab-contents .entrance-tab-content:first-child {
    transform: translateX(-100%);
}

.entrance-tab-contents .entrance-tab-content:last-child {
    transform: translateX(100%);
}

.entrance-tab-content.active {
    opacity: 1;
    transform: translateX(0) !important;
}

.login-sb-txt {
    font-size: var(--login-sb-txt-fsize) !important;
    font-weight: normal !important;
}

.login-sb-txt a {
    text-decoration: underline;
}

.bulletins-row {
    margin-top: 25px !important;
    padding: 15px 0;
    border-top: 1px dashed var(--line-color);
    border-bottom: 1px dashed var(--line-color);
    flex-wrap: nowrap;
}

@media (max-width: 450px) {
    .bulletins-row {
        flex-wrap: wrap;
    }
}


/* social login */

.social-login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: var(--text-color-light, #aaa);
    font-size: 13px;
}

.social-login-divider::before,
.social-login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--line-color);
}

.social-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border-radius: var(--btn-radius, 4px);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    border: 1px solid var(--line-color);
}

.social-login-btn:hover {
    opacity: 0.85;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.social-login-btn--google {
    background-color: #fff;
    color: #3c4043;
}

.social-login-btn--apple {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.social-login-btn svg {
    flex-shrink: 0;
}

.complete-profile-info {
    padding: 0 25px;
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--text-color-light, #666);
}

.form-error-box {
    margin: 12px 25px 0;
    padding: 10px 14px;
    background-color: #fff5f5;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    font-size: 13px;
    color: #dc2626;
}

.form-error-box ul {
    margin: 0;
    padding-left: 16px;
}

.field-error {
    margin-top: 4px;
    font-size: 12px;
    color: #dc2626;
}

/* #endregion */


/* #region account page */

.account-area {
    display: flex;
    gap: 30px;
}

.account-page-menu {
    width: calc(20% - 15px);
    min-width: 215px;
    border-radius: 0;
    border: 1px solid var(--line-color);
    overflow: hidden;
    height: fit-content;
    position: sticky;
    top: 100px;
    flex-shrink: 0;
}

.account-page-menu ul {
    display: flex;
    flex-direction: column;
}

.account-page-menu ul li {
    width: 100%;
}

.account-page-menu ul li a {
    font-size: var(--t-col-label-fsize);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    padding: 15px 20px;
    transition: all 0.2s ease;
    width: 100%;
    display: block;
}

.account-page-menu ul li.active a {
    background-color: var(--site-red);
    color: var(--site-white);
}

.account-page-menu ul li:hover:not(.active) a {
    background-color: var(--site-light-red);
}

.account-page-menu ul li:not(:first-child) a {
    border-top: 1px solid var(--line-color);
}

.account-page-content {
    width: calc(80% - 15px);
    max-width: calc(100% - 230px);
    overflow-x: clip;
    padding-left: 3px;
    padding-right: 3px;
}

.error-message {
    border-left: 5px solid var(--site-red);
    background-color: var(--site-light-red);
    color: var(--site-antrasit);
    padding: 10px 15px;
    border-radius: 0;
    font-size: var(--transfer-badge-fsize);
    font-weight: 500;
    width: fit-content;
    width: 100%;
    text-align: left;
}

.no-style-disabled {
    pointer-events: none;
    accent-color: auto;
    opacity: 1;
}

@media (max-width: 820px) {

    .account-page-menu,
    .account-page-content {
        width: 100%;
        max-width: 100%;
        position: relative;
        top: 0;
    }

    .account-area {
        flex-wrap: wrap;
    }
}


/* #endregion */


/* #region orders area */

.orders-area {
    width: 100%;
    overflow: auto;
}

.orders-table-btns {
    display: flex;
    gap: 10px;
    justify-content: end;
}

.orders-table-btns .btn {
    width: fit-content;
    min-width: fit-content;
    padding: 5px 13px;
    font-size: var(--orders-table-btn-fsize);
}

.orders-area table {
    border: 1px solid var(--line-color);
    min-width: 100%;
}

.orders-area table thead {
    background-color: var(--footer-bg);
}

.orders-area table thead th {
    padding: 15px 10px;
    white-space: nowrap;
    text-align: left;
}

.orders-area table thead th:not(:last-child) {
    border-right: 1px solid var(--line-color);
}

.orders-area table tr {
    border-bottom: 2px solid var(--line-color);
}

.orders-area table tr td {
    padding: 10px;
    align-items: center;
    white-space: nowrap;
}

.orders-area table tr td:not(:last-child) {
    border-right: 1px solid var(--line-color);
}

.transfer-badge {
    background-color: var(--transfer-badge-blue);
    color: var(--site-white);
    padding: 3px 10px;
    border-radius: 0;
    font-size: var(--transfer-badge-fsize);
    font-weight: 500;
    width: fit-content;
}

/* #endregion */


/* #region order detail */

.od-val {
    font-size: var(--order-detail-val-fsize);
}

.payment-pending-badge {
    background-color: var(--site-red);
    color: var(--site-white);
    padding: 3px 10px;
    border-radius: 0;
    font-size: var(--transfer-badge-fsize);
    font-weight: 500;
    width: fit-content;
    width: 100%;
    text-align: center;
}

.order-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-bottom: 1px dashed var(--line-color);
    padding-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.order-detail-payment-btn {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-detail-head-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.order-detail-contact-infos {
    margin-top: 20px;
    margin-bottom: 40px;
}

.order-detail-contact-infos label {
    font-weight: 600;
}

.update-address-badge {
    background-color: var(--site-antrasit);
    color: var(--site-white);
    padding: 3px 10px;
    border-radius: 0;
    font-size: var(--transfer-badge-fsize);
    font-weight: 500;
    width: fit-content;
}

.order-detail-products {
    width: 100%;
    margin-top: 20px;
}

.order-detail-product {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px dashed var(--line-color);
}

.order-detail-product-img {
    width: 100px;
    aspect-ratio: 12/16;
    box-shadow: var(--product-card-img-shadow);
}

.order-detail-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.order-detail-product-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.order-detail-product-txt p {
    font-size: var(--order-detail-product-txt-fsize);
    font-weight: 600;
}

.order-detail-product-txt p span {
    font-weight: normal;
}

.order-detail-summary {
    width: 100%;
    margin-top: 20px;
}

.ods-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line-color);
}

.ods-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ods-item p:first-child {
    font-weight: 600;
}

.ods-item p:last-child {
    font-weight: normal;
}

.ods-item--section-label {
    padding-bottom: 6px;
}

.ods-item--section-label p:first-child {
    font-size: 0.95em;
    color: var(--body-color, #333);
}

.ods-item--campaign p:last-child {
    color: #28a745;
}

.order-detail-promotions {
    width: 100%;
    margin-top: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line-color);
}

.order-detail-promotions__title {
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 10px;
    color: var(--body-color, #333);
}

.order-detail-promotions__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-detail-promotions__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.order-detail-promotions__label {
    font-weight: normal;
}

.order-detail-promotions__value {
    color: #28a745;
}

.order-detail-area {
    width: 100%;
    box-shadow: var(--product-card-img-shadow);
    padding: 20px 25px;
    border-radius: 0;
}

.order-aom {
    width: 100%;
    max-width: 100%;
    transform: translateY(0) scale(1);
    margin-top: 30px !important;
    box-shadow: var(--product-card-img-shadow);
    border: none !important;
}

.order-aom .product-detail-table-area {
    border: none !important;
}

.order-aom .pdttctct {
    max-height: 600px;
    overflow-y: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.order-aom .pdttctct * {
    max-width: 100%;
}

@media (max-width: 650px) {
    .order-aom .pdttctct {
        max-height: 400px;
    }
}

/* #endregion */


/* #region share area */

#share-area-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#share-area-filter.active {
    opacity: 1;
    visibility: visible;
}

.share-area {
    width: 100%;
    max-width: 500px;
    background-color: var(--site-white);
    border-radius: 0;
    overflow: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s ease;
}

#share-area-filter.active .share-area {
    transform: translateY(0) scale(1);
}


.share-area-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    background-color: var(--footer-bg);
}

.sa-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-image: url(../images/cross.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    padding: 0;
}

.share-area-items {
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

.sa-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sa-item-img {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--footer-bg);
    border-radius: 5px;
}

.sa-item-img img {
    width: 50% !important;
}

.sa-item img {
    width: 50px;
    height: 50px;
}

.sa-item p {
    font-size: var(--sa-item-p-fsize);
}

/* #endregion */


/* #region cart modal */

.cart-modal {
    position: absolute;
    width: 512px;
    max-width: 100%;
    height: 100%;
    background-color: var(--site-white);
    right: 0;
    top: 0;
    z-index: 1000;
    transform: translateX(100%);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

#cart-modal-filter.active .cart-modal {
    transform: translateX(0);
}

.cart-modal-content {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    overflow: auto;
}

.mcart-product {
    display: flex;
    gap: 30px;
}

.mcart-products .mcart-product:not(:first-child) {
    border-top: 1px solid var(--line-color);
    padding-top: 20px;
}

.mcart-products .mcart-product:not(:last-child) {
    padding-bottom: 20px;
}

.mcart-product-img {
    width: 100px;
    aspect-ratio: 12/16;
    box-shadow: var(--product-card-img-shadow);
    flex-shrink: 0;
}

.mcart-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mcart-product-txt {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mcart-product-txt p {
    font-size: var(--mcart-product-txt-p-fsize);
    font-weight: 600;
    color: var(--site-black);
}

.remove-to-mcart {
    margin-left: auto;
    margin-top: 5px;
    flex-shrink: 0;
}

.rtmc-btn {
    width: 25px;
    height: 25px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 0;
}

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

.cart-modal-footer {
    width: 100%;
    padding: 20px;
    background-color: transparent;
    border: none;
    display: block;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
}

.mcart-total {
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line-color);
}

.mcart-total p {
    font-weight: 600;
    font-size: var(--mcart-total-p-fsize);
}

.mcart-total-buttons {
    display: flex;
    gap: 10px;
    padding-top: 20px;
}

.mcart-free-delivery {
    padding: 12.5px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line-color);
}

.mcart-free-delivery p {
    font-size: var(--mcart-free-delivery-p-fsize);
}

.variants_area p {
    font-size: var(--mcart-variants-p-fsize);
    font-weight: normal;
    color: var(--site-black);
    display: flex;
    gap: 5px;
    align-items: center;
}

.variants_area p img {
    cursor: pointer;
    width: 20px;
    height: 20px;
}

/* #endregion */


/* #region page wp btn */

.page-wp-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--wp-green);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 400;
    transition: all 0.3s ease;
}

.go-up-btn-active .page-wp-btn {
    bottom: 130px;
}

.page-wp-btn img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}

.page-wp-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--wp-green);
    border-radius: 100%;
    z-index: -1;
    animation: page-wp-btn-animation 3s linear infinite;
}

.page-wp-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--wp-green);
    border-radius: 100%;
    z-index: -1;
    animation: page-wp-btn-animation 3s linear infinite 1s;
}

@keyframes page-wp-btn-animation {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* #endregion */


/* #region go up btn */

.go-up-btn {
    position: fixed;
    bottom: 0;
    right: 30px;
    width: 60px;
    height: 60px;
    transform: translateY(100%);
    background-color: var(--site-white);
    border-radius: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 400;
}

.go-up-btn-active .go-up-btn {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
    bottom: 30px;
}

.go-up-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/menu-sub-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 40%;
    height: 40%;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
}

.go-up-btn svg.progress-circle path {
    box-sizing: border-box;
    stroke: var(--site-red);
    stroke-width: 4;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    transition-duration: 0.4s;
    transition-timing-function: linear;
}

.go-up-btn svg path {
    fill: none;
}


/* #endregion */


/* #region contact page */

.contact-map-area {
    display: flex;
    gap: 50px;
}

.cma-map-area,
.cma-txt {
    width: calc(50% - 25px);
    display: flex;
    align-items: center;
}

.cma-map-area iframe {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.cma-txt-inner h2 {
    font-weight: 600;
    margin-bottom: 10px;
}

.cma-txt-inner p strong {
    font-weight: 600;
    color: var(--site-black);
}

.cma-txt-inner p:has(strong) {
    margin-top: 10px;
}

.contact-form-area {
    background-color: var(--contact-form-bg);
    border-radius: 0;
}

.contact-form-area form {
    width: 60%;
    margin: 0 auto;
    min-width: 300px;
}

.contact-form-area h2 {
    margin-bottom: 7px;
}

.contact-social-icons {
    margin-top: 7px;
}

.contact-social-icons .fsi {
    width: 35px;
    height: 35px;
}

@media (max-width: 1024px) {
    .contact-map-area {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: calc(var(--site-ara-space) / 2);
    }

    .cma-txt,
    .cma-map-area {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .ctt-flx-wtara {
        display: block;
    }
}

/* #endregion */


/* #region ITA */

.ita {
    display: flex;
    gap: 40px;
}

.ita-img {
    width: calc(50% - 20px);
    aspect-ratio: 600/500;
}

.ita-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ita-txt {
    width: calc(50% - 20px);
    display: flex;
    align-items: center;
}

.ita-txt-full {
    width: 100%;
}

.ita-txt *+* {
    margin-top: 7px;
}

@media (max-width: 1080px) {
    .ita {
        flex-wrap: wrap;
        gap: calc(var(--site-ara-space) / 2);
    }

    .ita-rev {
        flex-direction: column-reverse;
    }

    .ita-img {
        width: 100%;
    }

    .ita-txt {
        width: 100%;
    }
}

/* #endregion */


/* #region sales point */

.sn-select {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    margin-top: 20px;
}

.sn-select select {
    width: 100%;
}

.sn-table {
    width: 100%;
    box-shadow: var(--product-card-img-shadow);
    border-radius: 0;
    white-space: nowrap;
}

.sn-table thead {
    border-bottom: 1px solid var(--line-color);
}

.sn-table thead th {
    padding: 15px 20px;
    text-align: left;
}

.sn-table tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--line-color);
}

.sn-table tbody td {
    padding: 15px 20px;
}

.sn-scroll {
    width: 100%;
    overflow-x: auto;
}

/* #endregion */


/* #region hn area */

.hn-area {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
}

.hn-left-area {
    width: calc(70% - 40px);
    max-width: calc(100% - 400px);
    flex-shrink: 0;
}

.hn-menu {
    width: calc(30% - 40px);
    background-color: var(--footer-bg);
    border-radius: 0;
    height: fit-content;
    padding: 30px;
    position: sticky;
    top: 100px;
    flex-shrink: 0;
    min-width: 320px;
    flex-shrink: 0;
}

.hn-menu ul {
    display: flex;
    flex-direction: column;
}

.hn-menu ul li {
    font-size: var(--p-fsize);
    font-weight: 500;
    padding: 15px 20px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.hn-menu ul li.title {
    font-size: var(--h2-fsize);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.hn-menu ul li:not(:last-child) {
    border-bottom: 1px solid var(--line-color);
}

.hn-menu ul li:hover:not(.active) {
    color: var(--site-red);
}

.hn-menu ul li.active {
    color: var(--site-red);
}

.txt-area *+* {
    margin-top: 7px;
}

.txt-area ul li {
    padding-left: 20px;
    position: relative;
    font-size: var(--p-fsize);
    line-height: 1.6;
    color: var(--text-color);
}

.txt-area ul li::before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    background-color: var(--site-red);
    border-radius: 100%;
    left: 0;
    top: 8.5px;
}

@media (max-width: 1080px) {
    .hn-area {
        gap: var(--site-ara-space);
        flex-direction: column-reverse;
    }

    .hn-left-area,
    .hn-menu {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .transfer-item {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .transfer-item p {
        width: 100%;
    }

    .gdhmg {
        gap: 0;
    }

    .gdhmt {
        margin-top: 10px;
    }
}

/* #endregion */


/* #region faq area */

.faq-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 10px;
    gap: 20px;
}

.faq-item.active .faq-title h3 {
    color: var(--site-red);
}

.faq-title h3 {
    font-size: var(--h3-fsize);
    font-weight: 500;
    transition: all 0.3s ease;
}

.faq-content {
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-title img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.faq-item.active .faq-title img {
    transform: rotate(-180deg);
}

.faq-item.active .faq-content {
    height: var(--data-height) !important;
}

/* #endregion */


/* #region blog area */

.blog-area {
    display: flex;
    gap: 40px;
}

.blog-left {
    width: calc(70% - 20px);
    flex-shrink: 0;
}

.blog-right {
    width: calc(30% - 20px);
    flex-shrink: 0;
}

.blog-img {
    width: 100%;
    aspect-ratio: 10/7;
    overflow: hidden;
    border-radius: 0;
    box-shadow: var(--product-card-img-shadow);
}

.blog-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-title {
    margin-top: 20px;
}

.blog-title h1 {
    font-size: var(--h2-fsize);
}

.blog-content {
    margin-top: 20px;
}

.other-blogs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.other-blog {
    display: flex;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.other-blog * {
    transition: all 0.3s ease;
}

.other-blog:hover * {
    color: var(--site-red);
}

.other-blog:hover img {
    aspect-ratio: 1/1;
}

.other-blogs .other-blog:not(:first-child) {
    border-top: 1px solid var(--line-color);
    padding-top: 20px;
}

.other-blog-img {
    overflow: hidden;
    border-radius: 0;
    flex-shrink: 0;
    height: fit-content;
}

.other-blog-img img {
    width: 150px;
    aspect-ratio: 15/10;
    object-fit: cover;
}

.other-blog-txt {
    display: flex;
    align-items: center;
}

.other-blog-txt-inner {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.other-blog-txt p {
    font-size: var(--p-fsize);
    font-weight: 500;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.other-blog-txt span {
    font-size: var(--other-blog-txt-span-fsize);
    color: var(--site-antrasit);
}

.other-blogs-title {
    font-weight: 500;
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 5px;
    margin-bottom: 20px;
}

@media (max-width: 1360px) {
    .blog-left {
        width: calc(65% - 20px);
    }

    .blog-right {
        width: calc(35% - 20px);
    }
}

@media (max-width: 1080px) {
    .blog-left {
        width: 100%;
    }

    .blog-right {
        width: 100%;
    }

    .blog-area {
        flex-wrap: wrap;
    }
}


/* #endregion */


/* #region blog list area */

.blog-list-area {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 40px;
}

.blog-list-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc(33.333% - 20px);
}

.blog-list-item-img {
    width: 100%;
    aspect-ratio: 10/7;
    overflow: hidden;
    box-shadow: var(--product-card-img-shadow);
    border-radius: 0;
    overflow: hidden;
}

.blog-list-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-list-item-txt {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.blog-list-item-txt p {
    font-size: var(--p-fsize);
    font-weight: 500;
}

.blog-list-item-txt span {
    font-size: var(--other-blog-txt-span-fsize);
    color: var(--site-antrasit);
}

@media (max-width: 820px) {
    .blog-list-item {
        width: calc(50% - 15px);
    }
}

@media (max-width: 500px) {
    .blog-list-item {
        width: 100%;
    }
}

/* #endregion */


/* #region header menu mobile */

#header-menu-mobile-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1002;
    display: flex;
    align-items: start;
    justify-content: start;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

#header-menu-mobile-filter.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.header-menu-mobile {
    width: 100%;
    max-width: 450px;
    background-color: var(--site-white);
    overflow: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
    height: 100%;
}

.hmm-head {
    width: 100%;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.hmm-head img {
    width: 100%;
    height: auto;
}

.hmm-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-image: url(../images/cross.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.hm-content {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hm-content>li,
.hm-content>li>.hm-title {
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hm-content li:hover>.hm-title {
    color: var(--site-red);
}

.hm-content>li>.hm-content {
    border-left: 1px solid var(--line-color);
    margin: 0 0 0 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0px 0 0 15px;
    width: calc(100% - 10px);
}

.hm-content>li.active>.hm-content {
    margin: 10px 0 10px 10px;
}


.hm-content>li.have-sub>.hm-title {
    width: 100%;
    position: relative;
    display: block;
    padding-right: 25px;
}

.hm-content>li.have-sub>.hm-title:before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: var(--site-black);
    -webkit-mask: url('../images/menu-sub-arrow.svg') no-repeat center/cover;
    mask: url('../images/menu-sub-arrow.svg') no-repeat center/cover;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    transition: all 0.3s ease;
}

li.have-sub:hover>.hm-title:before {
    background: var(--site-red);
}

li.have-sub.active>.hm-title:before {
    transform: translateY(-50%) rotate(-180deg);
    background: var(--site-red);
}

li.have-sub.active>.hm-title {
    color: var(--site-red);
}

li.have-sub:hover>.hm-title {
    color: var(--site-red);
}

.hm-content li.header-menu--red .hm-title,
.hm-content li.header-menu--red .hm-title a {
    color: var(--site-red);
}

.hm-content li.header-menu--black .hm-title,
.hm-content li.header-menu--black .hm-title a {
    color: #333;
}

.hm-content:not(.hcmain) {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: height 0.4s linear, opacity 0.4s linear;
}

li.have-sub.active>.hm-content {
    opacity: 1;
}


.hmc-modal-content {
    overflow: auto;
    max-height: calc(100dvh - 80px);
}

/* #endregion */


/* #region mobile sub menu */

#mobile-sub-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--site-white);
    z-index: 1001;
    box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
    overflow: auto;
    display: none;
}

@media (max-width: 768px) {
    #mobile-sub-menu {
        display: block;
    }

    .page-wp-btn {
        bottom: 90px !important;
        right: 20px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .go-up-btn-active .page-wp-btn {
        bottom: 160px !important;
        right: 20px !important;
    }

    .go-up-btn {
        bottom: 90px !important;
        right: 20px !important;
        width: 50px !important;
        height: 50px !important;
    }

    .page-wp-btn:before,
    .page-wp-btn:after {
        display: none;
    }
}

#mobile-sub-menu ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    gap: 20px;
    padding: 0 20px;
}

#mobile-sub-menu ul li {
    font-size: var(--mobile-sub-menu-li-fsize);
    font-weight: 600;
    color: var(--site-black);
    padding: 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

#mobile-sub-menu ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}


#mobile-sub-menu ul li img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(0);
}

@media (max-width: 400px) {
    #mobile-sub-menu ul {
        gap: 10px;
        padding: 0 10px;
        justify-content: space-between;
    }

    #mobile-sub-menu ul li {
        font-size: 0.7em;
    }

    #mobile-sub-menu ul li img {
        width: 17px;
        height: 17px;
    }
}

/* #endregion */


/* #region product preview */

.product-preview-area {
    width: 1170px;
    max-width: 95%;
    max-height: 95%;
    background-color: var(--site-white);
    display: flex;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    transition: all 0.5s ease;
}

#product-preview-filter.active .product-preview-area {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ppa-img {
    aspect-ratio: 12/16;
    width: 40%;
    height: auto;
}

.ppa-img img {
    aspect-ratio: 12/16;
    height: 100%;
    object-fit: cover;
}

.ppa-txt {
    margin-top: 20px;
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 30px;
    overflow: auto;
    flex-shrink: 0;
}

.ppa-ht-txt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.ppa-ht-btns {
    display: flex;
    gap: 20px;
}

.ppa-detail-btn {
    margin-top: 15px;
}

.product-preview-area .pd-desc {
    line-clamp: 4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 15px;
}

.product-preview-area .pd-btns,
.product-preview-area .pd-selects {
    margin-top: 15px;
}

.ppa-price {
    display: flex;
    gap: 20px;
    align-items: center;
}

.ppa-price h3 {
    font-size: var(--h3-fsize);
    font-weight: 500;
}

.ppa-price h3.product-normal-price {
    font-size: var(--h3-fsize);
    font-weight: 500;
}

.ppa-price h3.product-new-price {
    font-size: var(--h3-fsize);
    font-weight: 500;
    color: var(--site-red);
}

.ppa-price h3.product-old-price {
    font-size: var(--p-fsize);
    font-weight: 500;
    text-decoration: line-through;
    color: var(--site-antrasit);
}

.ppa-price h3.product-discount-rate {
    font-size: var(--p-fsize);
    font-weight: 500;
}

.ppa-price h3.product-discount-rate span {
    font-size: var(--p-fsize);
    font-weight: 500;
}

@media (max-width: 1080px) {
    .product-preview-area {
        flex-direction: column;
        overflow: auto;
        height: auto;
    }

    .ppa-img {
        width: 100%;
        max-height: 80dvh;
        margin: 0 auto;
    }

    .ppa-img img {
        margin: 0 auto;
    }

    .ppa-txt {
        width: 100%;
    }
}

/* #endregion */


/* #region header search */

.header-search-results {
    position: absolute;
    width: 700px;
    max-height: 500px;
    background-color: var(--site-white);
    top: 100%;
    left: 0;
    z-index: 1000;
    transform: translateY(10px);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.header-search-results:hover,
.search-input-box-area:hover .header-search-results {
    opacity: 1;
    visibility: visible;
}

.header-search-results-inner {
    overflow-y: auto;
    max-height: 500px;
}

.header-search-results-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.header-search-results-item:not(:last-child) {
    border-bottom: 1px solid var(--line-color);
}

.header-search-results-item .hsri-img {
    width: 100px;
    border-radius: 0;
    overflow: hidden;
}

.hsri-txt h4 {
    font-size: var(--p-fsize);
    font-weight: 500;
}

.hsri-price {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hsri-price p {
    font-size: var(--p-fsize);
    font-weight: 500;
}

.hsri-price p.hsri-old-price {
    font-size: var(--p-fsize);
    text-decoration: line-through;
    color: var(--site-antrasit);
}

.hsri-price p.hsri-old-price+p {
    color: var(--site-red);
}

/* Search loading, no results, error states */
.header-search-results.loading .header-search-results-inner,
.search-page-preview.loading .search-page-preview-inner {
    position: relative;
    min-height: 60px;
}

.search-loading,
.search-no-results,
.search-error {
    padding: 20px;
    text-align: center;
    color: var(--site-gray);
    font-size: 14px;
}

.search-loading {
    color: var(--site-red);
    position: relative;
}

.search-loading::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--site-red);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.search-no-results {
    color: var(--site-gray);
}

.search-error {
    color: var(--site-red);
}

.header-search-results-item:hover {
    background-color: var(--footer-bg);
}

.search-page-input-area {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
    max-width: 100%;
}

.search-page-input-area input[type="text"] {
    width: 330px;
    padding: 10px 20px;
    border-radius: 0;
    border: 1px solid var(--line-color);
    font-size: var(--filter-li-fsize);
    max-width: 80%;
}

.search-page-input-area button {
    width: fit-content;
    padding: 11px 20px;
    min-width: 0;
}

/* #endregion */


/* #region 404 area */

.error-404-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.e4a-text {
    width: calc(35% - 25px);
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.e4a-btns {
    display: flex;
    align-items: center;
    gap: 25px;
}

.e4a-img {
    width: calc(65% - 25px);
    display: flex;
    align-items: center;
    justify-content: end;
}

/* #endregion */


/* #region maintenance mode bar */

.maintenance-mode-bar {
    width: 100%;
    background-color: var(--site-black);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 0;
    position: relative;
    z-index: 101;
}

.maintenance-mode-bar p {
    color: var(--site-red);
    font-size: var(--p-fsize);
    font-weight: 500;
    margin: 0;
}

/* #endregion */


/* #region compare modal */

#compare-modal-filter-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#compare-modal-filter-area.active {
    opacity: 1;
    visibility: visible;
}

.compare-modal {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--site-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all 0.3s ease;
}

#compare-modal-filter-area.active .compare-modal {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.compare-modal .container {
    display: flex;
    align-items: center;
}

.compare-modal-title {
    width: fit-content;
    white-space: nowrap;
    margin-right: 40px;
}

.compare-modal-products {
    display: flex;
    gap: 20px;
    width: 100%;
    overflow-x: auto;
    padding: 5px;
    scrollbar-width: thin;
    scrollbar-color: var(--site-black) transparent;
}

.compare-modal-products::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

.compare-modal-products::-webkit-scrollbar-track {
    background: transparent;
}

.compare-modal-products::-webkit-scrollbar-thumb {
    background-color: var(--site-black);
    border-radius: 10px;
}

.compare-modal-product {
    width: 14.7%;
    height: auto;
    box-shadow: var(--product-card-img-shadow);
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.compare-modal-product .remove-compare-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: var(--site-black);
    color: var(--site-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--p-fsize);
    font-weight: 500;
    border: none;
    padding: 0;
    margin: 0;
    z-index: 10;
}

.compare-modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-shrink: 0;
    gap: 15px;
    margin-left: 40px;
}

.compare-clear-btn {
    font-size: var(--btn-fsize);
    font-weight: 500;
    border-bottom: 1px solid var(--site-black);
    cursor: pointer;
}

.compare-modal .close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

/* #endregion */


/* #region compare products */

.compare-products-area {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
}

.compare-product-item {
    width: 25%;
    flex-shrink: 0;
    border: 1px solid var(--line-color);
    border-left: 0;
    border-top: 0;
}

.compare-products-area .compare-product-item:nth-child(4n + 1) {
    border-left: 1px solid var(--line-color);
}

.cpi-delete-btn {
    width: 100%;
    height: 40px;
    background-color: var(--site-red);
    color: var(--site-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--p-fsize);
    font-weight: 500;
    user-select: none;
}

.cpi-product-title,
.cpi-product-category,
.cpi-product-brand,
.cpi-product-stock-status {
    padding: 10px;
    text-align: center;
}

.compare-product-item .product-card-price {
    width: fit-content;
    margin: 10px auto;
}

.cpi-product-btns {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.cpi-product-btns .cpi-btn {
    border-radius: 0;
}

.cpi-btn.add-favorites {
    width: 46px;
    height: 46px;
    aspect-ratio: 1/1;
    border: 1px solid var(--line-color);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpi-product-brand {
    background-color: var(--footer-bg);
}

.cpi-product-stock-status.in-stock {
    color: var(--site-green);
    font-weight: 500;
}

.cpi-product-stock-status.out-of-stock {
    color: var(--site-red);
    font-weight: 500;
}

/* #endregion */


/* #region virtual pos area */

.bg-orange {
    background-color: var(--site-orange2) !important;
}

.stock-notify-btn:disabled {
    background-color: #28a745 !important;
}


/* Pasif varyant stilleri */
.box-select-item.disabled,
.color-select-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
}

.box-select-item.disabled::after,
.color-select-item.disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ff0000;
    transform: rotate(-45deg);
}

select option:disabled {
    color: #999;
}

.virtual-pos-tabs {
    margin-top: 15px;
}

.vp-tab-headers {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.vp-tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vp-tab-btn:hover {
    color: #333;
    background: #f5f5f5;
}

.vp-tab-btn.active {
    color: #2c3e50;
    border-bottom-color: #3498db;
    background: #f8f9fa;
}

.vp-tab-contents {
    position: relative;
}

.vp-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.vp-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vp-info-box {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 0;
    border: 1px solid #e0e0e0;
}

.vp-logo {
    margin-bottom: 15px;
}

.vp-info-box p {
    margin-bottom: 15px;
    color: #555;
}

.vp-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vp-features li {
    padding: 8px 0;
    color: #27ae60;
    font-size: 14px;
}

/* #endregion */


/* #region goToPanel */

[data-goto-panel-url] {
    position: relative;
}

[data-goto-panel-url]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--site-red);
    opacity: 0.5;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

[data-admin-mode="true"] [data-goto-panel-url]:hover:before {
    opacity: 0.6;
    visibility: visible;
    cursor: pointer;
}

.admin-mode-btn {
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 99999999;
}

@media (hover: none) and (pointer: coarse) {
    [data-goto-panel-url]:before {
        display: none !important;
    }

    .admin-mode-btn {
        display: none !important;
    }
}

/* #endregion */


/* #region invoice */

.wrapper-invoice {
    background-color: var(--footer-bg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.invoice-section {
    padding: 120px 0px;
    width: 100%;
}

.invoice-section .top {
    text-align: right;
    margin-bottom: 36px;
}

.box-invoice {
    background: var(--site-white);
    box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.05);
    border-radius: 0;
}

.box-invoice .header {
    padding: 133px 100px 122px;
    border-bottom: 1px solid var(--line-color);
}

.box-invoice .wrap-top {
    display: flex;
    margin-bottom: 56px;
    align-items: center;
    gap: 15px;
}

.wrap-top .box-left,
.wrap-date .box-left,
.wrap-info .box-left {
    width: calc(50% - 40px);
}

.wrap-top .box-right,
.wrap-date .box-right,
.wrap-info .box-right {
    width: calc(50% - 40px);
}

.wrap-top .box-left {
    width: 60%;
}

.wrap-top .box-right {
    width: 40%;
}

.box-invoice .wrap-top .title {
    font-size: 28px;
    line-height: 36.46px;
    color: var(--site-black);
    font-weight: 700;
    white-space: nowrap;
}

.box-invoice .wrap-top .price {
    font-size: 17px;
    line-height: 28px;
    font-weight: 500;
}

.box-invoice .wrap-date {
    display: flex;
    margin-bottom: 60px;
}

.box-invoice .wrap-date label {
    font-size: 15px;
    line-height: 28px;
    display: block;
    font-weight: 600;
}

.box-invoice .wrap-date .date {
    font-size: 15px;
    line-height: 28px;
    font-weight: 500;
}

.box-invoice .wrap-info {
    margin-bottom: 80px;
    display: flex;
}

.box-invoice .wrap-info .title {
    font-size: 20px;
    line-height: 26.04px;
    font-weight: 500;
    margin-bottom: 12px;
}

.box-invoice .wrap-info .sub {
    font-size: 15px;
    line-height: 28px;
    font-weight: 500;
}

.box-invoice .wrap-info .desc {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 0;
    font-weight: 400;
}

.invoice-table {
    width: 100%;
    border-bottom: 1px solid var(--line-color);
}

.invoice-table thead {
    background-color: #f6f6f6;
}

.invoice-table .title th {
    padding: 20px 65px 20px 40px;
    color: var(--site-black);
    font-weight: 500;
    font-size: 17px;
    line-height: 28px;
    text-wrap: nowrap;
    text-align: left;
}

.invoice-table .title th:first-child {
    border-radius: 0;
    width: 40%;
}

.invoice-table .title th:last-child {
    border-radius: 0;
}

.invoice-table .content td {
    padding: 20px 65px 20px 40px;
    font-size: 15px;
    line-height: 28px;
    border-bottom: 1px solid rgb(225, 225, 225);
    text-wrap: nowrap;
}

.invoice-table .content .total {
    font-size: 17px;
    line-height: 28px;
    font-weight: 500;
}

.invoice-table .content:last-child td {
    border-bottom: none;
}

.box-invoice .footer {
    padding: 43px 30px;
}

.box-invoice .footer .box-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.box-invoice .footer .box-contact li {
    font-size: 15px;
    line-height: 28px;
}

.box-invoice .footer .box-contact li:first-child {
    color: var(--site-red);
}

.cus-container2 {
    position: static;
    max-width: 1200px;
    padding: 0px 15px;
    margin: 0 auto;
    width: 100%;
}

.wrap-top,
.wrap-date,
.wrap-info {
    display: flex;
    justify-content: space-between;
}

.spbtl {
    border-bottom: 1px solid var(--line-color);
    padding: 10px 0;
    margin: 0 !important;
}

.spbtl span:first-child {
    font-weight: 700;
}

.spbtl span:last-child {
    font-weight: 400;
}

.invoice-table-responsive {
    overflow-x: auto;
    margin-bottom: 80px;
}

@media(max-width: 980px) {
    .invoice-table-responsive-summ {
        width: 500px !important;
        max-width: 100% !important;
    }
}

@media(max-width: 640px) {

    .wrap-top,
    .wrap-date,
    .wrap-info {
        flex-wrap: wrap;
        gap: 20px;
    }

    .box-left,
    .box-right {
        width: 100% !important;
    }

    .box-invoice .header {
        padding: 30px 30px 60px 30px;
    }
}

/* #endregion */


/* #region search page */

.search-page-preview {
    position: absolute;
    background-color: var(--site-white);
    height: fit-content;
    width: 500px;
    max-width: 95dvw;
    left: 0%;
    z-index: 1000;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    top: -20px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.search-page-preview.active {
    visibility: visible;
    opacity: 1;
}

.search-page-preview-inner {
    overflow-y: auto;
    max-height: 510px;
}

.search-page-preview .hsri-img {
    width: 80px;
}

@media (max-width: 1080px) {
    .search-page-preview {
        top: -74px;
    }
}

/* #endregion */


/* #region main popup */

#main-popup-filter {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s linear, visibility 0.3s linear;
}

#main-popup-filter.active {
    opacity: 1;
    visibility: visible;
}

#main-popup-filter.active .main-popup-content {
    transform: scale(1);
    opacity: 1;
}

.main-popup-content {
    max-width: 35%;
    width: 100%;
    height: fit-content;
    background-color: var(--site-white);
    padding: 20px;
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s linear, opacity 0.3s linear;
}

.main-popup-content h2 {
    margin-bottom: 10px;
}

.main-popup-content p {
    margin-bottom: 20px;
}

.main-popup-head {
    background-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0;
    gap: 30px;
    align-items: start;
}

@media (max-width: 1600px) {
    .main-popup-content {
        max-width: 60%;
    }
}

@media (max-width: 800px) {
    .main-popup-content {
        max-width: 90%;
    }
}

@media (max-width: 600px) {
    .main-popup-content h2 {
        font-size: 1.3em;
    }
}

/* #endregion */


/* #region product badges */

.product-badges-area {
    position: absolute;
    top: 5px;
    left: 5px;
    width: fit-content;
    height: fit-content;
    z-index: 100;
    gap: 3px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    visibility: visible;
    opacity: 1;
}

.product-card-img:has(.discount-counter) .product-badges-area {
    top: 40px;
}

.product-badge {
    padding: 5px 5px;
    font-size: var(--product-card-badge-mini-fsize);
    font-weight: 500;
    color: var(--site-white);
    width: fit-content;
    line-height: 1;
}

.product-card-img:hover .product-badges-area {
    visibility: hidden;
    opacity: 0;
}

/* #endregion */


/* #region delete account */

#delete-account-btn {
    color: var(--site-red);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}

/* #endregion */


/* #region swall */

.swal-small-toast {
    font-size: 12px;
    padding: 8px 12px;
}

/* #endregion */


/* #region promotions area */

.promotions-area {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.promotions-list-area {
    width: calc(75% - 20px);
    display: flex;
    flex-direction: column;
}

.promotions-list-area .promotion-item+.promotion-item {
    margin-top: 40px;
}

.promotion-item {
    position: relative;
}

a.promotion-item {
    transition: all 0.3s ease-in-out;
    transform: translateY(0);
    cursor: pointer;
}

a.promotion-item:hover {
    transform: translateY(-5px);
}

.promotion-item-txt {
    display: flex;
    width: fit-content;
    justify-content: space-between;
    align-items: center;
    background-color: var(--site-black);
    padding: 15px 20px;
    position: absolute;
    overflow: hidden;
    bottom: 20px;
    right: 20px;
    z-index: 1;
}

.promotion-item-txt::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: var(--site-red);
    transition: all 0.3s ease;
    z-index: 0;
}

a.promotion-item:hover .promotion-item-txt::before {
    width: 100%;
}

a.promotion-item:hover .promotion-item-txt * {
    color: var(--site-white) !important;
}

.promotion-item-title {
    font-size: var(--h3-fsize);
    margin-bottom: 10px;
}

.promotion-item-countdown-label {
    font-size: var(--promotion-item-countdown-label-fsize);
    font-weight: 500;
    color: var(--promotion-item-label-color);
    text-transform: uppercase;
    margin-right: 20px;
    text-align: center;
}

.promotion-item-countdown-area {
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1;
}

.countdown-value {
    color: var(--site-white);
    font-size: var(--h2-fsize);
    font-weight: 600;
    line-height: 1.1;
}

.countdown-unit {
    font-size: var(--promotion-item-countdown-label-fsize);
    font-weight: 500;
    color: var(--promotion-item-label-color);
    text-transform: uppercase;
}

.countdown-separator {
    font-size: var(--promotion-item-countdown-label-fsize);
    font-weight: 800;
    color: var(--promotion-item-label-color);
    text-transform: uppercase;
    margin: 0 10px;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.promotions-other-area {
    width: calc(25% - 20px);
    position: sticky;
    top: 50px;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.promotions-other-section {
    width: 100%;
}

.promotions-other-header {
    margin-bottom: 20px;
}

.promotions-other-social {
    width: 100%;
}

.promotions-other-social .ftr-social-icons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.promotions-other-social .ftr-social-icons .fsi {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    border: 1px solid var(--site-black, #0a0a0a);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.promotions-other-social .ftr-social-icons .fsi img {
    width: 50%;
    height: 50%;
    object-fit: contain;
    transition: all 0.3s ease;
}

.promotions-other-social .ftr-social-icons .fsi:hover {
    background-color: var(--site-red, #d32f2f);
    border-color: var(--site-red, #d32f2f);
}

.promotions-other-social .ftr-social-icons .fsi:hover img {
    filter: brightness(0) invert(1);
}

.promotions-other-title {
    font-size: var(--h3-fsize, 1.25rem);
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--line-color, #e5e5e5);
}

.promotions-others {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.promotions-other-product {
    display: flex;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.1);
}

.promotions-other-product * {
    transition: all 0.3s ease;
}

.promotions-other-product:hover {
    background-color: var(--site-red);
    transform: translateY(-5px);
}

.promotions-other-product:hover * {
    color: var(--site-white);
}

.promotions-other-product:hover .promotions-other-product-discount {
    color: var(--site-red);
    background-color: var(--site-white);
}


.promotions-others .promotions-other-product:not(:first-child) {
    margin-top: 20px;
}

.promotions-other-product-img {
    overflow: hidden;
    border-radius: 0;
    flex-shrink: 0;
    height: fit-content;
}

.promotions-other-product-img img {
    width: 100px;
    aspect-ratio: 12/16;
    object-fit: cover;
    display: block;
}

.promotions-other-product-txt {
    display: flex;
    align-items: center;
    flex: 1;
}

.promotions-other-product-txt-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.promotions-other-product-txt p {
    font-size: var(--p-fsize, 0.875rem);
    font-weight: 500;
    line-clamp: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--site-black, #0a0a0a);
    margin: 0;
}

.promotions-other-product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
}

.promotions-other-product-normal-price {
    font-size: var(--p-fsize, 0.875rem);
    font-weight: 600;
    color: var(--site-black, #0a0a0a);
}

.promotions-other-product-old-price {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--site-antrasit, #666);
    text-decoration: line-through;
}

.promotions-other-product-new-price {
    font-size: var(--p-fsize, 0.875rem);
    font-weight: 600;
    color: var(--site-red, #d32f2f);
}

.promotions-other-product-discount {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--site-white, #fff);
    background-color: var(--site-red, #d32f2f);
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    width: fit-content;
    margin-right: 50px;
}

.promotion-item-countdown-label-ended {
    color: var(--site-red) !important;
    margin-right: 0 !important;
}

.promotion-item-description {
    margin-top: 20px;
}

.promotions-area+.product-list-area {
    margin-top: 40px;
}

@media(max-width: 1360px) {
    .promotions-other-area {
        display: none;
    }

    .promotions-list-area {
        width: 100%;
    }
}

@media(max-width: 820px) {
    .promotions-list-area .promotion-item+.promotion-item {
        margin-top: 20px;
    }
}

@media(max-width: 680px) {
    .promotion-item-txt {
        position: relative;
        bottom: auto;
        right: auto;
        width: 100%;
        justify-content: center;
    }

    .countdown-separator {
        margin: 0 5px;
    }
}

@keyframes gc-spin {
    to {
        transform: rotate(360deg);
    }
}

#gift-cards-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.gift-card-item {
    background: linear-gradient(135deg, var(--site-red, #ff4c4c) 0%, var(--site-orange, #ff8d00) 100%);
    border-radius: 12px;
    padding: 18px 20px;
    color: var(--site-white, #fff);
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(255, 76, 76, 0.25);
}

.gift-card-item-crt {
    width: calc(50% - 6px);
}

@media(max-width: 820px) {
    .gift-card-item-crt {
        width: 100%;
    }
}

.gift-card-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--site-orange2, #ffca15), transparent);
}

.gift-card-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 76, 76, 0.35);
}

.gift-card-item.disabled {
    background: linear-gradient(135deg, #dedede 0%, #d1cdcd 100%);
    opacity: 0.7;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: var(--site-red);
}

.gift-card-item.disabled .cgtbr {
    background: var(--site-red) !important;
}

.gift-card-item.disabled .cgtbr-container {
    background: var(--site-antrasit) !important;
}

.gift-card-item.disabled * {
    color: var(--site-black) !important;
}

.gift-card-item.disabled::before {
    background: linear-gradient(90deg, transparent, #cccccc, transparent);
}

.gift-card-item .gc-decoration {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 90px;
    height: 90px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
}

.gift-card-apply-btn {
    background: var(--site-white, #fff);
    border: none;
    color: var(--site-red, #ff4c4c);
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gift-card-apply-btn:hover:not(:disabled) {
    background: var(--site-orange2, #ffca15);
    color: var(--site-black, #000);
    transform: scale(1.02);
}

.gift-card-apply-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.5);
}

.btn-remove-gift-card:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

.in-a-link a {
    text-decoration: underline;
    color: var(--site-red);
}