/* ============================================================
   MegaPC — Custom Dark Theme
   Version: 3.0 Clean Rewrite
   Author: Antigravity
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
    /* Backgrounds */
    --bg-page: #0c0c0c;
    --bg-card: #161616;
    --bg-raised: #1e1e1e;
    --bg-input: #111111;
    --bg-overlay: rgba(0, 0, 0, 0.75);

    /* Text */
    --txt-primary: #f2f2f2;
    --txt-secondary: #a0a0a0;
    --txt-muted: #555555;
    --txt-on-gold: #0c0c0c;

    /* Accent — Gold */
    --gold: #e8c84a;
    --gold-light: #f5d760;
    --gold-dim: rgba(232, 200, 74, 0.18);
    --gold-glow: 0 0 18px rgba(232, 200, 74, 0.35);
    --gold-gradient: linear-gradient(135deg, #f5d760 0%, #e8c84a 60%, #b8952a 100%);

    /* Borders */
    --border: rgba(255, 255, 255, 0.07);
    --border-mid: rgba(255, 255, 255, 0.13);
    --border-gold: rgba(232, 200, 74, 0.35);

    /* Radii */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 24px;

    /* Shadows */
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(232, 200, 74, 0.15);

    /* Transitions */
    --ease: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: all 0.4s cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================================
   URGENT: DISCOUNT BADGE & CART ACCORDION FIXES
   ============================================================ */

/* 1. Усиливаем красный овал скидки, чтобы он привлекал внимание! */
.label-sale,
.label-product.label-sale {
    background: #e74c3c !important;
    /* Яркий красный */
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 10px rgba(231, 76, 60, 0.5) !important;
    border: 1px solid #c0392b !important;
    z-index: 99 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    left: 10px !important;
    top: 10px !important;
}

/* 2. Чиним невидимый текст в аккордеонах корзины (купоны, доставка) */
.panel-group .panel-default {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-md) !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}

.panel-default>.panel-heading {
    background-color: var(--bg-raised) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-mid) !important;
    padding: 16px !important;
}

.panel-title>a {
    color: var(--txt-primary) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: block !important;
}

.panel-title>a:hover {
    color: var(--gold) !important;
}

.panel-body {
    background-color: var(--bg-card) !important;
    border: none !important;
    color: var(--txt-secondary) !important;
}

/* ============================================================
   2. BASE RESET
   ============================================================ */
html,
body {
    background-color: var(--bg-page) !important;
    color: var(--txt-secondary) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 14px;
    line-height: 1.65;
}

/* Make all wrappers transparent so body bg shows through */
#wrapper,
.wrapper-boxed,
.wrapper-full,
.main-container,
#content,
.container,
.container-fluid,
#container,
section,
.section,
.row,
#content .row>div,
.main-container .row>div,
.cms-content,
.cms-block,
.extraslider-inner,
.ltabs-items-container,
.slick-list,
.slick-track {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Kill ANY hardcoded white/light backgrounds in inline styles */
[style*="background:#f"],
[style*="background: #f"],
[style*="background-color:#f"],
[style*="background-color: #f"],
[style*="background:#e"],
[style*="background: #e"],
[style*="background:white"],
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"] {
    background: transparent !important;
}

/* Remove pseudo-element decorations */
body::before,
body::after {
    display: none !important;
}

/* Links */
a {
    color: var(--txt-secondary);
    transition: var(--ease);
    text-decoration: none !important;
}

a:hover {
    color: var(--gold) !important;
    text-decoration: none !important;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--txt-primary) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #2e2e2e;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* ============================================================
   3. HEADER — header25 specific
   ============================================================ */

/* Full header background */
#header,
#header .header-top,
#header .header-middle {
    background-color: #101010 !important;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

/* Header-bottom belongs to nav section — set in section 4 */

#header .header-top {
    background-color: #050505 !important;
    border-bottom: 1px solid var(--border) !important;
}

#header .header-middle {
    border-bottom: 1px solid var(--border-mid) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6) !important;
    padding: 16px 0 !important;
}

/* Top bar text & links */
.typeheader-25 .header-top .top-log>li>a,
.typeheader-25 .header-top ul.top-link>li>a,
.typeheader-25 .header-top ul.lang-curr a,
.typeheader-25 .header-top .btn-link {
    color: var(--txt-muted) !important;
    line-height: 40px !important;
}

.typeheader-25 .header-top .top-log>li>a:hover,
.typeheader-25 .header-top ul.top-link>li>a:hover {
    color: var(--gold) !important;
}

/* Divider lines between top-link items */
.typeheader-25 ul.top-link>li::after {
    background-color: var(--border-mid) !important;
}

/* ==========================================================
   SEARCH BAR — #sosearchpro .search
   ========================================================== */
.typeheader-25 #sosearchpro .search {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-md) !important;
    overflow: hidden;
}

.typeheader-25 #sosearchpro .search .select_category {
    background-color: transparent !important;
    border-right: 1px solid var(--border-mid) !important;
}

.typeheader-25 #sosearchpro .search .select_category select,
.typeheader-25 #sosearchpro .search .select_category .chosen-single,
.typeheader-25 #sosearchpro .search .select_category .chosen-single span {
    background: transparent !important;
    color: var(--txt-secondary) !important;
    border: none !important;
    box-shadow: none !important;
}

.typeheader-25 #sosearchpro .search .select_category .chosen-drop {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
}

.typeheader-25 #sosearchpro .search .select_category .chosen-results li {
    color: var(--txt-secondary) !important;
}

.typeheader-25 #sosearchpro .search .select_category .chosen-results li.highlighted {
    background: var(--gold-dim) !important;
    color: var(--gold) !important;
}

.typeheader-25 #sosearchpro .search input,
.typeheader-25 #sosearchpro .search input.autosearch-input {
    background-color: transparent !important;
    border: none !important;
    color: var(--txt-primary) !important;
    box-shadow: none !important;
    height: 44px !important;
    padding-left: 16px !important;
}

.typeheader-25 #sosearchpro .search input::placeholder {
    color: var(--txt-muted) !important;
}

.typeheader-25 #sosearchpro .search button.button-search {
    background: var(--gold-gradient) !important;
    color: var(--txt-on-gold) !important;
    border: none !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 20px !important;
    border-radius: 0 var(--r-md) var(--r-md) 0 !important;
    box-shadow: none !important;
    transition: var(--ease) !important;
}

.typeheader-25 #sosearchpro .search button.button-search:hover {
    opacity: 0.85 !important;
}

.typeheader-25 #sosearchpro .search button.button-search i {
    color: var(--txt-on-gold) !important;
    font-size: 16px !important;
}

/* ==========================================================
   CART — .shopping_cart > #cart > .btn-shopping-cart > a.top_cart
   Structure: .shopcart > .icon-c (float left) + .shopcart-inner (float left)
   ========================================================== */

/* Kill visible backgrounds on wrappers */
.typeheader-25 .shopping_cart,
.typeheader-25 .shopping_cart .btn-shopping-cart,
#cart.btn-shopping-cart {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* The main cart toggle button */
.typeheader-25 .shopping_cart .btn-shopping-cart .top_cart,
#cart .btn-shopping-cart .top_cart,
a.top_cart {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-md) !important;
    color: var(--txt-primary) !important;
    transition: var(--ease) !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    height: 44px !important;
    overflow: hidden !important;
}

.typeheader-25 .shopping_cart .btn-shopping-cart .top_cart:hover,
a.top_cart:hover {
    border-color: var(--gold) !important;
    box-shadow: var(--gold-glow) !important;
    color: var(--gold) !important;
}

/* Cart icon column (.icon-c) */
.typeheader-25 .shopping_cart .btn-shopping-cart .top_cart .shopcart,
.top_cart .shopcart {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    float: none !important;
}

.typeheader-25 .shopping_cart .btn-shopping-cart .top_cart .icon-c,
.top_cart .icon-c {
    width: 48px !important;
    height: 44px !important;
    line-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    border-right: 1px solid var(--border-mid) !important;
    flex-shrink: 0 !important;
}

.typeheader-25 .shopping_cart .btn-shopping-cart .top_cart .icon-c i,
.top_cart .icon-c i {
    font-size: 16px !important;
    color: var(--txt-secondary) !important;
    line-height: 1 !important;
}

.top_cart:hover .icon-c i {
    color: var(--gold) !important;
}

/* Cart text column (.shopcart-inner) */
.typeheader-25 .shopping_cart .btn-shopping-cart .top_cart .shopcart-inner,
.top_cart .shopcart-inner {
    float: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 14px !important;
    margin: 0 !important;
    height: 44px !important;
    line-height: 1.2 !important;
    color: var(--txt-primary) !important;
}

.top_cart .shopcart-inner .text-shopping-cart {
    font-size: 11px !important;
    color: var(--txt-muted) !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.top_cart .shopcart-inner .total-shopping-cart {
    float: none !important;
    display: block !important;
    line-height: 1.2 !important;
}

.top_cart .shopcart-inner .total-shopping-cart .cart-total-full,
.top_cart .shopcart-inner .total-shopping-cart .items_carts {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--gold) !important;
    font-family: 'Outfit', sans-serif !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Hide the " - " separator that comes from language file format '%s toode(t) - %s'
   The text node can't be targeted, but we can reformat via letter-spacing trick.
   Better fix: target the span directly and rely on template format being 0 items = hide dash */
.total-shopping-cart.cart-total-full {
    /* Remove leading dash from '0 toode(t) - €0.00' format */
    unicode-bidi: plaintext !important;
}

/* Cart item count badge */
.top_cart .shopcart-inner .total-shopping-cart .items_cart {
    background-color: #e03a3a !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 8px !important;
    left: 32px !important;
    text-align: center !important;
}

/* Cart dropdown panel */
.typeheader-25 .shopping_cart .dropdown-menu,
.shoppingcart-box {
    background: #161616 !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    color: var(--txt-secondary) !important;
}

/* Account / top links */
.typeheader-25 .header-top .top-link>li>a,
#my_account>a {
    color: var(--txt-secondary) !important;
    transition: var(--ease) !important;
}

.typeheader-25 .header-top .top-link>li>a:hover,
#my_account>a:hover {
    color: var(--gold) !important;
}

/* ============================================================
   4. NAVIGATION / MEGA MENU — header25 specific
   ============================================================ */

/* Header bottom full bar */
.typeheader-25 .header-bottom {
    background-color: #111111 !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 !important;
}

/* Kill visible backgrounds on all column wrappers inside header-bottom */
.typeheader-25 .header-bottom .menu-left,
.typeheader-25 .header-bottom .main-menu,
.typeheader-25 .header-bottom [class*="col-"],
.typeheader-25 .header-bottom .row {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================
   MEGAMENU — horizontal nav links (Avaleht, Kontaktid etc)
   ========================================================== */
.typeheader-25 .container-megamenu.horizontal ul.megamenu>li>a {
    color: var(--txt-secondary) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 14px 18px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: var(--ease) !important;
}

.typeheader-25 .container-megamenu.horizontal ul.megamenu>li>a:hover,
.typeheader-25 .container-megamenu.horizontal ul.megamenu>li.active>a,
.typeheader-25 .container-megamenu.horizontal ul.megamenu>li.menu_active>a {
    color: var(--gold) !important;
    background: transparent !important;
}

/* Kill any visible boxes around megamenu li items */
.typeheader-25 .container-megamenu.horizontal ul.megamenu>li {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Megamenu dropdown panel */
.typeheader-25 .megamenu-style-dev,
.typeheader-25 .megamenu-wrapper,
.typeheader-25 .megamenu-pattern {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Dropdown menus that appear on hover */
.typeheader-25 .container-megamenu ul.megamenu .dropdown-menu,
.typeheader-25 .dropdown-menu {
    background: #161616 !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

/* ==========================================================
   VERTICAL MEGAMENU CORE — targeting so_megamenu.css exactly
   .vertical .megamenu-wrapper has background: #fff !important
   We need equal or higher specificity to override it.
   ========================================================== */

/* The white panel container */
.typeheader-25 .container-megamenu.vertical .megamenu-wrapper,
.vertical .megamenu-wrapper,
.vertical .megamenu-pattern,
#header .vertical .megamenu-wrapper {
    background: #181818 !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
}

/* All links inside vertical megamenu — compact, no individual boxes */
.vertical ul.megamenu>li>a,
#header .vertical ul.megamenu>li>a {
    color: rgba(220, 220, 220, 0.92) !important;
    text-shadow: none !important;
    background: transparent !important;
    height: auto !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

/* Hover state — subtle, no box effect */
.vertical ul.megamenu>li>a:hover,
.vertical ul.megamenu>li.active>a,
.vertical ul.megamenu>li:hover>a,
#header .vertical ul.megamenu>li>a:hover {
    background-color: rgba(232, 200, 74, 0.1) !important;
    color: var(--gold) !important;
    padding-left: 18px !important;
}

/* li items — thin separator only, NO individual box effect */
.vertical ul.megamenu>li {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.vertical ul.megamenu>li:last-child {
    border-bottom: none !important;
}

/* Sub-menu content panel — compact */
ul.megamenu li .sub-menu .content {
    background: #1c1c1c !important;
    border: 1px solid var(--border-mid) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
    padding: 12px 16px !important;
}

/* ==========================================================
   VERTICAL CATEGORY MEGAMENU — left KATEGOORIAD panel
   ========================================================== */

/* The vertical dropdown list panel — wider for long category names */
.typeheader-25 .container-megamenu.vertical .vertical-wrapper {
    background: #181818 !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
    min-width: 270px !important;
    /* enough for longest name without wrapping */
    width: auto !important;
    overflow: visible !important;
    /* let sub-menus escape */
}

.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu {
    background: transparent !important;
    width: 100% !important;
}

/* Each category item — NO individual boxy background */
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li:last-child {
    border-bottom: none !important;
}

/* Category link — block layout, arrow absolute-positioned */
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li>a {
    color: rgba(220, 220, 220, 0.92) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 8px 32px 8px 14px !important;
    /* right padding leaves room for arrow */
    line-height: 1.4 !important;
    display: block !important;
    /* block = uniform height, no flex scatter */
    position: relative !important;
    white-space: normal !important;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
    background: transparent !important;
    text-decoration: none !important;
}

.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li>a:hover,
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.active>a {
    background: rgba(232, 200, 74, 0.1) !important;
    color: var(--gold) !important;
    padding-left: 18px !important;
}

/* Arrow › icon — absolute on the right */
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li>a .fa.fa-angle-right {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: rgba(255, 255, 255, 0.25) !important;
    font-size: 11px !important;
}

.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li>a:hover .fa.fa-angle-right {
    color: var(--gold) !important;
}

/* Hide any other .fa icons that may duplicate */
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li>a .fa:not(.fa-angle-right) {
    display: none !important;
}

/* "Rohkem kategooriaid" — fits cleanly, no overflow */
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore {
    border-bottom: none !important;
}

.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore>a {
    color: var(--gold) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 8px 14px !important;
    text-align: center !important;
    letter-spacing: 0.03em !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(232, 200, 74, 0.05) !important;
}

.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore>a:hover {
    background: rgba(232, 200, 74, 0.12) !important;
    color: var(--gold) !important;
    padding-left: 14px !important;
}

/* Hide the icon inside loadmore that causes yellow square */
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore>a .fa,
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore>a i {
    display: none !important;
}

/* ==========================================================
   RIGHT SIDE — Võrdle block in header-bottom
   ========================================================== */
.typeheader-25 .header-bottom .megamenu-style-dev .navbar-default {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.typeheader-25 .header-bottom .menu-left .megamenu-style-dev {
    background: transparent !important;
    border: none !important;
}

.typeheader-25 .header-bottom ul.megamenu>li.item-special>a {
    color: var(--txt-secondary) !important;
    background: transparent !important;
    border: none !important;
    padding: 13px 18px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: var(--ease) !important;
}

.typeheader-25 .header-bottom ul.megamenu>li.item-special>a:hover {
    color: var(--gold) !important;
}

/* Generic fallback for any remaining visible nav elements */
.navbar,
#so_megamenu_in_header,
.so-megamenu-wrapper {
    background-color: transparent !important;
    border: none !important;
}

.navbar-nav>li>a,
.so-megamenu .nav>li>a {
    color: var(--txt-secondary) !important;
    transition: var(--ease) !important;
}

/* Category button (sidebar) */
.so-category .catname,
#sidebar-cats .cat-button {
    background: var(--bg-raised) !important;
    color: var(--txt-primary) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-md) !important;
    font-weight: 600 !important;
}

/* ============================================================
   5. PRODUCT CARDS
   ============================================================ */

/* Base catalog products — Dark Card */
.product-layout,
.product-item-container.product-grid {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    padding: 16px !important;
    transition: var(--ease-out) !important;
    box-shadow: var(--shadow-card) !important;
    position: relative;
    overflow: hidden;
}

/* Explicitly unset module hardcoded white backgrounds INSIDE SO items */
.so-deals .item .product-item-container,
.so-extraslider .item .product-item-container,
.so-listing-tabs .item .product-item-container,
.so-basic-products .item .product-item-container,
.ltabs-items-container .product-item-container,
.owl2-item .product-item-container {
    background: transparent !important;
    /* the .item wrapper itself provides the dark bg */
    border: 1px solid transparent !important;
    /* hide internal borders */
    border-radius: 0 !important;
    padding: 0 !important;
    transition: var(--ease-out) !important;
    box-shadow: none !important;
    position: relative;
    overflow: visible;
}

/* Base generic hover */
.product-layout:hover,
.product-item-container.product-grid:hover {
    border-color: var(--border-gold) !important;
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-6px) !important;
}

/* Gold shimmer line on hover */
.product-item-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold-gradient);
    opacity: 0;
    transition: var(--ease);
}

.product-item-container:hover::after {
    opacity: 1;
}

/* Product image area — all SO modules */
.product-item-container .image,
.product-layout .image,
.so-deals .image,
.so-extraslider .image,
.so-listing-tabs .image,
.so-basic-products .image,
.lib-list-item-product2 .image,
.lib-products-list .image,
/* Thumbnail strip on right side */
.so-deals .image-additional,
.product-layout .image-additional,
.product-item-container .image-additional {
    background: #0e0e0e !important;
    border-radius: var(--r-md) !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border) !important;
    padding: 8px !important;
}

/* Individual thumbnail boxes */
.image-additional a,
.image-additional img,
.so-deals .image-additional a img,
.img-thumbnail,
a>.img-thumbnail {
    background: #101010 !important;
    border-color: var(--border) !important;
    border-radius: var(--r-sm) !important;
}

/* Thumbnail strip items — each small box */
.so-deals .image-additional>a,
.product-layout .image-additional>a {
    display: block !important;
    background: #101010 !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    padding: 4px !important;
    margin-bottom: 4px !important;
    overflow: hidden !important;
}


/* Blend white-bg product photos into dark cards */
.product-item-container .image img,
.product-layout .image img,
.so-deals .image img,
.so-extraslider .image img,
.so-listing-tabs .image img,
.so-basic-products .image img {
    mix-blend-mode: normal !important;
    transition: transform 0.4s ease !important;
    max-height: 220px;
    object-fit: contain;
}

.product-item-container:hover .image img,
.so-deals .item:hover .image img,
.so-extraslider .item:hover .image img {
    transform: scale(1.06) !important;
    mix-blend-mode: normal !important;
}

/* Product titles — comprehensive selector covering ALL SO modules */
.product-item-container .caption h4 a,
.product-item-container .item-title a,
.product-name a,
/* SO Deals / Extraslider / Listing Tabs */
.so-deals .item-title a,
.so-deals .product-title a,
.so-extraslider .item-title a,
.so-extraslider .product-title a,
.so-listing-tabs .item-title a,
.so-listing-tabs .product-title a,
.so-basic-products .item-title a,
.ltabs-items-container .item-title a,
/* Generic fallbacks */
.item-title a,
.product-title a,
.caption h4 a,
.caption .title a,
.item-name a {
    color: #e8e8e8 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.45 !important;
    display: block !important;
    margin-top: 10px !important;
    transition: var(--ease) !important;
    text-shadow: none !important;
}

.product-item-container .caption h4 a:hover,
.item-title a:hover,
.product-title a:hover,
.caption h4 a:hover {
    color: var(--gold) !important;
}

/* Price */
.price,
.price-new,
.price-regular {
    color: var(--gold-light) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: -0.02em;
}

.price-old,
.price-tax {
    color: var(--txt-muted) !important;
    font-size: 13px !important;
    text-decoration: line-through;
    font-weight: 400;
}

.price-special {
    color: #ff7070 !important;
    font-weight: 700;
}

/* Rating stars */
.rating .fa-star {
    color: var(--gold) !important;
}

.rating .fa-star-o {
    color: #333 !important;
}

/* Product labels */
.label-new,
.label-hit,
.label-stock,
.label-product,
.label-percent {
    background: var(--gold-gradient) !important;
    color: var(--txt-on-gold) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    padding: 3px 10px !important;
}

.label-sale {
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
}

/* Button group whitebox fix — the white box is likely a visible div inside the group */
.product-item-container .button-group,
.so-deals .button-group,
.so-extraslider .button-group,
.so-listing-tabs .button-group,
.product-layout .button-group,
.product-item-container .item-bottom,
.product-item-container .item-info,
.product-item-container .right-block,
.so-basic-products .item-info {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 0 !important;
    margin-top: 10px !important;
    display: flex !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Kill the white box that appears below the button group with UNDEFEATABLE SPECIFICITY */
body div.so-extraslider div.button-group:not(#a):not(#b):not(#c):not(#d):not(#e),
body div.so-deals div.button-group:not(#a):not(#b):not(#c):not(#d):not(#e),
body div.product-thumb div.button-group:not(#a):not(#b):not(#c):not(#d):not(#e),
body div.so-extraslider div.ds-item:not(#a):not(#b):not(#c):not(#d):not(#e),
body div.so-deals div.ds-item:not(#a):not(#b):not(#c):not(#d):not(#e) {
    background-color: transparent !important;
    background: transparent !important;
}

.product-item-container .button-group>button,
.product-item-container .button-group>a,
.so-deals .button-group>button,
.so-deals .button-group>a,
.so-extraslider .button-group>button,
.so-extraslider .button-group>a,
.btn-button,
.wishlist,
.compare,
.addToCart {
    background: #252525 !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--r-sm) !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    transition: var(--ease) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

/* Force icons inside the buttons to be white */
.btn-button i::before,
.wishlist i::before,
.compare i::before,
.addToCart i::before,
.btn-button i,
.wishlist i,
.compare i,
.addToCart i {
    color: #fff !important;
}

/* The main 'Add to Cart' / 'Lisa ostukorvi' button — explicitly gold */
.so-deals .button-group>button:first-child,
.so-extraslider .button-group>button:first-child,
.product-item-container .button-group>button:first-child,
.addToCart,
.product-item-container .button-group .addToCart {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    background: var(--gold-gradient) !important;
    color: #111 !important;
    border: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0 16px !important;
    border-radius: 30px !important;
}

.addToCart span,
.product-item-container .button-group .addToCart span {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.product-item-container .button-group>button:hover,
.product-item-container .button-group>a:hover,
.btn-button:hover,
.wishlist:hover,
.compare:hover,
.addToCart:hover {
    background: var(--gold-gradient) !important;
    color: #111 !important;
    border-color: transparent !important;
    transform: scale(1.08) !important;
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.btn-primary,
.so-loadmore,
.btn-checkout,
input[type="submit"],
button[type="submit"] {
    background: var(--gold-gradient) !important;
    color: var(--txt-on-gold) !important;
    border: none !important;
    border-radius: var(--r-sm) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    padding: 11px 26px !important;
    cursor: pointer !important;
    transition: var(--ease) !important;
    box-shadow: 0 4px 16px rgba(232, 200, 74, 0.3) !important;
}

.btn-primary:hover,
.cart-total-full:hover,
.so-loadmore:hover,
.btn-checkout:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(232, 200, 74, 0.45) !important;
}

.btn-default {
    background: var(--bg-raised) !important;
    color: var(--txt-primary) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-sm) !important;
    transition: var(--ease) !important;
}

.btn-default:hover {
    border-color: var(--gold) !important;
    color: var(--gold) !important;
}

/* ============================================================
   7. FORMS & INPUTS
   ============================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background: var(--bg-input) !important;
    color: var(--txt-primary) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-sm) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: var(--ease) !important;
    box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 3px var(--gold-dim) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--txt-muted);
}

label {
    color: var(--txt-secondary) !important;
    font-size: 13px;
    font-weight: 500;
}

/* ============================================================
   8. HOMEPAGE MODULES
   ============================================================ */

/* Module wrappers — transparent */
.module,
.box,
.modcontent,
.so-deals,
.so-extraslider,
.so-listing-tabs,
.so-basic-products,
.so-brand,
.so-category-slider,
.extraslider-inner,
.ltabs-items-container {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Module title - Premium sleek design */
.modtitle,
.module h3.modtitle,
.modtitle h3,
.module-title,
.so-module-title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 12px 0 !important;
    margin: 0 0 25px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
}

.modtitle h3 span,
.modtitle span {
    background: transparent !important;
    color: #fff !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* Eliminate native theme circles/decorations on titles */
.modtitle::before,
.modtitle::after,
.modtitle h3::before,
.modtitle span::before,
.modtitle span::after {
    display: none !important;
}

/* Premium Gold Accent Underline */
.modtitle::after,
.module h3.modtitle::after,
.modtitle h3::after,
.so-module-title::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -1px !important;
    height: 2px !important;
    width: 80px !important;
    background: var(--gold-gradient) !important;
    z-index: 1 !important;
}

/* Slider arrow buttons - Premium rounded box */
.slick-prev,
.slick-next,
.owl-prev,
.owl-next,
.owl2-prev,
.owl2-next {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--r-sm) !important;
    color: var(--txt-primary) !important;
    width: 36px !important;
    height: 36px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10 !important;
    font-size: 0 !important;
    /* hide custom native text */
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.slick-prev::before,
.owl-prev::before,
.owl2-prev::before {
    content: "\f104" !important;
    font-family: 'FontAwesome' !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--txt-primary) !important;
}

.slick-next::before,
.owl-next::before,
.owl2-next::before {
    content: "\f105" !important;
    font-family: 'FontAwesome' !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: var(--txt-primary) !important;
}

.slick-prev:hover,
.slick-next:hover,
.owl-prev:hover,
.owl-next:hover,
.owl2-prev:hover,
.owl2-next:hover {
    background: var(--gold-gradient) !important;
    border-color: transparent !important;
    color: #111 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(220, 180, 60, 0.2) !important;
}

.slick-prev:hover::before,
.slick-next:hover::before,
.owl-prev:hover::before,
.owl-next:hover::before,
.owl2-prev:hover::before,
.owl2-next:hover::before {
    color: #111 !important;
}

/* Modtitle arrow container push (prevent overlap with title) */
.module {
    position: relative !important;
}

/* Base general arrows (grouped top right) */
.owl2-controls,
.owl2-nav,
.owl-nav {
    position: absolute !important;
    top: 5px !important;
    right: 0 !important;
    left: auto !important;
    width: auto !important;
    display: inline-flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    background: transparent !important;
    z-index: 100 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide arrows explicitly on specific modules (Categories, Brands, Listing Tabs) */
body div.so-categories span.slick-arrow:not(#z),
body div.so-category-slider span.slick-arrow:not(#z),
body div.category-slider-inner span.slick-arrow:not(#z),
body div.so-brand span.slick-arrow:not(#z),
body div.so-listing-tabs span.slick-arrow:not(#z),
body div.so-basic-products span.slick-arrow:not(#z),
body div.so-categories div.owl2-controls:not(#z),
body div.so-brand div.owl2-controls:not(#z),
body div.so-listing-tabs div.owl2-controls:not(#z),
body div.so-basic-products div.owl2-controls:not(#z) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* SO DEALS & EXTRASLIDER - Unbreakable Vertical Arrow Positioning */
body div.so-deals-inner span.slick-prev:not(#z):not(#y):not(#x),
body div.so-deals-inner div.owl2-prev:not(#z):not(#y):not(#x),
body div.extraslider-inner span.slick-prev:not(#z):not(#y):not(#x),
body div.extraslider-inner div.owl2-prev:not(#z):not(#y):not(#x),
body div.so-deals span.slick-prev:not(#z):not(#y):not(#x),
body div.so-extraslider span.slick-prev:not(#z):not(#y):not(#x) {
    position: absolute !important;
    top: -55px !important;
    /* Move higher up near the modtitle area */
    right: 48px !important;
    /* Offset from the next button */
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 999 !important;
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body div.so-deals-inner span.slick-next:not(#z):not(#y):not(#x),
body div.so-deals-inner div.owl2-next:not(#z):not(#y):not(#x),
body div.extraslider-inner span.slick-next:not(#z):not(#y):not(#x),
body div.extraslider-inner div.owl2-next:not(#z):not(#y):not(#x),
body div.so-deals span.slick-next:not(#z):not(#y):not(#x),
body div.so-extraslider span.slick-next:not(#z):not(#y):not(#x) {
    position: absolute !important;
    top: -55px !important;
    right: 5px !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 999 !important;
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body div.so-deals-inner span.slick-prev:not(#a):not(#b)::before,
body div.so-deals span.slick-prev:not(#a):not(#b)::before,
body div.so-extraslider span.slick-prev:not(#a):not(#b)::before {
    content: "\f106" !important;
    font-size: 24px !important;
}

/* Up */

body div.so-deals-inner span.slick-next:not(#a):not(#b)::before,
body div.so-deals span.slick-next:not(#a):not(#b)::before,
body div.so-extraslider span.slick-next:not(#a):not(#b)::before {
    content: "\f107" !important;
    font-size: 24px !important;
}

/* Down */

/* GRID ALIGNMENT - Equal Heights */
.so-listing-tabs .ltabs-items-inner,
.so-basic-products .item-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.so-listing-tabs .ltabs-item,
.so-basic-products .item,
div.product-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}

.so-listing-tabs .product-item-container,
.so-basic-products .product-item-container,
.product-layout .product-item-container {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: 100% !important;
}

.so-listing-tabs .caption,
.so-basic-products .caption,
.product-layout .caption {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

.so-listing-tabs .button-group,
.so-basic-products .button-group,
.product-layout .button-group {
    margin-top: auto !important;
    /* Pushes buttons strictly to the bottom edge */
}

/* Ensure the title doesn't slip under the arrows */
.modtitle,
.so-module-title,
.module-title {
    max-width: calc(100% - 80px) !important;
}

/* Listing tabs */
.ltabs-tabs-container .ltabs-tabs li {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    color: var(--txt-secondary) !important;
    margin-right: 8px !important;
    transition: var(--ease) !important;
}

.ltabs-tabs-container .ltabs-tabs li.tab-sel,
.ltabs-tabs-container .ltabs-tabs li:hover {
    background: var(--gold-gradient) !important;
    border-color: transparent !important;
    color: var(--txt-on-gold) !important;
}

/* Slick slider base (no bg) */
.slick-slider,
.slick-list,
.slick-track,
.slick-slide {
    background: transparent !important;
}

/* Items inside SO modules */
.so-deals .item,
.so-deals .ds-item,
.so-extraslider .item,
.so-listing-tabs .item,
.so-basic-products .item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-lg) !important;
    padding: 14px !important;
    transition: var(--ease-out) !important;
}

.so-deals .item:hover,
.so-extraslider .item:hover {
    border-color: var(--border-gold) !important;
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-4px) !important;
}


/* Inner wrappers must be transparent */
.item-inner,
.item-wrap,
.ds-item-inner,
.ltabs-item-inner {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* ========================================================
   SO CATEGORY SLIDER — .cat-wrap > .cat-img + .cat-title
   ======================================================== */
.so-category-slider .cat-wrap,
.so-category .cat-wrap,
[class*="so-category"] .cat-wrap {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 16px 12px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
}

.so-category-slider .cat-wrap:hover,
.so-category .cat-wrap:hover,
[class*="so-category"] .cat-wrap:hover {
    border-color: rgba(232, 200, 74, 0.4) !important;
    transform: translateY(-3px) !important;
}

.so-category-slider .cat-img,
.so-category .cat-img,
[class*="so-category"] .cat-img {
    background: transparent !important;
    border: none !important;
}

.so-category-slider .cat-img img,
.so-category .cat-img img,
[class*="so-category"] .cat-img img {
    mix-blend-mode: normal !important;
    filter: brightness(0.9) contrast(1.1) !important;
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
}

.so-category-slider .cat-wrap:hover .cat-img img,
.so-category .cat-wrap:hover .cat-img img {
    mix-blend-mode: normal !important;
    filter: none !important;
}

.so-category-slider .cat-title a,
.so-category .cat-title a,
[class*="so-category"] .cat-title a {
    color: #d0d0d0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    margin-top: 4px !important;
}

.so-category-slider .cat-title a:hover,
.so-category .cat-title a:hover {
    color: var(--gold) !important;
}

/* ========================================================
   PRODUCT CARD — left-block / right-block structure
   ======================================================== */
.product-item-container .left-block {
    background: #0e0e0e !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
}

.product-item-container .left-block img,
.product-item-container .left-block a img {
    mix-blend-mode: normal !important;
    transition: transform 0.4s ease !important;
    object-fit: contain !important;
    max-height: 200px !important;
}

.product-item-container:hover .left-block img {
    transform: scale(1.06) !important;
    mix-blend-mode: normal !important;
}

.product-item-container .right-block {
    background: transparent !important;
}

/* The WHITE BOX under product card — kill it */
.product-item-container .button-group,
.so-extraslider .button-group,
.so-deals .button-group,
.so-listing-tabs .button-group {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
    padding: 10px 0 0 !important;
    margin-top: 10px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    align-items: center !important;
}

/* All buttons inside group: dark ghost style */
.product-item-container .button-group button,
.product-item-container .button-group a,
.so-extraslider .button-group button,
.so-extraslider .button-group a,
.so-deals .button-group button,
.so-deals .button-group a {
    background: #222 !important;
    background-color: #222 !important;
    color: #888 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

/* Gold cart button — the FIRST button (Add to Cart / Lisa ostukorvi) */
.product-item-container .button-group button.addToCart,
.product-item-container .button-group button:first-child,
.so-extraslider .button-group button.addToCart,
.so-extraslider .button-group button:first-child,
.so-deals .button-group button.addToCart,
.so-deals .button-group button:first-child {
    flex: 1 1 auto !important;
    width: auto !important;
    background: linear-gradient(135deg, #f5d760, #e8c84a) !important;
    color: #111 !important;
    border: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

.product-item-container .button-group button:hover,
.product-item-container .button-group a:hover,
.so-extraslider .button-group button:hover,
.so-deals .button-group button:hover {
    background: linear-gradient(135deg, #f5d760, #e8c84a) !important;
    color: #111 !important;
    border-color: transparent !important;
}

/* Brand logo card — dark version, logos blended */
.so-brand .item-wrap,
.item-brand,
.box-brand {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--r-md) !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--ease) !important;
}

.so-brand .item-wrap:hover,
.item-brand:hover {
    border-color: var(--border-gold) !important;
    transform: scale(1.03) !important;
}

/* ALL images inside brand slider — blend white away */
.so-brand img,
.so-brand .item-wrap img,
.item-brand img,
.box-brand img {
    mix-blend-mode: normal !important;
    filter: brightness(0.95) contrast(1.05) !important;
    max-height: 60px !important;
    width: auto !important;
    object-fit: contain !important;
}

.so-brand .item-wrap:hover img,
.item-brand:hover img {
    mix-blend-mode: normal !important;
    filter: none !important;
}

/* =============================================================
   POLICY / INFO BAR — exact DOM: .banner-policy > .policy > .item-inner > i + a
   ============================================================= */

/* The outer module container */
.policy-detail {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Each policy block */
.banner-policy .policy,
.policy-detail .policy,
.footer-top .block-policy .item:not(#z) {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
}

/* Inner wrapper — make it inherit the flex layout */
.banner-policy .policy .item-inner,
.policy-detail .policy .item-inner,
.footer-top .block-policy .item .item-inner:not(#z) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    overflow: visible !important;
}

/* The Link inside the footer policy - this is where the text and icon usually live */
.footer-top .block-policy .item .item-inner a:not(#z) {
    position: relative !important;
    display: inline-block !important;
    padding-left: 45px !important;
    /* Huge space for the icon */
    color: #f0f0f0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 32px !important;
    /* Match icon height */
    text-decoration: none !important;
}

/* Force the icon (::before or actual element) to stay in its lane */
.footer-top .block-policy .item .item-inner a:not(#z)::before,
.footer-top .block-policy .item .item-inner i,
.footer-top .block-policy .item .item-inner .fa,
.footer-top .block-policy .item .item-inner svg,
.footer-top .block-policy .item .item-inner img {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--gold) !important;
}

/* Hide ALL possible slider controls in the footer policy bar */
.footer-top .block-policy .owl2-controls,
.footer-top .block-policy .owl2-nav,
.footer-top .block-policy .owl2-dots,
.footer-top .block-policy .owl-nav,
.footer-top .block-policy .owl-dots {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* ============================================================
   9. STICKY RIGHT MENU — precise class targeting
   ============================================================ */
.sticky-right {
    background: rgba(18, 18, 18, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 12px 0 0 12px !important;
    border: 1px solid var(--border-mid) !important;
    border-right: none !important;
    padding: 6px 2px !important;
}

/* Override ALL specific sticky classes the theme uses */
.sticky-right li a,
.sticky-right li>a,
.sticky-categories,
.sticky-mycart,
.sticky-myaccount,
.sticky-mysearch,
.sticky-recent,
.sticky-compare {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--txt-secondary) !important;
    border: none !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    margin: 3px auto !important;
    transition: var(--ease) !important;
    font-size: 18px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.sticky-right li a:hover,
.sticky-categories:hover,
.sticky-mycart:hover,
.sticky-myaccount:hover,
.sticky-mysearch:hover,
.sticky-recent:hover,
.sticky-compare:hover {
    background: var(--gold-dim) !important;
    background-color: var(--gold-dim) !important;
    color: var(--gold) !important;
    transform: translateX(-3px) !important;
}

/* Icons inside sticky buttons */
.sticky-categories i,
.sticky-mycart i,
.sticky-myaccount i,
.sticky-mysearch i,
.sticky-recent i,
.sticky-compare i,
.sticky-right li a i {
    color: inherit !important;
    background: transparent !important;
    font-size: 18px !important;
    width: auto !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
    position: static !important;
}

/* Cart count badge on sticky */
.sticky-mycart .count,
.sticky-right .count {
    background: var(--gold-gradient) !important;
    color: var(--txt-on-gold) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
}

/* ============================================================
   10. CATEGORY / PRODUCT LISTING PAGE
   ============================================================ */
.so-filter-heading {
    background: var(--bg-card) !important;
    color: var(--txt-primary) !important;
    border-radius: var(--r-md) !important;
    padding: 12px 16px !important;
    font-weight: 600 !important;
    border: 1px solid var(--border) !important;
}

.so-filter-option {
    background: transparent !important;
    color: var(--txt-secondary) !important;
    border-color: var(--border) !important;
}

.so-filter-option input[type="checkbox"],
.so-filter-option input[type="radio"] {
    accent-color: var(--gold);
}

.list-group-item {
    background: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--txt-secondary) !important;
}

.list-group-item.active,
.list-group-item:hover {
    background: var(--gold-dim) !important;
    color: var(--gold) !important;
    border-color: var(--border-gold) !important;
}

/* Breadcrumb */
.breadcrumb {
    background: transparent !important;
    padding: 8px 0 !important;
}

.breadcrumb li a {
    color: var(--txt-muted) !important;
    font-size: 12px;
}

.breadcrumb li a:hover {
    color: var(--gold) !important;
}

.breadcrumb>.active {
    color: var(--txt-secondary) !important;
    font-size: 12px;
}

.breadcrumb-arrow {
    color: var(--txt-muted) !important;
}

/* Sort / view mode controls */
.form-group label {
    color: var(--txt-secondary) !important;
}

/* ============================================================
   11. PRODUCT DETAIL PAGE
   ============================================================ */
.product-view {
    background: transparent !important;
}

.title-product h1 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--txt-primary) !important;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.product-price-detail .price,
#price-regular,
#price-special,
.product-view .price {
    font-size: 28px !important;
    color: var(--gold-light) !important;
    font-weight: 800 !important;
}

.btn-cart,
#button-cart {
    background: var(--gold-gradient) !important;
    color: var(--txt-on-gold) !important;
    border: none !important;
    border-radius: var(--r-md) !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: 'Outfit', sans-serif !important;
    letter-spacing: 0.04em !important;
    transition: var(--ease) !important;
    box-shadow: 0 6px 20px rgba(232, 200, 74, 0.35) !important;
}

.btn-cart:hover,
#button-cart:hover {
    opacity: 0.88 !important;
    transform: translateY(-2px) !important;
}

/* Product tabs */
.nav-tabs>li>a {
    background: transparent !important;
    color: var(--txt-secondary) !important;
    border-color: var(--border) !important;
    border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
    transition: var(--ease) !important;
}

.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
    background: var(--bg-card) !important;
    color: var(--gold) !important;
    border-color: var(--border-gold) var(--border-gold) transparent !important;
}

.tab-content {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 var(--r-md) var(--r-md) var(--r-md) !important;
    padding: 24px !important;
    color: var(--txt-secondary) !important;
}

/* Spec table */
.product-property-list {
    background: var(--bg-card) !important;
    border-radius: var(--r-md) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden;
}

.product-property-list tr {
    border-bottom: 1px solid var(--border) !important;
}

.product-property-list tr:last-child {
    border-bottom: none !important;
}

.product-property-list th {
    background: var(--bg-raised) !important;
    color: var(--gold) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 14px 18px !important;
    width: 35%;
}

.product-property-list td {
    color: var(--txt-primary) !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
}

/* Gallery thumbnails */
.product-card__gallery2 .item-img {
    background: var(--bg-raised) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    padding: 6px !important;
    transition: var(--ease) !important;
}

.product-card__gallery2 .item-img.thumb-active {
    border-color: var(--gold) !important;
}

/* ============================================================
   12. MODAL & QUICKVIEW
   ============================================================ */
.modal-content {
    background: #141414 !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-xl) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.9) !important;
    color: var(--txt-secondary) !important;
}

.modal-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
}

.modal-title {
    color: var(--txt-primary) !important;
    font-weight: 700 !important;
}

.modal-footer {
    background: transparent !important;
    border-top: 1px solid var(--border) !important;
}

.close {
    color: var(--txt-muted) !important;
    opacity: 1 !important;
    font-size: 22px !important;
    transition: var(--ease) !important;
}

.close:hover {
    color: var(--gold) !important;
}

.modal-backdrop {
    background: rgba(0, 0, 0, 0.85) !important;
}

/* ============================================================
   13. AUTOCOMPLETE / SEARCH RESULTS
   ============================================================ */
.autosearch-results {
    background: #161616 !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-md) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important;
}

.autosearch-results .product-name a {
    color: var(--txt-primary) !important;
}

.autosearch-results .price {
    color: var(--gold-light) !important;
    font-size: 14px !important;
}

.autosearch-results li:hover {
    background: var(--gold-dim) !important;
}

/* ============================================================
   14. CART PAGE
   ============================================================ */
.table>thead>tr>th {
    background: var(--bg-raised) !important;
    color: var(--txt-secondary) !important;
    border-color: var(--border) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 14px !important;
}

.table>tbody>tr>td {
    background: var(--bg-card) !important;
    color: var(--txt-primary) !important;
    border-color: var(--border) !important;
    vertical-align: middle !important;
    padding: 14px !important;
}

.table-bordered {
    border-color: var(--border) !important;
}

/* ============================================================
   15. FOOTER
   ============================================================ */
#footer,
.footer-top,
.footer-main,
.footer-bottom,
.footer-container {
    background: #090909 !important;
    border-top: 1px solid var(--border) !important;
    color: var(--txt-muted) !important;
}

.footer-main {
    padding: 50px 0 !important;
}

.footer-links h5,
.footer-links .footer-title {
    color: var(--txt-primary) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 18px !important;
}

.footer-links ul li a {
    color: var(--txt-muted) !important;
    font-size: 13px !important;
    transition: var(--ease) !important;
}

.footer-links ul li a:hover {
    color: var(--gold) !important;
    padding-left: 6px !important;
}

.footer-bottom {
    border-top: 1px solid var(--border) !important;
    padding: 14px 0 !important;
    font-size: 12px !important;
}

/* Social icons */
.socials li a {
    background: var(--bg-raised) !important;
    color: var(--txt-secondary) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: var(--ease) !important;
    font-size: 14px !important;
}

.socials li a:hover {
    background: var(--gold-gradient) !important;
    color: var(--txt-on-gold) !important;
    border-color: transparent !important;
    transform: translateY(-3px) !important;
}

/* Newsletter */
.newsletter-form {
    display: flex !important;
    gap: 8px !important;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
    flex: 1 !important;
    background: #111 !important;
    border: 1px solid var(--border-mid) !important;
}

/* ============================================================
   16. ALERTS & NOTICES
   ============================================================ */
.alert-success {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
    border-radius: var(--r-md) !important;
}

.alert-danger,
.alert-warning {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
    border-radius: var(--r-md) !important;
}

.alert-info {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
    border-radius: var(--r-md) !important;
}

/* ============================================================
   17. MISC OVERRIDES
   ============================================================ */

/* Active state gold highlight */
.active>a,
.current>a {
    color: var(--gold) !important;
}

/* Pagination */
.pagination>li>a {
    background: var(--bg-raised) !important;
    color: var(--txt-secondary) !important;
    border-color: var(--border) !important;
    transition: var(--ease) !important;
}

.pagination>li>a:hover,
.pagination>li.active>a {
    background: var(--gold-gradient) !important;
    color: var(--txt-on-gold) !important;
    border-color: transparent !important;
}

/* Tooltips */
.tooltip-inner {
    background: var(--bg-raised) !important;
    color: var(--txt-primary) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-sm) !important;
}

/* Inline style white background catch */
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background:#fff"],
[style*="background: #fff"] {
    background-color: var(--bg-card) !important;
}

/* ============================================================
   18. CHOSEN.JS DARK OVERRIDE — категорийный дропдаун в поиске
   ============================================================ */

/* Container reset */
.chosen-container,
.chosen-container-single,
.chosen-container-active {
    font-size: 14px !important;
}

/* The button/trigger that shows selected value */
.chosen-container-single .chosen-single,
.chosen-container-single .chosen-single:hover,
.chosen-container-active .chosen-single {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--txt-secondary) !important;
    padding: 0 16px !important;
    height: 44px !important;
    line-height: 44px !important;
}

.chosen-container-single .chosen-single span {
    color: var(--txt-secondary) !important;
    font-size: 13px !important;
}

/* Hide the default arrow div */
.chosen-container-single .chosen-single div {
    display: none !important;
}

/* The dropdown panel that opens */
.chosen-container .chosen-drop,
.chosen-container-single .chosen-drop {
    background: #1a1a1a !important;
    border: 1px solid var(--border-mid) !important;
    border-top: none !important;
    border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7) !important;
    top: 100% !important;
}

/* Search input inside dropdown */
.chosen-container .chosen-search input {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-mid) !important;
    color: var(--txt-primary) !important;
    border-radius: var(--r-sm) !important;
    padding: 6px 10px !important;
    box-shadow: none !important;
}

/* The list of options */
.chosen-container .chosen-results {
    background: transparent !important;
    color: var(--txt-secondary) !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

.chosen-container .chosen-results li {
    color: var(--txt-secondary) !important;
    background: transparent !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.chosen-container .chosen-results li.highlighted {
    background: var(--gold-dim) !important;
    color: var(--gold) !important;
}

.chosen-container .chosen-results li.result-selected {
    color: var(--gold) !important;
    background: rgba(232, 200, 74, 0.08) !important;
    font-weight: 600 !important;
}

.chosen-container .chosen-results li.disabled-result {
    color: var(--txt-muted) !important;
}

/* Group headers */
.chosen-container .chosen-results li.group-result {
    color: var(--txt-muted) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    padding: 10px 16px 4px !important;
}

/* ============================================================
   19. VERTICAL MEGAMENU EXTRA FIXES
   ============================================================ */

/* Кнопка Kategooriad — hambuger toggle */
.megamenuToogle-wrapper,
.megamenuToogle-pattern {
    background: transparent !important;
    border: none !important;
}

.megamenuToogle-pattern .container {
    background: var(--bg-raised) !important;
    color: var(--txt-primary) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-sm) !important;
    text-shadow: none !important;
}

/* Hamburger lines inside button */
.megamenuToogle-pattern .container>div span {
    background-color: var(--txt-primary) !important;
}

/* The vertical dropdown panel */
.vertical-wrapper {
    background: #1a1a1a !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: 0 0 var(--r-md) var(--r-md) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
}

.vertical-wrapper ul.megamenu {
    background: transparent !important;
    border: none !important;
}

.vertical-wrapper ul.megamenu>li {
    border-bottom: 1px solid var(--border) !important;
    background: transparent !important;
    padding-left: 0 !important;
}

.vertical-wrapper ul.megamenu>li:last-child {
    border-bottom: none !important;
}

.vertical-wrapper ul.megamenu>li>a,
.vertical-wrapper ul.megamenu>li>a.clearfix {
    color: var(--txt-secondary) !important;
    background: transparent !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: var(--ease) !important;
}

.vertical-wrapper ul.megamenu>li>a:hover,
.vertical-wrapper ul.megamenu>li.active>a {
    background: var(--gold-dim) !important;
    color: var(--gold) !important;
}

/* Arrow icon pointing right */
.vertical-wrapper ul.megamenu>li>a>.fa,
.vertical-wrapper ul.megamenu>li>a>span.fa {
    color: var(--txt-muted) !important;
    font-size: 11px !important;
}

.vertical-wrapper ul.megamenu>li>a:hover>.fa {
    color: var(--gold) !important;
}

/* "Sirvima kГµiki kategooriaid" row */
.vertical-wrapper ul.megamenu>li.loadmore {
    padding-left: 0 !important;
}

.vertical-wrapper ul.megamenu>li.loadmore>a {
    color: var(--gold) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    justify-content: center !important;
    letter-spacing: 0.04em !important;
}

/* Sub-dropdown panels from vertical menu */
.vertical-wrapper .dropdown-menu {
    background: #1e1e1e !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

.vertical-wrapper .dropdown-menu li a {
    color: var(--txt-secondary) !important;
    background: transparent !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    transition: var(--ease) !important;
}

.vertical-wrapper .dropdown-menu li a:hover {
    background: var(--gold-dim) !important;
    color: var(--gold) !important;
}

/* ============================================================
   20. MEGAMENU SUB-PANELS — 3rd level & content areas
   ============================================================ */

/* 3rd level flyout panel (Web Cameras etc.) — so_megamenu.css line 338 */
ul.megamenu li .sub-menu .content .hover-menu .menu ul ul,
.megamenu .sub-menu .content .hover-menu .menu ul ul {
    background: #1e1e1e !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important;
}

/* Arrow connector color (was #e6e6e6 white border) */
ul.megamenu li .sub-menu .content .hover-menu .menu ul ul:before {
    border-right-color: var(--border-mid) !important;
}

ul.megamenu li .sub-menu .content .hover-menu .menu ul ul:after {
    border-right-color: #1e1e1e !important;
}

/* Links inside 3rd level flyout */
ul.megamenu li .sub-menu .content .hover-menu .menu ul ul li a,
.megamenu .sub-menu .content .hover-menu .menu ul ul li a {
    color: var(--txt-secondary) !important;
    background: transparent !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    transition: var(--ease) !important;
}

ul.megamenu li .sub-menu .content .hover-menu .menu ul ul li a:hover {
    background: var(--gold-dim) !important;
    color: var(--gold) !important;
}

/* The horizontal megamenu sub-menu content panel (2nd level) */
ul.megamenu li .sub-menu .content {
    background: #1c1c1c !important;
    border: 1px solid var(--border-mid) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85) !important;
    padding: 10px 14px !important;
}

/* 2nd level list items — compact */
ul.megamenu li .sub-menu .content .hover-menu .menu ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    background: transparent !important;
}

ul.megamenu li .sub-menu .content .hover-menu .menu ul li:last-child {
    border-bottom: none !important;
}

/* 2nd level links — readable on dark */
ul.megamenu li .sub-menu .content .hover-menu .menu ul li a,
ul.megamenu li .sub-menu .content .hover-menu .menu ul>li>a {
    color: rgba(210, 210, 210, 0.9) !important;
    background: transparent !important;
    font-size: 13px !important;
    padding: 7px 12px !important;
    display: block !important;
    transition: color 0.15s ease, background 0.15s ease !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

ul.megamenu li .sub-menu .content .hover-menu .menu ul li a:hover {
    color: var(--gold) !important;
    background: rgba(232, 200, 74, 0.08) !important;
    padding-left: 16px !important;
}

/* Active/selected link */
ul.megamenu li .sub-menu .content .hover-menu .menu ul li.active>a,
ul.megamenu li .sub-menu .content .hover-menu .menu ul li.menu_active>a {
    color: var(--gold) !important;
    font-weight: 600 !important;
}

/* Section title (e.g. category name heading) */
ul.megamenu .title-submenu {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0 0 5px 0 !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    float: none !important;
}

/* Hover-menu main category link (top of column) */
ul.megamenu li .sub-menu .content .hover-menu a.main-menu {
    color: rgba(220, 220, 220, 0.95) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: block !important;
    padding: 4px 0 8px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 4px !important;
}

ul.megamenu li .sub-menu .content .hover-menu a.main-menu:hover {
    color: var(--gold) !important;
}

ul.megamenu li .sub-menu .content .hover-menu a.main-menu:before {
    display: none !important;
}

/* Static menu links */
ul.megamenu li .sub-menu .content .static-menu a,
ul.megamenu li .sub-menu .content .static-menu a.main-menu {
    color: rgba(210, 210, 210, 0.9) !important;
    background: transparent !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    display: block !important;
    transition: color 0.15s ease !important;
}

ul.megamenu li .sub-menu .content .static-menu a:hover {
    color: var(--gold) !important;
}

/* Border between panels/columns */
ul.megamenu .sub-menu .content>.border {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    margin: 6px 0 !important;
}

/* ============================================================
   EOF
   ============================================================ */

/* ============================================================
   21. MEGAMENU LAYOUT FIXES — 2nd level width & 3rd level position
   ============================================================ */

/* 2nd level panel — width по самой длинной надписи */
/* 2nd level panel — width по самой длинной надписи — Эстонские слова очень длинные! */
.vertical ul.megamenu>li>.sub-menu>.content,
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li>.sub-menu>.content {
    width: auto !important;
    min-width: 280px !important;
    max-width: 400px !important;
    white-space: normal !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}


/* 2nd level list items and links — readable on dark */
ul.megamenu li .sub-menu .content .hover-menu .menu ul li {
    background: transparent !important;
    white-space: normal !important;
}

ul.megamenu li .sub-menu .content .hover-menu .menu ul li a,
ul.megamenu li .sub-menu .content .hover-menu .menu ul>li>a {
    padding: 8px 14px !important;
    line-height: 1.4 !important;
    display: block !important;
    color: rgba(220, 220, 220, 0.95) !important;
    transition: all 0.2s ease !important;
}

ul.megamenu li .sub-menu .content .hover-menu .menu ul li a:hover {
    color: var(--gold) !important;
    background: rgba(232, 200, 74, 0.08) !important;
    padding-left: 18px !important;
}

/* 3rd level position:
   position:relative on parent li — left:100% is then relative to li width */
ul.megamenu li .sub-menu .content .hover-menu .menu ul>li {
    position: relative !important;
}

/* 3rd level flyout */
ul.megamenu li .sub-menu .content .hover-menu .menu ul>li>ul {
    display: none !important;
    position: absolute !important;
    left: 100% !important;
    top: -1px !important;
    width: auto !important;
    min-width: 180px !important;
    max-width: 320px !important;
    white-space: normal !important;
    z-index: 99999 !important;
    background: #1a1a1a !important;
    border: 1px solid var(--border-mid) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    padding: 8px 0 !important;
}

ul.megamenu li .sub-menu .content .hover-menu .menu ul>li:hover>ul {
    display: block !important;
}

/* Generic: vertical sub-menu appears to the right of category list */
.vertical ul.megamenu>li>.sub-menu {
    left: 100% !important;
    top: 0 !important;
    z-index: 9998 !important;
    width: auto !important;
}

/* Ensure vertical wrapper doesn't clip sub-menus */
.typeheader-25 .container-megamenu.vertical .vertical-wrapper,
.vertical .megamenu-wrapper {
    overflow: visible !important;
}

/* loadmore "Rohkem kategooriaid" — styling fix */
.vertical ul.megamenu>li.loadmore,
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore {
    overflow: hidden !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(232, 200, 74, 0.03) !important;
    margin-top: 6px !important;
}

.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore>a:not(#z) {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
    padding: 14px 14px !important;
    color: var(--gold) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    cursor: pointer !important;
}

/* NUCLEAR OPTION for the stray plus/icons in loadmore */
.vertical ul.megamenu>li.loadmore i,
.vertical ul.megamenu>li.loadmore span.more-view,
.vertical ul.megamenu>li.loadmore .fa,
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore i,
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore span.more-view,
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore i.fa,
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore b.fa {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li.loadmore>a:hover {
    background: rgba(232, 200, 74, 0.2) !important;
    color: #fff !important;
}

/* Flyout sub-menu box styling — Premium Look */
.vertical ul.megamenu>li>.sub-menu>.content,
.typeheader-25 .container-megamenu.vertical .vertical-wrapper ul.megamenu>li>.sub-menu>.content {
    background: #1a1a1a !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8) !important;
    border-radius: 0 10px 10px 10px !important;
    padding: 12px 0 !important;
}

/* 2nd level list items */
ul.megamenu li .sub-menu .content .hover-menu .menu ul li {
    background: transparent !important;
    border: none !important;
}

ul.megamenu li .sub-menu .content .hover-menu .menu ul li a,
ul.megamenu li .sub-menu .content .hover-menu .menu ul>li>a {
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    transition: all 0.15s ease-out !important;
}

ul.megamenu li .sub-menu .content .hover-menu .menu ul li a:hover {
    color: var(--gold) !important;
    background: rgba(232, 200, 74, 0.08) !important;
    padding-left: 25px !important;
}

/* Arrow inside sub-menu links */
ul.megamenu li .sub-menu .content .hover-menu .menu ul li a .fa,
ul.megamenu li .sub-menu .content .hover-menu .menu ul li a i {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.3) !important;
    transition: color 0.15s ease !important;
}

ul.megamenu li .sub-menu .content .hover-menu .menu ul li a:hover .fa {
    color: var(--gold) !important;
}

/* ============================================================
   22. HOMEPAGE PRODUCT SLIDER (Uued Esemed) - MASTER PREMIUM UI
   ============================================================ */

body div[id^="so_extra_slider"] .product-thumb,
body .so-extraslider .product-thumb {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    /* Fixed: Forces top-alignment for image and text */
    background: rgba(22, 22, 22, 0.75) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 16px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    margin-bottom: 15px !important;
    min-height: 110px !important;
    overflow: visible !important;
    position: relative !important;
    gap: 15px !important;
}

body div[id^="so_extra_slider"] .item:hover .product-thumb,
body .so-extraslider .item:hover .product-thumb {
    background: rgba(30, 30, 30, 0.85) !important;
    border-color: rgba(232, 200, 74, 0.4) !important;
    transform: translateY(-5px) scale(1.015) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 15px rgba(232, 200, 74, 0.15) !important;
    z-index: 10 !important;
}

body div[id^="so_extra_slider"] .product-thumb .image,
body .so-extraslider .product-thumb .image {
    width: 90px !important;
    height: 90px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    overflow: hidden !important;
}

body div[id^="so_extra_slider"] .product-thumb .caption,
body .so-extraslider .product-thumb .caption {
    flex: 1 !important;
    padding-left: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    /* Align text to top */
    text-align: left !important;
    background: transparent !important;
}

/* Titles - Elegant Typography */
body div[id^="so_extra_slider"] .product-thumb .caption h4 a,
body .so-extraslider .product-thumb .caption h4 a {
    text-transform: capitalize !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

body .so-extraslider .product-thumb .caption h4 a:hover {
    color: var(--gold) !important;
}

/* Price - Bold gold accent */
body div[id^="so_extra_slider"] .product-thumb .price,
body div[id^="so_extra_slider"] .product-thumb .price-new {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--gold) !important;
    font-family: 'Outfit', sans-serif !important;
    margin: 4px 0 0 0 !important;
}

/* =====================================================================
   ADDITIONAL UI REFINEMENTS - CATEGORY GRID
   ===================================================================== */

.product-layout .rating,
.product-layout .description,
.product-thumb .rating {
    display: none !important;
}

.product-item-container .caption h4,
.product-layout h4 {
    height: 48px !important;
    margin-bottom: 6px !important;
    overflow: hidden !important;
}

.product-item-container .caption h4 a,
.product-layout h4 a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
}

.product-item-container .price,
.product-layout .price,
.caption .price-new,
.caption .price {
    display: block !important;
    margin-top: 8px !important;
    color: #ffd700 !important;
    font-weight: 700 !important;
    font-size: 17px !important;
}

/* =====================================================================
   PRODUCT CARD REFINEMENT - CATEGORY GRID (CONSOLIDATED)
   ===================================================================== */

/* 0. Basic layout refinements to bypass cache */
.typeheader-25 .container-megamenu.horizontal ul.megamenu>li>a strong,
.container-megamenu.horizontal ul.megamenu>li>a strong {
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.4) !important;
    letter-spacing: 0.8px !important;
    font-size: 15px !important;
    display: inline-block !important;
}

.typeheader-25 .container-megamenu.horizontal ul.megamenu>li>a:hover strong,
.container-megamenu.horizontal ul.megamenu>li>a:hover strong {
    color: #e8c84a !important;
    /* Gold on hover */
}

/* Container for text info */
/* Static top-left wishlist button */
.product-image-container {
    position: relative !important;
}

.wishlist-corner {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 9 !important;
    background: rgba(26, 26, 26, 0.7) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: #ffd700 !important;
    font-size: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    cursor: pointer !important;
}

.wishlist-corner:hover {
    background: #ffd700 !important;
    color: #000 !important;
    transform: scale(1.1) !important;
}

.right-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 10px 15px !important;
    background: transparent !important;
}

/* 1. White titles + limit to 2 lines + Force full width */
.product-layout h4 {
    min-height: 38px !important;
    /* Enough for 2 lines but allows centering if needed */
    height: auto !important;
    margin: 0 0 5px 0 !important;
    overflow: hidden !important;
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

.product-layout h4 a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: ellipsis !important;
    transition: color 0.3s ease;
}

.product-layout h4 a:hover {
    color: #ffd700 !important;
    /* Gold on hover */
}

/* 2. COMPLETELY REMOVE Rating and other clutter */
.product-layout .rating,
.product-layout .rating-num,
.product-layout .rate-history {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Price formatting - Force it directly under the name */
.price-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 5px !important;
    margin-bottom: 8px !important;
}

.product-layout .price {
    display: block !important;
    width: auto !important;
    /* Changed from 100% */
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    color: #ffd700 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

/* Action buttons next to price */
.btn-action-simple {
    background: rgba(255, 215, 0, 0.1) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    color: #ffd700 !important;
    font-size: 14px !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    margin-left: 8px !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
}

.btn-action-simple:first-of-type {
    margin-left: 15px !important;
    /* Larger gap from price */
}

.btn-action-simple:hover {
    background: #ffd700 !important;
    color: #000 !important;
    border-color: #ffd700 !important;
    transform: rotate(360deg) scale(1.1);
}

.product-layout .price-new,
.product-layout .price {
    color: #ffd700 !important;
}


.product-layout .price-old {
    color: #999 !important;
    text-decoration: line-through !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin-left: 10px !important;
}

/* Description styling for List view */
.product-layout .description {
    color: #bbb !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-top: 5px !important;
}

/* Product card hover effect */
.product-item-container {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    background: #1a1a1a !important;
    /* Dark background for the card */
    border-radius: 4px !important;
    overflow: hidden !important;
}

.product-item-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5) !important;
}

/* =====================================================================
   FILTER MODULE STYLING
   ===================================================================== */

/* Align Filter Headings with the Main Module Title Style */
.so_filter_wrap .so-filter-heading {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #333 !important;
    /* Base line */
    border-radius: 0 !important;
    padding: 0 0 12px 0 !important;
    margin: 20px 0 15px 0 !important;
    position: relative;
    cursor: pointer;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Gold accent underline for each filter section */
.so_filter_wrap .so-filter-heading::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 50px;
    height: 2px;
    background: #ffd700;
}

.so-filter-heading .so-filter-heading-text span {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.so-filter-heading i {
    color: #fff !important;
    font-size: 14px !important;
}

/* Checkbox and Option labels */
.so-filter-option label {
    color: #fff !important;
    font-size: 13px !important;
    cursor: pointer !important;
}

/* Global input styling */
.so_filter_wrap .form-control,
.so_filter_wrap input[type="text"] {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
}

/* Price inputs styling */
.so_filter_wrap .put-min_max {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    transition: border-color 0.3s ease !important;
}

.so_filter_wrap .put-min_max:hover,
.so_filter_wrap .put-min_max:focus-within {
    border-color: #ffd700 !important;
}

.so_filter_wrap .put-min_max .name-curent {
    color: #ffd700 !important;
    font-weight: bold !important;
    margin-right: 5px !important;
}

.so_filter_wrap .put-min_max input {
    background: transparent !important;
    border: none !important;
    padding: 8px 5px !important;
    width: 60px !important;
    /* Compact inputs */
    color: #fff !important;
    outline: none !important;
}

/* Count numbers next to filters - Gold accent */
.so-filter-option .option-count {
    background: #1a1a1a !important;
    border-color: #333 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
}

.so-filter-option .option-count span {
    color: #ffd700 !important;
    font-weight: 700 !important;
}

/* =====================================================================
   TOP TOOLBAR / FILTERS PANEL REFINEMENT
   ===================================================================== */

.filters-panel {
    background-color: #0c0c0c !important;
    border: 1px solid #222 !important;
    border-top: none !important;
    /* Cleaner look near the heading */
    border-radius: 0 0 8px 8px !important;
    padding: 15px 20px !important;
    margin-bottom: 30px !important;
    display: flex !important;
    align-items: center !important;
}

.filters-panel .row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    gap: 8px !important;
}

.filters-panel .row>div {
    width: auto !important;
    flex: 0 1 auto !important;
    padding: 0 !important;
}

/* Grid/List View switcher */
.view-mode {
    display: flex !important;
    align-items: center !important;
}

.view-mode .list-view {
    display: flex !important;
    background: #1a1a1a !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid #333 !important;
}

.view-mode .list-view .btn-gridview {
    background: #222 !important;
    color: #ffd700 !important;
    border: none !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    padding: 8px 10px !important;
    cursor: default !important;
    height: auto !important;
    line-height: 1 !important;
}

.view-mode .list-view .btn-view,
.view-mode .list-view .btn-default {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    border-left: 1px solid #333 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: normal !important;
    box-shadow: none !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.view-mode .list-view .btn-view:hover,
.view-mode .list-view .btn-default:hover,
.view-mode .list-view .btn-view.active,
.view-mode .list-view .btn-default.grid.active,
.view-mode .list-view .btn.active {
    background: #ffd700 !important;
    color: #000 !important;
}

/* Sort and Limit dropdowns */
.short-by-show {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
}

.short-by-show .form-group {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.short-by-show .control-label {
    color: #888 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
}

.short-by-show select.form-control {
    background-color: #1a1a1a !important;
    color: #fff !important;
    border: 1px solid #333 !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    padding: 2px 10px !important;
    height: 34px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 25px !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffd700%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px auto !important;
}

/* --- FINAL PREMIUM PRODUCT DESIGN --- */
.producttab .nav-tabs { background: #111 !important; border-bottom: 2px solid #333 !important; padding: 0 !important; }
.producttab .nav-tabs > li > a { color: #888 !important; background: transparent !important; border: none !important; padding: 15px 25px !important; }
.producttab .nav-tabs > li.active > a { color: #ffcf00 !important; background: #000 !important; border-bottom: 2px solid #ffcf00 !important; }
.tab-content { background: #000 !important; border: 1px solid #222 !important; padding: 30px !important; color: #fff !important; }

#tab-specification table { width: 100% !important; border-collapse: collapse !important; }
#tab-specification thead td { color: #ffcf00 !important; font-weight: 800 !important; text-transform: uppercase !important; padding: 45px 0 15px 0 !important; border-bottom: 2px solid #ffcf00 !important; }
#tab-specification tbody td { padding: 18px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; background: transparent !important; }
#tab-specification tbody td:first-child { color: #ffffff !important; width: 45% !important; position: relative !important; padding-right: 20px !important; }
#tab-specification tbody td:first-child::after { content: '........................................................................................................................................................................................'; position: absolute; bottom: 18px; padding-left: 15px; color: rgba(255,255,255,0.1); white-space: nowrap; }
#tab-specification tbody td:last-child { color: #ffcf00 !important; font-weight: 600 !important; text-align: right !important; width: 55% !important; background: #000 !important; z-index: 2; position: relative; padding-left: 10px !important; }