/* ═══════════════════════════════════════════════════════════════════
   MK BOOKSHOP — E-Commerce Theme Override  v3.0
   Loaded last — overrides all vendor & style.css defaults
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. CSS Custom Properties ── */
:root {
    --ec-navy:      #1b3a6b;
    --ec-navy-dk:   #0d1f3c;
    --ec-navy-lt:   #2a5298;
    --ec-green:     #27ae60;
    --ec-green-dk:  #1e8449;
    --ec-red:       #e53935;
    --ec-red-lt:    #fff5f5;
    --ec-amber:     #f59e0b;
    --ec-body:      #f4f6fa;
    --ec-card:      #ffffff;
    --ec-border:    #e2e8f2;
    --ec-text:      #1e2d40;
    --ec-sub:       #5a6a7a;
    --ec-mute:      #94a3b8;
    --ec-sh-xs:     0 1px 4px rgba(15,30,60,.07);
    --ec-sh-sm:     0 2px 12px rgba(15,30,60,.09);
    --ec-sh-md:     0 6px 24px rgba(15,30,60,.13);
    --ec-sh-lg:     0 12px 40px rgba(15,30,60,.17);
    --ec-r:         8px;
    --ec-r-sm:      5px;
    --ec-r-lg:      12px;
    --ec-t:         .2s ease;
}

/* ════════════════════════════════════
   2. BASE RESET
   ════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: var(--ec-body) !important;
    color: var(--ec-text) !important;
    font-family: 'Phetsarath OT','Noto Sans Lao','Segoe UI',Arial,sans-serif !important;
    font-size: 14px !important;
    -webkit-font-smoothing: antialiased;
}

a        { color: var(--ec-text) !important; transition: color var(--ec-t) !important; text-decoration: none !important; }
a:hover  { color: var(--ec-navy) !important; }
a:focus  { outline: none !important; }
img      { max-width: 100%; height: auto; }
h1,h2,h3,h4,h5 { color: var(--ec-text) !important; }

/* ════════════════════════════════════
   3. TOPBAR
   ════════════════════════════════════ */
.top-header {
    background: linear-gradient(90deg, var(--ec-navy-dk) 0%, var(--ec-navy) 100%) !important;
    border-bottom: none !important;
    padding: 8px 0 !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
    /* Establish a stacking context above .main-header, which itself sets
       z-index:500 (further down in this file) with an opaque white
       background — without exceeding that here, .main-header paints
       directly over the open account dropdown, making it look blank.
       Stays below #header.sticky-active .main-header's z-index:999 since
       that's a different (scrolled) state. */
    position: relative !important;
    z-index: 600 !important;
}
.top-header .nav-top-links a {
    color: rgba(255,255,255,.82) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 0 12px 0 0 !important;
    transition: color var(--ec-t) !important;
}
.top-header .nav-top-links a:hover { color: #fff !important; }
.top-header .nav-top-links a img { opacity: .7; margin-right: 5px; vertical-align: middle; }
.top-header .support-link a {
    color: rgba(255,255,255,.7) !important;
    font-size: 12.5px !important;
    transition: color var(--ec-t) !important;
}
.top-header .support-link a:hover { color: #fff !important; }
.top-header .support-link a[href*="laobookdokked"],
.top-header .support-link a[style*="background"] {
    background: var(--ec-green) !important;
    border-radius: 20px !important;
    padding: 5px 14px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Account dropdown (sign in / sign up) — the global `a{color:var(--ec-text)}`
   rule otherwise leaves this near-invisible: dark navy text on the dark
   navy topbar gradient. */
.top-header .user-info { position: relative !important; float: right !important; }
.top-header .user-info a.current-open {
    color: rgba(255,255,255,.85) !important;
    border-right: none !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    transition: color var(--ec-t) !important;
}
.top-header .user-info a.current-open:hover { color: #fff !important; }
.top-header .user-info a.current-open .fa-user { font-size: 13px !important; opacity: .9 !important; }
.top-header .user-info a.current-open:after {
    padding-left: 4px !important;
    font-size: 13px !important;
    transition: transform var(--ec-t) !important;
}
.top-header .user-info .dropdown.open > a.current-open:after,
.top-header .user-info .dropdown:hover > a.current-open:after {
    transform: rotate(180deg) !important;
}
.top-header .user-info .dropdown-menu {
    background: #fff !important;
    min-width: 200px !important;
    box-shadow: var(--ec-sh-lg) !important;
    border-radius: var(--ec-r-sm) !important;
    padding: 6px 0 !important;
    margin-top: 6px !important;
    overflow: hidden !important;
    z-index: 20 !important;
    /* .user-info floats right, so the toggle sits at the far right edge —
       anchoring the menu with the inherited left:0 (opens rightward) pushes
       it off-screen on narrow viewports. Open leftward instead, matching
       #user-info-opntop's dropdown elsewhere in this theme. */
    left: auto !important;
    right: 0 !important;
}
.top-header .user-info .dropdown-menu li.divider {
    background: var(--ec-border) !important;
    height: 1px !important;
    margin: 6px 0 !important;
}
.top-header .user-info .dropdown-menu a {
    color: var(--ec-text) !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    border-right: none !important;
    margin-left: 0 !important;
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    transition: background var(--ec-t), color var(--ec-t) !important;
}
.top-header .user-info .dropdown-menu a .fa {
    width: 14px !important;
    text-align: center !important;
    color: var(--ec-mute) !important;
    transition: color var(--ec-t) !important;
}
.top-header .user-info .dropdown-menu a:hover {
    background: #f0f5fb !important;
    color: var(--ec-navy) !important;
}
.top-header .user-info .dropdown-menu a:hover .fa { color: var(--ec-navy) !important; }
/* Hover reveal alongside the existing click-to-open (.dropdown.open) behavior
   — matches the pattern already used by #user-info-opntop elsewhere in this
   theme, and is more forgiving if the click-toggle JS doesn't fire. */
.top-header .user-info .dropdown:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* ════════════════════════════════════
   4. MAIN HEADER  (logo + search)
   ════════════════════════════════════ */
.main-header {
    background: #fff !important;
    box-shadow: 0 2px 14px rgba(13,31,60,.09) !important;
    padding: 16px 0 !important;
    position: relative !important;
    z-index: 500 !important;
}
.main-header .logo img {
    max-height: 58px !important;
    width: auto !important;
    object-fit: contain !important;
}
.main-header .header-search-box .form-inline {
    display: flex !important;
    align-items: stretch !important;
    border: 2px solid var(--ec-navy) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(27,58,107,.12) !important;
    transition: box-shadow var(--ec-t) !important;
}
.main-header .header-search-box .form-inline:focus-within {
    box-shadow: 0 3px 18px rgba(27,58,107,.22) !important;
}
.main-header .form-category select,
.main-header .select-category {
    border: none !important;
    border-right: 1px solid var(--ec-border) !important;
    border-radius: 0 !important;
    height: 46px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    color: var(--ec-sub) !important;
    background: #f8fafc !important;
    min-width: 130px !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    -webkit-appearance: auto !important;
    font-family: inherit !important;
}
.main-header input#search-text,
.main-header .input-serach input {
    flex: 1 !important;
    border: none !important;
    outline: none !important;
    padding: 0 18px !important;
    height: 46px !important;
    font-size: 14px !important;
    color: var(--ec-text) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit !important;
}
.main-header input#search-text::placeholder { color: var(--ec-mute) !important; }
.main-header .btn-search,
.main-header button[type="submit"] {
    background: linear-gradient(135deg, var(--ec-navy-lt), var(--ec-navy-dk)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 28px 28px 0 !important;
    padding: 0 24px !important;
    height: 46px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity var(--ec-t) !important;
    min-width: 52px !important;
}
.main-header .btn-search:hover { opacity: .85 !important; }

/* ════════════════════════════════════
   5. NAVIGATION BAR
   ════════════════════════════════════ */
#nav-top-menu, .nav-top-menu {
    background: var(--ec-navy) !important;
    border-bottom: 3px solid var(--ec-navy-lt) !important;
    box-shadow: 0 3px 12px rgba(13,31,60,.28) !important;
}

/* ── Left category panel ── */
.box-vertical-megamenus { background: #0d1f3c !important; }

/* Header "ໝວດປື້ມ" */
.box-vertical-megamenus .title {
    background: linear-gradient(135deg, #0d1f3c 0%, #1e4a82 100%) !important;
    color: #fff !important;
    height: auto !important;
    line-height: 1.3 !important;
    padding: 13px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    border-bottom: 2px solid rgba(255,255,255,.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.box-vertical-megamenus .title .title-menu { color: #fff !important; font-size: 13.5px !important; }
.box-vertical-megamenus .title .btn-open-mobile { color: rgba(255,255,255,.7) !important; }

/* Vertical menu content panel */
.box-vertical-megamenus .vertical-menu-content {
    border-top: none !important;
    background: #0d1f3c !important;
    padding-bottom: 0 !important;
}

/* List container */
.box-vertical-megamenus .vertical-menu-list {
    border-left: none !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    list-style: none !important;
}

/* Each row — reset line-height from style.css */
.box-vertical-megamenus .vertical-menu-list li {
    line-height: 1 !important;
    margin-left: 0 !important;
    position: relative !important;
}

/* The link itself */
.box-vertical-megamenus .vertical-menu-list > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 11px 40px 11px 16px !important;
    color: rgba(255,255,255,.82) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border-left: 3px solid transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    background: transparent !important;
    transition: background var(--ec-t), border-color var(--ec-t), color var(--ec-t) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Hover & active row — override the green #95c966 from style.css */
.box-vertical-megamenus .vertical-menu-list > li:hover,
.box-vertical-megamenus .vertical-menu-list > li.active {
    background: transparent !important;
}
.box-vertical-megamenus .vertical-menu-list > li:hover > a,
.box-vertical-megamenus .vertical-menu-list > li.active > a {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    border-left-color: var(--ec-amber) !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
}

/* The "›" arrow (::before on .parent) */
.box-vertical-megamenus .vertical-menu-content ul > li > a.parent::before {
    color: rgba(255,255,255,.4) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 14px !important;
    font-size: 14px !important;
}
.box-vertical-megamenus .vertical-menu-list > li:hover > a.parent::before { color: var(--ec-amber) !important; }

/* The white right-edge mask (::after) — hide it */
.box-vertical-megamenus .vertical-menu-content ul > li > a.parent::after { display: none !important; }

/* Category icon */
.box-vertical-megamenus .vertical-menu-list li img.icon-menu {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    padding-right: 0 !important;
    vertical-align: middle !important;
    filter: brightness(0) invert(1) !important;
    opacity: .55 !important;
    transition: opacity var(--ec-t) !important;
}
.box-vertical-megamenus .vertical-menu-list > li:hover img.icon-menu { opacity: .9 !important; }

/* "ໝວດທັງໝົດ" — All categories button */
.box-vertical-megamenus .all-category {
    padding: 10px 14px 14px !important;
    margin-top: 0 !important;
}
.box-vertical-megamenus .all-category a,
.box-vertical-megamenus .all-category span.open-cate {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    line-height: 1 !important;
    border: 1.5px solid rgba(245,158,11,.5) !important;
    border-radius: 6px !important;
    color: var(--ec-amber) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    background: rgba(245,158,11,.06) !important;
    cursor: pointer !important;
    transition: all var(--ec-t) !important;
    text-decoration: none !important;
    width: 100% !important;
}
.box-vertical-megamenus .all-category a:hover,
.box-vertical-megamenus .all-category span.open-cate:hover {
    background: rgba(245,158,11,.16) !important;
    border-color: var(--ec-amber) !important;
    color: #fbbf24 !important;
}
/* Override the ::after arrow added by style.css on the span */
.box-vertical-megamenus .all-category span::after {
    font: normal normal normal 14px/1 FontAwesome !important;
    content: "\f054" !important;
    margin-left: 6px !important;
    font-weight: 700 !important;
}

/* Dropdown flyout panel */
.vertical-dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--ec-border) !important;
    box-shadow: var(--ec-sh-md) !important;
    border-radius: 0 var(--ec-r) var(--ec-r) 0 !important;
    padding: 12px 0 !important;
    min-width: 220px !important;
}
.vertical-dropdown-menu .mega-group-header span {
    color: var(--ec-navy) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    border-bottom: 2px solid var(--ec-navy) !important;
    padding-bottom: 4px !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}
.vertical-dropdown-menu .mega-products li a {
    color: var(--ec-sub) !important;
    font-size: 13px !important;
    padding: 6px 16px !important;
    display: block !important;
    transition: color var(--ec-t), padding-left var(--ec-t) !important;
}
.vertical-dropdown-menu .mega-products li a:hover {
    color: var(--ec-navy) !important;
    padding-left: 22px !important;
}

/* ── Right horizontal nav  (#main-menu is actual ID in HTML) ── */
#main-menu .navbar,
#main-menu .navbar-default {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    min-height: 48px !important;
    box-shadow: none !important;
}
#main-menu .navbar .navbar-nav > li > a {
    color: rgba(255,255,255,.88) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 15px 20px !important;
    margin: 0 !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: 3px solid transparent !important;
    background: transparent !important;
    transition: all var(--ec-t) !important;
}
#main-menu .navbar .navbar-nav > li:last-child > a { border-right: none !important; }

/* Override the green hover/active background */
#main-menu .navbar .navbar-nav > li:hover,
#main-menu .navbar .navbar-nav > li.active {
    background: rgba(255,255,255,.08) !important;
}
#main-menu .navbar .navbar-nav > li:hover > a,
#main-menu .navbar .navbar-nav > li.active > a {
    color: #fff !important;
    background: transparent !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
    border-bottom: 3px solid var(--ec-amber) !important;
}
#main-menu .navbar .navbar-nav > li:last-child:hover > a,
#main-menu .navbar .navbar-nav > li:last-child.active > a { border-right: none !important; }

/* Mobile toggle */
#main-menu .navbar-toggle { border-color: rgba(255,255,255,.3) !important; }
#main-menu .navbar-toggle .icon-bar { background: #fff !important; }
#main-menu .navbar-brand { color: rgba(255,255,255,.8) !important; font-size: 13px !important; }

/* Dropdown menus from horizontal nav */
#main-menu .dropdown-menu {
    background: #fff !important;
    border: 1px solid var(--ec-border) !important;
    box-shadow: var(--ec-sh-md) !important;
    border-radius: var(--ec-r-sm) !important;
    padding: 6px 0 !important;
}
#main-menu .dropdown-menu > li > a { color: var(--ec-text) !important; font-size: 13px !important; padding: 9px 18px !important; }
#main-menu .dropdown-menu > li > a:hover { background: #f0f5fb !important; color: var(--ec-navy) !important; }

/* ════════════════════════════════════
   5b. SUBCATEGORY TABS + PAGE HEADING
   ════════════════════════════════════ */

/* Tab strip */
.subcategories {
    border: none !important;
    background: #fff !important;
    border-radius: var(--ec-r) !important;
    box-shadow: var(--ec-sh-xs) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}
.subcategories ul {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 2px solid var(--ec-border) !important;
}
.subcategories li {
    display: flex !important;
    float: none !important;
    position: relative !important;
}
.subcategories li a {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    line-height: 1 !important;
    padding: 0 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ec-sub) !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    white-space: nowrap !important;
    transition: color var(--ec-t), border-color var(--ec-t) !important;
    background: transparent !important;
}
.subcategories li a:hover {
    color: var(--ec-navy) !important;
    background: #f4f8ff !important;
    border-bottom-color: var(--ec-navy-lt) !important;
}

/* Active tab (current-categorie) — override black #000 */
.subcategories li.current-categorie a {
    color: var(--ec-navy) !important;
    background: transparent !important;
    border-bottom: 3px solid var(--ec-navy) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}
/* Remove old black arrow ::after */
.subcategories li.current-categorie::after { display: none !important; }

/* Page heading — fix green underline */
.page-heading {
    height: auto !important;
    border-bottom: 2px solid var(--ec-border) !important;
    line-height: 1.4 !important;
    padding: 10px 0 12px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--ec-text) !important;
}
.page-heading span.page-heading-title {
    border-bottom: 3px solid var(--ec-navy) !important;  /* was #95c966 green */
    color: var(--ec-navy) !important;
    font-weight: 700 !important;
    position: absolute !important;
    bottom: -2px !important;
    padding: 0 2px 10px !important;
}

/* Grid / List toggle — FontAwesome icon buttons */
.display-product-option {
    width: auto !important;
    height: auto !important;
    display: flex !important;
    gap: 4px !important;
}
.display-product-option li {
    display: inline-flex !important;
    float: none !important;
    list-style: none !important;
}
.display-product-option li span {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--ec-r-sm) !important;
    border: 1.5px solid var(--ec-border) !important;
    background: #fff !important;
    cursor: pointer !important;
    text-indent: 0 !important;
    color: var(--ec-sub) !important;
    font-size: 14px !important;
    transition: all var(--ec-t) !important;
}
.display-product-option li span:hover { background: #f0f5fb !important; color: var(--ec-navy) !important; border-color: var(--ec-navy-lt) !important; }
.display-product-option li.selected span {
    background: var(--ec-navy) !important;
    color: #fff !important;
    border-color: var(--ec-navy) !important;
}

/* ════════════════════════════════════
   6. BREADCRUMB
   ════════════════════════════════════ */
.breadcrumb {
    background: transparent !important; margin: 12px 0 !important; padding: 0 !important;
    font-size: 13px !important; display: flex !important; align-items: center !important;
    flex-wrap: wrap !important; gap: 6px !important;
}
.breadcrumb a, .breadcrumb a.home { color: var(--ec-sub) !important; font-weight: 500 !important; }
.breadcrumb a:hover { color: var(--ec-navy) !important; }
.breadcrumb .navigation-pipe { color: var(--ec-mute) !important; }
.breadcrumb .navigation_page { color: var(--ec-navy) !important; font-weight: 600 !important; }

/* ════════════════════════════════════
   7. LEFT SIDEBAR
   ════════════════════════════════════ */
#left_column .block,
#left_column .left-module,
#left_column .col-left-slide {
    background: var(--ec-card) !important;
    border: 1px solid var(--ec-border) !important;
    border-radius: var(--ec-r) !important;
    box-shadow: var(--ec-sh-xs) !important;
    overflow: hidden !important;
    margin-bottom: 18px !important;
}

/* Sidebar card title header */
#left_column .block .title_block,
#left_column .left-module .title_block {
    background: linear-gradient(90deg, var(--ec-navy), var(--ec-navy-lt)) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 12px 16px !important;
    border-bottom: none !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

#left_column .block .block_content { padding: 0 !important; }
.layered-category .layered-content { padding: 0 !important; border: none !important; }

/* ── Tree-menu (category list) ─────────────────────────────── */
.tree-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Each row: span + a side by side */
.tree-menu li {
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #f0f4f9 !important;
    line-height: 1 !important;
    position: relative !important;
    transition: background var(--ec-t) !important;
}
.tree-menu li:last-child { border-bottom: none !important; }
.tree-menu li:hover { background: #f4f8ff !important; }
.tree-menu li.active { background: #edf3fb !important; }

/* The <span> that holds the › arrow */
.tree-menu > li > span {
    flex-shrink: 0 !important;
    width: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    border-left: 3px solid transparent !important;
    transition: border-color var(--ec-t) !important;
}
.tree-menu > li:hover > span,
.tree-menu > li.active > span {
    border-left-color: var(--ec-navy) !important;
}

/* The › icon itself (::before on span) */
.tree-menu > li > span::before {
    color: #c8d4e0 !important;
    font-size: 13px !important;
    padding-right: 0 !important;
    transition: color var(--ec-t) !important;
}
/* Override style.css green (#95c966) on hover/active */
.tree-menu li:hover > span::before,
.tree-menu li.active > span::before {
    color: var(--ec-navy) !important;
}

/* The <a> link */
.tree-menu li > a {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 14px 11px 4px !important;
    color: var(--ec-text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border: none !important;
    background: transparent !important;
    transition: color var(--ec-t) !important;
    text-decoration: none !important;
}
/* Override style.css green on hover/active link */
.tree-menu li:hover > a,
.tree-menu li.active > a {
    color: var(--ec-navy) !important;
    background: transparent !important;
    border-left: none !important;
}

/* Count badge <strong class="count pull-right"> */
.tree-menu li a strong.count,
.tree-menu li a .count {
    float: none !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--ec-mute) !important;
    background: #eef1f6 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    min-width: 28px !important;
    text-align: center !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    transition: background var(--ec-t), color var(--ec-t) !important;
}
.tree-menu li:hover a strong.count,
.tree-menu li.active a strong.count {
    background: #dae6f8 !important;
    color: var(--ec-navy) !important;
}
/* Sidebar product list */
.products-block { list-style: none !important; padding: 6px 12px !important; margin: 0 !important; }
.products-block li {
    display: flex !important; gap: 10px !important;
    padding: 8px 0 !important; border-bottom: 1px solid #f5f7fb !important; align-items: flex-start !important;
}
.products-block li:last-child { border-bottom: none !important; }
.products-block-left { width: 52px !important; flex-shrink: 0 !important; }
.products-block-left img { border-radius: var(--ec-r-sm) !important; border: 1px solid var(--ec-border) !important; width: 52px !important; height: auto !important; }
.products-block-right { flex: 1 !important; }
.products-block-right .product-name a,
.products-block .product-name a {
    color: var(--ec-text) !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.4 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}
.products-block-right .product-name a:hover { color: var(--ec-navy) !important; }
.products-block .product-price,
.products-block-right .product-price {
    color: var(--ec-red) !important; font-size: 13px !important; font-weight: 700 !important; margin-top: 3px !important;
}

/* ════════════════════════════════════
   8. PRODUCT CARDS  (grid / carousel)
   ════════════════════════════════════ */
.product-list li { overflow: visible !important; }
.product-list li .product-container,
.product-container {
    background: var(--ec-card) !important;
    border: 1px solid var(--ec-border) !important;
    border-radius: var(--ec-r) !important;
    box-shadow: var(--ec-sh-xs) !important;
    overflow: hidden !important;
    transition: box-shadow var(--ec-t), transform var(--ec-t) !important;
}
.product-list li:hover .product-container,
.product-container:hover {
    box-shadow: var(--ec-sh-md) !important; transform: translateY(-4px) !important;
}
.product-list li .left-block,
.product-container .left-block {
    background: #f9fafb !important; padding: 0 !important; overflow: hidden !important; position: relative !important;
}
.product-list li .left-block img,
.product-container .left-block img {
    transition: transform .4s ease !important; display: block !important;
    margin: 0 auto !important; width: 100% !important; object-fit: cover !important;
}
.product-list li:hover .left-block img { transform: scale(1.07) !important; transform-origin: center !important; }
.price-percent-reduction2 {
    position: absolute !important; top: 8px !important; left: 8px !important;
    background: var(--ec-red) !important; color: #fff !important;
    font-size: 10.5px !important; font-weight: 700 !important;
    padding: 3px 9px !important; border-radius: 20px !important; z-index: 2 !important;
}
.product-list li .right-block,
.product-container .right-block { padding: 12px 14px 14px !important; margin-top: 0 !important; }
.product-list li .product-name a,
.product-container .product-name a,
.product-list li h5 a {
    color: var(--ec-text) !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.45 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
    transition: color var(--ec-t) !important;
}
.product-list li .product-name a:hover { color: var(--ec-navy) !important; }
.product-list li .product-price,
.product-container .product-price,
.product-list li .price.product-price,
.price.product-price {
    color: var(--ec-red) !important; font-size: 15px !important; font-weight: 700 !important;
}
.product-list li .old-price,
.product-container .old-price,
.price.old-price {
    color: var(--ec-mute) !important; font-size: 12px !important; text-decoration: line-through !important;
}
.product-list li .colreduce-percentage,
.product-container .colreduce-percentage,
.colreduce-percentage {
    color: var(--ec-red) !important; font-size: 11.5px !important; font-weight: 600 !important;
    background: var(--ec-red-lt) !important; padding: 1px 6px !important; border-radius: 20px !important;
}
.product-list li .content_price,
.product-container .content_price,
.content_price {
    display: flex !important; align-items: center !important; gap: 8px !important;
    flex-wrap: wrap !important; margin-top: 8px !important;
}

/* ════════════════════════════════════
   9. PRODUCT DETAIL PAGE  (#product)
   ════════════════════════════════════ */
#product {
    background: var(--ec-card) !important;
    border-radius: var(--ec-r-lg) !important;
    box-shadow: var(--ec-sh-sm) !important;
    padding: 24px !important;
    margin-top: 10px !important;
}
#product .pb-left-column .product-image .product-full {
    border: 1px solid var(--ec-border) !important;
    border-radius: var(--ec-r) !important;
    padding: 12px !important;
    background: #fafbfc !important;
    box-shadow: var(--ec-sh-xs) !important;
}
#product .pb-right-column { line-height: 1.7 !important; padding-left: 20px !important; }
#product .pb-right-column .product-name {
    font-size: 22px !important; font-weight: 700 !important; color: var(--ec-text) !important;
    line-height: 1.35 !important; margin-bottom: 14px !important; margin-top: 0 !important;
}
#product .pb-right-column .product-price-group {
    display: flex !important; align-items: center !important;
    flex-wrap: wrap !important; gap: 10px !important;
    margin-bottom: 14px !important; padding-bottom: 14px !important;
    border-bottom: 1px solid var(--ec-border) !important;
}
#product .pb-right-column .product-price-group .price,
#product .pb-right-column .product-price-group .old-price,
#product .pb-right-column .product-price-group .discount {
    display: inline-flex !important; align-items: center !important; margin-right: 0 !important;
}
#product .pb-right-column .product-price-group .price {
    font-size: 26px !important; font-weight: 700 !important;
    color: var(--ec-red) !important; letter-spacing: -.3px !important;
}
#product .pb-right-column .product-price-group .old-price {
    font-size: 15px !important; color: var(--ec-mute) !important;
    text-decoration: line-through !important; font-weight: 400 !important;
}
#product .pb-right-column .product-price-group .discount {
    background: var(--ec-amber) !important; color: #fff !important;
    font-size: 12px !important; font-weight: 700 !important;
    padding: 4px 12px !important; border-radius: 20px !important;
    height: auto !important; line-height: 1.6 !important;
}
#product .pb-right-column .info-orther {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--ec-border) !important;
    margin-bottom: 10px !important;
    font-size: 13.5px !important; color: var(--ec-sub) !important;
}
.in-stock {
    color: var(--ec-green) !important; font-weight: 700 !important;
    background: #eafaf1 !important; padding: 2px 10px !important;
    border-radius: 20px !important; font-size: 12.5px !important;
}
/* Product tabs */
.product-tab { margin-top: 28px !important; }
.product-tab .nav-tab {
    border-bottom: 2px solid var(--ec-border) !important;
    overflow: hidden !important; display: flex !important;
    padding: 0 !important; margin: 0 !important; list-style: none !important;
}
.product-tab .nav-tab > li {
    background: transparent !important; border: none !important;
    border-bottom: 3px solid transparent !important;
    height: 46px !important; line-height: 46px !important;
    float: none !important; display: inline-flex !important;
    margin: 0 4px 0 0 !important; padding: 0 !important;
    color: var(--ec-sub) !important; font-weight: 600 !important;
    text-transform: uppercase !important; font-size: 12.5px !important;
    transition: all var(--ec-t) !important; margin-bottom: -2px !important;
}
.product-tab .nav-tab > li:hover,
.product-tab .nav-tab > li.active { border-bottom-color: var(--ec-navy) !important; background: transparent !important; }
.product-tab .nav-tab > li:hover > a,
.product-tab .nav-tab > li.active > a { color: var(--ec-navy) !important; background: transparent !important; }
.product-tab .nav-tab > li > a {
    color: var(--ec-sub) !important; padding: 0 20px !important;
    height: 46px !important; display: flex !important; align-items: center !important; float: none !important;
}
.product-tab .tab-container {
    border: 1px solid var(--ec-border) !important;
    border-radius: 0 0 var(--ec-r) var(--ec-r) !important;
    padding: 20px !important; margin-top: 0 !important; background: #fff !important;
}
.product-tab .table { margin-bottom: 0 !important; }
.product-tab .table td, .product-tab .table th {
    padding: 10px 14px !important; border: 1px solid var(--ec-border) !important;
    font-size: 13.5px !important; vertical-align: middle !important;
}
.product-tab .table td:first-child {
    color: var(--ec-sub) !important; background: #f8fafb !important;
    font-weight: 600 !important; width: 180px !important;
}
/* Related products */
.page-product-box { margin-top: 40px !important; }
.page-product-box .heading {
    font-size: 16px !important; font-weight: 700 !important;
    color: var(--ec-navy) !important; text-transform: uppercase !important;
    padding-bottom: 12px !important; border-bottom: 2px solid var(--ec-border) !important;
    margin-bottom: 20px !important; position: relative !important;
}
.page-product-box .heading::after {
    content: '' !important; position: absolute !important;
    bottom: -2px !important; left: 0 !important;
    width: 50px !important; height: 2px !important;
    background: var(--ec-navy) !important;
}

/* ════════════════════════════════════
   10. OWL CAROUSEL
   ════════════════════════════════════ */
.owl-theme .owl-controls .owl-buttons div,
.owl-prev, .owl-next {
    background: var(--ec-navy) !important; border-radius: 50% !important;
    width: 34px !important; height: 34px !important; line-height: 34px !important;
    font-size: 14px !important; opacity: .8 !important;
    box-shadow: var(--ec-sh-sm) !important; transition: opacity var(--ec-t), background var(--ec-t) !important;
}
.owl-theme .owl-controls .owl-buttons div:hover,
.owl-prev:hover, .owl-next:hover { background: var(--ec-navy-dk) !important; opacity: 1 !important; }
.owl-theme .owl-controls .owl-page span { background: var(--ec-navy) !important; }

/* ════════════════════════════════════
   11. SECTION TITLES
   ════════════════════════════════════ */
.group-title {
    border-bottom: 2px solid var(--ec-border) !important; font-size: 17px !important;
    font-weight: 700 !important; color: var(--ec-text) !important; padding-bottom: 10px !important;
}
.group-title span {
    border-bottom: 3px solid var(--ec-navy) !important;
    color: var(--ec-navy) !important; text-transform: uppercase !important; padding: 5px 10px !important;
}
.popular-tabs .nav-tab li { border-bottom: 3px solid transparent !important; }
.popular-tabs .nav-tab li:hover,
.popular-tabs .nav-tab li.active { border-bottom-color: var(--ec-navy) !important; }
.popular-tabs .nav-tab li a { font-size: 14px !important; color: var(--ec-text) !important; font-weight: 700 !important; }

/* ════════════════════════════════════
   12. PAGINATION
   ════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span {
    color: var(--ec-sub) !important; border: 1.5px solid var(--ec-border) !important;
    border-radius: var(--ec-r-sm) !important; margin: 0 2px !important;
    padding: 6px 13px !important; font-weight: 600 !important;
    background: #fff !important; transition: all var(--ec-t) !important;
}
.pagination > li > a:hover { background: #f0f5fb !important; color: var(--ec-navy) !important; }
.pagination > .active > a, .pagination > .active > span {
    background: var(--ec-navy) !important; border-color: var(--ec-navy) !important; color: #fff !important;
}

/* ════════════════════════════════════
   13. BUTTONS
   ════════════════════════════════════ */
.btn {
    border-radius: var(--ec-r-sm) !important; font-weight: 600 !important;
    font-family: inherit !important; transition: opacity var(--ec-t), transform var(--ec-t) !important;
}
.btn:hover  { opacity: .88 !important; transform: translateY(-1px) !important; }
.btn:active { transform: translateY(0) !important; }
.btn-primary { background: linear-gradient(135deg, var(--ec-navy-lt), var(--ec-navy-dk)) !important; border: none !important; color: #fff !important; }
.btn-success { background: linear-gradient(135deg, var(--ec-green), var(--ec-green-dk)) !important; border: none !important; color: #fff !important; }
.btn-default { background: #fff !important; border: 1.5px solid var(--ec-border) !important; color: var(--ec-text) !important; }
.btn-default:hover { background: #f0f5fb !important; }
.button { background: var(--ec-navy) !important; color: #fff !important; border: none !important; }
.button:hover { background: var(--ec-navy-lt) !important; color: #fff !important; }

/* ════════════════════════════════════
   14. FORMS
   ════════════════════════════════════ */
input[type="text"]:not(#search-text),
input[type="email"], input[type="password"], input[type="number"], textarea {
    border: 1.5px solid var(--ec-border) !important;
    border-radius: var(--ec-r-sm) !important; font-size: 14px !important;
    color: var(--ec-text) !important; background: #fdfdfe !important;
    padding: 9px 13px !important; box-shadow: none !important;
    outline: none !important; font-family: inherit !important;
    transition: border-color var(--ec-t), box-shadow var(--ec-t) !important;
}
input:focus, textarea:focus {
    border-color: var(--ec-navy-lt) !important;
    box-shadow: 0 0 0 3px rgba(42,82,152,.12) !important;
}

/* ════════════════════════════════════
   15. FOOTER
   ════════════════════════════════════ */
#footer {
    background: linear-gradient(180deg, #0f2340 0%, #060e1e 100%) !important;
    color: rgba(255,255,255,.72) !important;
    padding: 48px 0 0 !important; margin-top: 50px !important;
}
#footer #address-box img {
    max-height: 52px !important; width: auto !important;
    filter: brightness(0) invert(1) !important; opacity: .88 !important; margin-bottom: 14px !important;
}
#footer #address-list { font-size: 13px !important; line-height: 1.9 !important; color: rgba(255,255,255,.62) !important; }
#footer #address-list .tit-name { color: rgba(255,255,255,.40) !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .8px !important; margin-top: 8px !important; }
#footer #address-list .tit-contain { color: rgba(255,255,255,.75) !important; }
#footer .introduce-title { color: #fff !important; font-size: 13.5px !important; font-weight: 700 !important; margin-bottom: 12px !important; padding-bottom: 8px !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; }
#footer .introduce-list li a,
#footer #introduce-company li a {
    color: rgba(255,255,255,.60) !important; font-size: 13px !important;
    padding: 4px 0 !important; display: block !important; transition: color var(--ec-t), padding-left var(--ec-t) !important;
}
#footer .introduce-list li a:hover,
#footer #introduce-company li a:hover { color: var(--ec-amber) !important; padding-left: 5px !important; }
#footer .table { background: transparent !important; }
#footer .table th, #footer .table td { border: 1px solid rgba(255,255,255,.10) !important; color: rgba(255,255,255,.62) !important; font-size: 12.5px !important; padding: 8px 12px !important; }
#footer-menu-box {
    background: rgba(0,0,0,.22) !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    padding: 16px 0 !important; margin-top: 32px !important;
}
#footer-menu-box p { color: rgba(255,255,255,.40) !important; font-size: 12px !important; margin: 0 !important; }
#footer-menu-box a { color: rgba(255,255,255,.50) !important; }
#footer-menu-box a:hover { color: var(--ec-amber) !important; }

/* ════════════════════════════════════
   16. ALERTS & MODALS
   ════════════════════════════════════ */
.alert { border-radius: var(--ec-r-sm) !important; border: none !important; border-left: 4px solid !important; font-size: 13.5px !important; font-weight: 500 !important; padding: 12px 18px !important; }
.alert-success { background: #eafaf1 !important; border-left-color: var(--ec-green) !important; color: #145a32 !important; }
.alert-danger  { background: #fff5f5 !important; border-left-color: var(--ec-red) !important;   color: #7b241c !important; }
.alert-warning { background: #fffbeb !important; border-left-color: var(--ec-amber) !important; color: #7d6608 !important; }
.alert-info    { background: #e8f4fd !important; border-left-color: #0097a7 !important;          color: #0a3d62 !important; }
.modal-content { border-radius: var(--ec-r-lg) !important; border: none !important; box-shadow: var(--ec-sh-lg) !important; overflow: hidden !important; }
.modal-header { background: linear-gradient(90deg, var(--ec-navy), var(--ec-navy-lt)) !important; border-bottom: none !important; padding: 16px 22px !important; }
.modal-header h4, .modal-header h3, .modal-title { color: #fff !important; font-size: 16px !important; font-weight: 700 !important; }
.modal-header .close { color: rgba(255,255,255,.8) !important; opacity: 1 !important; text-shadow: none !important; font-size: 22px !important; }
.modal-header .close:hover { color: #fff !important; }
.modal-body { padding: 24px !important; background: #fff !important; }
.modal-footer { background: #f8fafc !important; border-top: 1px solid var(--ec-border) !important; padding: 14px 22px !important; }

/* ════════════════════════════════════
   17. PAGE HEADINGS
   ════════════════════════════════════ */
.page-heading { color: var(--ec-navy) !important; font-size: 22px !important; font-weight: 700 !important; padding-bottom: 10px !important; border-bottom: 2px solid var(--ec-border) !important; margin-bottom: 18px !important; }
.page-heading-title2 { color: var(--ec-navy) !important; }
.page-subheading { color: var(--ec-navy) !important; font-size: 18px !important; font-weight: 700 !important; border-left: 4px solid var(--ec-navy) !important; padding-left: 12px !important; border-bottom: none !important; }

/* ════════════════════════════════════
   18. CONTACT PAGE
   ════════════════════════════════════ */
.store_info { list-style: none !important; padding: 0 !important; margin-top: 10px !important; }
.store_info li { padding: 8px 0 !important; border-bottom: 1px solid var(--ec-border) !important; color: var(--ec-sub) !important; font-size: 13.5px !important; }
.store_info li i { color: var(--ec-navy) !important; width: 22px !important; margin-right: 8px !important; }
.store_info li a { color: var(--ec-navy) !important; font-weight: 600 !important; }

/* ════════════════════════════════════
   19. SCROLLBAR
   ════════════════════════════════════ */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #f0f4f9; }
::-webkit-scrollbar-thumb { background: #b0becc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ec-sub); }

/* ════════════════════════════════════
   20. STICKY HEADER
   ════════════════════════════════════ */
#header.sticky-active .main-header {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 999 !important; animation: _slideDown .28s ease !important;
    box-shadow: 0 4px 20px rgba(13,31,60,.16) !important;
}
@keyframes _slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ════════════════════════════════════
   21. RESPONSIVE
   ════════════════════════════════════ */
@media (max-width: 991px) {
    .main-header .header-search-box .form-inline { border-radius: 8px !important; }
    .main-header .btn-search { border-radius: 0 5px 5px 0 !important; }
    #product .pb-right-column { padding-left: 0 !important; margin-top: 18px !important; }
}
@media (max-width: 767px) {
    .top-header { display: none !important; }
    .main-header { padding: 10px 0 !important; }
    .main-header .logo img { max-height: 42px !important; }
    #footer { padding: 30px 0 0 !important; }
    #footer .col-md-3, #footer .col-md-6 { margin-bottom: 24px !important; }
    #product { padding: 14px !important; }
    #product .pb-right-column .product-name { font-size: 18px !important; }
    #product .pb-right-column .product-price-group .price { font-size: 22px !important; }
}