/* ==========================================================================
   IVONIX HOMEPAGE  (loaded only on the IVONIX Homepage template)
   Brand navy #0d245e · accent gold #f5821f
   ========================================================================== */
.ivx-home{ --navy:#0d245e; --gold:#f5821f; --ink:#1a1a1a; --muted:#6b7280; --line:#e6e8ee; --bg:#fafbfd; background:var(--bg); padding-bottom:48px; }
.ivx-home *{ box-sizing:border-box; }
.ivx-container{ max-width:1280px; margin:0 auto; padding:0 16px; }
.ivx-section{ margin-top:34px; }
.ivx-section-head{ display:flex; align-items:center; justify-content:space-between; margin:0 0 16px; }
.ivx-section-head h2{ font-size:22px; font-weight:700; color:var(--ink); margin:0; letter-spacing:-.3px; }
.ivx-view-all{ font-size:14px; font-weight:600; color:var(--navy); }

/* ---------------- HERO BLOCK ---------------- */
.ivx-hero-wrap{ display:grid; grid-template-columns:250px 1fr; gap:16px; padding-top:18px; }
.ivx-cat-menu{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; align-self:start; }
.ivx-cat-menu-head{ background:var(--navy); color:#fff; font-weight:600; font-size:14px; padding:12px 16px; }
.ivx-cat-menu ul{ list-style:none; margin:0; padding:6px 0; }
.ivx-cat-menu li a{ display:flex; align-items:center; justify-content:space-between; padding:9px 16px; font-size:14px; color:#333; transition:background .15s,color .15s; }
.ivx-cat-menu li a:hover{ background:#f5f6fa; color:var(--navy); }
.ivx-cat-menu li a i{ font-style:normal; color:#bbb; }
.ivx-cat-menu li a:hover i{ color:var(--navy); }
.ivx-cat-menu-all{ display:block; text-align:center; padding:11px; font-size:13px; font-weight:600; color:var(--navy); border-top:1px solid var(--line); }

.ivx-hero{ display:flex; flex-direction:column; gap:16px; min-width:0; }

/* slider */
.ivx-slider{ position:relative; border-radius:12px; overflow:hidden; background:#0d2e7a; }
.ivx-slides{ position:relative; }
.ivx-slide{ display:none; }
.ivx-slide.is-active{ display:block; animation:ivxfade .5s ease; }
.ivx-slide img{ width:100%; height:auto; display:block; aspect-ratio:5/2; object-fit:cover; }
@keyframes ivxfade{ from{opacity:.3} to{opacity:1} }
.ivx-slide-nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border:none; border-radius:50%; background:rgba(255,255,255,.85); color:var(--navy); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.ivx-slide-nav:hover{ background:#fff; }
.ivx-slide-nav.prev{ left:14px; } .ivx-slide-nav.next{ right:14px; }
.ivx-dots{ position:absolute; bottom:12px; left:0; right:0; display:flex; gap:7px; justify-content:center; }
.ivx-dots button{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.5); cursor:pointer; padding:0; }
.ivx-dots button.is-active{ background:#fff; width:22px; border-radius:5px; }

/* promo cards */
.ivx-promos{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ivx-promo{ border-radius:10px; overflow:hidden; display:block; }
.ivx-promo img{ width:100%; height:auto; display:block; aspect-ratio:980/440; object-fit:cover; transition:transform .3s; }
.ivx-promo:hover img{ transform:scale(1.03); }

/* ---------------- SHOP BY CATEGORY (gradient cards — legacy, unused) ---------------- */
.ivx-cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ivx-cat-card{ position:relative; border-radius:12px; overflow:hidden; min-height:150px; display:flex; color:#fff;
	background:linear-gradient(135deg, var(--c), #0d2e7a); }
.ivx-cat-card-body{ position:relative; z-index:2; padding:18px; }
.ivx-cat-card h3{ margin:0 0 6px; font-size:18px; font-weight:700; color:#fff; }
.ivx-cat-card-link{ font-size:13px; font-weight:600; opacity:.9; }
.ivx-cat-card img{ position:absolute; right:-6px; bottom:-6px; width:46%; max-height:88%; object-fit:contain; z-index:1; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)); transition:transform .3s; }
.ivx-cat-card:hover img{ transform:scale(1.06) rotate(-2deg); }

/* ---------------- PRODUCT CAROUSEL + CARDS (Lenovo style) ---------------- */
.ivx-carousel{ position:relative; }
.ivx-car-track{ display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 4*16px)/5); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:4px; -ms-overflow-style:none; scrollbar-width:none; }
.ivx-car-track::-webkit-scrollbar{ display:none; }
.ivx-car-nav{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border:1px solid var(--line); border-radius:50%; background:#fff; color:var(--navy); font-size:22px; cursor:pointer; z-index:5; box-shadow:0 4px 14px rgba(0,0,0,.12); display:flex; align-items:center; justify-content:center; }
.ivx-car-nav.prev{ left:-18px; } .ivx-car-nav.next{ right:-18px; }
.ivx-car-nav:hover{ background:var(--navy); color:#fff; }

.ivx-card{ position:relative; background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px; scroll-snap-align:start; display:flex; flex-direction:column; transition:box-shadow .2s,border-color .2s; }
.ivx-card:hover{ box-shadow:0 8px 24px rgba(16,24,64,.12); border-color:#d2d6e2; }
.ivx-card-actions{ display:flex; align-items:center; justify-content:space-between; min-height:22px; }
.ivx-compare{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted); cursor:pointer; }
.ivx-compare input{ accent-color:var(--navy); }
.ivx-wish{ border:none; background:none; color:#c2c6d2; cursor:pointer; padding:2px; line-height:0; transition:color .15s,transform .15s; }
.ivx-wish:hover{ color:#e23744; transform:scale(1.12); }
.ivx-card-img{ display:block; text-align:center; padding:10px 4px; }
.ivx-card-img img{ height:150px; width:auto; max-width:100%; object-fit:contain; display:inline-block; mix-blend-mode:multiply; }
.ivx-card-title{ display:block; font-size:13px; line-height:1.35; color:var(--ink); font-weight:600; height:36px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ivx-card-title:hover{ color:var(--navy); }
.ivx-card-rating{ display:flex; align-items:center; gap:2px; margin:7px 0 4px; }
.ivx-star{ color:#d7d9e0; font-size:13px; }
.ivx-star.on{ color:var(--gold); }
.ivx-rc{ font-size:11px; color:var(--muted); margin-left:4px; }
.ivx-card-price{ margin-top:auto; }
.ivx-starting{ display:block; font-size:11px; color:var(--muted); }
.ivx-card-price .amount, .ivx-card-price bdi{ font-size:16px; font-weight:700; color:var(--ink); }
.ivx-card-price del{ font-size:12px; color:#9aa0ad; font-weight:400; margin-left:4px; }
.ivx-card-ship{ margin-top:6px; font-size:11px; font-weight:700; color:#1a7f37; letter-spacing:.2px; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1024px){
	.ivx-cat-grid{ grid-template-columns:repeat(3,1fr); }
	.ivx-car-track{ grid-auto-columns:calc((100% - 3*16px)/4); }
}
@media (max-width:768px){
	.ivx-hero-wrap{ grid-template-columns:1fr; }
	.ivx-cat-menu{ display:none; }            /* category list lives in mobile menu */
	.ivx-cat-grid{ grid-template-columns:repeat(2,1fr); }
	.ivx-car-track{ grid-auto-columns:calc((100% - 1*16px)/2); }
	.ivx-car-nav{ display:none; }
	.ivx-section-head h2{ font-size:19px; }
}
@media (max-width:480px){
	.ivx-promos{ grid-template-columns:1fr; }
}

/* ==========================================================================
   HERO BANNER + SHOP BY BRAND (circular logos) — added below the header,
   above the product carousels.
   ========================================================================== */
.ivx-hero-section{ margin-top:6px; }
.ivx-hero{ display:block; border-radius:12px; overflow:hidden; line-height:0; box-shadow:0 4px 16px rgba(13,36,94,.08); }
.ivx-hero img{ display:block; width:100%; height:auto; }

/* single-row horizontal strip — native swipe on mobile, drag-to-scroll on
   desktop (see home.js). Scrollbar hidden for a clean look. */
.ivx-brands{
	display:flex; flex-wrap:nowrap; gap:14px;
	overflow-x:auto; overflow-y:hidden; padding:4px 2px 10px;
	scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
	-ms-overflow-style:none; scrollbar-width:none; cursor:grab;
}
.ivx-brands::-webkit-scrollbar{ display:none; }
.ivx-brands.is-dragging{ cursor:grabbing; scroll-behavior:auto; user-select:none; }
.ivx-brand{
	width:84px; height:84px; flex:0 0 auto; border-radius:50%;
	background:#fff; border:1px solid var(--line); scroll-snap-align:start;
	display:flex; align-items:center; justify-content:center; padding:14px; box-sizing:border-box;
	transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ivx-brand img{ max-width:100%; max-height:100%; object-fit:contain; }   /* full colour always */
.ivx-brand:hover{ box-shadow:0 6px 18px rgba(13,36,94,.14); transform:translateY(-2px); border-color:#d7dbe8; }
a.ivx-brand{ cursor:inherit; text-decoration:none; }
.ivx-brands.is-dragging a.ivx-brand{ pointer-events:none; }   /* don't follow links mid-drag */
@media (max-width:600px){
	.ivx-brands{ gap:10px; }
	.ivx-brand{ width:66px; height:66px; padding:11px; }
	.ivx-hero{ border-radius:8px; }
}