/*
 * Arduino Corner brand styles.
 *
 * Identity:
 *   Primary  : Arduino teal #00979D  (the iconic Arduino board colour — maker trust)
 *   Accent   : amber orange #F57C00  (CTAs, urgency — complements the teal)
 *   Success  : WhatsApp      #25D366  (do not change — brand reference)
 *   Surface  : white         #FFFFFF
 *   Muted    : slate         #475569
 *   Border   : soft slate    #E2E8F0
 *
 * Teal + orange = the classic electronics/maker pairing. Instantly reads
 * "Arduino & components" and stays clear of epro.pk (red/black).
 */

:root {
	/* Arduino Corner — teal-forward maker palette */
	--ac-primary:      #00979D;   /* Arduino teal — signature board colour */
	--ac-primary-dark: #007177;   /* hover / dark variant */
	--ac-cyan:         #26C6DA;   /* bright cyan highlight */
	--ac-accent:       #F57C00;   /* amber orange — CTAs, contrasts the teal */
	--ac-accent-dark:  #E65100;
	--ac-success:      #25D366;   /* WhatsApp brand — do not change */
	--ac-success-dark: #1EBE5D;
	--ac-text:         #0F172A;
	--ac-muted:        #475569;
	--ac-border:       #E2E8F0;
	--ac-surface:      #FFFFFF;
	--ac-surface-alt:  #F2FAFA;   /* faint teal-tinted alt surface */
	--ac-wrap: min(var(--theme-normal-container-max-width, 1290px), calc(100vw - 60px)); /* == navbar container */

	/* Type system: Rubik (headings) + Nunito Sans (body) — enqueued in functions.php */
	--ac-font-heading: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ac-font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Typography ---------- */

body {
	font-family: var(--ac-font-body);
}
h1, h2, h3, h4, h5, h6,
.ac-btn,
.ac-hero__eyebrow,
.site-title {
	font-family: var(--ac-font-heading);
}

/* Respect users who opt out of motion — disable our transitions/transforms. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Brand logo in header ---------- */

.ac-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}
.ac-logo-img {
	max-height: 48px;
	height: auto;
	width: auto;
	display: block;
}
.ac-logo-img--dark { display: none; }
[data-theme="dark"] .ac-logo-img--light { display: none; }
[data-theme="dark"] .ac-logo-img--dark { display: block; }

@media (max-width: 600px) {
	.ac-logo-img { max-height: 38px; }
}
/* When the logo fallback CSS replaces the site-title a with a bg image,
   tighten its container so it doesn't overflow */
.site-title-container { line-height: 0 !important; }

/* ---------- Header: account + cart icons appended to nav ---------- */

.ac-nav-icon > a.ct-menu-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
}
.ac-nav-icon--cart .ct-menu-link {
	color: var(--ac-accent) !important;
}
.ac-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	margin-left: 6px;
	padding: 0 5px;
	background: var(--ac-accent);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
}
.ac-cart-count[data-count="0"] { display: none; }

/* ---------- WhatsApp buttons ---------- */

.ac-wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--ac-success);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none !important;
	border-radius: 8px;
	line-height: 1;
	transition: background .2s ease, transform .15s ease;
}
.ac-wa-btn:hover { background: var(--ac-success-dark); transform: translateY(-1px); }
.ac-wa-btn:focus-visible { outline: 2px solid var(--ac-success-dark); outline-offset: 2px; }

.ac-wa-btn--single {
	padding: 12px 20px;
	font-size: 15px;
	margin-left: 10px;
	vertical-align: middle;
}
.ac-wa-btn--loop {
	padding: 8px 12px;
	font-size: 13px;
	width: 100%;
	margin-top: 8px;
}

@media (max-width: 768px) {
	.ac-wa-btn--single {
		width: 100%;
		margin-left: 0;
		margin-top: 12px;
		padding: 14px 20px;
	}
}

/* ---------- Sticky mobile WA bar (epro.pk doesn't have this) ---------- */

.ac-wa-sticky {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9998;
	display: none; /* mobile-only — toggled below */
	align-items: center;
	gap: 8px;
	background: var(--ac-success);
	color: #fff !important;
	padding: 12px 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: 0 8px 24px rgba(37, 211, 102, .4);
	transition: transform .2s ease;
}
.ac-wa-sticky:hover { transform: scale(1.05); }
.ac-wa-sticky span {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .25s ease, margin-left .25s ease;
}
.ac-wa-sticky:hover span,
.ac-wa-sticky:focus-visible span { max-width: 200px; margin-left: 4px; }

@media (max-width: 900px) {
	.ac-wa-sticky { display: inline-flex; }
	.ac-wa-sticky span { max-width: 200px; margin-left: 4px; }
}

/* ---------- Trust list under product price ---------- */

.ac-trust-list {
	list-style: none;
	padding: 14px 16px;
	margin: 16px 0;
	background: var(--ac-surface-alt);
	border: 1px solid var(--ac-border);
	border-radius: 10px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 16px;
}
.ac-trust-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--ac-text);
	line-height: 1.3;
}
.ac-trust-icon {
	font-size: 18px;
	line-height: 1;
}

@media (max-width: 600px) {
	.ac-trust-list { grid-template-columns: 1fr; }
}

/* ---------- Low stock urgency badge ---------- */

.ac-stock-urgency {
	display: inline-block;
	background: #FFF7ED;
	color: var(--ac-accent-dark);
	border: 1px solid #FED7AA;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	margin: 8px 0 12px;
}

/* ---------- Accent the primary Add-to-Cart button with Arduino Corner orange ---------- */

.woocommerce .single_add_to_cart_button.button.alt,
.woocommerce a.button.alt,
.woocommerce-page button.button.alt {
	background: var(--ac-accent);
	color: #fff;
	font-weight: 600;
	letter-spacing: .01em;
}
.woocommerce .single_add_to_cart_button.button.alt:hover,
.woocommerce a.button.alt:hover { background: var(--ac-accent-dark); }

/* ---------- Reserve space for the sticky bar so it doesn't overlap content ---------- */

@media (max-width: 900px) {
	body { padding-bottom: 70px; }
}

/* ---------- Single product page polish ---------- */

/* Tabs */
.woocommerce-tabs.wc-tabs-wrapper {
	margin-top: 36px;
	border-top: 1px solid var(--ac-border);
	padding-top: 24px;
}
.woocommerce-tabs ul.tabs.wc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0 !important;
	border: 0 !important;
	margin: 0 0 24px !important;
	background: var(--ac-surface-alt);
	border-radius: 10px;
	padding: 4px !important;
}
.woocommerce-tabs ul.tabs.wc-tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 7px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce-tabs ul.tabs.wc-tabs li::after {
	display: none !important;
}
.woocommerce-tabs ul.tabs.wc-tabs li a {
	display: block;
	padding: 10px 18px !important;
	font-weight: 600 !important;
	font-size: 14.5px !important;
	color: var(--ac-muted) !important;
	border-radius: 7px;
	text-decoration: none !important;
	transition: all .15s ease;
}
.woocommerce-tabs ul.tabs.wc-tabs li a:hover {
	color: var(--ac-text) !important;
}
.woocommerce-tabs ul.tabs.wc-tabs li.active {
	background: #fff !important;
	box-shadow: 0 1px 3px rgba(15,23,42,.08);
}
.woocommerce-tabs ul.tabs.wc-tabs li.active a {
	color: var(--ac-primary) !important;
}
.woocommerce-tabs .panel { padding: 0; }

/* Specs table */
.ac-specs {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 24px;
}
.ac-specs th, .ac-specs td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--ac-border);
	font-size: 14.5px;
}
.ac-specs th {
	font-weight: 600;
	color: var(--ac-muted);
	width: 200px;
	background: var(--ac-surface-alt);
	border-radius: 6px 0 0 6px;
}
.ac-specs td { color: var(--ac-text); }
.ac-specs tr:last-child th,
.ac-specs tr:last-child td { border-bottom: 0; }

/* Shipping info list */
.ac-shipping-info {
	list-style: none;
	padding: 0;
	margin: 12px 0 28px;
}
.ac-shipping-info li {
	padding: 10px 14px;
	margin-bottom: 8px;
	background: var(--ac-surface-alt);
	border-radius: 8px;
	font-size: 14.5px;
	line-height: 1.55;
}

/* Product gallery — give it some real estate */
.woocommerce-product-gallery {
	border-radius: 12px;
	overflow: hidden;
}
.woocommerce-product-gallery__image {
	border-radius: 12px;
	overflow: hidden;
}
.woocommerce-product-gallery__image img {
	border-radius: 12px;
}
/* Show the WHOLE product photo (contain), never Blocksy's cropped/zoomed
   cover-fill — on the single gallery + shop grid thumbnails. */
.ct-product-gallery-container .ct-media-container img,
.woocommerce-product-gallery__image img,
.woocommerce ul.products li.product a img {
	object-fit: contain !important;
	background: #fff;
}
.woocommerce-product-gallery__trigger {
	background: rgba(255,255,255,.9) !important;
	border: 1px solid var(--ac-border);
	border-radius: 999px;
	padding: 8px !important;
}

/* Related products section */
.related.products {
	margin-top: 56px;
	padding-top: 36px;
	border-top: 1px solid var(--ac-border);
}
.related.products > h2 {
	font-size: clamp(22px, 2.5vw, 28px);
	font-weight: 800;
	color: var(--ac-text);
	margin-bottom: 24px;
}

/* ---------- Custom footer ---------- */

.ac-footer {
	background: var(--ac-primary-dark);
	color: rgba(255, 255, 255, .85);
	margin-top: 64px;
}
.ac-footer__top { padding: 56px 24px 36px; }
.ac-footer__inner {
	max-width: var(--ac-content, 1290px);
	margin: 0 auto;
}
.ac-footer__top .ac-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
}
.ac-footer__col h4.ac-footer__title,
.ac-footer__title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #fff;
	margin: 0 0 14px;
}
.ac-footer__title--small {
	margin-top: 22px;
}
.ac-footer__brand {
	display: inline-block;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff !important;
	text-decoration: none !important;
	margin-bottom: 10px;
}
.ac-footer__tagline {
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 18px;
}
.ac-footer__social {
	display: flex;
	gap: 8px;
}
.ac-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	color: #fff !important;
	text-decoration: none !important;
	transition: background .15s ease, transform .15s ease;
}
.ac-footer__social a:hover {
	background: var(--ac-accent);
	transform: translateY(-2px);
}

.ac-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ac-footer__list li { margin: 0 0 8px; }
.ac-footer__list a,
.ac-footer__address,
.ac-footer__hours {
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, .82) !important;
	text-decoration: none !important;
	font-size: 14.5px;
	line-height: 1.5;
}
.ac-footer__list a:hover { color: var(--ac-accent) !important; }
.ac-footer__icon {
	font-size: 15px;
	width: 18px;
	display: inline-flex;
	justify-content: center;
}
.ac-footer__address,
.ac-footer__hours { margin: 0 0 8px; }
.ac-footer__list--compact a {
	font-size: 14px;
	color: rgba(255, 255, 255, .72) !important;
}
.ac-footer__list--trust li {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .78);
}

.ac-payments {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}
.ac-payments li { margin: 0; }
.ac-payments__pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #fff;
}.ac-footer__bottom {
	background: rgba(0, 0, 0, .25);
	padding: 18px 24px;
}
.ac-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.ac-footer__copy {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .65);
}
.ac-footer__legal {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}
.ac-footer__legal a {
	color: rgba(255, 255, 255, .72) !important;
	text-decoration: none !important;
}
.ac-footer__legal a:hover { color: var(--ac-accent) !important; }
.ac-footer__legal span { color: rgba(255, 255, 255, .4); }

@media (max-width: 900px) {
	.ac-footer__top .ac-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}
}
@media (max-width: 600px) {
	.ac-footer__top .ac-footer__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.ac-footer__bottom-inner {
		flex-direction: column;
		text-align: center;
	}
}

/* =====================================================================
   MOBILE OPTIMIZATIONS
   Everything below applies only on small screens (<900px).
   Goal: punchy, finger-friendly, no horizontal scroll.
   ===================================================================== */

/* --- Mobile nav tools (theme/account/cart/shop). Hidden until JS relocates
   them into the header's right column — this avoids a flash where they briefly
   render at the top-left of the page before being moved (page-transition FOUC). */
.ac-mobile-tools {
	display: none;
}
@media (max-width: 999px) {
	/* Inline in the header's right column — flat icons, not floating pills.
	   Only shown once JS has placed them (.is-placed). */
	.ac-mobile-tools.is-placed {
		display: flex;
		align-items: center;
		gap: 4px;
	}
	.ac-mobile-tool {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		background: transparent;
		border-radius: 999px;
		color: var(--ac-primary);
		text-decoration: none !important;
		font-size: 20px;
		line-height: 1;
		transition: transform .15s ease;
	}
	.ac-mobile-tool:hover,
	.ac-mobile-tool:focus-visible {
		transform: scale(1.08);
	}
	.ac-mobile-cart-count {
		position: absolute;
		top: 0;
		right: 0;
		min-width: 17px;
		height: 17px;
		padding: 0 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--ac-accent);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		border-radius: 999px;
		border: 2px solid var(--ac-surface, #fff);
	}
	.ac-mobile-cart-count[data-count="0"] { display: none; }
}

/* --- Checkout pay-to headers: logo chip + method name on one line --- */
.ac-pay__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 3px;
}
.ac-pay__head .ac-pay-logo { flex: 0 0 auto; }

/* --- Coupon: hide "Apply coupon" until a full 6-char code is typed --- */
button[name="apply_coupon"] { display: none !important; }
button[name="apply_coupon"].ac-coupon-ready { display: inline-block !important; }

/* --- Hero on mobile: tighter padding, single-column CTAs --- */
@media (max-width: 768px) {
	.ac-hero {
		padding: 48px 18px 56px;
	}
	.ac-hero__cta {
		flex-direction: column;
		align-items: stretch;
	}
	.ac-hero__cta .ac-btn {
		justify-content: center;
		padding: 14px 18px;
	}
}

/* --- Homepage section padding tighter --- */
@media (max-width: 768px) {
	.ac-section { padding: 40px 0; }.ac-section__head h2 { font-size: 22px; }
}

/* --- Trust strip: smaller, tighter --- */
@media (max-width: 600px) {
	.ac-strip__inner {
		padding: 12px 0;
		gap: 10px;
	}
	.ac-strip__item {
		font-size: 12.5px;
		gap: 6px;
	}
	.ac-strip__item span { font-size: 15px; }
}

/* --- Shop loop card buttons: 2-col layout on mobile (Buy Now + WA side by side) --- */
@media (max-width: 600px) {
	/* Each card */
	.woocommerce ul.products li.product {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	/* Tightened button row */
	.ac-buy-now,
	.ac-wa-btn--loop {
		margin-top: 6px !important;
		padding: 8px 8px !important;
		font-size: 12.5px !important;
	}
	.ac-buy-now::before { margin-right: 4px; }
}

/* --- Sticky WA bar smaller on tiny screens --- */
@media (max-width: 480px) {
	.ac-wa-sticky {
		padding: 10px 14px;
		font-size: 13px;
		right: 12px;
		bottom: 12px;
	}
}

/* --- Single product page: tabs scroll horizontally if overflowing --- */
@media (max-width: 768px) {
	.woocommerce-tabs ul.tabs.wc-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.woocommerce-tabs ul.tabs.wc-tabs li a {
		white-space: nowrap;
		padding: 9px 14px !important;
		font-size: 13.5px !important;
	}
	.ac-specs th { width: 110px; padding: 8px 10px; }
	.ac-specs td { padding: 8px 10px; }
}

/* --- Single product summary: image+summary stacked --- */
@media (max-width: 768px) {
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product .summary {
		width: 100% !important;
		float: none !important;
		margin: 0 0 20px !important;
	}
	/* The single-product Buy + WA layout */
	.ac-wa-btn--single { margin-left: 0; margin-top: 10px; width: 100%; }
}

/* --- Account form: less padding on mobile --- */
@media (max-width: 600px) {
	.ac-auth {
		padding: 20px 18px 22px;
		border-radius: 10px;
	}
}

/* --- Footer: tighter spacing on mobile --- */
@media (max-width: 600px) {
	.ac-footer__top { padding: 36px 18px 24px; }
	.ac-footer__bottom { padding: 14px 18px; }
}

/* --- Don't double-pad bodies with sticky WA bar on small screens --- */
@media (max-width: 480px) {
	body { padding-bottom: 64px; }
}

/* --- Reset Blocksy's container padding on mobile so we use the screen width --- */
@media (max-width: 600px) {
	.ct-container, .ct-container-narrow {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ---------- Homepage ---------- */

.ac-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ac-primary) 0%, var(--ac-primary-dark) 100%);
	color: #fff;
	padding: 80px 24px 96px;
	text-align: left;
}
.ac-hero__inner {
	max-width: var(--ac-content, 1290px);
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.ac-hero__eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: rgba(255,255,255,.12);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 20px;
}
.ac-hero__title {
	font-size: clamp(36px, 6vw, 64px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 0 0 16px;
	color: #fff;
}
.ac-hero__sub {
	font-size: clamp(16px, 1.6vw, 20px);
	color: rgba(255,255,255,.85);
	max-width: 620px;
	margin: 0 0 28px;
	line-height: 1.5;
}
.ac-hero__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.ac-hero__bg {
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 80% 30%, rgba(249,115,22,.25), transparent 50%),
		radial-gradient(circle at 20% 90%, rgba(255,255,255,.08), transparent 50%);
	pointer-events: none;
	z-index: 1;
}

.ac-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none !important;
	font-size: 15px;
	line-height: 1;
	transition: transform .15s ease, background .2s ease;
}
.ac-btn--primary {
	background: var(--ac-accent);
	color: #fff !important;
	box-shadow: 0 6px 14px rgba(249,115,22,.35);
}
.ac-btn--primary:hover { background: var(--ac-accent-dark); transform: translateY(-1px); }
.ac-btn--wa {
	background: var(--ac-success);
	color: #fff !important;
}
.ac-btn--wa:hover { background: var(--ac-success-dark); transform: translateY(-1px); }

/* Ghost button — secondary CTA on dark hero backgrounds. Keeps the hero to
   ONE visually-primary action (the orange Shop button). */
.ac-btn--ghost {
	background: rgba(255,255,255,.08);
	border: 1.5px solid rgba(255,255,255,.45);
	color: #fff !important;
}
.ac-btn--ghost:hover {
	background: rgba(255,255,255,.18);
	border-color: rgba(255,255,255,.7);
	transform: translateY(-1px);
}

/* Visible keyboard focus on all our interactive elements */
.ac-btn:focus-visible,
.ac-cat:focus-visible,
.ac-wa-btn:focus-visible,
.ac-wa-sticky:focus-visible,
.ac-buy-now:focus-visible {
	outline: 3px solid var(--ac-cyan);
	outline-offset: 2px;
}

/* trust strip */
.ac-strip {
	background: var(--ac-surface-alt);
	border-bottom: 1px solid var(--ac-border);
}
.ac-strip__inner {
	width: var(--ac-wrap);
	max-width: 100%;
	margin: 0 auto;
	padding: 18px 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
.ac-strip__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 14px;
	color: var(--ac-text);
}
.ac-strip__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 10px;
	background: rgba(16, 96, 224, .1);
	color: var(--ac-primary);
}
[data-theme="dark"] .ac-strip__ico {
	background: rgba(32, 144, 224, .16);
	color: var(--ac-cyan);
}
@media (max-width: 700px) {
	.ac-strip__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* sections */
.ac-section { padding: 64px 0; }
.ac-section--alt { background: var(--ac-surface-alt); }
.ac-section__inner { width: var(--ac-wrap); max-width: 100%; margin: 0 auto; }
.ac-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 28px;
	gap: 16px;
	flex-wrap: wrap;
}
.ac-section__head h2 {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;
	color: var(--ac-text);
	letter-spacing: -.01em;
	margin: 0;
}
.ac-section__head a {
	color: var(--ac-primary);
	font-weight: 600;
	text-decoration: none;
}
.ac-section__head a:hover { color: var(--ac-accent); }

/* category tiles */
.ac-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.ac-cat {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 24px 20px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--ac-primary) 0%, var(--ac-primary-dark) 100%);
	color: #fff;
	text-decoration: none !important;
	min-height: 160px;
	transition: transform .2s ease, box-shadow .2s ease;
	position: relative;
	overflow: hidden;
}
.ac-cat:nth-child(2n) { background: linear-gradient(135deg, var(--ac-accent) 0%, var(--ac-accent-dark) 100%); }
.ac-cat:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(15,23,42,.18); }
.ac-cat__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(255,255,255,.14);
	color: #fff;
	margin-bottom: 14px;
}
.ac-cat__name {
	font-size: 18px;
	font-weight: 700;
	color: #fff !important;
	letter-spacing: -.005em;
}
.ac-cat__count {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,.85) !important;
	margin-top: auto;
	padding-top: 6px;
}
@media (max-width: 800px) {
	.ac-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.ac-cats { grid-template-columns: 1fr; }
}

/* why section */@media (max-width: 700px) {}

/* Hide Blocksy's built-in product-card action row (its own Add-to-Cart).
   We render our own Buy Now + WhatsApp via WC hooks, so we don't want the
   default blue button to duplicate. */
.ct-woo-card-actions {
	display: none !important;
}

/* ---------- Buy Now button (shop loop) ---------- */

.woocommerce ul.products li.product a.ac-buy-now.button,
.ac-buy-now {
	background: var(--ac-accent) !important;
	color: #fff !important;
	font-weight: 600;
	padding: 10px 16px !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 8px !important;
	text-decoration: none !important;
	transition: background .2s ease, transform .15s ease;
	line-height: 1.2;
}
.ac-buy-now:hover {
	background: var(--ac-accent-dark) !important;
	transform: translateY(-1px);
}
.ac-buy-now::before { content: '⚡'; margin-right: 6px; }

/* ---------- Login / Signup tabs (My Account) ---------- */

.ac-auth {
	max-width: 460px;
	margin: 0 auto;
	padding: 28px 28px 32px;
	background: #fff;
	border: 1px solid var(--ac-border);
	border-radius: 14px;
	box-shadow: 0 6px 22px rgba(15, 23, 42, .06);
}
.ac-auth__tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	background: var(--ac-surface-alt);
	border-radius: 10px;
	margin-bottom: 24px;
}
.ac-auth__tab {
	background: transparent;
	border: 0;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ac-muted);
	border-radius: 7px;
	cursor: pointer;
	transition: all .15s ease;
}
.ac-auth__tab:hover { color: var(--ac-text); }
.ac-auth__tab.is-active {
	background: #fff;
	color: var(--ac-primary);
	box-shadow: 0 1px 3px rgba(15,23,42,.08);
}

.ac-auth__pane[hidden] { display: none; }
.ac-auth__pane h2 { display: none; }

.ac-auth__form label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--ac-text);
	margin-bottom: 6px;
}
.ac-auth__form input[type="text"],
.ac-auth__form input[type="email"],
.ac-auth__form input[type="password"] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--ac-border);
	border-radius: 8px;
	font-size: 15px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ac-auth__form input[type="text"]:focus,
.ac-auth__form input[type="email"]:focus,
.ac-auth__form input[type="password"]:focus {
	border-color: var(--ac-primary);
	box-shadow: 0 0 0 3px rgba(30, 58, 138, .12);
	outline: none;
}
.ac-auth__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}
.ac-auth__lost {
	font-size: 13px;
	color: var(--ac-primary);
	font-weight: 600;
	text-decoration: none;
}
.ac-auth__lost:hover { color: var(--ac-accent); }

.ac-auth__submit {
	width: 100%;
	background: var(--ac-primary) !important;
	color: #fff !important;
	padding: 12px 18px !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	border: 0 !important;
	cursor: pointer;
	transition: background .2s ease, transform .15s ease;
}
.ac-auth__submit:hover {
	background: var(--ac-primary-dark) !important;
	transform: translateY(-1px);
}

.ac-auth__switch {
	text-align: center;
	margin: 18px 0 0;
	color: var(--ac-muted);
	font-size: 14px;
}
.ac-auth__link-btn {
	background: transparent;
	border: 0;
	color: var(--ac-primary);
	font-weight: 600;
	cursor: pointer;
	padding: 0;
	font-size: inherit;
}
.ac-auth__link-btn:hover { color: var(--ac-accent); }
.ac-auth__fineprint {
	font-size: 12px;
	color: var(--ac-muted);
	margin-top: 14px;
	line-height: 1.5;
}
.ac-auth__note {
	font-size: 13px;
	color: var(--ac-muted);
	font-style: italic;
}

/* ---------- Shop layout: vertical sidebar + content ---------- */

.ac-shop-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	/* Mirror Blocksy's .ct-container math exactly (30px edges, normal max-width)
	   so the sidebar's left edge lines up with the header logo and the grid is
	   as wide as the navbar. */
	width: min(var(--theme-normal-container-max-width, 1290px), calc(100vw - 60px));
	margin: 24px auto 0;
	box-sizing: border-box;
}
.ac-shop-main { min-width: 0; }

/* Kill Blocksy's big "Shop" hero — the sidebar's title is enough context */
.ac-shop-main .hero-section,
.ac-shop-main > .hero-section { display: none !important; }

/* Neutralize Blocksy's nested .ct-container padding/width inside our column */
.ac-shop-main .ct-container,
.ac-shop-main .ct-container-narrow {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.ac-shop-main .ct-container[data-vertical-spacing] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.ac-shop-main .woocommerce-products-header { display: none; }
.ac-shop-main .woo-listing-top {
	margin: 0 0 14px;
	padding: 0;
}

.ac-shop-sidebar {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ac-shop-sidebar__block {
	background: #fff;
	border: 1px solid var(--ac-border);
	border-radius: 12px;
	padding: 18px;
}
.ac-shop-sidebar__title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--ac-muted);
	margin: 0 0 12px;
}

.ac-cat-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ac-cat-list li { margin: 0; }
.ac-cat-list__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-radius: 8px;
	text-decoration: none !important;
	color: var(--ac-text) !important;
	font-weight: 500;
	font-size: 14.5px;
	transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.ac-cat-list__item:hover {
	background: var(--ac-surface-alt);
	color: var(--ac-primary) !important;
	padding-left: 16px;
}
.ac-cat-list__item.is-active {
	background: var(--ac-primary);
	color: #fff !important;
	font-weight: 600;
}
.ac-cat-list__item.is-active:hover {
	background: var(--ac-primary-dark);
	color: #fff !important;
	padding-left: 12px;
}
.ac-cat-list__count {
	background: var(--ac-surface-alt);
	color: var(--ac-muted);
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	min-width: 28px;
	text-align: center;
}
.ac-cat-list__item.is-active .ac-cat-list__count {
	background: rgba(255, 255, 255, .18);
	color: #fff;
}

/* Help block */
.ac-shop-sidebar__help p {
	font-size: 14px;
	color: var(--ac-muted);
	margin: 0 0 12px;
	line-height: 1.5;
}
.ac-shop-sidebar__help .ac-btn--wa {
	width: 100%;
	padding: 10px 14px;
	font-size: 14px;
	justify-content: center;
}

/* Mobile toggle */
.ac-sidebar-toggle {
	display: none;
	width: 100%;
	background: #fff;
	border: 1px solid var(--ac-border);
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--ac-text);
	cursor: pointer;
	align-items: center;
	justify-content: space-between;
}
.ac-sidebar-toggle__chev { transition: transform .2s ease; }
.ac-sidebar-toggle[aria-expanded="true"] .ac-sidebar-toggle__chev {
	transform: rotate(180deg);
}

@media (max-width: 900px) {
	.ac-shop-layout {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0 16px;
	}
	.ac-shop-sidebar {
		position: static;
	}
	.ac-sidebar-toggle { display: inline-flex; }
	/* Collapsed by default on mobile */
	.ac-shop-sidebar #ac-cat-list { display: none; }
	.ac-shop-sidebar.is-open #ac-cat-list { display: block; }
	/* Help block always visible on mobile */
}

/* ---------- Category nav strip ---------- */@media (max-width: 600px) {}

/* ---------- Product card title (shop loop) ---------- */

/* Blocksy defaults are too airy for our card density — tighten line height,
   font size, top/bottom margin, and clamp to 2 lines so cards align. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-loop-product__title {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	margin: 8px 0 6px !important;
	padding: 0 !important;
	color: var(--ac-text);
	letter-spacing: -.005em;

	/* Clamp to 2 lines so titles don't push card heights around */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(1.35em * 2);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce-loop-product__title a {
	color: inherit !important;
	text-decoration: none !important;
	display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover,
.woocommerce-loop-product__title a:hover {
	color: var(--ac-primary) !important;
}

/* Price under title — tighter top/bottom */
.woocommerce ul.products li.product .price {
	margin: 4px 0 8px !important;
	font-size: 14.5px !important;
}
.woocommerce ul.products li.product .price ins {
	font-weight: 700;
	text-decoration: none;
}
.woocommerce ul.products li.product .price del {
	opacity: .6;
	font-size: 13px;
}

/* Category meta line below price (Blocksy renders this) — make it smaller */
.woocommerce ul.products li.product ul.entry-meta {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 12px !important;
}
.woocommerce ul.products li.product ul.entry-meta li {
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce ul.products li.product ul.entry-meta a {
	color: var(--ac-muted) !important;
	text-decoration: none !important;
}

/* tighten the WC product grid spacing inside our sections */
.ac-section .woocommerce ul.products {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.ac-section .woocommerce ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}
@media (max-width: 900px) {
	.ac-section .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
	.ac-section .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   DARK MODE
   Activated via [data-theme="dark"] on <html>. Initial value is set
   before first paint by an inline script in <head>.
   ===================================================================== */

/* Default: light mode shows ☀️, hides 🌙. Toggle is flipped in dark mode. */
.ac-theme-toggle {
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: inherit;
	font-size: inherit;
}
.ac-theme-toggle__icon { font-size: 17px; line-height: 1; }
.ac-theme-toggle__icon--dark { display: none; }
[data-theme="dark"] .ac-theme-toggle__icon--light { display: none; }
[data-theme="dark"] .ac-theme-toggle__icon--dark { display: inline; }

/* --- Dark mode tokens --- */
[data-theme="dark"] {
	--ac-text: #E2E8F0;
	--ac-muted: #94A3B8;
	--ac-border: rgba(255, 255, 255, .08);
	--ac-surface: #0F172A;
	--ac-surface-alt: #1E293B;
	color-scheme: dark;
}

/* --- Body + page chrome --- */
[data-theme="dark"] body,
[data-theme="dark"] #main {
	background: #0B1120 !important;
	color: var(--ac-text);
}

/* Generic text */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] td,
[data-theme="dark"] label {
	color: var(--ac-text);
}
[data-theme="dark"] a { color: #5EEAD4; }
[data-theme="dark"] a:hover { color: var(--ac-accent); }

/* --- Header (Blocksy) ---
   Blocksy uses inline CSS variables on its header rows (--theme-palette-color-7
   and friends) plus default rgba backgrounds. We override the actual rendered
   elements rather than the variables to guarantee dark bg. */
[data-theme="dark"] header#header.ct-header,
[data-theme="dark"] header.ct-header,
[data-theme="dark"] header.ct-header [data-row],
[data-theme="dark"] header.ct-header [data-device="desktop"],
[data-theme="dark"] header.ct-header [data-device="mobile"] {
	background-color: #0F172A !important;
}
[data-theme="dark"] header.ct-header .ct-container {
	background-color: transparent !important;
}
[data-theme="dark"] .ct-menu-link,
[data-theme="dark"] header.ct-header a,
[data-theme="dark"] header.ct-header .site-title,
[data-theme="dark"] header.ct-header .site-title a {
	color: var(--ac-text) !important;
}
[data-theme="dark"] header.ct-header .site-title a:hover,
[data-theme="dark"] header.ct-header .ct-menu-link:hover {
	color: #fff !important;
}
[data-theme="dark"] .ct-header-trigger,
[data-theme="dark"] .ct-header-search {
	color: var(--ac-text) !important;
}
[data-theme="dark"] .ct-header-trigger:hover,
[data-theme="dark"] .ct-header-search:hover {
	color: #fff !important;
}
/* Subtle border to separate dark header from page body */
[data-theme="dark"] header.ct-header {
	border-bottom: 1px solid var(--ac-border) !important;
}
/* Arduino Corner cart count badge: orange on dark looks bright enough */
[data-theme="dark"] .ac-nav-icon--cart .ct-menu-link {
	color: var(--ac-accent) !important;
}

/* --- Mobile inline nav tools --- */
[data-theme="dark"] .ac-mobile-tool {
	background: transparent;
	color: var(--ac-text);
}
[data-theme="dark"] .ac-mobile-cart-count {
	border-color: var(--ac-surface-alt);
}

/* --- Shop sidebar --- */
[data-theme="dark"] .ac-shop-sidebar__block {
	background: var(--ac-surface-alt);
	border-color: var(--ac-border);
}
[data-theme="dark"] .ac-sidebar-toggle {
	background: var(--ac-surface-alt);
	color: var(--ac-text);
	border-color: var(--ac-border);
}
[data-theme="dark"] .ac-cat-list__item:hover {
	background: rgba(255, 255, 255, .04);
}
[data-theme="dark"] .ac-cat-list__count {
	background: rgba(255, 255, 255, .06);
	color: var(--ac-muted);
}

/* --- Product cards on shop loop --- */
[data-theme="dark"] .woocommerce ul.products li.product {
	background: var(--ac-surface-alt);
	border-radius: 12px;
	padding: 10px 10px 14px;
	box-shadow: none;
}
[data-theme="dark"] .woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--ac-text);
}
[data-theme="dark"] .woocommerce ul.products li.product .price,
[data-theme="dark"] .woocommerce ul.products li.product .price ins {
	color: var(--ac-text);
}
[data-theme="dark"] .woocommerce ul.products li.product .price del {
	color: var(--ac-muted);
}

/* --- WC sort/result count + listing top --- */
[data-theme="dark"] .woocommerce-result-count,
[data-theme="dark"] .woocommerce-ordering select {
	color: var(--ac-text);
	background: var(--ac-surface-alt);
	border-color: var(--ac-border);
}

/* --- Trust list + stock urgency on product page --- */
[data-theme="dark"] .ac-trust-list {
	background: var(--ac-surface-alt);
	border-color: var(--ac-border);
}
[data-theme="dark"] .ac-stock-urgency {
	background: rgba(249, 115, 22, .08);
	border-color: rgba(249, 115, 22, .3);
	color: #FB923C;
}

/* --- Product tabs --- */
[data-theme="dark"] .woocommerce-tabs.wc-tabs-wrapper {
	border-top-color: var(--ac-border);
}
[data-theme="dark"] .woocommerce-tabs ul.tabs.wc-tabs {
	background: var(--ac-surface-alt) !important;
}
[data-theme="dark"] .woocommerce-tabs ul.tabs.wc-tabs li a { color: var(--ac-muted) !important; }
[data-theme="dark"] .woocommerce-tabs ul.tabs.wc-tabs li.active {
	background: var(--ac-surface) !important;
}
[data-theme="dark"] .woocommerce-tabs ul.tabs.wc-tabs li.active a {
	color: #5EEAD4 !important;
}

/* --- Specs table + shipping list --- */
[data-theme="dark"] .ac-specs th {
	background: var(--ac-surface-alt);
	color: var(--ac-muted);
}
[data-theme="dark"] .ac-specs td { color: var(--ac-text); }
[data-theme="dark"] .ac-specs th, [data-theme="dark"] .ac-specs td {
	border-bottom-color: var(--ac-border);
}
[data-theme="dark"] .ac-shipping-info li {
	background: var(--ac-surface-alt);
}

/* --- Auth card (login/signup) --- */
[data-theme="dark"] .ac-auth {
	background: var(--ac-surface-alt);
	border-color: var(--ac-border);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .ac-auth__tabs { background: var(--ac-surface); }
[data-theme="dark"] .ac-auth__tab { color: var(--ac-muted); }
[data-theme="dark"] .ac-auth__tab.is-active {
	background: var(--ac-surface-alt);
	color: #fff;
}
[data-theme="dark"] .ac-auth__form input[type="text"],
[data-theme="dark"] .ac-auth__form input[type="email"],
[data-theme="dark"] .ac-auth__form input[type="password"] {
	background: var(--ac-surface);
	color: var(--ac-text);
	border-color: var(--ac-border);
}

/* --- Generic form inputs across the site --- */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
	background: var(--ac-surface-alt);
	color: var(--ac-text);
	border: 1px solid var(--ac-border);
}

/* --- Category nav strip (still defined, just hidden currently) --- *//* --- Homepage sections --- */
[data-theme="dark"] .ac-section--alt {
	background: #0B1120;
}
[data-theme="dark"] .ac-strip {
	background: var(--ac-surface-alt);
	border-bottom-color: var(--ac-border);
}

/* --- WC notice/info boxes --- */
[data-theme="dark"] .woocommerce-info,
[data-theme="dark"] .woocommerce-message,
[data-theme="dark"] .woocommerce-error {
	background: var(--ac-surface-alt) !important;
	color: var(--ac-text) !important;
	border-color: var(--ac-border);
}

/* --- Related products section heading --- */
[data-theme="dark"] .related.products {
	border-top-color: var(--ac-border);
}
[data-theme="dark"] .related.products > h2 { color: var(--ac-text); }

/* --- Single product summary text --- */
[data-theme="dark"] .product_title { color: var(--ac-text); }
[data-theme="dark"] .product_meta { color: var(--ac-muted); }
[data-theme="dark"] .product_meta a { color: #5EEAD4; }

/* --- WC cart/checkout/account inner tables --- */
[data-theme="dark"] .woocommerce table.shop_table,
[data-theme="dark"] .woocommerce-MyAccount-content table {
	background: var(--ac-surface-alt);
	color: var(--ac-text);
	border-color: var(--ac-border);
}
[data-theme="dark"] .woocommerce table.shop_table th { color: var(--ac-text); }
[data-theme="dark"] .woocommerce table.shop_table td { border-color: var(--ac-border); }

/* --- My account nav --- */
[data-theme="dark"] .woocommerce-MyAccount-navigation a {
	background: var(--ac-surface-alt);
	color: var(--ac-text);
	border-color: var(--ac-border);
}

/* --- Mobile cart count badge needs darker outline --- */
[data-theme="dark"] .ac-mobile-cart-count {
	border-color: var(--ac-surface-alt);
}

/* --- Smooth transition between modes --- */
html { transition: background-color .25s ease; }
body, .ac-shop-sidebar__block, .ac-auth,
.woocommerce ul.products li.product, .ac-trust-list,
.ac-shipping-info li {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ==========================================================================
   Homepage v2 — how-we-help pillars, what-we-build, steps
   ========================================================================== */

.ac-section__head--center { text-align: center; flex-direction: column; align-items: center; }
.ac-section__lead {
	margin: 8px auto 0;
	max-width: 640px;
	color: var(--ac-muted);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.55;
}
[data-theme="dark"] .ac-section__lead { color: #94a3b8; }

/* --- 3 pillars --- */
.ac-pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 36px;
}
.ac-pillar {
	background: var(--ac-surface);
	border: 1px solid var(--ac-border);
	border-radius: 16px;
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.ac-pillar:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(15,23,42,.08);
	border-color: var(--ac-primary);
}
[data-theme="dark"] .ac-pillar { background: #0f172a; border-color: #1e293b; }
.ac-pillar__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: rgba(0,151,157,.1);
	color: var(--ac-primary);
	margin-bottom: 16px;
}
[data-theme="dark"] .ac-pillar__ico { background: rgba(38,198,218,.14); color: var(--ac-cyan); }
.ac-pillar h3 { font-size: 19px; margin: 0 0 8px; }
.ac-pillar p { color: var(--ac-muted); font-size: 15px; line-height: 1.55; margin: 0 0 18px; flex: 1; }
[data-theme="dark"] .ac-pillar p { color: #94a3b8; }
.ac-pillar__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 14px;
	color: var(--ac-accent);
	text-decoration: none !important;
	margin-top: auto;
}
.ac-pillar__link:hover { color: var(--ac-accent-dark); gap: 9px; }

/* --- what we build --- */
.ac-build { padding: 64px 24px; }
.ac-build__inner { width: var(--ac-wrap); max-width: 100%; margin: 0 auto; }
.ac-build__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin-top: 36px;
}
.ac-build__card {
	position: relative;
	border-radius: 18px;
	padding: 32px;
	background: linear-gradient(135deg, var(--ac-primary) 0%, var(--ac-primary-dark) 100%);
	color: #fff;
	overflow: hidden;
}
.ac-build__card:nth-child(2) {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.ac-build__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 14px;
	background: rgba(255,255,255,.14);
	color: #fff;
	margin-bottom: 16px;
}
.ac-build__card h3 { font-size: 24px; margin: 0 0 10px; color: #fff; }
.ac-build__card p { color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.ac-tags { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.ac-tags li {
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	color: #fff;
}

/* --- how it works steps --- */
.ac-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 36px;
}
.ac-step {
	position: relative;
	text-align: center;
	padding: 28px 20px;
	border: 1px solid var(--ac-border);
	border-radius: 16px;
	background: var(--ac-surface);
}
[data-theme="dark"] .ac-step { background: #0f172a; border-color: #1e293b; }
.ac-step__num {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--ac-accent);
	color: #fff;
	font-weight: 800;
	font-size: 14px;
}
.ac-step__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(0,151,157,.1);
	color: var(--ac-primary);
	margin: 8px 0 14px;
}
[data-theme="dark"] .ac-step__ico { background: rgba(38,198,218,.14); color: var(--ac-cyan); }
.ac-step h3 { font-size: 18px; margin: 0 0 6px; }
.ac-step p { color: var(--ac-muted); font-size: 14px; line-height: 1.5; margin: 0; }
[data-theme="dark"] .ac-step p { color: #94a3b8; }

@media (max-width: 900px) {
	.ac-pillars { grid-template-columns: 1fr; }
	.ac-build__grid { grid-template-columns: 1fr; }
	.ac-steps { grid-template-columns: 1fr; }
}

/* Flash Sale section — accent the heading for urgency */
.ac-flash { color: var(--ac-accent); }
.ac-section--sale .ac-section__head h2 { display: flex; align-items: center; gap: 8px; }

/* Easypaisa payment pill — brand green wordmark */
.ac-payments__pill--ep {
	background: #8DC63F;
	border-color: #7cb332;
	color: #0a5d2e;
	font-weight: 800;
	text-transform: lowercase;
	letter-spacing: -.01em;
	gap: 5px;
}/* Keep footer bottom row aligned to page content width */
.ac-footer__bottom-inner { max-width: var(--ac-content, 1290px); }

/* ---------- Manual payment details (checkout + order-received) ---------- */
.ac-pay { border: 1px solid var(--ac-border); border-radius: 12px; padding: 16px; margin-top: 12px; background: var(--ac-surface-alt); }
.ac-pay__warn { color: #b91c1c; font-weight: 700; margin: 0 0 8px; }
.ac-pay__how { margin: 0 0 12px; font-size: 14px; color: var(--ac-muted); }[data-theme="dark"] .ac-pay { background: #0f172a; }[data-theme="dark"] .ac-pay__warn { color: #fca5a5; }

/* ---------- Sale price: struck original + accent sale price ---------- */
.woocommerce del, .woocommerce del .amount { color: var(--ac-muted); text-decoration: line-through; text-decoration-color: #e53935; text-decoration-thickness: 2px; font-weight: 500; opacity: 1; }
.woocommerce ins, .woocommerce ins .amount { text-decoration: none; color: var(--ac-accent-dark); font-weight: 800; }
.woocommerce .price ins { margin-left: 6px; }

/* ---------- Footer location map ---------- */
.ac-footer__map { margin-top: 12px; border-radius: 10px; overflow: hidden; line-height: 0; max-width: 320px; }
.ac-footer__map iframe { display: block; width: 100%; }
a.ac-footer__address { text-decoration: none; }
a.ac-footer__address:hover { text-decoration: underline; }

/* ---------- Payment method logos / badges ---------- */
.ac-payments { align-items: center; }
/* Real brand logos (mcb squarish, easypaisa square, jazzcash wide): give them a
   consistent HEIGHT and let each white chip hug its own width. */
.ac-pay-logo {
	height: 34px;
	width: auto;
	max-width: 110px;
	object-fit: contain;
	display: block;
	border-radius: 6px;
	background: #fff;
	padding: 4px 8px;
	box-sizing: border-box;
}
.ac-payments__pill--jc { background: #ED1C24; border-color: #c8151c; color: #fff; font-weight: 800; }
.ac-payments__pill--bank { color: #fff; }
.ac-pay-ico { height: 18px; width: auto; vertical-align: middle; margin-right: 2px; background: #fff; border-radius: 3px; padding: 1px 3px; }
.ac-pay__ur { line-height: 1.9; }

/* ---------- Order-received (thank-you) message: readable in light + dark ---------- */
.woocommerce-order .woocommerce-thankyou-order-received,
p.woocommerce-thankyou-order-received {
	display: block;
	margin: 0 0 20px;
	padding: 16px 18px;
	background: var(--ac-surface-alt) !important;
	border: 1px solid var(--ac-border);
	border-left: 4px solid var(--ac-primary);
	border-radius: 10px;
	color: var(--ac-text) !important;
	font-family: 'Rubik', sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.55;
}
.ac-thankyou-note {
	display: block;
	margin-top: 8px;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	font-size: .95rem;
	color: var(--ac-muted);
	line-height: 1.6;
}

/* ---------- Payment details: bold paragraphs ---------- */
.ac-pay__how { margin: 0 0 10px; font-weight: 600; line-height: 1.55; }
.ac-pay__note { margin: 0 0 14px; padding: 9px 12px; background: rgba(245,124,0,.10); border-left: 3px solid var(--ac-accent); border-radius: 6px; font-size: 14px; line-height: 1.5; }
.ac-pay__acct { margin: 0 0 10px; padding: 10px 14px; background: var(--ac-surface); border: 1px solid var(--ac-border); border-radius: 8px; font-size: 14.5px; line-height: 1.8; }
.ac-pay__acct strong { color: var(--ac-text); }
.ac-pay__ur { margin: 10px 0 0; line-height: 1.95; }
[data-theme="dark"] .ac-pay__acct { background: #0b1120; }

/* Center the product tab buttons (Blocksy 'center' tab style) */
.woocommerce-tabs ul.tabs.wc-tabs { justify-content: center; }

/* ---------- Site-wide product search bar ---------- */
.ac-searchbar { background: var(--ac-surface-alt); border-bottom: 1px solid var(--ac-border); padding: 12px 20px; }
.ac-searchbar__form { max-width: 620px; margin: 0 auto; display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--ac-border); border-radius: 999px; padding: 4px 4px 4px 16px; transition: border-color .2s; }
.ac-searchbar__form:focus-within { border-color: var(--ac-primary); box-shadow: 0 0 0 3px rgba(0,151,157,.12); }
.ac-searchbar__ico { display: inline-flex; color: var(--ac-muted); }
.ac-searchbar__input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; padding: 8px 4px; color: var(--ac-text); }
.ac-searchbar__btn { border: 0; background: var(--ac-primary); color: #fff; font-weight: 700; padding: 9px 20px; border-radius: 999px; cursor: pointer; }
.ac-searchbar__btn:hover { background: var(--ac-primary-dark); }
[data-theme="dark"] .ac-searchbar__form { background: #0b1120; }
@media (max-width: 600px) { .ac-searchbar__btn { padding: 9px 14px; } }

/* Search bar placed inside the header (desktop) */
@media (min-width: 1000px) {
	#header [data-row="middle"] .ct-container { display: flex; align-items: center; gap: 24px; }
	#header [data-row="middle"] [data-column="end"] { margin-left: auto; }
}
.ac-searchbar--in-header { flex: 1 1 auto; max-width: 560px; background: transparent !important; border: 0 !important; padding: 0 !important; }
.ac-searchbar--in-header .ac-searchbar__form { margin: 0; }
.ct-header-search { display: none !important; } /* remove Blocksy corner search */
@media (max-width: 999px) { .ac-searchbar--in-header { display: none; } }

/* Product tabs: align + centre with the page content width */
.single-product .woocommerce-tabs.wc-tabs-wrapper { max-width: var(--ac-content, 1290px); margin: 40px auto 0; width: auto; float: none; }
.single-product .woocommerce-tabs .wc-tab, .single-product .woocommerce-tabs .panel { max-width: none; }

/* Dark mode: WooCommerce select2 dropdown (Province etc.) legibility */
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-search__field { background: #0b1120 !important; color: #e2e8f0 !important; border-color: #1e293b !important; }
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: #e2e8f0 !important; }
[data-theme="dark"] .select2-results__option { background: #0b1120 !important; color: #e2e8f0 !important; }
[data-theme="dark"] .select2-results__option--highlighted { background: var(--ac-primary) !important; color: #fff !important; }
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #94a3b8 !important; }

/* Theme toggle text labels are hidden by default (desktop = icon only) */
.ac-theme-toggle__label { display: none; }

/* Mobile: use the floating .ac-mobile-tools icons; hamburger/off-canvas removed */
@media (max-width: 999px) {
	/* Hamburger removed on mobile (per request) — nav is the floating icons + search */
	.ct-header-trigger { display: none !important; }
	/* One clean, vertically-centred flex row: logo left, icons right. */
	#header [data-device="mobile"] [data-row="middle"] .ct-container {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		max-width: 100% !important;
		min-height: 60px !important;
	}
	#header [data-device="mobile"] [data-row="middle"] [data-column] {
		display: flex !important;
		align-items: center !important;
		align-self: center !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		min-height: 0 !important;
	}
	#header [data-device="mobile"] [data-column="end"] { margin-left: auto !important; }
	/* Tighten the logo text box so it centres against the 40px icons */
	#header [data-device="mobile"] [data-row="middle"] .site-branding,
	#header [data-device="mobile"] [data-row="middle"] .site-title-container,
	#header [data-device="mobile"] [data-row="middle"] .site-title {
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		line-height: 1 !important;
	}
	#header [data-device="mobile"] [data-row="middle"] .site-title a { line-height: 1 !important; }
	/* Nudge the logo down ~5% so it visually centres against the icons */
	#header [data-device="mobile"] [data-row="middle"] .site-branding { transform: translateY(2px); }
	#header [data-device="mobile"] [data-row="middle"] .ac-mobile-tools { align-items: center; margin: 0; }
	/* Bump the mobile logo ~10% (per request) */
	#header [data-device="mobile"] [data-row="middle"] .site-title { font-size: 1.1em !important; }
	/* dark/light toggle text label inside the dropdown */
	.ac-theme-toggle__label--light { display: inline; margin-left: 8px; }
	[data-theme="dark"] .ac-theme-toggle__label--light { display: none; }
	[data-theme="dark"] .ac-theme-toggle__label--dark { display: inline; margin-left: 8px; }
}

/* ---------- Optional product video (under the gallery) ---------- */
.ac-product-video { margin: 16px 0 4px; }
.ac-product-video__embed { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; }
.ac-product-video__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ac-product-video__file { width: 100%; border-radius: 10px; display: block; background: #000; }
.ac-product-video__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ac-primary); text-decoration: none; }

/* ---------- Product image lightbox (custom) ---------- */
.ct-product-gallery-container .ct-media-container { cursor: zoom-in; }
.ac-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; background: rgba(8,12,20,.93); }
.ac-lightbox.is-open { display: flex; }
.ac-lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: 8px; box-shadow: 0 12px 44px rgba(0,0,0,.55); user-select: none; }
.ac-lightbox__close { position: absolute; top: 14px; right: 18px; font-size: 40px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; opacity: .85; }
.ac-lightbox__close:hover { opacity: 1; }
.ac-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 46px; line-height: 1; color: #fff; background: rgba(0,0,0,.32); border: 0; width: 58px; height: 78px; cursor: pointer; opacity: .9; }
.ac-lightbox__nav:hover { opacity: 1; background: rgba(0,0,0,.5); }
.ac-lightbox__prev { left: 10px; border-radius: 0 8px 8px 0; }
.ac-lightbox__next { right: 10px; border-radius: 8px 0 0 8px; }
@media (max-width: 600px) {
	.ac-lightbox__nav { width: 44px; height: 62px; font-size: 34px; }
	.ac-lightbox__close { top: 8px; right: 12px; }
}

/* No hover-zoom lens on mobile (tap opens the lightbox instead) */
@media (max-width: 999px) {
	.zoomImg { display: none !important; }
}