/* ==========================================================================
   IVONIX HOMEPAGE  (loaded only on the IVONIX Homepage template)
   Brand navy #192465 · accent gold #dc9814
   ========================================================================== */
.ivx-home{ --navy:#192465; --gold:#dc9814; --ink:#1a1a1a; --muted:#6b7280; --line:#e6e8ee; --bg:#f3f4f7; 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:#0e1640; }
.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 BRAND (square tiles) ---------------- */
.ivx-brand-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.ivx-brand-tile{ display:block; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:#fff; aspect-ratio:1; }
.ivx-brand-tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.ivx-brand-tile:hover{ box-shadow:0 8px 22px rgba(16,24,64,.16); }
.ivx-brand-tile:hover img{ transform:scale(1.05); }

/* ---------------- 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), #0e1640); }
.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; }

/* ---------------- AMAZON-STYLE SHOWCASE ---------------- */
.ivx-showcase{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ivx-showcase-card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px; }
.ivx-showcase-card h3{ margin:0 0 14px; font-size:17px; font-weight:700; color:var(--ink); }
.ivx-showcase-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ivx-showcase-thumb{ display:block; background:#f6f7f9; border-radius:8px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ivx-showcase-thumb img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.ivx-showcase-link{ display:inline-block; margin-top:14px; font-size:13px; font-weight:600; color:var(--navy); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1024px){
	.ivx-cat-grid{ grid-template-columns:repeat(3,1fr); }
	.ivx-brand-grid{ grid-template-columns:repeat(3,1fr); }
	.ivx-showcase{ grid-template-columns:repeat(2,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-brand-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; }
	.ivx-showcase{ grid-template-columns:1fr; }
}