/* ============================================================ 01. 
   DESIGN TOKENS 
   ============================================================ */
:root {
    --raon-black: #000000; --raon-black-1: #070707; --raon-black-2: 
    #0B0B0B;
    --raon-black-3: #101010; --raon-panel: #141414; --raon-panel-2: 
    #181818;
    --raon-panel-3: #1D1D1D; --raon-border: #2A2A2A; --raon-border-2: 
    #343434;
    --raon-border-light: #454545; --raon-white: #FFFFFF; 
    --raon-off-white: #F5F5F5; --raon-light: #E5E5E5; --raon-mid: 
    #BDBDBD;
    --raon-muted: #999999; --raon-muted-2: #777777; --raon-dark-gray: 
    #555555;
    --raon-header-top: 34px; --raon-header-main: 72px; --raon-menu: 
    46px; --raon-radius: 3px; --raon-radius-sm: 2px; --raon-shadow: 0 
    10px 28px rgba(0, 0, 0, .28); --raon-shadow-soft: 0 5px 18px rgba(0, 
    0, 0, .20); --raon-container: 1400px; --raon-section-gap: 42px;
}
/* ============================================================ 02. 
   GLOBAL / BODY 
   ============================================================ */
html { background: var(--raon-black);
}
body { margin: 0; background: var(--raon-black) !important; color: 
    var(--raon-light); font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
        Helvetica, Arial, sans-serif;
    font-size: 14px; line-height: 1.5;
}
body, button, input, select, textarea { -webkit-font-smoothing: 
    antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--raon-light); transition: color .18s ease, 
        background-color .18s ease, border-color .18s ease, opacity .18s 
        ease;
}
a:hover, a:focus { color: var(--raon-white); text-decoration: none;
}
img { max-width: 100%;
}
.container { width: 100%; max-width: var(--raon-container);
}
/* ============================================================ 03. 
   HEADER — GLOBAL 
   ============================================================ */
#header {
    position: relative; z-index: 1000; background: var(--raon-black) 
    !important; color: var(--raon-white) !important; border: 0 
    !important; box-shadow: none !important;
}
#header *, header a {
    box-sizing: border-box;
}
#header a {
    color: var(--raon-light); text-decoration: none;
}
#header a:hover, header a:focus {
    color: var(--raon-white);
}
/* ============================================================ 04. 
   HEADER — TOP UTILITY BAR 
   ============================================================ */
#header #top, header .top-bar, header .header-top, header .top-header {
    min-height: var(--raon-header-top); height: var(--raon-header-top); 
    background: var(--raon-black-1) !important; border-bottom: 1px solid 
    #1E1E1E !important;
    color: var(--raon-muted) !important; font-size: 11px;
}
#header #top .container, header .top-bar .container, header .header-top 
#.container, header .top-header .container {
    min-height: var(--raon-header-top); height: var(--raon-header-top); 
    display: flex; align-items: center;
}
#header #top a, header .top-bar a, header .header-top a, header 
#.top-header a {
    color: var(--raon-mid) !important;
}
#header #top a:hover, header .top-bar a:hover, header .header-top 
#a:hover, header .top-header a:hover {
    color: var(--raon-white) !important;
}
/* ============================================================ 05. 
   HEADER — MAIN ROW 
   ============================================================ */
#header .header-main, header .header-middle, header .main-header, header 
#.header-center {
    min-height: var(--raon-header-main); background: var(--raon-black) 
    !important; border-bottom: 1px solid #202020 !important;
}
#header .header-main > .container, header .header-middle > .container, 
#header .main-header > .container, header .header-center > .container {
    min-height: var(--raon-header-main); display: flex; align-items: 
    center;
}
/* ============================================================ 06. 
   HEADER — LOGO 
   ============================================================ */
#header #logo {
    margin: 0 !important; padding: 0 !important; display: flex; 
    align-items: center; min-height: var(--raon-header-main);
}
#header #logo img {
    display: block; width: auto; max-width: 220px; max-height: 58px; 
    height: auto;
}
/* ============================================================ 07. 
   HEADER — SEARCH 
   ============================================================ */
#header #search {
    margin: 0 auto;
}
#header #search .form-control, header #search input[type="text"], header 
##search input[type="search"],
#header .search input[type="text"], header .search input[type="search"] 
#{
    height: 42px; background: var(--raon-off-white) !important; color: 
    #151515 !important;
    border: 1px solid #CFCFCF !important; border-radius: 
    var(--raon-radius-sm) 0 0 var(--raon-radius-sm) !important; 
    box-shadow: none !important; font-size: 13px;
}
#header #search input::placeholder, header .search input::placeholder {
    color: #777777;
}
#header #search .btn, header #search button, header #search 
#.btn-primary, header .search .btn, header .search button {
    height: 42px; min-width: 48px; background: #303030 !important; 
    color: var(--raon-white) !important; border: 1px solid #303030 
    !important; border-radius: 0 var(--raon-radius-sm) 
    var(--raon-radius-sm) 0 !important; box-shadow: none !important;
}
#header #search .btn:hover, header #search button:hover, header .search 
#.btn:hover, header .search button:hover {
    background: #4A4A4A !important; border-color: #4A4A4A !important;
}
/* ============================================================ 08. 
   HEADER — ACCOUNT / WISHLIST / CART 
   ============================================================ */
#header #cart, header .header-cart, header .cart, header .account, 
#header .wishlist {
    background: transparent !important; border: 0 !important; 
    box-shadow: none !important;
}
#header .dropdown-toggle, header #cart > button, header .header-cart > 
#button, header .cart > button, header .account > a, header .wishlist > 
#a {
    background: transparent !important; color: var(--raon-light) 
    !important; border: 0 !important; box-shadow: none !important;
}
#header .dropdown-toggle:hover, header #cart > button:hover, header 
#.header-cart > button:hover, header .cart > button:hover, header 
#.account > a:hover, header .wishlist > a:hover {
    color: var(--raon-white) !important;
}
/* ============================================================ 09. 
   HEADER — MAIN NAVIGATION 
   ============================================================ */
#menu {
    position: relative; z-index: 1001; min-height: var(--raon-menu); 
    margin: 0 !important; padding: 0 !important; background: 
    var(--raon-panel) !important; border-top: 1px solid #1F1F1F 
    !important; border-bottom: 1px solid var(--raon-border) !important; 
    box-shadow: none !important;
}
#menu > .container, menu .container {
    min-height: var(--raon-menu);
}
#menu .navbar-nav, menu .nav {
    min-height: var(--raon-menu); display: flex; align-items: stretch; 
    margin: 0; padding: 0;
}
#menu .navbar-nav > li > a, menu .nav > li > a, menu > ul > li > a {
    min-height: var(--raon-menu); display: flex; align-items: center; 
    padding: 0 19px !important; background: transparent !important; 
    color: var(--raon-light) !important; border-left: 1px solid 
    transparent; border-right: 1px solid transparent; font-size: 12px; 
    font-weight: 600; letter-spacing: .2px; text-transform: uppercase;
}
#menu .navbar-nav > li > a:hover, menu .navbar-nav > li > a:focus, menu 
#.navbar-nav > li.active > a, menu .navbar-nav > li.open > a, menu .nav 
#> li > a:hover,
#menu .nav > li.active > a, menu .nav > li.open > a, menu > ul > li > 
#a:hover {
    background: #242424 !important; color: var(--raon-white) !important; 
    border-color: var(--raon-border-2);
}
/* ============================================================ 10. 
   HEADER — CATEGORY TRIGGER / MENU BUTTON 
   ============================================================ */
#menu .menu-category, menu .category-menu, menu .menu-category-button, 
#menu .category-button, menu .navbar-header > button, menu 
#.navbar-toggle {
    background: #242424 !important; color: var(--raon-white) !important; 
    border: 0 !important; min-height: var(--raon-menu); font-size: 12px; 
    font-weight: 700; text-transform: uppercase; letter-spacing: .2px;
}
#menu .menu-category:hover, menu .category-menu:hover, menu 
#.menu-category-button:hover, menu .category-button:hover, menu 
#.navbar-header > button:hover, menu .navbar-toggle:hover {
    background: #333333 !important; color: var(--raon-white) !important;
}
/* ============================================================ 11. 
   HEADER — DROPDOWNS / MEGA MENUS 
   ============================================================ */
#menu .dropdown-menu, menu ul.dropdown-menu, menu .mega-menu, menu 
#.submenu {
    margin-top: 0 !important; padding: 7px 0 !important; background: 
    #111111 !important;
    border: 1px solid var(--raon-border) !important; border-radius: 0 
    !important; box-shadow: var(--raon-shadow) !important;
}
#menu .dropdown-menu > li > a, menu ul.dropdown-menu > li > a, menu 
#.mega-menu a, menu .submenu a {
    display: block; padding: 9px 15px !important; background: 
    transparent !important; color: #D4D4D4 !important; font-size: 12px;
}
#menu .dropdown-menu > li > a:hover, menu ul.dropdown-menu > li > 
#a:hover, menu .mega-menu a:hover, menu .submenu a:hover {
    background: #242424 !important; color: var(--raon-white) !important;
}
#menu i, menu .fa, menu .icon {
    color: inherit !important;
}
/* ============================================================ 12. 
   BREADCRUMB 
   ============================================================ */
.breadcrumb { margin: 0 0 25px; padding: 12px 0; background: transparent 
    !important; border: 0 !important; color: var(--raon-muted) 
    !important; font-size: 12px;
}
.breadcrumb a { color: var(--raon-mid) !important;
}
.breadcrumb a:hover { color: var(--raon-white) !important;
}
.breadcrumb > li + li:before { color: var(--raon-dark-gray) !important;
}
/* ============================================================ 13. MAIN 
   CONTENT ============================================================ 
   */
#content {
    background: var(--raon-black) !important; color: var(--raon-light);
}
#content > * {
    box-sizing: border-box;
}
#content h1, content h2, content h3, content h4, content h5, content h6 
#{
    color: var(--raon-white);
}
#content p {
    color: var(--raon-mid);
}
/* ============================================================ 14. 
   CORPORATE SECTION HEADINGS 
   ============================================================ */
#content .raon-section-title, content .ta-section-title, content 
#.module-title, content .heading-title {
    position: relative; margin: 0 0 20px; padding-left: 14px; color: 
    var(--raon-white); font-size: 24px; font-weight: 800; line-height: 
    1.15; letter-spacing: .2px; text-transform: uppercase;
}
#content .raon-section-title:before, content .ta-section-title:before, 
#content .module-title:before, content .heading-title:before {
    content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; 
    width: 3px; background: var(--raon-white);
}
#content .raon-section-title:after, content .ta-section-title:after, 
#content .module-title:after, content .heading-title:after {
    content: ""; display: block; width: 46px; height: 1px; margin-top: 
    9px; background: var(--raon-dark-gray);
}
/* ============================================================ 15. HERO 
   / SLIDER ============================================================ 
   */
#content .carousel, content .swiper, content .owl-carousel, content 
#.slick-slider {
    overflow: hidden;
}
#content .carousel img, content .swiper img, content .owl-carousel img, 
#content .slick-slider img {
    display: block;
}
#content .carousel-control, content .swiper-button-prev, content 
#.swiper-button-next, content .owl-prev, content .owl-next, content 
#.slick-prev, content .slick-next {
    background: rgba(0,0,0,.58) !important; color: var(--raon-white) 
    !important; border: 1px solid rgba(255,255,255,.16) !important; 
    box-shadow: none !important;
}
#content .carousel-control:hover, content .swiper-button-prev:hover, 
#content .swiper-button-next:hover, content .owl-prev:hover, content 
#.owl-next:hover, content .slick-prev:hover, content .slick-next:hover {
    background: rgba(255,255,255,.15) !important;
}
#content .carousel-indicators li, content .swiper-pagination-bullet, 
#content .owl-dot, content .slick-dots li button {
    background: rgba(255,255,255,.55) !important; border-color: 
    rgba(255,255,255,.55) !important;
}
#content .carousel-indicators .active, content 
#.swiper-pagination-bullet-active, content .owl-dot.active, content 
#.slick-active button {
    background: var(--raon-white) !important;
}
/* ============================================================ 16. 
   GENERIC DARK MODULE / PANEL 
   ============================================================ */
#content .module, content .box, content .panel, content .well, content 
#.information-box {
    background: var(--raon-black-2); color: var(--raon-light); border: 
    1px solid var(--raon-border); border-radius: var(--raon-radius); 
    box-shadow: none;
}
/* ============================================================ 17. SHOP 
   BY CATEGORY — CUSTOM MODULE SUPPORT Existing Titanium-style module 
   class names are supported. 
   ============================================================ */
#content .ta-shop-category {
    margin: 0 0 var(--raon-section-gap); padding: 0; background: 
    transparent !important; color: var(--raon-white);
}
#content .ta-shop-category-header {
    margin-bottom: 18px;
}
#content .ta-shop-category-header h2, content .ta-shop-category-header 
#h3, content .ta-shop-category-title {
    position: relative; margin: 0; padding-left: 14px; color: 
    var(--raon-white); font-size: 24px; font-weight: 800; line-height: 
    1.15; text-transform: uppercase;
}
#content .ta-shop-category-header h2:before, content 
#.ta-shop-category-header h3:before, content 
#.ta-shop-category-title:before {
    content: ""; position: absolute; left: 0; top: 1px; bottom: 1px; 
    width: 3px; background: var(--raon-white);
}
#content .ta-shop-category-header p, content 
#.ta-shop-category-description {
    color: var(--raon-muted); margin: 8px 0 0;
}
#content .ta-shop-category-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); 
    gap: 12px;
}
#content .ta-shop-category-card {
    position: relative; min-height: 150px; overflow: hidden; display: 
    flex; align-items: flex-end; background: #111111 !important; border: 
    1px solid var(--raon-border) !important; border-radius: 3px 
    !important; box-shadow: none !important; color: var(--raon-white) 
    !important;
}
#content .ta-shop-category-card img {
    width: 100%; height: 100%; min-height: 150px; object-fit: cover; 
    transition: transform .25s ease, opacity .25s ease;
}
#content .ta-shop-category-card:hover {
    border-color: var(--raon-border-light) !important;
}
#content .ta-shop-category-card:hover img {
    transform: scale(1.025);
}
#content .ta-shop-category-overlay {
    position: absolute; inset: auto 0 0; min-height: 65px; background: 
    linear-gradient(
        to top, rgba(0,0,0,.94), rgba(0,0,0,.62), rgba(0,0,0,0) ) 
    !important;
}
#content .ta-shop-category-content {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 
    13px; color: var(--raon-white);
}
#content .ta-shop-category-label {
    display: block; margin-bottom: 5px; color: var(--raon-white); 
    font-size: 14px; font-weight: 800; line-height: 1.2; text-transform: 
    uppercase;
}
#content .ta-shop-category-button {
    display: inline-flex; align-items: center; gap: 6px; color: 
    var(--raon-light) !important; font-size: 11px; font-weight: 600; 
    text-transform: uppercase;
}
#content .ta-shop-category-arrow {
    color: var(--raon-white) !important;
}
/* ============================================================ 18. SHOP 
   BY APPLICATION — CUSTOM MODULE SUPPORT 
   ============================================================ */
#content .ta-shop-application {
    margin: 0 0 var(--raon-section-gap); padding: 0; background: 
    transparent !important;
}
#content .ta-appmod-grid {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); 
    gap: 10px;
}
#content .ta-appmod-card {
    position: relative; overflow: hidden; background: #111111 
    !important; border: 1px solid var(--raon-border) !important; 
    border-radius: 3px !important; box-shadow: none !important; color: 
    var(--raon-white) !important;
}
#content .ta-appmod-card img {
    display: block; width: 100%; height: 125px; object-fit: cover; 
    transition: transform .25s ease, filter .25s ease;
}
#content .ta-appmod-card:hover img {
    transform: scale(1.03);
}
#content .ta-appmod-caption, content .ta-appmod-content {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 10px 
    10px; color: var(--raon-white); background: linear-gradient(
        to top, rgba(0,0,0,.95), rgba(0,0,0,.45), transparent );
}
#content .ta-appmod-name {
    color: var(--raon-white); font-size: 11px; font-weight: 800; 
    text-transform: uppercase;
}
/* ============================================================ 19. 
   PRODUCT GRID / PRODUCT CARDS 
   ============================================================ */
#content .product-layout {
    margin-bottom: 18px;
}
#content .product-thumb {
    position: relative; height: 100%; overflow: hidden; display: flex; 
    flex-direction: column; background: #151515 !important; border: 1px 
    solid var(--raon-border) !important; border-radius: 3px !important; 
    box-shadow: none !important; transition:
        border-color .18s ease, transform .18s ease, box-shadow .18s 
        ease;
}
#content .product-thumb:hover {
    border-color: var(--raon-border-light) !important; transform: 
    translateY(-2px); box-shadow: var(--raon-shadow-soft) !important;
}
#content .product-thumb .image {
    position: relative; overflow: hidden; background: #FFFFFF 
    !important; border-bottom: 1px solid #2A2A2A;
}
#content .product-thumb .image a {
    display: block;
}
#content .product-thumb .image img {
    width: 100%; transition: transform .25s ease;
}
#content .product-thumb:hover .image img {
    transform: scale(1.025);
}
#content .product-thumb .caption {
    display: flex; flex: 1; flex-direction: column; padding: 13px 13px 
    10px; background: #151515 !important;
}
#content .product-thumb .caption h4, content .product-thumb .caption 
#.name, content .product-thumb .caption .product-name {
    min-height: 38px; margin: 0 0 7px; color: var(--raon-white) 
    !important; font-size: 13px; font-weight: 650; line-height: 1.35;
}
#content .product-thumb .caption h4 a, content .product-thumb .caption 
#.name a, content .product-thumb .caption .product-name a {
    color: var(--raon-white) !important;
}
#content .product-thumb .caption h4 a:hover, content .product-thumb 
#.caption .name a:hover, content .product-thumb .caption .product-name 
#a:hover {
    color: var(--raon-light) !important;
}
#content .product-thumb .description {
    color: var(--raon-muted) !important; font-size: 12px; line-height: 
    1.45;
}
#content .product-thumb .price {
    margin-top: auto; padding-top: 8px; color: var(--raon-white) 
    !important; font-size: 17px; font-weight: 800;
}
#content .product-thumb .price-new {
    color: var(--raon-white) !important;
}
#content .product-thumb .price-old {
    margin-left: 5px; color: var(--raon-muted-2) !important; font-size: 
    12px; font-weight: 400;
}
#content .product-thumb .button-group {
    display: flex; gap: 6px; padding: 10px 12px 12px; background: 
    #151515 !important;
    border-top: 1px solid var(--raon-border) !important;
}
#content .product-thumb .button-group .btn, content .product-thumb 
#.button-group button {
    min-height: 36px; flex: 1; border-radius: 2px !important;
}
/* ============================================================ 20. 
   PRODUCT BADGES 
   ============================================================ */
#content .product-thumb .product-label, content .product-thumb .badge, 
#content .product-thumb .label {
    border-radius: 2px !important; background: #FFFFFF !important; 
    color: #111111 !important; border: 1px solid #D8D8D8 !important; 
    font-size: 10px; font-weight: 800; text-transform: uppercase;
}
/* ============================================================ 21. 
   BUTTONS — CORPORATE BLACK / WHITE 
   ============================================================ */
#content .btn,
.btn-raon,
#content .button {
    border-radius: 2px !important; box-shadow: none !important; 
    font-weight: 700; transition:
        background-color .18s ease, color .18s ease, border-color .18s 
        ease, transform .18s ease;
}
#content .btn-primary, content .btn-success, content .btn-danger, 
#content .btn-info, content .btn-warning,
.btn-raon { background: var(--raon-white) !important; border-color: 
    var(--raon-white) !important; color: #111111 !important;
}
#content .btn-primary:hover, content .btn-success:hover, content 
#.btn-danger:hover, content .btn-info:hover, content .btn-warning:hover,
.btn-raon:hover { background: #D8D8D8 !important; border-color: #D8D8D8 
    !important; color: #000000 !important; transform: translateY(-1px);
}
#content .btn-default, content .btn-secondary {
    background: transparent !important; border-color: #555555 
    !important; color: var(--raon-light) !important;
}
#content .btn-default:hover, content .btn-secondary:hover {
    background: #242424 !important; border-color: #777777 !important; 
    color: var(--raon-white) !important;
}
/* ============================================================ 22. 
   FORMS ============================================================ */
#content .form-control, content select, content textarea, content 
#input[type="text"], content input[type="email"], content 
#input[type="tel"], content input[type="number"], content 
#input[type="password"] {
    min-height: 40px; background: #151515 !important; color: 
    var(--raon-light) !important; border: 1px solid #343434 !important; 
    border-radius: 2px !important; box-shadow: none !important;
}
#content .form-control:focus, content select:focus, content 
#textarea:focus, content input:focus {
    border-color: #707070 !important; box-shadow: 0 0 0 2px 
    rgba(255,255,255,.05) !important; outline: none;
}
#content .form-control::placeholder, content input::placeholder, content 
#textarea::placeholder {
    color: #707070 !important;
}
/* ============================================================ 23. 
   CATEGORY / PRODUCT LISTING PAGE 
   ============================================================ */
#product-category, product-search, product-special {
    background: var(--raon-black) !important;
}
#product-category .page-title, product-search .page-title, 
#product-special .page-title {
    color: var(--raon-white);
}
#product-category .product-filter, product-category .sort, 
#product-category .limit, product-search .product-filter {
    background: #101010 !important; border: 1px solid var(--raon-border) 
    !important; color: var(--raon-muted);
}
#product-category .list-group, product-category .list-group-item {
    background: #111111 !important; border-color: var(--raon-border) 
    !important; color: var(--raon-light) !important;
}
#product-category .list-group-item a {
    color: var(--raon-mid) !important;
}
#product-category .list-group-item a:hover {
    color: var(--raon-white) !important;
}
/* ============================================================ 24. 
   REFINEMENT / FILTER LINKS 
   ============================================================ */
#content .refine-search a, content .list-group a, content .category-list 
#a {
    color: var(--raon-mid) !important;
}
#content .refine-search a:hover, content .list-group a:hover, content 
#.category-list a:hover {
    color: var(--raon-white) !important;
}
/* ============================================================ 25. 
   PAGINATION 
   ============================================================ */
#content .pagination > li > a, content .pagination > li > span {
    background: #111111 !important; color: var(--raon-light) !important; 
    border: 1px solid var(--raon-border) !important;
}
#content .pagination > li > a:hover, content .pagination > li > 
#span:hover, content .pagination > .active > a, content .pagination > 
#.active > span {
    background: var(--raon-white) !important; border-color: 
    var(--raon-white) !important; color: #111111 !important;
}
/* ============================================================ 26. 
   PRODUCT DETAIL PAGE 
   ============================================================ */
#product-product {
    background: var(--raon-black) !important;
}
#product-product .thumbnail, product-product .thumbnails img, 
#product-product .product-image {
    background: #FFFFFF !important; border: 1px solid var(--raon-border) 
    !important; border-radius: 2px !important;
}
#product-product h1, product-product h2, product-product h3, 
#product-product h4 {
    color: var(--raon-white);
}
#product-product .price, product-product .product-price {
    color: var(--raon-white) !important;
}
#product-product .price-old {
    color: var(--raon-muted) !important;
}
#product-product .nav-tabs {
    border-bottom: 1px solid var(--raon-border) !important;
}
#product-product .nav-tabs > li > a {
    background: transparent !important; color: var(--raon-muted) 
    !important; border: 0 !important; border-bottom: 2px solid 
    transparent !important;
}
#product-product .nav-tabs > li > a:hover, product-product .nav-tabs > 
#li.active > a {
    color: var(--raon-white) !important; border-bottom-color: 
    var(--raon-white) !important;
}
#product-product .tab-content {
    color: var(--raon-mid); background: transparent !important;
}
/* ============================================================ 27. 
   TABLES / CART / CHECKOUT 
   ============================================================ */
#checkout-cart, checkout-checkout, account-account, account-login, 
#account-register, account-order {
    background: var(--raon-black) !important;
}
#content .table {
    color: var(--raon-light);
}
#content .table > thead > tr > th {
    background: #111111 !important; color: var(--raon-white) !important; 
    border-color: var(--raon-border) !important;
}
#content .table > tbody > tr > td, content .table > tbody > tr > th, 
#content .table > tfoot > tr > td, content .table > tfoot > tr > th {
    background: #0D0D0D !important; color: var(--raon-mid) !important; 
    border-color: var(--raon-border) !important;
}
/* ============================================================ 28. 
   ALERTS / NOTIFICATIONS 
   ============================================================ */
#content .alert {
    border-radius: 2px !important; box-shadow: none !important;
}
#content .alert-success, content .alert-info, content .alert-warning, 
#content .alert-danger {
    background: #151515 !important; border: 1px solid #3A3A3A 
    !important; color: var(--raon-light) !important;
}
/* ============================================================ 29. 
   SHOPPING CART DROPDOWN 
   ============================================================ */
#header #cart .dropdown-menu, header .cart .dropdown-menu {
    background: #111111 !important; color: var(--raon-light) !important; 
    border: 1px solid var(--raon-border) !important; border-radius: 2px 
    !important; box-shadow: var(--raon-shadow) !important;
}
#header #cart .dropdown-menu a, header .cart .dropdown-menu a {
    color: var(--raon-light) !important;
}
#header #cart .dropdown-menu a:hover, header .cart .dropdown-menu 
#a:hover {
    color: var(--raon-white) !important;
}
/* ============================================================ 30. 
   MODALS ============================================================ 
   */
.modal-content { background: #111111 !important; color: 
    var(--raon-light) !important; border: 1px solid var(--raon-border) 
    !important; border-radius: 3px !important; box-shadow: 
    var(--raon-shadow) !important;
}
.modal-header, .modal-footer { border-color: var(--raon-border) 
    !important;
}
.modal-title { color: var(--raon-white) !important;
}
.modal .close { color: var(--raon-white) !important; text-shadow: none 
    !important; opacity: .8;
}
.modal .close:hover { opacity: 1;
}
/* ============================================================ 31. 
   FOOTER — CORPORATE DARK 
   ============================================================ */
footer { margin-top: 45px; background: #080808 !important; color: 
    var(--raon-muted) !important; border-top: 1px solid 
    var(--raon-border) !important;
}
footer a { color: var(--raon-muted) !important;
}
footer a:hover { color: var(--raon-white) !important;
}
footer h3, footer h4, footer .footer-title { color: var(--raon-white) 
    !important; font-size: 13px; font-weight: 750; text-transform: 
    uppercase;
}
footer hr { border-color: var(--raon-border) !important;
}
footer .container { position: relative;
}
/* ============================================================ 32. 
   FOOTER / COPYRIGHT 
   ============================================================ */
footer .copyright, footer .footer-bottom, footer .powered { background: 
    #050505 !important;
    color: #777777 !important; border-top: 1px solid #181818 !important;
}
footer .copyright a, footer .footer-bottom a, footer .powered a { color: 
    #999999 !important;
}
/* ============================================================ 33. 
   SPECIAL / PROMOTION ELEMENTS 
   ============================================================ */
#content .special, content .promotion, content .offer, content 
#.sale-banner {
    background: #111111 !important; border: 1px solid var(--raon-border) 
    !important; color: var(--raon-white);
}
#content .special-price, content .sale-price, content .price-special {
    color: var(--raon-white) !important;
}
#content .old-price, content .price-old {
    color: var(--raon-muted) !important;
}
/* ============================================================ 34. 
   WELCOME / OFFER POPUP COMPATIBILITY Keep existing popup 
   functionality; only provide neutral black/white/grey presentation 
   where common selectors exist. 
   ============================================================ */
.raon-offer-popup, .ta-offer-popup, .ta-offer-modal, .offer-popup, 
.product-popup {
    color: var(--raon-light);
}
.raon-offer-popup .popup-content, .ta-offer-popup .popup-content, 
.ta-offer-modal .modal-content, .offer-popup .popup-content, 
.product-popup .popup-content {
    background: #111111 !important; border: 1px solid var(--raon-border) 
    !important; color: var(--raon-light) !important;
}
.raon-offer-popup .btn, .ta-offer-popup .btn, .ta-offer-modal .btn, 
.offer-popup .btn, .product-popup .btn {
    background: var(--raon-white) !important; color: #111111 !important; 
    border-color: var(--raon-white) !important;
}
/* ============================================================ 35. 
   PRODUCT FLASH POPUP COMPATIBILITY 
   ============================================================ */
.ta-product-popup, .ta-product-popup * { box-sizing: border-box;
}
.ta-product-popup { color: var(--raon-light);
}
.ta-product-popup .popup-inner, .ta-product-popup .product-popup-inner { 
    background: #111111 !important; border: 1px solid var(--raon-border) 
    !important; box-shadow: var(--raon-shadow) !important;
}
.ta-product-popup .popup-product-name, .ta-product-popup .product-name { 
    color: var(--raon-white) !important;
}
.ta-product-popup .price, .ta-product-popup .special-price { color: 
    var(--raon-white) !important;
}
.ta-product-popup .old-price { color: var(--raon-muted) !important;
}
.ta-product-popup .btn, .ta-product-popup .add-to-cart { background: 
    var(--raon-white) !important; color: #111111 !important; 
    border-color: var(--raon-white) !important;
}
/* ============================================================ 36. 
   UTILITY / BRAND LOGOS 
   ============================================================ */
#content .brand, content .brand-item, content .manufacturer-item {
    background: #FFFFFF !important; border: 1px solid var(--raon-border) 
    !important; border-radius: 2px !important; transition: border-color 
    .18s ease, transform .18s ease;
}
#content .brand:hover, content .brand-item:hover, content 
#.manufacturer-item:hover {
    border-color: #888888 !important; transform: translateY(-1px);
}
/* ============================================================ 37. 
   CUSTOM RAON BRAND STRIP Optional class for the mockup's 
   popular-brands section. 
   ============================================================ */
.raon-brand-strip { display: grid; grid-template-columns: repeat(6, 
    minmax(0, 1fr)); gap: 10px; margin: 0 0 var(--raon-section-gap);
}
.raon-brand-strip .raon-brand-item { min-height: 62px; display: flex; 
    align-items: center; justify-content: center; padding: 10px 15px; 
    background: #FFFFFF; border: 1px solid var(--raon-border); 
    border-radius: 2px;
}
.raon-brand-strip img { max-width: 100%; max-height: 38px; object-fit: 
    contain;
}
/* ============================================================ 38. 
   CUSTOM RAON BENEFIT STRIP 
   ============================================================ */
.raon-benefit-strip { display: grid; grid-template-columns: repeat(4, 
    minmax(0, 1fr)); background: #0E0E0E; border-top: 1px solid 
    var(--raon-border); border-bottom: 1px solid var(--raon-border);
}
.raon-benefit-item { display: flex; align-items: center; gap: 12px; 
    min-height: 82px; padding: 15px 20px; border-right: 1px solid 
    var(--raon-border);
}
.raon-benefit-item:last-child { border-right: 0;
}
.raon-benefit-icon { color: var(--raon-white); font-size: 25px;
}
.raon-benefit-title { display: block; color: var(--raon-white); 
    font-size: 11px; font-weight: 800; text-transform: uppercase;
}
.raon-benefit-text { display: block; margin-top: 2px; color: 
    var(--raon-muted); font-size: 10px;
}
/* ============================================================ 39. 
   SCROLLBARS — SUBTLE 
   ============================================================ */
* { scrollbar-width: thin; scrollbar-color: #3A3A3A #090909;
}
*::-webkit-scrollbar { width: 9px; height: 9px;
}
*::-webkit-scrollbar-track { background: #090909;
}
*::-webkit-scrollbar-thumb { background: #3A3A3A; border-radius: 0;
}
*::-webkit-scrollbar-thumb:hover { background: #555555;
}
/* ============================================================ 40. 
   TABLET ============================================================ 
   */
@media (max-width: 1199.98px) {
    :root {
        --raon-container: 96%;
    }
    #header #logo img {
        max-width: 195px;
    }
    #menu .navbar-nav > li > a, menu .nav > li > a {
        padding-left: 13px !important; padding-right: 13px !important;
    }
    #content .ta-shop-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    #content .ta-appmod-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .raon-brand-strip { grid-template-columns: repeat(4, minmax(0, 
        1fr));
    }
}
/* ============================================================ 41. 
   MOBILE / TABLET — 991.98px 
   ============================================================ */
@media (max-width: 991.98px) {
    :root {
        --raon-header-top: 30px; --raon-header-main: 62px; --raon-menu: 
        44px; --raon-section-gap: 32px;
    }
    body { font-size: 13px;
    }
    #header #top, header .top-bar, header .header-top, header 
    #.top-header {
        min-height: var(--raon-header-top); height: auto; font-size: 
        10px;
    }
    #header #top .container, header .top-bar .container, header 
    #.header-top .container, header .top-header .container {
        min-height: var(--raon-header-top); height: auto;
    }
    #header .header-main, header .header-middle, header .main-header, 
    #header .header-center {
        min-height: var(--raon-header-main);
    }
    #header #logo {
        min-height: var(--raon-header-main); justify-content: center;
    }
    #header #logo img {
        max-width: 165px; max-height: 46px;
    }
    #header #search {
        margin: 0;
    }
    #header #search .form-control, header #search input[type="text"], 
    #header #search input[type="search"], header #search .btn, header 
    ##search button,
    #header .search .btn, header .search button {
        height: 38px;
    }
    #menu {
        min-height: var(--raon-menu);
    }
    #menu .navbar-nav, menu .nav {
        display: block; min-height: 0;
    }
    #menu .navbar-nav > li > a, menu .nav > li > a, menu > ul > li > a {
        min-height: 44px; padding: 0 15px !important; border-bottom: 1px 
        solid #222222;
    }
    #menu .dropdown-menu, menu ul.dropdown-menu, menu .mega-menu, menu 
    #.submenu {
        position: static !important; width: 100% !important; box-shadow: 
        none !important; border-left: 0 !important; border-right: 0 
        !important; border-radius: 0 !important;
    }
    #menu .dropdown-menu > li > a, menu ul.dropdown-menu > li > a, menu 
    #.mega-menu a, menu .submenu a {
        padding: 10px 20px !important;
    }
    #content .raon-section-title, content .ta-section-title, content 
    #.module-title, content .heading-title, content 
    #.ta-shop-category-header h2, content .ta-shop-category-header h3, 
    #content .ta-shop-category-title {
        font-size: 21px;
    }
    #content .ta-shop-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
    }
    #content .ta-shop-category-card, content .ta-shop-category-card img 
    #{
        min-height: 115px;
    }
    #content .ta-appmod-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    }
    #content .ta-appmod-card img {
        height: 105px;
    }
    #content .product-thumb .caption h4, content .product-thumb .caption 
    #.name, content .product-thumb .caption .product-name {
        font-size: 12px;
    }
    .raon-benefit-strip { grid-template-columns: repeat(2, minmax(0, 
        1fr));
    }
    .raon-benefit-item:nth-child(2) { border-right: 0;
    }
    .raon-benefit-item:nth-child(-n+2) { border-bottom: 1px solid 
        var(--raon-border);
    }
    .raon-brand-strip { grid-template-columns: repeat(3, minmax(0, 
        1fr));
    }
}
/* ============================================================ 42. 
   SMALL PHONES — 575.98px 
   ============================================================ */
@media (max-width: 575.98px) {
    :root {
        --raon-header-main: 58px; --raon-menu: 43px; --raon-section-gap: 
        26px;
    }
    #header #logo img {
        max-width: 140px; max-height: 40px;
    }
    #header #search .form-control, header #search input[type="text"], 
    #header #search input[type="search"] {
        height: 36px; font-size: 11px;
    }
    #header #search .btn, header #search button, header .search .btn, 
    #header .search button {
        height: 36px; min-width: 42px;
    }
    #menu .navbar-nav > li > a, menu .nav > li > a, menu > ul > li > a {
        padding-left: 13px !important; padding-right: 13px !important; 
        font-size: 11px;
    }
    #content .raon-section-title, content .ta-section-title, content 
    #.module-title, content .heading-title, content 
    #.ta-shop-category-header h2, content .ta-shop-category-header h3, 
    #content .ta-shop-category-title {
        font-size: 18px; padding-left: 11px;
    }
    #content .ta-shop-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #content .ta-shop-category-card, content .ta-shop-category-card img 
    #{
        min-height: 120px;
    }
    #content .ta-shop-category-label {
        font-size: 11px;
    }
    #content .ta-appmod-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #content .ta-appmod-card img {
        height: 100px;
    }
    #content .product-thumb .caption {
        padding: 10px;
    }
    #content .product-thumb .caption h4, content .product-thumb .caption 
    #.name, content .product-thumb .caption .product-name {
        min-height: 34px; font-size: 11px;
    }
    #content .product-thumb .price {
        font-size: 15px;
    }
    .raon-benefit-strip { grid-template-columns: 1fr;
    }
    .raon-benefit-item, .raon-benefit-item:nth-child(2) { border-right: 
        0; border-bottom: 1px solid var(--raon-border);
    }
    .raon-benefit-item:last-child { border-bottom: 0;
    }
    .raon-brand-strip { grid-template-columns: repeat(2, minmax(0, 
        1fr));
    }
    .raon-brand-strip .raon-brand-item { min-height: 55px;
    }
}
/* ============================================================ 43. 
   ACCESSIBILITY / REDUCED MOTION 
   ============================================================ */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { 
        scroll-behavior: auto !important; transition-duration: .01ms 
        !important; animation-duration: .01ms !important; 
        animation-iteration-count: 1 !important;
    }
}
/* ============================================================ END 
   ============================================================ */