/*
Theme Name: Shoptimizer Child Theme
Theme URI:
Description: Child theme of Shoptimizer
Author: CommerceGurus
Author URI:
Template: shoptimizer
Version: 1.2.2
License:         	GNU General Public License v2 or later
License URI:     	http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   IVONIX CUSTOMIZATIONS
   Brand navy: #192465
   Sections below are added incrementally. Each block is labelled so it can
   be reviewed/rolled back independently.
   ========================================================================== */

:root{
	--ivx-navy:#192465;
	--ivx-navy-2:#141d52;   /* nav row, slightly darker for depth */
	--ivx-accent:#dc9814;   /* existing gold accent (cart count, search btn) */
}

/* ==========================================================================
   PHASE 1 — NEWEGG-STYLE NAVY HEADER
   ========================================================================== */

/* ---- Whole header navy ---- */
.site-header,
body:not(.header-4) .site-header,
.main-header{
	background-color:var(--ivx-navy) !important;
}

/* ---- Logo: swap dark logo for white version (transparent) ---- */
.site-header .custom-logo-link img,
.site-header img.custom-logo{
	content:url("https://www.shoptechy.co.ke/wp-content/uploads/2026/06/shoptechy-logo-tight.png");
	width:auto !important;
	height:auto !important;
	max-width:210px !important;
	max-height:84px !important;
}

/* ---- Search field: use the THEME'S native search (styled via Customizer).
   No custom overrides here per request — only positioning is handled below. ---- */

/* ---- Cart: white text/icon on navy ---- */
.shoptimizer-cart .cart-contents,
.shoptimizer-cart .cart-contents .amount,
.shoptimizer-cart .woocommerce-Price-amount,
.shoptimizer-cart-icon i{ color:#fff !important; }
.shoptimizer-cart-icon svg{ stroke:#fff !important; }

/* ---- Custom account block (Sign In / Register + Orders) ---- */
.ivonix-header-account{
	display:flex;
	align-items:center;
	gap:22px;
	white-space:nowrap;
}
.ivonix-header-account .ivx-acc-link{
	display:flex;
	align-items:center;
	gap:8px;
	color:#fff !important;
	line-height:1.1;
}
.ivonix-header-account .ivx-acc-link:hover{ opacity:.8; }
.ivonix-header-account .ivx-acc-icon{ stroke:#fff; flex:0 0 auto; }
.ivonix-header-account .ivx-acc-text{ display:flex; flex-direction:column; }
.ivonix-header-account .ivx-acc-text small{ font-size:11px; opacity:.8; font-weight:400; }
.ivonix-header-account .ivx-acc-text strong{ font-size:14px; font-weight:600; }

/* ==========================================================================
   DESKTOP HEADER LAYOUT (>= 993px)
   ========================================================================== */
@media (min-width:993px){
	/* top row as a flex bar: logo | search | account | cart */
	.main-header.col-full{
		display:flex !important;
		align-items:center;
		gap:26px;
		padding-top:14px !important;
		padding-bottom:14px !important;
	}
	.main-header .site-branding{ order:0; flex:0 0 auto; margin:0; }
	.main-header .site-search{ order:1; flex:1 1 auto; max-width:680px; margin:0; }
	.main-header .ivonix-header-account{ order:2; flex:0 0 auto; margin-left:auto; }
	.main-header .site-header-cart{ order:3; flex:0 0 auto; display:flex !important; align-items:center; margin:0; }

	/* nav row: navy, categories only (hide duplicate search + cart) */
	.col-full-nav{ background-color:var(--ivx-navy-2) !important; }
	.col-full-nav .site-search{ display:none !important; }
	.col-full-nav .site-header-cart{ display:none !important; }

	/* category links: crisp white */
	.menu-primary-menu-container > ul > li > a,
	.menu-primary-menu-container > ul > li.nolink > span{ color:#fff !important; }
}

/* ==========================================================================
   MOBILE HEADER ( <= 992px )
   ========================================================================== */
@media (max-width:992px){
	/* keep mobile clean: hide the text account block (account lives in mobile menu) */
	.ivonix-header-account{ display:none !important; }
	/* logo white version already applied; ensure it fits mobile bar */
	.site-header .custom-logo-link img,
	.site-header img.custom-logo{ max-height:60px !important; max-width:172px !important; }

	/* hamburger: transparent on navy, white bars + white label */
	.site-branding button.menu-toggle,
	.site-branding button.menu-toggle:hover,
	.m-search-bh .site-search,
	.m-search-toggled .site-search{ background-color:transparent !important; }
	.menu-toggle .bar{ background-color:#fff !important; }
	.menu-toggle .bar-text,
	.menu-toggle:hover .bar-text{ color:#fff !important; }

	/* mobile search + account toggle icons white */
	.mobile-search-toggle svg,
	.shoptimizer-myaccount svg{ stroke:#fff !important; }
}

/* ==========================================================================
   PHASE 2 — IVONIX HOMEPAGE COMPONENTS (template-ivonix-home.php)
   Brand grid, Lenovo-style product cards, carousels, Amazon-style showcase.
   ========================================================================== */
.ivx-home{ --ivx-line:#e6e8f0; color:#1d2333; }
.ivx-container,.ivx-home > .ivx-section{ max-width:1200px; margin-left:auto; margin-right:auto; }
.ivx-section{ padding:22px 16px; }
/* tighten the gap between the navbar and the first (Featured) row */
.ivx-home > .ivx-section:first-child{ padding-top:8px; }
.ivx-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 16px; }
.ivx-section-head h2{ font-size:22px; font-weight:700; color:var(--ivx-navy); margin:0; }
.ivx-view-all{ font-size:14px; font-weight:600; color:var(--ivx-navy); white-space:nowrap; text-decoration:none; }
.ivx-view-all:hover{ color:var(--ivx-accent); }

/* ---- Shop by Brand: compact tiles ---- */
.ivx-brand-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:14px; }
.ivx-brand-tile{ display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--ivx-line); border-radius:10px; padding:8px 10px; min-height:72px; transition:box-shadow .15s,border-color .15s,transform .15s; }
.ivx-brand-tile:hover{ border-color:var(--ivx-navy); box-shadow:0 4px 14px rgba(25,36,101,.12); transform:translateY(-2px); }
.ivx-brand-tile img{ max-width:100%; max-height:68px; width:auto; height:auto; object-fit:contain; }

/* Mobile: drag horizontally instead of stacking into a tall grid */
@media (max-width:782px){
	.ivx-brand-grid{ display:flex; grid-template-columns:none; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:12px; scrollbar-width:thin; }
	.ivx-brand-grid::-webkit-scrollbar{ height:6px; }
	.ivx-brand-grid::-webkit-scrollbar-thumb{ background:#c7ccdd; border-radius:8px; }
	.ivx-brand-tile{ flex:0 0 auto; width:128px; scroll-snap-align:start; }
}

/* ---- Horizontal product carousels ---- */
.ivx-carousel{ position:relative; }
.ivx-car-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 2px 14px; scrollbar-width:thin; }
.ivx-car-track::-webkit-scrollbar{ height:8px; }
.ivx-car-track::-webkit-scrollbar-thumb{ background:#c7ccdd; border-radius:8px; }
.ivx-car-nav{ position:absolute; top:38%; z-index:2; width:38px; height:38px; border:none; border-radius:50%; background:#fff; color:var(--ivx-navy); font-size:22px; line-height:1; box-shadow:0 2px 10px rgba(0,0,0,.18); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ivx-car-nav.prev{ left:-6px; } .ivx-car-nav.next{ right:-6px; }
.ivx-car-nav:hover{ background:var(--ivx-navy); color:#fff; }
@media (max-width:782px){ .ivx-car-nav{ display:none; } }

/* ---- Product card ---- */
.ivx-card{ position:relative; flex:0 0 auto; width:216px; scroll-snap-align:start; background:#fff; border:1px solid var(--ivx-line); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:7px; transition:box-shadow .15s,border-color .15s; }
.ivx-card:hover{ border-color:#cfd5ec; box-shadow:0 6px 18px rgba(25,36,101,.10); }
.ivx-card-actions{ display:flex; align-items:center; justify-content:space-between; min-height:20px; }
.ivx-compare{ display:flex; align-items:center; gap:5px; font-size:12px; color:#6a7088; cursor:pointer; }
.ivx-compare input{ margin:0; }
.ivx-wish{ border:none; background:none; color:#9aa0b8; cursor:pointer; padding:0; line-height:0; }
.ivx-wish:hover{ color:var(--ivx-accent); }
.ivx-card-img{ display:block; text-align:center; height:170px; }
.ivx-card-img img{ max-width:100%; max-height:170px; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
.ivx-card-title{ font-size:13.5px; line-height:1.4; color:#1d2333; text-decoration:none; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:38px; }
.ivx-card-title:hover{ color:var(--ivx-navy); }
.ivx-card-rating{ display:flex; align-items:center; gap:1px; font-size:13px; }
.ivx-star{ color:#d7d9e2; line-height:1; } .ivx-star.on{ color:var(--ivx-accent); }
.ivx-rc{ color:#6a7088; font-size:12px; margin-left:4px; }
.ivx-card-price{ font-size:16px; font-weight:700; color:var(--ivx-navy); margin-top:auto; }
.ivx-card-price .ivx-starting{ display:block; font-size:11px; font-weight:400; color:#6a7088; }
.ivx-card-ship{ font-size:11.5px; color:#2e7d32; }

/* ---- Amazon-style showcase ---- */
.ivx-showcase{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.ivx-showcase-card{ background:#fff; border:1px solid var(--ivx-line); border-radius:12px; padding:18px; }
.ivx-showcase-card h3{ font-size:17px; font-weight:700; color:var(--ivx-navy); margin:0 0 14px; }
.ivx-showcase-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; text-decoration:none; }
.ivx-showcase-thumb{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; background:#f6f7fb; border-radius:8px; overflow:hidden; }
.ivx-showcase-thumb img{ max-width:88%; max-height:88%; width:auto; height:auto; object-fit:contain; mix-blend-mode:multiply; }
.ivx-showcase-link{ display:inline-block; margin-top:14px; font-size:14px; font-weight:600; color:var(--ivx-navy); text-decoration:none; }
.ivx-showcase-link:hover{ color:var(--ivx-accent); }

/* ---- Company blurb band (light blue, full-bleed, above the footer) ---- */
.ivx-about{ background:#e8f1fb; padding:30px 16px; margin-top:14px; }
.ivx-about-inner{ max-width:900px; margin:0 auto; text-align:center; }
.ivx-about h2{ font-size:20px; font-weight:700; color:var(--ivx-navy); margin:0 0 10px; }
.ivx-about p{ font-size:14.5px; line-height:1.75; color:#3a4256; margin:0; }