.container{
    max-width: 1335px;
    padding: 0 16px;
    margin: 0 auto;
}
@keyframes fsb-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.75); }
}
@keyframes badge-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes wishlist-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
body{
    &.flash{
        header {
            .header__row--top{
                background:linear-gradient(90deg, #FFF7ED 0%, #F058221A 100%);
            }
        }
    }
    &.thousand{
        header {
            .header__row--top{
                background:linear-gradient(90deg, #FAF5FF 0%, #8948FF1A 100%);
            }
        }
    }
    &.size-chart-pop-open {
        overflow: hidden;
        header{
            z-index:0 !important;
        }
    }
}
header {
    header-component {
        .header__row--top {
            .header__columns {
                @media screen and (max-width: 749px) {
                    grid-template-columns: 50px 0fr 1fr !important;
                    grid-template-rows: auto auto !important;
                    gap: 0;
                }

                --header-left: 2fr;
                --header-center: 4.5fr;
                --header-right: 2fr;

                .header__column--left {
                    @media screen and (max-width: 749px) {
                        grid-column: 1 !important;
                        grid-row: 1 !important;
                    }

                    .header-logo__image-container {
                        margin-right: auto;
                    }
                }

                .header__column--right {
                    @media screen and (max-width: 749px) {
                        grid-column: 3 !important;
                        grid-row: 1 !important;
                    }
                }

                .header__column--center {
                    @media screen and (max-width: 749px) {
                        display: block !important;
                        grid-column: 1 / 6 !important;
                        grid-row: 2 !important;
                        width: 100% !important;
                        padding: 0 16px;
                    }
                }

                predictive-search-component {
                    z-index:1;
                    background: transparent;
                        @media screen and (max-width: 749px) {
                            position:unset;
                        }
                    form.predictive-search-form {
                        background-color: #F3F4F6;
                        border: .9px solid #F3F4F6;
                        border-radius: 25px;
                        padding-right: 16px;

                        @media screen and (max-width: 749px) {
                            background-color: #fff;
                            position:unset;
                        }

                        * {
                            color: #0A0A0A80;
                        }

                        .predictive-search-form__header {
                            background: transparent;

                            .predictive-search-form__header-inner {
                                background: transparent;

                                .search-input {
                                    @media screen and (max-width: 749px) {
                                        padding: 0 0 0 20px;
                                    }
                                }

                                .svg-wrapper.predictive-search__icon {
                                    @media screen and (max-width: 749px) {
                                        left: 7px;
                                    }
                                }
                            }

                            .predictive-sumbit-btn {
                                background-color: #F05822;
                                color: #fff;
                                border: 1px solid;
                                box-shadow: none;
                                padding: 6px 15px;
                                font-family: "Inter";
                                font-weight: 500;
                                font-size: 14px;
                                line-height: 20px;

                                @media screen and (max-width: 749px) {
                                    display: none;
                                }
                            }
                        }
                        .predictive-search-form__footer{
                            padding:10px 0 12px;
                            background: #fff;
                            position: unset;
                            .predictive-search__search-button{
                                    box-shadow: 0 0 0 1px #f05822;
                                    color:#f05822;
                                    padding:10px 15px;
                                &:hover{
                                    color:#fff;
                                }
                            }
                        }
                    }
                }
            }
        }

        header-actions {
            gap: 24px;
            align-items: center;

            @media screen and (max-width: 990px) {
                gap: 6px;
            }

            span.icon-text {
                font-family: 'Inter';
                font-weight: 500;
                font-size: 14px;
                letter-spacing: 0px;

                @media screen and (max-width: 990px) {
                    display: none !important;
                }
            }

            .cart-bubble__text {
                color: #fff;
                font-size: 10px;
                line-height: 15px;
                letter-spacing: 0px;
            }

            cart-drawer-component cart-icon span.svg-wrapper {
                @media screen and (min-width: 991px) {
                    width: fit-content !important;
                }
            }

            span[slot="signed-out-avatar"],
            wishlist a,
            cart-icon {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            wishlist {
                display: flex;

                @media screen and (max-width: 990px) {
                    width: 20px;
                }
            }
        }

        .header__row--bottom {
            .header__columns {
                padding-left: 24px;

                header-menu {

                    .menu-list__link:hover,
                    .menu-list__link--active {
                        span.menu-list__link-title {
                            color: #F05822;
                        }
                    }

                    .menu-list__link.Flash-Sale {
                        span.menu-list__link-title {
                            display: flex;
                            align-items: center;

                            &:after {
                                content: "LIVE";
                                font-family: 'Inter';
                                font-weight: 700;
                                font-size: 9px;
                                letter-spacing: 0.45px;
                                padding: 1px 6px;
                                background-color: #F05822;
                                color: #fff;
                                border-radius: 5px;
                                margin-left: 4px;
                            }
                        }
                    }

                    .menu-list__link {
                        &.has-child {
                            position: relative;
                            padding-right: 8px;

                            &:after {
                                content: "";
                                display: block;
                                width: 20px;
                                height: 10px !important;
                                right: 0;
                                left: unset;
                                background-image: url('/cdn/shop/files/down-Icon.svg');
                                background-repeat: no-repeat;
                                background-position: center;
                            }
                        }
                    }
                    .mega-menu__link--parent.mega-menu__link {
                        font-family: var(--font-body--family, sans-serif);
                        font-weight: 600;
                        font-size: 14px;
                        line-height: 100%;
                        letter-spacing: 0%;
                        color: #1A1A1A;
                    }
                    .mega-menu__link:not(.mega-menu__link--parent) {
                        font-weight: 400;
                        font-size: 12px;
                        letter-spacing: 0%;
                        color: #64748B;
                    }
                }
            }
        }
    }
    header-drawer {

    div[ref="menuDrawer"].menu-drawer {
        max-width: 375px;
    }
    .menu-drawer,
        .menu-drawer.menu-drawer--has-submenu-opened {
        overflow-y: auto !important;  
        overflow-x: hidden !important;
        height: 100dvh;
        }

    .hdf-menu {
        list-style: none;
        margin: 0;
        padding: 0;

        .link-item {
        border-bottom: none;

        &:last-child {
            border-bottom: 1px solid #f1f1f1;
        }

        a {
            display: block;
            padding: 16px 20px;
            font-size: 15px;
            font-weight: 400;
            color: #1a1a1a;
            text-decoration: none;
            transition: opacity 0.18s ease;

            &:hover,
            &:active {
            opacity: 0.65;
            }
        }
        }
    }

    .app-link {
        padding: 16px 20px;

        img {
        max-width: 117px;
        }
    }

    .menu-drawer__navigation {
        margin-block-start: 30px;

        li.flash-sale {
        > a.menu-drawer__menu-item-text {
            color: #f05822;
        }

        #HeaderDrawer-flash-sale {
            display: flex;
            align-items: center;

            &::after {
            content: "LIVE NOW";
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: 0.45px;
            padding: 4px 8px;
            background-color: #f05822;
            color: #fff;
            border-radius: 5px;
            margin-left: 4px;
            }
        }
        }
    }

    .menu-drawer__menu-item-text {
        font-weight: 600;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #1a1a1a;
    }

    .menu-drawer__menu .menu-drawer__list-item {
        min-height: 35px;
    }

    .menu-drawer__menu-item > .svg-wrapper {
        padding-block: 5px;
    }

    @media screen and (max-width: 749px) {

        .menu-drawer__submenu {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow-y: visible !important;
        background-color: transparent !important;
        z-index: auto !important;
        transition: none !important;
        }

        .menu-drawer__nav-buttons {
        display: none !important;
        }

        .icon-caret--forward svg {
        transition: transform 0.25s ease;
        }

        .menu-drawer__menu-container[open] > summary .icon-caret--forward svg,
        details[open] > summary .icon-caret--forward svg {
        transform: rotate(0deg);
        }

        .icon-plus svg {
        transition: transform 0.25s ease;
        }

        details[open] > summary .icon-plus svg {
        transform: rotate(0deg);
        }

        .menu-drawer__inner-submenu {
        margin-top: 0 !important;
        height: auto !important;
        overflow-y: visible !important;
        }

        .menu-drawer__menu-container {
        width: 100%;
        }

        details:not([open]) > .menu-drawer__submenu {
        display: none !important;
        }

        details[open] > .menu-drawer__submenu {
        display: flex !important;
        flex-direction: column;
        }

        .menu-drawer__menu--grandchildlist,
        .menu-drawer__menu--grandchildlist.details-content {
        animation: none !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: none !important;
        }

        details:not([open]) > .menu-drawer__menu--grandchildlist,
        details:not([open]) > .details-content {
        display: none !important;
        }

        details[open] > .menu-drawer__menu--grandchildlist,
        details[open] > .details-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        }

        .menu-drawer__menu-item--active {
        color: #f05822 !important;
        font-weight: 600;
        }

        .menu-drawer--has-submenu-opened ~ .menu-drawer__backdrop {
        display: none !important;
        }

        .menu-drawer__submenu,
        .menu-drawer__menu--childlist,
        .menu-drawer__menu--grandchildlist {
        animation: none !important;
        }

        .menu-drawer__submenu .menu-drawer__list-item--divider {
        border-block-end: 1px solid var(--color-border);
        }
    }

    .menu-drawer__menu--childlist {
        background-color: #f9fafb;
        margin-inline: 16px;
        max-height: fit-content;
        padding-block: 16px;
        border-radius: 16px;

        .menu-drawer__menu-item > .svg-wrapper {
        padding-block: 9px;
        }

        .menu-drawer__list-item {
        min-height: 24px;
        }

        @media screen and (max-width: 749px) {
        padding-inline-start: 16px !important;
        margin-left: 12px;
        margin-bottom: 8px;
        }
    }

    .menu-drawer__menu--grandchildlist {

        .menu-drawer__menu-item-text {
        font-size: 12px;
        opacity: 0.7;
        }

        @media screen and (max-width: 749px) {
        margin-left: 8px;
        margin-bottom: 4px;
        }
    }

    .menu-drawer__list-item--divider {
        border-block-end: 1px solid var(--color-border);
    }

    .menu-drawer__menu-item--parent {
        font-size: 1.35rem;
        padding-block: 6px;
        justify-content: space-between;
    }

    .menu-drawer__menu-item--child {
        font-size: 1.25rem;
        padding-block: 5px;
        color: rgba(26, 26, 26, 0.7);

        &:hover {
        color: #1a1a1a;
        }
    }
    }
}
.wishlist-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color:  #111;
    position: relative;
    transition: color 0.18s ease;
    &:hover { 
        color: #F05822; 
    }
    .wishlist-icon__wrap {
        position: relative;
        display: inline-flex;
        .wishlist-icon__svg {
            width: 24px;
            height: 24px;
            display: block;
        }   
    }
    .wishlist-icon__badge {
        position: absolute;
        top: -6px;
        right: -7px;
        width: 15px;
        height: 15px;
        border-radius: 999px;
        background: #F05822;
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        font-family: var(--font-body--family, sans-serif);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3px;
        line-height: 1;
        pointer-events: none;
        animation: badge-pop 0.28s ease;
    }
}
.drawer-top-brands {
  padding: 16px 20px 4px;
  .drawer-top-brands__heading {
    font-size: 17px;
    font-weight: 700;
    color: #111;
    margin: 0 0 12px;
    line-height: 1.2;
  }

  .drawer-top-brands__panel {
    background-color: #f4f5f7;
    border-radius: 16px;
    padding: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .drawer-top-brands__grid {
      display: grid;
      grid-template-rows: repeat(2, auto);
      grid-auto-flow: column;
      grid-auto-columns: 90px;
      column-gap: 14px;
      row-gap: 18px;
      width: max-content;

      .drawer-top-brands__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 90px;
        text-decoration: none;

        .drawer-top-brands__image-wrap {
          display: block;
          width: 90px;
          height: 90px;
          border-radius: 24px;
          overflow: hidden;
          background-color: #fff;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }

          .drawer-top-brands__placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ececec;

            svg {
              width: 40%;
              height: 40%;
              opacity: 0.35;
            }
          }
        }

        .drawer-top-brands__title {
          font-size: 12px;
          font-weight: 500;
          color: #222;
          text-align: center;
          line-height: 1.3;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 100%;
        }
      }
    }
  }

  .top-brands-page {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 16px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        color: #F05822;
        gap:8px;
        svg{
        transform: rotate(-90deg);
        }

    &:hover {
        gap:10px;
      text-decoration: underline;
    }
  }
}
footer{
    .footer-content{
        @media screen and (max-width: 750px) {
            gap:24px;
        }
        .menu__heading, .email-signup__heading{
            font-size: 18px !important;
            color: #fff !important;
            line-height:28px !important;
            padding-bottom:6px ;
        }
        .email-signup__description {
            font-family: Inter;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0px;
            padding: 10px 0 16px;
            max-width: 230px;
        }
        .social-links{
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
            padding: 24px 0;
                @media screen and (max-width: 750px) {
                    gap: 16px;
                }
            svg{
                @media screen and (max-width: 750px) {
                    width:28px;
                }
            }
        }
        .group-block{
            .image-block{
            max-width:90px;
            width:100%;
                @media screen and (max-width: 750px) {
                    max-width:74px;
                }
            }
        }
        .email-signup-block{
            #contact_form{
                .email-signup__input-group{
                    border-width: 0;
                    max-width:280px;
                    input.email-signup__input{
                        padding: 10px 0 10px 16px;
                        outline-color:transparent;
                        background-color: #1E2939;
                        border-radius: 8px;
                    }
                    .email-signup__button{
                        background: linear-gradient(90deg, #8948FF 0%, #8F4FF2 7.14%, #9655E6 14.29%, #9C59D9 21.43%, #A35DCC 28.57%, #AB60C0 35.71%, #B261B2 42.86%, #B963A5 50%, #C16397 57.14%, #C96389 64.29%, #D0627A 71.43%, #D8616A 78.57%, #E05E58 85.71%, #E85C42 92.86%, #F05822 100%);
                        color: #fff;
                        font-family: Inter;
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 24px;
                        border-radius: 0 8px 8px  0;
                        margin: 0;
                        padding: 6px 15px;
                    }
                }
            }
        }
    }
    .utilities{
        .payment-icons__list-cstm{
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            list-style: none;
        }
    }
}
.top-categories {
    .top-categories__header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        .top-categories__heading {
            font-weight: 700;
            margin: 0;
            line-height: 1.2;
        }
        .top-categories__nav {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
            .top-categories__nav-btn {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                border: 1.5px solid #e5e5e5;
                background: #fff;
                color: #111;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: background 0.18s, border-color 0.18s;
                flex-shrink: 0;
                &:hover {
                    background: #f5f5f5;
                    border-color: #ccc;
                }
                &:disabled {
                    opacity: 0.35;
                    cursor: not-allowed;
                }
                svg {
                    width: 16px;
                    height: 16px;
                }
            }
        }
    }
    .top-categories__track-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding:10px 0;
        scrollbar-width: none;   
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
            display: none;
        }
        .top-categories__track {
            display: flex;
            padding-bottom: 8px;
            width: max-content;
            transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            will-change: transform;
            .top-categories__card {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                max-width: 120px;
                width: 100%;
                text-decoration: none;
                cursor: pointer;
                flex-shrink: 0;
                transition: transform 0.2s ease;
                @media (max-width: 768px) {
                    max-width:90px;
                }
                &:hover {
                    transform: translateY(-3px);
                    .top-categories__icon-wrap {
                        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
                    }
                }
                &.same-col .top-categories__icon-wrap {
                    box-shadow: 0px 6px 20px -4px #ff4d14;
                    border: 1px solid #F05822;
                }
                .top-categories__icon-wrap {
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    transition: box-shadow 0.2s ease;
                    flex-shrink: 0;
                    img {
                        width: 80px;
                        height: 80px;
                        object-fit: contain;
                        display: block;
                        @media (max-width: 768px) {
                            width: 60px;
                            height: 60px;
                        }
                    }
                }
                .top-categories__title {
                    font-weight: 500;
                    text-align: center;
                    line-height: 1.2;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 100%;
                }
            }
        }
    }
}
.banner-slide-wrapper.cstm{
    padding:20px 0;
    @media screen and (max-width: 750px) {
        padding:12px 0;
    }
    slideshow-component{
        slideshow-slides{
            border-radius: 25px;
        }
        slideshow-controls{
            mix-blend-mode: unset;
                @media screen and (max-width: 750px) {
                    display:none;
                }
            ol{
                li{
                    button{
                        &:after{
                            width:10px;
                            height:10px;
                            box-shadow: none;
                            background-color: #00000082;
                        }
                        &[aria-selected="true"]{
                            &:after{
                                background-color:#F05822;
                            }
                        }
                    }
                }
            }
        }
    }
}
.shop-by-brand {
    .shop-by-brand__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        @media (max-width: 600px) {
            display:none;
        }
        .shop-by-brand__heading {
            font-weight: 700;
            margin: 0;
            line-height: 1.2;
        }
        .shop-by-brand__header-right {
            display: flex;
            align-items: center;
            gap: 12px;
            .shop-by-brand__view-all {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                font-weight: 500;
                text-decoration: none;
                white-space: nowrap;
                transition: opacity 0.2s ease;
                svg {
                    width: 16px;
                    height: 16px;
                    flex-shrink: 0;
                }
                &:hover {
                    opacity: 0.75;
                }
            }
            .shop-by-brand__nav {
                display: flex;
                gap: 8px;
                .shop-by-brand__nav-btn {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    border: 1.5px solid #e5e5e5;
                    background: #fff;
                    color: #111;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: background 0.18s, border-color 0.18s;
                    svg {
                        width: 16px;
                        height: 16px;
                    }
                    &:hover:not(:disabled) {
                        background: #f5f5f5;
                        border-color: #ccc;
                    }
                    &:disabled {
                        opacity: 0.35;
                        cursor: not-allowed;
                    }
                }
            }
        }
    }
    .shop-by-brand__track-wrapper::-webkit-scrollbar {
        display: none;
    }
    .shop-by-brand__track-wrapper {
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .shop-by-brand__track {
        display: flex;
        padding: 8px 0;
        transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
        .shop-by-brand__card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            cursor: pointer;
            flex-shrink: 0;
            transition: transform 0.2s ease;
            &:hover {
                transform: translateY(-3px);
            }
            &:hover .shop-by-brand__image-wrap {
                box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
            }
            .shop-by-brand__image-wrap {
                overflow: hidden;
                transition: box-shadow 0.2s ease;
                flex-shrink: 0;
                 img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
            }
            .shop-by-brand__title {
                font-weight: 500;
                text-align: center;
                line-height: 1.3;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }
            .shop-by-brand__placeholder {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #f0f0f0;
                svg {
                    width: 40%;
                    height: 40%;
                    opacity: 0.3;
                }
            }
        }
    }
}
.cstm-c-tabs-section{
    .tcd-tabs-outer {
        .tcd-tabs {
            display: flex;
            gap: 8px;
            padding-top: 15px;
            padding-bottom: 15px;
            overflow-x: scroll;
            scrollbar-width: none;   
            -ms-overflow-style: none;
            &::-webkit-scrollbar {
                display: none;
            }
            @media screen and (max-width: 750px) {
                gap: 4px;
            }
            .tcd-tab {
                display: inline-flex;
                align-items: center;
                padding: 9px 16px;
                font-size: 14px;
                font-weight: 500;
                font-family: var(--font-body--family, inherit);
                border-radius: 999px;
                background: #FFF7ED;
                cursor: pointer;
                transition: background 0.18s, color 0.18s, border-color 0.18s;
                white-space: nowrap;
                @media screen and (max-width: 750px) {
                    font-size: 10px;
                    padding: 6px 24px;
                }
            }
        }
    }
    .tcd-panel {
        display: none;
        &.is-active {
            display: block;
        }
        .tcd-grid {
            display: grid;
            @media (max-width: 900px) {
                grid-template-columns: repeat(2, 1fr);
            }
            @media (max-width: 480px) {
                gap: 10px;
            }
        }
         .cstm-load-more-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            padding: 20px 0;
                .cstm-load-more-btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 8px;
                    padding: 11px 32px;
                    border-radius: 999px;
                    background: transparent;
                    font-size: 14px;
                    font-weight: 600;
                    font-family: var(--font-body--family, inherit);
                    cursor: pointer;
                    transition: background 0.18s, color 0.18s;
                    &.is-loading {
                        opacity: 0.7;
                        pointer-events: none;
                        .cstm-lm-spinner { 
                        display: flex !important; 
                        animation: cstm-spin 0.7s linear infinite; 
                        }
                        .cstm-lm-text { 
                            display: none; 
                        }
                    } 
                }
                .cstm-lm-count {
                    font-size: 13px;
                    color: #999;
                    font-family: var(--font-body--family, inherit);
                    margin: 0;
                }
                @keyframes cstm-spin { to { transform: rotate(360deg); } }
            }
    }
    .tcd-footer {
        margin: 28px 0;
        text-align: center;
        .tcd-view-all {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 28px;
            font-size: 14px;
            font-weight: 600;
            font-family: var(--font-body--family, inherit);
            line-height: normal;
            border-radius: 999px;
            text-decoration: none;
            transition: background 0.18s, color 0.18s;
        }
    }
}
.cstm-p-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border-radius: 8px;
    background: #ffffff;
    &:hover {
        box-shadow: 0 8px 28px rgba(0,0,0,0.1);
        transform: translateY(-2px);
        .cstm-p-card__media img {
            transform: scale(1.04);
        }
    }
    .cstm-p-card__media {
        position: relative;
        width: 100%;
        padding-block-end: 100%;
        overflow: hidden;
        background: #f5f5f5;
        flex-shrink: 0;
        aspect-ratio: 79 / 100;
        img, .cpc-placeholder {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.35s ease;
        }
        .cpc-placeholder {
            aspect-ratio: 79 / 100;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ebebeb;
            svg {
                width: 40%;
                height: 40%;
                opacity: 0.25;
            }
        }
    }
    .cstm-p-card__body {
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1;
        .cpc-badge{
            position:unset;
            &.flash{
                position: unset;
                width: fit-content;
                background: linear-gradient(90deg, #F59E0B 20%, #F9C56C 100%), linear-gradient(90deg, #F05822 0%, #FF8904 100%);
            }
        }
        .cstm-p-card__vandor {
            font-size: 12px;
            font-weight: bold;
            margin:0;
        }
        .cstm-p-card__title {
            font-size: 14px;
            font-weight: 400;
            font-family: var(--font-body--family, inherit);
            line-height: 100%;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 0;
            color:#111111;
        }
        .cpc-stars {
            display: flex;
            align-items: center;
            gap: 3px;
            .cpc-stars__icons {
                display: flex;
                gap: 1px;
                svg {
                    fill: #f5a623;
                    color: #f5a623;
                    width: 13px;
                    height: 13px;
                    flex-shrink: 0;
                }
            }
            .cpc-stars__count {
                font-size: 12px;
                color: #888;
                font-family: var(--font-body--family, inherit);
            }
        }
        .cpc-price-row {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 6px;
            .cpc-price--sale {
                font-size: 18px;
                font-weight: 700;
                font-family: var(--font-body--family, inherit);
                color:#1c1c40;
            }
            .cpc-price--compare {
                font-size: 12px;
                color: #999;
                text-decoration: line-through;
                font-family: var(--font-body--family, inherit);
            }
            .cpc-price--off {
                font-size: 12px;
                font-weight: 600;
                font-family: var(--font-body--family, inherit);
                color:#f05822;
            }
        }

    }
    .cpc-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 3px 8px;
        font-size: 11px;
        font-weight: 700;
        border-radius: 4px;
        z-index: 2;
        line-height: 1.4;
        letter-spacing: 0.3px;
        background: #f05822;
        color: #ffffff;
        &.thousand {
            background-color:#8948FF;
        }
        &.trend {
            background-color: #0A0A0A;
            top: 0;
            right: 0;
            left: unset;
            padding: 4px 8px;
           border-radius: 0 8px 0 8px;
            svg{
                width: 40px;
                height: 15px;
                
            }
        }
        svg {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
        }
    }
}
.flash-sale-banner{
    .fsb {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        text-align: center;
        @media screen and (max-width: 750px) {
            padding:30px 10px;
        }
        .fsb__live {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 14px;
            border-radius: 999px;
            background: rgba(255,255,255,0.18);
            backdrop-filter: blur(6px);
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            font-family: var(--font-body--family, sans-serif);
            border: 1px solid rgba(255,255,255,0.3);

            .fsb__dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #22c55e;
                flex-shrink: 0;
                transition: background 0.4s;
                &.fsb__dot--ended { 
                    background: #ef4444;
                    animation: none !important; 
                }
                &:not(.fsb__dot--ended) { 
                    animation: fsb-pulse 1.4s ease infinite; 
                }
            }
        }
        .fsb__heading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: clamp(26px, 5vw, 48px);
            color: #ffffff;
            font-family: var(--font-heading--family, sans-serif);
            font-weight: 700;
            margin: 0;
            line-height: 48px;
            svg {
                flex-shrink: 0;
            }
        }
        .fsb__timer-wrap {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 22px;
            margin-top:26px;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 4px 18px rgba(0,0,0,0.12);
            @media screen and (max-width: 750px) {
                margin-top:15px;
            }
            .fsb__timer-icon {
                width: 22px;
                height: 22px;
                flex-shrink: 0;
            }
            .fsb__timer-inner {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 1px;
                .fsb__sale-ends {
                    font-size: 12px;
                    font-weight: 500;
                    color: #999;
                    text-transform: uppercase;
                    letter-spacing: 0.5px;
                    font-family: var(--font-body--family, sans-serif);
                }   
                .fsb__countdown {
                    font-size: 20px;
                    font-weight: 700;
                    color: #F05822;
                    font-family: var(--font-heading--family, monospace);
                    letter-spacing: 1px;
                    line-height: 1;
                    min-width: 90px;
                    transition: color 0.3s;
                    &.fsb__countdown--ended {
                        color: #ef4444;
                        font-size: 16px;
                        letter-spacing: 0.5px;
                    }
                }
            }
        }
    }
}
.section-thousand-sale-banner{
    overflow: hidden;
    .tsb {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        @media screen and  (max-width: 600px) {
            flex-direction: column;
        }
        .tsb__left {
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex: 1;
            .tsb__badge {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 4px 12px;
                border-radius: 999px;
                border: 1.5px solid #FFFFFF4D;
                background: #ffffff24;
                color: #FFF;
                width: fit-content;
                font-family: var(--font-body--family, sans-serif);
                font-weight: 700;
                font-size: 12px;
                line-height: 16px;
                letter-spacing: 0.6px;
                text-transform: uppercase;
                 @media (max-width: 600px) {
                    margin:0 auto;
                }
                svg {
                    width: 13px;
                    height: 13px;
                    flex-shrink: 0;
                }
            }
             .tsb__heading {
                font-family: var(--font-heading--family, sans-serif) !important;
                font-weight: 700;
                line-height: 1.2;
                letter-spacing: 0px;
                margin: 0;
                br{
                    @media screen and (max-width: 600px) {
                        display:none;
                    }
                }
            }
        }
        .tsb__cards {
            display: flex;
            gap: 16px;
            flex-shrink: 0;
            @media screen and (max-width: 600px) {
                width: 100%;
                justify-content: center;
            }
            .tsb__card {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border-radius: 14px;
                background: rgba(255,255,255,0.12);
                border: 1.5px solid rgba(255,255,255,0.22);
                backdrop-filter: blur(8px);
                text-decoration: none;
                transition: background 0.2s ease, transform 0.2s ease;
                cursor: pointer;
                padding: 12px;
                text-align: center;
                .tsb__card-icon {
                    width: 28px;
                    height: 28px;
                    color: rgba(255,255,255,0.9);
                    flex-shrink: 0;
                }
                .tsb__card-label {
                    font-size: 12px;
                    font-weight: 600;
                    color: rgba(255,255,255,0.9);
                    font-family: var(--font-body--family, sans-serif);
                    line-height: 1.2;
                }
                &:hover {
                    background: rgba(255,255,255,0.22);
                    transform: translateY(-2px);
                }
            }
        }
    }
}
.brand-cards-section{
    .bc-section {
        .bc-tabs {
            display: flex;
            overflow-x: scroll;
            gap: 10px;
            padding: 18px 0;
        scrollbar-width: none;   
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
            display: none;
        }
            .bc-tab {
                display: inline-flex;
                align-items: center;
                padding: 7px 18px;
                font-size: 14px;
                font-weight: 500;
                font-family: var(--font-body--family, sans-serif);
                border-radius: 999px;
                background: transparent;
                cursor: pointer;
                transition: background 0.18s, color 0.18s, border-color 0.18s;
                white-space: nowrap;
                line-height: 1;
            }
        }
        .bc-grid {
            display: grid;
             @media (max-width: 750px) {
                grid-template-columns: repeat(2, 1fr);
            }
            .bc-card {
                overflow: hidden;
                text-decoration: none;
                color: inherit;
                display: flex;
                flex-direction: column;
                transition: box-shadow 0.22s ease, transform 0.22s ease;
                position: relative;
                &:hover {
                    box-shadow: 0 10px 30px rgba(0,0,0,0.11);
                    transform: translateY(-3px);
                    .bc-card__banner img { 
                        transform: scale(1.04); 
                    }
                    .bc-card__arrow {
                        opacity: 1 !important;
                        transform: scale(1) !important;
                    }
                }
                &[aria-hidden="true"] {
                    display: none;
                }
                .bc-card__banner {
                    position: relative;
                    width: 100%;
                    background: #f0f0f0;
                    flex-shrink: 0;
                    img {
                        position: absolute;
                        inset: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                        transition: transform 0.35s ease;
                    }
                    .bc-card__logo-wrap {
                        position: absolute;
                        left: 32px;
                        overflow: hidden;
                        background: #fff;
                        border: 4px solid #efefef;
                        box-shadow: 0 2px 8px rgba(0,0,0,0.10);
                        z-index: 3;
                        flex-shrink: 0;
                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }
                    .bc-card__arrow {
                        position: absolute;
                        top: 10px;
                        right: 10px;
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        z-index: 2;
                        opacity: 0;
                        transform: scale(0.7);
                        transition: opacity 0.2s, transform 0.2s;
                        svg {
                            width: 14px;
                            height: 14px;
                            color: #fff;
                        }
                    }
                }
                .bc-card__body {
                    display: flex;
                    flex-direction: column;
                    gap: 6px;
                    flex: 1;
                    @media (max-width: 900px) {
                        padding: 40px 12px 6px;
                    }
                    .bc-card__title {
                        font-weight: 700;
                        font-family: var(--font-body--family, sans-serif);
                        margin: 0;
                        line-height: 1.25;
                    }
                    .bc-card__desc {
                        font-size: 15px;
                        font-family: var(--font-body--family, sans-serif);
                        margin: 0;
                        line-height: 1.5;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }
                    .bc-card__tags {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 12px;
                        margin-block-start: 4px;
                        @media (max-width: 600px) {
                            gap: 6px;
                        }
                        .bc-card__tag {
                            display: inline-block;
                            padding: 4px 10px;
                            border-radius: 8px;
                            font-size: 10px;
                            font-weight: 700;
                            font-family: var(--font-body--family, sans-serif);
                            letter-spacing: 0.5px;
                            text-transform: uppercase;
                            line-height: 15px;
                        }
                    }
                }
            }
        }
    }
}
.brand-banner-section{
    .brnd-bnr {
        .container{
            @media (max-width: 600px) {
               padding:0;
            }
        }
        .brnd-bnr__hero {
            position: relative;
            width: 100%;
            overflow: hidden;
            background: #1a1a1a;
                 @media (max-width: 600px) {
                    min-height: 230px;
                    overflow: visible;
                }
            img.banner {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
            .brnd-bnr__overlay {
                position: absolute;
                inset: 0;
                z-index: 1;
                @media (max-width: 600px) {
                    display:none;
                }
            }
            .brnd-bnr__content {
                position: absolute;
                z-index: 2;
                display: flex;
                align-items: center;
                bottom: 40px;
                left: 60px;
                gap: 40px;
                 @media (max-width: 600px) {
                    bottom: unset;
                    top: 75%;
                    left: 30px;
                    gap: 12px; 
                    flex-direction: column;
                    align-items: start;
                }
                .brnd-bnr__logo {
                    overflow: hidden;
                    border: 3.7px solid#FFFFFF;
                    flex-shrink: 0;
                    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        scale: 1.2;
                    }
                }
                .brnd-bnr__text {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                     .brnd-bnr__title {
                        font-weight: 700;
                        font-family: var(--font-body--family, sans-serif);
                        margin: 0;
                        line-height: 1.2;
                        letter-spacing: -1.01px;
                        @media (max-width: 600px) {
                           color:#101828;
                        }
                    }
                    .brnd-bnr__sub {
                        font-weight: 500;
                        font-family: var(--font-body--family, sans-serif);
                        margin: 0;
                        line-height: 1.2;
                        @media (max-width: 600px) {
                            display:none;
                        }
                    }
                }
            }
        }
        .brnd-bnr__body {
            display: flex;
            flex-direction: column;
            gap: 12px;
            @media (max-width: 600px) {
                display:none;
            }
            .brnd-bnr__about-label {
                font-weight: 700;
                font-size: 15.75px;
                letter-spacing: 1.57px;
                text-transform: uppercase;
                font-family: var(--font-body--family, sans-serif);
            }
             .brnd-bnr__desc {
                font-family: var(--font-body--family, sans-serif);
                margin: 0;
                font-weight: 400;
                line-height: 1.6;
                letter-spacing: 0px;
            }
        }
    } 
}
  .cstm-breadcrumbs {
    padding-block: 16px;
    .cstm-breadcrumbs__list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
         .cstm-breadcrumbs__item {
            display: inline-flex;
            align-items: center;
            font-family: var(--font-body--family, sans-serif);
            font-weight: 400;
            font-size: 14px;
            line-height: 1;
            letter-spacing: 0px;
            @media (max-width: 480px) {
                font-size: 12px
            }
            .cstm-breadcrumbs__link {
                color: #6A7282;
                text-decoration: none;
                font-weight: 400;
                transition: color 0.15s;
                white-space: nowrap;
                &:hover {
                    color: #101828;
                }
            }
        }
        .cstm-breadcrumbs__current {
            font-family: var(--font-body--family, sans-serif);
            font-weight: 500;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0px;
            color: #101828;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 260px;
            @media (max-width: 480px) {
                max-width: 160px;
            }
        }
        .cstm-breadcrumbs__sep {
            display: inline-flex;
            align-items: center;
            margin-inline: 10px;
            color: #6A7282;
            flex-shrink: 0;
            svg {
                width: 14px;
                height: 14px;
                display: block;
            }
        }
    }
}
.pp-badges{
    display: flex;
    flex-direction: column;
    gap: 8px;
    .steal-deal-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 10px;
        background: linear-gradient(90deg, #AD46FF, #8948FF);
        color: #ffffff;
        font-family: var(--font-body--family, sans-serif);
        white-space: nowrap;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 0px;
    }
    .steal-deal-badge svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
     .fsb-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        border-radius: 8px;
        background: linear-gradient(135deg, #FF6900, #F05822);
        color: #ffffff;
        width: 100%;
        font-family: var(--font-body--family, sans-serif);
        font-weight: 700;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0px;
        svg {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }
        .fsb-badge__countdown {
            font-weight: 700;
            letter-spacing: 0.4px;
        }
        .fsb-badge--ended {
            background: linear-gradient(135deg, #71717A, #A1A1AA);
        }
    }
}
.low-stock-urgency {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #FEF9EC;
    border: 1.5px solid #F5C451;
    margin-block: 12px;
    .low-stock-urgency__icon {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #F5A623;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        svg {
            width: 16px;
            height: 16px;
            color: #ffffff;
        }
    }
    .low-stock-urgency__text{
        .low-stock-urgency__title {
            font-size: 14px;
            font-weight: 700;
            color: #92620A;
            font-family: var(--font-body--family, sans-serif);
            margin: 0;
            line-height: 1.4;
        }
        .low-stock-urgency__sub {
            font-size: 13px;
            font-weight: 400;
            color: #B8860B;
            font-family: var(--font-body--family, sans-serif);
            margin: 2px 0 0;
            line-height: 1.4;
        }
    }
    &.low-stock-urgency--out-of-stock{
        order-color: red;
        background: #dfa1a1;
        .low-stock-urgency__icon{
            background: #8a2e2e;
        }
        p{
         color:#8a2e2e !important;
        }
    }
}
.pp-details{
    .product-information__media{
        media-gallery{
            slideshow-container{
                position:relative;
                .pper-badge {
                    position: absolute;
                    background-color: #FF4D14;
                    color: #fff;
                    font-weight: 700;
                    font-size: 12.04px;
                    line-height: 18.82px;
                    letter-spacing: 0.25px;
                    padding: 4px 10px;
                    border-radius: 5px;
                    top: 14px;
                    left: 20px;
                    z-index: 9;
                }
                .new-ariv {
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    padding: 7px 8px;
                    border-radius: 12px;
                    background:#fff;
                    backdrop-filter: blur(6px);
                    font-size: 10px;
                    font-weight: 700;
                    line-height: normal;
                    color: #0A0A0A;
                    letter-spacing: 0.6px;
                    text-transform: uppercase;
                    font-family: var(--font-body--family, sans-serif);
                    position: absolute;
                    top: 16px;
                    right: 16px;
                    z-index: 9;
                    .na__dot {
                    animation: fsb-pulse 1.4s ease infinite;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background: #22c55e;
                        flex-shrink: 0;
                        transition: background 0.4s;
                    }
                }
            }
            slideshow-controls{
                scroll-hint{
                    .slideshow-controls__thumbnails{
                        margin:0;
                        padding-left: 4px;
                        button{                            
                            width: 80px;
                            border-radius:10px;
                        }
                    }
                }
            }
        }
    }
    .product-details{
    .variant-picker__form{
        legend.size{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            .size-chart-btn{
                display: flex;
                align-items: center;
                gap: 8px;
                font-size: 13px;
                font-weight: bold;
                border: none;
                background: transparent;
                color: #fff;
                background-color: #FF4D14;
                box-shadow: 0px 1.62px 4.86px 0px #FF4D142E;
                box-shadow: 0px 6.48px 19.45px -6.48px #FF4D1473;
                padding: 5px 8px;
                border-radius: 5px;
            }
        }
        .size-chart-pop {
            position: fixed;
            inset: 0;
            z-index: 9999;
            display: none;
            }
            .size-chart-pop.is-active {
            display: block;
            }
            .size-chart-pop__overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            }
            .size-chart-pop__dialog {
                position: relative;
                width: 90%;
                max-width: 480px;
                margin: 20vh auto;
                background: #fff;
                border-radius: 12px;
                padding: 28px 20px 20px;
                max-height: 88vh;
                overflow-y: auto;
                h3{
                    font-size: 20px;
                    margin-bottom: 12px;
                }
            }
            .size-chart-pop__close {
            position: absolute;
            top: 10px;
            right: 14px;
            background: none;
            border: none;
            font-size: 26px;
            line-height: 1;
            cursor: pointer;
            color: #1f1f1f;
        }

    }
    .start-bought{
        margin: 20px 0;
        display: flex;
        flex-wrap:wrap;
        align-items: center;
        gap: 15px;
        .product-bought{
            display: flex;
            gap:6px;
            align-items: center;
            padding: 4px 12px;
            color: #F05822;
            border-radius: 5px;
            font-family: var(--font-body--family, sans-serif);
            white-space: nowrap;
            width: fit-content;
            font-weight: 600;
            font-size: 14px;
            line-height: 1.3;
            letter-spacing: 0.12px;
            background: #FFF7ED;
            text-transform: uppercase;
            svg{
                filter: brightness(0) saturate(100%) invert(35%) sepia(91%) saturate(2705%) hue-rotate(353deg) brightness(106%) contrast(101%);
            }
        }
    }
        h1{
            font-family: var(--font-heading--family, sans-serif);
            font-weight: 700;
            font-size: 32px;
            line-height: 100%;
            letter-spacing: 0px;
            color:#101828;
        }
        product-price{
            .price__regular, .price__sale{
                font-family: var(--font-body--family, sans-serif);
                font-weight: 700;
                font-size: 30px;
                line-height: 36px;
                letter-spacing: 0px;
                color:#F05822;

            }
            .price__sale{
                display: flex;
                gap: 12px;
                align-items: center;
                &.price__hidden{
                    display:none;
                }
            }
            .compare-at-price{
                font-family: var(--font-body--family, sans-serif);
                font-weight: 400;
                font-size: 18px;
                line-height: 28px;
                letter-spacing: 0px;
                color:#99A1AF;
            }
             .price-save-badge {
                display: inline-flex;
                align-items: center;
                padding: 6px 10px;
                color: #047857;
                border-radius:5px;
                font-family: var(--font-body--family, sans-serif);
                white-space: nowrap;
                font-weight: 600;
                font-size: 12px;
                line-height:100%;
                letter-spacing: 0.12px;
                background: #0478571A;
                text-transform:uppercase;
            }
        }
        .quantity-selector-wrapper{
            quantity-selector-component{
                height:unset;
                button{
                    height:unset;
                }
            }
        }
        .p-buttons{
            gap: 10px;
            display: flex;
            flex-basis: 100%;
            button{
                font-family: var(--font-body--family, sans-serif);
                font-weight: 600;
                font-size: 14.75px;
                line-height: 22.13px;
                letter-spacing: 0.07px;
                padding-block:9px;
                height:fit-content;
                min-height:unset;
            }
            .pp-adcb{
                flex-basis:50%;
                &:hover{
                    svg{
                    transition: ease all .5s;
                        filter: brightness(0) saturate(100%) invert(100%) sepia(8%) saturate(1956%) hue-rotate(188deg) brightness(112%) contrast(95%);
                    }
                }
            }
            .accelerated-checkout-block{
                flex-basis:50%;
                button{
                    color:#FFF;
                    background-color:#FF4D14;
                    box-shadow: 0px 1.62px 4.86px 0px #FF4D142E;
                    box-shadow: 0px 6.48px 19.45px -6.48px #FF4D1473;
                    display: flex;
                    justify-content: center;
                    align-items:center;
                    gap: 10px;

                    svg{
                        width:20px;
                        height:20px;
                        transition: ease all .5s;
                    }
                    &:hover{
                        background-color:#FFf;
                        color:#FF4D14;
                        box-shadow: 0px 0px 0px 1px #FF4D14;
                        svg{
                            filter: brightness(0) saturate(100%) invert(35%) sepia(91%) saturate(2705%) hue-rotate(353deg) brightness(106%) contrast(101%);
                        }
                    }
                    
                }
                &.thousand{
                    button{
                        background-color:#8948FF;
                        box-shadow: 0px 3.06px 4.59px -3.06px #AD46FF40;
                        box-shadow: 0px 7.65px 11.48px -2.3px #AD46FF40;
                        &:hover{
                            background-color:#FFf;
                            color:#8948FF;
                            box-shadow: 0px 0px 0px 1px #8948FF;
                            svg{
                                filter: brightness(0) saturate(100%) invert(28%) sepia(68%) saturate(2419%) hue-rotate(247deg) brightness(102%) contrast(102%);
                            }
                        }
                    }
                }
            }
        }
    }
}

.seller-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: #FAF8F5;
    border-radius: 0px;
    @media (max-width: 480px) {
        flex-wrap: wrap; 
        gap: 12px;
    }
    .seller-info-card__left {
        display: flex;
        align-items: center;
        gap: 12px;
        .seller-info-card__avatar {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: #18181B;
            color: #ffffff;
            font-size: 12px;
            font-weight: 700;
            font-family: var(--font-body--family, sans-serif);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .seller-info-card__avatar--img {
            background: #18181B;
            object-fit: cover;
        }
        .seller-info-card__meta {
            display: flex;
            flex-direction: column;
            gap: 3px;
            .seller-info-card__name {
                display: flex;
                align-items: center;
                gap: 5px;
                color: #0A0A0A;
                font-family: var(--font-body--family, sans-serif);
                margin: 0;
                font-weight: 600;
                font-size: 12.16px;
                line-height: 18.24px;
                letter-spacing: 0px;
                .seller-info-card__verified {
                    width: 10px;
                    height: 10px;
                    color: #F05822;
                    flex-shrink: 0;
                }
            }
            .seller-info-card__rating {
                display: flex;
                align-items: center;
                gap: 4px;
                font-family: var(--font-body--family, sans-serif);
                font-weight: 400;
                font-size: 9.73px;
                line-height: 15.2px;
                letter-spacing: 0px;
                color:#525252;
                svg {
                    width: 13px;
                    height: 13px;
                    flex-shrink: 0;
                }
            }
        }
    }
    .seller-info-card__btn {
        display: inline-flex;
        align-items: center;
        padding: 9px 22px;
        border-radius: 999px;
        border: 1.5px solid #F05822;
        color: #F05822;
        text-decoration: none;
        white-space: nowrap;
        transition: background 0.18s, color 0.18s;
        font-family: var(--font-body--family, sans-serif);
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0px;
        @media (max-width: 480px) {
            width: 100%; 
            justify-content: center;
        }
        &:hover {
            background: #F05822;
            color: #ffffff;
        }
    }
}



.trust-badges-row {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    padding: 10px 16px;
    justify-content:space-between;
     @media (max-width: 600px) {
        gap: 16px;
        justify-content: space-between;
     }
    .trust-badges-row__item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        @media (max-width: 420px) {
            width: calc(50% - 8px);
            flex-direction:column;
            text-align:center;
        align-items: center;
        }
        .trust-badges-row__icon {
            width: 22px;
            height: 22px;
            flex-shrink: 0;
            margin-top: 1px;
            svg {
                width: 100%;
                height: 100%;
            }
        }
        .trust-badges-row__text{
            gap: 4px;
            display: flex;
            flex-direction: column;
             .trust-badges-row__title {
                color: ##0A0A0A;
                font-family: var(--font-body--family, sans-serif);
                margin: 0;
                white-space: nowrap;
                font-weight: 600;
                font-size: 10.53px;
                line-height: 100%;
                letter-spacing: 0px;
                 @media (max-width: 600px) {
                     white-space: normal;
                 }
            }
            .trust-badges-row__sub {
                font-size: 12px;
                font-weight: 400;
                color: #525252;
                font-family: var(--font-body--family, sans-serif);
                margin: 0;
                font-size: 10px;
                line-height: 100%;
                letter-spacing: 0px;

            }
        }
    }
}
.whatsapp-help-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-radius: 16px;
    background: #ECFDF5;
    border: 1px solid #BBF7D0;
    text-decoration: none;
    transition: background 0.18s ease;
    &:hover {
        background: #DCFCE7;
    }
    .whatsapp-help-bar__icon svg {
        width: 32px;
        height: 32px;
        color: #ffffff;
    }
     .whatsapp-help-bar__text {
        flex: 1;
        color: #0A0A0A;
        font-family: var(--font-body--family, sans-serif);
        font-weight: 600;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 0px;
        color:#0A0A0A;

    }
     .whatsapp-help-bar__arrow {
        width: 18px;
        height: 18px;
        color: #525252;
        flex-shrink: 0;
        svg {
            width: 100%;
            height: 100%;
        }
    }
}
.section-text-tabs{
    .tt-tabs {
        list-style: none;
        display: flex;
        gap: 30px;
        padding: 0;
        margin: 0 0 28px 0;
        .tt-tab {
            padding-bottom: 14px;
            cursor: pointer;
            font-family: var(--font-heading--family, inherit);
            font-weight: 500;
            font-size: 20px;
            line-height: 100%;
            letter-spacing: 0px;
            text-align: center;
            white-space: nowrap;
            border-bottom: 2px solid transparent;
            transition: color 0.18s ease, border-color 0.18s ease;
            margin-bottom: -1px;
            flex-basis:33%;
             @media (max-width: 600px) {
                font-size: 14px;
            }
            .is-active{
                font-family: var(--font-heading--family, inherit);
                ont-weight: 600;
            }
        }
    }
    .tt-content {
        display: none;
        font-family: var(--font-body--family, inherit);
        font-weight: 400;
        font-size: 16px;
        line-height: 1.2;
        letter-spacing: 0px;
        &:first-child {
            margin-top: 0;
        }
        &.is-active {
            display: block;
        }
         h1, h2, h3, h4 {
            font-family: var(--font-heading--family, inherit);
            font-weight: 600;
            font-size: 20px;
            line-height: 1.1;
            letter-spacing: -0.15px;
            margin: 24px 0 10px 0;
        }
        h1:first-child, h2:first-child, h3:first-child, h4:first-child {
            margin-top: 0;
        }
         p {
            margin: 0 0 14px 0;
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0 0 14px 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            li {
                position: relative;
                padding-left: 24px;
                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 6px;
                    width: 14px;
                    height: 14px;
                    border-width: 0 0 2px 2px;
                    transform: rotate(-45deg);
                    border-radius: 1px;
                }
            }
        }
        .digibazar-actual-images{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            h3{
                flex-basis: 100%;
            }
            img {
                max-width: 20% !important;
                height: auto !important;
                image-rendering: -webkit-optimize-contrast;
                @media (max-width: 880px) {
                    max-width: 25% !important;
                }
                @media (max-width: 750px) {
                    max-width: 33.33% !important;
                }
                @media (max-width: 450px) {
                    max-width: 50% !important;
                }
            }
        }
    }
}
sticky-add-to-cart {
    .sticky-add-to-cart__bar{
        &:before{
            display:none!important;
        }    
    }
    &.flash{
        .sticky-add-to-cart__bar{
            background: linear-gradient(90deg, #FFF7ED 0%, rgba(240, 88, 34, 0.1) 100%);   
            background-color:#fff;
        }
    }
    &.thousand {
        .sticky-add-to-cart__bar{
            background: linear-gradient(90deg, #FAF5FF 0%, rgba(137, 72, 255, 0.1) 100%);
            background-color:#fff;
        }
    }

  .sticky-add-to-cart__title {
    color: #0A0A0A;
    font-weight: 700;
  }
  .price-save-badge{
    color:#FF4D14;
  }
}
.wishlist-btn {
    width: 30px; height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    color: #555;
    flex-shrink: 0;
    padding: 0;
    z-index: 3;
    position: absolute;
    bottom: 10px;
    right: 10px;
    &:hover {
        background: #fff;
        transform: scale(1.12);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
        color: #F05822;
    }
    .wishlist-btn__icon { 
        width: 15px; height: 15px; 
    }
    &.is-wished {
        background: rgba(255, 255, 255, 0.98);
        color: #F05822;
        .wishlist-btn__icon--filled  { display: block; }
        .wishlist-btn__icon--outline { display: none; }
    }
    &.wishlist-pop { animation: wishlist-pop 0.38s ease; }
    .wishlist-btn__icon--filled { display: none; color: #F05822; }
    .wishlist-btn__icon--outline { display: block; }
}
.section-wishlist-page{
    .wl-page {
        max-width: 1200px;
        margin-inline: auto;
        min-height: 50vh;
        .wl-page__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-block-end: 28px;
            .wl-page__title {
                font-size: clamp(20px, 3vw, 28px);
                font-weight: 700;
                font-family: var(--font-primary--family, inherit);
                margin: 0;
            }
            .wl-page__meta {
                font-size: 14px;
                color: #888;
                font-family: var(--font-body--family, inherit);
            }
            .wl-page__clear {
                font-size: 13px;
                font-weight: 500;
                color: #F05822;
                background: none;
                border: 1.5px solid #F05822;
                border-radius: 999px;
                padding: 6px 16px;
                cursor: pointer;
                font-family: var(--font-body--family, inherit);
                transition: background 0.18s, color 0.18s;
                &:hover {
                    background: #F05822;
                    color: #fff;
                }
            }
        }
        .wl-grid {
            display: grid;
            @media (max-width: 900px) { 
                grid-template-columns: repeat(2, 1fr); 
            } 
            @media (max-width: 480px) { 
                grid-template-columns: repeat(2, 1fr); gap: 10px; 
            } 
            .wl-card-wrap {
                position: relative;
                transition: opacity 0.25s, transform 0.25s;
                .wl-card-wrap__remove {
                    position: absolute;
                    top: 20px;
                    right: 10px;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    border: none;
                    background: rgba(255,255,255,0.92);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    z-index: 5;
                    box-shadow: 0 1px 5px rgba(0,0,0,0.12);
                    transition: background 0.18s, transform 0.18s;
                    color: #F05822;
                    &:hover { background: #fff; transform: scale(1.12); }
                    svg   { width: 14px; height: 14px; pointer-events: none; }
                }
                .wishlist-btn {
                    display:none !important;
                }
            }
        }
        .wl-empty {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            padding: 80px 20px;
            text-align: center;
            color: #999;
            svg { width: 64px; height: 64px; opacity: 0.25; }
            .wl-empty__title {
                font-size: 18px;
                font-weight: 600;
                font-family: var(--font-primary--family, inherit);
                margin: 0;
            }
            .wl-empty__sub {
                font-size: 14px;
                color: #aaa;
                margin: 0;
            }
            .wl-empty__btn {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 10px 28px;
                border-radius: 999px;
                text-decoration: none;
                font-size: 14px;
                font-weight: 600;
                font-family: var(--font-body--family, inherit);
                transition: opacity 0.18s;
                &:hover { opacity: 0.85; }
            }
        }
        .wl-skeleton {
            overflow: hidden;
            background: #f0f0f0;
            .wl-skeleton__img   { width: 100%; padding-block-end: 100%; background: #e0e0e0; }
            .wl-skeleton__body  { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 8px; }
            .wl-skeleton__line  { height: 12px; border-radius: 4px; background: #e0e0e0; animation: wl-shimmer 1.4s infinite; }
            .wl-skeleton__line--short { width: 60%; }
            .wl-skeleton__line--tall  { height: 36px; margin-block-start: 6px; }
        }
    }
    .wl-page[data-state="empty"] .wl-empty { display: flex; }
    .wl-page[data-state="empty"] .wl-page__header,
    .wl-page[data-state="empty"] .wl-grid   { display: none; }
    @keyframes wl-shimmer {
        0%   { opacity: 1; }
        50%  { opacity: 0.5; }
        100% { opacity: 1; }
    }
}
.vr-section {
    overflow: hidden;
    .vr-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-block-end: 20px;
        gap: 12px;
        .vr-header__title {
            font-size: clamp(20px, 2.5vw, 20px);
            font-weight: 700;
            font-family: var(--font-primary--family, inherit);
            margin: 0;
        }
        .vr-header__right {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
            .vr-header__viewall {
                font-size: 13px;
                font-weight: 600;
                text-decoration: underline;
                white-space: nowrap;
                cursor: pointer;
            }
            .vr-nav {
                display: flex;
                gap: 6px;
                .vr-nav__btn {
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    border: 1.5px solid #d0d0d0;
                    background: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    transition: background 0.15s, border-color 0.15s;
                    flex-shrink: 0;
                    &:disabled {
                        opacity: 0.35;
                        cursor: default;
                    }
                    &:hover:not(:disabled) {
                        background: #f5f5f5;
                        border-color: #999;
                    }
                    svg {
                        width: 18px;
                        height: 18px;
                        fill: currentColor;
                    }
                }
            }
        }
    }
    .vr-carousel::-webkit-scrollbar { display: none; }
    .vr-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-block-end: 4px;
        .vr-card {
            scroll-snap-align: start;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            aspect-ratio: 9/16;
            background: #111;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            .vr-card__thumb {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                pointer-events: none;
                transition: transform 0.35s ease;
            }
            &:hover .vr-card__thumb { 
                transform: scale(1.04); 
            }
            .vr-card__play {
                position: absolute;
                top: 12px;
                left: 12px;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: rgba(0,0,0,0.35);
                display: flex;
                align-items: center;
                justify-content: center;
                pointer-events: none;
                svg { width: 13px; height: 13px; fill: #fff; margin-left: 2px; }
            }
            .vr-card__gradient {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 55%;
                background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 55%, transparent 100%);
                pointer-events: none;
            }
            .vr-card__info {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                padding: 12px;
                pointer-events: none;
                .vr-card__product-title {
                    font-size: 12px;
                    font-weight: 400;
                    color: rgba(255,255,255,0.85);
                    font-family: var(--font-body--family, inherit);
                    margin: 0 0 2px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .vr-card__price {
                    font-size: 14px;
                    font-weight: 700;
                    color: #fff;
                    font-family: var(--font-body--family, inherit);
                    margin: 0;
                }
            }
        }
    }
} 
.vr-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    flex-direction: column;
    &.is-open { display: flex; }
    .vr-modal__close {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 10;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.15);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        backdrop-filter: blur(4px);
        svg { width: 18px; height: 18px; stroke: #fff; fill: none; }
    }
    .vr-modal__mute {
        position: absolute;
        bottom: 150px;
        right: 16px;
        z-index: 10;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.15);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        backdrop-filter: blur(4px);
    }
    .vr-modal__arrow {
        position: absolute;
        z-index: 10;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.15);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        backdrop-filter: blur(4px);
        display: none;
        @media (min-width: 768px) { 
            display: flex; 
        } 
        svg { width: 20px; height: 20px; fill: #fff; }
        &.vr-modal__arrow--up   { top: 50%; transform: translateY(-60px); right: 16px; }
        &.vr-modal__arrow--down { top: 50%; transform: translateY(20px);  right: 16px; }
    }
    .vr-modal__counter {
        position: absolute;
        top: 20px;
        left: 16px;
        z-index: 10;
        font-size: 13px;
        color: rgba(255,255,255,0.75);
        font-family: var(--font-body--family, inherit);
        backdrop-filter: blur(4px);
        background: rgba(0,0,0,0.25);
        padding: 4px 10px;
        border-radius: 999px;
    }
    .vr-modal__track::-webkit-scrollbar { display: none; }
    .vr-modal__track {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        .vr-reel {
            max-width: 450px;
            height: 100%;
            scroll-snap-align: start;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000000d6;
            flex-shrink: 0;
            margin:0 auto;
            video {
                width: fit-content;
                height: fit-content;
                object-fit: contain;
                display: block;
                border-radius:16px;
            }
            .vr-reel__overlay {
                position: absolute;
                bottom: 7%;
                left: auto;
                right: auto;
                padding: 10px;
                background: #ffffff6e;
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 20px;
                max-width: 450px;
                width: 90%;
                border-radius: 10px;

                .vr-reel__img {
                    width: 52px;
                    height: 52px;
                    border-radius: 8px;
                    overflow: hidden;
                    flex-shrink: 0;
                    border: 1.5px solid rgba(255,255,255,0.3);
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                    }
                }

                .vr-reel__text {
                    display: flex;
                    flex-direction: column;
                    gap: 3px;
                    color: #0A0A0A;
                   .vr-reel__title {
                        font-size: 16px;
                        font-weight: 600;
                        font-family: var(--font-body--family, inherit);
                        margin: 0;
                    }
                    .vr-reel__price {
                        font-size: 15px;
                        font-weight: 700;
                        margin: 0;
                        font-family: var(--font-body--family, inherit);
                    }
                }

            }
        }
    }
    .vr-reel__pause-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
        z-index: 8;
    }
        .vr-reel__pause-icon.is-visible { opacity: 1; }
        .vr-reel__pause-icon svg { width: 22px; height: 22px; fill: #fff; }

        .vr-reel__progress-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: rgba(255, 255, 255, 0.2);
        z-index: 10;
        cursor: pointer;
        }
        .vr-reel__progress-fill {
        height: 100%;
        width: 0%;
        background: #fff;
        transition: width 0.1s linear;
        pointer-events: none;
        }
}
.vrp-thumb {
    position: absolute;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 9/16;
    display: block;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    max-width: 75px;
    z-index: 9;
    bottom: 22px;
    right: 22px;
    &:hover img {
      transform: scale(1.04);
    }
    &:hover .vrp-thumb__play {
      background: rgba(255, 255, 255, 0.41);
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }
    .vrp-thumb__play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #ffffff;
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        transition: background 0.2s;
        box-shadow: -1.5px 1.5px 3px 0px #00000040;
        border: 1px solid #fff;
        svg {
        width: 10px;
        height: 15px;
        }
    }
}
.vrp-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000000d6;
    display: none;
    align-items: center;
    justify-content: center;
    &.is-open {
        display: flex;
        }
    video {
        width: fit-content;
        height: fit-content;
        object-fit: contain;
        display: block;
        border-radius:12px;
    }
    .vrp-modal__close {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 10;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(4px);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
            svg {
            width: 18px;
            height: 18px;
            stroke: #fff;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
    }
        .vrp-modal__mute {
        position: absolute;
        bottom: 120px;
        right: 16px;
        z-index: 10;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        svg {
            width: 18px;
            height: 18px;
        }
    }
    .vrp-modal__progress-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: rgba(255,255,255,0.2);
        z-index: 10;
        cursor: pointer;
    }
    .vrp-modal__progress-fill {
        height: 100%;
        width: 0%;
        background: #fff;
        transition: width 0.1s linear;
        pointer-events: none;
    }
    .vrp-modal__pause-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(0,0,0,0.45);
        backdrop-filter: blur(4px);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s;
        z-index: 8;
        &.is-visible { opacity: 1; }
        svg { width: 24px; height: 24px; fill: #fff; }
    }
}