@media only screen and (max-width: 1200px) {
    #btncollapzion {
        left: 6px !important;
        bottom: 50px !important;
    }

    .free-swiper .swiper-button-prev, .free-swiper .swiper-button-next {
        left: 13.5%;
    }

    .free-swiper .swiper-button-prev {
        left: 17.5% !important;
    }

    .site-slider .swiper-button-next {
        right: 52% !important;
    }

    .amazing-slider-two .swiper-button-prev {
        right: 43.5%;
    }

    .free-swiper-two .swiper-button-next {
        left: 13%;
    }

    .cat-item-desc h5 {
        font-size: 18px;
    }

    .compare table tr th {
        min-width: 350px;
    }
}

@media only screen and (max-width: 992px) {
    .container-fluid {
        --bs-gutter-x: 2.5rem;
    }

    .category-filter {
        padding: 14px;
    }

    header {
        background: #fff;
        box-shadow: var(--shadow-md);
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 7px 0;
    }

    .search-filed .search-input {
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .main-slider .slider .swiper-slide img {
        height: 200px;
        border-radius: 10px;
    }

    #btncollapzion {
        left: 4px !important;
    }

    .site-slider .swiper-button-prev {
        right: 46.5% !important;
    }

    .product-group-item img {
        height: auto;
        border: 1px solid var(--bs-gray-300);
    }

    .product-group .col-lg-3, .product-group .col-lg-3:not(:last-child) {
        border: none !important;
        border-left: none !important;
    }

    .product-group-item .col-6 {
        border: none !important;
    }

    .free-swiper .swiper-button-prev, .free-swiper .swiper-button-next {
        display: none;
    }

    .title-col-social {
        width: 100%;
    }

    .footer-col .social-link {
        justify-content: start;
    }

    .product-desc-tab ul {
        justify-content: center !important;
    }

    .product-desc-tab ul li {
        margin: 0 10px;
    }

    .product-desc-tab ul li button {
        padding: 20px 20px;
    }

    .main-table tr td {
        white-space: nowrap;
        min-width: 200px;
    }

    #productTable-pane .list-inline-item {
        width: 100%;
    }

    .bq-footer .col-12 {
        width: 50%;
    }

    .grid-img, .grid-center {
        height: 220px;
        margin-bottom: 10px;
    }

    .panel-image img {
        height: 250px;
        display: block;
        margin: 15px auto;
    }
}

@media only screen and (max-width: 768px) {
    .site-slider .swiper-button-next, .site-slider .swiper-button-prev {
        display: none;
    }

    .product-desc-tab ul {
        justify-content: start !important;
        min-width: 0;
        flex-wrap: wrap;
        gap: 6px;
    }

    .product-desc-tab ul li {
        margin-left: 0;
        margin-bottom: 0;
    }

    .product-desc-tab ul li button {
        display: block;
        padding: 8px 14px;
        white-space: nowrap;
        color: var(--color-site);
        font-size: 14px;
        box-shadow: var(--shadow-sm);
    }

    .product-desc-tab {
        overflow-x: visible;
    }

    .product-desc-tab ul li button.active {
        border-color: var(--main-color-one);
        color: var(--main-color-one);
    }

    .product-gallery .swiper-slide {
        margin-bottom: 10px;
        padding: 8px 8px 36px 8px;
    }

    .product-gallery img {
        max-width: 90%;
        height: 220px;
        object-fit: contain;
    }

    .product-gallery-thumb {
        padding: 8px;
    }

    .product-gallery-thumb img {
        height: 72px;
        object-fit: contain;
    }

    .product-meta nav.mb-3 {
        margin-bottom: 8px !important;
    }

    .product-meta .title.mt-md-0.mt-3 {
        margin-top: 10px !important;
    }

    .product-meta .title h6 {
        line-height: 1.8;
        margin-bottom: 6px !important;
    }

    .product-meta .title .d-flex.align-items-center.pb-2 {
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: 4px !important;
    }

    .product-meta-feature {
        margin-top: 12px;
    }

    .product-meta-feature-items ul {
        margin-top: 10px;
    }

    .product-meta-feature-items ul li:not(:last-child) {
        margin-bottom: 7px;
    }

    .product-meta-color {
        margin-top: 14px;
    }

    .product-meta-color h5 {
        margin-bottom: 10px;
    }

    .product-meta-color-items label {
        margin-bottom: 8px;
        padding: 7px 10px;
    }

    .product-variant-selector {
        margin-top: 14px;
    }

    .product-variant-selector__title {
        margin-bottom: 10px;
    }

    .product-variant-field:not(:last-of-type) {
        margin-bottom: 10px;
    }

    .se-cart {
        margin-top: 10px;
        padding: 10px;
    }

    .se-cart-item {
        padding: 10px 0;
    }

    .se-cart-item h4 {
        margin-bottom: 12px !important;
    }

    .se-cart-item .d-flex {
        flex-wrap: wrap;
    }

    .se-cart-item form.mt-3 {
        margin-top: 8px !important;
    }

    .btn-add-to-cart {
        padding: 10px 16px !important;
    }

    .product-variant-price {
        min-width: 140px;
    }

    .product-desc .row.mt-4.pt-2 {
        margin-top: 12px !important;
        padding-top: 0 !important;
    }

    .product-desc .content-box {
        padding: 12px;
    }

    .product-desc-content p {
        line-height: 2;
    }

    .list-inline.text-end.mb-0 {
        margin-top: 20px;
        text-align: right !important;
        display: flex;
        flex-wrap: wrap;
    }

    .evaluation-positive {
        margin-bottom: 10px;
    }

    .cart-items .image img {
        width: 200px;
        display: block;
        margin: auto;
    }

    .product-box-price-discount {
        text-align: left;
    }

    .product-box {
        padding: 10px;
    }

    .product-box .product-image {
        height: 150px;
        margin: 6px 0 10px;
    }

    .product-box .product-title {
        min-height: 58px;
        gap: 6px;
    }

    .product-box .product-action {
        gap: 8px;
        margin-top: 6px;
        padding-top: 9px;
    }

    .payment-detail-item {
        width: 100%;
        text-align: start;
        margin: 0 0 20px 0;
    }

    .detail-order-item {
        flex-wrap: wrap;
    }

    .panel-two-full-info-item .detail {
        margin-top: 15px;
    }

    .panel-mini-card {
        padding: 16px;
    }

    .panel-two-full-info-item .content {
        min-height: auto;
        padding: 16px 12px;
    }

    .icon-card {
        margin-left: 0 !important;
    }

    .user-profile .user-avatar {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }

    .user-profile .ms-3 {
        width: 100%;
        text-align: center;
    }

    .user-profile .user-avatar img {
        width: 80px;
    }

    .account-settings, .user-profile {
        flex-wrap: wrap;
        width: 100%;
    }
}

@media only screen and (max-width: 576px) {
    .category-page .footer-col .social-link {
        flex-wrap: wrap;
    }

    .cart-btn {
        border-radius: 5px !important;
    }

    .auth-btn {
        width: 40px;
        height: 40px;
        line-height: 1;
        background-color: var(--main-color-two);
        border-radius: 5px;
        text-align: center;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .top-header-link {
        gap: 6px;
    }

    .top-header-call {
        gap: 6px;
    }

    .cart-button {
        margin-right: 0;
    }

    .cart-button.ms-3 {
        margin-right: 8px !important;
    }

    .header .row {
        --bs-gutter-x: 0.75rem;
    }

    .feature {
        margin-top: 14px;
        margin-bottom: 12px;
    }

    .feature .row {
        --bs-gutter-y: 0.5rem;
    }

    .feature-item {
        min-height: 104px;
        padding: 12px 10px;
    }

    .feature-item .icon {
        width: 42px;
        height: 42px;
    }

    .feature-item .title h6 {
        line-height: 1.6;
    }

    .categories {
        padding-top: 22px !important;
        padding-bottom: 18px !important;
    }

    .categories .section-title {
        margin-bottom: 16px !important;
    }

    .categories .row {
        --bs-gutter-y: 0.75rem;
    }

    .bg-auth .content {
        min-height: 100vh;
        height: auto !important;
    }

    .auth {
        padding: 18px 0;
    }

    .auth-form {
        margin-top: 18px !important;
        padding: 18px;
        border-radius: 12px !important;
    }

    .auth-form-title {
        gap: 10px;
        margin-bottom: 18px !important;
        padding-bottom: 10px;
    }

    .auth-form-title h2 {
        font-size: 20px;
    }

    .auth-logo {
        width: 108px;
        max-width: 100%;
        max-height: 42px;
    }

    #form-auth,
    #mobile-auth-form,
    #otp-auth-form {
        padding-top: 8px !important;
        padding-bottom: 4px !important;
    }

    #form-auth .comment-item,
    #mobile-auth-form .comment-item {
        margin-bottom: 22px !important;
    }

    #form-auth .step-username {
        margin-bottom: 24px !important;
    }

    #form-auth .comment-item input.form-control,
    #form-auth .comment-item select,
    #mobile-auth-form .comment-item input.form-control {
        min-height: 50px;
        padding-top: 15px;
        padding-bottom: 11px;
    }

    .step-passwd input.form-control {
        padding-left: 100px;
    }

    .inline-btn-text {
        left: 6px;
    }

    .inline-btn-text .btn {
        min-height: 32px;
        padding: 5px 8px;
        font-size: 12px;
    }

    .auth-form .btn.main-color-one-bg {
        min-height: 48px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .loginTermsDesc {
        width: 100%;
        max-width: 330px;
        padding: 0 8px;
        font-size: 13px;
        line-height: 2 !important;
    }

    .auth-description {
        margin-bottom: 18px !important;
        font-size: 14px;
    }

    .auth-field-error {
        font-size: 12px;
    }

    .top-header-logo img {
        width: 88px;
        max-width: 100%;
        max-height: 34px;
        object-fit: contain;
    }

    .offcanvas .top-header-logo img {
        width: 140px;
        max-width: 100%;
        max-height: 44px;
    }

    .footer-app {
        padding: 12px 18px;
    }

    .footer {
        padding: 22px 0 96px;
    }

    .footer-col .nav-link {
        padding: 4px 0;
    }

    .cat-item {
        width: 100%;
        background-color: #fff;
        padding: 8px;
        border: 1px solid var(--bs-gray-400);
        box-shadow: var(--shadow-box);
        border-radius: 10px;
        min-height: 96px;
    }

    .cat-item-image img {
        width: 76px;
        height: 62px;
    }

    .cat-item-desc h5 {
        font-size: 15px;
        margin-bottom: 0;
    }

    .banner-item {
        margin-bottom: 12px;
        border-radius: 10px;
    }

    .product-slider {
        margin-top: 6px;
        margin-bottom: 4px;
    }

    .site-slider .swiper {
        padding-bottom: 72px;
    }

    .blog-slider .section-title {
        margin-bottom: 14px !important;
    }

    .blog-item .image img {
        height: 180px;
    }

    .footer-contact .row {
        --bs-gutter-y: 0.75rem;
        align-items: center;
    }

    .footer-contact-image {
        width: 150px;
    }

    .footer-contact-image img {
        width: 120px;
        max-height: 54px;
    }

    .footer-contact-call .navbar-nav {
        gap: 2px 12px;
    }

    .footer-col {
        margin-top: 14px;
    }

    .footer-col-item {
        margin-bottom: 8px;
    }

    .footer-col .social-link {
        justify-content: center;
    }

    .footer-form form .d-flex {
        gap: 8px;
    }

    .footer-form .btn {
        margin-right: 0 !important;
    }

    .footer-app {
        margin: 16px 0;
        border-radius: 12px;
    }

    .footer-app .navbar-nav {
        gap: 8px;
    }

    .footer-app .nav-link {
        padding: 4px;
    }

    .footer-app img {
        width: 132px;
        height: 40px;
    }

    .footer-description img {
        height: 92px;
    }

    .footer-description h5,
    .footer-description p,
    .footer-copyright p {
        text-align: center !important;
    }

    .category .swiper-slide {
        padding: 6px 0;
    }

    .category-sort .content-box {
        padding: 12px 0;
    }

    .category-sort .form-label {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        font-size: 14px;
    }

    .category-sort .form-select {
        min-height: 44px;
        padding-top: 9px;
        padding-bottom: 9px;
        font-size: 14px;
    }

    .category-pro .row {
        --bs-gutter-x: 0.625rem;
        --bs-gutter-y: 1rem;
    }

    .category-pro .product-box {
        padding: 8px;
        overflow: hidden;
    }

    .category-pro .product-box .product-image {
        height: 115px;
        margin: 5px 0 8px;
    }

    .category-pro .product-header-btn a {
        width: 29px;
        height: 29px;
        margin-bottom: 3px !important;
        line-height: 29px;
    }

    .category-pro .product-header-btn a i {
        font-size: 13px;
    }

    .category-pro .product-title {
        min-height: 70px;
        gap: 4px;
        margin-bottom: 8px !important;
    }

    .category-pro .product-title .title span {
        display: block;
        overflow: hidden;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .category-pro .product-box .product-title .title p {
        min-height: 38px;
        margin-top: 4px !important;
        margin-bottom: 0;
        overflow: hidden;
        display: -webkit-box;
        font-size: 12px;
        line-height: 1.6;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .category-pro .product-title .rating {
        white-space: nowrap;
    }

    .category-pro .product-title .rating .number span {
        font-size: 10px !important;
    }

    .category-pro .product-title .rating .icon {
        margin-right: 3px;
    }

    .category-pro .product-title .rating .icon i {
        font-size: 12px;
    }

    .category-pro .product-action {
        gap: 4px;
        padding: 7px 0 0;
    }

    .category-pro .product-action .discount > div {
        padding: 5px !important;
        white-space: nowrap;
    }

    .category-pro .product-action .discount span {
        font-size: 11px;
    }

    .category-pro .product-action .price p {
        white-space: nowrap;
    }

    .category-pro .product-action .new-price {
        font-size: 12px;
    }

    .category-pro .product-action .old-price {
        font-size: 10px;
    }

    .blog-menu-responsive {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }

    .blog-menu-responsive .content-box {
        padding: 10px 0;
    }

    .blog-grid {
        margin-top: 18px !important;
    }

    .blog-grid .row {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    .blog-grid .col-6,
    .blog-grid .col-12 {
        width: 100%;
    }

    .blog-grid .grid-center,
    .blog-grid .grid-img {
        height: 190px;
    }

    .blog-grid .al-item {
        margin-bottom: 0;
        border-bottom-width: 4px;
    }

    .blog-grid .al-date {
        top: 8px;
        left: 8px;
        padding: 3px 10px;
        font-size: 12px;
    }

    .blog-grid .al-title,
    .blog-grid .col-lg-4 .al-title {
        font-size: 14px;
        line-height: 1.8;
        padding: 14px;
    }

    .blog-post {
        margin-top: 22px;
    }

    .blog-post .section-title {
        margin-bottom: 14px !important;
    }

    .blog-post .blog-item {
        border-radius: 12px;
    }

    .blog-post .blog-item .image img {
        height: 170px;
        border-radius: 12px;
    }

    .blog-post .blog-item .title {
        padding: 10px;
    }

    .blog-post .blog-item .title > .d-flex {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    .blog-post .blog-item .title-item {
        min-height: 30px;
        padding: 5px 10px !important;
    }

    .blog-post .blog-item .title-item span {
        font-size: 12px !important;
    }

    .blog-post .blog-item h4 {
        min-height: auto;
        font-size: 14px !important;
        line-height: 1.9;
        white-space: normal;
        overflow: visible;
        display: block;
        padding-bottom: 6px !important;
    }

    .blog-post .my-paginate {
        margin-top: 12px !important;
        margin-bottom: 82px !important;
    }

    .product-box .product-image {
        height: 135px;
    }

    .product-box .product-title .title p {
        font-size: 13px;
    }

    .new-price {
        font-size: 14px;
    }

    .old-price {
        font-size: 12px;
    }

    .bq-footer {
        position: static;
        padding: 30px 0 0 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center !important;
    }

    .bq-footer .col-12 {
        width: 100%;
        text-align: center;
    }

    .my-flex-align-end {
        text-align: center;
    }

    .bq-footer a {
        margin-top: 10px;
        text-align: center;
        color: #c00;
        font-weight: bold;
    }

    .box_questions .bq2 {
        min-height: auto;
    }

    .box_comment_header .span1 {
        font-size: 16px;
    }

    .comments_likes {
        justify-content: center;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .comments_likes span {
        width: 100%;
        margin-bottom: 10px;
    }

    .cart-canvas h3 {
        font-size: 14px !important;
    }

    .payment_navigtions {
        margin-bottom: 20px;
    }

    .checkout-headers {
        width: 100%;
    }

    .checkout-headers ul {
        width: 100%;
        overflow-x: visible;
        display: flex;
        justify-content: space-between;
    }

    .checkout-headers ul li {
        box-sizing: border-box;
        flex: 1 1 0;
        min-width: 0;
        padding-left: 18px;
        text-align: center;
    }

    .checkout-headers ul li::before {
        width: 18px;
        height: 2px;
        top: 14px;
    }

    .checkout-headers ul li a {
        justify-content: center;
        flex-direction: column;
        font-size: 13px;
        gap: 6px;
        padding: 4px 2px;
    }

    .checkout-headers ul li a span {
        width: 26px;
        height: 26px;
        line-height: 26px;
        margin-left: 0;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 800;
    }

    .checkout-headers ul li a p {
        color: #515151;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
        white-space: normal;
    }

    .checkout-headers ul li.active a span {
        box-shadow: 0 0 0 4px var(--main-color-one-shadow);
    }

    .checkout-headers ul li.active a p {
        color: var(--main-color-one);
        font-weight: 900;
    }

    .cart-product {
        padding-bottom: 92px;
    }

    .cart-product-item {
        margin-bottom: 14px;
    }

    .cart-product-item .content-box {
        border-radius: 12px;
        padding: 10px 0;
    }

    .cart-items > .item {
        padding: 8px 0;
    }

    .cart-items .image img {
        width: 150px;
        max-height: 150px;
        object-fit: contain;
    }

    .cart-items .title h6 {
        font-size: 14px !important;
        line-height: 1.8;
        margin-top: 8px;
    }

    .cart-item-feature {
        margin-top: 10px !important;
        gap: 6px;
        width: 100%;
    }

    .cart-item-feature .item {
        width: 100%;
        line-height: 1.8;
        padding: 6px 0;
        border-bottom: 1px solid #eee;
    }

    .cart-item-feature .item:last-child {
        border-bottom: 0;
        padding-top: 10px;
        gap: 10px;
    }

    .cart-product .action {
        width: 100%;
        align-items: stretch !important;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid #eee;
    }

    .cart-product .product-box-price {
        width: 100%;
        align-items: flex-start !important;
    }

    .cart-product .product-box-price-price {
        width: 100%;
        align-items: baseline;
        justify-content: flex-start;
        padding: 8px 0;
    }

    .cart-product .product-box-price-price h5 {
        font-size: 26px !important;
        margin-bottom: 0 !important;
    }

    .cart-product .product-box-price-price p {
        line-height: 1.4;
        font-size: 13px;
        margin-right: 4px;
    }

    .cart-quantity-control {
        gap: 6px;
        padding: 4px;
    }

    .cart-quantity-secondary,
    .cart-quantity-increase {
        width: 42px;
        height: 42px;
    }

    .cart-quantity-value {
        width: 54px;
        height: 42px;
        font-size: 15px;
    }

    .cart-quantity-secondary i,
    .cart-quantity-increase i {
        font-size: 18px;
    }

    .cart-product-item .remove {
        min-width: 42px;
        height: 42px;
        margin-right: 4px;
    }

    .cart-product-item .remove i {
        font-size: 18px;
    }

    .cart-canvases {
        margin-bottom: 96px;
    }

    .cart-canvases .item {
        padding: 14px;
    }

    .cart-canvases .item .factor .factor-item {
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .cart-canvases .item .factor .factor-item:nth-of-type(4) h5,
    .cart-canvases .item .factor .factor-item:nth-of-type(4) p {
        font-size: 18px !important;
    }

    .cart-canvases .item .factor .action .btn {
        min-height: 44px;
    }

    .detail-order {
        padding: 14px;
    }

    .detail-order-item {
        align-items: flex-start !important;
        flex-wrap: wrap;
        gap: 5px 8px;
    }

    .detail-order-item h6 {
        width: 100%;
        min-width: 0;
        line-height: 1.7;
    }

    .detail-order-item span {
        margin-right: 24px;
        margin-left: 0 !important;
        line-height: 1.9;
    }

    .detail-order .btn {
        width: 100%;
        min-height: 40px;
    }

    .content-box > .cart-product-item {
        margin-top: 22px !important;
        margin-bottom: 26px !important;
    }

    .content-box > .cart-product-item .row {
        --bs-gutter-y: 0.75rem;
    }

    .content-box > .cart-product-item .cart-items {
        padding: 10px;
        border: 1px solid #eee !important;
        border-radius: 10px;
    }

    .content-box > .cart-product-item .cart-items .image {
        text-align: center !important;
    }

    .content-box > .cart-product-item .cart-items .image img {
        width: 86px !important;
        max-height: 86px;
    }

    .content-box > .cart-product-item .cart-item-feature {
        margin-top: 8px !important;
    }

    .content-box > .cart-product-item .cart-item-feature .item {
        border-bottom: 0;
        padding: 4px 0;
    }

    .content-box > .cart-product-item .cart-item-feature .item:last-child {
        justify-content: flex-start;
        padding-top: 8px;
    }

    .image-selector nav,
    .image-selector .navbar-nav {
        width: 100%;
    }

    .image-selector ul {
        gap: 8px;
    }

    .image-selector li {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    .image-selector label {
        width: 100%;
        min-height: 58px;
        padding: 10px;
    }

    .send-item {
        min-width: 0;
        min-height: 58px;
        padding: 8px 10px;
    }

    .image-selector label img {
        width: 82px;
        height: 58px;
    }

    .slider-title-desc {
        margin-bottom: 14px !important;
    }

    .slider-title-title h2 {
        font-size: 17px;
    }

    .show-discount-modal {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px !important;
    }

    .show-discount-modal .slider-title-desc {
        width: 100%;
    }

    .show-discount-modal > i {
        font-size: 30px !important;
        margin-left: 4px;
    }

    .delivary-payment-bank {
        padding-bottom: 96px;
    }

    .delivary-payment-bank .image-selector {
        width: 100%;
    }

    .delivary-payment-bank .image-selector li {
        flex: 1 1 calc(33.333% - 8px);
    }

    .delivary-payment-bank .image-selector label {
        min-width: 0;
        min-height: 76px;
    }

    .delivary-payment-bank .image-selector label img {
        width: 86px;
        height: 56px;
        object-fit: contain;
    }

    .content-box > .cart-product-item .checkout-quantity-control {
        flex-wrap: nowrap;
    }

    .steps .step {
        margin-bottom: 55px;
    }

    .comment.active {
        padding-left: 0;
        padding-right: 0;
    }

    .comment.active .comment-author-ava {
        left: unset;
        right: 0;
        top: -40px;
    }

    .comment.active .comment-body::after, .comment.active .comment-body::before {
        left: 100%;
        right: 0;
        top: -19px;
        transform: rotate(272deg);
    }

    .comment {
        padding-left: 0;
        padding-right: 0;
    }

    .comment .comment-author-ava {
        top: -40px;
    }

    .comment .comment-body::before {
        margin-top: -1px;
        border-width: 10px;
        border-color: transparent;
        display: none;
    }

    .comment .comment-body::after, .comment .comment-body::before {
        position: absolute;
        top: -19px;
        right: 95%;
        transform: rotate(-90deg);
        border-left-color: #e1e7ec;
        display: none;
    }

    .panel-meta-item-icon {
        text-align: center;
        min-width: 80px;
    }

    .single_address h5 {
        font-size: 16px;
    }

    .single_address a {
        font-size: 14px !important;
    }

    .alert.alert-warning.shadow-box {
        padding: 12px;
    }

    .alert.alert-warning .right {
        align-items: flex-start !important;
    }

    .alert.alert-warning .left,
    .alert.alert-warning .left .btn {
        width: 100%;
    }

    .panel-mini-card .row {
        --bs-gutter-y: 0.75rem;
    }

    .panel-two-full-info-item .content {
        flex-direction: row !important;
        justify-content: flex-start;
        gap: 12px;
        border-radius: 14px;
    }

    .panel-two-full-info-item .detail {
        margin-top: 0;
        text-align: right !important;
    }

    .panel-two-full-info-item .detail .title {
        margin-bottom: 4px !important;
        font-size: 13px;
    }

    .panel-two-full-info-item .detail .value {
        font-size: 16px;
        margin-bottom: 0;
    }

    .icon-card {
        width: 44px;
        height: 44px;
        min-width: 44px;
        font-size: 20px;
    }

    .icon-card i {
        font-size: 20px;
    }

    .tab-panel-tbl {
        padding: 10px !important;
    }

    .tab-panel-tbl .nav-tabs {
        gap: 6px;
    }

    .tab-panel-tbl .nav-tabs li {
        margin-left: 0;
    }

    .tab-panel-tbl .nav-tabs button {
        padding: 8px 10px;
        font-size: 13px;
    }

    #latest-order-pane .table-responsive {
        overflow-x: visible;
    }

    #latest-order-pane .main-table,
    #latest-order-pane .main-table tbody,
    #latest-order-pane .main-table tr,
    #latest-order-pane .main-table tr td {
        display: block;
        width: 100%;
    }

    #latest-order-pane .main-table {
        box-shadow: none;
        border-collapse: separate;
    }

    #latest-order-pane .main-table tr {
        padding: 12px;
        border: 1px solid #eee;
        border-radius: 14px;
        box-shadow: var(--shadow-sm);
        background-color: #fff;
    }

    #latest-order-pane .main-table tr:not(:last-child) {
        margin-bottom: 12px;
    }

    #latest-order-pane .main-table tr td {
        min-width: 0;
        padding: 7px 0;
        border: 0;
        text-align: start;
    }

    #latest-order-pane .main-table tr td:nth-child(1) {
        padding-bottom: 10px;
    }

    #latest-order-pane .main-table tr td:nth-child(1) .avatar-group {
        justify-content: flex-start !important;
        min-width: 0;
    }

    #latest-order-pane .main-table tr td:nth-child(2) h5 {
        white-space: normal;
        overflow: visible;
        line-height: 1.8;
        margin-top: 0 !important;
    }

    #latest-order-pane .main-table tr td:nth-child(3),
    #latest-order-pane .main-table tr td:nth-child(4) {
        border-top: 1px solid #eee;
        padding-top: 10px;
    }

    #latest-order-pane .main-table tr td:nth-child(3) > .d-flex,
    #latest-order-pane .main-table tr td:nth-child(4) > .d-flex {
        justify-content: space-between;
        gap: 8px;
    }

    #latest-order-pane .main-table tr td:nth-child(4) p:last-child {
        width: fit-content;
        display: inline-flex;
        align-items: center;
        padding: 5px 9px;
        border-radius: 999px;
        background-color: #f4f4f4;
    }

    #latest-order-pane .main-table tr td:nth-child(5) {
        padding-top: 12px;
    }

    #latest-order-pane .main-table tr td:nth-child(5) .btn {
        width: 100%;
        min-height: 40px;
        border-radius: 10px;
    }

    #latest-order-pane .pagination.pagination-2 {
        margin-top: 18px !important;
        margin-bottom: 96px;
        gap: 4px;
    }

    #latest-order-pane .pagination.pagination-2 a,
    #latest-order-pane .pagination.pagination-2 span {
        width: 38px;
        height: 38px;
        line-height: 38px;
    }

    .content .ui-boxs,
    .content .orders,
    .content .payment,
    .content .da-parent,
    .content .page-404 {
        padding-bottom: 92px;
    }

    .content .section-title-title h2 {
        line-height: 1.8;
    }

    .content .slider-parent.content-box,
    .content .table-custom.slider-parent {
        padding: 14px;
        border-radius: 14px !important;
    }

    .content .slider-parent.content-box .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    .content .comment-item {
        margin-bottom: 20px;
    }

    .content .comment-item input.form-control,
    .content .comment-item select,
    .content .comment-item textarea.form-control {
        min-height: 50px;
        font-size: 14px;
    }

    .content form .btn.main-color-one-bg,
    .btn-action-panel {
        width: 100%;
        min-height: 42px;
    }

    #editModal .modal-dialog {
        width: calc(100% - 24px);
        max-width: none;
        margin: 12px auto;
    }

    #editModal .modal-content {
        max-height: calc(100dvh - 24px);
        border-radius: 14px;
    }

    #editModal .modal-header {
        padding: 16px 16px 10px;
    }

    #editModal .modal-body {
        max-height: calc(100dvh - 118px);
        overflow-y: auto;
        padding: 16px;
    }

    #address-form .address-form-grid {
        --bs-gutter-y: 0.85rem;
    }

    #address-form .form-control,
    #address-form .form-select {
        min-height: 48px;
    }

    #address-form textarea.form-control {
        min-height: 104px;
    }

    .address-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .address-form-actions .btn {
        width: 100%;
        min-height: 48px;
    }

    .saved-address-layout {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .saved-address-layout img {
        width: 100% !important;
        max-width: 220px;
        height: 120px !important;
        align-self: center;
    }

    .saved-address-meta {
        grid-template-columns: 1fr;
        gap: 10px;
        width: 100%;
    }

    .saved-address-field {
        grid-template-columns: 22px minmax(82px, auto) minmax(0, 1fr);
        gap: 6px;
    }

    .profile-details-card {
        padding: 14px;
        margin-top: 20px !important;
    }

    .profile-details-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .profile-detail-item {
        padding: 12px;
    }

    .account-settings {
        align-items: stretch !important;
        flex-direction: column;
        gap: 16px;
    }

    .account-settings form {
        width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .account-settings input[type="file"] {
        max-width: 100%;
    }

    #profile-edit-form .profile-form-grid {
        --bs-gutter-y: 0.85rem;
    }

    #profile-edit-form .form-control,
    #profile-edit-form .form-select {
        min-height: 48px;
    }

    #profile-edit-form textarea.form-control {
        min-height: 104px;
    }

    .profile-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .profile-form-actions .btn {
        width: 100%;
        min-height: 48px;
    }

    .orders .order-item {
        padding: 14px !important;
        margin-bottom: 14px;
        border: 1px solid #eee;
        border-radius: 14px;
        background-color: #fff;
    }

    .order-item-status {
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .order-item-status-item:first-child {
        min-width: 0;
    }

    .order-item-status-item.dropd-status {
        flex: 0 0 auto;
    }

    .order-item-detail > .d-flex {
        gap: 14px;
    }

    .order-item-detail img.img-thumbnail {
        width: 100% !important;
        max-width: 150px;
        height: auto !important;
        margin: 0 auto;
    }

    .order-item-detail ul {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
    }

    .order-item-detail ul li {
        margin-left: 0;
        padding-bottom: 0;
    }

    .shoping-proccess {
        padding: 18px 12px 0 !important;
    }

    .steps {
        display: block !important;
    }

    .steps .step {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 18px;
        text-align: right;
    }

    .steps .step .step-icon-wrap {
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
    }

    .steps .step .step-icon-wrap::before,
    .steps .step .step-icon-wrap::after {
        display: none;
    }

    .steps .step .step-icon {
        width: 58px;
        height: 58px;
        font-size: 26px;
        line-height: 58px;
        border-radius: 10px;
    }

    .steps .step .step-title {
        margin-top: 0;
        line-height: 1.8;
    }

    .step.completed .step-title::before {
        display: none;
    }

    .content .orders .order-item .w-100-px.img-thumbnail {
        width: 78px !important;
        height: 78px;
    }

    .comment-item-desc {
        padding: 14px;
    }

    .comment-date {
        gap: 4px;
    }

    .comment-date-speractor {
        display: none;
    }

    .content .cart-canvas {
        padding: 12px !important;
    }

    .content .cart-canvas > .row {
        align-items: flex-start !important;
    }

    .content .cart-canvas img {
        max-height: 92px;
        width: 100%;
    }

    .content .cart-canvas h3 {
        font-size: 14px !important;
    }

    .content .cart-canvas .product-box-suggest-price {
        justify-content: flex-start !important;
    }

    .content .cart-canvas .product-box-suggest-price ins {
        font-size: 20px !important;
    }

    .content .cart-canvas-foot {
        justify-content: flex-end !important;
    }

    .da-parent {
        padding: 20px 6px;
    }

    .da-title {
        margin: 18px 0;
    }

    .da-title h4 {
        font-size: 18px;
        line-height: 1.8;
    }

    .payment-icon i {
        font-size: 5em;
    }

    .payment-title p {
        font-size: 15px !important;
    }

    .payment-detail {
        display: block;
        margin-top: 18px;
    }

    .payment-detail-item {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    .page-404 img,
    .cart-empty-image {
        max-height: 240px;
    }

    .page-404 h4,
    .content-box .cart-empty-image + h5 {
        font-size: 18px !important;
        margin-top: 24px !important;
    }

    .ticket-settings .ticket-status {
        align-items: flex-start;
    }

    .ticket-settings .ticket-status .float-end {
        float: none !important;
    }

    .comment .comment-body {
        padding: 16px;
    }

    .comment .comment-text {
        line-height: 2;
    }

    .comment .comment-footer,
    .comment .comment-footer .comment-date {
        display: block;
        float: none !important;
        width: 100%;
    }

    .panel-latest-order form .btn {
        width: 100%;
    }

    .about-us {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .about-us-image img {
        max-height: 260px;
    }

    .about-us-title h2,
    .about-us-title h3 {
        font-size: 28px;
    }

    .about-us-text p {
        line-height: 2;
    }

    .about-us-link {
        align-items: stretch !important;
    }

    .about-us-link .time-work,
    .about-us-link .btn {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }

    .about-us-faq .accordion-button {
        padding: 12px;
        font-size: 14px;
    }

    .footer-namad-item a {
        min-width: 92px;
        padding: 8px;
    }

    .footer-namad-item a img {
        height: 74px;
    }

    .blog-single-content-meta .row {
        --bs-gutter-y: 0.75rem;
    }

    .blog-content-meta-detail-item {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 14px;
    }

    .blog-single-content {
        margin-top: 18px;
    }

    .blog-single-content p {
        font-size: 15px;
        line-height: 2.1;
        text-align: right;
    }

    .blog-single-content h1,
    .blog-single-content h2,
    .blog-single-content h3,
    .blog-single-content h4,
    .blog-single-content h5,
    .blog-single-content h6 {
        line-height: 1.8;
        margin-top: 18px;
        margin-bottom: 12px;
    }

    .blog-single-content img {
        margin: 12px auto;
    }

    .box-ui {
        padding: 12px !important;
    }

    .mini-blog-item {
        gap: 10px;
    }

    .mini-blog-item .desc {
        margin-right: 0;
    }

    .blog-single-comment-items,
    .blog-single-comment {
        padding-bottom: 92px;
    }

    .blog-single-comment .btn.main-color-one-bg {
        width: 100%;
    }

    .compare .content-box {
        padding: 10px;
    }

    .compare .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .compare table {
        min-width: 920px;
    }

    .compare table tr th,
    .compare table tr td {
        min-width: 190px;
        padding: 10px;
        font-size: 13px;
    }

    .compare .product-box {
        min-width: 180px;
    }

    .compare .product-box .product-image {
        height: 118px;
    }

    .compare .product-box .product-image img {
        max-height: 110px;
    }

    .compare .product-box .product-title {
        min-height: 54px;
    }

    .compare-add-product {
        width: 180px;
        padding: 18px 10px;
    }

    .contact-map {
        min-height: 240px;
    }

    .single_address .d-flex {
        min-height: 0;
        align-items: flex-start !important;
    }

    .panel-meta-item-icon {
        width: 54px;
        height: 54px;
        min-width: 54px;
        line-height: 54px;
        border-radius: 14px;
    }

    .panel-meta-item-icon i {
        font-size: 22px;
    }

    .contact-title p {
        font-size: 14px;
        line-height: 2;
    }

    body.bg-white > .container-xl {
        width: calc(100% - 24px);
        margin-top: 18px !important;
        padding: 14px;
        overflow-x: auto;
    }

    body.bg-white > .container-xl > .row:first-child {
        min-width: 760px;
    }

    body.bg-white > .container-xl h3 {
        font-size: 18px;
    }

    body.bg-white > .container-xl .table {
        min-width: 920px;
        font-size: 13px;
    }

    body.bg-white > .container-xl #printPageButton {
        width: 100%;
        position: sticky;
        right: 0;
        margin-top: 12px;
    }

    #otp-input {
        column-gap: 7px;
        justify-content: space-between;
    }

    #otp-input label {
        flex: 1 1 0;
        min-width: 0;
    }

    #otp-input input {
        width: 100%;
        height: 52px;
        font-size: 18px;
        padding-right: 4px;
        padding-left: 4px;
    }

    .otp-actions {
        gap: 8px;
    }

    .content .table-custom.border-ui .table-responsive {
        overflow-x: visible;
    }

    .content .table-custom.border-ui .main-table,
    .content .table-custom.border-ui .main-table tbody,
    .content .table-custom.border-ui .main-table tr,
    .content .table-custom.border-ui .main-table td {
        display: block;
        width: 100%;
    }

    .content .table-custom.border-ui .main-table thead {
        display: none;
    }

    .content .table-custom.border-ui .main-table {
        box-shadow: none;
    }

    .content .table-custom.border-ui .main-table tr {
        padding: 12px;
        border: 1px solid #eee;
        border-radius: 14px;
        background-color: #fff;
    }

    .content .table-custom.border-ui .main-table tr:not(:last-child) {
        margin-bottom: 12px;
    }

    .content .table-custom.border-ui .main-table td {
        min-width: 0;
        border: 0;
        padding: 6px 0;
        text-align: right !important;
    }

    .content .table-custom.border-ui .main-table td .btn {
        width: 100%;
        margin-top: 6px;
    }

    .panel-latest-order .slider-parent {
        padding: 14px;
    }

    .panel-latest-order textarea.form-control {
        min-height: 140px;
    }

    .panel-latest-order .alert {
        padding: 12px;
    }
}



@media only screen and (max-width: 430px) {
    #editModal .modal-title {
        font-size: 17px !important;
    }

    .address-modal-description {
        font-size: 13px;
    }

    #address-form .form-label {
        font-size: 13px;
    }

    .saved-address-main p {
        font-size: 14px;
    }

    .saved-address-field {
        grid-template-columns: 22px 1fr;
    }

    .saved-address-label,
    .saved-address-value {
        grid-column: 2;
    }

    .profile-modal-description {
        font-size: 13px;
    }

    #profile-edit-form .form-label {
        font-size: 13px;
    }

    .bg-auth .container-fluid {
        padding-right: 10px;
        padding-left: 10px;
    }

    .auth {
        padding: 12px 0;
    }

    .auth-form {
        width: 100%;
        max-width: 390px;
        margin-right: auto;
        margin-left: auto;
        padding: 16px;
    }

    .auth-form-title h2 {
        font-size: 18px;
        line-height: 1.7;
    }

    .auth-logo {
        width: 96px;
        max-width: 100%;
        max-height: 38px;
    }

    #otp-input {
        column-gap: 6px;
    }

    #otp-input input {
        height: 50px;
        font-size: 17px;
    }

    .otp-mobile-display {
        padding: 9px 10px;
        font-size: 13px;
    }

    .otp-edit-mobile,
    .otp-resend {
        font-size: 12px;
    }

    .compare .content-box {
        padding: 8px;
        overflow: hidden;
    }

    .compare .table-responsive {
        padding: 8px 8px 12px;
        border-radius: 14px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, #fff 18px) right center / 28px 100% no-repeat, #fff;
        box-shadow: inset -10px 0 14px -16px rgba(0, 0, 0, 0.55);
        scrollbar-width: thin;
    }

    .compare .table-responsive::-webkit-scrollbar {
        height: 6px;
    }

    .compare .table-responsive::-webkit-scrollbar-thumb {
        background-color: var(--bs-gray-400);
        border-radius: 999px;
    }

    .compare table {
        min-width: 1060px;
        margin-bottom: 0;
        border-spacing: 0 4px;
    }

    .compare table tr th,
    .compare table tr td {
        min-width: 240px;
        max-width: 260px;
        padding: 13px 12px;
        font-size: 13px;
        line-height: 2;
        white-space: normal;
    }

    .compare table tr td:nth-child(1) {
        min-width: 210px;
        text-align: right;
        background-color: #fafafa;
    }

    .compare table tr td span {
        line-height: 2;
    }

    .compare .td-head {
        padding: 12px 14px !important;
        font-size: 14px;
        border-radius: 10px;
    }

    .compare .td-head i {
        margin-left: 6px;
    }

    .compare .product-box {
        min-width: 220px;
        padding: 10px;
    }

    .compare .product-box .product-image {
        height: 140px;
    }

    .compare .product-box .product-image img {
        max-height: 132px;
    }

    .compare .product-box .product-title {
        min-height: 76px;
        margin-bottom: 8px !important;
        align-items: flex-start;
    }

    .compare .product-box .product-title .title p,
    .compare .product-box .product-title .title span {
        white-space: normal;
        overflow: visible;
        display: block;
        line-height: 1.8;
    }

    .compare .product-box .product-action {
        align-items: flex-start;
        padding-top: 10px;
    }

    .compare .product-box .price {
        text-align: right;
    }

    .compare-box {
        padding-top: 12px;
    }

    .compare-add-product {
        width: 220px;
        min-height: 230px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    body.bg-white {
        overflow-x: hidden;
    }

    body.bg-white > .container-xl {
        width: calc(100% - 20px);
        padding: 12px;
        border-radius: 12px;
        box-shadow: var(--shadow-sm);
        scrollbar-width: thin;
    }

    body.bg-white > .container-xl::-webkit-scrollbar {
        height: 6px;
    }

    body.bg-white > .container-xl::-webkit-scrollbar-thumb {
        background-color: var(--bs-gray-400);
        border-radius: 999px;
    }

    body.bg-white > .container-xl > .row:first-child {
        min-width: 840px;
        align-items: center;
        padding-bottom: 10px;
        margin-bottom: 12px;
        border-bottom: 1px solid #eee;
    }

    body.bg-white > .container-xl h3 {
        font-size: 19px;
        margin-bottom: 0;
    }

    body.bg-white > .container-xl .table {
        min-width: 1080px;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 13px;
    }

    body.bg-white > .container-xl .table thead th {
        padding: 12px;
        font-size: 14px;
        border-top: 8px solid #fff;
        border-bottom: 2px solid #ddd;
    }

    body.bg-white > .container-xl .table th,
    body.bg-white > .container-xl .table td {
        padding: 12px 10px;
        line-height: 2.1;
        white-space: normal;
    }

    body.bg-white > .container-xl .table td > .row {
        flex-wrap: nowrap;
        --bs-gutter-x: 1rem;
    }

    body.bg-white > .container-xl .table td > .row > .col-4 {
        width: 33.333%;
        min-width: 270px;
    }

    body.bg-white > .container-xl .table tbody tr:nth-last-child(3) th,
    body.bg-white > .container-xl .table tbody tr:nth-last-child(3) td {
        background-color: #f8f8f8;
        font-weight: 900;
    }

    body.bg-white > .container-xl .table tbody tr:nth-last-child(2) th,
    body.bg-white > .container-xl .table tbody tr:nth-last-child(2) td,
    body.bg-white > .container-xl .table tbody tr:last-child td {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    body.bg-white > .container-xl p {
        line-height: 2;
    }

    body.bg-white > .container-xl #printPageButton {
        min-height: 44px;
        margin-top: 14px;
        border-radius: 10px;
    }
}

@media only screen and (max-width: 400px) {
    .main-slider .swiper-slide img {
        height: 150px;
    }

    .w-100-in-400 {
        width: 100%;
    }

    .section-title-title h2 {
        font-size: 16px;
    }

    .btn-action-panel {
        font-size: 14px;
        padding: 0 10px;
    }
}

@media only screen and (min-width: 1470px) {
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1470px;
    }

    .mega-container {
        max-width: 1470px;
    }
}

@media print {
    #printPageButton {
        display: none;
    }

    @page :first {
        margin: 0;
    }

    @page :left {
        margin: 2cm 1.5cm 2cm 2cm;
    }

    @page :right {
        margin: 2cm 2cm 2cm 1.5cm;
    }

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #000 !important;
        border-bottom: 1px solid #000 !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .cosmetics-homepage .main-slider .slider .swiper-slide img {
        height: 300px;
        object-fit: cover;
    }

    .cosmetics-homepage .cosmetics-hero-content h1 {
        font-size: clamp(23px, 3vw, 30px);
    }

    .cosmetics-homepage .cosmetics-hero-content p {
        margin: 12px 0 17px;
        font-size: 14px;
    }
}

@media only screen and (min-width: 1200px) {
    .cosmetics-homepage .main-slider {
        --cosmetics-hero-desktop-height: 410px;
    }

    .cosmetics-homepage .main-slider > .container-fluid > .row {
        align-items: stretch;
    }

    .cosmetics-homepage .main-slider > .container-fluid > .row > .col-xl-9,
    .cosmetics-homepage .main-slider > .container-fluid > .row > .col-xl-3 {
        display: flex;
        height: var(--cosmetics-hero-desktop-height);
        align-items: stretch;
    }

    .cosmetics-homepage .main-slider .slider,
    .cosmetics-homepage #homeSlider,
    .cosmetics-homepage #homeSlider .swiper-wrapper,
    .cosmetics-homepage #homeSlider .swiper-slide,
    .cosmetics-homepage .cosmetics-hero-slide,
    .cosmetics-homepage .cosmetics-hero-slide picture,
    .cosmetics-homepage .suggetMoment,
    .cosmetics-homepage .suggetMoment .swiper-wrapper,
    .cosmetics-homepage .suggetMoment .swiper-slide,
    .cosmetics-homepage .suggetMoment .swiper-slide > a,
    .cosmetics-homepage .suggetMoment .product-box {
        width: 100%;
        height: 100%;
    }

    .cosmetics-homepage .cosmetics-hero-slide img {
        height: 100%;
        object-fit: cover;
    }

    .cosmetics-homepage .suggetMoment .swiper-slide {
        padding: 0 !important;
    }

    .cosmetics-homepage .suggetMoment .swiper-slide > a {
        display: block;
    }

    .cosmetics-homepage .suggetMoment .product-box {
        display: flex;
        min-height: 0;
        flex-direction: column;
    }

    .cosmetics-homepage .suggetMoment .product-image {
        height: auto;
        min-height: 190px;
        margin: 5px 0 8px;
        flex: 1 1 auto;
    }

    .cosmetics-homepage .suggetMoment .product-title {
        min-height: 52px;
    }

    .cosmetics-homepage .suggetMoment .product-action {
        margin-top: auto !important;
        padding-top: 8px;
    }

    .cosmetics-homepage .product-group-item img {
        height: 154px;
    }
}

@media only screen and (min-width: 1400px) {
    .cosmetics-homepage .product-group-item .col-6 {
        width: 25%;
    }
}

@media only screen and (max-width: 991px) {
    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card {
        min-height: 120px;
        gap: 11px;
        padding: 12px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-media {
        width: 76px;
        height: 76px;
        min-width: 76px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-title {
        min-height: 50px;
        font-size: 16px;
    }

    .cosmetics-homepage .cosmetics-special-offer {
        padding: 38px 0 40px;
    }

    .cosmetics-homepage .cosmetics-special-offer-frame {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }

    .cosmetics-homepage .cosmetics-special-offer-slide {
        min-height: 360px;
        grid-template-columns: minmax(240px, 40%) minmax(0, 1fr);
    }

    .cosmetics-homepage .cosmetics-special-offer-media {
        min-height: 330px;
    }

    .cosmetics-homepage .cosmetics-special-offer-media img {
        height: 290px;
    }

    .cosmetics-homepage .cosmetics-special-offer-list {
        height: 126px;
    }

    .cosmetics-homepage .cosmetics-special-offer-item {
        min-height: 118px;
    }

    .cosmetics-homepage .top-header-logo img {
        width: 108px;
        height: 58px;
        max-height: 58px;
    }

    .cosmetics-homepage .header .top-header-logo a {
        width: 110px;
        min-height: 58px;
    }

    .cosmetics-homepage .offcanvas .top-header-logo img {
        width: 126px;
        height: 80px;
        max-height: 80px;
    }

    .cosmetics-homepage .header .offcanvas .top-header-logo {
        width: 100%;
        min-height: 80px;
    }

    .cosmetics-homepage .main-slider .slider .swiper-slide img {
        height: 270px;
        object-fit: cover;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cosmetics-homepage .product-group > .container-fluid > .slider-parent > .row > .col-sm-6 {
        width: 100%;
    }

    .cosmetics-homepage .product-group-item .col-6 {
        width: 25%;
    }
}

@media only screen and (max-width: 767px) {
    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-section {
        padding: 28px 0 30px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-heading {
        margin-bottom: 22px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card {
        min-height: 200px;
        flex-direction: column;
        justify-content: flex-start;
        gap: 9px;
        padding: 12px 10px;
        text-align: center;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-media {
        width: 76px;
        height: 76px;
        min-width: 76px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-content {
        width: 100%;
        align-content: start;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-title {
        min-height: 50px;
        font-size: 15px;
        line-height: 1.65;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-subtitle {
        min-height: 42px;
        font-size: 12px;
    }

    .cosmetics-homepage .cosmetics-special-offer {
        padding: 32px 0 34px;
    }

    .cosmetics-homepage .cosmetics-special-offer-header {
        margin-bottom: 20px;
    }

    .cosmetics-homepage .cosmetics-special-offer-frame {
        padding: 12px;
        border-radius: 20px;
    }

    .cosmetics-homepage .cosmetics-special-offer-main {
        border-radius: 17px;
    }

    .cosmetics-homepage .cosmetics-special-offer-slide {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-homepage .cosmetics-special-offer-media {
        min-height: 220px;
        border-bottom: 1px solid var(--cosmetics-border);
        border-left: 0;
    }

    .cosmetics-homepage .cosmetics-special-offer-media img {
        width: min(82%, 250px);
        height: 210px;
    }

    .cosmetics-homepage .cosmetics-special-offer-content {
        padding: 24px;
    }

    .cosmetics-homepage .cosmetics-special-offer-product-title {
        min-height: 58px;
        font-size: clamp(19px, 4.7vw, 23px);
    }

    .cosmetics-homepage .cosmetics-special-offer-meta {
        margin-top: 14px;
    }

    .cosmetics-homepage .cosmetics-special-offer-pricing {
        margin-top: 22px;
        padding-top: 19px;
    }

    .cosmetics-homepage .cosmetics-special-offer-cta {
        width: 100%;
    }

    .cosmetics-homepage .cosmetics-special-offer-list {
        height: 118px;
    }

    .cosmetics-homepage .cosmetics-special-offer-item {
        min-height: 110px;
        padding: 9px;
    }

    .cosmetics-homepage .cosmetics-special-offer-item-media {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }

    .cosmetics-homepage .main-slider .slider .swiper-slide img {
        height: auto;
        aspect-ratio: 800 / 1025;
        object-fit: cover;
    }

    .cosmetics-homepage .cosmetics-hero-content {
        top: 3%;
        right: 5%;
        left: 5%;
        width: auto;
        transform: none;
        text-align: center;
    }

    .cosmetics-homepage .cosmetics-hero-eyebrow {
        margin-bottom: 4px;
        font-size: 10px;
        line-height: 1.5;
    }

    .cosmetics-homepage .cosmetics-hero-content h1 {
        max-width: none;
        font-size: clamp(15px, 4.3vw, 20px);
        line-height: 1.35;
    }

    .cosmetics-homepage .cosmetics-hero-content p {
        max-width: none;
        margin: 5px 0 8px;
        font-size: clamp(11px, 2.8vw, 13px);
        line-height: 1.45;
    }

    .cosmetics-homepage .cosmetics-hero-content .btn {
        min-height: 28px;
        padding: 4px 14px;
        font-size: 11px;
    }

    .cosmetics-homepage .banner-item img {
        aspect-ratio: 1200 / 418;
    }

    .cosmetics-homepage .product-group-item img {
        height: 132px;
    }

    .cosmetics-homepage .product-group {
        padding: 34px 0;
    }

    .cosmetics-homepage .product-group > .container-fluid > .slider-parent > .row > .col-sm-6 {
        width: 100%;
    }

    .cosmetics-homepage .product-group-item {
        padding: var(--cosmetics-space-4);
    }

    .cosmetics-homepage .product-group-name {
        min-height: 50px;
        font-size: 13px;
    }

    .cosmetics-homepage .product-group-price {
        font-size: 13px;
    }

    .cosmetics-homepage .quick-select {
        padding: 34px 0 !important;
    }

    .cosmetics-homepage .blog-slider {
        padding: 34px 0 38px;
    }

    .cosmetics-homepage .footer-contact-image img {
        width: 132px;
        height: 68px;
        max-height: 68px;
    }
}

@media only screen and (max-width: 575px) {
    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-heading {
        gap: 12px;
        margin-bottom: 18px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-heading-content {
        padding-right: 42px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-heading-content .Dottedsquare {
        width: 34px;
        height: 34px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-title {
        font-size: clamp(19px, 5.2vw, 22px);
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-view-all {
        min-height: 40px;
        padding: 7px 14px;
        font-size: 13px;
    }

    .cosmetics-homepage .cosmetics-special-offer-header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .cosmetics-homepage .cosmetics-special-offer-header-actions {
        justify-content: space-between;
    }

    .cosmetics-homepage .cosmetics-special-offer-count {
        min-height: 40px;
        padding: 7px 13px;
    }

    .cosmetics-homepage .cosmetics-special-offer-prev,
    .cosmetics-homepage .cosmetics-special-offer-next {
        width: 40px;
        height: 40px;
    }

    .cosmetics-homepage .cosmetics-special-offer-content {
        padding: 21px 18px;
    }

    .cosmetics-homepage .cosmetics-special-offer-pricing {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .cosmetics-homepage .section-title-title,
    .cosmetics-homepage .section-title-link {
        min-height: 0;
    }

    .cosmetics-homepage .section-title-link {
        justify-content: flex-start;
    }

    .cosmetics-homepage .cosmetics-home-section-heading {
        margin-bottom: 18px !important;
    }

    .cosmetics-homepage .cosmetics-home-section-heading .row {
        --bs-gutter-y: 12px;
    }

    .cosmetics-homepage .cosmetics-home-view-all {
        min-height: 40px;
        padding: 7px 15px;
        font-size: 13px;
    }

    .cosmetics-homepage .feature {
        padding: 20px 0 26px;
    }

    .cosmetics-homepage .feature-item {
        min-height: 126px;
        padding: 13px 8px;
    }

    .cosmetics-homepage .feature-item .title p {
        margin-top: 7px !important;
        font-size: 12px !important;
    }

    .cosmetics-homepage .product-group-item {
        padding: 14px;
    }

    .cosmetics-homepage .product-group-item h3 {
        font-size: 17px;
    }

    .cosmetics-homepage .product-group-link {
        padding: 10px;
    }

    .cosmetics-homepage .product-group-item img {
        height: 126px;
        padding: 8px;
    }

    .cosmetics-homepage .mini-box {
        min-height: 142px;
    }

    .cosmetics-homepage .cosmetics-guide-card-link {
        min-height: 112px;
        padding-inline: 4px;
    }

    .cosmetics-homepage .mini-box h3 {
        font-size: 14px;
    }

    .cosmetics-homepage .mini-box p {
        padding-inline: 2px;
    }

    .cosmetics-homepage .blog-item .title {
        padding: 14px;
    }

    .cosmetics-homepage .footer-col .w-100-in-400 {
        width: 100%;
    }

    .cosmetics-homepage .footer-form form .d-flex {
        flex-wrap: wrap;
    }

    .cosmetics-homepage .footer-form form label,
    .cosmetics-homepage .footer-form .btn {
        width: 100%;
    }

    .cosmetics-homepage .footer-contact {
        padding-bottom: 18px;
    }

    .cosmetics-homepage .footer-col {
        margin-top: 22px;
    }

    .cosmetics-homepage .footer-description {
        margin-top: 18px;
        padding-top: 18px;
    }
}

@media only screen and (max-width: 430px) {
    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-section {
        padding: 24px 0 26px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-grid {
        gap: 10px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card {
        min-height: 188px;
        padding: 10px 8px;
        border-radius: 14px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-media {
        width: 70px;
        height: 70px;
        min-width: 70px;
        border-radius: 12px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-title {
        min-height: 47px;
        font-size: 14px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-subtitle {
        min-height: 40px;
        font-size: 11px;
    }

    .cosmetics-homepage .cosmetics-special-offer {
        padding: 28px 0 30px;
    }

    .cosmetics-homepage .cosmetics-special-offer-title {
        font-size: 21px;
    }

    .cosmetics-homepage .cosmetics-special-offer-subtitle {
        font-size: 13px;
    }

    .cosmetics-homepage .cosmetics-special-offer-frame {
        padding: 10px;
        border-radius: 18px;
    }

    .cosmetics-homepage .cosmetics-special-offer-media {
        min-height: 196px;
    }

    .cosmetics-homepage .cosmetics-special-offer-media img {
        height: 184px;
    }

    .cosmetics-homepage .cosmetics-special-offer-discount {
        top: 12px;
        right: 12px;
        min-height: 34px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .cosmetics-homepage .cosmetics-special-offer-label {
        margin-bottom: 12px;
    }

    .cosmetics-homepage .cosmetics-special-offer-current-price {
        font-size: 20px;
    }

    .cosmetics-homepage .cosmetics-special-offer-list {
        height: 112px;
    }

    .cosmetics-homepage .cosmetics-special-offer-item {
        min-height: 104px;
    }

    .cosmetics-homepage .cosmetics-special-offer-item-content > span {
        font-size: 12px;
    }

    .cosmetics-homepage .cosmetics-hero-content {
        top: 2.5%;
        right: 4%;
        left: 4%;
    }

    .cosmetics-homepage .cosmetics-hero-content h1 {
        font-size: 16px;
    }

    .cosmetics-homepage .cosmetics-hero-content p {
        font-size: 10px;
    }

    .cosmetics-homepage .product-group-item img {
        height: 112px;
    }
}

@media only screen and (max-width: 390px) {
    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-heading-content {
        padding-right: 38px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-heading-content .Dottedsquare {
        width: 30px;
        height: 30px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-title {
        font-size: 18px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-view-all {
        min-height: 38px;
        padding-inline: 12px;
        font-size: 12px;
    }

    .cosmetics-homepage .product-group-item {
        padding: 10px;
    }

    .cosmetics-homepage .product-group-item > .row {
        --bs-gutter-x: 8px;
        --bs-gutter-y: 8px;
    }

    .cosmetics-homepage .product-group-link {
        padding: 8px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card {
        min-height: 184px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-media {
        width: 66px;
        height: 66px;
        min-width: 66px;
    }

    .cosmetics-homepage .cosmetics-special-offer-meta {
        gap: 6px;
    }

    .cosmetics-homepage .cosmetics-special-offer-meta > span {
        min-height: 32px;
        padding: 4px 8px;
        font-size: 11px;
    }
}

@media only screen and (max-width: 360px) {
    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-grid {
        gap: 8px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card {
        min-height: 180px;
        padding-inline: 7px;
    }

    :is(.cosmetics-homepage, .cosmetics-page) .cosmetics-category-card-media {
        width: 64px;
        height: 64px;
        min-width: 64px;
    }

    .cosmetics-homepage .cosmetics-special-offer-content {
        padding-inline: 15px;
    }

    .cosmetics-homepage .cosmetics-special-offer-current-price {
        font-size: 19px;
    }

    .cosmetics-homepage .cosmetics-special-offer-old-price {
        font-size: 12px;
    }
}

/* Non-homepage cosmetics foundation breakpoints */
@media only screen and (min-width: 1200px) {
    .cosmetics-page .cosmetics-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-panel-sidebar,
    .cosmetics-page .panel-side {
        position: sticky;
        top: 118px;
    }

    .cosmetics-page .cosmetics-summary {
        position: sticky;
        top: 118px;
    }
}

@media only screen and (max-width: 1199px) {
    .cosmetics-page .cosmetics-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-panel {
        grid-template-columns: minmax(220px, 270px) minmax(0, 1fr);
        gap: 18px;
    }

    .cosmetics-page .cosmetics-transaction-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 991px) {
    .cosmetics-page .top-header {
        min-height: 58px;
    }

    .cosmetics-page .top-header-logo a {
        width: 110px;
        min-height: 58px;
    }

    .cosmetics-page .top-header-logo img,
    .cosmetics-page .cosmetics-logo {
        width: 108px;
        height: 58px;
        max-height: 58px;
    }

    .cosmetics-page .offcanvas .top-header-logo img {
        width: 126px;
        height: 80px;
        max-height: 80px;
    }

    .cosmetics-page .header .offcanvas .top-header-logo {
        width: 100%;
        min-height: 80px;
    }

    .cosmetics-page .cosmetics-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-panel-sidebar.offcanvas,
    .cosmetics-page .panel-side.offcanvas {
        width: min(88vw, 340px);
        border-radius: 0;
    }

    .cosmetics-page .cosmetics-cart-row {
        grid-template-columns: 100px minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-cart-row-actions {
        grid-column: 1 / -1;
    }

    .cosmetics-page .footer {
        padding-top: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .cosmetics-page .cosmetics-section {
        padding-block: 22px;
    }

    .cosmetics-page .cosmetics-card,
    .cosmetics-page .cosmetics-commerce-card,
    .cosmetics-page .cosmetics-summary,
    .cosmetics-page .cosmetics-panel-card {
        padding: 16px;
    }

    .cosmetics-page .cosmetics-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .cosmetics-page .cosmetics-product-media,
    .cosmetics-page .product-box .product-image {
        padding: 12px;
    }

    .cosmetics-page .cosmetics-product-body {
        padding: 0 12px 13px;
    }

    .cosmetics-page .cosmetics-product-title,
    .cosmetics-page .product-box .product-title .title p {
        min-height: 48px;
        font-size: 13px;
    }

    .cosmetics-page .cosmetics-product-price,
    .cosmetics-page .product-box .product-action .price .new-price {
        font-size: 14px;
    }

    .cosmetics-page .cosmetics-state {
        min-height: 290px;
        padding: 28px 20px;
    }

    .cosmetics-page .cosmetics-state-media {
        width: 128px;
    }

    .cosmetics-page .cosmetics-table {
        min-width: 640px;
    }

    .cosmetics-page .cosmetics-checkout-progress,
    .cosmetics-page .checkout-headers .navbar-nav {
        width: 100%;
        padding-bottom: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
    }

    .cosmetics-page .cosmetics-checkout-step,
    .cosmetics-page .checkout-headers .nav-item {
        flex: 0 0 auto;
    }

    .cosmetics-page .cosmetics-payment-option,
    .cosmetics-page .cosmetics-shipping-option {
        min-height: 72px;
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-page .cosmetics-section {
        padding-block: 18px;
    }

    .cosmetics-page .cosmetics-section-title,
    .cosmetics-page .section-title-title {
        min-height: 0;
    }

    .cosmetics-page .cosmetics-section-title {
        margin-bottom: 16px;
    }

    .cosmetics-page .cosmetics-form {
        gap: 15px;
    }

    .cosmetics-page .cosmetics-form-row,
    .cosmetics-page .cosmetics-discount-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-form-actions,
    .cosmetics-page .cosmetics-state-actions {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-form-actions > *,
    .cosmetics-page .cosmetics-state-actions > * {
        width: 100%;
    }

    .cosmetics-page .cosmetics-cart-row {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        padding: 13px;
    }

    .cosmetics-page .cosmetics-transaction-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-auth-card,
    .cosmetics-page .auth-form {
        padding: 20px 16px;
        border-radius: 15px !important;
    }

    .cosmetics-page .cosmetics-panel-tabs {
        border-radius: 14px;
    }

    .cosmetics-page .footer-col .w-100-in-400 {
        width: 100%;
    }

    .cosmetics-page .footer-form form .d-flex {
        flex-wrap: wrap;
    }

    .cosmetics-page .footer-form form label,
    .cosmetics-page .footer-form .btn {
        width: 100%;
    }

    .cosmetics-page .footer-contact {
        padding-bottom: 18px;
    }

    .cosmetics-page .footer-col {
        margin-top: 22px;
    }

    .cosmetics-page .footer-description {
        margin-top: 18px;
        padding-top: 18px;
    }
}

@media only screen and (max-width: 430px) {
    .cosmetics-page .cosmetics-product-grid {
        gap: 9px;
    }

    .cosmetics-page .cosmetics-product-card,
    .cosmetics-page .product-box {
        border-radius: 13px;
    }

    .cosmetics-page .cosmetics-product-media,
    .cosmetics-page .product-box .product-image {
        padding: 9px;
    }

    .cosmetics-page .cosmetics-product-body {
        padding: 0 10px 11px;
    }

    .cosmetics-page .cosmetics-product-title,
    .cosmetics-page .product-box .product-title .title p {
        min-height: 44px;
        font-size: 12px;
        line-height: 1.8;
    }

    .cosmetics-page .cosmetics-product-actions {
        gap: 5px;
    }

    .cosmetics-page .cosmetics-product-action {
        width: 34px;
        height: 34px;
    }

    .cosmetics-page .cosmetics-state {
        padding: 24px 15px;
        border-radius: 15px;
    }

    .cosmetics-page .cosmetics-state-title {
        font-size: 20px;
    }

    .cosmetics-page .cosmetics-cart-row {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .cosmetics-page .footer-contact-image img {
        width: 132px;
        height: 68px;
        max-height: 68px;
    }
}

@media only screen and (max-width: 390px) {
    .cosmetics-page .cosmetics-otp,
    .cosmetics-page #otp-input {
        gap: 6px;
    }

    .cosmetics-page .cosmetics-otp input,
    .cosmetics-page #otp-input input {
        width: 42px;
        height: 54px;
        padding-inline: 5px;
    }

    .cosmetics-page .cosmetics-breadcrumb,
    .cosmetics-page .bread-crumb .breadcrumb {
        padding: 9px 11px;
    }
}

@media only screen and (max-width: 360px) {
    .cosmetics-page .cosmetics-product-grid {
        gap: 7px;
    }

    .cosmetics-page .cosmetics-product-media,
    .cosmetics-page .product-box .product-image {
        padding: 7px;
    }

    .cosmetics-page .cosmetics-product-body {
        padding-inline: 8px;
    }

    .cosmetics-page .cosmetics-btn-primary,
    .cosmetics-page .cosmetics-btn-secondary,
    .cosmetics-page .cosmetics-btn-outline,
    .cosmetics-page .cosmetics-btn-danger {
        width: 100%;
        padding-inline: 14px;
    }

    .cosmetics-page .cosmetics-otp input,
    .cosmetics-page #otp-input input {
        width: 39px;
    }
}

/* Shared public information pages */
@media only screen and (max-width: 991px) {
    .cosmetics-page:is(.cosmetics-about-page, .cosmetics-contact-page) .footer {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-about-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page:is(.cosmetics-blog-page, .cosmetics-blog-single-page) .footer {
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-article-body {
        padding: 32px;
    }
}

@media only screen and (max-width: 767px) {
    .cosmetics-page .cosmetics-public-page {
        padding-block: 22px 42px;
    }

    .cosmetics-page .cosmetics-public-hero,
    .cosmetics-page .cosmetics-public-section {
        padding: 20px;
    }

    .cosmetics-page .cosmetics-public-hero-icon {
        width: 64px;
        height: 64px;
        border-radius: 17px;
        font-size: 27px;
    }

    .cosmetics-page .cosmetics-contact-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-contact-map,
    .cosmetics-page .cosmetics-contact-map iframe {
        min-height: 300px;
        height: 300px;
    }

    .cosmetics-page .cosmetics-article-card-content {
        padding: 16px;
    }

    .cosmetics-page .cosmetics-article-body {
        padding: 24px 22px;
        font-size: 16px;
        line-height: 2.2;
    }

    .cosmetics-page .cosmetics-article-hero {
        border-radius: 16px;
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-page .cosmetics-public-page {
        padding-block: 18px 34px;
    }

    .cosmetics-page .cosmetics-public-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 18px;
    }

    .cosmetics-page .cosmetics-public-hero-icon {
        grid-row: 1;
        width: 58px;
        height: 58px;
    }

    .cosmetics-page .cosmetics-public-section {
        padding: 18px;
    }

    .cosmetics-page .cosmetics-about-values,
    .cosmetics-page .cosmetics-contact-info-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-public-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .cosmetics-page .cosmetics-public-cta-actions,
    .cosmetics-page .cosmetics-contact-form-actions {
        display: grid;
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-public-cta-actions > *,
    .cosmetics-page .cosmetics-contact-form-actions > * {
        width: 100%;
    }

    .cosmetics-page .cosmetics-contact-map,
    .cosmetics-page .cosmetics-contact-map iframe {
        min-height: 240px;
        height: 240px;
    }

    .cosmetics-page .cosmetics-blog-grid,
    .cosmetics-page .cosmetics-blog-grid-related {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-blog-section-heading {
        display: block;
    }

    .cosmetics-page .cosmetics-article-header {
        text-align: start;
    }

    .cosmetics-page .cosmetics-article-header h1,
    .cosmetics-page .cosmetics-article-intro {
        margin-inline: 0;
    }

    .cosmetics-page .cosmetics-article-meta {
        justify-content: flex-start;
    }

    .cosmetics-page .cosmetics-blog-pagination .pagination {
        gap: 5px;
    }

    .cosmetics-page .cosmetics-blog-pagination .page-link {
        min-width: 36px;
        min-height: 36px;
        padding: 5px 9px;
        font-size: 13px;
    }
}

/* Canonical cosmetics catalog breakpoints */
@media only screen and (max-width: 1199px) {
    .cosmetics-page .cosmetics-catalog-layout {
        grid-template-columns: minmax(250px, 270px) minmax(0, 1fr);
        gap: 18px;
    }
}

@media only screen and (max-width: 991px) {
    .cosmetics-page .cosmetics-catalog {
        padding-top: 24px;
    }

    .cosmetics-page .cosmetics-catalog-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-filter-panel.offcanvas-lg {
        width: min(90vw, 380px);
        border-left: 1px solid var(--cosmetics-border);
        background-color: var(--cosmetics-page-bg);
    }

    .cosmetics-page .cosmetics-filter-form {
        height: 100%;
        padding: 16px 16px calc(22px + env(safe-area-inset-bottom));
        overflow-y: auto;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .cosmetics-page .cosmetics-filter-header {
        position: sticky;
        z-index: 3;
        top: -16px;
        margin: -16px -16px 0;
        padding: 16px;
        border-bottom: 1px solid var(--cosmetics-border);
        background-color: rgb(255 255 255 / 96%);
        backdrop-filter: blur(10px);
    }

    .cosmetics-page .cosmetics-filter-submit {
        position: sticky;
        z-index: 2;
        bottom: 0;
        margin-top: 4px;
        box-shadow: 0 -8px 18px rgb(255 250 251 / 92%);
    }

    .cosmetics-page .cosmetics-catalog-toolbar {
        flex-wrap: wrap;
    }
}

@media only screen and (max-width: 767px) {
    .cosmetics-page .cosmetics-catalog {
        padding-top: 20px;
    }

    .cosmetics-page .cosmetics-catalog-heading {
        gap: 14px;
        margin-bottom: 18px;
    }

    .cosmetics-page .cosmetics-catalog-heading-content {
        min-height: 112px;
        padding: 18px;
        border-radius: 17px;
    }

    .cosmetics-page .cosmetics-catalog-heading-content h1 {
        font-size: 23px;
    }

    .cosmetics-page .cosmetics-catalog-heading-content p {
        font-size: 13px;
    }

    .cosmetics-page .cosmetics-catalog-heading-icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
        border-radius: 18px;
        font-size: 25px;
    }

    .cosmetics-page .cosmetics-catalog-toolbar {
        min-height: 66px;
        margin-bottom: 14px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .cosmetics-page .cosmetics-catalog-sort {
        flex: 1 1 auto;
    }

    .cosmetics-page .cosmetics-catalog-sort .form-select {
        width: auto;
        min-width: 145px;
        flex: 1 1 auto;
    }

    .cosmetics-page .cosmetics-results-empty {
        min-height: 330px;
    }

    .cosmetics-page .cosmetics-pagination {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .cosmetics-page .cosmetics-pagination ul {
        min-width: max-content;
        margin-inline: auto;
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-page .cosmetics-catalog-heading-content {
        align-items: flex-start;
    }

    .cosmetics-page .cosmetics-catalog-heading-content p {
        line-height: 1.85;
    }

    .cosmetics-page .cosmetics-catalog-heading-icon {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        border-radius: 15px;
        font-size: 22px;
    }

    .cosmetics-page .cosmetics-catalog-toolbar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
    }

    .cosmetics-page .cosmetics-filter-trigger {
        display: inline-flex;
        grid-column: 1;
        grid-row: 1;
    }

    .cosmetics-page .cosmetics-results-count {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        margin: 0;
    }

    .cosmetics-page .cosmetics-catalog-sort {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-catalog-sort .form-select {
        width: 100%;
        min-width: 0;
    }

    .cosmetics-page .cosmetics-product-card-top {
        top: 8px;
        right: 8px;
        left: 8px;
    }

    .cosmetics-page .cosmetics-product-discount,
    .cosmetics-page .cosmetics-product-stock {
        min-height: 24px;
        padding: 2px 7px;
        font-size: 9px;
    }

    .cosmetics-page .cosmetics-product-brand {
        font-size: 10px;
    }

    .cosmetics-page .cosmetics-product-pricing {
        min-height: 54px;
    }

    .cosmetics-page .cosmetics-pagination-link {
        min-width: 38px;
        min-height: 38px;
        padding: 6px 9px;
    }
}

@media only screen and (max-width: 430px) {
    .cosmetics-page .cosmetics-catalog {
        padding-top: 16px;
    }

    .cosmetics-page .cosmetics-catalog-heading-content {
        min-height: 0;
        gap: 12px;
        padding: 15px;
    }

    .cosmetics-page .cosmetics-catalog-heading-content h1 {
        font-size: 20px;
    }

    .cosmetics-page .cosmetics-catalog-heading-content p {
        font-size: 12px;
    }

    .cosmetics-page .cosmetics-catalog-heading-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 19px;
    }

    .cosmetics-page .cosmetics-catalog-sort label {
        font-size: 12px;
    }

    .cosmetics-page .cosmetics-filter-trigger {
        min-height: 40px;
        padding-inline: 11px;
        font-size: 12px;
    }

    .cosmetics-page .cosmetics-results-count {
        min-height: 36px;
        padding-inline: 9px;
        font-size: 12px;
    }

    .cosmetics-page .cosmetics-product-actions {
        gap: 4px;
    }

    .cosmetics-page .cosmetics-product-action {
        width: 32px;
        height: 32px;
        border-radius: 9px;
        font-size: 13px;
    }

    .cosmetics-page .cosmetics-pagination-link span {
        display: none;
    }
}

/* Focused category and search catalog refinements */
@media only screen and (max-width: 991px) {
    .cosmetics-category-page .cosmetics-collection-banner {
        min-height: 180px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-filter-form {
        overscroll-behavior: contain;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-filter-header .btn-close {
        width: 44px;
        height: 44px;
        padding: 0;
        background-position: center;
        background-size: 14px;
    }
}

@media only screen and (max-width: 767px) {
    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-catalog-heading {
        gap: 12px;
        margin-bottom: 20px;
    }

    .cosmetics-search-page .cosmetics-search-context {
        grid-template-columns: minmax(0, 1fr);
        gap: 15px;
        min-height: 0;
        padding: 20px;
        border-radius: 16px;
    }

    .cosmetics-search-page .cosmetics-search-context-meta {
        max-width: none;
        justify-content: flex-start;
    }

    .cosmetics-category-page .cosmetics-collection-banner {
        min-height: 174px;
        border-radius: 18px;
    }

    .cosmetics-category-page .cosmetics-collection-banner-content {
        max-width: 480px;
        padding: 20px 22px;
    }

    .cosmetics-category-page .cosmetics-collection-banner h1 {
        font-size: 24px;
    }

    .cosmetics-category-page .cosmetics-collection-banner p {
        font-size: 13px;
    }


    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-media {
        padding: 10px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-body {
        padding: 2px 12px 13px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-price {
        font-size: 15px;
    }

    .cosmetics-search-page .cosmetics-results-empty {
        min-height: 310px;
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-search-page .cosmetics-search-context {
        gap: 12px;
        padding: 16px 14px;
    }

    .cosmetics-search-page .cosmetics-search-context h1 {
        font-size: 19px;
        line-height: 1.7;
    }

    .cosmetics-search-page .cosmetics-search-context p {
        margin-top: 3px;
        font-size: 12px;
        line-height: 1.9;
    }

    .cosmetics-search-page .cosmetics-search-context-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }

    .cosmetics-search-page .cosmetics-search-context-meta > span {
        min-width: 0;
        min-height: 36px;
        justify-content: center;
        padding-inline: 7px;
        font-size: 11px;
    }

    .cosmetics-search-page .cosmetics-search-context-meta > span:last-child {
        grid-column: 1 / -1;
    }

    .cosmetics-category-page .cosmetics-collection-banner {
        min-height: 156px;
        border-radius: 16px;
    }

    .cosmetics-category-page .cosmetics-collection-banner-content {
        max-width: 100%;
        padding: 16px;
    }

    .cosmetics-category-page .cosmetics-collection-banner h1 {
        max-width: 18ch;
        font-size: 19px;
        line-height: 1.65;
    }

    .cosmetics-category-page .cosmetics-collection-banner p {
        display: -webkit-box;
        margin-top: 5px;
        overflow: hidden;
        font-size: 11px;
        line-height: 1.85;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .cosmetics-category-page .cosmetics-collection-banner-media::after {
        background: linear-gradient(
            to left,
            rgb(255 255 255 / 95%) 0%,
            rgb(255 255 255 / 82%) 45%,
            rgb(255 255 255 / 35%) 80%,
            rgb(255 255 255 / 10%) 100%
        );
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-body {
        padding: 2px 10px 12px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-brand {
        min-height: 21px;
        font-size: 11px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-title {
        min-height: 50px;
        font-size: 13px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-actions {
        gap: 6px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-action {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
        border-radius: 11px;
        font-size: 14px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-discount,
    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-stock {
        min-height: 26px;
        font-size: 10px;
    }

    .cosmetics-search-page .cosmetics-results-empty {
        min-height: 290px;
    }
}

/* Canonical cosmetics product-detail breakpoints */
@media only screen and (max-width: 1199px) {
    .cosmetics-page .cosmetics-product-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .cosmetics-page .cosmetics-product-main-media {
        min-height: 420px;
    }

    .cosmetics-page .cosmetics-product-main-media img {
        height: 370px;
    }

    .cosmetics-page .cosmetics-product-info {
        padding: 22px;
    }
}

@media only screen and (max-width: 991px) {
    .cosmetics-page.cosmetics-product-page .cosmetics-product {
        padding-top: 22px;
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-product-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-product-gallery {
        padding: 22px;
    }

    .cosmetics-page .cosmetics-product-main-media {
        min-height: 380px;
    }

    .cosmetics-page .cosmetics-product-main-media img {
        width: min(68%, 410px);
        height: 340px;
    }

    .cosmetics-page .cosmetics-product-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-product-benefit {
        border-inline-start: 0 !important;
    }

    .cosmetics-page .cosmetics-product-benefit:nth-of-type(even) {
        border-inline-start: 1px solid var(--cosmetics-border) !important;
    }

    .cosmetics-page .cosmetics-product-benefit:nth-of-type(n + 3) {
        border-top: 1px solid var(--cosmetics-border);
    }
}

@media only screen and (max-width: 767px) {
    .cosmetics-page.cosmetics-product-page .cosmetics-product {
        padding-top: 18px;
    }

    .cosmetics-page .cosmetics-product-breadcrumb {
        margin-bottom: 14px;
        padding: 10px 12px;
        overflow-x: auto;
    }

    .cosmetics-page .cosmetics-product-breadcrumb .breadcrumb {
        width: max-content;
        flex-wrap: nowrap;
    }

    .cosmetics-page .cosmetics-product-gallery,
    .cosmetics-page .cosmetics-product-info,
    .cosmetics-page .cosmetics-product-details,
    .cosmetics-page .cosmetics-product-reviews,
    .cosmetics-page .cosmetics-product-related {
        border-radius: 19px;
    }

    .cosmetics-page .cosmetics-product-main-media {
        min-height: 320px;
    }

    .cosmetics-page .cosmetics-product-main-media img {
        width: min(72%, 330px);
        height: 285px;
    }

    .cosmetics-page .cosmetics-product-info {
        padding: 20px;
    }

    .cosmetics-page .cosmetics-product-details,
    .cosmetics-page .cosmetics-product-reviews,
    .cosmetics-page .cosmetics-product-related {
        margin-top: 18px;
        padding: 20px;
    }

    .cosmetics-page .cosmetics-product-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-product-section-heading h2 {
        font-size: 21px;
    }

    .cosmetics-page .cosmetics-product-review-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-product-related-heading {
        align-items: flex-start;
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-page .cosmetics-product-gallery {
        padding: 16px;
    }

    .cosmetics-page .cosmetics-product-gallery-actions {
        top: 13px;
        right: 13px;
    }

    .cosmetics-page .cosmetics-product-gallery-action {
        width: 39px;
        height: 39px;
        border-radius: 11px;
    }

    .cosmetics-page .cosmetics-product-main-media {
        min-height: 260px;
    }

    .cosmetics-page .cosmetics-product-main-media img {
        width: min(75%, 280px);
        height: 230px;
    }

    .cosmetics-page .cosmetics-product-media-note {
        font-size: 10px;
    }

    .cosmetics-page .cosmetics-product-info {
        padding: 17px;
    }

    .cosmetics-page.cosmetics-product-page .cosmetics-product-info > .cosmetics-product-title {
        font-size: 23px;
    }

    .cosmetics-page .cosmetics-product-rating {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .cosmetics-page .cosmetics-product-purchase-card {
        padding: 15px;
    }

    .cosmetics-page .cosmetics-product-purchase-card > .cosmetics-product-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-product-purchase-card > .cosmetics-product-options > * {
        grid-column: 1;
    }

    .cosmetics-page.cosmetics-product-page .cosmetics-product-purchase-card > .cosmetics-product-pricing {
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: 7px;
    }

    .cosmetics-page .cosmetics-product-current-price-row {
        width: 100%;
        justify-content: space-between;
    }

    .cosmetics-page .cosmetics-product-purchase {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-product-quantity {
        width: 100%;
        max-width: 180px;
    }

    .cosmetics-page .cosmetics-product-add-to-cart {
        width: 100%;
    }

    .cosmetics-page .cosmetics-product-purchase-card > .cosmetics-product-actions {
        display: block;
    }

    .cosmetics-page .cosmetics-product-purchase-card > .cosmetics-product-actions a {
        width: 100%;
    }

    .cosmetics-page .cosmetics-product-benefits {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-product-benefit {
        padding: 13px;
        border-inline-start: 0 !important;
    }

    .cosmetics-page .cosmetics-product-benefit + .cosmetics-product-benefit {
        border-top: 1px solid var(--cosmetics-border);
    }

    .cosmetics-page .cosmetics-product-detail-card {
        padding: 15px;
    }

    .cosmetics-page .cosmetics-product-detail-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .cosmetics-page .cosmetics-product-review header {
        align-items: flex-start;
        flex-direction: column;
    }

    .cosmetics-page .cosmetics-product-review-form .cosmetics-btn-primary {
        width: 100%;
    }

    .cosmetics-page .cosmetics-product-related-heading {
        flex-direction: column;
    }
}

@media only screen and (max-width: 430px) {
    .cosmetics-page.cosmetics-product-page .cosmetics-product {
        padding-bottom: calc(108px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-product-main-media {
        min-height: 230px;
    }

    .cosmetics-page .cosmetics-product-main-media img {
        width: min(76%, 245px);
        height: 205px;
    }

    .cosmetics-page .cosmetics-product-section-heading h2 {
        font-size: 19px;
    }

    .cosmetics-page .cosmetics-product-details,
    .cosmetics-page .cosmetics-product-reviews,
    .cosmetics-page .cosmetics-product-related {
        padding: 16px;
    }

    .cosmetics-page .cosmetics-product-review-rating-field > div {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-product-review-rating-field label {
        min-width: 0;
    }
}

/* Canonical cosmetics cart breakpoints */
@media only screen and (max-width: 1199px) {
    .cosmetics-page .cosmetics-cart-layout {
        grid-template-columns: minmax(0, 1.85fr) minmax(270px, 0.85fr);
        gap: 18px;
    }

    .cosmetics-page .cosmetics-cart-item {
        grid-template-columns: 116px minmax(0, 1fr) minmax(160px, auto);
        gap: 14px 16px;
    }
}

@media only screen and (max-width: 991px) {
    .cosmetics-page.cosmetics-cart-page .cosmetics-cart {
        padding-top: 22px;
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-cart-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-cart-item {
        grid-template-areas:
            "media content"
            "commerce commerce"
            "footer footer";
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-cart-item-commerce {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        padding: 12px 0 0;
        border-top: 1px solid var(--cosmetics-border);
        border-right: 0;
        text-align: right;
    }

    .cosmetics-page .cosmetics-cart-line-total {
        padding: 0;
        border-top: 0;
        text-align: left;
    }

    .cosmetics-page .cosmetics-cart-summary {
        position: static;
    }

    .cosmetics-page .cosmetics-cart-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .cosmetics-page.cosmetics-cart-page .cosmetics-cart {
        padding-top: 18px;
    }

    .cosmetics-page .cosmetics-cart-heading {
        margin-bottom: 17px;
    }

    .cosmetics-page .cosmetics-cart-heading > nav {
        margin-bottom: 11px;
        padding: 10px 12px;
    }

    .cosmetics-page .cosmetics-cart-heading-content {
        min-height: 112px;
        padding: 19px;
        border-radius: 18px;
    }

    .cosmetics-page .cosmetics-cart-heading-content h1 {
        font-size: 25px;
    }

    .cosmetics-page .cosmetics-cart-item {
        border-radius: 16px;
    }

    .cosmetics-page .cosmetics-cart-summary {
        padding: 19px;
        border-radius: 16px;
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-page .cosmetics-cart-heading-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .cosmetics-page .cosmetics-cart-count {
        min-height: 38px;
        padding: 6px 11px;
        font-size: 11px;
    }

    .cosmetics-page .cosmetics-cart-item {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        padding: 13px;
    }

    .cosmetics-page .cosmetics-cart-item-media {
        padding: 6px;
        border-radius: 12px;
    }

    .cosmetics-page .cosmetics-cart-item-title {
        font-size: 13px;
    }

    .cosmetics-page .cosmetics-cart-item-variant {
        gap: 4px;
        margin-top: 7px;
    }

    .cosmetics-page .cosmetics-cart-item-variant li {
        padding: 3px 6px;
        font-size: 9px;
    }

    .cosmetics-page .cosmetics-cart-item-service {
        display: none;
    }

    .cosmetics-page .cosmetics-cart-item-commerce {
        min-width: 0;
    }

    .cosmetics-page .cosmetics-cart-item-price p {
        font-size: 16px;
    }

    .cosmetics-page .cosmetics-cart-item-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .cosmetics-page .cosmetics-cart-delivery summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .cosmetics-page .cosmetics-cart-benefits {
        gap: 8px;
    }

    .cosmetics-page .cosmetics-cart-benefits > div {
        min-height: 54px;
        padding: 9px;
        font-size: 10px;
    }
}

@media only screen and (max-width: 430px) {
    .cosmetics-page.cosmetics-cart-page .cosmetics-cart {
        padding-bottom: calc(108px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-cart-heading-content {
        padding: 16px;
    }

    .cosmetics-page .cosmetics-cart-heading-content h1 {
        font-size: 22px;
    }

    .cosmetics-page .cosmetics-cart-heading-content > div > p {
        font-size: 11px;
    }

    .cosmetics-page .cosmetics-cart-item-commerce {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .cosmetics-page .cosmetics-cart-line-total {
        width: 100%;
        padding-top: 8px;
        border-top: 1px dashed var(--cosmetics-border);
        text-align: right;
    }

    .cosmetics-page .cosmetics-cart-summary {
        padding: 16px;
    }

    .cosmetics-page .cosmetics-cart-summary-row {
        gap: 10px;
    }

    .cosmetics-page .cosmetics-cart-summary-row dd {
        font-size: 11px;
    }

    .cosmetics-page .cosmetics-cart-summary-total dd {
        font-size: 18px;
    }

    .cosmetics-page .cosmetics-cart-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Canonical cosmetics checkout breakpoints */
@media only screen and (max-width: 1199px) {
    .cosmetics-page .cosmetics-checkout-layout {
        grid-template-columns: minmax(0, 1.8fr) minmax(270px, 0.8fr);
        gap: 18px;
    }

    .cosmetics-page .cosmetics-checkout-item {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "media content total"
            "media quantity total";
    }

    .cosmetics-page .cosmetics-checkout-item-media {
        grid-area: media;
    }

    .cosmetics-page .cosmetics-checkout-item-content {
        grid-area: content;
    }

    .cosmetics-page .cosmetics-checkout-item-quantity {
        grid-area: quantity;
        justify-items: start;
    }

    .cosmetics-page .cosmetics-checkout-item-total {
        grid-area: total;
    }

    .cosmetics-page .cosmetics-checkout-day-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-checkout-gateways {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 991px) {
    .cosmetics-page.cosmetics-checkout-page .cosmetics-checkout {
        padding-top: 22px;
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-checkout-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-checkout-summary {
        position: static;
    }

    .cosmetics-page .cosmetics-checkout-trust {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .cosmetics-page.cosmetics-checkout-page .cosmetics-checkout {
        padding-top: 18px;
    }

    .cosmetics-page .cosmetics-checkout-breadcrumb {
        margin-bottom: 11px;
        padding: 10px 12px;
    }

    .cosmetics-page .cosmetics-checkout-progress {
        padding: 14px 10px;
        border-radius: 15px;
    }

    .cosmetics-page .cosmetics-checkout-step {
        flex-direction: column;
        gap: 5px;
        font-size: 9px;
    }

    .cosmetics-page .cosmetics-checkout-step:not(:last-child)::after {
        width: calc(100% - 40px);
        inset-block-start: 15px;
        inset-inline-start: calc(50% + 20px);
    }

    .cosmetics-page .cosmetics-checkout-step-index {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .cosmetics-page .cosmetics-checkout-heading {
        min-height: 118px;
        margin-bottom: 17px;
        padding: 20px;
        border-radius: 18px;
    }

    .cosmetics-page .cosmetics-checkout-heading h1 {
        font-size: 25px;
    }

    .cosmetics-page .cosmetics-checkout-heading-mark {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 16px;
        font-size: 21px;
    }

    .cosmetics-page .cosmetics-checkout-section,
    .cosmetics-page .cosmetics-checkout-summary {
        padding: 17px;
        border-radius: 16px;
    }

    .cosmetics-page .cosmetics-checkout-address {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-checkout-address address {
        padding-block-start: 12px;
        padding-inline-start: 0;
        border-block-start: 1px solid var(--cosmetics-border);
        border-inline-start: 0;
    }

    .cosmetics-page .cosmetics-checkout-trust {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-page .cosmetics-checkout-heading {
        align-items: flex-start;
    }

    .cosmetics-page .cosmetics-checkout-heading-mark {
        display: none;
    }

    .cosmetics-page .cosmetics-checkout-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }

    .cosmetics-page .cosmetics-checkout-section-heading > a {
        align-self: stretch;
        text-align: center;
    }

    .cosmetics-page .cosmetics-checkout-item {
        grid-template-columns: 70px minmax(0, 1fr);
        grid-template-areas:
            "media content"
            "quantity total";
        gap: 11px;
        padding: 11px;
    }

    .cosmetics-page .cosmetics-checkout-item-media {
        width: 70px;
        height: 70px;
    }

    .cosmetics-page .cosmetics-checkout-item-quantity {
        align-self: end;
    }

    .cosmetics-page .cosmetics-checkout-item-total {
        align-self: stretch;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
        padding-block-start: 10px;
        padding-inline-start: 0;
        border-block-start: 1px dashed var(--cosmetics-border);
        border-inline-start: 0;
        text-align: right;
    }

    .cosmetics-page .cosmetics-checkout-day-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-checkout-option-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-checkout-gateways {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-checkout-address-empty {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .cosmetics-page .cosmetics-checkout-address-empty a {
        width: 100%;
        margin-inline-start: 0;
        text-align: center;
    }

    .cosmetics-page .cosmetics-checkout-trust {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-checkout-trust > div {
        justify-content: flex-start;
    }
}

@media only screen and (max-width: 430px) {
    .cosmetics-page.cosmetics-checkout-page .cosmetics-checkout {
        padding-bottom: calc(108px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-checkout-progress {
        padding-inline: 5px;
    }

    .cosmetics-page .cosmetics-checkout-step {
        font-size: 8px;
    }

    .cosmetics-page .cosmetics-checkout-step-index {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        box-shadow: 0 0 0 3px #fff;
    }

    .cosmetics-page .cosmetics-checkout-step:not(:last-child)::after {
        width: calc(100% - 34px);
        inset-block-start: 14px;
        inset-inline-start: calc(50% + 17px);
    }

    .cosmetics-page .cosmetics-checkout-heading {
        min-height: 110px;
        padding: 17px;
    }

    .cosmetics-page .cosmetics-checkout-heading h1 {
        font-size: 22px;
    }

    .cosmetics-page .cosmetics-checkout-heading p {
        font-size: 10px;
    }

    .cosmetics-page .cosmetics-checkout-section,
    .cosmetics-page .cosmetics-checkout-summary {
        padding: 14px;
    }

    .cosmetics-page .cosmetics-checkout-section-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .cosmetics-page .cosmetics-checkout-section-heading h2 {
        font-size: 15px;
    }

    .cosmetics-page .cosmetics-checkout-item-content h3 {
        font-size: 11px;
    }

    .cosmetics-page .cosmetics-checkout-item-total strong {
        font-size: 12px;
    }

    .cosmetics-page .cosmetics-checkout-choice > label {
        padding-inline-end: 8px;
        padding-inline-start: 34px;
    }

    .cosmetics-page .cosmetics-checkout-choice > label::before {
        inset-inline-start: 10px;
    }

    .cosmetics-page .cosmetics-checkout-choice > label::after {
        inset-inline-start: 14px;
    }

    .cosmetics-page .cosmetics-checkout-summary-row {
        gap: 9px;
    }

    .cosmetics-page .cosmetics-checkout-summary-row dd {
        font-size: 11px;
    }

    .cosmetics-page .cosmetics-checkout-total dd {
        font-size: 18px;
    }
}

/* Canonical cosmetics delivery address breakpoints */
@media only screen and (max-width: 1199px) {
    .cosmetics-page .cosmetics-address-layout {
        grid-template-columns: minmax(0, 1.8fr) minmax(270px, 0.8fr);
        gap: 18px;
    }

    .cosmetics-page .cosmetics-address-card {
        grid-template-columns: minmax(135px, 0.6fr) minmax(0, 1.4fr);
    }

    .cosmetics-page .cosmetics-address-postal {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-block-start: 10px;
        padding-inline-start: 0;
        border-block-start: 1px dashed var(--cosmetics-border);
        border-inline-start: 0;
    }

    .cosmetics-page .cosmetics-address-postal strong {
        margin-top: 0;
    }
}

@media only screen and (max-width: 991px) {
    .cosmetics-page.cosmetics-delivery-address-page .cosmetics-address {
        padding-top: 22px;
        padding-bottom: calc(96px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-address-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-address-summary {
        position: static;
    }
}

@media only screen and (max-width: 767px) {
    .cosmetics-page.cosmetics-delivery-address-page .cosmetics-address {
        padding-top: 18px;
    }

    .cosmetics-page .cosmetics-address-breadcrumb {
        margin-bottom: 11px;
        padding: 10px 12px;
    }

    .cosmetics-page .cosmetics-address-heading {
        min-height: 118px;
        margin: 11px 0 17px;
        padding: 20px;
        border-radius: 18px;
    }

    .cosmetics-page .cosmetics-address-heading h1 {
        font-size: 25px;
    }

    .cosmetics-page .cosmetics-address-heading-mark {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        font-size: 21px;
    }

    .cosmetics-page .cosmetics-address-section,
    .cosmetics-page .cosmetics-address-summary {
        padding: 17px;
        border-radius: 16px;
    }

    .cosmetics-page .cosmetics-address-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding-top: 42px;
    }

    .cosmetics-page .cosmetics-address-recipient,
    .cosmetics-page .cosmetics-address-location {
        padding-top: 0;
    }

    .cosmetics-page .cosmetics-address-postal {
        grid-column: auto;
    }

    .cosmetics-page .cosmetics-address-empty {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-address-empty button {
        grid-column: 1 / -1;
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-page .cosmetics-address-heading {
        align-items: flex-start;
    }

    .cosmetics-page .cosmetics-address-heading-mark {
        display: none;
    }

    .cosmetics-page .cosmetics-address-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 11px;
    }

    .cosmetics-page .cosmetics-address-add {
        width: 100%;
    }

    .cosmetics-page .cosmetics-address-option {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-address-actions {
        min-width: 0;
        flex-direction: row;
        border-block-start: 1px solid var(--cosmetics-border);
        border-inline-start: 0;
    }

    .cosmetics-page .cosmetics-address-actions a {
        min-height: 42px;
    }

    .cosmetics-page .cosmetics-address-actions a + a {
        border-top: 0;
        border-inline-start: 1px solid var(--cosmetics-border);
    }

    .cosmetics-page .cosmetics-address-empty {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
    }

    .cosmetics-page .cosmetics-address-empty-icon {
        margin-inline: auto;
    }

    .cosmetics-page .cosmetics-address-help {
        align-items: flex-start;
    }

    .cosmetics-page .cosmetics-address-modal .modal-header,
    .cosmetics-page .cosmetics-address-modal .modal-body {
        padding: 17px;
    }

    .cosmetics-page.cosmetics-delivery-address-page #address-form .address-form-grid {
        --bs-gutter-y: 1rem;
    }

    .cosmetics-page.cosmetics-delivery-address-page #address-form .address-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .cosmetics-page.cosmetics-delivery-address-page #address-form .address-form-actions .btn {
        width: 100%;
    }
}

@media only screen and (max-width: 430px) {
    .cosmetics-page.cosmetics-delivery-address-page .cosmetics-address {
        padding-bottom: calc(108px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-address-heading {
        min-height: 110px;
        padding: 17px;
    }

    .cosmetics-page .cosmetics-address-heading h1 {
        font-size: 22px;
    }

    .cosmetics-page .cosmetics-address-heading p {
        font-size: 10px;
    }

    .cosmetics-page .cosmetics-address-section,
    .cosmetics-page .cosmetics-address-summary {
        padding: 14px;
    }

    .cosmetics-page .cosmetics-address-section-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .cosmetics-page .cosmetics-address-section-heading h2 {
        font-size: 15px;
    }

    .cosmetics-page .cosmetics-address-card {
        padding: 42px 14px 14px;
    }

    .cosmetics-page .cosmetics-address-selected-label {
        inset-inline-end: 9px;
    }

    .cosmetics-page .cosmetics-address-card-title {
        inset-inline-start: 9px;
    }

    .cosmetics-page .cosmetics-address-summary {
        padding: 16px;
    }
}

/* Canonical cosmetics payment-result breakpoints */

@media only screen and (max-width: 767px) {
    .cosmetics-page .cosmetics-payment-result-details dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-payment-result-row,
    .cosmetics-page .cosmetics-payment-result-row:nth-child(odd),
    .cosmetics-page .cosmetics-payment-result-row:nth-child(even) {
        padding-inline: 0;
        border-inline-start: 0;
        border-bottom: 1px dashed var(--cosmetics-border);
    }

    .cosmetics-page .cosmetics-payment-result-row:last-child {
        border-bottom: 0;
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-page.cosmetics-payment-result-page .cosmetics-payment-result {
        padding-block: 20px calc(112px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-payment-result-breadcrumb {
        margin-bottom: 14px;
        padding: 10px 13px;
    }

    .cosmetics-page .cosmetics-payment-result-shell {
        margin-top: 18px;
        border-radius: 19px;
    }

    .cosmetics-page .cosmetics-payment-result-status {
        min-height: 230px;
        padding: 28px 18px 25px;
    }

    .cosmetics-page .cosmetics-payment-result-icon {
        width: 68px;
        height: 68px;
        font-size: 30px;
    }

    .cosmetics-page .cosmetics-payment-result-title {
        font-size: 24px;
    }

    .cosmetics-page .cosmetics-payment-result-copy {
        font-size: 12px;
    }

    .cosmetics-page .cosmetics-payment-result-details {
        margin-inline: 14px;
        padding: 17px;
    }

    .cosmetics-page .cosmetics-payment-result-row {
        gap: 12px;
        padding-block: 15px;
    }

    .cosmetics-page .cosmetics-payment-result-message {
        margin: 14px 14px 0;
    }

    .cosmetics-page .cosmetics-payment-result-actions {
        align-items: stretch;
        flex-direction: column;
        padding: 18px 14px 22px;
    }

    .cosmetics-page .cosmetics-payment-result-action {
        width: 100%;
    }

    .cosmetics-page .cosmetics-payment-result-help {
        align-items: flex-start;
        margin-top: 14px;
    }
}

@media only screen and (max-width: 390px) {
    .cosmetics-page .cosmetics-payment-result-status {
        min-height: 216px;
    }

    .cosmetics-page .cosmetics-payment-result-title {
        font-size: 22px;
    }

    .cosmetics-page .cosmetics-payment-result-details-heading > span {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}

/* Canonical cosmetics SMS authentication breakpoints */

@media only screen and (max-width: 575px) {
    .cosmetics-page .cosmetics-auth-shell {
        align-items: center;
        padding: 18px 14px 24px;
    }

    .cosmetics-page .cosmetics-auth-brand {
        position: static;
        z-index: auto;
        margin-bottom: 10px;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .cosmetics-page .cosmetics-auth-brand .cosmetics-auth-logo {
        width: 108px;
        height: 46px;
    }

    .cosmetics-page .cosmetics-auth-return {
        min-height: 40px;
        padding-inline: 10px;
        font-size: 10px;
    }

    .cosmetics-page .cosmetics-auth-card.auth-form {
        padding: 20px 16px;
        border-radius: 17px !important;
    }

    .cosmetics-page .cosmetics-auth-steps {
        margin-bottom: 21px;
    }

    .cosmetics-page .cosmetics-auth-heading {
        margin-bottom: 19px;
    }

    .cosmetics-page .cosmetics-auth-heading h1 {
        font-size: 21px;
    }

    .cosmetics-page .cosmetics-auth-control .form-control {
        min-height: 52px;
    }

    .cosmetics-page .cosmetics-auth-code {
        gap: 6px;
    }

    .cosmetics-page .cosmetics-auth-code input {
        height: 52px;
    }
}

@media only screen and (max-width: 575px) and (max-height: 700px) {
    .cosmetics-page .cosmetics-auth-shell {
        align-items: start;
    }
}

@media only screen and (max-width: 390px) {
    .cosmetics-page .cosmetics-auth-shell {
        padding-inline: 12px;
    }

    .cosmetics-page .cosmetics-auth-heading h1 {
        font-size: 20px;
    }

    .cosmetics-page .cosmetics-auth-resend {
        align-items: flex-start;
        flex-direction: column;
    }

    .cosmetics-page .cosmetics-auth-resend .otp-edit-mobile,
    .cosmetics-page .cosmetics-auth-resend .otp-resend {
        min-height: 32px;
    }
}

/* Canonical cosmetics account shell breakpoints */

@media only screen and (max-width: 1199px) {
    .cosmetics-page .cosmetics-account-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-account-dashboard-grid {
        grid-template-columns: minmax(0, 1.45fr) minmax(245px, .8fr);
    }

    .cosmetics-page .cosmetics-account-order {
        grid-template-columns: minmax(135px, .7fr) minmax(0, 1.35fr);
    }

    .cosmetics-page .cosmetics-account-order-link {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .cosmetics-page .cosmetics-account-order-item {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-account-order-item-media {
        width: 76px;
        height: 76px;
    }

    .cosmetics-page .cosmetics-account-order-item-commerce {
        grid-column: 1 / -1;
        padding-top: 12px;
        border-top: 1px solid var(--cosmetics-border);
    }

    .cosmetics-page .cosmetics-account-favorites-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-account-ticket-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 991px) {
    .cosmetics-page.cosmetics-account-page .cosmetics-account {
        padding-top: 22px;
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }

    .cosmetics-page .cosmetics-account-layout {
        display: block;
    }

    .cosmetics-page .cosmetics-account-sidebar {
        width: min(320px, 88vw);
        border-radius: 0;
    }

    .cosmetics-page .cosmetics-account-sidebar .offcanvas-header {
        border-bottom: 1px solid var(--cosmetics-border);
    }

    .cosmetics-page .cosmetics-account-sidebar .offcanvas-body {
        overflow-y: auto;
    }

    .cosmetics-page .cosmetics-account-dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-account-orders,
    .cosmetics-page .cosmetics-account-order-detail > .cosmetics-account-section,
    .cosmetics-page .cosmetics-account-order-detail-grid {
        max-width: none;
    }

    .cosmetics-page .cosmetics-account-order-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .cosmetics-page .cosmetics-account-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .cosmetics-page .cosmetics-account-mobile-nav {
        width: 100%;
    }

    .cosmetics-page .cosmetics-account-welcome {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .cosmetics-page .cosmetics-account-welcome::after {
        left: 12px;
        top: 26px;
        font-size: 92px;
        transform: none;
    }

    .cosmetics-page .cosmetics-account-welcome > a {
        width: 100%;
    }

    .cosmetics-page .cosmetics-account-order {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-account-order-meta {
        padding-top: 13px;
        border-top: 1px solid var(--cosmetics-border);
    }

    .cosmetics-page .cosmetics-account-order-link {
        width: 100%;
        justify-self: stretch;
    }

    .cosmetics-page .cosmetics-account-profile {
        max-width: none;
    }

    .cosmetics-page .cosmetics-account-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-account-field-wide {
        grid-column: auto;
    }

    .cosmetics-page .cosmetics-account-addresses {
        max-width: none;
    }

    .cosmetics-page .cosmetics-account-order-detail-heading {
        align-items: flex-start;
    }

    .cosmetics-page .cosmetics-account-order-heading-actions {
        width: 100%;
    }

    .cosmetics-page .cosmetics-account-order-heading-actions > a,
    .cosmetics-page .cosmetics-account-order-heading-actions > button {
        flex: 1 1 0;
    }

    .cosmetics-page .cosmetics-account-order-card-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .cosmetics-page .cosmetics-account-order-products {
        justify-content: flex-start;
    }

    .cosmetics-page .cosmetics-account-order-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-account-order-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .cosmetics-page .cosmetics-account-order-progress li::after {
        display: none;
    }

    .cosmetics-page .cosmetics-account-order-item {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
    }

    .cosmetics-page .cosmetics-account-order-item-media {
        width: 72px;
        height: 72px;
    }

    .cosmetics-page .cosmetics-account-comment-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-account-comment-product {
        border-bottom: 1px solid var(--cosmetics-border);
        border-left: 0;
    }

    .cosmetics-page .cosmetics-account-ticket-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-ticket-message {
        width: min(88%, 700px);
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-page.cosmetics-account-page .cosmetics-account {
        padding-top: 18px;
    }

    .cosmetics-page .cosmetics-account-breadcrumb {
        margin-bottom: 15px;
    }

    .cosmetics-page .cosmetics-account-heading {
        margin-bottom: 18px;
    }

    .cosmetics-page .cosmetics-account-heading h1 {
        font-size: 25px;
    }

    .cosmetics-page .cosmetics-account-heading p {
        font-size: 11px;
    }

    .cosmetics-page .cosmetics-account-grid {
        gap: 9px;
    }

    .cosmetics-page .cosmetics-account-stat {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        padding: 14px;
    }

    .cosmetics-page .cosmetics-account-stat > div > span {
        overflow: visible;
        line-height: 1.7;
        text-overflow: unset;
        white-space: normal;
    }

    .cosmetics-page .cosmetics-account-section {
        padding: 17px;
        border-radius: 16px;
    }

    .cosmetics-page .cosmetics-account-section-header {
        align-items: flex-start;
    }

    .cosmetics-page .cosmetics-account-order {
        padding: 14px;
    }

    .cosmetics-page .cosmetics-account-profile {
        padding: 18px;
    }

    .cosmetics-page .cosmetics-account-profile-header {
        gap: 12px;
    }

    .cosmetics-page .cosmetics-account-profile-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .cosmetics-page .cosmetics-account-form-grid {
        gap: 14px;
    }

    .cosmetics-page .cosmetics-account-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .cosmetics-page .cosmetics-account-form-cancel,
    .cosmetics-page .cosmetics-account-form-submit {
        width: 100%;
    }

    .cosmetics-page .cosmetics-account-addresses {
        padding: 17px;
    }

    .cosmetics-page .cosmetics-account-addresses-header {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
    }

    .cosmetics-page .cosmetics-account-address-add {
        width: 100%;
    }

    .cosmetics-page .cosmetics-account-address-header,
    .cosmetics-page .cosmetics-account-address-body {
        padding-inline: 14px;
    }

    .cosmetics-page .cosmetics-account-address-meta {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .cosmetics-page .cosmetics-account-address-meta > .is-wide {
        grid-column: auto;
    }

    .cosmetics-page .cosmetics-account-address-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-account-address-actions a {
        padding-inline: 8px;
    }

    .cosmetics-page .cosmetics-account-address-empty {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .cosmetics-page .cosmetics-account-address-empty button {
        width: 100%;
    }

    .cosmetics-page.cosmetics-account-addresses-page #address-form .address-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .cosmetics-page.cosmetics-account-addresses-page #address-form .address-form-actions .btn {
        width: 100%;
    }

    .cosmetics-page .cosmetics-account-order-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-account-order-meta > div:last-child {
        grid-column: 1 / -1;
    }

    .cosmetics-page .cosmetics-account-orders,
    .cosmetics-page .cosmetics-account-order-summary {
        padding: 17px;
    }

    .cosmetics-page .cosmetics-account-order-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-account-order-tabs button {
        padding-inline: 8px;
    }

    .cosmetics-page .cosmetics-account-order-header {
        align-items: flex-start;
        padding-inline: 14px;
    }

    .cosmetics-page .cosmetics-account-order-card-body {
        padding-inline: 14px;
    }

    .cosmetics-page .cosmetics-account-order-card .cosmetics-account-order-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-account-order-card .cosmetics-account-order-meta > div:last-child {
        grid-column: 1 / -1;
    }

    .cosmetics-page .cosmetics-account-order-actions {
        align-items: stretch;
        flex-direction: column;
        padding: 12px 14px;
    }

    .cosmetics-page .cosmetics-account-order-actions > a {
        width: 100%;
    }

    .cosmetics-page .cosmetics-account-order-heading-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cosmetics-page .cosmetics-account-order-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-account-order-progress {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-account-order-item {
        grid-template-columns: 66px minmax(0, 1fr);
        padding: 12px;
    }

    .cosmetics-page .cosmetics-account-order-item-media {
        width: 66px;
        height: 66px;
    }

    .cosmetics-page .cosmetics-account-order-item-commerce {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cosmetics-page .cosmetics-account-order-item-commerce > div:first-child {
        grid-column: 1 / -1;
    }

    .cosmetics-page .cosmetics-account-order-address dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-account-order-address dl > .is-wide {
        grid-column: auto;
    }

    .cosmetics-page .cosmetics-account-favorites-grid {
        gap: 10px;
    }

    .cosmetics-page .cosmetics-account-favorite-card .cosmetics-product-media {
        padding: 10px;
    }

    .cosmetics-page .cosmetics-account-favorite-card .cosmetics-product-body {
        padding-inline: 10px;
        padding-bottom: 10px;
    }

    .cosmetics-page .cosmetics-account-favorite-view {
        padding-inline: 7px;
        font-size: 9px;
    }

    .cosmetics-page .cosmetics-account-comment-meta {
        align-items: flex-start;
    }

    .cosmetics-page .cosmetics-account-ticket-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-account-ticket-summary-grid > .is-wide {
        grid-column: auto;
    }

    .cosmetics-page .cosmetics-account-ticket-summary-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cosmetics-page .cosmetics-account-ticket-summary-actions a {
        width: 100%;
    }

    .cosmetics-page .cosmetics-ticket-message {
        width: 100%;
    }

    .cosmetics-page .cosmetics-ticket-message header {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .cosmetics-page .cosmetics-ticket-reply .cosmetics-account-form-actions {
        align-items: stretch;
    }

    .cosmetics-page .cosmetics-ticket-reply .cosmetics-account-form-submit {
        width: 100%;
    }
}

@media only screen and (max-width: 390px) {
    .cosmetics-page .cosmetics-account-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-account-stat {
        align-items: center;
        flex-direction: row;
    }

    .cosmetics-page .cosmetics-account-section-header {
        flex-direction: column;
        gap: 8px;
    }

    .cosmetics-page .cosmetics-account-comment-meta {
        flex-direction: column;
    }
}

/* Canonical cosmetics invoice breakpoints */
@media only screen and (max-width: 991px) {
    .cosmetics-page.cosmetics-invoice-page .cosmetics-invoice {
        padding-block: 22px;
    }

    .cosmetics-page .cosmetics-invoice-shell {
        width: calc(100% - 24px);
        padding: 21px;
    }

    .cosmetics-page .cosmetics-invoice-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .cosmetics-page .cosmetics-invoice-meta {
        width: 100%;
    }

    .cosmetics-page .cosmetics-invoice-lower {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .cosmetics-page .cosmetics-invoice-parties {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-invoice-table-wrap {
        padding: 12px;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap table,
    .cosmetics-page .cosmetics-invoice-table-wrap tbody,
    .cosmetics-page .cosmetics-invoice-table-wrap tr,
    .cosmetics-page .cosmetics-invoice-table-wrap td {
        display: block;
        width: 100%;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .cosmetics-page .cosmetics-invoice-item {
        padding: 12px;
        border: 1px solid var(--cosmetics-border);
        border-radius: 13px;
        background-color: #fff;
    }

    .cosmetics-page .cosmetics-invoice-item + .cosmetics-invoice-item {
        margin-top: 11px;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 9px 0;
        border-bottom: 1px solid var(--cosmetics-border);
        text-align: left;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap td::before {
        color: var(--cosmetics-muted);
        font-size: 9px;
        font-weight: 800;
        text-align: right;
        content: attr(data-label);
    }

    .cosmetics-page .cosmetics-invoice-table-wrap .cosmetics-invoice-product-cell {
        display: grid;
        min-width: 0;
        grid-template-columns: 62px minmax(0, 1fr);
        align-items: center;
        text-align: right;
    }

    .cosmetics-page .cosmetics-invoice-product-cell::before {
        grid-column: 1 / -1;
    }

    .cosmetics-page .cosmetics-invoice-product-cell img {
        width: 62px;
        height: 62px;
        flex-basis: 62px;
    }

    .cosmetics-page .cosmetics-invoice-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .cosmetics-page .cosmetics-invoice-actions a {
        width: 100%;
    }
}

@media only screen and (max-width: 575px) {
    .cosmetics-page.cosmetics-invoice-page .cosmetics-invoice {
        padding-top: 12px;
    }

    .cosmetics-page .cosmetics-invoice-shell {
        width: calc(100% - 16px);
        padding: 17px 14px;
        border-radius: 16px;
    }

    .cosmetics-page .cosmetics-invoice-brand {
        align-items: flex-start;
    }

    .cosmetics-page .cosmetics-invoice-brand > a {
        width: 78px;
        height: 52px;
        flex-basis: 78px;
    }

    .cosmetics-page .cosmetics-invoice-brand span {
        font-size: 8px;
    }

    .cosmetics-page .cosmetics-invoice-brand h1 {
        font-size: 21px;
    }

    .cosmetics-page .cosmetics-invoice-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-invoice-section dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .cosmetics-page .cosmetics-invoice-section dl > .is-wide {
        grid-column: auto;
    }

    .cosmetics-page .cosmetics-invoice-section-heading {
        align-items: flex-start;
    }

    .cosmetics-page .cosmetics-invoice-payment .cosmetics-invoice-section-heading {
        flex-direction: column;
    }

    .cosmetics-page .cosmetics-invoice-payment-status {
        align-self: flex-start;
    }
}

@media print {
    @page {
        size: A4;
        margin: 10mm;
    }

    html,
    body.cosmetics-page.cosmetics-invoice-page {
        background: #fff !important;
    }

    body.cosmetics-page.cosmetics-invoice-page {
        color: #181218;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .cosmetics-page.cosmetics-invoice-page .cosmetics-invoice {
        padding: 0;
    }

    .cosmetics-page .cosmetics-invoice-shell {
        width: 100%;
        max-width: none;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .cosmetics-page .cosmetics-invoice-shell::before {
        height: 3px;
    }

    .cosmetics-page .cosmetics-invoice-header {
        gap: 14px;
        padding-bottom: 12px;
    }

    .cosmetics-page .cosmetics-invoice-brand > a {
        width: 82px;
        height: 52px;
        flex-basis: 82px;
    }

    .cosmetics-page .cosmetics-invoice-parties,
    .cosmetics-page .cosmetics-invoice-items,
    .cosmetics-page .cosmetics-invoice-lower,
    .cosmetics-page .cosmetics-invoice-note {
        margin-top: 10px;
    }

    .cosmetics-page .cosmetics-invoice-parties,
    .cosmetics-page .cosmetics-invoice-lower {
        gap: 8px;
    }

    .cosmetics-page .cosmetics-invoice-section,
    .cosmetics-page .cosmetics-invoice-payment,
    .cosmetics-page .cosmetics-invoice-summary {
        padding: 10px;
    }

    .cosmetics-page .cosmetics-invoice-section > header {
        margin-bottom: 8px;
    }

    .cosmetics-page .cosmetics-invoice-section-heading {
        padding: 9px 10px;
    }

    .cosmetics-page .cosmetics-invoice-payment .cosmetics-invoice-section-heading,
    .cosmetics-page .cosmetics-invoice-summary .cosmetics-invoice-section-heading {
        margin: -10px -10px 9px;
    }

    .cosmetics-page .cosmetics-invoice-actions {
        display: none !important;
    }

    .cosmetics-page .cosmetics-invoice-parties,
    .cosmetics-page .cosmetics-invoice-lower,
    .cosmetics-page .cosmetics-invoice-item,
    .cosmetics-page .cosmetics-invoice-payment,
    .cosmetics-page .cosmetics-invoice-summary {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap {
        padding: 0;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap table {
        display: table;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap thead {
        position: static;
        display: table-header-group;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap tbody {
        display: table-row-group;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap tr {
        display: table-row;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap th,
    .cosmetics-page .cosmetics-invoice-table-wrap td {
        display: table-cell;
        width: auto;
        padding: 6px 8px;
        border-color: #b9b1b6;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap td.cosmetics-invoice-product-cell {
        display: flex;
        min-width: 220px;
    }

    .cosmetics-page .cosmetics-invoice-product-cell img {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
    }

    .cosmetics-page .cosmetics-invoice-table-wrap td::before {
        display: none;
    }

    .cosmetics-page .cosmetics-invoice-note {
        padding: 8px 10px;
        border-color: #b9b1b6;
    }
}

/* Canonical cosmetics public footer */
@media only screen and (max-width: 1199px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-grid {
        grid-template-columns: minmax(230px, 0.9fr) minmax(0, 1.4fr);
        gap: 34px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-assurance {
        grid-column: 1 / -1;
        grid-template-columns: minmax(230px, 0.8fr) minmax(0, 1.2fr);
    }
}

@media only screen and (max-width: 991px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer {
        margin-top: 56px;
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
        background: linear-gradient(
            180deg,
            transparent 0,
            transparent 46px,
            var(--cosmetics-footer-bg) 46px,
            var(--cosmetics-footer-bg) 100%
        );
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-shell {
        padding-inline: 18px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-contact-strip {
        width: calc(100% - 36px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-contact-item:nth-child(3) {
        grid-column: 1 / -1;
        min-height: 76px;
        border-top: 1px solid var(--cosmetics-border);
        border-right: 0;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-main {
        padding: 62px 28px 30px;
        border-radius: 28px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-description {
        max-width: 66ch;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-assurance {
        grid-column: auto;
    }
}

@media only screen and (max-width: 767px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-main {
        padding-inline: 24px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-brand {
        text-align: center;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-logo {
        margin-inline: auto;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-brand h2,
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-description {
        margin-inline: auto;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-social {
        justify-content: center;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-assurance {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media only screen and (max-width: 575px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer {
        margin-top: 44px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-shell {
        padding-inline: 12px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-contact-strip {
        width: calc(100% - 16px);
        grid-template-columns: minmax(0, 1fr);
        border-radius: 20px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-contact-item {
        min-height: 72px;
        padding: 12px 15px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-contact-item + .cosmetics-footer-contact-item,
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-contact-item:nth-child(3) {
        grid-column: auto;
        min-height: 72px;
        border-top: 1px solid var(--cosmetics-border);
        border-right: 0;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-contact-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 13px;
        font-size: 18px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-main {
        padding: 58px 18px 24px;
        border-radius: 24px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-back-to-top {
        margin-bottom: 24px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-grid {
        gap: 28px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-links {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-link-group {
        padding-bottom: 18px;
        border-bottom: 1px solid rgb(255 255 255 / 12%);
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-newsletter-form {
        flex-direction: column;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-newsletter .btn {
        width: 100%;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-bottom {
        min-height: 58px;
        margin-inline: 8px;
        padding-inline: 8px;
    }
}

@media only screen and (max-width: 430px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer {
        padding-bottom: calc(112px + env(safe-area-inset-bottom));
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-shell {
        padding-inline: 8px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-main {
        padding-inline: 15px;
        border-radius: 21px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-contact-value {
        font-size: 13px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-trust,
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-newsletter {
        padding: 15px;
        border-radius: 17px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer-trust-item {
        width: 76px;
        height: 76px;
    }
}

/* End canonical cosmetics public footer */

/* Canonical cosmetics public header */
@media only screen and (max-width: 1199px) and (min-width: 992px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-top {
        grid-template-columns: 150px minmax(320px, 1fr) auto;
        grid-template-areas: "brand search actions";
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-support {
        display: none;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-cart-copy {
        display: none;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-cart {
        padding: 5px;
    }
}

@media only screen and (max-width: 991px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header {
        position: sticky;
        top: 0;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-top {
        min-height: 124px;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-areas:
            "mobile brand actions"
            "search search search";
        gap: 9px 12px;
        padding-block: 8px 12px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-mobile-menu {
        display: block;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-icon-button {
        width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        font-size: 23px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-brand {
        width: 112px;
        min-height: 52px;
        justify-self: center;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-brand img {
        width: 104px;
        height: 50px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-support {
        display: none;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-actions {
        justify-content: flex-end;
        gap: 6px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-account,
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-cart {
        min-height: 42px;
        border-radius: 13px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-account {
        padding: 7px 10px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-cart {
        padding: 3px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-cart-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-cart-copy {
        display: none;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-search {
        min-height: 46px;
        border-radius: 15px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-search-input {
        min-height: 44px;
        padding-block: 8px;
        padding-right: 15px;
        padding-left: 52px;
        font-size: 13px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-search-submit {
        width: 36px;
        height: 36px;
        border-radius: 11px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-search-feedback {
        right: 12px;
        bottom: -18px;
        font-size: 10px;
    }
}

@media only screen and (max-width: 575px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-top {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap-inline: 8px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-account span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-account {
        width: 42px;
        padding: 0;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-brand {
        width: 102px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-brand img {
        width: 96px;
    }
}

@media only screen and (max-width: 390px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-top {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap-inline: 6px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-icon-button,
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-account {
        width: 40px;
        height: 40px;
        min-height: 40px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-cart {
        min-height: 40px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-brand,
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-brand img {
        width: 90px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-header-search-input {
        font-size: 12px;
    }
}

/* End canonical cosmetics public header */

/* Canonical cosmetics mobile navigation */
@media only screen and (max-width: 991px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-mobile-nav {
        display: block;
    }



    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-back-to-top {
        left: 16px;
        bottom: calc(var(--cosmetics-mobile-nav-clearance) + 14px + env(safe-area-inset-bottom));
    }

    .cosmetics-page.cosmetics-product-page .cosmetics-product,
    .cosmetics-page.cosmetics-cart-page .cosmetics-cart,
    .cosmetics-page.cosmetics-checkout-page .cosmetics-checkout,
    .cosmetics-page.cosmetics-delivery-address-page .cosmetics-address,
    .cosmetics-page.cosmetics-account-page .cosmetics-account {
        padding-bottom: 36px;
    }

    .cosmetics-page.cosmetics-payment-result-page .cosmetics-payment-result {
        padding-bottom: 36px;
    }

    .cosmetics-page.cosmetics-empty-cart-page .content {
        padding-bottom: calc(var(--cosmetics-mobile-nav-clearance) + 20px + env(safe-area-inset-bottom));
    }
}

@media only screen and (max-width: 430px) {
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-mobile-nav {
        bottom: calc(6px + env(safe-area-inset-bottom));
        width: calc(100% - 12px);
        padding: 4px;
        border-radius: 20px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-mobile-nav-list {
        gap: 2px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-mobile-nav-link {
        padding-inline: 2px;
        border-radius: 15px;
    }

    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-mobile-nav-label {
        font-size: 9px;
    }

    .cosmetics-page.cosmetics-product-page .cosmetics-product,
    .cosmetics-page.cosmetics-cart-page .cosmetics-cart,
    .cosmetics-page.cosmetics-checkout-page .cosmetics-checkout,
    .cosmetics-page.cosmetics-delivery-address-page .cosmetics-address,
    .cosmetics-page.cosmetics-account-page .cosmetics-account,
    .cosmetics-page.cosmetics-payment-result-page .cosmetics-payment-result {
        padding-bottom: 32px;
    }
}

/* End canonical cosmetics mobile navigation */

/* Canonical cosmetics breadcrumb, heading and pagination behavior */
@media only screen and (max-width: 767px) {
    .cosmetics-page :is(
        .cosmetics-product-breadcrumb,
        .cosmetics-checkout-breadcrumb,
        .cosmetics-address-breadcrumb,
        .cosmetics-payment-result-breadcrumb,
        .cosmetics-cart-heading > nav
    ) {
        padding: 0;
        overflow: visible;
    }

    .cosmetics-page .cosmetics-breadcrumb {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .cosmetics-page .cosmetics-product-breadcrumb .breadcrumb {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .cosmetics-page .cosmetics-breadcrumb .breadcrumb-item {
        min-width: 0;
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cosmetics-page .cosmetics-breadcrumb .breadcrumb-item:first-child {
        flex: 0 0 auto;
    }

    .cosmetics-page .cosmetics-breadcrumb .breadcrumb-item:not(:first-child):not(:last-child) {
        max-width: 42%;
    }

    .cosmetics-page .cosmetics-breadcrumb .breadcrumb-item:last-child {
        flex: 1 1 0;
    }

    .cosmetics-page .cosmetics-breadcrumb .breadcrumb-item a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cosmetics-page :is(
        .cosmetics-pagination,
        .cosmetics-blog-pagination,
        .cosmetics-account-order-pagination
    ) {
        overflow: visible;
        padding-bottom: 0;
    }

    .cosmetics-page :is(
        .cosmetics-pagination > ul,
        .cosmetics-blog-pagination .pagination,
        .cosmetics-account-order-pagination
    ) {
        width: 100%;
        min-width: 0;
        flex-wrap: wrap;
        margin-inline: 0;
    }

    .cosmetics-page .cosmetics-blog-pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        padding: 7px 10px;
    }
}

@media only screen and (max-width: 430px) {
    .cosmetics-page .cosmetics-breadcrumb {
        padding: 9px 11px;
        font-size: 11px;
    }

    .cosmetics-page .cosmetics-breadcrumb .breadcrumb-item:not(:first-child):not(:last-child) {
        max-width: 36%;
    }

    .cosmetics-page :is(
        .cosmetics-pagination > ul,
        .cosmetics-blog-pagination .pagination,
        .cosmetics-account-order-pagination
    ) {
        gap: 5px;
        padding: 6px;
    }
}
@media only screen and (max-width: 991px) {

    body:is(.cosmetics-homepage, .cosmetics-page) {
        padding-bottom: calc(
            var(--cosmetics-mobile-nav-clearance) +
            env(safe-area-inset-bottom)
        );
    }

    /*
     * قبلاً فاصله فقط روی فوتر بود؛
     * حالا کل صفحه فاصله دارد، پس فوتر دوباره فاصله اضافه نکند.
     */
    body:is(.cosmetics-homepage, .cosmetics-page) .cosmetics-footer {
        padding-bottom: 0;
    }

    /*
     * جلوگیری از قرار گرفتن آخرین فیلد و دکمه فیلتر
     * زیر منوی پایین موبایل
     */
    body:is(.cosmetics-homepage, .cosmetics-page)
    .cosmetics-filter-panel .offcanvas-body {
        padding-bottom: calc(
            var(--cosmetics-mobile-nav-clearance) +
            24px +
            env(safe-area-inset-bottom)
        );
    }
}
/* End canonical cosmetics breadcrumb, heading and pagination behavior */

/* =========================================================
   Cosmetics Home - Timed Offers Responsive
========================================================= */

@media only screen and (max-width: 1199px) {

    /*
     * زیر 1200 پوستر بالا میاد
     * محصولات زمان‌دار زیرش تمام عرض
     */
    .cosmetics-homepage .timed-products-column {
        width: 100%;
    }


    .cosmetics-homepage .timed-products-swiper {
        height: auto;
    }


    .cosmetics-homepage
    .timed-products-swiper
    .swiper-wrapper {
        align-items: stretch;
    }


    .cosmetics-homepage
    .timed-products-swiper
    .swiper-slide,
    .cosmetics-homepage
    .timed-offer-link,
    .cosmetics-homepage
    .timed-offer-card {
        height: 100%;
    }


    .cosmetics-homepage .timed-offer-card {
        min-height: 330px;
    }


    .cosmetics-homepage .timed-offer-media {
        min-height: 120px;

        flex-basis: 135px;
    }

}
@media only screen and (max-width: 575px) {

    .cosmetics-homepage
    .main-slider > .container-fluid > .row {
        --bs-gutter-y: 0.75rem;
    }


    .cosmetics-homepage .timed-products-swiper {
        padding: 0;
    }


    /* کارت کوچکتر */
    .cosmetics-homepage .timed-offer-card {
        min-height: 282px;

        padding: 8px;

        border-radius: 14px;
    }


    /* تایمر */
    .cosmetics-homepage .timed-offer-head {
        gap: 6px;
    }


    .cosmetics-homepage .timed-offer-discount {
        min-height: 23px;

        padding: 3px 7px;

        font-size: 9px;
    }


    .cosmetics-homepage .timed-offer-countdown {
        gap: 3px;
    }


    .cosmetics-homepage .timed-offer-time {
        gap: 3px;
    }


    .cosmetics-homepage .timed-offer-time b {
        height: 29px;

        padding: 0 1px;

        border-radius: 8px;

        font-size: 10px;
    }


    .cosmetics-homepage .timed-offer-time small {
        font-size: 7px;
    }


    /* عکس کوچکتر */
    .cosmetics-homepage .timed-offer-media {
        min-height: 82px;

        flex: 1 1 96px;

        margin: 5px 0 6px;
    }


    .cosmetics-homepage .timed-offer-media img {
        max-height: 100px;
    }


    /* عنوان فقط دو خط */
    .cosmetics-homepage .timed-offer-title {
        height: calc(1.7em * 2);
        min-height: calc(1.7em * 2);
        max-height: calc(1.7em * 2);

        font-size: 10.5px;
        line-height: 1.7;

        -webkit-line-clamp: 2;
    }


    /* قیمت‌ها */
    .cosmetics-homepage .timed-offer-prices {
        align-items: flex-start;

        flex-direction: column;

        gap: 1px;

        margin-top: 6px;
        padding-top: 6px;
    }


    .cosmetics-homepage .timed-offer-prices strong {
        font-size: 10.5px;
    }


    .cosmetics-homepage .timed-offer-prices del {
        max-width: 100%;

        font-size: 8px;
    }


    .cosmetics-homepage
    .timed-offer-prices strong small,
    .cosmetics-homepage
    .timed-offer-prices del small {
        font-size: 7px;
    }

}
@media only screen and (max-width: 575px) {

    .cosmetics-homepage
    .main-slider > .container-fluid > .row {
        --bs-gutter-y: 0.75rem;
    }


    .cosmetics-homepage .timed-products-swiper {
        padding: 0;
    }


    /* کارت کوچکتر */
    .cosmetics-homepage .timed-offer-card {
        min-height: 282px;

        padding: 8px;

        border-radius: 14px;
    }


    /* تایمر */
    .cosmetics-homepage .timed-offer-head {
        gap: 6px;
    }


    .cosmetics-homepage .timed-offer-discount {
        min-height: 23px;

        padding: 3px 7px;

        font-size: 9px;
    }


    .cosmetics-homepage .timed-offer-countdown {
        gap: 3px;
    }


    .cosmetics-homepage .timed-offer-time {
        gap: 3px;
    }


    .cosmetics-homepage .timed-offer-time b {
        width: 30px;
        height: 30px;

        margin: 0 auto;
        padding: 0;

        border-radius: 8px;

        font-size: 10px;

        aspect-ratio: 1 / 1;
    }

    .cosmetics-homepage .timed-offer-time small {
        font-size: 7px;
    }


    /* عکس کوچکتر */
    .cosmetics-homepage .timed-offer-media {
        min-height: 82px;

        flex: 1 1 96px;

        margin: 5px 0 6px;
    }


    .cosmetics-homepage .timed-offer-media img {
        max-height: 100px;
    }


    /* عنوان فقط دو خط */
    .cosmetics-homepage .timed-offer-title {
        height: calc(1.7em * 2);
        min-height: calc(1.7em * 2);
        max-height: calc(1.7em * 2);

        font-size: 10.5px;
        line-height: 1.7;

        -webkit-line-clamp: 2;
    }


    /* قیمت‌ها */
    .cosmetics-homepage .timed-offer-prices {
        align-items: flex-start;

        flex-direction: column;

        gap: 1px;

        margin-top: 6px;
        padding-top: 6px;
    }


    .cosmetics-homepage .timed-offer-prices strong {
        font-size: 10.5px;
    }


    .cosmetics-homepage .timed-offer-prices del {
        max-width: 100%;

        font-size: 8px;
    }


    .cosmetics-homepage
    .timed-offer-prices strong small,
    .cosmetics-homepage
    .timed-offer-prices del small {
        font-size: 7px;
    }

}


/* =========================================================
   Timed Products - Auto Slide Timer Responsive
========================================================= */

@media only screen and (max-width: 575px) {

    /*
     * نوار حرکت بالای کارت
     */
    .cosmetics-homepage .timed-slide-progress {
        height: 3px;
    }


    /*
     * تخفیف + تایمر رفتن به محصول بعدی
     */
    .cosmetics-homepage .timed-offer-meta-row {
        gap: 5px;
    }


    /*
     * کل بخش تایمر کوچک
     */
    .cosmetics-homepage .timed-slide-switch {
        gap: 4px;
    }


    /*
     * حلقه روی موبایل کوچکتر
     */
    .cosmetics-homepage .timed-slide-switch-ring {
        width: 30px;
        height: 30px;
    }


    /*
     * ضخامت فضای سفید داخل حلقه
     */
    .cosmetics-homepage .timed-slide-switch-ring::before {
        inset: 3px;
    }


    /*
     * عدد 5 4 3 2 1
     */
    .cosmetics-homepage .timed-slide-switch-ring b {
        font-size: 9px;
    }


    /*
     * نوشته بعدی
     */
    .cosmetics-homepage .timed-slide-switch-label {
        font-size: 7px;
    }

}
/* ==================================================
   PRODUCT IMAGE RESPONSIVE FIX
================================================== */

@media only screen and (max-width: 1199px) {

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-media {
        height: 205px;
        min-height: 205px;
        flex-basis: 205px;
        padding: 18px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-media img {
        max-width: 84%;
        max-height: 168px;
    }
}


@media only screen and (max-width: 767px) {

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-media {
        height: 175px;
        min-height: 175px;
        flex-basis: 175px;
        padding: 12px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-media img {
        max-width: 88%;
        max-height: 145px;
    }
}


@media only screen and (max-width: 430px) {

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-media {
        height: 155px;
        min-height: 155px;
        flex-basis: 155px;
        padding: 10px;
    }

    :is(.cosmetics-category-page, .cosmetics-search-page) .cosmetics-product-media img {
        max-width: 90%;
        max-height: 130px;
    }
}