@charset "UTF-8";
:root {
  --nav-bg: #10233c;
  --nav-alt: #132b4a;
  --accent: #17c964;
  --accent-2: #ffc857;
  --surface: #ffffff;
  --muted: #6b7485;
  --text: #162037;
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.12);
  --shadow-md: 0 10px 24px rgba(0,0,0,0.1);
  --radius-lg: 18px;
  --radius-md: 14px;
}

body { background: #eef3f9; }

#wrapper { background: transparent; }

.header-v2 { margin-bottom: 0; border:0; background: var(--nav-bg); padding:0; }
.header-v2 .header-top { background: var(--nav-bg); color: #fff; box-shadow: var(--shadow-md); padding:6px 0; }
.header-top__inner { display:flex; align-items:center; gap:14px; padding:12px 0; justify-content:space-between; flex-wrap:nowrap; row-gap:8px; }
.header-logo{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.header-search.desktop-only{ flex:1 1 480px; max-width:640px; }
.header-actions{ flex:0 0 auto; }
.desktop-only { display:block; }
@media (max-width:767px){ .desktop-only{display:none!important;} }

.hero-actions-cta { display:none; }
.hero-tabs-mobile { display:none; }

@media (max-width:767px) {
  .section-tabs { display:none !important; }
  .hero-actions-cta { display:flex !important; }
  .hero-tabs-mobile { display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0 0; justify-content:center; }
  .hero-tabs-mobile .tab-chip { font-size:14px; padding:8px 10px; }
  .mobile-menu-toggle { display:flex !important; opacity:1 !important; position: relative !important; z-index: 99999 !important; }
}

.mobile-menu-toggle{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; color:#fff; border:1px solid rgba(255,255,255,0.6); border-radius:12px; background:rgba(255,255,255,0.12); box-shadow:0 6px 12px rgba(0,0,0,0.15); z-index:3; opacity:1; }
.mobile-menu-toggle:focus,
.mobile-menu-toggle:active,
.mobile-menu-toggle.collapsed,
.mobile-menu-toggle:not(.collapsed){ color:#fff; border-color:rgba(255,255,255,0.6); background:rgba(255,255,255,0.12); opacity:1; }

.header-logo img { height:90px; width:auto; object-fit:contain; }
.header-logo img{ background:transparent!important; }
.header-search-form { display:flex; align-items:center; gap:10px; background:#fff; border-radius: 16px; padding:10px 14px; min-width:320px; box-shadow: var(--shadow-md); border:1px solid #dfe6f0; height:56px; }
.header-search-form input{ border:0; flex:1; font-size:15px; outline:none; height:32px; color:var(--text); }
.header-search-form input::placeholder{ color:#8b96a8; }
.header-search-form i{ color:#93a0b5; }
.header-search-form button{ background:var(--accent); color:#0f1f34; border:0; border-radius:12px; padding:10px 12px; font-weight:800; height:38px; width:46px; display:flex; align-items:center; justify-content:center; }
.header-search-form button i{ color:#fff !important; }

.header-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.action-link{ color:#fff; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); border-radius:12px; padding:10px 12px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.cart-link{ background:var(--accent); color:#0f1f34; border:none; }
.cart-count{ background:#fff; color:var(--nav-bg); border-radius:20px; padding:3px 8px; font-weight:800; margin-left:6px; }

.header-mid{ background: var(--nav-bg); padding:10px 0; }

.header-nav{ background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-top:4px; margin-bottom:6px; }
.nav-scroll{ display:flex; align-items:center; gap:8px; overflow-x:auto; padding:10px 4px; flex-wrap:wrap; justify-content:flex-start; }
.nav-pill{ background:#f1f4fa; color:var(--text); padding:10px 14px; border-radius:14px; text-decoration:none; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; border:1px solid #e4e8ef; font-weight:700; box-shadow:0 8px 14px rgba(0,0,0,0.05); }
.nav-pill i{ color: var(--accent); }
.nav-chip{ background:#fff; color:var(--text); border-radius:16px; padding:10px 14px; display:inline-flex; align-items:center; gap:10px; text-decoration:none; box-shadow: 0 10px 18px rgba(0,0,0,0.06); white-space:nowrap; border:1px solid #e8ecf2; }
.nav-chip img{ width:24px; height:24px; object-fit:contain; }
.divider{ width:1px; height:24px; background:#e6e9ef; }

.hero-banner{ position:relative; border-radius:20px; overflow:hidden; margin:12px auto; min-height:300px; background-size:cover; background-position:center; box-shadow: var(--shadow-lg); }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(16,35,60,0.9) 0%, rgba(16,35,60,0.55) 55%, rgba(16,35,60,0.05) 100%); }
.hero-container{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:36px 18px; gap:24px; }
.hero-text{ color:#fff; max-width:520px; }
.hero-text h1{ font-size:38px; font-weight:800; margin:6px 0; }
.eyebrow{ text-transform:uppercase; letter-spacing:1px; opacity:0.9; font-weight:700; margin:0; }
.subtitle{ font-size:18px; opacity:0.95; margin:0 0 14px; }
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.hero-actions .pill{ background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); border-radius:30px; padding:7px 12px; font-weight:700; color:#fff; }
.btn-hero{ display:inline-block; margin-top:14px; background:var(--accent); color:#0f1f34; padding:12px 26px; border-radius:999px; font-weight:800; text-decoration:none; box-shadow: var(--shadow-md); }
.hero-side-img{ max-height:240px; border-radius:14px; box-shadow: var(--shadow-md); }

.category-strip{ padding:10px 0 4px; }
.category-strip .container{ background:#fff; border-radius:18px; box-shadow:0 12px 20px rgba(0,0,0,0.06); padding:10px 14px; }
.pill-row{ display:flex; gap:12px; overflow-x:auto; padding:6px 2px; }
.category-chip{ background:#fff; color:var(--text); border-radius:18px; padding:12px 16px; display:inline-flex; align-items:center; gap:10px; box-shadow:0 12px 20px rgba(0,0,0,0.08); text-decoration:none; white-space:nowrap; min-width:150px; justify-content:center; border:1px solid #e6eaf0; }
.category-chip img{ width:34px; height:34px; object-fit:contain; }

.product-section{ padding:12px 0 36px; }
.section-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.section-title{ font-size:20px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:8px; }
.section-tabs{ display:flex; gap:8px; flex-wrap:wrap; background:#0f243f; padding:6px; border-radius:14px; box-shadow:var(--shadow-md); }
.tab-chip{ background:#f1f4fa; color:var(--text); border:0; padding:9px 14px; border-radius:12px; box-shadow:none; cursor:pointer; font-weight:700; }
.tab-chip i{ color: #ff9800; margin-right:6px; }
.tab-chip.active{ background:var(--accent); color:#0f1f34; opacity:1; }

.product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px,1fr)); gap:16px; }
.product-card{ background:#fff; border-radius:16px; box-shadow:var(--shadow-md); overflow:hidden; display:flex; flex-direction:column; }
.card-image{ position:relative; padding-top:70%; background:#ffffff; border-bottom: 1px solid #f4f7fb; z-index:0; overflow:visible; }
.card-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain !important; object-position:center center !important; z-index:1 !important; }
.sale-badge, .product-card .card-image .sale-badge { position:absolute; top:10px; left:10px; background:var(--accent); color:#0f1f34; padding:6px 10px; border-radius:999px; font-weight:800; box-shadow:var(--shadow-md); z-index:999 !important; }
.product-card .card-image img { z-index:10 !important; }
.card-body{ padding:14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-rating i{ color:#ffb400; }
.card-title{ font-size:16px; font-weight:700; color:var(--text); margin:0; line-height:1.3; }
.card-price{ display:flex; align-items:center; gap:8px; margin:0; }
.price-new{ color:var(--accent); font-weight:800; font-size:18px; }
.price-old{ color:#8b95a3; text-decoration:line-through; font-size:13px; }
.card-meta{ display:flex; gap:6px; flex-wrap:wrap; }
.meta-pill{ background:#eef2f7; color:#4a5568; border-radius:9px; padding:4px 8px; font-size:12px; display:inline-flex; align-items:center; gap:6px; }
.card-button{ margin-top:auto; display:inline-block; background:var(--nav-bg); color:#fff; text-align:center; padding:10px; border-radius:12px; font-weight:800; text-decoration:none; transition:all .2s ease; }
.card-button:hover{ background:var(--accent); color:#0f1f34; }

.pager{ margin-top:16px; text-align:center; }
.pager a{ display:inline-block; margin:0 4px; padding:8px 12px; border-radius:10px; background:#fff; color:var(--text); text-decoration:none; box-shadow:var(--shadow-md); }
.pager a.active{ background:var(--accent); color:#0f1f34; font-weight:800; }

.cart-flyout{ position:fixed; top:0; right:0; width:340px; max-width:90%; height:100%; z-index:999; }
.cart-flyout__panel{ background:#fff; height:100%; box-shadow: -8px 0 24px rgba(0,0,0,0.18); display:flex; flex-direction:column; }
.cart-flyout__header{ padding:14px 16px; border-bottom:1px solid #e5e7eb; display:flex; justify-content:space-between; align-items:center; font-weight:700; }
.cart-flyout__body{ flex:1; overflow-y:auto; padding:12px 16px; }
.cart-flyout__footer{ padding:14px 16px; border-top:1px solid #e5e7eb; }
.cart-item{ display:flex; gap:10px; margin-bottom:12px; }
.cart-item img{ width:64px; height:64px; object-fit:contain; background:#f4f6fb; border-radius:12px; }
.cart-item__info{ flex:1; }
.cart-item__title{ margin:0 0 6px; font-weight:700; color:var(--text); }
.cart-item__meta{ font-size:13px; color:var(--muted); display:flex; gap:8px; }

@media (max-width:991px){
  .header-top__inner{ flex-wrap:wrap; }
  .header-actions{ width:100%; justify-content:flex-end; }
  .header-search-form{ min-width:auto; width:100%; }
}
@media (max-width:767px){
  .header-search.desktop-only{ display:none!important; }
  .header-top__inner{ position:relative; gap:8px; padding:10px 0 6px; flex-wrap:nowrap; align-items:center; justify-content:space-between; }
  .mobile-menu-toggle{ order:0; flex:0 0 auto; }
  .header-logo{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); order:1; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
  .header-logo img { height:70px; max-width:200px; width:auto; }
  .header-actions{ order:2; flex:0 0 auto; gap:6px; justify-content:flex-end; width:auto; padding-top:0; }
  .header-actions .action-link:not(.cart-link){ display:inline-flex; }
  .action-link{ padding:8px 10px; border-radius:10px; }
  .cart-link{ padding:8px 12px; }
  .nav-scroll{ gap:6px; padding:8px 4px 6px; flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; white-space:nowrap; max-height:0; transition:max-height .25s ease; }
  .nav-scroll.in,
  .nav-scroll.show{ max-height:120px; }
  .nav-scroll.collapse{ display:block; }
  .nav-scroll.collapse:not(.in):not(.show){ overflow:hidden; }
  .nav-pill{ padding:8px 11px; font-size:13px; border-radius:12px; }
  .nav-chip{ padding:8px 11px; font-size:13px; }
  .category-strip .container{ padding:8px 10px; }
  .pill-row{ gap:10px; }
  .category-chip{ padding:10px 12px; min-width:120px; }
  .hero-banner{ margin:10px 0; }
  .hero-container{ flex-direction:column; align-items:flex-start; }
  .hero-text h1{ font-size:30px; }
  .product-grid{ grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); }
  .header-search-form{ min-width:0 !important; width:100% !important; height:52px; }
}