/* XStore visual refresh: presentation only, no backend behavior changes. */
.topbar { background:#080a0f; border-bottom:1px solid rgba(255,255,255,.06); color:var(--text-light); font-size:12px; }
.topbar-inner { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.topbar i { color:var(--secondary); margin-left:6px; }
.navbar-inner { position:relative; min-height:54px; display:flex; align-items:center; justify-content:center; }
.header-right { position:absolute; right:0; top:50%; transform:translateY(-50%); }
.header-left { position:absolute; left:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:8px; }
.header-left .logo { position:static; transform:none; }
.navbar-inner .mobile-toggle { position:absolute; right:0; display:none; }
.navbar { padding:14px 0; background:rgba(9,11,16,.94); }
.desktop-menu { display:flex; justify-content:center; }
.nav-menu { gap:25px; }
.nav-menu a { display:inline-flex; align-items:center; gap:7px; font-size:14px; }
.nav-chevron { font-size:10px; color:var(--text-light); }
.nav-actions { display:flex; align-items:center; gap:8px; }
.search-box { width:min(300px,24vw); border:1px solid rgba(255,255,255,.07); }
.basket-control { position:relative; min-height:44px; display:inline-flex; align-items:center; gap:9px; padding:0 14px; border:1px solid #e7e9ef; border-radius:10px; background:#f4f5f8; color:#3d4350; white-space:nowrap; }
.basket-control:hover { background:var(--primary); color:#fff; }
.basket-control-text { font-size:12px; }
.basket-control .cart-badge { position:static; width:20px; height:20px; flex:0 0 20px; }
.mega-menu { top:calc(100% + 16px); right:-20px; left:auto; width:min(760px,70vw); max-height:70vh; overflow-y:auto; display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:26px 24px; padding:26px; border-radius:12px; background:#11151f; }
.mega-parent:hover .mega-menu, .mega-parent:focus-within .mega-menu { opacity:1; visibility:visible; transform:translateY(0); }
.mega-column { gap:9px; align-items:flex-start; }
.mega-column a { width:100%; color:var(--text-light); font-size:13px; }
.mega-column a:hover { color:#fff; transform:translateX(-3px); }
.mega-column .mega-title { color:#fff; font-weight:800; font-size:15px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.hero-section { margin-top:22px; }
.hero-slider, .side-banner { border-radius:16px; overflow:hidden; }
.hero-slider img { filter:none; }
.hero-overlay { background:linear-gradient(90deg,rgba(7,9,14,.1),rgba(7,9,14,.82)); padding:clamp(24px,5vw,70px); }
.hero-overlay h1 { max-width:600px; font-size:clamp(24px,3.2vw,48px); }
.hero-btn { border-radius:8px; background:var(--primary); }
.section-header { border-bottom:1px solid var(--border); padding-bottom:14px; margin-bottom:22px; }
.section-header h2 { font-size:clamp(20px,2vw,28px); }
.featured-products, .category-section { padding-top:36px; }
.products-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.product-card { border:1px solid rgba(255,255,255,.07); border-radius:12px; background:#11151f; box-shadow:none; }
.product-card:hover { transform:translateY(-5px); border-color:rgba(108,92,231,.7); box-shadow:0 16px 34px rgba(0,0,0,.25); }
.product-image { height:210px; padding:16px; }
.product-body { padding:14px 16px 16px; }
.product-body h3 { font-size:15px; line-height:1.8; }
.add-cart-btn { border-radius:8px; min-height:42px; }
.footer { margin-top:64px; background:#080a0f; border-top:1px solid var(--border); }
.footer-trust { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.footer-trust div { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--text-light); font-size:13px; }
.footer-trust i { color:var(--secondary); font-size:20px; }
.footer-main { padding-top:38px; }
.footer h5 { color:#fff; font-size:15px; }
.footer-bottom { margin-top:32px; padding:18px 0; border-top:1px solid rgba(255,255,255,.08); }
.offcanvas { background:#0d1119; color:#fff; }
.offcanvas-header { border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-menu { list-style:none; padding:0; margin:0; }
.mobile-menu li { border-bottom:1px solid rgba(255,255,255,.07); }
.mobile-menu a { display:flex; align-items:center; gap:12px; padding:16px 4px; color:var(--text-light); }
.mobile-menu a:hover { color:#fff; }
.mobile-menu i { width:20px; color:var(--secondary); text-align:center; }

@media (max-width: 991px) {
    .topbar-inner span:nth-child(2) { display:none; }
    .desktop-menu { display:none; }
    .mobile-toggle { display:inline-flex; }
    .navbar-inner { gap:12px; }
    .header-right { right:12px; }
    .header-left { left:12px; }
    .search-box { width:min(250px,42vw); }
    .products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .footer-trust { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 576px) {
    .topbar-inner { justify-content:center; }
    .topbar-inner span:nth-child(3) { display:none; }
    .navbar { padding:10px 0; }
    .logo { font-size:19px; }
    .logo i { font-size:23px; }
    .header-right { right:52px; }
    .header-left { left:10px; }
    .navbar-inner .mobile-toggle { display:inline-flex; }
    .search-box { width:42px; padding:0; justify-content:center; background:transparent; border:0; }
    .search-box input { display:none; }
    .search-box i { font-size:17px; }
    .icon-btn { width:40px; height:40px; border-radius:10px; }
    .basket-control { width:40px; min-height:40px; padding:0; justify-content:center; border-radius:10px; }
    .basket-control-text { display:none; }
    .basket-control .cart-badge { position:absolute; top:-5px; right:-5px; }
    .hero-overlay { padding:22px; }
    .hero-overlay h1 { font-size:23px; }
    .hero-overlay p { font-size:12px; }
    .products-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .product-image { height:155px; padding:10px; }
    .product-body { padding:10px; }
    .product-body h3 { font-size:12px; }
    .footer-trust { grid-template-columns:repeat(2,1fr); gap:12px 5px; }
    .footer-trust div { flex-direction:column; text-align:center; font-size:11px; }
}

/* Shared inner-page visual language */
body { background:var(--bg); color:var(--text); }
.header, .navbar { background:#fff; color:var(--text); }
.navbar { box-shadow:0 3px 18px rgba(31,38,57,.06); border-bottom:1px solid #eceef3; }
.logo, .logo:hover { color:#20232b; }
.logo i { color:var(--primary); }
.nav-menu a { color:#4b5261; }
.nav-menu a:hover { color:var(--primary); }
.icon-btn { background:#f4f5f8; color:#3d4350; border:1px solid #e7e9ef; }
.icon-btn:hover { background:var(--primary); color:#fff; }
.search-box { background:#f5f6f9; border-color:#e6e8ee; }
.search-box input { color:#20232b; }
.mega-menu { background:#fff; border-color:#e5e7ed; box-shadow:0 18px 45px rgba(31,38,57,.13); }
.mega-column a { color:#687083; }
.mega-column a:hover, .mega-column .mega-title { color:var(--primary); }
.mega-column .mega-title { border-color:#eceef3; }
.hero-overlay { background:linear-gradient(90deg,rgba(19,24,36,.04),rgba(19,24,36,.72)); }
.filter-box, .profile-sidebar, .profile-card, .auth-card, .cart-items, .cart-summary, .contact-card, .contact-info, .article-card, .product-info, .product-gallery, .product-tabs, .payment-result-card, .about-card, .products-toolbar { background:#fff; border-color:#e6e8ee; box-shadow:0 8px 28px rgba(31,38,57,.05); }
.product-card, .blog-card, .dashboard-card, .order-card, .address-card { background:#fff; border-color:#e6e8ee; box-shadow:0 8px 24px rgba(31,38,57,.05); }
.product-card:hover { border-color:rgba(230,69,69,.48); box-shadow:0 16px 34px rgba(31,38,57,.12); }
.product-image, .main-image, .cart-item img, .price-box, .discount-box, .shipping-box, .products-toolbar select, .form-control, .form-select { background:#f7f8fa; }
.footer { background:#151922; border-top:0; }
.footer h5, .footer-logo, .footer-logo:hover { color:#fff; }
.offcanvas { background:#fff; color:#20232b; }
.mobile-menu a { color:#4b5261; }
.mobile-menu a:hover { color:var(--primary); }
.mobile-menu li { border-color:#eceef3; }
.page-title, .breadcrumb { margin-top:28px; }
.page-title { padding:30px 0 14px; border-bottom:1px solid var(--border); }
.page-title h1 { font-size:clamp(24px,3vw,38px); font-weight:800; margin-bottom:8px; }
.page-title p, .breadcrumb { color:var(--text-light); }
.breadcrumb a { color:var(--secondary); }
.filter-box, .profile-sidebar, .profile-card, .auth-card, .cart-items, .cart-summary, .contact-card, .contact-info, .article-card, .product-info, .product-gallery, .product-tabs, .payment-result-card, .about-card { background:#11151f; border:1px solid rgba(255,255,255,.07); border-radius:14px; }
.filter-box { padding:18px; }
.filter-box h5 { color:#fff; font-size:15px; }
.filter-sidebar { gap:14px; }
.products-content { padding-top:24px; }
.products-toolbar { background:#11151f; border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:12px 16px; }
.products-toolbar select, .form-control, .form-select { background:#0d1119; border:1px solid rgba(255,255,255,.12); color:#fff; }
.products-toolbar select:focus, .form-control:focus, .form-select:focus { background:#0d1119; color:#fff; border-color:var(--primary); box-shadow:0 0 0 3px rgba(108,92,231,.15); }

.product-page, .cart-page, .profile-page, .auth-page, .article-page, .blog-page, .contact-page, .about-page, .payment-result-page { padding:18px 0 50px; }
.product-gallery { padding:18px; }
.main-image { min-height:430px; display:flex; align-items:center; justify-content:center; background:#0b0e15; border-radius:12px; }
.main-image img { max-height:410px; object-fit:contain; }
.thumbnail-images { display:flex; gap:10px; overflow:auto; padding-top:14px; }
.thumbnail-images img { width:70px; height:70px; object-fit:cover; border-radius:9px; border:2px solid transparent; background:#0b0e15; }
.thumbnail-images img.active, .thumbnail-images img:hover { border-color:var(--primary); }
.product-info { padding:28px; height:100%; }
.product-info h1 { font-size:clamp(24px,3vw,38px); line-height:1.5; }
.product-rating i { color:#ffc107; }
.stock-status { color:var(--success); margin:14px 0; }
.price-box { background:#0d1119; border:1px solid var(--border); border-radius:10px; padding:16px; display:flex; flex-direction:column; gap:5px; }
.price-box strong { color:#fff; font-size:25px; }
.buy-btn, .primary-btn, .checkout-btn { border:0; border-radius:9px; background:var(--primary); color:#fff; min-height:46px; padding:0 22px; }
.buy-btn:hover, .primary-btn:hover, .checkout-btn:hover { background:var(--primary-hover); color:#fff; }
.wishlist-outline { border:1px solid var(--border); background:#0d1119; color:#fff; border-radius:9px; min-width:48px; }
.wishlist-outline.active { color:var(--danger); border-color:var(--danger); }
.product-tabs { margin-top:32px; padding:22px; }
.product-tab-nav { gap:8px; border-bottom:1px solid var(--border); padding-bottom:12px; }
.product-tab-nav .nav-link { color:var(--text-light); border-radius:8px; }
.product-tab-nav .nav-link.active { background:var(--primary); color:#fff; }
.product-spec-table { color:var(--text-light); }

.cart-item { display:grid; grid-template-columns:86px 1fr auto auto auto; align-items:center; gap:16px; padding:16px; border-bottom:1px solid rgba(255,255,255,.07); }
.cart-item:last-child { border-bottom:0; }
.cart-item img { width:86px; height:86px; object-fit:contain; background:#0b0e15; border-radius:10px; }
.cart-info h5 { color:#fff; margin-bottom:6px; }
.cart-info span, .cart-price { color:var(--text-light); }
.cart-summary { padding:24px; position:sticky; top:110px; }
.summary-row { display:flex; justify-content:space-between; gap:10px; padding:12px 0; color:var(--text-light); border-bottom:1px dashed rgba(255,255,255,.1); }
.summary-row strong { color:#fff; }
.discount-box, .shipping-box { background:#0d1119; border-radius:10px; padding:12px; }

.profile-sidebar { padding:18px; }
.profile-user { text-align:center; padding-bottom:18px; border-bottom:1px solid var(--border); }
.profile-avatar { margin:0 auto 12px; width:64px; height:64px; display:grid; place-items:center; border-radius:50%; background:rgba(108,92,231,.18); color:var(--secondary); font-size:24px; }
.profile-menu { list-style:none; padding:0; margin:14px 0 0; }
.profile-menu li a { display:flex; align-items:center; gap:10px; padding:12px 10px; color:var(--text-light); border-radius:8px; }
.profile-menu li.active a, .profile-menu li a:hover { background:rgba(108,92,231,.15); color:#fff; }
.dashboard-card, .order-card, .address-card { background:#11151f; border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:18px; }

.auth-page { min-height:60vh; display:grid; place-items:center; }
.auth-card { width:min(100%,480px); padding:32px; box-shadow:0 20px 70px rgba(0,0,0,.25); }
.auth-logo { display:flex; justify-content:center; gap:10px; color:#fff; font-size:24px; font-weight:800; margin-bottom:22px; }
.auth-logo i { color:var(--primary); }
.auth-btn { width:100%; min-height:46px; border:0; border-radius:9px; background:var(--primary); color:#fff; }
.otp-input { background:#0d1119!important; color:#fff!important; border:1px solid var(--border)!important; }

.blog-hero { background:linear-gradient(135deg,#171d2d,#11151f); border-radius:16px; padding:34px; margin-top:20px; }
.blog-grid { gap:18px; }
.blog-card { background:#11151f; border:1px solid rgba(255,255,255,.07); border-radius:12px; overflow:hidden; }
.blog-body { padding:18px; }
.article-card { overflow:hidden; }
.article-content, .article-body { padding:26px; }
.article-cover { max-height:460px; width:100%; object-fit:cover; }
.article-meta, .article-share { color:var(--text-light); }
.contact-card, .contact-info, .about-card { padding:24px; }
.payment-result-page { min-height:65vh; display:grid; place-items:center; }
.payment-result-card { width:min(100%,650px); padding:34px; text-align:center; }

@media (max-width: 767px) {
    .topbar { display:none; }
    .cart-item { grid-template-columns:62px 1fr auto; gap:10px; }
    .cart-item img { width:62px; height:62px; }
    .cart-item .cart-quantity, .cart-item .cart-price { grid-column:2; }
    .cart-item .remove-item { grid-column:3; grid-row:1; }
    .cart-summary { position:static; }
    .product-info { padding:20px; }
    .main-image { min-height:280px; }
    .main-image img { max-height:270px; }
    .product-tabs { padding:14px; }
    .product-tab-nav { flex-wrap:nowrap; overflow-x:auto; }
}