/* ============================================================
   TileStyle Premium Header Theme
   Design language based on approved client reference.
   Tokens: navy #0D1B2A / #1B263B, accent #F7941D, font Outfit.
   Loaded AFTER style.css — overrides header only.
   ============================================================ */

:root {
    --ts-navy: #0D1B2A;
    --ts-navy-2: #1B263B;
    --ts-accent: #F7941D;
    --ts-accent-hover: #ffa63d;
    --ts-text: #ffffff;
    --ts-text-muted: #9aa4b2;
    --ts-radius: 8px;
    --ts-font: 'Outfit', sans-serif;
}

/* ---------- Global header font ---------- */
.header,
.header * {
    font-family: var(--ts-font) !important;
}

/* Icon fonts must keep their own font families (broken glyphs otherwise) */
.header i[class^="ri-"],
.header i[class*=" ri-"],
.header [class^="ri-"],
.header [class*=" ri-"] {
    font-family: "remixicon" !important;
}

.header i[class^="mdi"],
.header i[class*=" mdi"] {
    font-family: "Material Design Icons" !important;
}

/* Wishlist / cart labels ("items", "Total") sit in .content blocks */
.headerMiddle .header-action .action-list .content,
.headerMiddle .header-action .action-list .content * {
    color: var(--ts-text) !important;
}

.headerMiddle .header-action .action-list .content span:first-child,
.headerMiddle .header-action .action-list .content .count {
    color: var(--ts-accent) !important;
    font-weight: 600 !important;
}

/* ---------- Top bar removed (reference has a single clean row) ---------- */
.headerTopbar {
    display: none !important;
}

/* Quick links cluster in the main row (Track Order / Compare / phone) */
.header-quicklinks {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 26px;
    white-space: nowrap;
}

.header-quicklinks a {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13.5px !important;
    font-weight: 400;
    transition: color .2s ease;
}

.header-quicklinks a:hover {
    color: var(--ts-accent) !important;
}

.header-quicklinks .ql-phone {
    color: var(--ts-accent) !important;
    font-weight: 600;
}

/* Category nav row — reference proportions, compact height */
.headerBottom {
    padding: 0 !important;
}

.headerBottom-wrapper {
    min-height: 46px;
    align-items: center;
}

.ts-cat-menu > li > a {
    font-size: 13.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px;
    white-space: nowrap;
    padding: 12px 0 !important;
    display: inline-block;
}

.headerBottom-wrapper .btn,
.headerBottom .deals-btn {
    padding: 7px 16px !important;
    font-size: 13px !important;
}

/* The nav row IS categories now — the desktop "Shop By Categories" pill
   duplicates it, hide it (mobile offcanvas trigger stays). */
.headerBottom .header-category .category-header.d-lg-flex {
    display: none !important;
}

/* Keep the whole nav on a single line like the reference */
.headerBottom .header-menu {
    flex: 1;
    min-width: 0;
}

.ts-cat-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 26px;
}

.ts-cat-menu::-webkit-scrollbar {
    display: none;
}

.ts-cat-menu > li {
    flex: 0 0 auto;
}

.headerBottom-wrapper .btn,
.headerBottom .deals-btn {
    white-space: nowrap !important;
}

.headerTopbar-wrapper {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 8px 0 !important;
}

.headerTopbar-wrapper .header-left,
.headerTopbar-wrapper .header-right,
.headerTopbar-wrapper .list-item li a,
.headerTopbar-wrapper .dropdown-list .selected,
.headerTopbar-wrapper .play-items span,
.headerTopbar-wrapper .play-items a {
    color: var(--ts-text-muted) !important;
    font-size: 13px !important;
}

.headerTopbar-wrapper .list-item li a:hover,
.headerTopbar-wrapper .play-items a:hover,
.headerTopbar-wrapper .dropdown-list .selected:hover {
    color: var(--ts-accent) !important;
}

.headerTopbar-wrapper .list-item li::after {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ---------- Middle row (logo / search / actions) — SHARP & COMPACT ---------- */
.headerMiddle {
    background: var(--ts-navy) !important;
    padding: 8px 0 !important;
}

/* compact logo */
.headerMiddle-wrapper .header-logo img {
    max-height: 44px;
    width: auto;
}

/* action icons (wishlist / cart / profile): small, borderless, sharp */
.headerMiddle .header-action .action-list .icon,
.headerMiddle .header-action .icon,
.headerMiddle .header-action a > div:first-child {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
}

.headerMiddle .header-action svg {
    width: 19px !important;
    height: 19px !important;
}

.headerMiddle .header-action i {
    font-size: 18px !important;
}

/* counts + labels: compact type */
.headerMiddle .header-action .action-list .content {
    line-height: 1.25 !important;
}

.headerMiddle .header-action .action-list .content span:first-child,
.headerMiddle .header-action .action-list .content .count {
    font-size: 12px !important;
}

.headerMiddle .header-action .action-list .content span,
.headerMiddle .header-action .action-list .content h5,
.headerMiddle .header-action .action-list .content p {
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

.headerMiddle .header-action .action-list {
    gap: 8px !important;
}

/* Logo: white treatment on dark bg */
.headerMiddle-wrapper .header-logo img {
    filter: brightness(0) invert(1);
}

/* Search — borderless, rounded, lighter navy like reference */
.headerMiddle .search-form .input-group {
    background: var(--ts-navy-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--ts-radius) !important;
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.headerMiddle .search-form .input-group:focus-within {
    border-color: var(--ts-accent) !important;
    box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.15) !important;
}

.headerMiddle .search-form .form-control {
    background: transparent !important;
    border: none !important;
    color: var(--ts-text) !important;
    height: 38px !important;
    font-size: 13.5px !important;
    box-shadow: none !important;
    padding: 0 14px !important;
}

.headerMiddle .search-form {
    max-width: 480px;
}

.headerMiddle .search-form .input-group button {
    width: 42px !important;
    height: 38px !important;
}

.headerMiddle .search-form .input-group button i {
    font-size: 16px !important;
}

.headerMiddle .search-form .form-control::placeholder {
    color: var(--ts-text-muted) !important;
}

.headerMiddle .search-form .input-group button {
    background: var(--ts-accent) !important;
    color: #fff !important;
    border: none !important;
    width: 52px;
    transition: background .25s ease;
}

.headerMiddle .search-form .input-group button:hover {
    background: var(--ts-accent-hover) !important;
}

/* Header action icons (wishlist / cart / profile) */
.headerMiddle .header-action,
.headerMiddle .header-action a,
.headerMiddle .header-action .icon,
.headerMiddle .header-action i,
.headerMiddle .header-action span,
.headerMiddle .header-action h5,
.headerMiddle .header-action p,
.headerMiddle-wrapper {
    color: var(--ts-text) !important;
}

.headerMiddle .header-action svg,
.headerMiddle .header-action svg path {
    fill: var(--ts-text) !important;
    stroke: var(--ts-text) !important;
}

.headerMiddle .header-action a:hover,
.headerMiddle .header-action a:hover i {
    color: var(--ts-accent) !important;
}

/* cart / wishlist count badges */
.headerMiddle .header-action .count,
.headerMiddle .header-action .badge,
.headerMiddle .header-action .cart-count,
.headerMiddle .header-action .number {
    background: var(--ts-accent) !important;
    color: #fff !important;
}

/* ---------- Bottom row (category + main menu) ---------- */
.headerBottom {
    background: var(--ts-navy-2) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Template bug fix: position:sticky can never escape the .header parent,
   so the menu bar was disappearing on scroll. Fixed positioning gives the
   persistent sticky nav of the reference design. */
.headerBottom.sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    z-index: 999 !important;
    background: var(--ts-navy-2) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
    animation: ts-slide-down 0.25s ease;
}

@keyframes ts-slide-down {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* "Shop by Categories" pill */
.headerBottom .category-header {
    background: var(--ts-accent) !important;
    color: #fff !important;
    border-radius: var(--ts-radius) !important;
    font-weight: 600 !important;
    letter-spacing: .2px;
    transition: background .25s ease;
}

.headerBottom .category-header:hover {
    background: var(--ts-accent-hover) !important;
}

.headerBottom .category-header .bar svg,
.headerBottom .category-header .bar svg path {
    fill: #fff !important;
    stroke: #fff !important;
}

/* Main menu links — reference style: white, 15px, medium */
.header-menu .main-menu > li > a,
.header-menu .main-menu > li > span > a {
    color: var(--ts-text) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    position: relative;
    transition: color .25s ease;
}

.header-menu .main-menu > li > a:hover,
.header-menu .main-menu > li > span > a:hover,
.header-menu .main-menu > li > span > a.active {
    color: var(--ts-accent) !important;
}

/* animated underline on hover like premium stores */
.header-menu .main-menu > li > a::after,
.header-menu .main-menu > li > span > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--ts-accent);
    transition: width .25s ease;
}

.header-menu .main-menu > li > a:hover::after,
.header-menu .main-menu > li > span > a:hover::after,
.header-menu .main-menu > li > span > a.active::after {
    width: 100%;
}

/* Dropdown submenus */
.header-menu .main-menu .sub-menu {
    background: var(--ts-navy) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--ts-radius) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45) !important;
    overflow: hidden;
}

.header-menu .main-menu .sub-menu li a {
    color: var(--ts-text) !important;
    font-size: 14px !important;
    transition: all .2s ease;
}

.header-menu .main-menu .sub-menu li a:hover {
    color: var(--ts-accent) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    padding-left: 22px !important;
}

/* Daily deals / highlight button in menu bar */
.headerBottom .deals-btn,
.headerBottom .daily-deals,
.headerBottom-wrapper > a.btn,
.headerBottom-wrapper .btn {
    background: transparent !important;
    color: var(--ts-accent) !important;
    border: 1px solid var(--ts-accent) !important;
    border-radius: var(--ts-radius) !important;
    font-weight: 600 !important;
    transition: all .25s ease;
}

.headerBottom .deals-btn:hover,
.headerBottom-wrapper .btn:hover {
    background: var(--ts-accent) !important;
    color: #fff !important;
}

/* Category sidebar dropdown (Desktop component) on dark theme */
.header-category .category-dropdown,
.header-category .category-menu,
.header-category .sidebar-category {
    border-radius: 0 0 var(--ts-radius) var(--ts-radius);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Search results dropdown */
.headerMiddle .search-result-wrapper {
    background: #ffffff;
    border-radius: var(--ts-radius) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
    border: none !important;
}

/* Mobile offcanvas menu — keep dark for consistency */
.offcanvas .offcanvas-nav-menu a {
    font-family: var(--ts-font) !important;
}

/* ============================================================
   SITE-WIDE THEME — reference design language on existing markup
   ============================================================ */

/* Global typography */
body,
h1, h2, h3, h4, h5, h6,
.btn, input, select, textarea, button {
    font-family: var(--ts-font) !important;
}

/* keep icon fonts working everywhere */
i[class^="ri-"], i[class*=" ri-"], [class^="ri-"], [class*=" ri-"] {
    font-family: "remixicon" !important;
}
i[class^="mdi"], i[class*=" mdi"] {
    font-family: "Material Design Icons" !important;
}

/* Section titles — bold with orange accent bar like the reference */
.section-title h2,
.section-title .title,
.section-title {
    font-weight: 700 !important;
    letter-spacing: -0.3px;
    color: #17233b;
}

.section-title h2::after,
.section-title > .title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 8px;
    border-radius: 2px;
    background: var(--ts-accent);
}

/* Buttons — orange primary, consistent radius */
.btn-primary,
.btn-secondary {
    background: var(--ts-accent) !important;
    border-color: var(--ts-accent) !important;
    color: #fff !important;
    border-radius: var(--ts-radius) !important;
    font-weight: 600 !important;
    transition: all .25s ease !important;
}

.btn-primary:hover,
.btn-secondary:hover {
    background: var(--ts-accent-hover) !important;
    border-color: var(--ts-accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(247, 148, 29, 0.35);
}

.btn-outline {
    border-color: var(--ts-accent) !important;
    color: var(--ts-accent) !important;
    border-radius: var(--ts-radius) !important;
    font-weight: 600 !important;
}

.btn-outline:hover {
    background: var(--ts-accent) !important;
    color: #fff !important;
}

/* ============================================================
   PRODUCT CARD — reference anatomy
   [compare toggle]              [♡]
              image
   Name (bold, one line)
   brand | sold  (muted specs line)
   ─────────────────────────────────
   ₹price                 [Quick View]
   ============================================================ */
.productItem,
.productlistItem {
    border-radius: 12px !important;
    border: 1px solid #eef1f6 !important;
    overflow: hidden;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

.productItem .productThumb-wrapper {
    position: relative;
    overflow: hidden;
}

/* wishlist heart — top right, clean circle */
.productItem .product-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
}

.productItem .product-actions .action-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(13, 27, 42, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #66707d !important;
    transition: all .2s ease;
}

.productItem .product-actions .action-btn:hover,
.productItem .product-actions .action-btn.wishlist {
    color: var(--ts-accent) !important;
}

/* compare toggle — top LEFT like the reference */
.productItem .product-actions + .product-actions {
    left: 10px;
    right: auto;
}

/* discount badge */
.productItem .badge {
    position: absolute;
    top: 10px;
    left: 54px;
    z-index: 3;
}

/* content block */
.productItem .product-content {
    padding: 12px 14px 14px !important;
}

.productItem .product-content .title,
.productItem .product-content .title a {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #17233b !important;
}

.productItem .product-content .title a:hover {
    color: var(--ts-accent) !important;
}

/* specs / meta line (brand | sold) — muted like "400x400mm | Matt" */
.productItem .product-meta,
.productItem .product-meta .product-category,
.productItem .product-meta .product-status {
    color: #8a94a3 !important;
    font-size: 12.5px !important;
}

/* hide "Sold N" noise until real sales volume exists */
.productItem .product-meta .product-status {
    display: none !important;
}

/* price row with divider + Quick View pill (reference) */
.productItem .product-content .position-relative {
    border-top: 1px solid #eef1f6;
    margin-top: 10px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.productItem .quickBtn {
    position: static !important;
    background: #f4f6fa !important;
    color: #17233b !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 7px 12px !important;
    transition: all .2s ease !important;
    white-space: nowrap;
}

.productItem .quickBtn:hover {
    background: var(--ts-navy) !important;
    color: #fff !important;
}

/* hover add-to-cart bar — slides up in orange (reference interaction) */
.productItem .cart-action {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    transition: transform .25s ease;
    z-index: 2;
}

.productItem:hover .cart-action {
    transform: translateY(0);
}

.productItem .cart-action .cart-btn {
    display: block;
    text-align: center;
    background: var(--ts-accent) !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 11px 0 !important;
    letter-spacing: .2px;
}

.productItem .cart-action .cart-btn:hover {
    background: var(--ts-accent-hover) !important;
}

/* ---------- Listing page (filters + header) ---------- */
.productFilter-wrapper,
.productFilter-wrapper .card,
.filter-widget {
    border-radius: 12px !important;
    border: 1px solid #eef1f6 !important;
}

.productFilter-title,
.filter-widget .title {
    font-weight: 600 !important;
    color: #17233b !important;
}

/* listing header: big title, count muted */
.product-topbar h1,
.product-topbar .title,
.listing-title {
    font-weight: 700 !important;
    letter-spacing: -0.4px;
}

.productItem:hover,
.productlistItem:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(13, 27, 42, 0.12) !important;
    border-color: rgba(247, 148, 29, 0.35) !important;
}

.productItem .productThumb-wrapper img {
    transition: transform .4s ease;
}

.productItem:hover .productThumb-wrapper img {
    transform: scale(1.05);
}

/* Price — bold, brand navy with orange discount */
.productItem .price,
.productlistItem .price,
.price-wrap .price {
    color: #0D1B2A !important;
    font-weight: 700 !important;
}

.price-wrap .discount,
.productItem .discount {
    color: var(--ts-text-muted) !important;
}

/* Category / feature cards */
.categoryItem,
.category-card,
.CategoriesItem {
    border-radius: 12px !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.categoryItem:hover,
.category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(13, 27, 42, 0.12);
}

/* Footer — dark navy like the reference */
.footer,
.footer-top,
.footer-bottom,
footer {
    background: var(--ts-navy) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-family: var(--ts-font) !important;
}

.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6,
.footer-widget .title,
.footer-widget h4 {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.footer a,
.footer-widget a,
.footer-widget li a,
.footer p, .footer li, .footer span {
    color: rgba(255, 255, 255, 0.72) !important;
    transition: color .2s ease;
}

.footer a:hover,
.footer-widget a:hover {
    color: var(--ts-accent) !important;
}

.footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Footer newsletter input + button */
.footer input[type="text"],
.footer input[type="email"],
.footer-search input {
    background: var(--ts-navy-2) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border-radius: var(--ts-radius) !important;
}

.footer .btn,
.footer-search button {
    background: var(--ts-accent) !important;
    color: #fff !important;
    border-radius: var(--ts-radius) !important;
    border: none !important;
}

/* Links & accents */
a {
    transition: color .2s ease;
}

/* Swiper navigation buttons — round, subtle */
.swiper-button-next,
.swiper-button-prev,
.product-button-next,
.product-button-prev {
    border-radius: 50% !important;
    transition: all .2s ease !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--ts-accent) !important;
    color: #fff !important;
}

/* Badges (sale / discount tags) */
.product-offer,
.badge,
.offer-badge {
    background: var(--ts-accent) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

/* Rounded imagery site-wide for the premium feel */
.bannerContent img,
.banner-item img,
.singleBanner img {
    border-radius: 12px;
}

/* ============================================================
   HOMEPAGE REDESIGN — hero, rhythm, sections
   ============================================================ */

/* --- Hero slider: readable, bold, premium --- */
.banner-section .banner__card {
    border-radius: 14px;
    overflow: hidden;
}

/* dark gradient overlay for text readability */
.banner-section .hero-text::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(9, 17, 28, 0.72) 0%,
        rgba(9, 17, 28, 0.35) 45%,
        rgba(9, 17, 28, 0) 75%);
    pointer-events: none;
}

.banner-section .hero-content {
    position: relative;
    z-index: 2;
}

.banner-section .hero-content .subtitle {
    color: var(--ts-accent) !important;
    font-weight: 600 !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px !important;
    background: none !important;
}

.banner-section .hero-content .title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: clamp(30px, 3.6vw, 52px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.8px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.banner-section .hero-content .desc {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15.5px !important;
    max-width: 430px;
}

.banner-section .hero-content .btn {
    padding: 12px 28px !important;
    font-size: 15px !important;
    box-shadow: 0 10px 26px rgba(247, 148, 29, 0.4);
}

/* hide CTA pills that have no label (slides without button text) */
.banner-section .banner-btn .btn:empty {
    display: none !important;
}

/* slider arrows */
.banner-section .custom-navigation [class*=button] {
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    border-radius: 50% !important;
}

.banner-section .custom-navigation [class*=button]:hover {
    background: var(--ts-accent) !important;
    border-color: var(--ts-accent) !important;
}

/* side promo banners: consistent radius + hover + readable text */
.heroAds-wrapper img,
.heroAds-wrapper > div,
.heroAds-wrapper a {
    border-radius: 14px;
}

.heroAds-wrapper .content,
.heroAds-wrapper [class*=content] {
    z-index: 2;
}

.heroAds-wrapper h1, .heroAds-wrapper h2, .heroAds-wrapper h3,
.heroAds-wrapper h4, .heroAds-wrapper .title {
    font-weight: 700 !important;
    letter-spacing: -0.3px;
    color: #17233b;
}

.heroAds-wrapper a > div,
.heroAds-wrapper > div {
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.heroAds-wrapper a:hover > div,
.heroAds-wrapper > div:hover {
    box-shadow: 0 18px 40px rgba(13, 27, 42, 0.16);
}

/* blog cards: rounded, consistent with product cards */
.blogItem,
.blog-item,
[class*=blog] .card {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid #eef1f6 !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.blogItem:hover,
.blog-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(13, 27, 42, 0.12);
}

/* --- Section rhythm: alternate white and soft bands --- */
.deals-section {
    background: #f6f8fb;
}

.deals-section .productItem {
    border-color: #e8edf4 !important;
}

.categories-section {
    background: #ffffff;
}

.brands-section {
    background: #f6f8fb;
}

/* consistent, tighter vertical rhythm — no dead space between sections */
.ts-space-section,
.categories-section,
.deals-section,
.products-section,
.brands-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

.py-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.pt-60 { padding-top: 30px !important; }
.pb-30 { padding-bottom: 30px !important; }

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

/* product carousels: don't reserve height for absent slides */
.deals-section .swiper,
.products-section .swiper {
    padding-bottom: 8px !important;
}

/* --- Section headers: title + view-all pill, one consistent pattern --- */
.section-title .title,
.section-title h2 {
    font-size: clamp(22px, 2.2vw, 30px) !important;
}

.section-title .section-btn .solid-btn,
.section-title .solid-btn,
.section-btn a {
    background: transparent !important;
    color: var(--ts-navy) !important;
    border: 1.5px solid #d7dee9 !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    transition: all .2s ease !important;
}

.section-title .section-btn .solid-btn:hover,
.section-btn a:hover {
    border-color: var(--ts-accent) !important;
    color: var(--ts-accent) !important;
    background: rgba(247, 148, 29, 0.06) !important;
}

/* category cards inside Popular Categories: clean tiles */
.categoriesItem {
    border-radius: 12px !important;
    border: 1px solid #eef1f6;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

.categoriesItem:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(13, 27, 42, 0.10);
}

/* ---------- Popular Brand: clean text-badge cards ---------- */
/* missing logos (fallback-flagged by the global handler) are hidden and
   the brand name becomes an elegant badge — the industry pattern when
   logo artwork is unavailable */
.brands-section img[data-ts-fallback] {
    display: none !important;
}

.brands-section img {
    filter: grayscale(1);
    opacity: .8;
    max-height: 56px;
    object-fit: contain;
    transition: all .25s ease;
}

.brands-section img:hover {
    filter: none;
    opacity: 1;
}

.brands-section .brandItem,
.brands-section [class*=brand] {
    border-radius: 12px;
}

.brands-section .swiper-slide > div,
.brands-section .brandItem {
    background: #fff !important;
    border: 1px solid #e8edf4 !important;
    border-radius: 12px !important;
    min-height: 92px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600 !important;
    color: #17233b !important;
    letter-spacing: .2px;
    transition: all .22s ease !important;
}

.brands-section .swiper-slide > div:hover,
.brands-section .brandItem:hover {
    border-color: var(--ts-accent) !important;
    color: var(--ts-accent) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(13, 27, 42, 0.10);
}

/* ---------- Product carousels: uniform, professional cards ---------- */
/* consistent square image stage — every tile scan sits centered on the
   same neutral canvas regardless of its original crop */
.productItem .productThumb-wrapper {
    aspect-ratio: 1 / 1;
    background: #f7f8fa !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.productItem .productThumb-wrapper .productThumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.productItem .productThumb-wrapper img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    mix-blend-mode: multiply; /* blends white scan edges into the canvas */
}

/* equal-height swiper slides so card rows align */
.deals-section .swiper-slide,
.products-section .swiper-slide {
    height: auto !important;
    display: flex;
}

.deals-section .swiper-slide .productItem,
.products-section .swiper-slide .productItem {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.deals-section .swiper-slide .productItem .product-content,
.products-section .swiper-slide .productItem .product-content {
    margin-top: auto;
}

/* hide loading skeleton ghosts that linger after content arrives */
.productItem.skeleton:empty,
.swiper-slide:has(.skeleton:empty) {
    display: none !important;
}

/* ---------- Shop By Space strip (reference room cards) ---------- */
.ts-space-section {
    padding: 42px 0 10px;
}

.ts-space-strip {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 6px 2px 14px;
    scrollbar-width: none;
}

.ts-space-strip::-webkit-scrollbar { display: none; }

.ts-space-card {
    flex: 0 0 auto;
    width: 168px;
    text-align: center;
    text-decoration: none;
}

.ts-space-img {
    width: 168px;
    height: 128px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(13, 27, 42, 0.10);
    transition: transform .25s ease, box-shadow .25s ease;
}

.ts-space-card:hover .ts-space-img {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(13, 27, 42, 0.18);
}

.ts-space-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.ts-space-card:hover .ts-space-img img {
    transform: scale(1.06);
}

.ts-space-initial {
    font-size: 44px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--ts-font);
}

/* tasteful tile-tone gradients when no category image exists yet */
.ts-grad-0 { background: linear-gradient(135deg, #0D1B2A, #2b4a6f); }
.ts-grad-1 { background: linear-gradient(135deg, #7a5c3e, #c9a227); }
.ts-grad-2 { background: linear-gradient(135deg, #35524a, #6f9d8c); }
.ts-grad-3 { background: linear-gradient(135deg, #5b4a68, #937daa); }
.ts-grad-4 { background: linear-gradient(135deg, #713f3f, #b57e6a); }
.ts-grad-5 { background: linear-gradient(135deg, #2f5d62, #64a6ac); }

.ts-space-label {
    margin-top: 10px;
    font-family: var(--ts-font);
    font-weight: 600;
    font-size: 14px;
    color: #17233b;
}

.ts-space-card:hover .ts-space-label {
    color: var(--ts-accent);
}

/* ---------- Hero carousel polish ---------- */
.swiper,
.hero-slider,
.main-slider {
    border-radius: 14px;
    overflow: hidden;
}

.swiper-pagination-bullet {
    background: #ffffff !important;
    opacity: 0.5 !important;
    width: 9px !important;
    height: 9px !important;
    transition: all .25s ease !important;
}

.swiper-pagination-bullet-active {
    background: var(--ts-accent) !important;
    opacity: 1 !important;
    width: 26px !important;
    border-radius: 6px !important;
}

/* Breadcrumb strip */
.breadcrumb-wrapper,
.breadcrumb {
    font-family: var(--ts-font) !important;
}

.breadcrumb a:hover {
    color: var(--ts-accent) !important;
}

/* ---------- Floating contact buttons (reference style) ---------- */
.ts-floats {
    position: fixed;
    right: 22px;
    bottom: 90px;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ts-float {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    transition: transform .2s ease, box-shadow .2s ease;
}

.ts-float:hover {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
    color: #fff !important;
}

.ts-float-wa { background: #25D366; }
.ts-float-call { background: var(--ts-accent); }

@media (max-width: 767px) {
    .ts-floats { right: 14px; bottom: 76px; }
    .ts-float { width: 46px; height: 46px; }
}

/* ---------- Product detail page (reference anatomy) ---------- */
.productDetail-wrapper .title,
.productDetail-wrapper h1,
.productDetail-wrapper h2 {
    font-weight: 700 !important;
    letter-spacing: -0.3px;
}

/* gallery images rounded like reference */
.productDetail-wrapper img,
.product-thumb img,
.swiperSlide img {
    border-radius: 12px;
}

/* SKU / meta lines muted */
.productDetail-wrapper .sku,
.productDetail-wrapper .product-meta,
.productDetail-wrapper .brand {
    color: #8a94a3 !important;
    font-size: 13px !important;
}

/* buy box: quantity stepper + CTA row */
.productDetail-wrapper .quantity,
.productDetail-wrapper .qty-wrapper,
.quantity-counter {
    border: 1px solid #e3e8ef !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.productDetail-wrapper .btn-secondary,
.productDetail-wrapper .buy-now,
.productDetail-wrapper .add-to-cart {
    min-width: 170px;
}

/* trust strip / detail chips */
.productDetail-wrapper .table td,
.product-desc-table td {
    font-family: var(--ts-font) !important;
}

.productDetail-wrapper .price {
    color: #0D1B2A !important;
    font-weight: 700 !important;
}

.product-attr-size li.active,
.product-attr-color li.active {
    border-color: var(--ts-accent) !important;
}

/* Quantity stepper + tabs */
.nav-tabs .nav-link.active {
    color: var(--ts-accent) !important;
    border-bottom-color: var(--ts-accent) !important;
}

/* Pagination */
.pagination .page-item.active .page-link {
    background: var(--ts-accent) !important;
    border-color: var(--ts-accent) !important;
    color: #fff !important;
}

.pagination .page-link {
    color: #0D1B2A;
    border-radius: 8px !important;
    margin: 0 3px;
}

.pagination .page-link:hover {
    color: var(--ts-accent);
}

/* ============================================================
   V2 DESIGN LAYER — TileStyle-Full-Website-Design-v2.html
   Complete journey styling: topbar, cards, PDP calculator,
   cart/checkout trust, footer payments. Appended last so it
   wins over earlier rules of equal specificity.
   ============================================================ */

/* ---------- Frame 1: utility topbar restored (v2 has it) ---------- */
.headerTopbar {
    display: block !important;
    background: #0a1522 !important;
}
.headerTopbar-wrapper {
    border-bottom: 0 !important;
    padding: 8px 0 !important;
}
.ts-topbar-place {
    color: rgba(255, 255, 255, 0.78);
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.ts-topbar-place i {
    color: var(--ts-accent);
}
.headerTopbar-wrapper .list-item li a {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 12.5px !important;
    font-weight: 500;
}
.headerTopbar-wrapper .list-item li a[href^="tel"] {
    color: var(--ts-accent) !important;
    font-weight: 700;
}
/* the main-row quicklinks cluster duplicated the topbar — hide it now */
.header-quicklinks {
    display: none !important;
}

/* ---------- Frames 1+5: product card v2 bits ---------- */
/* "New" flag (top-left, navy) + discount flag (orange) */
.productItem .ts-flag,
.productItem .badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--ts-accent);
    color: #fff;
}
.productItem .ts-flag-new {
    background: var(--ts-navy);
}
/* unit + coverage line: "Per Box · covers 15.5 sq ft" */
.ts-unit-line {
    color: #8a94a3;
    font-size: 11.5px;
    margin: 2px 0 6px;
}
/* "/box" suffix after the price */
.price .ts-per-unit {
    font-size: 11px;
    font-weight: 600;
    color: #8a94a3;
    margin-left: 3px;
}

/* ---------- Frame 6: PDP — price context, calculator, hints, trust ---------- */
.ts-price-sub {
    background: #f6f8fb;
    border: 1px solid #eef1f6;
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 13px;
    color: #4a5568;
    margin: 6px 0 14px;
    font-weight: 500;
}
.ts-calc {
    border: 1.5px solid var(--ts-accent);
    border-radius: 12px;
    background: rgba(247, 148, 29, 0.04);
    padding: 14px;
    margin: 0 0 16px;
}
.ts-calc > b {
    font-size: 14px;
    color: #17233b;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ts-calc > b i {
    color: var(--ts-accent);
}
.ts-calc-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    align-items: center;
}
.ts-calc-row input {
    flex: 1;
    max-width: 220px;
    border: 1px solid #e3e8ef;
    background: #fff;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: var(--ts-font);
    color: #17233b;
}
.ts-calc-row input:focus {
    outline: none;
    border-color: var(--ts-accent);
}
.ts-calc-unit {
    font-size: 12.5px;
    font-weight: 600;
    color: #4a5568;
}
.ts-calc-out {
    margin-top: 10px;
    background: #fff;
    border: 1px dashed rgba(247, 148, 29, 0.55);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    color: #4a5568;
}
.ts-calc-out b {
    color: var(--ts-accent);
}
.ts-calc-out a {
    float: right;
    color: var(--ts-accent);
    font-weight: 700;
    font-size: 12.5px;
}
.ts-qty-hint {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    color: #8a94a3;
    font-weight: 500;
}
.ts-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin: 14px 0 4px;
    font-size: 12px;
    color: #6b7686;
}
.ts-trust-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}
.ts-trust-strip i {
    color: #1e9e5a;
}

/* ---------- Frame 7: cart — tip banner, WhatsApp, secure note ---------- */
.ts-cart-tip {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: rgba(247, 148, 29, 0.07);
    border: 1px dashed rgba(247, 148, 29, 0.5);
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 13px;
    color: #7a5a2b;
    margin-bottom: 14px;
    line-height: 1.55;
}
.ts-cart-tip i {
    color: var(--ts-accent);
    font-size: 17px;
    flex: none;
    margin-top: 1px;
}
.ts-cart-tip b {
    color: var(--ts-accent);
}
.ts-wa-order {
    display: block;
    text-align: center;
    margin-top: 9px;
    border: 1.5px solid #25d366 !important;
    color: #128c4b !important;
    border-radius: 8px;
    font-weight: 700;
}
.ts-wa-order:hover {
    background: #25d366 !important;
    color: #fff !important;
}
.ts-wa-order i {
    margin-right: 5px;
}
.ts-secure-note {
    text-align: center;
    font-size: 11.5px;
    color: #8a94a3;
    margin-top: 10px;
}
.ts-secure-note i {
    color: #1e9e5a;
    margin-right: 4px;
}

/* ---------- Frame 1: footer payment badges ---------- */
.ts-pay-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 10px;
}
.ts-pay-badges span {
    background: #fff;
    color: #17233b;
    border-radius: 5px;
    padding: 4px 9px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* ---------- responsive touch-ups for the new pieces ---------- */
@media (max-width: 991px) {
    .ts-topbar-place {
        display: none;
    }
    .ts-trust-strip {
        gap: 10px 14px;
    }
}

/* ============================================================
   V2 HEADER CLONE — exact Frame 1 header anatomy
   ============================================================ */

/* ---------- logo: orange tile mark + TILESTYLE wordmark ---------- */
.ts-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    text-decoration: none;
}
.ts-logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ts-accent);
    color: #fff;
    font-style: normal;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(247, 148, 29, 0.4);
    flex: none;
}
.ts-logo-text {
    font-family: var(--ts-font);
    font-weight: 800;
    font-size: 21px;
    letter-spacing: 1.2px;
    color: #fff !important;
}
.ts-logo-text b {
    color: var(--ts-accent);
    font-weight: 800;
}
/* kill any residual image sizing on the logo slot */
.header-logo img {
    display: none !important;
}

/* ---------- search: white bar + orange labeled button ---------- */
.headerMiddle .search-form .input-group {
    background: #fff !important;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    height: 44px;
}
.headerMiddle .search-form .form-control {
    background: #fff !important;
    color: #17233b !important;
    font-size: 13.5px !important;
    border: 0 !important;
    height: 44px;
    padding-left: 16px;
}
.headerMiddle .search-form .form-control::placeholder {
    color: #7a8494 !important;
}
.headerMiddle .search-form .input-group > button {
    background: var(--ts-accent) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 700;
    font-size: 13px;
    padding: 0 20px !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    border-radius: 0 !important;
}
.headerMiddle .search-form .input-group > button:hover {
    background: var(--ts-accent-hover) !important;
}
.ts-search-label {
    font-family: var(--ts-font);
    letter-spacing: 0.2px;
}

/* ---------- action cluster: icon badges + stacked labels ---------- */
.header-action .action-list .icon {
    position: relative;
}
.header-action .action-list .icon .count {
    position: absolute;
    top: -7px;
    right: -9px;
    background: var(--ts-accent);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    min-width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    padding: 0 4px;
    border: 1.5px solid var(--ts-navy);
}
.header-action .ts-cartw,
.header-action .ts-acct {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.header-action .ts-cartw small,
.header-action .ts-acct small {
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}
.header-action .ts-cartw span,
.header-action .ts-acct span {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* ---------- nav: orange "All Categories" pill restored (v2) ---------- */
.headerBottom .header-category .category-header.d-lg-flex {
    display: flex !important;
    align-items: center;
    gap: 8px;
    background: var(--ts-accent) !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 8px 16px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer;
    white-space: nowrap;
    margin-right: 18px;
}
.headerBottom .header-category .category-header.d-lg-flex:hover {
    background: var(--ts-accent-hover) !important;
}
.headerBottom .header-category .category-header .bar svg,
.headerBottom .header-category .category-header .bar path {
    fill: #fff !important;
}

/* topbar "Helpline" text was invisible (dark on dark) */
.headerTopbar-wrapper .list-item li {
    color: rgba(255, 255, 255, 0.62) !important;
    font-size: 12.5px !important;
}

/* v2 header fix: search button was width-clipped by the base theme */
.headerMiddle .search-form .input-group > button {
    width: auto !important;
    min-width: max-content !important;
    flex: 0 0 auto !important;
}

/* ============================================================
   V2 PIXEL PASS — side-by-side diffs vs design screenshot
   ============================================================ */

/* logo: TILE STYLE with word gap like the design */
.ts-logo-text b {
    margin-left: 7px;
}

/* search-bar category segment ("All Categories ▾") */
.ts-search-cat {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f6f8fb;
    color: #17233b;
    font-size: 13px;
    font-weight: 700;
    padding: 0 14px;
    border-right: 1px solid #e6eaf1;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    height: 44px;
    font-family: var(--ts-font);
}
.ts-search-cat i {
    color: #8a94a3;
    font-size: 15px;
}
.ts-search-cat-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(13, 27, 42, 0.18);
    list-style: none;
    padding: 6px 0;
    margin: 0;
    z-index: 120;
    max-height: 340px;
    overflow-y: auto;
}
.ts-search-cat-list li {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #39424e;
    cursor: pointer;
}
.ts-search-cat-list li:hover {
    background: #f6f8fb;
    color: var(--ts-accent);
}
@media (max-width: 1199px) {
    .ts-search-cat {
        display: none;
    }
}

/* action cluster: design order = Account · Wishlist · Cart, with dividers */
.header-action {
    display: flex;
    align-items: center;
    gap: 26px;
}
.header-action .action-list:has(.ts-acct),
.header-action .userHeader {
    order: 1;
}
.header-action .ts-iconbtn {
    order: 2;
    position: relative;
    padding-left: 26px;
}
.header-action .ts-iconbtn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, 0.14);
}
.header-action .action-list[data-bs-target="#offcanvasCart"] {
    order: 3;
    position: relative;
    padding-left: 26px;
}
.header-action .action-list[data-bs-target="#offcanvasCart"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 26px;
    background: rgba(255, 255, 255, 0.14);
}
/* keep the mobile search / offcanvas triggers at the front */
.header-action > a[data-bs-target="#searchOffcanvas"] {
    order: 0;
}

/* topbar phone: icon + orange number, no "Helpline" prefix */
.headerTopbar-wrapper .list-item li a[href^="tel"] i {
    margin-right: 5px;
    font-size: 13px;
}

/* v2 fix: search input collapsed next to the category segment */
.headerMiddle .search-form {
    flex: 1;
    max-width: 700px;
}
.headerMiddle .search-form .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}
.headerMiddle .search-form .input-group .form-control {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
}

/* ============================================================
   V2 SPACING PASS — header action cluster identical to prototype:
   bare icons (no boxed backgrounds), tight even gaps, centered
   dividers, badges sitting on the icon corner.
   ============================================================ */

/* strip the boxed/circled backgrounds the base theme puts behind icons */
.header-action .action-list .icon,
.header-action .userHeader .icon,
.header-action .action-list .thumb {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-action .action-list .icon svg {
    width: 21px;
    height: 21px;
}
.header-action .action-list .icon svg path {
    fill: #fff;
}

/* prototype spacing: even, compact gaps around the dividers */
.header-action {
    gap: 20px !important;
}
.header-action .action-list {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 0 !important;
}
.header-action .ts-iconbtn,
.header-action .action-list[data-bs-target="#offcanvasCart"] {
    padding-left: 20px !important;
}

/* badge hugs the icon corner like the prototype */
.header-action .action-list .icon .count {
    top: -6px;
    right: -8px;
}

/* account cluster text sizes per prototype */
.header-action .ts-acct small {
    font-size: 10px;
}
.header-action .ts-acct span {
    font-size: 13px;
}
.header-action .ts-cartw small {
    font-size: 10px;
}
.header-action .ts-cartw span {
    font-size: 13.5px;
}

/* ============================================================
   V2 FINAL — bare icons like the prototype (kills the earlier
   38px boxed-icon rule at equal specificity; later wins)
   ============================================================ */
.headerMiddle .header-action .action-list .icon,
.headerMiddle .header-action .icon,
.headerMiddle .header-action a > div:first-child {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
.headerMiddle .header-action svg {
    width: 21px !important;
    height: 21px !important;
}
/* even, prototype-tight cluster spacing */
.headerMiddle .header-action {
    gap: 20px !important;
}
.headerMiddle .header-action .action-list {
    gap: 9px !important;
}
/* badge back on the icon corner (bare icon = tighter offset) */
.headerMiddle .header-action .action-list .icon .count {
    top: -7px !important;
    right: -9px !important;
}

/* ============================================================
   V2 SPACING ROOT-CAUSE FIX — the base theme stretches
   .header-action with justify-content:space-between across
   leftover row width, which blew the gaps apart. Pin it.
   ============================================================ */
.headerMiddle .header-action {
    justify-content: flex-end !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    gap: 22px !important;
}
.headerMiddle .header-action .action-list,
.headerMiddle .header-action .userHeader {
    flex: 0 0 auto !important;
    width: auto !important;
}
/* dividers: equal 22px on both sides of each */
.headerMiddle .header-action .ts-iconbtn,
.headerMiddle .header-action .action-list[data-bs-target="#offcanvasCart"] {
    padding-left: 22px !important;
}

/* ============================================================
   V2 FULL-SITE PASS — homepage section fixes from QA captures
   ============================================================ */

/* Popular Brands — prototype text badges (no tiny logos) */
.brands-section .brandItem-thumb {
    display: none !important;
}
.brands-section .brandItem {
    border: 1px solid #eef1f6;
    background: #fff;
    border-radius: 12px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(13, 27, 42, 0.04);
}
.brands-section .brandItem-content .title {
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #2a3648 !important;
    margin: 0 !important;
}

/* Admin banner band — equal heights, rounded, cover (no half images) */
.addBanner-section .addBanner-item,
.addBanner-section a {
    border-radius: 14px;
    overflow: hidden;
    display: block;
}
.addBanner-section img {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;
    border-radius: 14px;
    display: block;
}

/* Shop By Space gradient placeholders (letter removed) */
.ts-space-img {
    position: relative;
    overflow: hidden;
}
.ts-space-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
            90deg,
            transparent 0 42px,
            rgba(255, 255, 255, 0.07) 42px 44px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 42px,
            rgba(0, 0, 0, 0.1) 42px 44px
        );
    pointer-events: none;
}
.ts-space-img img {
    position: relative;
    z-index: 1;
}

/* ---------- v2: prototype empty state (cart / no results) ---------- */
.ts-empty {
    text-align: center;
    padding: 60px 20px 80px;
}
.ts-empty-icon {
    font-size: 44px;
    color: #c9d2df;
    display: block;
    margin-bottom: 12px;
}
.ts-empty h4 {
    font-weight: 700;
    font-size: 19px;
    margin-bottom: 6px;
}
.ts-empty p {
    color: #8a94a3;
    font-size: 13.5px;
    margin-bottom: 18px;
}

/* ---------- v2: auth welcome panel (Frame 8) ---------- */
.ts-auth-aside {
    background: var(--ts-navy);
    border-radius: 16px;
    color: #fff;
    padding: 46px 40px;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ts-auth-aside h3 {
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 24px;
    margin-bottom: 10px;
}
.ts-auth-aside h3 span {
    color: var(--ts-accent);
}
.ts-auth-aside p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}
.ts-auth-aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.9);
}
.ts-auth-aside li {
    margin-bottom: 9px;
}

/* ============================================================
   V2 SPACING — measured fix: base theme puts min-width on the
   action links (heart box rendered 113px wide for a 21px icon).
   Zero it so every group hugs its content; 22px rhythm applies.
   ============================================================ */
.header .headerMiddle .headerMiddle-wrapper .header-action .action-list,
.headerMiddle .header-action .action-list,
.headerMiddle .header-action .userHeader,
.headerMiddle .header-action a.action-list {
    min-width: 0 !important;
    max-width: max-content !important;
    width: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
}

/* ============================================================
   V2 SEARCH BAR — exact prototype anatomy:
   soft 10px container · white category segment with hairline
   divider · sentence-case placeholder · orange Search button
   flush to the right edge, full height, no pill inset.
   ============================================================ */
.header .headerMiddle .search-form .input-group,
.headerMiddle .search-form .input-group {
    background: #fff !important;
    border-radius: 10px !important;
    height: 48px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
    border: 0 !important;
    padding: 0 !important;
    align-items: stretch !important;
}
/* category segment: white like the prototype, hairline divider */
.ts-search-cat {
    background: #fff !important;
    height: 48px !important;
    font-size: 13.5px !important;
    border-right: 1px solid #e6eaf1 !important;
}
/* input: sentence-case placeholder (base theme was capitalizing) */
.header .headerMiddle .search-form .form-control,
.headerMiddle .search-form .form-control {
    height: 48px !important;
    font-size: 14px !important;
    text-transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.headerMiddle .search-form .form-control::placeholder {
    text-transform: none !important;
    color: #7a8494 !important;
}
/* button: flush right, full height, straight edges (container clips) */
.header .headerMiddle .search-form .input-group > button,
.headerMiddle .search-form .input-group > button {
    border-radius: 0 !important;
    margin: 0 !important;
    inset: auto !important;
    height: 48px !important;
    align-self: stretch !important;
    padding: 0 22px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* v2 search bar — pin child order (base theme reverses it) and
   keep the category segment's label visible */
.headerMiddle .search-form .input-group {
    flex-direction: row !important;
}
.headerMiddle .search-form .input-group .ts-search-cat {
    order: 1 !important;
    display: inline-flex !important;
    min-width: max-content !important;
    color: #17233b !important;
    font-weight: 700 !important;
}
.headerMiddle .search-form .input-group .form-control {
    order: 2 !important;
}
.headerMiddle .search-form .input-group > button {
    order: 3 !important;
}

/* v2 search bar — the base theme absolutely-positions the button;
   put it back in flow so it sits flush right inside the bar */
.header .headerMiddle .search-form .input-group > button,
.headerMiddle .search-form .input-group > button {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

/* ============================================================
   V2 PRODUCT CARD — exact prototype anatomy:
   full-bleed 1:1 image · white-circle heart always visible ·
   name / meta / unit stack · ONE divider above the price row ·
   price left + Quick View pill right.
   ============================================================ */

/* image stage: fill the card edge-to-edge, square */
.productItem .productThumb-wrapper {
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}
.productItem .productThumb {
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    background: #f6f8fb;
}
.productItem .productThumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    mix-blend-mode: multiply;
    transform: none !important;
}

/* heart (wishlist) — white circle, top right, always visible */
.productItem .product-actions {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
.productItem .product-actions .action-btn {
    background: #fff !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(13, 27, 42, 0.14) !important;
    border: 0 !important;
}
.productItem .product-actions .action-btn i {
    font-size: 15px !important;
    color: #17233b;
}
.productItem .product-actions .action-btn.wishlist i {
    color: #e5484d;
}

/* content stack: single divider above price row only */
.productItem .product-content {
    padding: 12px 14px 14px !important;
}
.productItem .product-content .title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
}
.productItem .product-meta {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
}
.productItem .product-meta .product-category {
    font-size: 12px !important;
}
.ts-unit-line {
    margin: 0 0 8px !important;
}

/* price row: divider on top, price left, Quick View pill right */
.productItem .product-content .position-relative {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 1px solid #eef1f6 !important;
    padding-top: 10px !important;
    margin-top: 8px !important;
}
.productItem .product-content .position-relative::before,
.productItem .product-content .position-relative::after {
    display: none !important;
}
.productItem .price {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #17233b !important;
    margin: 0 !important;
}
.productItem .quickBtn {
    position: static !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #f4f6fa !important;
    color: #17233b !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transform: none !important;
    white-space: nowrap;
}
.productItem .quickBtn:hover {
    background: var(--ts-accent) !important;
    color: #fff !important;
}

/* v2 card — force full-bleed image (base theme boxes/margins the img)
   and force the action buttons visible without hover */
.productItem .productThumb img,
.productItem .productThumb-wrapper img {
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
}
.productItem .product-actions {
    display: flex !important;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}
/* compare toggle keeps its top-left slot */
.productItem .product-actions:has(.ri-scales-3-fill) {
    right: auto;
    left: 10px;
}

/* ============================================================
   V2 CARD — final specificity override (base theme hides
   actions until hover and letterboxes the thumb img with
   higher-specificity rules; match and beat them)
   ============================================================ */
html body .productItem .productThumb-wrapper .product-actions,
.productItem .productThumb-wrapper .product-actions {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
    transform: none !important;
}
html body .productItem .productThumb-wrapper .product-actions .action-btn,
.productItem .productThumb-wrapper .product-actions .action-btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    transform: none !important;
}
html body .productItem .productThumb-wrapper .productThumb,
.productItem .productThumb-wrapper .productThumb {
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
html body .productItem .productThumb-wrapper .productThumb img,
.productItem .productThumb-wrapper .productThumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
    transform: none !important;
}

/* v2 card final: prototype shows ONLY the heart on cards — hide compare */
.productItem .product-actions:has(.ri-scales-3-fill) {
    display: none !important;
}
/* v2.1: the old scale(1.42) zoom hack (blur source) is gone — cards now get
   a sharp 600px variant. Show the full scan, gently zoomed only on hover. */
html body .productItem .productThumb-wrapper .productThumb img,
.productItem .productThumb-wrapper .productThumb img {
    transform: none !important;
    transition: transform .4s ease;
}
html body .productItem:hover .productThumb-wrapper .productThumb img,
.productItem:hover .productThumb-wrapper .productThumb img {
    transform: scale(1.04) !important;
}
.productItem .productThumb-wrapper {
    overflow: hidden !important;
}

/* hide compare on cards — outrank the forced display:flex above */
html body .productItem .productThumb-wrapper .product-actions:has(.ri-scales-3-fill) {
    display: none !important;
}

/* ============================================================
   MOBILE HEADER FIX (≤991px) — 2026-07-12
   Live audit found: desktop "All Categories" pill + desktop nav
   row (.ts-cat-menu) both rendering on mobile, stacked on the
   mobile "Shop By Categories" trigger — a ~200px sticky mess.
   These rules sit last in the cascade and are media-scoped.
   ============================================================ */
@media (max-width: 991.98px) {
    /* desktop-only pieces: hard off */
    html body .headerBottom .header-category .category-header.d-lg-flex,
    html body .headerBottom .ts-cat-menu,
    html body .headerBottom .header-btn {
        display: none !important;
    }

    /* one compact row: [Shop By Categories]        [hamburger] */
    html body .headerBottom-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px;
        padding: 8px 0 !important;
        min-height: 0 !important;
    }
    html body .headerBottom .header-menu {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    html body .headerBottom .header-category .category-header.d-lg-none {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px;
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        width: auto !important;
    }
    html body .headerBottom .header-meta {
        flex: 0 0 auto !important;
    }
}

/* 404 page illustration overflowed 390px screens (natural 431px img) */
html body .errorPage-thumb img,
html body .errorPage-thumb {
    max-width: min(100%, 340px) !important;
    width: auto !important;
    height: auto !important;
}

/* ============================================================
   MOBILE TAP-TARGET & ELEMENT PASS (≤991px) — 2026-07-12
   Audit: header icons 21x21, topbar links 18px tall, qty
   stepper 31px, card hearts 34px. WCAG/thumb target ≈44px.
   Media-scoped: desktop layout untouched.
   ============================================================ */
@media (max-width: 991.98px) {
    /* header action icons (search/account/wishlist/cart): 44px tap area */
    html body .header-action .action-list {
        min-width: 38px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 4px !important;
        margin: 0 !important;
        border: 0 !important;
    }
    /* compact brand on phones frees row space */
    html body .ts-logo-text { font-size: 17px !important; letter-spacing: 0.8px !important; }
    html body .ts-logo-mark { width: 26px !important; height: 26px !important; font-size: 13px !important; }
    html body .headerMiddle-wrapper { gap: 4px !important; }
    html body .header-action {
        gap: 2px !important;
        flex-wrap: nowrap !important;
        max-width: 100% !important;
    }
    /* drawer close button: proper tap size */
    html body .offcanvas .close-btn,
    html body .offcanvas-header button {
        min-height: 40px !important;
        min-width: 40px !important;
    }

    /* topbar quick links: comfortable touch rows */
    html body .headerTopbar a,
    html body .header-quicklinks a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 36px !important;
        padding: 6px 8px !important;
    }

    /* product-card action buttons (heart etc.) */
    html body .productItem .product-actions .action-btn {
        width: 42px !important;
        height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* qty stepper: finger-sized */
    html body .quantity,
    html body .quantity-counter {
        min-height: 44px !important;
    }
    html body .quantity button,
    html body .quantity-counter button,
    html body .quantity .qty-btn,
    html body .quantity input {
        min-height: 42px !important;
        min-width: 40px !important;
        font-size: 16px !important;
    }

    /* all form controls: 44px min + 16px font (kills iOS zoom-on-focus) */
    html body input.form-control,
    html body select.form-control,
    html body .form-control,
    html body select,
    html body textarea {
        min-height: 44px !important;
        font-size: 16px !important;
    }
    html body textarea { min-height: 90px !important; }

    /* buttons site-wide: comfortable */
    html body .btn,
    html body button[type=submit] {
        min-height: 44px !important;
    }

    /* Quick View pill + price row on cards */
    html body .productItem .quickBtn {
        min-height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 6px 12px !important;
    }

    /* footer link rows: spaced for touch */
    html body .footer-section a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 34px !important;
    }

    /* modal dialogs: full-width sheet feel */
    html body .modal-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* offcanvas drawers: cap width to viewport */
    html body .offcanvas.offcanvas-end,
    html body .offcanvas.offcanvas-start {
        max-width: 86vw !important;
    }

    /* breadcrumb + section paddings: tighter but readable */
    html body .section-title h2 { line-height: 1.25 !important; }
}

/* mobile: hero rating card hugged left with dead space right — full width */
@media (max-width: 767.98px) {
    html body .ts-hero-grid .ts-rating-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* mobile topbar: exactly one line — Visit Store | Track Order | phone.
   Compare hidden on phones (3rd item + any compare link, both selectors
   for老browser safety). */
@media (max-width: 767.98px) {
    html body .headerTopbar .header-right .list-item > li:nth-child(3),
    html body .headerTopbar .header-right .list-item li:has(a[href*="compare"]) {
        display: none !important;
    }
    html body .headerTopbar .header-right .list-item {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
    }
    html body .headerTopbar .header-right .list-item > li {
        flex: 0 0 auto !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 12px !important;
        display: flex !important;
        align-items: center !important;
    }
    /* vendor's floating ::after divider off; clean centered divider instead */
    html body .headerTopbar-wrapper .list-item li::after {
        display: none !important;
    }
    html body .headerTopbar .header-right .list-item > li + li {
        border-left: 1px solid rgba(255, 255, 255, 0.22) !important;
    }
    html body .headerTopbar a,
    html body .headerTopbar .list-item a {
        font-size: 12px !important;
        padding: 6px 7px !important;
        min-height: 34px !important;
        white-space: nowrap !important;
    }
    html body .headerTopbar .header-right,
    html body .headerTopbar-wrapper {
        width: 100% !important;
    }
}

/* ============================================================
   MOBILE HEADER v2 + HERO (≤991px) — 2026-07-13
   Hamburger moved into the TOP row (after cart, Header.vue);
   the whole "Shop By Categories" row goes away on phones.
   NOTE: offcanvas panels live inside headerBottom's DOM — only
   the visible row pieces are hidden, never the offcanvas nodes.
   ============================================================ */
@media (max-width: 991.98px) {
    /* kill the second header row's visible pieces */
    html body .headerBottom .header-category,
    html body .headerBottom .header-toggle,
    html body .headerBottom .header-btn,
    html body .headerBottom .ts-cat-menu {
        display: none !important;
    }
    html body .headerBottom,
    html body .headerBottom .container,
    html body .headerBottom-wrapper {
        padding: 0 !important;
        min-height: 0 !important;
        border: 0 !important;
    }

    /* new top-row hamburger */
    html body .header-action .ts-mobile-menu .icon i {
        font-size: 24px;
        color: #fff;
        line-height: 1;
    }

    /* hero: only 2 CTAs on phones; WhatsApp float already exists */
    html body .ts-store-ctas a[href*="wa.me"] {
        display: none !important;
    }
    html body .ts-store-ctas {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: 100% !important;
    }
    html body .ts-store-ctas .btn {
        flex: 1 1 0 !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 12px 8px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    /* trust chips: tidy 1-per-row list with even spacing */
    html body .ts-trust-chips {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 18px !important;
    }
    html body .ts-trust-chips span {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        justify-content: flex-start !important;
        padding: 10px 14px !important;
        margin: 0 !important;
    }
}

/* mobile header v2.1 — icon order + heart kill (2026-07-14) */
@media (max-width: 991.98px) {
    html body .header-action .ts-iconbtn {
        display: none !important; /* heart/wishlist: mobile me sirf bottom-nav/menu se */
    }
    html body .header-action .header-search { order: 0 !important; }
    html body .header-action a.action-list:not(.header-search):not(.ts-iconbtn):not(.ts-mobile-menu) { order: 1 !important; }
    html body .header-action .ts-mobile-menu { order: 5 !important; margin-left: 2px !important; }
}
@media (max-width: 991.98px) {
    /* cart just before hamburger: search(0) account(1) cart(2) menu(5) */
    html body .header-action a.action-list[href*="cart"] { order: 2 !important; }
}

/* logo v3: real brand mark on white chip (2026-07-14) */
html body .ts-logo-mark--img {
    background: #fff !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
html body .ts-logo-mark--img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}
@media (max-width: 991.98px) {
    html body .ts-logo-mark--img { width: 32px !important; height: 32px !important; padding: 3px !important; }
}
html body .ts-logo-mark--img img { filter: none !important; }

/* logo v4: complete lockup on white chip (2026-07-14) */
html body .ts-logo-chip {
    background: #fff !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 12px !important;
    height: 50px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
html body .ts-logo-chip img {
    height: 100% !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: block !important;
    filter: none !important;
}
@media (max-width: 991.98px) {
    html body .ts-logo-chip { height: 40px !important; padding: 5px 9px !important; border-radius: 8px !important; }
}

/* ============================================================
   LISTING v2 — advanced products page (2026-07-14)
   ============================================================ */

/* ---- shared: applied chips ---- */
html body .ts-applied {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; margin-top: 14px;
}
html body .ts-applied-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eef1f7; color: #1c2436;
    border: 1px solid #d8dfec; border-radius: 999px;
    padding: 5px 8px 5px 12px; font-size: 13px; font-weight: 600;
}
html body .ts-applied-chip i {
    cursor: pointer; font-size: 15px; line-height: 1;
    background: #fff; border-radius: 50%; padding: 1px;
    border: 1px solid #d8dfec;
}
html body .ts-applied-chip i:hover { background: #1c2436; color: #fff; }
html body .ts-applied-clear {
    font-size: 13px; font-weight: 700; color: #c0392b;
    text-decoration: underline; margin-left: 4px;
}

/* ---- desktop polish ---- */
@media (min-width: 992px) {
    html body .productFilter-title {
        background: #fff; border: 1px solid #e7ebf3;
        border-radius: 14px; padding: 14px 18px;
        box-shadow: 0 2px 10px rgba(16,24,40,.04);
    }
    html body .productFilter-sidebar .accordion-item {
        border: 1px solid #e7ebf3 !important; border-radius: 12px !important;
        margin-bottom: 10px; overflow: hidden;
        box-shadow: 0 1px 6px rgba(16,24,40,.03);
    }
    html body .productFilter-sidebar .accordion-button {
        font-weight: 700; font-size: 15px; color: #16203a;
    }
    html body .productFilter-sidebar .filterList label { cursor: pointer; }
    html body .productFilter-sidebar .filterList li:hover > label { color: #e8a33d; }
    html body .productFilter-sidebar input[type="checkbox"] { accent-color: #16203a; }
}

/* ---- mobile: app-style listing ---- */
body.ts-lock { overflow: hidden !important; }
html body .ts-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1150;
    background: rgba(13, 19, 33, 0.55);
    backdrop-filter: blur(1px);
}
@media (min-width: 992px) {
    html body .ts-sheet-backdrop { display: none !important; }
}

@media (max-width: 991.98px) {
    /* room for bottom bar */
    html body .productFilter-section { padding-bottom: 84px !important; }

    /* hide desktop sort/paginate dropdowns — sort lives in bottom sheet now */
    html body .productFilter-title .filterRight { display: none !important; }
    html body .productFilter-title {
        background: #fff; border: 1px solid #e7ebf3;
        border-radius: 12px; padding: 10px 14px;
        display: flex; align-items: center; justify-content: space-between;
    }

    /* chips scroll in one row like apps */
    html body .ts-applied {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        padding-bottom: 4px; scrollbar-width: none;
    }
    html body .ts-applied::-webkit-scrollbar { display: none; }
    html body .ts-applied-chip { flex: 0 0 auto; }

    /* FILTER SHEET: the sidebar becomes a bottom sheet */
    html body .productFilter-wrapper .productFilter-sidebar {
        position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important;
        z-index: 1200; width: 100% !important; max-width: 100% !important;
        background: #fff; border-radius: 18px 18px 0 0;
        max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        transform: translateY(103%); transition: transform .28s ease;
        box-shadow: 0 -8px 30px rgba(13,19,33,.25);
        padding: 0 14px 14px !important; margin: 0 !important;
    }
    html body .productFilter-wrapper .productFilter-sidebar.ts-open { transform: translateY(0); }
    /* shimmer sidebar (v-else) must never cover screen */
    html body .productFilter-wrapper .productFilter-sidebar:not(.ts-open):not(:has(.ts-sheet-head)) { display: none; }

    html body .ts-sheet-head {
        position: sticky; top: 0; background: #fff; z-index: 5;
        padding: 8px 0 10px; border-bottom: 1px solid #eef1f7; margin-bottom: 8px;
    }
    html body .ts-sheet-grab {
        display: block; width: 42px; height: 4px; border-radius: 4px;
        background: #d5dbe8; margin: 2px auto 10px;
    }
    html body .ts-sheet-titlebar { display: flex; align-items: center; gap: 12px; }
    html body .ts-sheet-titlebar h6 { margin: 0; font-weight: 800; font-size: 16px; flex: 1; }
    html body .ts-sheet-titlebar h6 em { font-style: normal; color: #e8a33d; }
    html body .ts-sheet-clear { font-size: 13px; font-weight: 700; color: #c0392b; }
    html body .ts-sheet-close {
        border: 0; background: #eef1f7; border-radius: 50%;
        width: 32px; height: 32px; display: inline-flex;
        align-items: center; justify-content: center; font-size: 18px;
    }
    html body .ts-sheet-foot {
        position: sticky; bottom: 0; background: #fff; z-index: 5;
        padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid #eef1f7; margin-top: 8px;
    }

    /* BOTTOM BAR: Sort | Filter */
    html body .ts-listing-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
        display: flex; background: #ffffff;
        border-top: 1px solid #e2e7f0;
        box-shadow: 0 -4px 18px rgba(13,19,33,.10);
        padding-bottom: env(safe-area-inset-bottom);
    }
    html body .ts-listing-bar button {
        flex: 1 1 0; border: 0; background: transparent;
        display: flex; align-items: center; justify-content: center; gap: 7px;
        padding: 13px 6px; font-size: 14px; font-weight: 800; color: #16203a;
    }
    html body .ts-listing-bar button + button { border-left: 1px solid #e2e7f0; }
    html body .ts-listing-bar button i { font-size: 17px; }
    html body .ts-listing-bar button em {
        font-style: normal; font-weight: 600; color: #8792a8; font-size: 12px;
        max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    html body .ts-listing-bar button b {
        background: #e8a33d; color: #fff; border-radius: 999px;
        font-size: 11px; min-width: 18px; height: 18px; line-height: 18px;
        text-align: center; padding: 0 5px;
    }

    /* SORT SHEET */
    html body .ts-sort-sheet {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
        background: #fff; border-radius: 18px 18px 0 0;
        transform: translateY(103%); transition: transform .28s ease;
        box-shadow: 0 -8px 30px rgba(13,19,33,.25);
        padding: 0 14px calc(14px + env(safe-area-inset-bottom));
    }
    html body .ts-sort-sheet.ts-open { transform: translateY(0); }
    html body .ts-sort-list { list-style: none; margin: 4px 0 0; padding: 0; }
    html body .ts-sort-list li {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 4px; font-size: 15px; font-weight: 600; color: #24304a;
        border-bottom: 1px solid #f1f4f9; cursor: pointer;
    }
    html body .ts-sort-list li:last-child { border-bottom: 0; }
    html body .ts-sort-list li.active { color: #e8a33d; }
    html body .ts-sort-list li.active i { color: #e8a33d; }
    html body .ts-sort-list li i { font-size: 20px; color: #c3cbdb; }

    /* tighter 2-col grid like apps */
    html body .productFilter-inner .row [class*="col-"] { padding-left: 6px; padding-right: 6px; }
    html body .productFilter-inner .row { margin-left: -6px; margin-right: -6px; }
}
@media (max-width: 575.98px) {
    /* real-app 2-column grid (col-xs-6 isn't a BS5 class) */
    html body .productFilter-inner .col-xs-6 { width: 50%; }
}

/* mobile hero v3: compact, app-like (2026-07-14) */
@media (max-width: 767.98px) {
    html body .ts-store-hero {
        padding-top: 16px !important;
        padding-bottom: 22px !important;
    }
    html body .ts-store-hero h1,
    html body .ts-store-hero h2 {
        font-size: 27px !important;
        line-height: 1.22 !important;
        margin-bottom: 8px !important;
    }
    html body .ts-store-hero p {
        font-size: 14.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 14px !important;
    }
    html body .ts-store-ctas { margin-top: 0 !important; }
    html body .ts-store-ctas .btn {
        padding: 11px 8px !important;
        font-size: 13.5px !important;
    }
    /* trust chips: compact 2x2 grid instead of 4 tall rows */
    html body .ts-trust-chips {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        margin-top: 12px !important;
    }
    html body .ts-trust-chips span {
        padding: 8px 10px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        gap: 6px !important;
        border-radius: 10px !important;
    }
    /* google review card: tighter */
    html body .ts-store-hero .ts-review-card,
    html body .ts-store-hero [class*="review"] {
        margin-top: 16px !important;
        padding: 16px 14px !important;
    }
}

/* breadcrumb fix: readable on light bg, all viewports (2026-07-14) */
html body .breadcrumb-section .breadcrumb-area .list li,
html body .breadcrumb-section .breadcrumb-area .list li a {
    color: #4a5670 !important;
    font-weight: 600 !important;
}
html body .breadcrumb-section .breadcrumb-area .list li:last-child {
    color: #16203a !important;
    font-weight: 800 !important;
}
@media (max-width: 991.98px) {
    /* compact breadcrumb + kill listing top dead space */
    html body .breadcrumb-section {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    html body .breadcrumb-section .breadcrumb-area .list li,
    html body .breadcrumb-section .breadcrumb-area .list li a {
        font-size: 13px !important;
    }
    html body .productFilter-section {
        padding-top: 10px !important;
    }
    html body .productFilter-wrapper { padding-top: 0 !important; margin-top: 0 !important; }
    html body .productFilter-item { padding-top: 0 !important; margin-top: 0 !important; }
    html body .productFilter-title { margin-top: 0 !important; }
    html body .productFilter-ads:empty { display: none !important; }
}

/* ============================================================
   LOGIN / AUTH page fixes (2026-07-14)
   - Remember Me checkbox showed nothing when checked (appearance:none, no :checked style)
   - "Sign Up" link was white-on-white → invisible/unclickable
   ============================================================ */
html body .signup-form .default-checkbox { display: flex; align-items: center; gap: 9px; }
html body .signup-form .default-checkbox input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; margin: 0; flex: 0 0 auto;
    border: 2px solid #cbd3e1; border-radius: 5px; background: #fff;
    cursor: pointer; position: relative; transition: all .15s ease;
}
html body .signup-form .default-checkbox input[type="checkbox"]:hover { border-color: #e8a33d; }
html body .signup-form .default-checkbox input[type="checkbox"]:checked {
    background: #e8a33d; border-color: #e8a33d;
}
html body .signup-form .default-checkbox input[type="checkbox"]:checked::after {
    content: ""; position: absolute; left: 6px; top: 2px;
    width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
html body .signup-form .default-checkbox label {
    margin: 0; cursor: pointer; color: #4a5670; font-weight: 500; user-select: none;
}

/* Sign Up / register link — was invisible (white). Make it the brand accent. */
html body .signup-form .account { color: #4a5670; margin-top: 18px; }
html body .signup-form .account a,
html body .signup-form .account .router-link-active {
    color: #e8a33d !important; font-weight: 700; text-decoration: none; margin-left: 5px;
}
html body .signup-form .account a:hover { text-decoration: underline; }

/* Forgot-password link visible + aligned */
html body .signup-form .flex-input {
    display: flex; align-items: center; justify-content: space-between; margin: 4px 0 6px;
}
html body .signup-form .flex-input .forget { color: #e8a33d; font-weight: 600; text-decoration: none; }
html body .signup-form .flex-input .forget:hover { text-decoration: underline; }

/* input polish */
html body .signup-form .form-control {
    border: 1px solid #e2e7f0; border-radius: 10px; padding: 12px 14px;
}
html body .signup-form .form-control:focus { border-color: #e8a33d; box-shadow: 0 0 0 3px rgba(232,163,61,.12); }

@media (max-width: 991.98px) {
    /* mobile: keep the branded aside but compact, above the form */
    html body .signup-section .ts-auth-aside { margin-bottom: 18px; padding: 22px; }
    html body .signup-form .account { text-align: center; }
}

/* ============================================================
   AUTH v3 — advanced Login + Signup layout (2026-07-14)
   Card form, equal 2-col, consistent spacing + accent colors.
   ============================================================ */
html body .signup-section {
    background:
        radial-gradient(1100px 380px at 12% -8%, rgba(232,163,61,.06), transparent 60%),
        #f5f7fb;
}
html body .signup-section .signupForm-wrapper {
    max-width: 1120px; margin: 0 auto;
}
html body .signup-section .signupForm-wrapper > .row {
    background: #fff;
    border: 1px solid #e7ebf3;
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(16,24,40,.08);
    overflow: hidden;
    margin: 0;
    align-items: stretch !important;
}
html body .signup-section .signupForm-wrapper > .row > [class*="col-"] {
    padding: 0;
    display: flex;
}
/* left branded panel fills its column, squared inner edge to meet the form */
html body .signup-section .ts-auth-aside {
    width: 100%;
    border-radius: 0;
    min-height: 100%;
    padding: 54px 46px;
}
/* right form gets breathing room */
html body .signup-section .signup-form {
    width: 100%;
    padding: 46px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
html body .signup-section .signup-form .title { margin-bottom: 22px; }
html body .signup-section .signup-form .title,
html body .signup-section .signup-form .title p { text-align: left; }
html body .signup-section .signup-form .title p { color: #8792a8; margin-top: 4px; }

/* fields: consistent labels, inputs, spacing */
html body .signup-section .signup-form .input-group { margin-bottom: 16px; }
html body .signup-section .signup-form label {
    display: block; font-weight: 600; color: #24304a;
    font-size: 13.5px; margin-bottom: 7px;
}
html body .signup-section .signup-form .form-control {
    width: 100%; border: 1px solid #e2e7f0; border-radius: 11px;
    padding: 12px 14px; font-size: 14.5px; background: #fbfcfe; color: #16203a;
    transition: border-color .15s, box-shadow .15s;
}
html body .signup-section .signup-form .form-control:focus {
    border-color: var(--ts-accent); background: #fff;
    box-shadow: 0 0 0 3px rgba(232,163,61,.13); outline: none;
}
html body .signup-section .signup-form .form-control::placeholder { color: #aab2c2; }

/* two-column name/password rows */
html body .signup-section .signup-form .grid-2 {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

/* password eye button aligned inside field */
html body .signup-section .signup-form .password-container { position: relative; }
html body .signup-section .signup-form .password-container button {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: #8792a8; cursor: pointer; font-size: 18px;
}

/* primary button */
html body .signup-section .signup-form .btn__submit { margin-top: 8px; }
html body .signup-section .signup-form .btn-primary {
    background: var(--ts-accent); border: 0; border-radius: 12px;
    padding: 14px; font-weight: 700; letter-spacing: .3px; width: 100%;
    box-shadow: 0 8px 20px rgba(232,163,61,.28);
}
html body .signup-section .signup-form .btn-primary:hover { filter: brightness(.96); }

/* bottom switch link (I have an account / Sign in) */
html body .signup-section .signup-form .account { text-align: center; margin-top: 18px; color: #4a5670; }
html body .signup-section .signup-form .account a {
    color: var(--ts-accent) !important; font-weight: 700; text-decoration: none; margin-left: 5px;
}
html body .signup-section .signup-form .account a:hover { text-decoration: underline; }

@media (max-width: 991.98px) {
    html body .signup-section .signupForm-wrapper > .row { border-radius: 16px; }
    html body .signup-section .ts-auth-aside { padding: 30px 24px; min-height: auto; }
    html body .signup-section .signup-form { padding: 28px 22px; }
    html body .signup-section .signup-form .grid-2 { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   WISHLIST heart on product cards (2026-07-14)
   - default = outline (ri-heart-3-line), neutral
   - active/wishlisted = filled (ri-heart-3-fill), red
   ============================================================ */
html body .product-actions .action-btn i.ri-heart-3-line {
    color: #5b6478;
    transition: color .15s ease, transform .15s ease;
}
html body .product-actions .action-btn:hover i.ri-heart-3-line {
    color: #e63946;
    transform: scale(1.08);
}
html body .product-actions .action-btn.wishlist i.ri-heart-3-fill {
    color: #e63946; /* saved state — solid red heart */
}
html body .product-actions .action-btn.wishlist:hover i.ri-heart-3-fill {
    color: #c92a37;
}

/* ============================================================
   HIDE Daily Deals button (kept in code, hidden everywhere) 2026-07-14
   ============================================================ */
html body .header-meta .header-btn,
html body .headerBottom .header-btn { display: none !important; }

/* ============================================================
   CART v3 — rich, app-like (Flipkart-style) 2026-07-14
   ============================================================ */
html body .cart-section { background: #f4f6fb; }
html body .cart-section .container > div > .row { align-items: flex-start; }

/* left column width fix (template has 'col-xl 9' typo) */
@media (min-width: 1200px) {
    html body .cart-section .col-xl\.9,
    html body .cart-section [class="col-xl 9 col-lg-8"] { flex: 0 0 auto; width: 66.66%; }
}

/* tip banner — premium pill */
html body .ts-cart-tip {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(90deg,#fff6ea,#fdfaf4);
    border: 1px solid #f0dcc0; border-left: 4px solid var(--ts-accent);
    border-radius: 12px; padding: 12px 16px; margin-bottom: 16px;
    color: #6b5636; font-size: 13.5px; line-height: 1.45;
}
html body .ts-cart-tip i { font-size: 20px; color: var(--ts-accent); flex: 0 0 auto; }
html body .ts-cart-tip b { color: #b9791f; }

/* the items container becomes a clean white card */
html body .cart-form {
    background: #fff; border: 1px solid #e7ebf3; border-radius: 16px;
    box-shadow: 0 2px 12px rgba(16,24,40,.04); padding: 6px 20px 18px;
    margin-bottom: 18px;
}
html body .cart-form .cart-header { text-align: left !important; padding: 16px 0 6px; }
html body .cart-form .store-title { font-size: 16px; font-weight: 800; color: #16203a; margin: 0; }

/* table → premium rows */
html body .cart-form table { width: 100%; border-collapse: collapse; }
html body .cart-form thead th {
    text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
    color: #8792a8; font-weight: 700; padding: 12px 10px; border-bottom: 1px solid #eef1f7;
}
html body .cart-form tbody td { padding: 18px 10px; border-bottom: 1px solid #f1f4f9; vertical-align: middle; }
html body .cart-form tbody tr:last-child td { border-bottom: 0; }

/* product cell: bigger image + clean text */
html body .cart-form .product-card--inline { display: flex; align-items: center; gap: 14px; }
html body .cart-form .product-image {
    width: 78px; height: 78px; border-radius: 12px; overflow: hidden;
    border: 1px solid #eef1f7; background: #f7f9fc; flex: 0 0 auto; display: block;
}
html body .cart-form .product-image img { width: 100%; height: 100%; object-fit: cover; }
html body .cart-form .product-title p { font-weight: 700; color: #16203a; font-size: 15px; margin: 0 0 4px; }
html body .cart-form .product-title span { color: #8792a8; font-size: 12.5px; }

/* prices */
html body .cart-form .cart-pd-price span:last-child,
html body .cart-form .cart-pd-subtotal span:last-child { font-weight: 800; color: #16203a; }
html body .cart-form .cart-pd-price del,
html body .cart-form .cart-pd-subtotal del { color: #aab2c2; font-weight: 500; }

/* quantity stepper — pill */
html body .cart-form .quantity {
    display: inline-flex; align-items: center; border: 1px solid #dbe1ec !important;
    border-radius: 10px; overflow: hidden; background: #fff !important;
}
html body .cart-form .quantity button {
    width: 34px; height: 36px; border: 0; background: #f4f6fb; color: #16203a;
    cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
html body .cart-form .quantity button:hover { background: var(--ts-accent); color: #fff; }
html body .cart-form .quantity .qnttinput {
    width: 44px; text-align: center; border: 0; font-weight: 700; color: #16203a; background: #fff;
}

/* delete action */
html body .cart-form .cart-pd-action .action-btn {
    display: inline-flex; align-items: center; gap: 6px; border: 1px solid #f3d3d3;
    background: #fff5f5; color: #e63946; border-radius: 9px; padding: 8px 12px;
    font-weight: 600; font-size: 13px; cursor: pointer;
}
html body .cart-form .cart-pd-action .action-btn:hover { background: #e63946; color: #fff; border-color: #e63946; }
html body .cart-form .cart-pd-action .action-btn:hover svg path { stroke: #fff; }

/* continue shopping */
html body .cart-form .action-wrapper { padding-top: 14px; }
html body .cart-form .check-out .btn-primary {
    background: #fff; color: var(--ts-accent); border: 1.5px solid var(--ts-accent);
    border-radius: 10px; font-weight: 700; padding: 11px 22px;
}
html body .cart-form .check-out .btn-primary:hover { background: var(--ts-accent); color: #fff; }

/* ---- right: sticky rich price summary ---- */
html body .cart-order {
    background: #fff; border: 1px solid #e7ebf3; border-radius: 16px;
    box-shadow: 0 6px 24px rgba(16,24,40,.06); overflow: hidden; position: sticky; top: 90px;
}
html body .cart-order .cart-header {
    background: #f7f9fc; padding: 16px 20px; border-bottom: 1px solid #eef1f7;
}
html body .cart-order .cart-header .store-title { font-size: 15px; font-weight: 800; color: #16203a; margin: 0; text-transform: uppercase; letter-spacing: .4px; }
html body .cart-order > *:not(.cart-header) { padding-left: 20px; padding-right: 20px; }
/* price rows */
html body .cart-order .price-details li,
html body .cart-order .payment-details li,
html body .cart-order ul li {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 0; font-size: 14px; color: #4a5670; border-bottom: 1px dashed #eef1f7;
}
html body .cart-order ul li:last-child { border-bottom: 0; }
html body .cart-order .total, html body .cart-order li.total, html body .cart-order .grand-total {
    font-weight: 800 !important; color: #16203a !important; font-size: 16px !important;
}

/* coupon box */
html body .cart-order .coupon,
html body .cart-order .coupon-area { padding: 14px 20px; }
html body .cart-order input.form-control {
    border: 1px solid #e2e7f0; border-radius: 10px; padding: 11px 12px;
}

/* CTA buttons */
html body .cart-order .cart-btns { padding: 6px 20px 20px; }
html body .cart-order .cart-btns .btn-secondary {
    display: block; text-align: center; background: var(--ts-accent); color: #fff; border: 0;
    border-radius: 12px; padding: 14px; font-weight: 800; letter-spacing: .3px;
    box-shadow: 0 8px 20px rgba(232,163,61,.28); margin-bottom: 10px;
}
html body .cart-order .cart-btns .btn-secondary:hover { filter: brightness(.96); }
html body .cart-order .ts-wa-order {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px solid #25D366; color: #128C4B; border-radius: 12px; padding: 12px; font-weight: 700; background: #fff;
}
html body .cart-order .ts-wa-order:hover { background: #25D366; color: #fff; }
html body .cart-order .ts-secure-note {
    display: flex; align-items: center; gap: 7px; justify-content: center;
    color: #6b7688; font-size: 12px; margin-top: 12px;
}
html body .cart-order .ts-secure-note i { color: #16a34a; }

/* empty state polish */
html body .ts-empty { text-align: center; padding: 70px 20px; }
html body .ts-empty .ts-empty-icon { font-size: 64px; color: #cbd3e1; }
html body .ts-empty h4 { margin: 16px 0 6px; font-weight: 800; color: #16203a; }
html body .ts-empty p { color: #8792a8; margin-bottom: 18px; }

/* ---- mobile: stack into app cards ---- */
@media (max-width: 991.98px) {
    html body .cart-form { padding: 4px 12px 12px; }
    html body .cart-form thead { display: none; }
    html body .cart-form table, html body .cart-form tbody, html body .cart-form tr { display: block; width: 100%; }
    html body .cart-form tbody tr {
        position: relative; border: 1px solid #eef1f7; border-radius: 14px;
        padding: 12px; margin-bottom: 12px; display: grid;
        grid-template-columns: 1fr auto; gap: 6px 10px;
    }
    html body .cart-form tbody td { display: flex; border: 0 !important; padding: 4px 0; align-items: center; }
    html body .cart-form .cart-pd-thumb { grid-column: 1 / -1; }
    html body .cart-form td.cart-pd-price::before { content: attr(data-title); color: #8792a8; font-size: 12px; margin-right: auto; }
    html body .cart-form td.cart-pd-subtotal::before { content: attr(data-title); color: #8792a8; font-size: 12px; margin-right: auto; }
    html body .cart-form td.cart-pd-qty { grid-column: 1 / -1; }
    html body .cart-form td.cart-pd-action { position: absolute; top: 10px; right: 10px; }
    html body .cart-form td.cart-pd-action .action-btn span { display: none; }
    html body .cart-order { position: static; margin-top: 6px; }
}

/* CART v3.1 — fit all 5 columns inside the card (no clip) 2026-07-14 */
@media (min-width: 992px) {
    html body .cart-form .table-responsive { overflow: visible; }
    html body .cart-form table { table-layout: fixed; width: 100%; }
    html body .cart-form th.cart-pd-thumb { width: 44% !important; }
    html body .cart-form th.cart-pd-price { width: 13%; }
    html body .cart-form th.cart-pd-qty { width: 17%; }
    html body .cart-form th.cart-pd-subtotal { width: 13%; }
    html body .cart-form th.cart-pd-action { width: 13%; }
    html body .cart-form tbody td { padding: 16px 8px; }
    html body .cart-form .cart-pd-action .action-btn { padding: 7px 9px; font-size: 12px; }
    html body .cart-form .product-image { width: 64px; height: 64px; }
}

/* ============================================================
   ORDER STEPPER v3 — fresh, premium (2026-07-14)
   Circular icon badges + connector line, active=orange.
   Fixes: 'View Cart' ghosting, plain icons, floating bar.
   ============================================================ */
html body .step-progress {
    position: relative; max-width: 720px; margin: 6px auto 30px; padding: 6px 10px 0;
}
html body .step-progress .nav-pills {
    display: flex !important; justify-content: space-between; align-items: flex-start;
    position: relative; z-index: 2; margin: 0 !important; padding: 0; list-style: none; gap: 0;
}
html body .step-progress .nav-item { flex: 1 1 0; text-align: center; }

/* connector track (repurpose the old progress-bar) */
html body .step-progress .progress-bar {
    position: absolute; left: 16.6%; right: 16.6%; top: 33px; width: 66.8%;
    height: 4px; background: #e4e8f0; border-radius: 4px; z-index: 1; overflow: hidden; display: block;
}
html body .step-progress .progress-bar .progress {
    height: 100%; background: linear-gradient(90deg,#e8a33d,#f0b862);
    border-radius: 4px; transition: width .45s ease;
}

/* step button */
html body .step-progress .step {
    background: none !important; border: 0 !important; box-shadow: none !important;
    display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
    color: #97a1b3; font-weight: 600; font-size: 14px; cursor: default; padding: 0;
}
/* circular icon badge */
html body .step-progress .step .icon {
    width: 56px; height: 56px; border-radius: 50%; background: #fff;
    border: 2px solid #e2e7f0; display: flex; align-items: center; justify-content: center;
    color: #aab2c2; transition: all .22s ease;
}
html body .step-progress .step .icon svg { width: 24px; height: 24px; }
/* SVGs hardcode fill=white — force them to follow the badge color */
html body .step-progress .step .icon svg path,
html body .step-progress .step .icon svg circle { fill: currentColor !important; }

/* active / current step */
html body .step-progress .step.active { color: #16203a; font-weight: 800; }
html body .step-progress .step.active .icon {
    background: var(--ts-accent); border-color: var(--ts-accent); color: #fff;
    box-shadow: 0 8px 20px rgba(232,163,61,.32); transform: translateY(-1px);
}

@media (max-width: 575.98px) {
    html body .step-progress .step { font-size: 12.5px; gap: 7px; }
    html body .step-progress .step .icon { width: 46px; height: 46px; }
    html body .step-progress .step .icon svg { width: 20px; height: 20px; }
    html body .step-progress .progress-bar { top: 28px; }
}

/* cart: hide empty store-title header bar (single-vendor) */
html body .cart-form > .cart-header { display: none; }
html body .cart-form { padding-top: 16px; }

/* ============================================================
   FOOTER v3 — advanced e-commerce redesign (2026-07-14)
   Fix: duplicate payment (text badges + svg logos), narrow
   contact col wrapping address word-by-word, uneven columns.
   ============================================================ */
html body .footer-section { background: #0e1626; }
html body .footer-section .container { padding-top: 6px; }

/* ---- payment strip: single clean centered row ---- */
html body .footer-section .footer-top {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 14px; padding: 20px 0; margin-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
html body .footer-section .payment-gataway {
    display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0;
}
html body .footer-section .payment-gataway .title { color: #fff; font-size: 14px; font-weight: 700; margin: 0; }
html body .footer-section .payment__icon { display: none !important; }   /* kill duplicate card logos */
html body .footer-section .ts-pay-badges { margin: 0; gap: 8px; }
html body .footer-section .ts-pay-badges span {
    font-size: 11px; padding: 7px 12px; border-radius: 8px; letter-spacing: .5px;
    box-shadow: 0 2px 6px rgba(0,0,0,.28);
}

/* ---- widget columns: even grid, Contact gets room ---- */
@media (min-width: 992px) {
    html body .footer-section .row:has(.footer-widget),
    html body .footer-section .row:has(.footer-wrapper) {
        display: grid !important; grid-template-columns: 1.7fr 1.35fr 1fr 1fr 1.5fr;
        gap: 24px 36px; align-items: start;
    }
    html body .footer-section .row:has(.footer-widget) > [class*="col-"],
    html body .footer-section .row:has(.footer-wrapper) > [class*="col-"] {
        width: auto !important; max-width: none !important; flex: 0 0 auto !important; padding: 0;
    }
}

/* ---- widget titles with accent underline ---- */
html body .footer-section .widget-title {
    color: #fff !important; font-weight: 800; font-size: 16px;
    margin-bottom: 18px; padding-bottom: 10px; position: relative;
}
html body .footer-section .widget-title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 34px; height: 3px; background: var(--ts-accent); border-radius: 3px;
}

/* body text + links */
html body .footer-section .footer-widget p,
html body .footer-section .widget-list li { color: #aeb6c4; line-height: 1.65; font-size: 14px; }
html body .footer-section .footer-widget p b,
html body .footer-section .footer-widget p strong { color: #fff; }

/* link lists — clean, no default bullets, hover accent */
html body .footer-section .widget-list { padding: 0; margin: 0; }
html body .footer-section .widget-list li { list-style: none; margin-bottom: 11px; }
html body .footer-section .widget-list li a { color: #aeb6c4; text-decoration: none; transition: color .15s, padding-left .15s; }
html body .footer-section .widget-list li a:hover { color: var(--ts-accent); padding-left: 4px; }

/* Contact list: icon + text aligned, no bad wrapping */
html body .footer-section .widget-list li:has(.icon),
html body .footer-section .widget-list li .contact-item {
    display: flex; align-items: flex-start; gap: 10px;
}
html body .footer-section .widget-list .icon { flex: 0 0 auto; }
html body .footer-section .widget-list .icon i { color: var(--ts-accent); font-size: 17px; }
html body .footer-section .widget-list li span,
html body .footer-section .widget-list li a { word-break: normal; overflow-wrap: anywhere; }

/* subscribe box */
html body .footer-section .footer-widget input,
html body .footer-section .footer-widget .form-control {
    background: #17233b; border: 1px solid #2a3a57; color: #fff; border-radius: 10px; padding: 12px 14px;
}
html body .footer-section .footer-widget input::placeholder { color: #7c879b; }
html body .footer-section .footer-widget .btn,
html body .footer-section .footer-widget button[type="submit"] {
    background: var(--ts-accent); border: 0; border-radius: 10px; font-weight: 800; padding: 12px;
    box-shadow: 0 8px 18px rgba(232,163,61,.25); width: 100%; color: #fff; margin-top: 10px;
}
html body .footer-section .footer-widget .btn:hover { filter: brightness(.96); }

/* bottom copyright bar */
html body .footer-section .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08); margin-top: 26px; padding: 18px 0;
}
html body .footer-section .footer-bottom p { color: #8792a8; font-size: 13px; margin: 0; }

/* ---- mobile ---- */
@media (max-width: 991.98px) {
    html body .footer-section .footer-top { flex-direction: column; gap: 12px; padding: 18px 0; }
    html body .footer-section .payment-gataway { flex-direction: column; gap: 8px; }
    html body .footer-section .footer-wrapper { margin-bottom: 26px; }
    html body .footer-section .widget-title { margin-bottom: 14px; }
}

/* footer: kill residual list markers (::marker showed despite list-style:none) */
html body .footer-section ul li { list-style: none !important; }
html body .footer-section ul li::marker { content: "" !important; }

/* footer links: remove base-theme ::before dot bullets for clean modern look */
html body .footer-section .footer-widget .widget-list li a::before { display: none !important; content: none !important; }
html body .footer-section .footer-widget .widget-list li a { padding-left: 0 !important; }

/* ============================================================
   FIX: white-on-white menu hover (2026-07-14)
   Admin primary_color is #ffffff, so base theme colors menu
   hover/active text white → invisible on light dropdowns.
   Force readable brand-accent on all light-bg menus.
   ============================================================ */
html body .custom-offcanvas .offcanvas-nav-menu li a:hover,
html body .custom-offcanvas .offcanvas-nav-menu li a.active,
html body .custom-offcanvas .offcanvas-nav-menu li .sub-menu li a:hover,
html body .custom-offcanvas .offcanvas-nav-menu li .sub-sub-menu li a:hover,
html body .offcanvas-nav-menu li a:hover,
html body .offcanvas-nav-menu li a.active {
    color: var(--ts-accent) !important;
    background: rgba(247,148,29,.08) !important;
}
html body .custom-offcanvas .offcanvas-nav-menu li a:hover .icon svg path,
html body .offcanvas-nav-menu li a:hover .icon svg path {
    fill: var(--ts-accent) !important;
}
/* any dropdown / mega-menu list on light bg */
html body .dropdown-menu a:hover,
html body .mega-menu a:hover,
html body .category-dropdown a:hover,
html body .sub-menu a:hover {
    color: var(--ts-accent) !important;
}
/* header category flyout rows: subtle hover bg + keep text dark by default */
html body .offcanvas-nav-menu li a { color: #20232a; transition: color .15s, background .15s; }
html body .offcanvas-nav-menu li a:hover { border-radius: 8px; }

/* category flyout menu (.category-list) — was white-on-white on hover */
html body .category-item .category-list li a { color: #20232a !important; transition: color .15s, background .15s; }
html body .category-item .category-list li a:hover,
html body .category-item .category-list li a.active {
    color: var(--ts-accent) !important;
    background: rgba(247,148,29,.08) !important;
}
html body .category-item .category-list li a:hover .icon svg path,
html body .category-item .category-list li a.active .icon svg path {
    fill: var(--ts-accent) !important;
}
html body .category-item .category-list li.has-dropdown > a:hover::after { color: var(--ts-accent) !important; }
/* submenu / sub-sub flyouts */
html body .category-item .category-list .sub-menu a { color: #20232a !important; }
html body .category-item .category-list .sub-menu a:hover { color: var(--ts-accent) !important; }

/* listing empty-state (category with 0 products) 2026-07-14 */
html body .ts-listing-empty {
    text-align: center; padding: 56px 20px 60px; background: #fff;
    border: 1px dashed #e2e7f0; border-radius: 16px; margin-top: 18px;
}
html body .ts-listing-empty .ts-empty-badge {
    width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 18px;
    background: linear-gradient(135deg,#fff3e2,#fbe6c8);
    display: flex; align-items: center; justify-content: center;
}
html body .ts-listing-empty .ts-empty-badge i { font-size: 38px; color: var(--ts-accent); }
html body .ts-listing-empty h4 { font-weight: 800; color: #16203a; font-size: 20px; margin: 0 0 8px; }
html body .ts-listing-empty p { color: #8792a8; max-width: 440px; margin: 0 auto 22px; line-height: 1.55; }
html body .ts-listing-empty .ts-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
html body .ts-listing-empty .btn-primary {
    background: var(--ts-accent); border: 0; color: #fff; border-radius: 11px;
    padding: 12px 22px; font-weight: 700; box-shadow: 0 8px 18px rgba(232,163,61,.25);
}
html body .ts-listing-empty .btn-outline-wa {
    display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid #25D366;
    color: #128C4B; border-radius: 11px; padding: 12px 20px; font-weight: 700; background: #fff;
}
html body .ts-listing-empty .btn-outline-wa:hover { background: #25D366; color: #fff; }

/* product card: in-cart qty stepper (BigBasket/Blinkit style) 2026-07-14 */
html body .cart-action .ts-card-qty {
    display: inline-flex; align-items: center; justify-content: space-between;
    background: var(--ts-accent); border-radius: 10px; overflow: hidden;
    height: 42px; width: 100%; box-shadow: 0 6px 14px rgba(232,163,61,.28);
}
html body .cart-action .ts-card-qty-btn {
    border: 0; background: transparent; color: #fff; width: 42px; height: 100%;
    display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer;
}
html body .cart-action .ts-card-qty-btn:hover { background: rgba(0,0,0,.12); }
html body .cart-action .ts-card-qty-btn:disabled { opacity: .55; cursor: default; }
html body .cart-action .ts-card-qty-val { color: #fff; font-weight: 800; font-size: 15px; min-width: 26px; text-align: center; }

/* ============================================================
   USER PANEL — MODERN SHARP REDESIGN  (2026-07-15)
   Light surface + brand orange accent. Scoped to .dashboard-section.
   ============================================================ */
:root{
  --tsp-accent: #F7941D;
  --tsp-accent-2: #ff7a00;
  --tsp-ink: #0f1b2d;
  --tsp-ink-soft: #5a6b80;
  --tsp-line: #e9edf2;
  --tsp-bg: #f5f7fa;
  --tsp-card: #ffffff;
  --tsp-radius: 16px;
  --tsp-shadow: 0 10px 30px rgba(16,27,45,.06);
  --tsp-shadow-h: 0 16px 40px rgba(16,27,45,.12);
}

/* ---- page surface ---- */
html body .dashboard-section{ background:var(--tsp-bg); }

/* ---- top banner: kill grey placeholder, make a sleek gradient hero ---- */
html body .dashboard-section .dashboard-banner{
  position:relative; height:150px; border-radius:var(--tsp-radius); overflow:hidden;
  background:
    radial-gradient(1200px 200px at 12% -40%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(120deg, #10233d 0%, #16324f 45%, #1d3f5e 100%);
  box-shadow:var(--tsp-shadow);
}
html body .dashboard-section .dashboard-banner img{ display:none !important; }
html body .dashboard-section .dashboard-banner::after{
  content:""; position:absolute; right:-40px; top:-60px; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(247,148,29,.55), rgba(247,148,29,0) 70%);
}
html body .dashboard-section .dashboard-banner::before{
  content:"My Account"; position:absolute; left:28px; bottom:22px; z-index:2;
  color:#fff; font-weight:800; font-size:26px; letter-spacing:.3px;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}

/* ---- layout spacing ---- */
html body .dashboard-wrapper{ display:flex; gap:26px; align-items:flex-start; }
html body .dashboard-wrapper .dashboard-sidebar{ flex:0 0 300px; max-width:300px; }
html body .dashboard-wrapper .dashboard-content{ flex:1 1 auto; min-width:0; }
@media (max-width: 991px){
  html body .dashboard-wrapper{ flex-direction:column; }
  html body .dashboard-wrapper .dashboard-sidebar{ max-width:100%; flex-basis:auto; width:100%; }
}

/* ---- sidebar card ---- */
html body .dashboard-sidebar .sideBar{
  background:var(--tsp-card); border:1px solid var(--tsp-line); border-radius:var(--tsp-radius);
  box-shadow:var(--tsp-shadow); padding:22px 18px; position:sticky; top:20px;
}
/* profile header */
html body .dashboard-sidebar .userProfile{ display:flex; align-items:center; gap:14px; padding-bottom:18px; }
html body .dashboard-sidebar .userProfile img,
html body .dashboard-sidebar .userProfile .action-list img{
  width:54px; height:54px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; box-shadow:0 0 0 2px var(--tsp-accent);
}
html body .dashboard-sidebar .userProfile h4,
html body .dashboard-sidebar .userProfile .name,
html body .dashboard-sidebar .userProfile strong{ font-weight:800; color:var(--tsp-ink); font-size:16px; line-height:1.2; }
html body .dashboard-sidebar .userProfile span,
html body .dashboard-sidebar .userProfile p{ color:var(--tsp-ink-soft); font-size:12.5px; word-break:break-all; }

/* nav list */
html body .dashboard-sidebar .sideBar-menu{ border-top:1px solid var(--tsp-line) !important; margin-top:8px !important; padding-top:10px; }
html body .dashboard-sidebar ul.menu-item{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
html body .dashboard-sidebar ul.menu-item > li > a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  color:var(--tsp-ink); font-weight:600; font-size:14.5px; text-decoration:none;
  position:relative; transition:all .18s ease; border:1px solid transparent;
}
html body .dashboard-sidebar ul.menu-item > li > a i,
html body .dashboard-sidebar ul.menu-item > li > a svg{ font-size:19px; width:20px; color:var(--tsp-ink-soft); transition:color .18s ease; flex:0 0 auto; }
html body .dashboard-sidebar ul.menu-item > li > a:hover{
  background:#fff7ee; color:var(--tsp-accent-2); border-color:#ffe3c2; transform:translateX(2px);
}
html body .dashboard-sidebar ul.menu-item > li > a:hover i,
html body .dashboard-sidebar ul.menu-item > li > a:hover svg{ color:var(--tsp-accent-2); }
html body .dashboard-sidebar ul.menu-item > li > a.router-link-exact-active,
html body .dashboard-sidebar ul.menu-item > li > a.active{
  background:linear-gradient(120deg, var(--tsp-accent), var(--tsp-accent-2));
  color:#fff; box-shadow:0 8px 18px rgba(247,148,29,.35); border-color:transparent;
}
html body .dashboard-sidebar ul.menu-item > li > a.router-link-exact-active i,
html body .dashboard-sidebar ul.menu-item > li > a.router-link-exact-active svg{ color:#fff; }
/* logout accent */
html body .dashboard-sidebar ul.menu-item > li > a[href*="logout"],
html body .dashboard-sidebar ul.menu-item > li > a.text-danger{ color:#e23b3b; }
html body .dashboard-sidebar ul.menu-item > li > a[href*="logout"]:hover{ background:#fdecec; color:#c62828; border-color:#f6cccc; }

/* ---- content cards ---- */
html body .dashboard-content .cart-form{
  background:var(--tsp-card); border:1px solid var(--tsp-line); border-radius:var(--tsp-radius);
  box-shadow:var(--tsp-shadow); padding:6px 6px; overflow:hidden;
}
html body .dashboard-content .cart-form .cart-header{
  padding:20px 24px 0; border:0;
}
html body .dashboard-content .cart-header .store-title,
html body .dashboard-content .cart-header h4{
  position:relative; font-weight:800; color:var(--tsp-ink); font-size:19px; padding-left:14px; margin:0;
}
html body .dashboard-content .cart-header .store-title::before,
html body .dashboard-content .cart-header h4::before{
  content:""; position:absolute; left:0; top:3px; bottom:3px; width:5px; border-radius:6px;
  background:linear-gradient(var(--tsp-accent), var(--tsp-accent-2));
}

/* ---- stat / order boxes (wallet, dashboard) ---- */
html body .dashboard-content .orderBox{
  display:flex; align-items:center; gap:16px; background:var(--tsp-card);
  border:1px solid var(--tsp-line); border-radius:14px; padding:20px; transition:all .2s ease;
  box-shadow:0 6px 18px rgba(16,27,45,.05);
}
html body .dashboard-content a:hover .orderBox{ transform:translateY(-3px); box-shadow:var(--tsp-shadow-h); border-color:#ffe3c2; }
html body .dashboard-content .orderBox .icon{
  width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #fff2e2, #ffe0bd); color:var(--tsp-accent-2); flex:0 0 auto;
}
html body .dashboard-content .orderBox .icon svg{ width:28px; height:28px; }
html body .dashboard-content .orderBox .content .title{ color:var(--tsp-ink-soft); font-size:13.5px; font-weight:600; margin:0 0 4px; }
html body .dashboard-content .orderBox .content .count{ color:var(--tsp-ink); font-size:24px; font-weight:800; line-height:1; }
html body .dashboard-content .orderBox .content .count i{ color:var(--tsp-accent-2); }

/* ---- modern tables ---- */
html body .dashboard-content .table-responsive{ padding:14px 18px 18px; }
html body .dashboard-content table.table-v2{ width:100%; border-collapse:separate; border-spacing:0; }
html body .dashboard-content table.table-v2 thead th,
html body .dashboard-content table.table-v2 thead td{
  background:#f8fafc; color:var(--tsp-ink-soft); font-weight:700; font-size:11.5px; letter-spacing:.6px;
  text-transform:uppercase; padding:14px 16px; border:0; border-bottom:1px solid var(--tsp-line);
}
html body .dashboard-content table.table-v2 thead th:first-child{ border-top-left-radius:12px; }
html body .dashboard-content table.table-v2 thead th:last-child{ border-top-right-radius:12px; }
html body .dashboard-content table.table-v2 tbody td{
  padding:16px; border-bottom:1px solid var(--tsp-line); color:var(--tsp-ink); font-size:14px; vertical-align:middle;
}
html body .dashboard-content table.table-v2 tbody tr{ transition:background .15s ease; }
html body .dashboard-content table.table-v2 tbody tr:hover{ background:#fbfcfe; }
/* status pills */
html body .dashboard-content .badges{
  display:inline-block; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; text-transform:capitalize;
}
html body .dashboard-content .badges.text-success,
html body .dashboard-content .text-success.badges{ background:#e7f7ee; color:#1a9e5e; }
html body .dashboard-content .badges.text-warning{ background:#fff4e0; color:#d98a00; }
html body .dashboard-content .badges.text-danger{ background:#fdeaea; color:#e23b3b; }

/* ---- dashboard address cards ---- */
html body .dashboard-content .address-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:767px){ html body .dashboard-content .address-wrapper{ grid-template-columns:1fr; } }
html body .dashboard-content .addressWith-title{
  background:var(--tsp-card); border:1px solid var(--tsp-line); border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(16,27,45,.05);
}
html body .dashboard-content .addressWith-title .mainHeader{
  background:#f8fafc; padding:16px 20px; border-bottom:1px solid var(--tsp-line);
}
html body .dashboard-content .addressWith-title .mainHeader .mainTitle{
  margin:0; font-weight:800; font-size:15px; color:var(--tsp-ink); position:relative; padding-left:14px;
}
html body .dashboard-content .addressWith-title .mainHeader .mainTitle::before{
  content:""; position:absolute; left:0; top:2px; bottom:2px; width:4px; border-radius:6px; background:var(--tsp-accent);
}
html body .dashboard-content .addressItem{ padding:18px 20px; }
html body .dashboard-content .addressList{ list-style:none; margin:0; padding:0; }
html body .dashboard-content .addressList li{
  display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px dashed var(--tsp-line);
  font-size:14px; color:var(--tsp-ink);
}
html body .dashboard-content .addressList li:last-child{ border-bottom:0; }
html body .dashboard-content .addressList li span{ color:var(--tsp-ink-soft); font-weight:600; }

/* ---- recharge / reward modal modern ---- */
html body .customModal .modal-content{
  border:0; border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(16,27,45,.28);
}
html body .customModal .modal-header{
  padding:20px 24px; border-bottom:1px solid var(--tsp-line); align-items:center;
}
html body .customModal .modal-header .title{ font-weight:800; font-size:18px; color:var(--tsp-ink); }
html body .customModal .modal-header .close{
  background:#f4f6f9; border:0; width:34px; height:34px; border-radius:10px; color:#e23b3b; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .15s;
}
html body .customModal .modal-header .close:hover{ background:#fdeaea; }
html body .customModal .modal-body{ padding:24px !important; }
html body .customModal .amount-wrapper .form-control{
  height:58px; border:1.5px solid var(--tsp-line); border-radius:14px; text-align:center;
  font-size:22px; font-weight:800; color:var(--tsp-ink); background:#fbfcfe; transition:all .15s;
}
html body .customModal .amount-wrapper .form-control:focus{
  border-color:var(--tsp-accent); box-shadow:0 0 0 4px rgba(247,148,29,.15); background:#fff;
}
html body .customModal .amount-wrapper .form-control::placeholder{ color:#aeb8c4; font-weight:600; font-size:16px; }
html body .customModal .payment-select{
  list-style:none; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; padding:20px 0 4px; margin:0;
}
html body .customModal .payment-select li label{
  display:flex; align-items:center; justify-content:center; height:56px; min-width:96px; padding:0 14px;
  border:1.5px solid var(--tsp-line); border-radius:12px; cursor:pointer; background:#fff; transition:all .15s;
}
html body .customModal .payment-select li label:hover{ border-color:#ffcf9a; }
html body .customModal .payment-select li label.selected{ border-color:var(--tsp-accent); box-shadow:0 0 0 3px rgba(247,148,29,.15); }
html body .customModal .btn.btn-primary{
  height:52px; border-radius:14px; font-weight:800; font-size:15px; letter-spacing:.3px;
  background:linear-gradient(120deg, var(--tsp-accent), var(--tsp-accent-2)); border:0; box-shadow:0 10px 24px rgba(247,148,29,.32);
}
/* graceful "no gateway" note inside recharge modal */
html body .customModal .ts-nogateway{
  margin-top:18px; padding:16px; border-radius:12px; background:#fff7ee; border:1px dashed #ffcf9a;
  color:#9a6316; font-size:13.5px; text-align:center; line-height:1.5;
}

/* ---- notification empty state ---- */
html body .dashboard-content .orderBox-wrapper .title{ padding:20px 24px 0; }
html body .dashboard-content .orderBox-wrapper .title h1{
  font-size:20px; font-weight:800; color:var(--tsp-ink); margin:0;
}
html body .dashboard-content .orderBox-wrapper .title a{
  color:var(--tsp-accent-2); font-weight:700; font-size:13.5px; text-decoration:none;
}
/* when table is empty, dress the header row */
html body .dashboard-content table.table-v2 tbody:empty::after{ content:none; }

/* generic empty-state helper card */
html body .ts-empty{
  text-align:center; padding:46px 24px;
}
html body .ts-empty .ts-empty-ic{
  width:84px; height:84px; margin:0 auto 18px; border-radius:22px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#fff2e2,#ffe0bd); color:var(--tsp-accent-2); font-size:38px;
}
html body .ts-empty h3{ font-weight:800; color:var(--tsp-ink); font-size:18px; margin:0 0 6px; }
html body .ts-empty p{ color:var(--tsp-ink-soft); font-size:14px; margin:0 0 18px; }

/* primary buttons across panel — sharp modern */
html body .dashboard-content .btn.btn-primary{
  background:linear-gradient(120deg, var(--tsp-accent), var(--tsp-accent-2)); border:0; border-radius:12px;
  font-weight:700; padding:11px 22px; box-shadow:0 8px 20px rgba(247,148,29,.28);
}
html body .dashboard-content .btn.btn-primary:hover{ filter:brightness(1.03); transform:translateY(-1px); }

/* scrollbar polish inside panel */
html body .dashboard-content .table-responsive::-webkit-scrollbar{ height:8px; }
html body .dashboard-content .table-responsive::-webkit-scrollbar-thumb{ background:#d7dee7; border-radius:8px; }