/*
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: #1a56db
   Sections below are added incrementally. Each block is labelled so it can
   be reviewed/rolled back independently.
   ========================================================================== */

:root{
	--ivx-navy:#1a56db;
	--ivx-navy-2:#123fa8;   /* nav row, slightly darker for depth */
	--ivx-accent:#f5821f;   /* existing gold accent (cart count, search btn) */
}

/* ==========================================================================
   PHASE 1 — LIGHT HEADER (white background + brand-blue accents)
   Rebuilt 2026-07-31 to match prefferedheader.png: white top bar with a
   rounded search + blue search button, a "Call Us Now" phone block, a dark
   account block + cart, and a white nav row carrying the blue department pill
   and delivery/payment badges. Brand blue drives every accent.
   ========================================================================== */

/* ---- Whole header white ---- */
.site-header,
body:not(.header-4) .site-header,
.main-header{
	background-color:#fff !important;
}
.site-header{ border-bottom:1px solid #e7eaf1; }

/* ---- Logo: use the dark/colour logo (no white swap on a white header) ---- */
.site-header .custom-logo-link img,
.site-header img.custom-logo{
	width:auto !important;
	max-height:50px;
}

/* ---- Search: rounded field, grey magnifier at left, blue button at right ---- */
.site-search .widget_product_search{ margin:0; }
.site-search .woocommerce-product-search{ position:relative; display:block; margin:0; }
.site-search .woocommerce-product-search::before{
	content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
	width:18px; height:18px; pointer-events:none;
	background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4'/></svg>");
}
.site-search input.search-field{
	width:100%; height:50px; box-sizing:border-box;
	padding:0 116px 0 44px; margin:0;
	background:#fff; border:1.5px solid #d9dce6; border-radius:28px;
	font-size:15px; color:#14161c;
}
.site-search input.search-field::placeholder{ color:#9aa0ac; }
.site-search input.search-field:focus{
	border-color:var(--ivx-navy); outline:none;
	box-shadow:0 0 0 3px rgba(26,86,219,.12);
}
.site-search input.search-field{ position:relative; z-index:1; }
.site-search .woocommerce-product-search button[type="submit"]{
	position:absolute; top:4px; right:4px; bottom:4px; width:96px;
	z-index:3;
	display:flex !important; align-items:center; justify-content:center;
	visibility:visible !important; opacity:1 !important;
	background:var(--ivx-navy) !important; color:#fff !important;
	border:0 !important; border-radius:24px !important; cursor:pointer;
	font-size:0 !important; padding:0 !important; box-shadow:none !important;
	text-indent:0 !important;
}
.site-search .woocommerce-product-search button[type="submit"]::before{
	content:""; width:20px; height:20px;
	background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4-4'/></svg>");
}
.site-search .woocommerce-product-search button[type="submit"]:hover{ filter:brightness(1.15); }

/* ---- "Call Us Now" click-to-call block ---- */
.ivx-header-call{ display:flex; align-items:center; gap:11px; white-space:nowrap; text-decoration:none; }
.ivx-call-ic{
	display:flex; align-items:center; justify-content:center; flex:0 0 auto;
	width:42px; height:42px; border-radius:50%;
	background:rgba(26,86,219,.08); color:var(--ivx-navy);
}
.ivx-call-ic svg{ width:20px; height:20px; }
.ivx-call-txt{ display:flex; flex-direction:column; line-height:1.15; }
.ivx-call-txt small{ font-size:11px; color:#6b7280; font-weight:500; }
.ivx-call-txt strong{ font-size:16px; color:var(--ivx-navy); font-weight:800; letter-spacing:-.2px; }
.ivx-header-call:hover .ivx-call-ic{ background:rgba(26,86,219,.14); }

/* ---- Account block: dark on white ---- */
.ivonix-header-account{ display:flex; align-items:center; gap:20px; white-space:nowrap; }
.ivonix-header-account .ivx-acc-link{ display:flex; align-items:center; gap:9px; color:#14161c !important; line-height:1.15; text-decoration:none; }
.ivonix-header-account .ivx-acc-link:hover{ color:var(--ivx-navy) !important; }
.ivonix-header-account .ivx-acc-icon{ stroke:var(--ivx-navy); 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; color:#6b7280; font-weight:500; }
.ivonix-header-account .ivx-acc-text strong{ font-size:14px; font-weight:700; color:#14161c; }

/* ---- Cart: dark text, blue icon on white ---- */
.shoptimizer-cart .cart-contents,
.shoptimizer-cart .cart-contents .amount,
.shoptimizer-cart .woocommerce-Price-amount{ color:#14161c !important; }
.shoptimizer-cart-icon i{ color:var(--ivx-navy) !important; }
.shoptimizer-cart-icon svg{ stroke:var(--ivx-navy) !important; }

/* ---- Nav row: blue department pill + delivery/payment badges ---- */
.col-full-nav .ivx-dept-toggle{
	background:var(--ivx-navy) !important; color:#fff !important;
	border-radius:24px; padding:10px 20px; margin:7px 16px 7px 0;
}
.col-full-nav .ivx-dept-toggle svg{ stroke:#fff !important; }
.ivx-nav-badges{ display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0; }
.ivx-badge{
	display:inline-flex; align-items:center; gap:8px;
	padding:7px 14px; border-radius:22px;
	background:#f3f5fa; border:1px solid #e4e7f0;
	font-size:13px; font-weight:600; color:#20242c; white-space:nowrap;
}
.ivx-badge svg{ width:17px; height:17px; color:var(--ivx-navy); flex:0 0 auto; }

/* ==========================================================================
   DESKTOP HEADER LAYOUT (>= 993px)
   ========================================================================== */
@media (min-width:993px){
	/* top row as a flex bar: logo | search | phone | account | cart */
	.main-header.col-full{
		display:flex !important;
		flex-wrap:nowrap !important;
		align-items:center;
		gap:24px;
		padding-top:14px !important;
		padding-bottom:14px !important;
	}
	/* theme's mobile account toggle has no place on the desktop bar */
	.main-header .shoptimizer-myaccount{ display:none !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:640px; margin:0; }
	.main-header .ivx-header-call{ order:2; flex:0 0 auto; margin-left:auto; }
	.main-header .ivonix-header-account{ order:3; flex:0 0 auto; }
	.main-header .site-header-cart{ order:4; flex:0 0 auto; display:flex !important; align-items:center; margin:0; }

	/* nav row: white with a divider; hide the duplicate search + cart */
	.col-full-nav{ background-color:#fff !important; border-bottom:1px solid #e7eaf1; }
	.col-full-nav .site-search{ display:none !important; }
	.col-full-nav .site-header-cart{ display:none !important; }

	/* lay the nav out as a flex row so badges can sit hard-right */
	.col-full-nav .menu-primary-menu-container > ul{
		display:flex !important; align-items:center; gap:4px; margin:0;
	}
	.ivx-nav-badges{ margin-left:auto; }

	/* category links dark on white */
	.menu-primary-menu-container > ul > li > a,
	.menu-primary-menu-container > ul > li.nolink > span{ color:#20242c !important; font-weight:600; }
	.menu-primary-menu-container > ul > li > a:hover{ color:var(--ivx-navy) !important; }
}

/* ==========================================================================
   MOBILE HEADER ( <= 992px )
   ========================================================================== */
@media (max-width:992px){
	/* keep mobile clean: hide the text account + phone blocks and nav badges */
	.ivonix-header-account,
	.ivx-header-call,
	.ivx-nav-badges{ display:none !important; }
	/* logo fits the compact mobile bar */
	.site-header .custom-logo-link img,
	.site-header img.custom-logo{ max-height:34px; }

	/* mobile search: shorter field, compact blue button */
	.site-search input.search-field{ height:44px; padding-right:52px; }
	.site-search .woocommerce-product-search button[type="submit"]{ width:44px; }

	/* hamburger bars + label dark on the white bar */
	.menu-toggle .bar{ background-color:var(--ivx-navy) !important; }
	.menu-toggle .bar-text,
	.menu-toggle:hover .bar-text{ color:#20242c !important; }

	/* mobile search + account toggle icons blue */
	.mobile-search-toggle svg,
	.shoptimizer-myaccount svg{ stroke:var(--ivx-navy) !important; }
}

/* ==========================================================================
   GAMIK — logo image sizing (Gamik Agencies wordmark set as the custom logo).
   The theme's native .site-branding handles desktop + mobile placement.
   ========================================================================== */
.site-header .custom-logo-link img,
.site-header img.custom-logo{ width:auto !important; max-height:46px; }
@media (max-width:992px){
	.site-header .custom-logo-link img,
	.site-header img.custom-logo{ max-height:34px; }
}

/* ==========================================================================
   GAMIK — WhatsApp enquiry button on the single product page.
   Sits between Add to Cart (30) and the Wishlist button (31); spaced away
   from both. WhatsApp green with a subtle hover lift.
   ========================================================================== */
.gmk-wa-btn{
	display:flex; align-items:center; justify-content:center; gap:10px;
	width:100%; max-width:420px; margin:14px 0 6px; box-sizing:border-box;
	padding:13px 20px; border-radius:10px;
	background:#25d366; color:#fff !important; text-decoration:none;
	font-size:15px; font-weight:700; line-height:1;
	box-shadow:0 2px 8px rgba(37,211,102,.28); transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.gmk-wa-btn svg{ flex:0 0 auto; }
.gmk-wa-btn:hover{ background:#1fbe5a; transform:translateY(-1px); box-shadow:0 4px 14px rgba(37,211,102,.36); color:#fff !important; }

/* ==========================================================================
   GAMIK — site footer (4 columns + bottom bar).
   ========================================================================== */
.gmk-footer{ background:#0d1b46; color:#c9d2ec; font-size:14px; }
.gmk-footer a{ color:#c9d2ec; text-decoration:none; }
.gmk-footer a:hover{ color:#fff; }
.gmk-footer-inner{
	max-width:1200px; margin:0 auto; padding:48px 24px 32px;
	display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:36px;
}
.gmk-footer h4{ color:#fff; font-size:15px; font-weight:700; margin:0 0 16px; letter-spacing:.2px; }
.gmk-footer ul{ list-style:none; margin:0; padding:0; }
.gmk-footer li{ margin:0 0 10px; }
.gmk-foot-brand .custom-logo,
.gmk-foot-brand img{ max-height:40px; width:auto; margin-bottom:14px; background:#fff; padding:7px 10px; border-radius:8px; }
.gmk-foot-brand p{ line-height:1.6; margin:0 0 16px; color:#9fabce; }
.gmk-foot-contact{ display:flex; flex-direction:column; gap:8px; }
.gmk-foot-contact a,
.gmk-foot-contact span{ color:#c9d2ec; }
.gmk-foot-cta p{ color:#9fabce; line-height:1.6; margin:0 0 14px; }
.gmk-foot-wa{
	display:inline-flex; align-items:center; gap:9px;
	background:#25d366; color:#fff !important; font-weight:700;
	padding:11px 18px; border-radius:9px;
}
.gmk-foot-wa:hover{ background:#1fbe5a; }
.gmk-footer-bottom{
	border-top:1px solid rgba(255,255,255,.1);
	max-width:1200px; margin:0 auto; padding:18px 24px;
	display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
	color:#8f9bc0; font-size:13px;
}
.gmk-foot-pay{ color:#aab4d6; }
@media (max-width:992px){
	.gmk-footer-inner{ grid-template-columns:1fr 1fr; gap:28px 24px; padding:36px 20px 24px; }
	.gmk-foot-brand{ grid-column:1 / -1; }
	.gmk-footer-bottom{ justify-content:center; text-align:center; }
}
@media (max-width:520px){
	.gmk-footer-inner{ grid-template-columns:1fr; }
}