/* =========================================================
   header.css — Amerce eCommerce Header + Category Slider
   Place in: public/css/header.css
   Link via: <link rel="stylesheet" href="{{ asset('css/header.css') }}">
   ========================================================= */

/* ---------------------------------------------------------
   CSS Custom Properties
   --------------------------------------------------------- */
:root {
    --color-primary:   #1a1a1a;
    --color-secondary: #70857A;   /* topbar bg */
    --color-white:     #ffffff;
    --color-text-3:    #999999;
    --color-border:    #e5e5e5;
    --color-green:     #3dab25;
    --color-red:       #ff4d4d;
    --color-amber:     #f59e0b;
    --cat-card-bg:     #F7F7F7;

    --header-bg:       #2B2663;   /* exact Amerce purple */
    --header-text:     #ffffff;
    --header-border:   rgba(255,255,255,0.12);

    --font-sm:      13px;
    --font-base:    14px;
    --font-caption: 12px;

    --topbar-h:        40px;
    --header-inner-h:  54px;      /* compact */
    --header-bottom-h: 38px;      /* compact */
    --cat-slider-h:    88px;

    --trans-fast: 0.2s ease;
    --trans-base: 0.3s ease;

    --z-header:   100;
    --z-dropdown: 200;
}


/* =========================================================
   TOPBAR
   ========================================================= */
.tf-topbar {
    background-color: var(--color-secondary);
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    position: relative;
    z-index: var(--z-header);
}

.tf-topbar.bg-secondary,
.tf-topbar .container-full,
.tf-topbar .row {
    background-color: #70857A !important;
}

.tf-topbar .tf-list {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tf-topbar .text-white { color: var(--color-white) !important; }

.tf-topbar .link {
    font-size: var(--font-sm);
    text-decoration: none;
    transition: opacity var(--trans-fast);
    color: inherit;
}
.tf-topbar .link:hover { opacity: 0.75; }

/* Announcement swiper */
.swiper-topbar {
    height: var(--topbar-h);
    overflow: hidden;
    background: transparent;
}
.swiper-topbar .swiper-wrapper {
    height: var(--topbar-h);
    position: relative;
}
.swiper-topbar .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--topbar-h);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    animation: topbarSlide 12s ease-in-out infinite;
    animation-fill-mode: both;
    opacity: 0;
    transform: translateY(100%);
}

.swiper-topbar .swiper-slide:first-child {
    animation-delay: 0s;
}

.swiper-topbar .swiper-slide:nth-child(2) {
    animation-delay: 6s;
}

.swiper-topbar:hover .swiper-slide {
    animation-play-state: paused;
}

@keyframes topbarSlide {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    10%, 45% {
        transform: translateY(0);
        opacity: 1;
    }
    55%, 100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}
.swiper-topbar p {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

/* Prev / next arrows in topbar */
.nav-prev-swiper,
.nav-next-swiper {
    cursor: pointer;
    font-size: 16px;
    transition: opacity var(--trans-fast);
}
.nav-prev-swiper:hover,
.nav-next-swiper:hover { opacity: .7; }

/* Currency / Language selects */
.tf-list.list-currenci { display: flex; align-items: center; gap: 16px; }

.tf-dropdown-select.style-default {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: var(--font-sm);
    appearance: none;
    -webkit-appearance: none;
    padding-right: 16px;
}
.tf-dropdown-select.color-white          { color: var(--color-white); }
.tf-dropdown-select.color-white option   { color: var(--color-primary); background: var(--color-white); }

/* Text helper */
.text-line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}


/* =========================================================
   HEADER SHELL
   ========================================================= */
.tf-header {
    position: relative;
    z-index: var(--z-header);
    background: var(--header-bg);
}

.tf-header .header-inner_wrap {
    border-bottom: 1px solid var(--header-border);
    background: var(--header-bg);
}

.tf-header .header-inner {
    display: flex;
    align-items: center;
    height: var(--header-inner-h);
    padding: 0;
    gap: 14px;
}

/* Divider below header on mobile */
.br-line { display: block; border-top: none; }
.br-line.bottom-0 { margin-bottom: 0; }


/* =========================================================
   HEADER LEFT  (logo + category + search)
   ========================================================= */
.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.logo-site img { display: block; height: 30px; width: auto; }

.wrap-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

/* Ensure the top header search wrapper stays visible */
.tf-header .hero-search-wrapper {
    display: block;
    max-width: none;
    margin: 0;
    width: auto;
    flex: 1 1 640px;
}

/* Browse-by-category button */
.nav-category-wrap { position: relative; }

.btn-nav-drop {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    height: 36px;
    min-width: 190px;
    border: 1px solid var(--header-border);
    border-radius: 6px;
    background: rgba(255,255,255,0.10);
    cursor: pointer;
    white-space: nowrap;
    font-size: 14px;
    transition: background var(--trans-fast), border-color var(--trans-fast);
    user-select: none;
}
.btn-nav-drop:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); }
.btn-nav-drop .name-category { font-size: 14px; font-weight: 600; line-height: 20px; }
.btn-nav-drop,
.btn-nav-drop .name-category {
    color: var(--header-text);
}
.btn-nav-drop i {
    margin-left: auto;
    margin-right: 4px;
    color: var(--header-text);
}

/* Category dropdown list */
.box-nav-category {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    list-style: none;
    padding: 8px 0;
    margin: 0;
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--trans-base), transform var(--trans-base), visibility var(--trans-base);
}
.nav-category-wrap:hover .box-nav-category { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-category_link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: background var(--trans-fast);
}
.nav-category_link:hover { background: #f5f5f5; }

/* Search bar */
.form-search-nav.style-5 {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    max-width: 520px !important;
    min-width: 180px;
    border: 1px solid var(--header-border);
    border-radius: 6px;
    background: #FFFFFF;
    overflow: hidden;
    transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}
.form-search-nav.style-5:focus-within {
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.15);
}

.form-search-nav.style-5 input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0 12px;
    font-size: 14px;
    height: 36px !important;
    background: #FFFFFF;
    color: #1a1a1a;
}
.form-search-nav.style-5 input::placeholder {
    font-size: 14px;
    font-weight: 400;
    color: #999;
}
.form-search-nav.style-5 .btn-action-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 36px !important;
    border: none;
    background: #FFFFFF;
    cursor: pointer;
    font-size: 16px;
    transition: color var(--trans-fast);
    color: #444;
    padding: 0 10px 0 4px;
    box-sizing: border-box;
    overflow: visible;
}
.form-search-nav.style-5 .btn-action-submit:hover { color: var(--header-bg); }
.form-search-nav.style-5 .btn-action-submit i {
    font-weight: 300;
}
.form-search-nav.style-5 .search-icon {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    overflow: visible;
    margin: 0 auto;
    position: relative;
    right: 12px;
}


/* =========================================================
   HEADER RIGHT  (icon list)
   ========================================================= */
.header-right {
    margin-left: auto;
    padding-right: 10px;
}

.nav-icon-list {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-icon-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-icon-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    font-size: 18px;
    color: var(--header-text);
    text-decoration: none;
    position: relative;
    transition: opacity var(--trans-fast);
    cursor: pointer;
}
.nav-icon-item--auth {
    padding: 6px 10px;
    font-size: 18px;
}
.nav-icon-item--auth span {
    font-size: 14px;
    font-weight: 600;
    color: var(--header-text);
}
.nav-icon-item:hover { opacity: 0.75; }
.nav-icon-item:not(.nav-icon-item--auth) span:not(.count) { font-size: var(--font-sm); font-weight: 500; white-space: nowrap; color: var(--header-text); }

.nav-auth-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.nav-auth-group .nav-auth-link {
    padding-left: 0;
    padding-right: 0;
}

.nav-auth-separator {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    font-weight: 400;
    margin: 0 4px;
}

/* Cart badge */
.nav-icon-item .count {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    background: var(--color-red);
    color: var(--color-white);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}

/* Mobile menu toggle */
.box-open-menu-mobile .btn-open-menu {
    display: flex;
    align-items: center;
    font-size: 22px;
    color: var(--header-text);
    text-decoration: none;
}

.btn-open-header-bottom .icon { color: var(--header-text); }

.box-open-header-bottom { display: none; }
.btn-open-header-bottom { display: flex; align-items: center; font-size: 24px; cursor: pointer; }

/* Homepage category divider (match services/all) */
.homepage-category-divider {
    border-top: none;
}



/* =========================================================
   HEADER BOTTOM  (desktop nav bar)
   ========================================================= */
.header-bottom_wrap {
    background: var(--header-bg);
    border-top: 1px solid var(--header-border);
    margin-bottom: 0;
}

.header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-bottom-h);
}

.header-bottom .col-left  { flex: 1; }
.header-bottom .col-right { display: flex; align-items: center; flex-shrink: 0; margin-left: 24px; }
.header-bottom .col-right p { font-size: var(--font-base); font-weight: 500; line-height: 24px; margin: 0; }
.header-bottom .col-right .icon { font-size: 24px; }

/* Nav menu */
.box-nav-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0; padding: 0;
}

.tf-header .box-nav-menu .item-link {
    border: none;
    border-radius: 0;
    height: 40px;
    padding: 0 12px;
    background: transparent;
}

.tf-header .box-nav-menu .item-link i {
    display: none;
}

.tf-header .box-nav-menu .sub-menu {
    display: none !important;
}

.menu-item { position: relative; }

.item-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    height: var(--header-bottom-h);
    font-size: 14px;
    font-weight: 500;
    color: var(--header-text);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--trans-fast);
}
.item-link:hover { opacity: 0.75; color: var(--header-text); }

/* Menu-builder anchors (no item-link class) */
.tf-header .box-nav-menu > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    height: var(--header-bottom-h);
    font-size: 14px;
    font-weight: 500;
    color: var(--header-text);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--trans-fast);
}
.tf-header .box-nav-menu > li > a:hover { opacity: 0.75; color: var(--header-text); }
.tf-header .box-nav-menu > li > a i { display: none; }

.item-link .icon-CaretDown { font-size: 12px; transition: transform var(--trans-fast); }
.menu-item:hover > .item-link .icon-CaretDown { transform: rotate(180deg); }


/* =========================================================
   DROPDOWNS / MEGA MENUS
   ========================================================= */
.sub-menu {
    position: absolute;
    top: 100%; left: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,.1);
    z-index: var(--z-dropdown);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--trans-base), transform var(--trans-base), visibility var(--trans-base);
    pointer-events: none;
}
.menu-item:hover > .sub-menu {
    opacity: 1; visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Small dropdown  (Blog / Pages) */
.sub-menu.mega-menu-item { min-width: 180px; padding: 8px 0; }

/* Wide mega menus */
.sub-menu.mega-menu,
.sub-menu.mega-menu_home_v2 {
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: calc(100vw - 40px);
    max-width: 1200px;
    padding: 28px 24px;
    border-radius: 12px;
}
.menu-item:hover > .sub-menu.mega-menu_home_v2 {
    transform: translateX(-50%) translateY(0);
}

/* Home mega: column layout */
.mega-menu_home_v2 {
    font-size: 19px;
    font-weight: 700;
    display: flex;
    gap: 0;
}
.mega-menu_home_v2 > .sub-menu_list {
    flex: 1;
    padding: 0 16px;
    border-right: 1px solid var(--color-border);
}
.mega-menu_home_v2 > .sub-menu_list:last-of-type { border-right: none; }
.mega-menu_home_v2 .image-preview {
    flex-shrink: 0; width: 300px; padding-left: 16px;
}
.mega-menu_home_v2 .image-preview img {
    width: 100%; height: auto; border-radius: 8px; object-fit: cover;
}

/* Shared sub-menu list */
.sub-menu_list { list-style: none; margin: 0; padding: 0; }

.sub-menu_link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    font-size: var(--font-base);
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--trans-fast);
}
.sub-menu_link.has-text  { padding: 7px 0; }
.mega-menu-item .sub-menu_link.has-text { padding: 5px 0; }
.sub-menu_link:hover .cus-text { text-decoration: underline; }

.menu-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #999;
    margin: 0 0 10px;
}

.mega-menu-item { padding: 0 12px; }

/* Demo labels */
.demo-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 16px;
}
.demo-label.type-hot   { background: var(--color-red);   color: #fff; }
.demo-label.type-new   { background: var(--color-green); color: #fff; }
.demo-label.type-trend { background: var(--color-amber); color: #fff; }


/* =========================================================
   BOX IMAGE  (Shop Sofas promo block)
   ========================================================= */
.box-image_v01 {
    position: relative; border-radius: 12px; overflow: hidden;
}
.box-image_v01 .box-image_img { display: block; width: 100%; height: 100%; }
.box-image_v01 .box-image_img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.box-image_v01:hover .box-image_img img { transform: scale(1.04); }

.box-image_content { position: absolute; bottom: 20px; left: 20px; }
.box-image_content .title {
    font-size: 20px; font-weight: 500;
    color: var(--color-white); text-decoration: none;
}
.box-image_content .title:hover { text-decoration: underline; }


/* =========================================================
   PRODUCT CARDS  (inside mega-menu swiper)
   ========================================================= */
.card-product { position: relative; }

.card-product_wrapper {
    position: relative; overflow: hidden;
    border-radius: 8px; background: #f8f8f8;
}
.card-product_wrapper.square { aspect-ratio: 1/1; }

.product-img { display: block; width: 100%; height: 100%; position: relative; }
.product-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    position: absolute; top: 0; left: 0;
    transition: opacity var(--trans-base);
}
.product-img .img-hover { opacity: 0; }
.card-product_wrapper:hover .img-product { opacity: 0; }
.card-product_wrapper:hover .img-hover   { opacity: 1; }

.card-product_info { padding: 10px 4px 0; }

.name-product {
    display: block; font-size: var(--font-base); font-weight: 500;
    color: var(--color-primary); text-decoration: none;
    margin-bottom: 4px; line-height: 24px;
}
.name-product:hover { text-decoration: underline; }

.star-wrap { gap: 2px; margin-bottom: 4px; }
.star-wrap .icon { font-size: 12px; color: #f5a623; }

.price-wrap { display: flex; align-items: center; gap: 8px; }
.price-new  { font-weight: 600; color: var(--color-primary); font-size: var(--font-base); }
.price-old  { font-size: var(--font-caption); color: var(--color-text-3); text-decoration: line-through; }

/* Overlay action icons */
.product-action_list {
    position: absolute; top: 12px; right: 12px;
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
    z-index: 2;
    opacity: 0; transition: opacity var(--trans-base);
}
.card-product_wrapper:hover .product-action_list { opacity: 1; }

.box-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: var(--color-white); border-radius: 50%;
    color: var(--color-primary); text-decoration: none;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: background var(--trans-fast), color var(--trans-fast);
}
.box-icon:hover { background: var(--color-primary); color: var(--color-white); }

/* Tooltip */
.hover-tooltip { position: relative; }
.hover-tooltip .tooltip {
    position: absolute;
    right: calc(100% + 8px); top: 50%; transform: translateY(-50%);
    background: var(--color-primary); color: var(--color-white);
    font-size: 11px; white-space: nowrap;
    padding: 4px 8px; border-radius: 4px;
    pointer-events: none; opacity: 0;
    transition: opacity var(--trans-fast);
}
.hover-tooltip:hover .tooltip { opacity: 1; }

/* Add-to-cart slide-up */
.product-action_bot {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 8px; z-index: 2;
    transform: translateY(100%);
    transition: transform var(--trans-base);
}
.card-product_wrapper:hover .product-action_bot { transform: translateY(0); }

/* Badges */
.product-badge_list {
    position: absolute; top: 10px; left: 10px;
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px; z-index: 2;
}
.product-badge_item {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 4px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
}
.product-badge_item.sale { background: var(--color-red);   color: #fff; }
.product-badge_item.new  { background: var(--color-green); color: #fff; }

/* Marquee sale strip */
.product-marquee_sale {
    position: absolute; bottom: 48px; left: 0; right: 0;
    overflow: hidden; background: var(--color-red);
    color: #fff; font-size: 11px; font-weight: 700;
    padding: 4px 0; z-index: 3;
    opacity: 0; transition: opacity var(--trans-base);
}
.card-product_wrapper:hover .product-marquee_sale { opacity: 1; }

.marquee-wrapper { overflow: hidden; }
.initial-child-container {
    display: flex; gap: 12px; white-space: nowrap;
    animation: marqueeScroll 6s linear infinite;
}
@keyframes marqueeScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-child-item { flex-shrink: 0; }

/* Countdown */
.product-countdown {
    position: absolute; bottom: 52px; left: 0; right: 0;
    display: flex; justify-content: center; z-index: 3;
    opacity: 0; transition: opacity var(--trans-base);
}
.card-product_wrapper:hover .product-countdown { opacity: 1; }

/* Swiper pagination dots (mega menu) */
.sw-dot-default.tf-sw-pagination {
    display: flex; justify-content: center; gap: 6px;
    padding-top: 10px;
}
.sw-dot-default .swiper-pagination-bullet {
    width: 6px; height: 6px; border-radius: 50%;
    background: #ccc; opacity: 1; transition: background var(--trans-fast);
}
.sw-dot-default .swiper-pagination-bullet-active { background: var(--color-primary); }


/* =========================================================
   BUTTONS
   ========================================================= */
.tf-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; text-decoration: none;
    font-weight: 500; border-radius: 6px;
    transition: background var(--trans-fast), color var(--trans-fast);
}
.tf-btn.btn-white { background: var(--color-white); color: var(--color-primary); }
.tf-btn.btn-white:hover { background: var(--color-primary); color: var(--color-white); }
.tf-btn.small { padding: 8px 14px; font-size: var(--font-sm); height: 36px; }
.tf-btn.w-100 { width: 100%; }


/* =========================================================
   CATEGORY SLIDER  — matches screenshot exactly
   Layout: red feature card | horizontal thumbnail cards
           (square image left, name + count right)
   Pagination dots centered below.
   ========================================================= */

.flat-category-slider {
    background: var(--color-white);
    padding: 6px 0 8px;
    border-bottom: 1px solid #eee;
}

/* Swiper slides must NOT stretch to column — each slide is auto width */
.swiper-category {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.swiper-category::-webkit-scrollbar {
    height: 0;
}
.swiper-category .swiper-wrapper {
    align-items: stretch;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content;
}

/* ── Base card (horizontal: thumb | body) ─────────────────── */
.cat-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: var(--cat-card-bg);
    border-radius: 8px;
    padding: 8px 12px;
    text-decoration: none;
    color: var(--color-primary);
    height: 56px;
    min-width: 170px;
    box-sizing: border-box;
    transition: box-shadow var(--trans-fast);
    overflow: hidden;
}
.cat-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* ── Thumbnail (square, rounded corners) ──────────────────── */
.cat-card__thumb {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    background: #e0e0e0;
}
.cat-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.cat-card:hover .cat-card__thumb img { transform: scale(1.06); }

/* ── Text body ────────────────────────────────────────────── */
.cat-card__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cat-card__name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-card__count {
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-3);
    white-space: nowrap;
}

/* ── Per-slide pastel colors (Amerce style) ───────────────── */
.swiper-category .swiper-slide:nth-child(1) .cat-card { background: #DC4646; }  /* featured red — handled below */
.swiper-category .swiper-slide:nth-child(2) .cat-card { background: #EEF0FB; }  /* soft indigo */
.swiper-category .swiper-slide:nth-child(3) .cat-card { background: #E8F8F3; }  /* mint green */
.swiper-category .swiper-slide:nth-child(4) .cat-card { background: #FFF4E5; }  /* warm amber */
.swiper-category .swiper-slide:nth-child(5) .cat-card { background: #F0F4FF; }  /* sky blue */
.swiper-category .swiper-slide:nth-child(6) .cat-card { background: #F9EEFF; }  /* soft lavender */
.swiper-category .swiper-slide:nth-child(7) .cat-card { background: #FFF0F0; }  /* blush pink */
.swiper-category .swiper-slide:nth-child(8) .cat-card { background: #EDFBF1; }  /* light green */

/* ── Featured card (theme color) ─────────────────────────── */
.cat-card--featured {
    background: #DC4646;
    color: var(--color-white);
    min-width: 150px;
}
.cat-card--featured:hover {
    filter: brightness(0.92);
    box-shadow: 0 2px 10px rgba(220,70,70,.35);
}

.cat-card__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--color-white);
    overflow: hidden;
}
.cat-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.cat-card--featured .cat-card__name  { color: var(--color-white); font-size: 13px; }
.cat-card--featured .cat-card__count { color: rgba(255,255,255,.80); font-size: 11px; }

/* ── Swiper slides: each is the full card width ───────────── */
.swiper-category .swiper-slide {
    width: auto !important;
    height: auto;
    flex: 0 0 auto !important;
    margin-right: 10px;
}

.swiper-category .swiper-slide:last-child {
    margin-right: 0;
}

.cat-nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.cat-nav.is-visible {
    display: flex;
}

.cat-nav__btn {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #c7c7c7;
    background: var(--color-white);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 1;
    cursor: pointer;
    transition: background var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);
    outline: none;
    box-shadow: none;
}

.cat-nav__btn:hover {
    border-color: var(--color-primary);
    transform: scale(1.05);
}

.cat-nav__btn--active {
    border-color: #000000;
    background: #000000;
}

/* ── Pagination dots — hidden, using nav arrows instead ───── */
.cat-pagination {
    display: none !important;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .cat-card        { height: 52px; padding: 7px 10px; gap: 8px; }
    .cat-card__thumb { width: 32px; height: 32px; }
    .cat-card__icon  { width: 32px; height: 32px; font-size: 16px; }
    .cat-card        { min-width: 150px; }
    .cat-card--featured { min-width: 138px; }
}

@media (max-width: 767.98px) {
    .flat-category-slider { padding: 5px 0 7px; }
    .cat-card        { height: 48px; padding: 6px 10px; gap: 8px; }
    .cat-card__thumb { width: 30px; height: 30px; }
    .cat-card__icon  { width: 30px; height: 30px; font-size: 14px; }
    .cat-card__name  { font-size: 12px; }
    .cat-card__count { font-size: 10px; }
    .cat-card        { min-width: 130px; }
    .cat-card--featured { min-width: 120px; }
}


/* =========================================================
   SHARED LAYOUT UTILITIES
   ========================================================= */
.container-full {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1400px) {
    .container-full { padding-left: 30px; padding-right: 30px; }
}

.fs-24  { font-size: 24px; }
.gap-8  { gap: 8px; }
.lh-24  { line-height: 24px; }
.fw-medium   { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.radius-8    { border-radius: 8px; }
.cs-pointer  { cursor: pointer; }
.text-primary { color: var(--color-primary) !important; }
.h-100 { height: 100%; }
.ms-auto { margin-left: auto; }
.me-auto { margin-right: auto; }
.text-decoration-underline     { text-decoration: underline !important; }
.text-decoration-thickness     { text-decoration-thickness: 1px; }
.position-relative             { position: relative; }


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199.98px) {
    /* Show category sidebar toggle */
    .box-open-header-bottom { display: block; }

    /* Hide desktop nav bar */
    .header-bottom_wrap { display: none; }

    /* Hide "Browse by Category" button + search in wrap-left */
    .nav-category-wrap { display: none; }

    /* Search full-width on tablet */
    .form-search-nav.style-5 { max-width: 100%; }

}

@media (max-width: 767.98px) {
    .header-inner { gap: 8px; }
    .nav-icon-item { padding: 8px 8px; }
}

/* Desktop horizontal nav override (prevents vertical stacking) */
@media (min-width: 1200px) {
    .tf-header .box-nav-menu {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0;
    }

    .tf-header .box-nav-menu > .menu-item {
        flex: 0 0 auto;
    }

    .tf-header .navbar-nav,
    .tf-header .navbar-nav > li {
        flex-direction: row !important;
        align-items: center;
    }

    .tf-header .navbar-nav {
        display: flex !important;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1200px) {
    .tf-header .header-bottom .box-nav-menu {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    .tf-header .header-bottom .box-nav-menu > li {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
    }

    .tf-header .header-bottom .box-nav-menu > li > a {
        display: inline-flex !important;
        align-items: center !important;
    }

    .navbar-area .nav-container .navbar-collapse .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }

    .navbar-area .nav-container .navbar-collapse .navbar-nav > li {
        display: inline-flex !important;
        align-items: center !important;
    }
}