/* ==========================================================================
   SHEIN-Like Theme Override for Sampaki (Botble Amerce Theme)
   Responsive: Mobile-first, all breakpoints
   Last Updated: 2026-06-26 — Full UI/UX Audit Applied
   ========================================================================== */

/* ---- CSS Variables / SHEIN Color Palette ---- */
:root {
    --shein-black: #222;
    --shein-dark: #333;
    --shein-gray: #666;
    --shein-light-gray: #f5f5f5;
    --shein-border: #e5e5e5;
    --shein-red: #E8172C;      /* SHEIN exact red */
    --shein-orange: #ff6b00;
    --shein-white: #fff;
    --shein-bg: #f5f5f5;
    --shein-topbar-bg: #F5F0E8;  /* SHEIN cream topbar */
    --shein-header-bg: #000;     /* SHEIN black header */
    --shein-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --shein-radius: 0px;         /* SHEIN uses square corners */
    --shein-radius-lg: 2px;
    --shein-shadow: 0 2px 8px rgba(0,0,0,.08);
    --shein-shadow-hover: 0 4px 16px rgba(0,0,0,.12);
}

/* ---- Global Resets ---- */
html {
    scroll-behavior: smooth;
}
body {
    font-family: var(--shein-font) !important;
    background-color: var(--shein-bg) !important;
    color: var(--shein-dark) !important;
    font-size: 14px;
    line-height: 1.5;
}

/* ==========================================================================
   TOPBAR (Promo Strip) — SHEIN: cream/beige background, dark text
   ========================================================================== */
.tf-topbar,
.tf-topbar.bg-dark,
.tf-topbar.topbar-s3 {
    background-color: var(--shein-topbar-bg) !important;
    padding: 6px 0 !important;
    font-size: 11px !important;
    border-bottom: 1px solid #e8e0d0 !important;
}
/* Text — dark on cream, NOT white */
.tf-topbar p,
.tf-topbar a,
.tf-topbar .text-white,
.tf-topbar span {
    color: #333 !important;
    font-size: 11px !important;
    letter-spacing: 0.2px;
}
/* Promo icon color */
.tf-topbar .icon-SealPercent {
    color: var(--shein-red) !important;
}
/* Social icons in topbar */
.tf-topbar .tf-list-socials a i {
    color: #333 !important;
    font-size: 16px !important;
}
/* Swiper nav arrows in topbar */
.tf-topbar .nav-prev-swiper,
.tf-topbar .nav-next-swiper {
    color: #333 !important;
}
.tf-topbar .nav-prev-swiper i,
.tf-topbar .nav-next-swiper i {
    color: #333 !important;
}
/* Currency/Language dropdown in topbar */
.tf-topbar .tf-list a,
.tf-topbar .list-currenci a {
    color: #333 !important;
}

/* ==========================================================================
   HEADER MAIN — SHEIN: Pure Black background, white icons
   ========================================================================== */
.tf-header,
header.tf-header,
.tf-header.header-s3,
.tf-header.header-s3.has-by-category {
    background-color: var(--shein-header-bg) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Header inner wrap background */
.header-inner_wrap {
    background-color: var(--shein-header-bg) !important;
    padding: 0 !important;
}

/* Logo area */
.tf-header .logo-site {
    display: flex;
    align-items: center;
}
.tf-header .logo-site img {
    max-height: 32px !important;
    width: auto;
}

/* Logo — invert to white on black background */
.tf-header .logo-site img.logo-light {
    filter: brightness(0) invert(1) !important;
}

/* Header inner row */
.tf-header .header-inner {
    min-height: 60px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ---- Nav Icons (User, Wishlist, Cart) — White on black header ---- */
.tf-header .nav-icon-list {
    display: flex;
    align-items: center;
    gap: 2px !important;
}
.tf-header .nav-icon-list .nav-icon-item,
.tf-header .nav-icon-list a.nav-icon-item,
.tf-header .nav-icon-list a.link,
.tf-header .header-right a {
    color: #fff !important;
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}
.tf-header .nav-icon-list .nav-icon-item:hover,
.tf-header .nav-icon-list a.nav-icon-item:hover {
    background: rgba(255,255,255,0.12);
}
.tf-header .nav-icon-list .count {
    background: var(--shein-red) !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    padding: 0 4px;
    position: absolute;
    top: 2px;
    right: 2px;
}

/* Mobile hamburger icon — white */
.tf-header .box-open-menu-mobile a,
.tf-header .btn-open-menu,
.tf-header .box-open-header-bottom .btn-open-header-bottom {
    color: #fff !important;
    font-size: 22px;
}

/* ---- Search Bar — SHEIN style on black header ---- */
.header-s3 .form_search-product,
.header-center .form_search-product {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 4px !important;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
    height: 42px;
    max-width: 640px;
    width: 100%;
}
.header-s3 .form_search-product:focus-within,
.header-center .form_search-product:focus-within {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.5) !important;
}
.header-s3 .form_search-product .select-category,
.header-center .form_search-product .select-category {
    border-right: 1px solid rgba(255,255,255,0.2) !important;
    padding: 0 10px;
}
.header-s3 .form_search-product .select-category select,
.header-center .form_search-product .select-category select {
    border: none !important;
    background: transparent;
    color: #fff !important;
    font-size: 12px;
    padding: 6px 20px 6px 0;
}
.header-s3 .form_search-product .select-category select option {
    color: #222;
    background: #fff;
}
.header-s3 .form_search-product .fieldset-search,
.header-center .form_search-product .fieldset-search {
    flex: 1;
    display: flex;
    align-items: center;
}
.header-s3 .form_search-product .fieldset-search .ipt,
.header-center .form_search-product .fieldset-search .ipt {
    border: none !important;
    background: transparent !important;
    color: #fff !important;
    padding: 8px 14px !important;
    font-size: 13px;
    flex: 1;
    outline: none !important;
    box-shadow: none !important;
}
.header-s3 .form_search-product .fieldset-search .ipt::placeholder,
.header-center .form_search-product .fieldset-search .ipt::placeholder {
    color: rgba(255,255,255,0.55) !important;
}
.header-s3 .form_search-product .fieldset-search .btn-action,
.header-center .form_search-product .fieldset-search .btn-action {
    background: transparent !important;
    color: rgba(255,255,255,0.8) !important;
    border: none;
    padding: 0 14px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.2s;
}
.header-s3 .form_search-product .fieldset-search .btn-action:hover,
.header-center .form_search-product .fieldset-search .btn-action:hover {
    color: #fff !important;
}
/* Vertical separator in search */
.header-s3 .br-line.type-vertical,
.header-center .br-line.type-vertical {
    display: none !important;
}

/* ==========================================================================
   CATEGORY NAVIGATION BAR (Bottom header bar) — SHEIN white bg
   ========================================================================== */
.header-bottom_wrap {
    background: var(--shein-white) !important;
    border-bottom: 1px solid var(--shein-border) !important;
    padding: 0 !important;
}
.header-bottom {
    display: flex;
    align-items: center;
    min-height: 40px;
}

/* Browse Categories Button */
.header-bottom .nav-category-wrap .btn-nav-drop,
.header-bottom .btn-nav-drop {
    background: var(--shein-header-bg) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: opacity 0.2s;
    letter-spacing: 0 !important;
    height: 40px;
}
.header-bottom .nav-category-wrap .btn-nav-drop:hover {
    opacity: 0.85;
}

/* Nav links in bottom bar — SHEIN style */
.header-bottom .box-navigation .box-nav-menu,
.box-navigation .main-menu {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.header-bottom .box-navigation .box-nav-menu > li > a,
.box-navigation .main-menu > li > a,
.box-navigation nav ul > li > a {
    display: flex;
    align-items: center;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--shein-dark) !important;
    text-transform: none !important;    /* SHEIN uses normal case */
    letter-spacing: 0 !important;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s;
    text-decoration: none !important;
    height: 40px;
}
.header-bottom .box-navigation .box-nav-menu > li > a:hover,
.box-navigation .main-menu > li > a:hover {
    color: var(--shein-black) !important;
    text-decoration: none !important;
}
/* Remove underline hover animation */
.header-bottom .box-navigation .box-nav-menu > li > a::after,
.box-navigation .main-menu > li > a::after,
.box-navigation nav ul > li > a::after {
    display: none !important;
}

/* Offer text right side */
.header-bottom .col-right .text-primary {
    color: var(--shein-red) !important;
    font-size: 13px;
    font-weight: 600;
}

/* ---- Category Dropdown Panel ---- */
.nav-category-wrap .nav-category-inner {
    background: var(--shein-white) !important;
    border: 1px solid var(--shein-border);
    border-top: 2px solid var(--shein-header-bg);
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    padding: 8px 0;
    min-width: 220px;
}
.nav-category-wrap .nav-category-inner li a {
    padding: 8px 16px;
    font-size: 13px;
    color: var(--shein-dark);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s;
}
.nav-category-wrap .nav-category-inner li a:hover {
    background: var(--shein-light-gray);
    color: var(--shein-black);
}

/* ---- Mega Menu Dropdown ---- */
.main-menu .sub-menu,
.main-menu .mega-menu {
    background: var(--shein-white) !important;
    border: 1px solid var(--shein-border);
    border-top: 2px solid var(--shein-header-bg);
    border-radius: 0 !important;
    box-shadow: var(--shein-shadow);
    padding: 16px 20px;
}

/* ==========================================================================
   HERO BANNERS / SLIDERS — SHEIN style
   ========================================================================== */
.tf-slideshow,
.hero-slideshow,
[class*="slider-main"],
.swiper.tf-slider-main {
    border-radius: 0 !important;
    overflow: hidden;
    margin-bottom: 0;
}

/* SHOP NOW button — SHEIN red */
.tf-slideshow .tf-btn,
.tf-slideshow a.tf-btn,
.hero-banner .tf-btn,
.hero-banner a.tf-btn {
    background: var(--shein-red) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 10px 24px !important;
}

/* ==========================================================================
   PRODUCT CARDS — SHEIN exact style
   ========================================================================== */
.card-product,
.tf-product-card,
[class*="product-card"] {
    background: var(--shein-white) !important;
    border: none !important;
    border-radius: 0 !important;         /* SHEIN: square corners */
    overflow: hidden;
    box-shadow: none !important;         /* SHEIN: no shadow */
    transition: none !important;         /* SHEIN: no animation */
}
/* SHEIN: No hover lift or shadow */
.card-product:hover,
.tf-product-card:hover,
[class*="product-card"]:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* Product Image */
.card-product .product-img,
.tf-product-card .product-img {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    aspect-ratio: 3/4;          /* SHEIN portrait ratio */
    background: #f0f0f0;
}
.card-product .product-img img,
.tf-product-card .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.card-product:hover .product-img img,
.tf-product-card:hover .product-img img {
    transform: scale(1.05);
}

/* Product Info area */
.card-product .product-info,
.tf-product-card .product-info {
    padding: 6px 4px 10px !important;
    background: #fff;
}

/* Product title — small gray, 2-line clamp */
.card-product .product-title,
.tf-product-card .product-title,
.card-product .product-info .name,
.card-product .product-info a,
.tf-product-card .product-info a {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #666 !important;          /* SHEIN: gray title */
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 4px;
    text-decoration: none !important;
}
.card-product .product-info a:hover,
.tf-product-card .product-info a:hover {
    color: var(--shein-black) !important;
    text-decoration: none !important;
}

/* Price styling — SHEIN bold black */
.card-product .price-new,
.tf-product-card .price-new,
.card-product .price:not(.price-old) {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--shein-black) !important;
}
.card-product .price-old,
.tf-product-card .price-old {
    font-size: 12px !important;
    color: #999 !important;
    text-decoration: line-through;
    font-weight: 400 !important;
}

/* Discount Badge — SHEIN red */
.product-badge_item.sale,
.badge-sale,
.product-badge_item.new,
[class*="badge"][class*="sale"] {
    background: var(--shein-red) !important;
    color: #fff !important;
    border-radius: 2px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 5px !important;
    text-transform: uppercase;
    letter-spacing: 0;
}

/* Star Ratings */
.product-rating i,
.star-rating i {
    color: #ffc107 !important;
    font-size: 11px;
}

/* Wishlist Heart — top right of product image */
.card-product .wishlist-btn,
.tf-product-card .wishlist-btn,
[class*="product-card"] .btn-wishlist {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(255,255,255,0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    z-index: 2;
    transition: background 0.2s;
}
.card-product .wishlist-btn:hover,
[class*="product-card"] .btn-wishlist:hover {
    background: #fff !important;
}

/* Quick-view / Add-to-cart button overlay */
.card-product .list-product-btn,
.tf-product-card .list-product-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s;
}
.card-product:hover .list-product-btn,
.tf-product-card:hover .list-product-btn {
    opacity: 1;
    transform: translateY(0);
}
.card-product .btn-add-to-cart,
.tf-product-card .btn-add-to-cart {
    background: var(--shein-header-bg) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 0;
    text-transform: uppercase;
    width: 100%;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   PRODUCT GRID LAYOUT — SHEIN 5-col / 4-col / 3-col / 2-col
   ========================================================================== */
.grid-layout,
[class*="product-grid"],
[class*="products-grid"],
.row-product {
    display: grid !important;
    gap: 12px !important;
}
/* Reset Bootstrap col width and padding since we are using CSS Grid */
.grid-layout > [class*="col-"],
[class*="product-grid"] > [class*="col-"],
[class*="products-grid"] > [class*="col-"],
.row-product > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

@media (max-width: 575.98px) {
    .grid-layout,
    [class*="product-grid"],
    [class*="products-grid"],
    .row-product {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important; /* Compact 8px gap between cards on mobile */
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .grid-layout,
    [class*="product-grid"],
    [class*="products-grid"],
    .row-product {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .grid-layout,
    [class*="product-grid"],
    [class*="products-grid"],
    .row-product {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .grid-layout,
    [class*="product-grid"],
    [class*="products-grid"],
    .row-product {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
}
@media (min-width: 1200px) {
    .grid-layout,
    [class*="product-grid"],
    [class*="products-grid"],
    .row-product {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 12px !important;
    }
}

/* ==========================================================================
   SECTION TITLES — SHEIN: left-aligned, normal case, bold black
   ========================================================================== */
.section-title,
.tf-section-title,
[class*="section-title"] h2,
[class*="section-title"] h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--shein-black) !important;
    text-transform: none !important;    /* NO uppercase */
    letter-spacing: 0 !important;
    text-align: left !important;
    margin-bottom: 12px;
}
/* "View more" / arrow link next to section title */
.section-title a,
.tf-section-title a {
    font-size: 13px !important;
    color: var(--shein-gray) !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   CATEGORY GRID (Circular Icons) — SHEIN style
   ========================================================================== */
.tf-categories,
[class*="categories-grid"] {
    padding: 16px 0;
}
.tf-categories-slider .category-item,
[class*="categories"] .swiper-slide .category-item {
    text-align: center;
    padding: 6px 4px;
}
.tf-categories-slider .category-item .category-img,
[class*="categories"] .category-item .category-img {
    width: 80px;
    height: 80px;
    margin: 0 auto 8px;
    border-radius: 50% !important;
    overflow: hidden;
    border: 1px solid var(--shein-border);
    transition: border-color 0.2s;
    background: #f0f0f0;
}
.tf-categories-slider .category-item:hover .category-img {
    border-color: var(--shein-black);
}
.tf-categories-slider .category-item .category-name,
[class*="categories"] .category-item .category-name {
    font-size: 11px;
    font-weight: 400;
    color: var(--shein-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.tf-categories .category-item img {
    border-radius: 50% !important;
    transition: transform 0.2s;
}
.tf-categories .category-item:hover img {
    transform: scale(1.04);
}

/* ==========================================================================
   HOMEPAGE SECTIONS SPACING
   ========================================================================== */
.main-content > .container > section,
.main-content section[class*="section"],
.main-content [class*="tf-section"] {
    margin-bottom: 20px;
    padding: 16px 0;
}
@media (max-width: 767.98px) {
    .main-content > .container > section,
    .main-content section[class*="section"],
    .main-content [class*="tf-section"] {
        margin-bottom: 10px;
        padding: 10px 0;
    }
}

/* Flash sale countdown */
.flash-sale-section [class*="countdown"],
[class*="flash-sale"] [class*="countdown"] {
    color: var(--shein-red) !important;
    font-weight: 700;
}

/* ==========================================================================
   FOOTER — SHEIN: white background, 4-column simple layout
   ========================================================================== */
.tf-footer,
footer.tf-footer {
    background: var(--shein-white) !important;
    border-top: 1px solid var(--shein-border) !important;
}
/* Remove dark footer overrides */
.tf-footer.footer-s2.bg-dark,
.tf-footer.footer-s3.bg-dark,
.tf-footer.footer-s5.bg-dark {
    background: var(--shein-white) !important;
}
.tf-footer .footer-bottom,
footer .footer-bottom {
    background: var(--shein-light-gray) !important;
    border-top: 1px solid var(--shein-border);
    padding: 12px 0;
    font-size: 12px;
    color: var(--shein-gray);
}
/* Footer headings */
.tf-footer .footer-heading,
.tf-footer .footer-title,
.tf-footer h5, .tf-footer h6 {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--shein-black) !important;
    letter-spacing: 0.5px;
    margin-bottom: 14px !important;
}
/* Footer links */
.tf-footer .footer-menu a,
.tf-footer ul li a {
    font-size: 13px !important;
    color: var(--shein-gray) !important;
    line-height: 2.2 !important;
    transition: color 0.15s;
    text-decoration: none !important;
}
.tf-footer .footer-menu a:hover,
.tf-footer ul li a:hover {
    color: var(--shein-black) !important;
}
/* Footer social icons */
.tf-footer .tf-social-icon a,
.tf-footer .list-social a {
    color: var(--shein-dark) !important;
    font-size: 18px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--shein-border);
    border-radius: 50%;
    transition: border-color 0.2s, color 0.2s;
}
.tf-footer .tf-social-icon a:hover {
    border-color: var(--shein-black);
    color: var(--shein-black) !important;
}
/* Footer newsletter */
.tf-footer .newsletter-wrap input[type="email"],
.tf-footer .footer-newsletter input {
    border: 1px solid var(--shein-border) !important;
    border-radius: 0 !important;
    padding: 10px 14px;
    font-size: 13px;
    background: #fff;
}
.tf-footer .newsletter-wrap .btn,
.tf-footer .footer-newsletter .btn {
    background: var(--shein-black) !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none !important;
}
/* Copyright text */
.tf-footer .copyright,
.tf-footer .footer-copyright {
    font-size: 12px !important;
    color: var(--shein-gray) !important;
    text-align: center;
}

/* ==========================================================================
   BUTTONS — SHEIN style
   ========================================================================== */
.btn-primary,
.tf-btn,
a.tf-btn {
    background: var(--shein-black) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 2px !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 22px;
    transition: opacity 0.2s;
}
.btn-primary:hover,
.tf-btn:hover {
    opacity: 0.85;
    background: var(--shein-black) !important;
    color: #fff !important;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.tf-breadcrumb,
.breadcrumb-wrap {
    background: var(--shein-white) !important;
    padding: 10px 0 !important;
    font-size: 12px;
    color: var(--shein-gray);
    border-bottom: 1px solid var(--shein-border);
}
.tf-breadcrumb a,
.breadcrumb-wrap a {
    color: var(--shein-gray) !important;
    font-size: 12px;
}
.tf-breadcrumb a:hover {
    color: var(--shein-black) !important;
}

/* ==========================================================================
   STICKY HEADER
   ========================================================================== */
.tf-header-sticky,
header.is-fixed,
.tf-header.is-fixed {
    background: var(--shein-header-bg) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

/* ==========================================================================
   MINI CART (Offcanvas)
   ========================================================================== */
.offcanvas {
    border-left: none !important;
    box-shadow: -4px 0 20px rgba(0,0,0,.1) !important;
}
.offcanvas-header {
    border-bottom: 1px solid var(--shein-border);
    padding: 16px 20px;
}

/* ==========================================================================
   QUICK VIEW MODAL
   ========================================================================== */
.modal-quick-view .modal-content,
[class*="quick-view"] .modal-content {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.15) !important;
}

/* ==========================================================================
   MOBILE BOTTOM TOOLBAR — SHEIN tab bar
   ========================================================================== */
.tf-toolbar-bottom {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    z-index: 1000 !important;
    display: none;
    background: var(--shein-white) !important;
    border-top: 1px solid var(--shein-border) !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,.08) !important;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom, 0px)) !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* =========================================================
   FILTER DRAWER & SIDEBAR MOBILE LAYER & INTERACTION FIX
   ========================================================= */

/* 1. Backdrop layer: Below filter panel, above page content */
.sidebar-filter-backdrop,
.offcanvas-backdrop,
.modal-backdrop {
    z-index: 99990 !important;
    position: fixed !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    pointer-events: auto !important;
}

/* 2. Filter Drawers / Panels: Always on top with solid white background */
.sidebar-filter,
.canvas-sidebar,
.canvas-filter,
.offcanvas,
.offcanvas.canvas-filter,
#filterSidebar,
#filterShop {
    z-index: 99999 !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #222222 !important;
    pointer-events: auto !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.15) !important;
}

.sidebar-filter.left {
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-filter.left.show {
    transform: translateX(0) !important;
}

.sidebar-filter .canvas-wrapper,
.sidebar-filter .canvas-header,
.sidebar-filter .canvas-body,
.sidebar-filter .canvas-footer,
.canvas-filter .canvas-wrapper,
.canvas-filter .canvas-header,
.canvas-filter .canvas-body,
.canvas-filter .canvas-footer,
#filterSidebar .canvas-wrapper,
#filterSidebar .canvas-header,
#filterSidebar .canvas-body,
#filterSidebar .canvas-footer,
#filterShop .canvas-wrapper,
#filterShop .canvas-header,
#filterShop .canvas-body,
#filterShop .canvas-footer {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #222222 !important;
    pointer-events: auto !important;
}

/* 3. Filter Interactive Elements: Checkboxes, Labels, Links */
.bb-product-filter {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.bb-product-filter-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-bottom: 12px !important;
    text-transform: capitalize !important;
}

.bb-product-filter-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.bb-product-filter-item {
    display: flex !important;
    align-items: center !important;
    min-height: 34px !important;
    margin-bottom: 6px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

.bb-product-filter-item input[type="checkbox"],
.bb-product-filter-item input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 10px 0 0 !important;
    cursor: pointer !important;
    accent-color: #000000 !important;
    position: relative !important;
    z-index: 2 !important;
    flex-shrink: 0 !important;
    pointer-events: auto !important;
}

.bb-product-filter-item label {
    font-size: 14px !important;
    color: #333333 !important;
    cursor: pointer !important;
    flex: 1 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    pointer-events: auto !important;
}

.bb-product-filter-item label:hover {
    color: #000000 !important;
}

.bb-product-filter-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #444444 !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    width: 100% !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.bb-product-filter-link.active,
.bb-product-filter-link:hover {
    color: #000000 !important;
    font-weight: 600 !important;
}

.bb-product-filter-link svg,
.bb-product-filter-link i {
    font-size: 16px !important;
    flex-shrink: 0 !important;
}

/* Modals & Popups standard layer */
.modal,
.popup-shopping-cart,
#shoppingCart,
.canvas-mb {
    z-index: 99995 !important;
}

/* Mini Cart Drawer Bottom Buttons Spacing & Safe Padding */
.tf-mini-cart-view-checkout {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 15px !important;
    padding-bottom: max(15px, env(safe-area-inset-bottom, 15px)) !important;
}

.tf-mini-cart-view-checkout .tf-btn {
    height: 46px !important;
    line-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
}

/* Clean SHEIN Live Search Results Grid & Mark styling */
.shein-search-overlay mark,
.bb-quick-search-results mark {
    background: transparent !important;
    color: #ff4747 !important;
    font-weight: 700 !important;
    padding: 0 !important;
}

.shein-search-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.shein-search-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
@media (max-width: 991.98px) {
    .tf-toolbar-bottom {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
    }
    body {
        padding-bottom: 64px !important;
    }
}
.tf-toolbar-bottom .toolbar-item {
    flex: 1;
    text-align: center;
}
.tf-toolbar-bottom .toolbar-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    color: var(--shein-gray) !important;
    text-decoration: none;
    transition: color 0.15s;
}
.tf-toolbar-bottom .toolbar-item a:hover,
.tf-toolbar-bottom .toolbar-item a:active {
    color: var(--shein-black) !important;
}
.tf-toolbar-bottom .toolbar-icon {
    position: relative;
    font-size: 22px;
    line-height: 1;
}
.tf-toolbar-bottom .toolbar-label {
    font-size: 10px;
    font-weight: 400;
    margin-top: 2px;
}
.tf-toolbar-bottom .toolbar-count {
    position: absolute;
    top: -4px;
    right: -8px;
    background: var(--shein-red);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    padding: 0 3px;
}
/* Active tab state — black icon + label like Shein */
.tf-toolbar-bottom .toolbar-item.active a,
.tf-toolbar-bottom .toolbar-item a.active {
    color: var(--shein-black) !important;
    font-weight: 600;
}
.tf-toolbar-bottom .toolbar-item.active .toolbar-icon {
    color: var(--shein-black) !important;
}

/* ==========================================================================
   SWIPER NAVIGATION (minimal style)
   ========================================================================== */
.swiper-button-next,
.swiper-button-prev,
.nav-next-swiper,
.nav-prev-swiper {
    background: var(--shein-white) !important;
    border: 1px solid var(--shein-border) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    box-shadow: none;
    transition: border-color 0.2s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    border-color: var(--shein-black) !important;
}

/* Swiper pagination dots */
.swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
    background: var(--shein-border) !important;
    opacity: 1 !important;
    border-radius: 3px !important;
    transition: width 0.3s, background 0.3s;
}
.swiper-pagination-bullet-active {
    width: 20px !important;
    background: var(--shein-black) !important;
}

/* ==========================================================================
   SITE FEATURES / TRUST BAR
   ========================================================================== */
.site-features,
[class*="site-features"] {
    background: var(--shein-white) !important;
    padding: 14px 0;
    border-bottom: 1px solid var(--shein-border);
}

/* ==========================================================================
   FREE SHIPPING BADGE
   ========================================================================== */
.free-shipping-badge {
    background: #e8f5e9;
    color: #2e7d32;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 2px;
    display: inline-block;
}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
::-webkit-scrollbar-track {
    background: var(--shein-light-gray);
}
::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* ==========================================================================
   LOADING / SKELETON
   ========================================================================== */
@keyframes shein-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.loading-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shein-shimmer 1.5s infinite;
    border-radius: 0;
}

/* ==========================================================================
   RESPONSIVE — TABLET (max 991px)
   ========================================================================== */
@media (max-width: 991.98px) {
    .tf-header .header-inner {
        padding: 0 12px;
        gap: 10px;
    }
    .tf-header .logo-site img {
        max-height: 26px !important;
    }
}

/* ==========================================================================
   RESPONSIVE — MOBILE (max 767px)
   ========================================================================== */
@media (max-width: 767.98px) {
    body {
        font-size: 13px;
    }
    .tf-topbar {
        padding: 5px 0 !important;
    }
    .tf-topbar p,
    .tf-topbar a {
        font-size: 10px !important;
    }
    .tf-header .header-inner {
        padding: 0 10px;
        gap: 6px;
    }
    .tf-header .logo-site img {
        max-height: 22px !important;
    }
    .section-title,
    .tf-section-title,
    [class*="section-title"] h2 {
        font-size: 15px !important;
    }
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .tf-categories-slider .category-item .category-img {
        width: 58px;
        height: 58px;
    }
    .tf-categories-slider .category-item .category-name {
        font-size: 10px;
    }
}

/* ==========================================================================
   RESPONSIVE — SMALL MOBILE (max 480px)
   ========================================================================== */
@media (max-width: 479.98px) {
    .tf-header .logo-site img {
        max-height: 18px !important;
    }
    .tf-header .nav-icon-list .nav-icon-item,
    .tf-header .nav-icon-list a {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
    }
}

/* ==========================================================================
   RESPONSIVE — LARGE DESKTOP (min 1200px)
   ========================================================================== */
@media (min-width: 1200px) {
    .tf-header .header-inner {
        padding: 0 24px;
        gap: 20px;
    }
    .header-s3 .form_search-product,
    .header-center .form_search-product {
        max-width: 660px;
    }
}

/* ==========================================================================
   UTILITIES — Remove theme decorative elements
   ========================================================================== */
/* Preloader hide faster */
#preloader-active {
    transition: opacity 0.3s !important;
}

/* Color swatch dots on product cards */
.card-product .product-colors,
.card-product .swatch-colors {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    flex-wrap: wrap;
}
.card-product .product-colors span,
.card-product .swatch-colors span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--shein-border);
    cursor: pointer;
}

/* Site-wide link default */
a {
    text-decoration: none !important;
}
a:hover {
    text-decoration: none !important;
}

/* Container max-width alignment */
@media (min-width: 1400px) {
    .container {
        max-width: 1380px;
    }
}

/* ==========================================================================
   SHEIN-Style Theme Enhancements (Sub-categories, Sidebar, Dashboard, Product)
   ========================================================================== */

/* 1. Sub-categories Scroll bar */
.shein-subcategories-scroll {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}
.shein-subcategories-scroll::-webkit-scrollbar {
    height: 4px;
}
.shein-subcategories-scroll::-webkit-scrollbar-track {
    background: #f5f5f5;
}
.shein-subcategories-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}
.shein-subcategories-scroll__track {
    display: flex;
    gap: 16px;
    padding: 4px 0;
}
.shein-subcategory-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 76px;
    text-decoration: none !important;
}
.shein-subcategory-item__img-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 6px;
    border: 1px solid #e5e5e5;
    background: #f9f9f9;
}
.shein-subcategory-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shein-subcategory-item__name {
    font-size: 11px;
    color: #222;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
    max-height: 2.4em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 2. Mobile Category Sidebar with tabs */
.shein-mobile-sidebar {
    max-width: 85% !important;
}
.shein-sidebar-tabs {
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
}
.shein-sidebar-tabs::-webkit-scrollbar {
    display: none;
}
.shein-sidebar-tabs .nav-item {
    margin-bottom: -1px;
}
.shein-sidebar-tabs .nav-link {
    border: none !important;
    color: #666;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 12px !important;
    background: transparent !important;
    position: relative;
}
.shein-sidebar-tabs .nav-link.active {
    color: #222 !important;
    font-weight: 700;
}
.shein-sidebar-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 2px;
    background: #222;
}
.shein-sidebar-content {
    background: #fff;
    padding-top: 10px;
}
.shein-sidebar-list {
    display: flex;
    flex-direction: column;
}
.shein-sidebar-item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none !important;
}
.shein-sidebar-item__img-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
    border: 1px solid #eee;
}
.shein-sidebar-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shein-sidebar-item__name {
    font-size: 13px;
    color: #222;
    font-weight: 500;
    flex: 1;
}
.shein-sidebar-item__caret {
    font-size: 12px;
    color: #999;
}
.shein-sidebar-item--all {
    background: #fafafa;
}
.shein-sidebar-item--all .shein-sidebar-item__name {
    font-weight: 600;
    color: #555;
}

/* 3. Customer Dashboard & Overview ("Me" Page) */
.shein-customer-dashboard {
    background: #f5f5f5;
}
.shein-dashboard-sidebar {
    background: #fff;
    border: 1px solid #e5e5e5;
}
.shein-dashboard-user-card {
    border-bottom: 1px solid #e5e5e5;
}
.shein-dashboard-avatar-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.shein-dashboard-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shein-dashboard-username {
    font-size: 16px;
    font-weight: 700;
    color: #222;
}
.shein-dashboard-level-badge {
    display: inline-block;
    background: #f0e6d2;
    color: #8c6a23;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.shein-dashboard-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.shein-dashboard-menu li {
    border-bottom: 1px solid #f5f5f5;
}
.shein-dashboard-menu li:last-child {
    border-bottom: none;
}
.shein-dashboard-menu-link {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: #444 !important;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
    text-decoration: none !important;
}
.shein-dashboard-menu-link:hover,
.shein-dashboard-menu-link.active {
    background: #fafafa;
    color: #000 !important;
    font-weight: 700;
}
.shein-dashboard-menu-link .menu-icon {
    width: 24px;
    font-size: 16px;
}
.shein-dashboard-content-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 20px;
}
@media (max-width: 767.98px) {
    .shein-dashboard-content-card {
        padding: 12px;
        border: none;
        background: transparent;
    }
}

/* "Me" Page Specific (Mobile style overview) */
.shein-me-header {
    background: #fff;
    padding: 14px 16px;
    border: 1px solid #e5e5e5;
}
.shein-me-username {
    font-size: 18px;
    font-weight: 700;
    color: #222;
}
.shein-me-level {
    font-size: 11px;
    background: #f2f2f2;
    color: #666;
    padding: 1px 6px;
    font-weight: 600;
    border-radius: 3px;
}
.shein-me-settings-btn {
    font-size: 20px;
    color: #222 !important;
}
.shein-promo-cards .shein-saver-card {
    background: #FFF5F5;
    border: 1px solid #FFCCD2;
    color: #222;
}
.shein-saver-logo {
    font-weight: 800;
    font-size: 14px;
    color: #222;
}
.shein-saver-logo span {
    background: #FF4747;
    color: #fff;
    padding: 1px 4px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 2px;
    margin-left: 2px;
}
.shein-saver-subtitle {
    font-size: 11px;
    color: #900;
    font-weight: 600;
}
.shein-coupons-wrap {
    justify-content: space-between;
}
.shein-coupon-item {
    background: #fff;
    border: 1px dashed #FF4747;
    border-radius: 4px;
    flex: 1;
    padding: 6px 2px;
    box-shadow: 0 1px 3px rgba(255, 71, 71, 0.05);
}
.shein-coupon-item .coupon-title {
    font-size: 13px;
    font-weight: 800;
    color: #FF4747;
}
.shein-coupon-item .coupon-title span {
    font-size: 9px;
    font-weight: 500;
}
.shein-coupon-item .coupon-min {
    font-size: 9px;
    color: #666;
    margin-top: 1px;
}
.shein-club-card {
    background: #FCF8F2;
    border: 1px solid #EFE4D6;
}
.shein-club-logo {
    font-weight: 700;
    font-size: 13px;
    color: #8c6a23;
}
.shein-club-price {
    font-size: 11px;
    color: #a17c46;
    font-weight: 600;
}
.shein-join-btn {
    font-size: 12px;
    font-weight: 700;
    border-radius: 2px;
}
.shein-stats-row .stat-item {
    flex: 1;
    border-right: 1px solid #eee;
}
.shein-stats-row .stat-item:last-child {
    border-right: none;
}
.shein-stats-row .stat-num {
    font-size: 15px;
    color: #222;
}
.shein-stats-row .stat-label {
    font-size: 11px;
    margin-top: 2px;
}
.shein-box-title {
    font-size: 14px;
    font-weight: 700;
    color: #222;
}
.shein-view-all-link {
    font-size: 12px;
    text-decoration: none !important;
}
.shein-orders-icons .order-icon-item {
    flex: 1;
    color: #222 !important;
}
.shein-orders-icons .order-icon-item i {
    font-size: 22px;
    display: block;
    margin-bottom: 6px;
    color: #333;
}
.shein-orders-icons .order-icon-item .label {
    font-size: 11px;
}
.shein-services-grid .service-item i {
    color: #444;
}
.shein-services-grid .service-item .label {
    font-size: 11px;
}
.shein-tabs-box #sheinOverviewTabs {
    border-bottom: 1px solid #e5e5e5;
}
.shein-tabs-box #sheinOverviewTabs .nav-link {
    border: none;
    color: #666;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
}
.shein-tabs-box #sheinOverviewTabs .nav-link.active {
    color: #222;
    border-bottom: 2px solid #222;
}

/* 4. Product detail enhancements */
.shein-product-detail-price {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--shein-red) !important;
}
.shein-save-banner {
    display: inline-block;
    background: linear-gradient(90deg, #FF6A00 0%, #FF4747 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    margin-top: 6px;
    margin-bottom: 10px;
    border-radius: 2px;
}

/* 5. Mobile header logo and elements */
.shein-header--mobile {
    background: #fff !important;
    border-bottom: 1px solid #e5e5e5 !important;
}
.shein-header--mobile .shein-header__inner {
    height: 52px;
}
.shein-header__logo-text {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #222222 !important;
    background: transparent !important;
}

/* Removes white rectangle box around uploaded logo images */
.shein-header__logo img,
.shein-header__logo-text img {
    mix-blend-mode: multiply !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 6. Mobile bottom tab bar */
.shein-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1050;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    padding-bottom: env(safe-area-inset-bottom);
}
.shein-bottom-bar__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #777 !important;
    font-size: 10px;
    font-weight: 500;
    text-decoration: none !important;
    flex: 1;
    height: 100%;
}
.shein-bottom-bar__tab i {
    font-size: 20px;
    margin-bottom: 2px;
}
.shein-bottom-bar__tab--active {
    color: #000 !important;
    font-weight: 700;
}
.shein-bottom-bar__tab--active i {
    color: #000 !important;
}
.shein-bottom-bar__badge {
    position: absolute;
    top: 6px;
    background: #FF4747;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 12px;
}

/* 7. Homepage Circular categories 2-row layout on mobile */
@media (max-width: 767.98px) {
    .shein-cat-circles {
        background: #fff;
        padding: 12px 0;
    }
    .shein-cat-circles__track {
        display: grid !important;
        grid-template-rows: repeat(2, auto) !important;
        grid-auto-flow: column !important;
        overflow-x: auto !important;
        gap: 12px 16px !important;
        padding: 4px 16px !important;
        -webkit-overflow-scrolling: touch;
    }
    .shein-cat-circle {
        width: 64px !important;
    }
    .shein-cat-circle__img {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
    }
    .shein-cat-circle__name {
        font-size: 10px !important;
        margin-top: 4px !important;
    }
}

/* 8. Double Card promo layout on mobile */
@media (max-width: 767.98px) {
    .shein-promo-row__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 8px !important;
        padding: 0 12px !important;
    }
    .shein-promo-row__grid > div:last-child {
        display: block !important; /* Allow last card on mobile */
    }
    .shein-promo-card {
        padding: 12px !important;
    }
}

/* 9. Mobile shipping/return banner (.shein-info-strip) */
.shein-info-strip {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 16px !important;
    background: #FFF8EE !important; /* light warm cream like SHEIN */
    border-bottom: 1px solid #f0e8d0 !important;
    margin-bottom: 8px;
}
.shein-info-strip__item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.shein-info-strip__item:first-child {
    border-right: 1px solid #e8decb !important;
    padding-right: 8px;
    flex: 1.1;
}
.shein-info-strip__item:last-child {
    padding-left: 12px;
    flex: 0.9;
}
.shein-info-strip__icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
}
.shein-info-strip__item div {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px;
}
.shein-info-strip__item strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #4b3621 !important; /* dark brown-red text style */
    line-height: 1.2 !important;
}
.shein-info-strip__item small {
    font-size: 10px !important;
    color: #9c8a78 !important; /* light brown-red subtext */
    line-height: 1.2 !important;
}

/* 10. Hide topbars and desktop header submenus on mobile */
@media (max-width: 1199.98px) {
    .shein-topbar,
    .shein-topbar__inner,
    .shein-nav__dropdown .shein-nav__panel,
    .shein-nav__dropdown .shein-nav__panel-link,
    .shein-nav__panel {
        display: none !important;
    }
    .shein-nav {
        border-bottom: 1px solid #eee;
    }
    .shein-nav__inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 16px !important;
        padding: 8px 16px !important;
    }
    .shein-nav__item {
        display: inline-block !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #222 !important;
    }
}

/* 11. Shein Mobile Top Category Tabs Bar */
.shein-mobile-tabs {
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding: 6px 0;
}
.shein-mobile-tabs::-webkit-scrollbar {
    display: none;
}
.shein-mobile-tabs__inner {
    display: flex;
    gap: 20px;
    padding: 0 16px;
}
.shein-mobile-tabs__tab {
    display: inline-block;
    color: #666 !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    position: relative;
    padding: 4px 0;
}
.shein-mobile-tabs__tab--active {
    color: #000 !important;
    font-weight: 700;
}
.shein-mobile-tabs__tab--active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 2px;
    background: #000;
}
/* Scrolled Header and Sticky Tabs styling for Mobile */
.shein-header--mobile.shein-header--scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f2f2f2 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    z-index: 1050 !important;
}

/* Scrolled element visibility toggles */
.shein-header--scrolled .shein-header__logo-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #222222 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.shein-header--scrolled .shein-header__logo-text img {
    filter: none !important;
    display: block !important;
    max-height: 32px !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.shein-header--scrolled .shein-header__logo-text span {
    color: #222222 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.shein-header--scrolled .shein-header__mobile-scrolled-search {
    display: flex !important;
}
.shein-header--scrolled .shein-header__mobile-search-trigger {
    display: none !important;
}
.shein-header--scrolled .shein-header__icon {
    color: #222 !important; /* icons become black on solid white header */
}
.shein-header--scrolled .shein-header__icon svg {
    stroke: #222 !important;
}

/* Scrolled search form layout - white background, grey border, black button */
.shein-header__mobile-scrolled-search {
    display: none;
    align-items: center;
    background: #ffffff !important;
    border: 1px solid #7f7f7f !important;
    border-radius: 4px !important;
    height: 36px !important;
    padding-left: 10px !important;
    padding-right: 0 !important;
    margin: 0;
    position: relative;
    overflow: hidden;
}
.shein-header__mobile-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    color: #222 !important;
    outline: none !important;
    padding: 0 !important;
    width: 100%;
}
.shein-header__mobile-search-camera {
    border: none !important;
    background: transparent !important;
    color: #666 !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
}
.shein-header__mobile-search-btn {
    border: none !important;
    background: #222 !important; /* solid black button */
    color: #fff !important; /* white search icon */
    height: 36px !important;
    width: 42px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 3px 3px 0 !important;
}

/* Sticky Category Tabs Bar when scrolled */
.shein-mobile-tabs.shein-mobile-tabs--scrolled {
    position: fixed !important;
    top: 54px !important; /* directly below header */
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
    z-index: 1040 !important;
    padding: 8px 0 !important;
}
.shein-mobile-tabs--scrolled .shein-mobile-tabs__tab {
    color: #222 !important;
}
.shein-mobile-tabs--scrolled .shein-mobile-tabs__tab--active {
    color: #000 !important;
    font-weight: 700 !important;
}
.shein-mobile-tabs--scrolled .shein-mobile-tabs__tab--active::after {
    background: #000 !important;
}

/* Specificity overrides for homepage horizontal tabs when scrolled */
.shein-homepage-wrap .shein-mobile-tabs.shein-mobile-tabs--scrolled {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
    position: fixed !important;
    z-index: 1040 !important;
    padding: 8px 0 !important;
}
.shein-homepage-wrap .shein-mobile-tabs.shein-mobile-tabs--scrolled .shein-mobile-tabs__tab {
    color: #222 !important;
    text-shadow: none !important;
}
.shein-homepage-wrap .shein-mobile-tabs.shein-mobile-tabs--scrolled .shein-mobile-tabs__tab--active {
    color: #000 !important;
}
.shein-homepage-wrap .shein-mobile-tabs.shein-mobile-tabs--scrolled .shein-mobile-tabs__tab--active::after {
    background: #000 !important;
}

/* Specificity overrides for homepage mobile header when scrolled */
.shein-homepage-wrap .shein-header--mobile.shein-header--scrolled {
    background: #ffffff !important;
    border-bottom: 1px solid #f2f2f2 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    position: fixed !important;
    z-index: 1050 !important;
}
.shein-homepage-wrap .shein-header--mobile.shein-header--scrolled .shein-header__icon {
    color: #222 !important;
}
.shein-homepage-wrap .shein-header--mobile.shein-header--scrolled .shein-header__icon svg {
    stroke: #222 !important;
}

/* 12. Hide desktop hero side columns on mobile */
@media (max-width: 1199.98px) {
    .shein-hero__side {
        display: none !important;
    }
}

/* ==========================================================================
   13. Transparent Header & Tabs Overlay (Homepage only on Mobile)
   ========================================================================== */
@media (max-width: 1199.98px) {
    .shein-homepage-wrap .shein-header--mobile {
        background: transparent !important;
        border-bottom: none !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 105;
    }
    .shein-homepage-wrap .shein-header--mobile .shein-header__logo-text {
        color: #222222 !important;
    }
    .shein-homepage-wrap .shein-header--mobile .shein-header__icon {
        color: #222222 !important;
    }
    .shein-homepage-wrap .shein-mobile-tabs {
        background: transparent !important;
        border-bottom: none !important;
        position: absolute;
        top: 52px;
        left: 0;
        right: 0;
        z-index: 105;
        padding-top: 0 !important;
        padding-bottom: 8px !important;
    }
    .shein-homepage-wrap .shein-mobile-tabs__tab {
        color: rgba(255, 255, 255, 0.85) !important;
        font-weight: 500 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
    .shein-homepage-wrap .shein-mobile-tabs__tab--active {
        color: #fff !important;
        font-weight: 700 !important;
    }
    .shein-homepage-wrap .shein-mobile-tabs__tab--active::after {
        background: #fff !important;
    }
    
    /* Ensure the hero center banner has no margin/padding and fills the top area */
    .shein-homepage-wrap .shein-hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .shein-homepage-wrap .shein-hero__center {
        width: 100% !important;
        height: auto !important;
    }
    .shein-homepage-wrap .shein-hero__slide {
        height: 280px !important; /* height to accommodate the banner nicely */
        background-position: center top !important;
        background-size: cover !important;
    }
}

/* ==========================================================================
   14. Circular Category Grid (2 Rows of 5 Columns)
   ========================================================================== */
@media (max-width: 767.98px) {
    .shein-cat-circles {
        background: #fff;
        padding: 16px 8px !important;
        margin-bottom: 12px;
    }
    /* Override horizontal scroll to behave as a clean grid */
    .shein-cat-circles__track {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        grid-template-rows: none !important;
        grid-auto-flow: row !important;
        overflow-x: hidden !important;
        gap: 16px 4px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .shein-cat-circle {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        text-decoration: none !important;
    }
    .shein-cat-circle__img {
        width: 58px !important;
        height: 58px !important;
        border-radius: 20px !important; /* rounded squircle like SHEIN */
        overflow: hidden;
        background: #f5f5f5;
        border: 1px solid #f0f0f0;
        display: block !important;
    }
    .shein-cat-circle__img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 20px !important; /* rounded squircle like SHEIN */
    }
    .shein-cat-circle__name {
        font-size: 11px !important;
        font-weight: 500 !important;
        color: #333 !important;
        margin-top: 6px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   15. Styled Section Headers (Super Deals & Trends)
   ========================================================================== */
.shein-promo-card {
    background: #fff;
    border-radius: 4px;
    padding: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.shein-promo-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.shein-promo-card__head h3 {
    font-size: 16px !important;
    margin: 0 !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
    color: #222;
    display: flex;
    align-items: center;
}
.shein-promo-card__arrow {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    text-decoration: none !important;
    position: relative;
}
.shein-promo-card__arrow::after {
    content: '>';
    font-family: monospace;
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
}

/* Specific styling for Super Deals header */
.shein-promo-card--super-deals h3 {
    color: #222;
}
.shein-promo-card--super-deals h3 em {
    color: var(--shein-red) !important;
    font-style: italic;
    font-family: "Georgia", serif;
    font-weight: 900;
    margin-left: 3px;
}
.shein-promo-card--super-deals .shein-promo-card__arrow {
    background: var(--shein-red) !important;
}

/* Specific styling for Top Trends header */
.shein-promo-card--top-trends h3 {
    font-weight: 900 !important;
    font-style: italic;
    color: #222;
    letter-spacing: 0.5px;
}
.shein-promo-card--top-trends .shein-promo-card__arrow {
    background: #222 !important;
}

/* ---- Promo card items grid (4 products in 2x2 grid inside each card) ---- */
.shein-promo-card__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
}
.shein-promo-item {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: inherit;
    gap: 4px;
}
.shein-promo-item__img {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 2px;
    background: #f5f5f5;
    aspect-ratio: 1 / 1;
}
.shein-promo-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.shein-promo-item__brand-label {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #000;
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 1px;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.shein-promo-item__price {
    font-size: 12px;
    font-weight: 700;
    color: #222;
    display: block;
}
.shein-promo-item__tag {
    font-size: 9px;
    font-weight: 500;
    color: #7c6cd9;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shein-promo-item__badge {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    display: inline-block;
    width: fit-content;
}
.shein-promo-item__badge--deals {
    background: #ffebe8;
    color: #ff2e4b;
}
.shein-promo-item__badge--shipping {
    background: #eafaf1;
    color: #1a7f3c;
}
.shein-promo-item__badge--brand {
    background: #ffebe8;
    color: #ff2e4b;
}

/* ==========================================================================
   16. DESKTOP HEADER — White background redesign (SHEIN UK exact)
   ========================================================================== */

/* Desktop header outer shell — black background */
.shein-header--desktop {
    background: #000000 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Desktop header inner layout */
.shein-header--desktop .shein-header__inner {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    height: 70px !important;
    padding: 0 24px !important;
    max-width: 1380px;
    margin: 0 auto;
}

/* Desktop logo wrapper - Force visibility and prevent collapse */
.shein-header--desktop .shein-header__logo {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    text-decoration: none !important;
    min-width: 110px !important;
    width: auto !important;
    height: auto !important;
    margin-right: 16px !important;
    text-indent: 0 !important;
    overflow: visible !important;
    position: relative !important; /* Override absolute position from parent theme */
    left: auto !important; /* Override left: 50% from parent theme */
    transform: none !important; /* Override translateX(-50%) from parent theme */
}
.shein-header--desktop .shein-header__logo img.shein-desktop-logo {
    display: block !important;
    max-height: 42px;
    width: auto;
    object-fit: contain;
    filter: none !important;
    mix-blend-mode: screen !important;
    background: transparent !important;
}
.shein-header--desktop .shein-header__logo .shein-header__wordmark {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    background: transparent !important;
}

/* Search bar — large full-width SHEIN style */
.shein-header__search-bar {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 4px !important;
    overflow: hidden;
    height: 38px !important; /* Slightly more compact height */
    transition: border-color 0.2s !important;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}
.shein-header__search-bar:focus-within {
    border-color: #ffffff !important;
    background: #ffffff !important;
}
.shein-header__search-input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    color: #000000 !important; /* Black text */
    height: 100%;
}
.shein-header__search-input::placeholder {
    color: #666666 !important; /* Darker placeholder */
    font-size: 13px;
}

/* Camera (visual search) button */
.shein-header__search-camera {
    background: none !important;
    border: none !important;
    padding: 0 10px !important;
    color: #333333 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 100%;
    border-right: 1px solid #dddddd !important;
    transition: color 0.2s;
}
.shein-header__search-camera:hover {
    color: #000000 !important;
}
.shein-header__search-camera svg {
    display: block;
}

/* Search submit button — black */
.shein-header__search-btn {
    background: #222222 !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0 18px !important;
    height: 100% !important;
    font-size: 18px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    border-radius: 0 !important;
}
.shein-header__search-btn:hover {
    background: #000000 !important;
}

/* Quick search results dropdown */
.shein-header__search-bar .bb-quick-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-top: none;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* Desktop action icons — white on black bg */
.shein-header--desktop .shein-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.shein-header--desktop .shein-header__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff !important; /* White icons */
    font-size: 22px;
    padding: 6px 10px;
    transition: opacity 0.2s;
    text-decoration: none !important;
    position: relative;
    gap: 2px;
    min-width: 52px;
}
.shein-header--desktop .shein-header__icon svg,
.shein-header--desktop .shein-header__icon i {
    color: #ffffff !important;
    stroke: #ffffff;
}
.shein-header--desktop .shein-header__icon:hover {
    opacity: 0.8;
}
.shein-header--desktop .shein-header__icon-label {
    font-size: 10px;
    font-weight: 500;
    color: #ffffff !important; /* White labels */
}
.shein-header--desktop .shein-header__badge {
    position: absolute;
    top: 2px;
    right: 6px;
    background: #E8172C;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    padding: 0 3px;
}
/* Desktop cart icon */
.shein-header--desktop .shein-header__cart {
    position: relative;
}

/* ==========================================================================
   17. DESKTOP NAV BAR — Black bottom nav (existing works, polish below)
   ========================================================================== */
.shein-nav {
    background: #222 !important;
    border-bottom: none !important;
}
.shein-nav__inner {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.shein-nav__inner::-webkit-scrollbar {
    display: none;
}
.shein-nav__item {
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 14px;
    white-space: nowrap;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
    position: relative;
}
.shein-nav__item:hover {
    background: rgba(255,255,255,0.1);
    color: #fff !important;
}
.shein-nav__item--categories {
    background: rgba(255,255,255,0.08);
    font-weight: 600;
}
.shein-nav__item--sale {
    color: #ff6b6b !important;
    font-weight: 700;
}

/* Dropdown panel — white overlay */
.shein-nav__dropdown {
    position: relative;
}
.shein-nav__dropdown:hover .shein-nav__panel {
    display: block;
}
.shein-nav__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: 2px solid #222;
    min-width: 180px;
    padding: 8px 0;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.shein-nav__panel-link {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: #333 !important;
    text-decoration: none !important;
    transition: background 0.15s;
    white-space: nowrap;
}
.shein-nav__panel-link:hover {
    background: #f5f5f5;
    color: #000 !important;
}

/* ==========================================================================
   18. PRODUCT PRICES — Red/Orange like SHEIN
   ========================================================================== */
/* Sale prices — SHEIN shows in red */
.card-product .price-new,
.tf-product-card .price-new,
.product-price .price-new,
[class*="price-sale"],
[class*="price-offer"],
.price-box .special-price .price {
    color: #E8172C !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}
/* Original price — strikethrough gray */
.card-product .price-old,
.tf-product-card .price-old,
.price-box .old-price .price {
    color: #999 !important;
    text-decoration: line-through !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    margin-left: 4px;
}
/* Percentage off badge */
.shein-discount-pct {
    display: inline-block;
    color: #E8172C;
    font-size: 12px;
    font-weight: 700;
    margin-left: 4px;
}

/* ==========================================================================
   19. INFO STRIP — Free Shipping / Free Returns (with truck icon)
   ========================================================================== */
.shein-info-strip {
    background: #FFF8EE !important;
    border-bottom: 1px solid #f0e8d0 !important;
}
.shein-info-strip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Truck icon for shipping */
.shein-info-strip__icon--truck::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2'%3E%3Cpath d='M1 3h15v13H1z'/%3E%3Cpath d='M16 8h4l3 3v5h-7V8z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Return icon */
.shein-info-strip__icon--return::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2'%3E%3Cpath d='M9 14l-4-4 4-4'/%3E%3Cpath d='M5 10h11a4 4 0 1 1 0 8h-1'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   20. MOBILE HEADER — Camera Icon + Inline Search Trigger
   ========================================================================== */
/* On non-homepage pages, show a search bar instead of icon */
body:not(.shein-homepage-wrap-active) .shein-header--mobile .shein-mobile-search-bar {
    display: flex;
}
.shein-mobile-search-bar {
    display: none;
    align-items: center;
    flex: 1;
    background: #f5f5f5;
    border-radius: 4px;
    height: 36px;
    overflow: hidden;
    margin: 0 8px;
}
.shein-mobile-search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 10px;
    font-size: 13px;
    outline: none;
    color: #222;
}
.shein-mobile-search-bar input::placeholder {
    color: #999;
}
.shein-mobile-search-bar .search-camera-btn {
    background: none;
    border: none;
    padding: 0 8px;
    color: #666;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.shein-mobile-search-bar .search-submit-btn {
    background: #222;
    border: none;
    color: #fff;
    padding: 0 12px;
    height: 100%;
    font-size: 15px;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   21. PRODUCT IMAGE HOVER — Subtle zoom (SHEIN style)
   ========================================================================== */
.card-product .product-img {
    overflow: hidden;
}
.card-product .product-img img {
    transition: transform 0.35s ease !important;
}
.card-product:hover .product-img img {
    transform: scale(1.04) !important;
}

/* ==========================================================================
   22. MOBILE CATEGORY TABS — Est. 3 Workdays special tab
   ========================================================================== */
.shein-mobile-tabs__tab[href*="delivery=fast"] {
    color: #E8172C !important;
}

/* ==========================================================================
   23. SWIPER DOTS — Exact SHEIN style
   ========================================================================== */
.shein-hero__swiper .swiper-pagination {
    bottom: 8px !important;
}
.shein-hero__swiper .swiper-pagination-bullet {
    width: 5px !important;
    height: 5px !important;
    background: rgba(255,255,255,0.6) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    margin: 0 2px !important;
    transition: all 0.25s !important;
}
.shein-hero__swiper .swiper-pagination-bullet-active {
    width: 16px !important;
    border-radius: 3px !important;
    background: #fff !important;
}

/* ==========================================================================
   24. DESKTOP RESPONSIVE — hide bottom bar, show proper header
   ========================================================================== */
@media (min-width: 1200px) {
    /* Show desktop header only */
    .shein-header--mobile {
        display: none !important;
    }
    .shein-header--desktop {
        display: block !important;
    }
    /* Hide bottom tab bar on desktop */
    .shein-bottom-bar {
        display: none !important;
    }
    body {
        padding-bottom: 0 !important;
    }
    /* Show desktop topbar */
    .shein-topbar {
        display: block !important;
    }
}

/* ==========================================================================
   25. MICRO-ANIMATIONS — Polished UX interactions
   ========================================================================== */
/* Button press feedback */
.btn-primary:active,
.shein-header__search-btn:active {
    transform: scale(0.98);
}
/* Tab hover highlight */
.shein-mobile-tabs__tab:hover {
    color: #222 !important;
}
/* Bottom bar tab press */
.shein-bottom-bar__tab:active {
    transform: scale(0.92);
    transition: transform 0.1s;
}
/* Category circle hover */
.shein-cat-circle:hover .shein-cat-circle__img {
    border-color: #222 !important;
    transform: scale(1.05);
    transition: transform 0.2s, border-color 0.2s;
}
/* Card link hover — slight opacity */
.card-product .product-info a:hover {
    opacity: 0.85;
}
/* Add to cart / wishlist button flash */
@keyframes shein-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.shein-bottom-bar__tab--active i {
    animation: shein-pulse 0.3s ease-out;
}

/* ==========================================================================
   26. DESKTOP TOPBAR — promo marquee strip (if visible)
   ========================================================================== */
.shein-topbar {
    background: #F5F0E8 !important;
    border-bottom: 1px solid #e8e0d0 !important;
    padding: 8px 0 !important;
    font-size: 12px !important;
    text-align: center;
    display: none;
}
@media (min-width: 1200px) {
    .shein-topbar {
        display: block !important;
    }
}
.shein-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.shein-topbar a,
.shein-topbar__link {
    color: #7E1E29 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}
.shein-topbar a:hover,
.shein-topbar__link:hover {
    text-decoration: underline !important;
}
.shein-topbar__divider {
    color: #ccbfa8;
    font-size: 10px;
    user-select: none;
}

/* ==========================================================================
   27. HERO SECTION — Desktop right promo panel
   ========================================================================== */
.shein-hero__right-panel {
    background: linear-gradient(135deg, #FFF5F5 0%, #FFE0E0 100%);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 24px 16px;
    text-align: center;
    position: relative;
}
.shein-hero__right-panel h3 {
    font-size: 20px;
    font-weight: 900;
    color: #222;
    line-height: 1.2;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.shein-hero__right-panel .promo-discount {
    font-size: 32px;
    font-weight: 900;
    color: #E8172C;
    line-height: 1;
    margin: 8px 0;
}
.shein-hero__right-panel .promo-tag {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.shein-hero__right-panel .promo-btn {
    margin-top: 16px;
    background: #222 !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 20px !important;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none !important;
    display: inline-block;
}
.shein-hero__right-panel .promo-btn:hover {
    background: #000 !important;
}

/* ==========================================================================
   28. SECTION DIVIDER — White card background fix
   ========================================================================== */
.shein-promo-row,
.shein-super-deals-row {
    background: #f5f5f5;
    padding: 8px;
}
@media (max-width: 767.98px) {
    .shein-promo-row,
    .shein-super-deals-row {
        padding: 6px;
    }
}
.shein-promo-row__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px;
}


/* ==========================================================================
   29. VIEWPORT SPECIFIC NAV BAR FIXES — Desktop vs Mobile
   ========================================================================== */
@media (min-width: 1200px) {
    /* Force hide mobile horizontal category tabs on desktop */
    .shein-mobile-tabs,
    section.shein-mobile-tabs {
        display: none !important;
    }
    /* Force show black category navigation bar on desktop */
    .shein-nav,
    nav.shein-nav {
        display: block !important;
        background: #222 !important;
        position: relative !important;
        z-index: 100 !important;
    }
    .shein-nav__inner {
        display: flex !important;
        background: #222 !important;
    }
    .shein-nav__item {
        color: #fff !important;
    }
}

/* ==========================================================================
   30. FLOATING BACK TO TOP BUTTON (Mobile)
   ========================================================================== */
.shein-mobile-back-to-top {
    position: fixed;
    bottom: 80px; /* Sits right above bottom tab bar */
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    outline: none;
    padding: 0;
}
.shein-mobile-back-to-top.show {
    opacity: 1;
    visibility: visible;
}
.shein-mobile-back-to-top:active {
    background: #f8f8f8 !important;
}

/* ==========================================================================
   31. CLEAN SHEIN PRODUCT CARDS (Removing Amerce Theme clutter)
   ========================================================================== */
/* Hide giant black hover buttons on product images */
.product-action_bot,
.card-product_wrapper .product-action_bot,
.card-product__layout .product-action_bot {
    display: none !important;
}

/* Hide floating action buttons (white circles) on product images */
.card-product__actions,
.product-action_list {
    display: none !important;
}

/* Hide rating stars on product list cards */
.card-product__rating,
.star-wrap.card-product__rating {
    display: none !important;
}

/* Hide vendor/store name labels (By Store Name) */
.card-product_store {
    display: none !important;
}

/* Hide scrolling marquee sale banners on product cards */
.product-marquee_sale {
    display: none !important;
}

/* Style product card images to be clean with standard aspect ratio */
.card-product_wrapper {
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border: none !important;
    position: relative !important;
}
.card-product_info {
    padding: 8px 4px !important;
}
.card-product_info .name-product {
    font-size: 13px !important;
    color: #222 !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
}
.card-product_info .price-wrap {
    margin-top: 4px !important;
}

/* ==========================================================================
   30. "FOR YOU" / RECOMMENDATION TABS — Above product grid
   ========================================================================== */
.shein-rec-tabs {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 12px;
    margin: 0 0 4px;
}
.shein-rec-tabs__inner {
    display: flex;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.shein-rec-tabs__inner::-webkit-scrollbar { display: none; }
.shein-rec-tab {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 12px 16px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.shein-rec-tab--active,
.shein-rec-tab:first-child {
    color: #222 !important;
    font-weight: 700;
    border-bottom-color: #222;
}

/* ==========================================================================
   31. PROMO CARD MOBILE FONT SIZE POLISH
   ========================================================================== */
@media (max-width: 575.98px) {
    .shein-promo-card__head h3 {
        font-size: 13px !important;
    }
    .shein-promo-card {
        padding: 10px 8px !important;
    }
    .shein-promo-card__head {
        margin-bottom: 8px !important;
    }
    .shein-promo-item__price {
        font-size: 11px !important;
    }
}

/* ==========================================================================
   32. HIDE SECTION TITLE HEADINGS in product grid (Flash Sale / Limited time offers)
   — Shein layout shows NO big section titles above product grid on homepage
   ========================================================================== */
.shein-page-content .sect-heading,
.shein-page-content .sect-heading.type-2,
.shein-page-content [class*="sect-heading"],
.shein-page-content .s-title,
.shein-page-content .s-desc,
.shein-page-content .section-title,
.shein-page-content [class*="section-title"],
.shein-page-content .tf-section-title {
    display: none !important;
}

/* ==========================================================================
   33. MOBILE CATEGORY SPLIT LAYOUT — Category Directory Page
   ========================================================================== */
.shein-mobile-category-split {
    display: flex;
    height: calc(100vh - 126px); /* Fit mobile viewport below header and above bottom bar */
    overflow: hidden;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}
.shein-mobile-category-left {
    width: 95px;
    background: #f6f6f6;
    overflow-y: auto;
    height: 100%;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
}
.shein-mobile-category-left::-webkit-scrollbar {
    display: none;
}
.shein-mobile-category-tab {
    width: 100%;
    padding: 14px 6px;
    border: none;
    background: #f6f6f6;
    font-size: 11px;
    text-align: left;
    padding-left: 12px;
    color: #222 !important;
    font-weight: 500;
    outline: none;
    transition: background 0.1s, color 0.1s;
    line-height: 1.3;
    display: block;
    cursor: pointer;
}
/* Shein active category: Black background, white text */
.shein-mobile-category-tab.active {
    background: #000 !important;
    color: #fff !important;
    font-weight: 700;
}
.shein-mobile-category-right {
    flex: 1;
    overflow-y: auto;
    height: 100%;
    padding: 12px 14px;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}
.shein-mobile-category-right::-webkit-scrollbar {
    display: none;
}
.shein-mobile-category-panel {
    width: 100%;
}
.shein-mobile-category-panel__title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
}
.shein-mobile-category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 8px;
}
.shein-mobile-category-grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    color: inherit;
}
.shein-mobile-category-grid-item__circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    background: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}
.shein-mobile-category-grid-item__circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shein-mobile-category-grid-item__circle--all {
    background: #eeeeee;
    color: #222;
    font-size: 16px;
}
.shein-mobile-category-grid-item__name {
    font-size: 10px;
    color: #333;
    font-weight: 400;
    text-align: center;
    line-height: 1.25;
    word-break: break-word;
    max-width: 76px;
    display: block;
}

/* ==========================================================================
   34. SHEIN TRENDS PAGE — Mobile Trends Feed Layout
   ========================================================================== */
.shein-trends-layout {
    background: #f7f7f7;
    min-height: 100vh;
    padding-bottom: 70px;
}
.shein-trends-header {
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.shein-trends-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-style: italic;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: 0.5px;
    color: #000;
}
.shein-trends-header-actions a {
    color: #222 !important;
    transition: opacity 0.15s;
}
.shein-trends-header-actions a:hover {
    opacity: 0.7;
}
.shein-trends-banner {
    background: #929a9c;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border-radius: 12px !important;
}
.shein-trends-banner__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.15);
    z-index: 0;
}
.shein-trends-banner__content {
    z-index: 1;
}
.shein-trends-badge-new {
    background: #000;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.2px;
}
.shein-trends-banner-card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.2s;
}
.shein-trends-banner-card:active {
    transform: scale(0.97);
}
.shein-trends-banner-card__price {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
}
.shein-trends-banner-card__store {
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    background: #f7f7f7;
    padding: 2px 0;
    border-radius: 4px;
    color: #666;
}
.shein-trends-main-tabs {
    position: sticky;
    top: 57px;
    z-index: 1010;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e5e5e5 !important;
}
.shein-trends-tab-btn {
    font-size: 13px !important;
    font-weight: 500;
    color: #666 !important;
    position: relative !important;
    outline: none !important;
    transition: color 0.15s;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px 6px !important;
    overflow: visible !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
.shein-trends-tab-btn span {
    display: inline-block !important;
    text-align: center !important;
    margin: 0 auto !important;
}
.shein-trends-tab-btn.active {
    color: #000 !important;
    font-weight: 700 !important;
}
.shein-trends-tab-btn.active::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 54px !important;
    height: 3px !important;
    background: #000 !important;
    border-radius: 2px !important;
    z-index: 10 !important;
}
.shein-trends-chips-wrap {
    overflow: hidden;
    border-bottom: 1px solid #f2f2f2;
}
.shein-trends-chips-track {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.shein-trends-chips-track::-webkit-scrollbar {
    display: none;
}
.shein-trends-chip {
    background: #f5f5f5;
    color: #444;
    font-size: 11px;
    padding: 6px 14px;
    border-radius: 15px;
    font-weight: 500;
    display: inline-block;
    transition: all 0.15s;
}
/* Shein active chip design: Light lavender background, purple text */
.shein-trends-chip.active {
    background: #f2efff !important;
    color: #7c53fc !important;
    font-weight: 600;
}
.shein-trends-products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.shein-trends-product-card {
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    padding: 8px !important;
}
.shein-trends-card-brand {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(255,255,255,0.9);
    color: #222;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.shein-trends-card-badge-sale {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #FF4747;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
}
.shein-trends-card-tag {
    font-size: 10px;
    color: #7c53fc;
    font-weight: 600;
    margin-bottom: 2px;
}
.shein-trends-card-name {
    font-size: 12px;
    color: #222;
    font-weight: 400;
}
.shein-trends-card-stats {
    font-size: 10px;
    color: #888;
}
.shein-trends-card-delivery {
    font-size: 10px;
    font-weight: 500;
    color: #2e7d32 !important;
}
.shein-trends-card-price {
    font-size: 14px;
    color: #FF4747;
    font-weight: 700;
}

/* ==========================================================================
   35. SHEIN CART PAGE — Mobile Cart Layout
   ========================================================================== */
.shein-cart-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid #f0f0f0;
}
.shein-cart-title {
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
/* === Empty Cart Mobile === */
.shein-empty-cart {
    background: #f7f7f7;
    min-height: calc(100vh - 126px);
    padding-bottom: 70px;
}
.shein-empty-cart__body {
    padding: 60px 24px 40px;
    background: #fff;
    margin-bottom: 8px;
}
.shein-empty-cart__icon-wrap {
    width: 90px;
    height: 90px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.shein-empty-cart__icon-wrap i {
    font-size: 36px;
    color: #ccc;
}
.shein-empty-cart__title {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin-bottom: 8px;
}
.shein-empty-cart__subtitle {
    font-size: 13px;
    color: #999;
    margin-bottom: 24px;
}
.shein-empty-cart__btn {
    display: inline-block;
    background: #000;
    color: #fff;
    border-radius: 22px;
    padding: 12px 40px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s;
}
.shein-empty-cart__btn:hover {
    color: #fff;
    opacity: 0.85;
}
.shein-empty-cart__promo-strip {
    background: #fff;
    margin-bottom: 8px;
}
.shein-empty-cart__promo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
}
.shein-empty-cart__promo-item i:first-child {
    font-size: 18px;
    color: #ff4747;
}
.shein-empty-cart__also-like {
    background: #fff;
    padding-top: 16px;
}
.shein-empty-cart__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.shein-empty-cart__rec-card {
    border-radius: 8px;
    overflow: hidden;
    background: #f9f9f9;
}
.shein-empty-cart__rec-img-wrap {
    aspect-ratio: 3/4;
    overflow: hidden;
}
.shein-empty-cart__rec-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shein-empty-cart__rec-price {
    font-size: 11px;
    font-weight: 700;
    color: #ff4747;
    padding: 4px 6px;
    text-align: center;
}

/* ==========================================================================
   36. SHEIN ME / ACCOUNT PAGE — Mobile Overview Layout
   ========================================================================== */
.shein-overview-mobile-wrap {
    padding: 16px;
    background: #f7f7f7;
    min-height: calc(100vh - 126px);
    padding-bottom: 80px;
}
.shein-me-header {
    background: #fff;
    padding: 16px !important;
    border-radius: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.shein-me-username {
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
.shein-me-level {
    background: #f0ecff;
    color: #7c53fc;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.shein-me-settings-btn {
    color: #444 !important;
    font-size: 20px;
}
.shein-saver-card {
    background: linear-gradient(135deg, #fff5f5, #fff8f0);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(255,71,71,0.08);
}
.shein-saver-logo {
    font-weight: 900;
    font-size: 14px;
    color: #000;
}
.shein-saver-logo span {
    color: #ff4747;
}
.shein-saver-subtitle {
    font-size: 10px;
    color: #888;
}
.shein-coupon-item {
    background: #fff;
    border: 1.5px dashed #ffcbcb;
    border-radius: 8px;
    padding: 8px 10px;
    flex: 1;
}
.shein-coupon-item .coupon-title {
    font-size: 13px;
    font-weight: 700;
    color: #ff4747;
    line-height: 1.2;
}
.shein-coupon-item .coupon-title span {
    font-size: 10px;
    font-weight: 500;
}
.shein-coupon-item .coupon-min {
    font-size: 9px;
    color: #888;
    margin-top: 2px;
}
.shein-club-card {
    background: linear-gradient(135deg, #fffbec, #fff7dc);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(161,124,70,0.07);
}
.shein-club-logo {
    font-weight: 700;
    font-size: 13px;
    color: #a17c46;
}
.shein-club-price {
    font-size: 10px;
    color: #bba76a;
}
.shein-join-btn {
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
}
.shein-stats-row {
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.stat-num {
    font-size: 18px;
    color: #222;
}
.stat-label {
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}
.shein-orders-box,
.shein-services-box {
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    border: none !important;
}
.shein-box-title {
    font-size: 14px;
    font-weight: 700;
    color: #000;
}
.shein-view-all-link {
    font-size: 12px;
    text-decoration: none !important;
}
.shein-orders-icons .order-icon-item {
    color: #444;
    flex: 1;
}
.shein-orders-icons .order-icon-item i {
    font-size: 22px;
    display: block;
    margin: 0 auto 4px;
}
.shein-orders-icons .order-icon-item .label {
    font-size: 10px;
    color: #888;
}
.shein-services-grid .service-item i {
    display: block;
    margin: 0 auto 6px;
}
.shein-services-grid .service-item .label {
    font-size: 10px;
    color: #666;
    display: block;
}
.shein-tabs-box {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
}
.shein-tabs-box .nav-tabs {
    border-bottom: 1px solid #f0f0f0 !important;
}
.shein-tabs-box .nav-tabs .nav-link {
    font-size: 13px;
    font-weight: 500;
    color: #888;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 12px 20px;
}
.shein-tabs-box .nav-tabs .nav-link.active {
    color: #000 !important;
    border-bottom-color: #000 !important;
    font-weight: 700;
    background: none !important;
}

/* ==========================================================================
   37. ME PAGE HEADER / CUSTOMER DASHBOARD HEADER
   ========================================================================== */
.shein-me-page-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}
/* Mobile: hide main desktop header on customer pages - handled by base.blade */
@media (max-width: 1199px) {
    .shein-customer-dashboard {
        padding-top: 0 !important;
    }
    /* Remove double padding on mobile content card */
    .shein-dashboard-content-card {
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }
}

/* ==========================================================================
   38. PRODUCT CATEGORY TABS — Active state fix when trends tab is active
   ========================================================================== */
/* Hide Active indicator on Category tab when user is on /products?trends=1
   handled by toolbar-bottom.blade.php logic already, but ensure class parity */
.shein-bottom-bar__tab--active .shein-bottom-bar__tab-label {
    font-weight: 700;
}

/* ==========================================================================
   39. ASPECT RATIO UTILITY CLASSES
   ========================================================================== */
.ratio {
    position: relative;
    width: 100%;
    display: block;
}
.ratio::before {
    display: block;
    content: "";
}
.ratio-3x4::before {
    padding-top: 133.33333333%;
}
.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* ==========================================================================
   SHEIN AUTH PAGE STYLES (Login / Register / Password Reset)
   Version 4.0 — Mobile-first SHEIN app style
   ========================================================================== */

/* When bodyClass = shein-auth-page OR on login/register pages */
.shein-auth-page body,
body.shein-auth-page {
    background: #fff !important;
}

/* Remove section wrapper padding */
.shein-auth-page .flat-spacing-2,
.shein-auth-page section.flat-spacing-2 {
    padding: 0 !important;
}

.shein-auth-page .auth-card,
.shein-auth-page .amerce-auth-card {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Auth page form field styles — clean underline only */
.shein-auth-page .form-control,
body.shein-auth-page input[type="email"],
body.shein-auth-page input[type="password"],
body.shein-auth-page input[type="text"] {
    border: none !important;
    border-bottom: 1.5px solid #ddd !important;
    border-radius: 0 !important;
    padding: 12px 0 !important;
    font-size: 15px !important;
    background: transparent !important;
    box-shadow: none !important;
}
.shein-auth-page .form-control:focus {
    border-bottom-color: #222 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Auth submit button */
.shein-auth-page .btn-primary,
.shein-auth-page button[type="submit"] {
    background: #222 !important;
    border-color: #222 !important;
    border-radius: 4px !important;
    width: 100% !important;
    padding: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #fff !important;
    margin-top: 24px !important;
    text-transform: uppercase !important;
}
.shein-auth-page .btn-primary:hover { background: #111 !important; }

/* ==========================================================================
   SHEIN CUSTOMER ME PAGE — Remove main site header (using withoutLayout)
   ========================================================================== */
.shein-me-shell {
    max-width: 600px;
    margin: 0 auto;
    background: #f7f7f7;
    min-height: 100vh;
    position: relative;
}
.shein-me-page-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #eee;
}
.shein-overview-mobile-wrap {
    padding: 12px 12px 80px;
}

/* Me page user header */
.shein-me-header { margin-bottom: 12px; }
.shein-me-username { font-size: 18px; font-weight: 700; color: #222; }
.shein-me-level {
    font-size: 11px;
    background: #e8f4fd;
    color: #1a7ac4;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}
.shein-me-settings-btn { color: #555; font-size: 20px; }

/* Saver / Club cards */
.shein-saver-card { background: #fff8f8; border: 1px solid #fce4e4; border-radius: 8px; }
.shein-saver-logo { font-size: 14px; font-weight: 900; color: #222; }
.shein-saver-logo span { background: #ff4747; color: #fff; padding: 1px 5px; border-radius: 2px; margin-left: 3px; }
.shein-saver-subtitle { font-size: 11px; color: #999; }
.shein-coupons-wrap { gap: 6px; }
.shein-coupon-item { border: 1.5px dashed #ff9999; border-radius: 4px; padding: 6px 10px; flex: 1; }
.shein-coupon-item .coupon-title { font-size: 13px; font-weight: 800; color: #ff4747; }
.shein-coupon-item .coupon-title span { font-size: 10px; }
.shein-coupon-item .coupon-min { font-size: 10px; color: #bbb; }
.shein-club-card { background: linear-gradient(135deg, #fffbf0, #fdf2d6); border: 1px solid #f0e0b0; border-radius: 8px; }
.shein-club-logo { font-size: 13px; font-weight: 800; color: #a17c46; }
.shein-club-price { font-size: 11px; color: #b8962e; }
.shein-join-btn { border-radius: 4px !important; font-size: 13px !important; font-weight: 700 !important; padding: 8px !important; letter-spacing: 0.5px !important; }

/* Stats row */
.shein-stats-row { border-radius: 8px; }
.stat-num { font-size: 18px; color: #222; }
.stat-label { font-size: 11px; color: #999; margin-top: 2px; }

/* Orders box */
.shein-orders-box, .shein-services-box, .shein-tabs-box, .shein-account-box { border-radius: 8px !important; }
.shein-box-title { font-size: 14px; font-weight: 700; color: #222; }
.shein-view-all-link { font-size: 12px; }
.order-icon-item i { font-size: 22px; color: #555; display: block; margin-bottom: 4px; }
.order-icon-item .label { font-size: 11px; color: #999; }
.service-item i { color: #555; }
.service-item .label { font-size: 11px; color: #999; }

/* Bottom Tabs inside Me shell */
.shein-dashboard-content-card { padding: 0; }


/* ==========================================================================
   SHEIN RESPONSIVE LAYOUT — Proper breakpoint-based design
   Version 5.1 — Mobile-first, properly responsive for all devices
   ========================================================================== */

/* ======== MOBILE (< 768px) — SHEIN App style ======== */
@media (max-width: 767px) {
    body { background: #f5f5f5 !important; }

    /* Mobile header only */
    .shein-header--desktop { display: none !important; }
    .shein-nav { display: none !important; }
    .shein-header--mobile, .shein-header--unified { display: block !important; }

    /* Bottom tab bar — only on mobile */
    .shein-bottom-bar { display: flex !important; }
}

/* ======== TABLET & DESKTOP (>= 768px) — Full SHEIN desktop layout ======== */
@media (min-width: 768px) {
    /* Show desktop header, hide mobile-only elements */
    .shein-header--desktop { display: block !important; }
    .shein-nav { display: block !important; }
    .shein-header--mobile.shein-header--unified { display: none !important; }

    /* Hide mobile bottom bar on desktop */
    .shein-bottom-bar { display: none !important; }

    /* Hide mobile-only category scroll tabs */
    .shein-mobile-tabs { display: none !important; }

    /* Product grid: 3 columns on tablet */
    .tf-product-wrap.grid-type {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ======== LARGE DESKTOP (>= 1200px) ======== */
@media (min-width: 1200px) {
    /* Product grid: 4 columns on desktop */
    .tf-product-wrap.grid-type {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ======== SEARCH OVERLAY — all devices ======== */
/* Always works regardless of breakpoint */
.shein-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

/* ==========================================================================
   SHEIN MOBILE FILTER CHIPS ROW — Search / Category Listing Page
   Version 5.2
   ========================================================================== */
@media (max-width: 1199.98px) {
    .tf-shop-control.shein-mobile-filter-chips-bar {
        display: flex !important;
        align-items: center;
        gap: 8px;
        padding: 10px 12px;
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar on Firefox */
    }
    .tf-shop-control.shein-mobile-filter-chips-bar::-webkit-scrollbar {
        display: none; /* Hide scrollbar on Chrome/Safari */
    }

    /* Individual Filter Chips */
    .tf-shop-control.shein-mobile-filter-chips-bar .tf-btn-filter,
    .tf-shop-control.shein-mobile-filter-chips-bar .tf-control-sorting .btn-select,
    .tf-shop-control.shein-mobile-filter-chips-bar .shein-filter-chip {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        background: #f5f5f5 !important;
        border: none !important;
        border-radius: 16px !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: #222 !important;
        cursor: pointer;
        outline: none !important;
        transition: all 0.2s ease;
        height: auto !important;
        line-height: 1.2 !important;
    }

    .tf-shop-control.shein-mobile-filter-chips-bar .tf-btn-filter:hover,
    .tf-shop-control.shein-mobile-filter-chips-bar .tf-control-sorting .btn-select:hover,
    .tf-shop-control.shein-mobile-filter-chips-bar .shein-filter-chip:hover {
        background: #e8e8e8 !important;
    }

    /* Active Filter Chips */
    .tf-shop-control.shein-mobile-filter-chips-bar .shein-filter-chip--active {
        background: #000 !important;
        color: #fff !important;
    }

    /* Hide unused layout options on mobile filters */
    .tf-shop-control.shein-mobile-filter-chips-bar .tf-control-layout,
    .tf-shop-control.shein-mobile-filter-chips-bar .tf-control-per-page {
        display: none !important;
    }

    .tf-shop-control.shein-mobile-filter-chips-bar .tf-control-sorting {
        display: inline-block;
        margin: 0;
    }

    /* Fix sort dropdown cutoff on mobile -> render as clean SHEIN bottom sheet */
    .tf-shop-control.shein-mobile-filter-chips-bar .tf-control-sorting .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 18px 18px 0 0 !important;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2) !important;
        padding: 16px 20px 24px !important;
        z-index: 999999 !important;
        background: #ffffff !important;
        border: none !important;
        transform: none !important;
    }

    .tf-shop-control.shein-mobile-filter-chips-bar .tf-control-sorting .dropdown-menu .select-item {
        padding: 12px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        color: #222 !important;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 2px;
    }

    .tf-shop-control.shein-mobile-filter-chips-bar .tf-control-sorting .dropdown-menu .select-item.active {
        background: #f5f5f5 !important;
        color: #000 !important;
        font-weight: 600 !important;
    }
}

@media (min-width: 1200px) {
    /* Hide mobile filter chips and filters toggle button on desktop, since sidebar is already visible */
    .tf-shop-control.shein-mobile-filter-chips-bar .shein-filter-chip,
    .tf-shop-control.shein-mobile-filter-chips-bar .tf-btn-filter {
        display: none !important;
    }
    .tf-shop-control.shein-mobile-filter-chips-bar {
        border: none !important;
        padding: 10px 0 !important;
        margin-bottom: 20px !important;
    }
}
/* ==========================================================================
   40. SHEIN FOOTER — Spacing and Mobile Layout Fixes
   ========================================================================== */
.shein-footer {
    background: #f7f7f7 !important;
    border-top: 1px solid #e5e5e5 !important;
    padding: 40px 16px 20px !important;
    font-family: 'Inter', sans-serif !important;
}

.shein-footer__top {
    max-width: 1380px;
    margin: 0 auto;
    padding-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
}

.shein-footer__cols {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) 2.2fr !important;
    gap: 32px;
}

.shein-footer__col {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.shein-footer__col h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #222 !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.5px;
}

.shein-footer__col a {
    color: #666666 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: color 0.15s;
}

.shein-footer__col a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* Social icons */
.shein-footer__social {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap;
    margin-bottom: 16px !important;
}

.shein-footer__social a {
    color: #666666 !important;
    font-size: 20px !important;
    transition: color 0.15s;
}

.shein-footer__social a:hover {
    color: #000000 !important;
}

/* App Download Badges */
.shein-footer__app-title {
    margin-top: 16px !important;
}

.shein-footer__apps {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap;
}

.shein-footer__app-badge {
    display: inline-block !important;
    transition: opacity 0.15s;
}

.shein-footer__app-badge:hover {
    opacity: 0.8;
}

/* Newsletter section */
.shein-footer__newsletter-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.shein-footer__news-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #222 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.5px;
}

.shein-footer__news-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

.shein-footer__news-row {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #7f7f7f !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    height: 38px !important;
    width: 100% !important;
}

.shein-footer__news-row input {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    height: 100% !important;
    color: #222222 !important;
    outline: none !important;
}

.shein-footer__news-row button {
    background: #222222 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    height: 100% !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    transition: background 0.15s;
}

.shein-footer__news-row button:hover {
    background: #000000 !important;
}

.shein-footer__news-cc {
    padding: 0 10px !important;
    border-right: 1px solid #dddddd !important;
    font-size: 12px !important;
    color: #666666 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.shein-footer__news-note {
    font-size: 11px !important;
    color: #999999 !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
}

/* Payment badges styling */
.shein-footer__payments {
    padding: 24px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

.shein-footer__payments h4 {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #222 !important;
    margin: 0 !important;
}

.shein-footer__pay-icons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
}

.shein-pay {
    padding: 2px !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
    display: inline-flex !important;
}

/* Footer Bottom links and copyright */
.shein-footer__bottom {
    padding: 20px 0 40px !important;
    border-top: 1px solid #e5e5e5 !important;
    color: #999999 !important;
    font-size: 11px !important;
}

.shein-footer__bottom-inner {
    max-width: 1380px;
    margin: 0 auto;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: center !important;
}

.shein-footer__bottom-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
}

.shein-footer__bottom-links a {
    color: #666666 !important;
    font-size: 11px !important;
    text-decoration: none !important;
}

.shein-footer__bottom-links a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

.shein-footer__country {
    color: #222222 !important;
    font-weight: 600 !important;
}

/* Responsive Footer Styles for Mobile */
@media (max-width: 767.98px) {
    .shein-footer__cols {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }
    .shein-footer__col {
        border-bottom: 1px solid #eeeeee !important;
        padding-bottom: 16px !important;
    }
    .shein-footer__col:last-of-type {
        border-bottom: none !important;
    }
    .shein-footer__newsletter-col {
        padding-top: 12px !important;
    }
    .shein-footer__news-row {
        height: 38px !important;
    }
    .shein-footer__news-row button {
        padding: 0 12px !important;
        font-size: 11px !important;
    }
}

/* ==========================================================================
   41. MOBILE STICKY ACTIONS & SCROLL TO TOP OVERLAPS
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Push sticky ATC bar above the mobile bottom tab bar (56px) */
    .tf-sticky-btn-atc {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1040 !important;
    }

    /* Push default scroll-to-top button above the mobile bottom tab bar */
    #goTop {
        bottom: calc(76px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        z-index: 1045;
    }
}

/* ==========================================================================
   42. SUBCATEGORY SCROLL STRIP — Category page horizontal subcategory row
   ========================================================================== */
.shein-subcategories-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.shein-subcategories-scroll::-webkit-scrollbar {
    display: none;
}
.shein-subcategories-scroll__track {
    display: flex;
    gap: 12px;
    padding: 4px 2px;
}
.shein-subcategory-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #222;
    flex-shrink: 0;
    width: 72px;
    gap: 6px;
    transition: opacity 0.2s;
}
.shein-subcategory-item:hover {
    opacity: 0.8;
}
.shein-subcategory-item__img-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e8e8e8;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s;
}
.shein-subcategory-item:hover .shein-subcategory-item__img-wrap {
    border-color: #222;
}
.shein-subcategory-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shein-subcategory-item__name {
    font-size: 11px;
    text-align: center;
    line-height: 1.3;
    color: #444;
    max-width: 68px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Desktop: slightly larger subcategory bubbles */
@media (min-width: 768px) {
    .shein-subcategory-item {
        width: 84px;
    }
    .shein-subcategory-item__img-wrap {
        width: 76px;
        height: 76px;
    }
    .shein-subcategory-item__name {
        font-size: 12px;
        max-width: 80px;
    }
}

/* ==========================================================================
   43. MOBILE PRODUCT PAGE STICKY ACTION BAR
   ========================================================================== */
.shein-mobile-sticky-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    padding: 8px 12px;
    z-index: 1040;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}
.shein-mobile-sticky-actions__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
.shein-sticky-action-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #111111;
    border-radius: 4px;
    color: #111111;
    background: #ffffff;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
}
.shein-sticky-action-btn i {
    font-size: 22px;
    font-weight: 500;
}
.shein-sticky-store {
    text-decoration: none;
}
.shein-sticky-wishlist.active i {
    color: #ff4747 !important;
}
.shein-sticky-wishlist.active {
    border-color: #ff4747;
}
.shein-sticky-buy-btn {
    flex: 1;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #111111;
    border-radius: 4px;
    background: #ffffff;
    color: #111111;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}
.shein-sticky-cart-btn {
    flex: 1.2;
    height: 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 4px;
    background: #111111;
    color: #ffffff;
    font-weight: 700;
    transition: all 0.2s ease;
}
.shein-sticky-cart-btn .discount-badge {
    font-size: 9px;
    color: #ffd700;
    font-style: italic;
    font-weight: 800;
    margin-bottom: 1px;
    letter-spacing: 0.5px;
}
.shein-sticky-cart-btn .btn-text {
    font-size: 14px;
    letter-spacing: 0.5px;
}
.shein-sticky-buy-btn:active, .shein-sticky-cart-btn:active {
    opacity: 0.8;
}
.shein-mobile-sticky-actions.disabled button {
    opacity: 0.6;
    pointer-events: none;
}

@media (max-width: 1199.98px) {
    body:has(.shein-mobile-sticky-actions) {
        padding-bottom: 65px !important;
    }
}

/* ==========================================================================
   END OF SHEIN CUSTOM CSS — Version 5.5
   ========================================================================== */

/* ==========================================================================
   44. DESKTOP HEADER OVERLAP FIX & LAYOUT STACKING
   ========================================================================== */

/* Desktop header - full width, proper stacking, no overlap */
.shein-header--desktop {
    width: 100%;
    position: relative;
    z-index: 200;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Desktop header inner: flex row, logo + search + actions */
.shein-header--desktop .shein-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    height: 64px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Desktop logo */
.shein-header--desktop .shein-header__logo {
    flex-shrink: 0;
    min-width: 120px;
    max-width: 180px;
    display: flex;
    align-items: center;
}

/* Desktop search bar - takes remaining space */
.shein-header--desktop .shein-header__search-bar {
    flex: 1;
    max-width: 600px;
    min-width: 200px;
    display: flex;
    align-items: center;
    height: 40px;
    border: 1.5px solid #e5e5e5;
    border-radius: 4px;
    background: #f5f5f5;
    overflow: hidden;
}

.shein-header--desktop .shein-header__search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0 14px;
    font-size: 13px;
    color: #222;
    outline: none;
    height: 100%;
}

.shein-header--desktop .shein-header__search-input::placeholder {
    color: #999;
}

.shein-header--desktop .shein-header__search-camera {
    background: none;
    border: none;
    border-right: 1px solid #e0e0e0;
    padding: 0 10px;
    color: #666;
    cursor: pointer;
    height: 100%;
    display: flex;
    align-items: center;
}

.shein-header--desktop .shein-header__search-btn {
    background: #222;
    border: none;
    color: #fff;
    padding: 0 16px;
    height: 100%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Desktop actions bar - icons row */
.shein-header--desktop .shein-header__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.shein-header--desktop .shein-header__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #222 !important;
    text-decoration: none !important;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    min-width: 44px;
    transition: background 0.15s;
    background: none;
    border: none;
}

.shein-header--desktop .shein-header__icon:hover {
    background: #f5f5f5;
    color: #000 !important;
}

.shein-header--desktop .shein-header__icon i {
    font-size: 20px;
    line-height: 1;
}

.shein-header--desktop .shein-header__icon-label {
    font-size: 10px;
    font-weight: 500;
    color: #444;
    margin-top: 2px;
    white-space: nowrap;
    letter-spacing: 0;
}

.shein-header--desktop .shein-header__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #E8172C;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    line-height: 15px;
    border-radius: 50%;
    padding: 0 3px;
    text-align: center;
}

/* Nav bar (black category bar) - sits directly BELOW header, NO overlap */
.shein-nav {
    position: relative;
    z-index: 190;
    width: 100%;
    background: #222;
    border-top: none;
    overflow: hidden;
}

.shein-nav__inner {
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 40px;
    max-width: 1440px;
    margin: 0 auto;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.shein-nav__inner::-webkit-scrollbar {
    display: none;
}

.shein-nav__item {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    padding: 0 12px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    position: relative;
    transition: background 0.15s;
}

.shein-nav__item:hover {
    background: rgba(255,255,255,0.12);
}

.shein-nav__item--categories {
    background: rgba(255,255,255,0.1);
    gap: 6px;
}

.shein-nav__item--categories i {
    font-size: 15px;
}

.shein-nav__item--sale {
    color: #ff4d4d !important;
    font-weight: 700;
}

/* Dropdown Panel */
.shein-nav__dropdown {
    position: relative;
}

.shein-nav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: 2px solid #222;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 300;
    padding: 8px 0;
    display: none;
}

.shein-nav__dropdown:hover .shein-nav__panel {
    display: block;
}

.shein-nav__panel-link {
    display: block;
    padding: 8px 16px;
    font-size: 13px;
    color: #333 !important;
    text-decoration: none !important;
    transition: background 0.12s;
    white-space: nowrap;
}

.shein-nav__panel-link:hover {
    background: #f5f5f5;
    color: #000 !important;
}

/* Globe / language dropdown icon fix */
.shein-header--desktop .icon-globe-svg {
    color: #222;
}

/* Quick search results */
.shein-header--desktop .bb-quick-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: none;
    z-index: 500;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Prevent topbar from overlapping */
.tf-topbar {
    position: relative;
    z-index: 210;
}

/* ==========================================================================
   45. PRODUCT GRID RESPONSIVE — Desktop 4, Tablet 3, Mobile 2
   ========================================================================== */

/* The main theme uses tf-col-N + tf-grid-layout classes */
/* Override globally for consistent behavior */

/* Default grid — desktop: 4 columns */
.tf-grid-layout {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

/* 5-column override (explicit) */
.tf-grid-layout.tf-col-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}

/* 4-column override (default desktop) */
.tf-grid-layout.tf-col-4,
.tf-grid-layout:not([class*="tf-col-"]) {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* 3-column override */
.tf-grid-layout.tf-col-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* 2-column override */
.tf-grid-layout.tf-col-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

/* Tablet (768px-1199px): 3 columns */
@media (max-width: 1199.98px) {
    .tf-grid-layout,
    .tf-grid-layout.tf-col-4,
    .tf-grid-layout.tf-col-5 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    .tf-grid-layout.tf-col-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .tf-grid-layout.tf-col-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile (< 768px): 2 columns */
@media (max-width: 767.98px) {
    .tf-grid-layout,
    .tf-grid-layout.tf-col-4,
    .tf-grid-layout.tf-col-5,
    .tf-grid-layout.tf-col-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .tf-grid-layout.tf-col-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* Reset inner col sizing for CSS Grid (Bootstrap col classes should not interfere) */
.tf-grid-layout > .col,
.tf-grid-layout > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Product swiper slides - also ensure 4 on desktop, 3 tablet, 2 mobile */
/* These are set via data-attributes on the swiper element already,
   but enforce minimum visibility on non-swiper grid pages */
.ecommerce-products__grid .row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin: 0 !important;
}

@media (max-width: 1199.98px) {
    .ecommerce-products__grid .row {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 767.98px) {
    .ecommerce-products__grid .row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}

/* Full Width Overrides: Promo Rows & Customer Dashboard */
.shein-promo-row,
.shein-super-deals-row {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.shein-promo-row .container,
.shein-promo-row .container-fluid,
.shein-promo-row [class*="container"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    .shein-promo-row,
    .shein-super-deals-row {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .shein-overview-mobile-wrap {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Shein promo-row grid: 2 cards per row on desktop/tablet for clean 2x2 layout */
.shein-promo-row__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px 6px !important;
    width: 100% !important;
}

.shein-promo-row__grid .shein-promo-card:nth-child(3) {
    grid-column: auto !important; /* Override parent theme full-width span */
}

@media (max-width: 575.98px) {
    .shein-promo-row,
    .shein-super-deals-row {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    .shein-promo-row__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px 4px !important;
    }
}

/* UI/UX Fixes: Hide empty breadcrumbs on mobile */
@media (max-width: 767.98px) {
    .section-page-title-single {
        display: none !important;
    }
}

/* UI/UX Fixes: Fix phone number input overlapping with flag selector */
.shein-auth-page .iti .form-control {
    padding-left: 95px !important;
}

/* UI/UX Fixes: Shein-style Store Card */
.shein-store-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.shein-store-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
}
.shein-store-card__logo {
    display: block;
    transition: opacity 0.2s ease;
}
.shein-store-card__logo:hover {
    opacity: 0.85;
}
.shein-follow-btn {
    font-size: 12px;
    font-weight: 700;
    transition: all 0.2s ease;
}

/* UI/UX Fixes: Hide empty breadcrumbs on mobile & remove listing gap */
@media (max-width: 1199.98px) {
    .section-page-title-single,
    .section-page-title {
        display: none !important;
    }
    .shein-mobile-shop-layout section.flat-spacing {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    body:has(.shein-trends-layout),
    body:has(.shein-trends-layout) .main-content,
    body:has(.shein-trends-layout) .page-shop,
    body:has(.shein-trends-layout) #wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .shein-trends-desktop-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    .shein-trends-layout {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Support third-party dynamic plugins in customer dashboard list */
.shein-dynamic-plugin-list {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}
.shein-dynamic-plugin-list li {
    list-style: none !important;
}
.shein-dynamic-plugin-list li a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    font-size: 14px !important;
    color: #222 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f2f2f2;
    transition: background-color 0.15s ease;
}
.shein-dynamic-plugin-list li a:active {
    background-color: #f9f9f9;
}
.shein-dynamic-plugin-list li a::after {
    content: "\e906"; /* icomoon caret-right icon */
    font-family: 'icomoon' !important;
    font-size: 10px;
    color: #999;
    margin-left: auto;
}
.shein-dynamic-plugin-list li a i.nav-icon {
    font-size: 16px;
    margin-right: 8px;
    color: #666;
}

/* ==========================================================================
   41. PERFECT CIRCULAR CATEGORIES SWIPER — Sub-Collections
   ========================================================================== */
.category-v01 .cate-image {
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto 12px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 1px solid #e5e5e5 !important;
    aspect-ratio: 1/1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f7f7f7 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}
.category-v01 .cate-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

@media (max-width: 767.98px) {
    .category-v01 .cate-image {
        width: 90px !important;
        height: 90px !important;
    }
}

/* Gap Reduction on Category & Products pages */
.page-product-category .container.pt-4 {
    padding-top: 8px !important;
}
.page-product-category .shein-subcategories-scroll {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}
.page-product-category section.flat-spacing,
.page-shop section.flat-spacing {
    padding-top: 8px !important;
    padding-bottom: 20px !important;
}

/* Sort Dropdown Filter Chip & Dropdown Menu Popup Fix */
.tf-control-sorting {
    position: relative !important;
    display: inline-block !important;
}
.tf-control-sorting .btn-select.dropdown-toggle::after {
    display: none !important;
}
.tf-control-sorting .btn-select {
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background-color: #f5f5f5 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #222222 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: none !important;
}
.tf-control-sorting .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    z-index: 1050 !important;
    min-width: 170px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
    border: 1px solid #eeeeee !important;
    border-radius: 12px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
}
.tf-control-sorting .dropdown-item {
    padding: 8px 16px !important;
    font-size: 13px !important;
    color: #222222 !important;
    transition: background 0.15s ease !important;
}
.tf-control-sorting .dropdown-item.active,
.tf-control-sorting .dropdown-item:active,
.tf-control-sorting .dropdown-item:hover {
    background-color: #f5f5f5 !important;
    color: #000000 !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   SHEIN MOBILE STICKY BOTTOM ACTION BAR (Buy Now & Add to Cart on Product Detail Pages)
   ========================================================================== */
.shein-mobile-sticky-actions {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.12) !important;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

.shein-mobile-sticky-actions__inner {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
}

.shein-sticky-action-btn {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid #e5e5e5 !important;
    background: #ffffff !important;
    color: #222222 !important;
    font-size: 20px !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.shein-sticky-action-btn.active {
    color: #ff4747 !important;
    border-color: #ff4747 !important;
}

.shein-sticky-buy-btn {
    flex: 1 !important;
    height: 42px !important;
    background: #ffffff !important;
    color: #222222 !important;
    border: 1.5px solid #222222 !important;
    border-radius: 24px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.shein-sticky-cart-btn {
    flex: 1.3 !important;
    height: 42px !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 24px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.1 !important;
    cursor: pointer !important;
    position: relative !important;
}

.shein-sticky-cart-btn .discount-badge {
    font-size: 9px !important;
    font-weight: 800 !important;
    color: #ffe600 !important;
    letter-spacing: 0.5px !important;
}

/* ==========================================================================
   MOBILE MENU DRAWER — Currency & Language Switchers in Canvas Header
   ========================================================================== */
.shein-mobile-sidebar .canvas-header {
    min-height: 52px !important;
    padding: 8px 14px !important;
    border-bottom: 1px solid #eee !important;
    background: #fff !important;
}

.shein-mobile-sidebar .canvas-header .shein-drawer-switchers {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex: 1 !important;
}

.shein-mobile-sidebar .canvas-header .shein-drawer-currency,
.shein-mobile-sidebar .canvas-header .shein-drawer-language {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.shein-mobile-sidebar .canvas-header .shein-drawer-currency .form-select,
.shein-mobile-sidebar .canvas-header .shein-drawer-language .form-select {
    border: none !important;
    background-color: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #222 !important;
    padding: 6px 20px 6px 6px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-align: center !important;
    background-position: right 2px center !important;
    background-size: 14px 10px !important;
}

.shein-mobile-sidebar .canvas-header .shein-drawer-divider {
    width: 1px !important;
    height: 22px !important;
    background: #e8e8e8 !important;
    margin: 0 4px !important;
    flex-shrink: 0 !important;
}