/* ==========================================================================
   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"],
.row-product {
    display: grid !important;
    gap: 8px !important;
}
@media (max-width: 575.98px) {
    .grid-layout,
    [class*="product-grid"],
    .row-product {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .grid-layout,
    [class*="product-grid"],
    .row-product {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .grid-layout,
    [class*="product-grid"],
    .row-product {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .grid-layout,
    [class*="product-grid"],
    .row-product {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }
}
@media (min-width: 1200px) {
    .grid-layout,
    [class*="product-grid"],
    .row-product {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 8px !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;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    display: none;
    background: var(--shein-white) !important;
    border-top: 1px solid var(--shein-border) !important;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06) !important;
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (max-width: 991.98px) {
    .tf-toolbar-bottom {
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }
    body {
        padding-bottom: 58px !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;
}

/* ==========================================================================
   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: #000 !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: 8px !important;
        padding: 0 12px !important;
    }
    .shein-promo-row__grid > div:last-child {
        display: none !important; /* Hide 3rd 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: 8px 16px !important;
    background: #FFFBF5 !important; /* light warm cream */
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 8px;
}
.shein-info-strip__item {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.shein-info-strip__icon {
    font-size: 14px !important;
    color: #222 !important;
    font-weight: bold;
}
.shein-info-strip__item div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
}
.shein-info-strip__item strong {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #222 !important;
}
.shein-info-strip__item small {
    font-size: 10px !important;
    color: #777 !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;
}

/* 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: #fff !important;
    }
    .shein-homepage-wrap .shein-header--mobile .shein-header__icon {
        color: #fff !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: 50% !important;
        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: 50% !important;
    }
    .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: #7B2CBF; /* Purple trend color */
    letter-spacing: 0.5px;
    text-transform: lowercase;
}
.shein-promo-card--top-trends .shein-promo-card__arrow {
    background: #7B2CBF !important;
}


/* ==========================================================================
   DESKTOP FIXES — Override mobile rules on large screens
   ========================================================================== */
@media (min-width: 1200px) {
    /* Topbar: CREAM background on desktop */
    .shein-topbar {
        background: #f5efe6 !important;
        display: block !important;
    }
    /* Header: BLACK on desktop */
    .shein-header {
        background: #000 !important;
    }
    .shein-header__mobile-menu a,
    .shein-header__icon {
        color: #fff !important;
    }
    .shein-header .shein-header__logo {
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }
    .shein-header .shein-header__logo img {
        filter: brightness(0) invert(1) !important;
        height: 28px !important;
    }
    .shein-header .shein-header__search {
        display: flex !important;
        flex: 1 !important;
        max-width: 560px !important;
    }
    /* Hero: force proper height */
    .shein-hero {
        display: block !important;
        padding: 16px 24px !important;
        max-width: 1440px;
        margin: 0 auto;
    }
    .shein-hero__grid {
        display: grid !important;
        grid-template-columns: 220px 1fr 220px !important;
        gap: 12px !important;
        min-height: 332px !important;
    }
    .shein-hero__side {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
    }
    .shein-hero__center {
        min-height: 332px !important;
        border-radius: 8px;
        overflow: hidden;
    }
    .shein-hero__swiper {
        min-height: 332px !important;
        height: 100% !important;
    }
    .shein-hero__slide {
        min-height: 332px !important;
        background-size: cover;
        background-position: center;
    }
    /* Bottom bar HIDDEN on desktop */
    .shein-bottom-bar {
        display: none !important;
    }
    /* Nav visible */
    .shein-nav {
        display: block !important;
    }
    /* Cat grid visible on desktop */
    .shein-cat-grid {
        display: block !important;
    }
    /* Mobile tabs HIDDEN */
    .shein-mobile-tabs {
        display: none !important;
    }
    /* Cat circles HIDDEN on desktop (text grid shows) */
    .shein-cat-circles {
        display: none !important;
    }
    /* Info strip hidden on desktop */
    .shein-info-strip {
        display: none !important;
    }
}

/* ==========================================================================
   FIX: Hide duplicate topbar inside main (amerce base renders it too)
   ========================================================================== */
/* Show detailed topbar inside main */
main .shein-topbar,
#wrapper > .shein-topbar {
    display: block !important;
    background: #f5efe6 !important;
}
/* Only show the FULL topbar inside main (the detailed one with 5 links) */
body > .shein-topbar {
    display: none !important;
}
main .shein-topbar {
    display: block !important;
    background: #f5efe6 !important;
}

/* ==========================================================================
   FIX: Nav bar height — dropdown should be hidden until hover
   ========================================================================== */
.shein-nav {
    position: relative;
    height: auto !important;
    max-height: 46px;
    overflow: visible;
}
.shein-nav__inner {
    height: 46px;
    overflow: visible;
}
.shein-nav__dropdown {
    position: relative;
}
.shein-nav__panel {
    position: absolute !important;
    top: 100% !important;
    left: 0;
    display: none !important;
    z-index: 1001;
}
.shein-nav__dropdown:hover .shein-nav__panel {
    display: block !important;
}

/* ==========================================================================
   FIX: Category text grid proper height
   ========================================================================== */
@media (min-width: 1200px) {
    .shein-cat-grid {
        padding: 20px 24px !important;
        background: #fff !important;
        max-width: 1440px;
        margin: 0 auto;
    }
    .shein-cat-grid__items {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 0 !important;
    }
    .shein-cat-grid__item {
        padding: 14px 8px !important;
        border: 1px solid #f0f0f0 !important;
        font-size: 13px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ==========================================================================
   FIX: Promo row max-width and proper grid
   ========================================================================== */
@media (min-width: 1200px) {
    .shein-promo-row {
        max-width: 1440px !important;
        margin: 0 auto !important;
        padding: 16px 24px !important;
    }
    .shein-promo-row__grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
}

/* ==========================================================================
   FIX: Rec tabs proper height
   ========================================================================== */
.shein-rec-tabs {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    background: #fff;
}
.shein-rec-tabs__inner {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 32px;
    height: 48px;
}

/* ==========================================================================
   FIX: Footer background
   ========================================================================== */
.shein-footer {
    background: #f6f6f6 !important;
    border-top: 1px solid #eee !important;
}

/* ==========================================================================
   FIX: Offcanvas panels should be hidden (not display:flex)
   ========================================================================== */
.offcanvas:not(.show) {
    display: none !important;
}

/* ==========================================================================
   HIDE: Unnecessary popups/overlays not part of SHEIN design
   ========================================================================== */
.popup-marketing-overlay,
.popup-marketing-container,
[class*="popup-marketing"]:not(body) {
    display: none !important;
}
/* Override body lock caused by popup-marketing-open class */
body.popup-marketing-open {
    overflow: auto !important;
    height: auto !important;
    position: static !important;
}
[class*="cookie-consent"],
[class*="cookie-preferences"],
.cookie-consent-bar {
    display: none !important;
}
[class*="announcement-bar"],
[class*="announcement-popup"] {
    display: none !important;
}
[class*="newsletter-popup"]:not(.shein-footer *) {
    display: none !important;
}
[class*="floating-hearts"],
[class*="whatsapp-float"] {
    display: none !important;
}

/* ==========================================================================
   FIX: Footer grid layout (force 5 columns on desktop)
   ========================================================================== */
@media (min-width: 1200px) {
    .shein-footer__cols {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1.1fr 2fr !important;
        gap: 28px !important;
        align-items: start !important;
    }
    .shein-footer__newsletter-col {
        max-width: 100% !important;
        padding-left: 12px !important;
        background: transparent !important;
    }
    .shein-footer__top {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 40px 24px 24px !important;
    }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
    .shein-footer__cols {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 24px !important;
    }
    .shein-footer__newsletter-col {
        grid-column: 1 / -1 !important;
        max-width: 500px !important;
    }
}
@media (max-width: 767.98px) {
    .shein-footer__cols {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        padding: 20px 16px !important;
    }
    .shein-footer__col h4 {
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }
    .shein-footer__col a {
        font-size: 11px !important;
        padding: 3px 0 !important;
    }
    .shein-footer__newsletter-col {
        grid-column: 1 / -1 !important;
        padding: 16px 0 0 !important;
        border-top: 1px solid #eee;
    }
    .shein-footer__news-title {
        font-size: 11px !important;
    }
    .shein-footer__news-row button {
        padding: 10px 14px !important;
        font-size: 11px !important;
    }
    .shein-footer__payments {
        padding: 16px !important;
    }
    .shein-footer__bottom-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        text-align: center;
    }
    .shein-footer__bottom-links {
        justify-content: center !important;
        flex-wrap: wrap;
    }
    .shein-footer {
        padding-bottom: 60px !important;
    }
}

/* ==========================================================================
   DISABLE FOOTER — No footer in current design phase
   ========================================================================== */
.shein-footer {
    display: none !important;
}
.tf-footer,
footer.tf-footer {
    display: none !important;
}

/* ==========================================================================
   FIX: Hero side banners height + Remove all old/extra elements
   ========================================================================== */
@media (min-width: 1200px) {
    .shein-hero__banner,
    .shein-hero__brand {
        min-height: 100px !important;
        flex: 1 1 0 !important;
    }
}

/* Remove preloader (SHEIN doesn't have one) */
#preload,
.preload,
[class*="preload-container"] {
    display: none !important;
}

/* Remove scroll-to-top button (not in SHEIN) */
[class*="scroll-to-top"],
.tf-scroll-top {
    display: none !important;
}

/* Remove any floating widgets */
[class*="floating"],
[class*="whatsapp"],
[id*="fb-"],
[class*="chat-widget"] {
    display: none !important;
}

/* Remove old amerce modals/offcanvas that aren't needed */
.modal-search {
    z-index: 99999 !important;
}

/* ==========================================================================
   CRITICAL FIX: Hide HOT SALE marquee + BY Brand on product cards
   ========================================================================== */
/* Kill the "HOT SALE XX% OFF" repeating marquee text EVERYWHERE */
.product-marquee_sale,
[class*="marquee_sale"],
[class*="marquee-wrapper"],
.marquee-wrapper {
    display: none !important;
}
/* Hide "BY Brand Name" store label on product cards */
.card-product .store-name,
.card-product [class*="store-name"],
.card-product [class*="product-store"] {
    display: none !important;
}
/* Product card info: only show name + price (SHEIN style) */
.card-product .card-product_info {
    padding: 8px 10px 12px !important;
}
.card-product .name-product {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #333 !important;
    -webkit-line-clamp: 2 !important;
    margin-bottom: 4px !important;
}
.card-product .price-new {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #222 !important;
}
.card-product .price-old {
    font-size: 11px !important;
    color: #999 !important;
}

/* ==========================================================================
   FIX: Topbar show all links properly (applies to main topbar)
   ========================================================================== */
main .shein-topbar .shein-topbar__inner,
#wrapper .shein-topbar .shein-topbar__inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 1440px;
    margin: 0 auto;
    padding: 5px 24px;
}
main .shein-topbar .shein-topbar__link,
#wrapper .shein-topbar .shein-topbar__link {
    display: flex !important;
    padding: 0 14px !important;
    font-size: 12px !important;
}
main .shein-topbar .shein-topbar__divider,
#wrapper .shein-topbar .shein-topbar__divider {
    display: inline-block !important;
}

/* ==========================================================================
   FIX: Desktop search bar visible and proper width
   ========================================================================== */
@media (min-width: 1200px) {
    .shein-header .shein-header__search {
        display: flex !important;
        flex: 1 !important;
        max-width: 560px !important;
        background: #fff !important;
        border-radius: 2px !important;
        height: 36px !important;
        padding: 0 12px !important;
    }
    .shein-header .shein-header__search input {
        display: block !important;
        width: 100% !important;
        height: 34px !important;
        font-size: 13px !important;
        border: none !important;
        background: transparent !important;
    }
    .shein-header .shein-header__search-icon {
        display: flex !important;
    }
}

/* ==========================================================================
   FINAL POLISH: SHEIN exact styling refinements
   ========================================================================== */

/* Promo section titles — SHEIN italic bold style */
.shein-promo-card__head h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    font-style: italic !important;
    color: #222 !important;
}

/* Discount badge — position top-left on image (not inline with price) */
.card-product .product-badge_list {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    z-index: 3 !important;
}
.card-product .product-badge_item.sale {
    background: #ff4747 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 2px !important;
}

/* Product image aspect ratio 3:4 (SHEIN standard) */
.card-product .product-img {
    position: relative;
    overflow: hidden;
}
.card-product .product-img::before {
    content: '';
    display: block;
    padding-top: 133%; /* 3:4 ratio */
}
.card-product .product-img img {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Quick-add button hidden on desktop (SHEIN doesn't show it) */
@media (min-width: 992px) {
    .card-product .product-action_bot {
        display: none !important;
    }
}

/* Rating stars hidden on homepage cards (SHEIN only shows on listing) */
.shein-page-content .card-product [class*="rating"] {
    display: none !important;
}

/* Color swatches hidden on homepage (SHEIN shows only on listing page) */
.shein-page-content .card-product [class*="swatch"],
.shein-page-content .card-product [class*="color-sw"] {
    display: none !important;
}

/* ==========================================================================
   SHEIN UK REDESIGN — Same layout on ALL devices (mobile-first)
   Desktop = wider mobile, NOT a different layout
   ========================================================================== */

/* OVERRIDE: Header is WHITE on ALL devices (not black on desktop!) */
.shein-header {
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
}
.shein-header__mobile-menu a,
.shein-header__icon {
    color: #222 !important;
}
.shein-header .shein-header__logo img {
    filter: none !important;
}
.shein-header .shein-header__logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* OVERRIDE: Category tabs visible on ALL devices (not hidden on desktop) */
.shein-mobile-tabs {
    display: block !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    position: sticky;
    top: 0;
    z-index: 999;
}
.shein-mobile-tabs__tab {
    color: #666 !important;
    border-bottom-color: transparent !important;
}
.shein-mobile-tabs__tab--active {
    color: #000 !important;
    font-weight: 700 !important;
    border-bottom-color: #000 !important;
}

/* OVERRIDE: Bottom tab bar visible on ALL devices */
.shein-bottom-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
}
body {
    padding-bottom: 60px !important;
}

/* OVERRIDE: Hide the separate black nav bar (not in SHEIN UK) */
.shein-nav {
    display: none !important;
}

/* OVERRIDE: Hide the cream topbar (SHEIN UK doesn't have it on desktop same way) */
body > .shein-topbar,
main .shein-topbar,
#wrapper > .shein-topbar,
.shein-topbar {
    display: none !important;
}

/* OVERRIDE: Hide old text category grid (use circles on all devices) */
.shein-cat-grid {
    display: none !important;
}

/* OVERRIDE: Show circular categories on ALL devices */
.shein-cat-circles {
    display: block !important;
    padding: 20px 16px !important;
    background: #fff !important;
}
.shein-cat-circles__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    gap: 16px;
    padding: 0 8px;
}
.shein-cat-circles__track::-webkit-scrollbar { display: none; }
.shein-cat-circle {
    flex: 0 0 auto !important;
    width: 80px !important;
    text-align: center;
}
.shein-cat-circle__img {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin: 0 auto 8px !important;
    background: #f5f5f5;
}
.shein-cat-circle__img img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}
.shein-cat-circle__name {
    font-size: 11px !important;
    color: #333 !important;
    line-height: 1.3 !important;
    max-width: 80px !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .shein-cat-circles__track {
        justify-content: center;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 20px 32px;
    }
    .shein-cat-circle { width: 90px !important; }
    .shein-cat-circle__img { width: 80px !important; height: 80px !important; }
    .shein-cat-circle__img img { width: 80px !important; height: 80px !important; }
}

/* OVERRIDE: Info strip visible on ALL devices */
.shein-info-strip {
    display: flex !important;
}

/* OVERRIDE: Hero visible on all devices, simplified layout */
.shein-hero {
    display: block !important;
    padding: 0 !important;
}
@media (min-width: 768px) {
    .shein-hero__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
    }
    .shein-hero__side--left { display: none !important; }
    .shein-hero__side--right {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        flex-direction: row !important;
        gap: 4px !important;
    }
    .shein-hero__brand {
        min-height: 200px !important;
    }
}
@media (max-width: 767.98px) {
    .shein-hero__grid {
        grid-template-columns: 1fr !important;
    }
    .shein-hero__side { display: none !important; }
}

/* OVERRIDE: Search bar visible on all devices */
.shein-header .shein-header__search {
    display: flex !important;
    flex: 1 !important;
    max-width: 600px !important;
    background: #f5f5f5 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 20px !important;
    height: 36px !important;
}

/* OVERRIDE: Promo row — 2 columns side by side (Super Deals | Trends) */
.shein-promo-row {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px !important;
}
.shein-promo-row__grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}
.shein-promo-card:nth-child(3) {
    grid-column: 1 / -1;
}
.shein-promo-card {
    border: none !important;
    border-radius: 0 !important;
    overflow: hidden;
}
.shein-promo-card__items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;
}
.shein-promo-item__img {
    aspect-ratio: 1/1 !important;
    max-height: 180px !important;
    overflow: hidden;
}
.shein-promo-item__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Product feed — 4 columns on desktop, 2 on mobile */
@media (min-width: 992px) {
    .shein-page-content .ecommerce-products__item {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .shein-page-content .ecommerce-products__item {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

/* Product card price — orange/red like SHEIN */
.card-product .price-new {
    color: #ff6600 !important;
}

/* "Est. 3 Workdays" label below price */
.card-product [class*="shipping-info"],
.card-product [class*="delivery"] {
    font-size: 10px;
    color: #ff6600;
}

/* "Free Shipping" sticky bar that shows when scrolling */
.shein-info-strip {
    position: sticky;
    top: 0;
    z-index: 998;
    background: #fef5e7 !important;
    border-bottom: 1px solid #fde2b5;
}
.shein-info-strip__item strong {
    color: #000 !important;
}

/* ==========================================================================
   FIX: Hero fills viewport — SINGLE FULL-WIDTH SLIDER (no right side cards)
   ========================================================================== */
.shein-hero {
    height: calc(100vh - 59px - 42px - 56px) !important;
    min-height: 500px !important;
    padding: 0 !important;
}
.shein-hero__grid {
    height: 100% !important;
    display: block !important;
}
.shein-hero__center {
    height: 100% !important;
    min-height: 100% !important;
    border-radius: 0 !important;
}
.shein-hero__swiper,
.shein-hero__swiper .swiper-wrapper,
.shein-hero__swiper .swiper-slide,
.shein-hero__slide {
    height: 100% !important;
    min-height: 100% !important;
}
/* Hide side banners — SHEIN desktop only shows FULL slider */
.shein-hero__side--right,
.shein-hero__side--left {
    display: none !important;
}
/* Dots at bottom center */
.shein-hero__dots {
    bottom: 16px !important;
}

@media (max-width: 767.98px) {
    .shein-hero {
        height: auto !important;
        min-height: 200px !important;
    }
    .shein-hero__grid {
        height: auto !important;
    }
}

/* ==========================================================================
   FIX: Hero slider slides must have width (Swiper not calculating)
   ========================================================================== */
.shein-hero__swiper .swiper-slide {
    width: 100% !important;
}
.shein-hero__slide {
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ==========================================================================
   ENSURE: Hero slide images always visible with cover
   ========================================================================== */
.shein-hero__slide {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
}
/* If product-img padding-top rule is conflicting, reset it on hero */
.shein-hero .product-img::before,
.shein-hero__slide::before {
    display: none !important;
    padding-top: 0 !important;
}