/* ════════════════════════════════════════════════════════════════════════
   CODE BLUE Child Theme — Brand Stylesheet
   Mobile-first · Arabic RTL · WooCommerce · Premium medical aesthetic
   ════════════════════════════════════════════════════════════════════════
   Sections:
     1. Design tokens (CSS custom properties)
     2. Typography + base resets
     3. Buttons, badges, form fields
     4. Product cards (shop archive)
     5. Shop page layout
     6. Single product page
     7. Cart + Checkout
     8. Trust badges
     9. Sticky WhatsApp button
    10. Header / nav polish
    11. Footer
    12. Utilities + responsive tweaks
   ════════════════════════════════════════════════════════════════════════ */


/* ─── 1. DESIGN TOKENS ────────────────────────────────────────────────── */
:root {
	/* Brand palette */
	--cb-primary:        #225090;
	--cb-primary-dark:   #1a3f73;
	--cb-primary-light:  #e8f0fa;
	--cb-accent:         #0ea5e9;
	--cb-success:        #16a34a;
	--cb-warning:        #f59e0b;
	--cb-danger:         #dc2626;
	--cb-whatsapp:       #25d366;

	/* Neutrals */
	--cb-text:           #1a202c;
	--cb-text-muted:     #64748b;
	--cb-border:         #e2e8f0;
	--cb-surface:        #ffffff;
	--cb-bg:             #f8fafc;
	--cb-bg-alt:         #f1f5f9;

	/* Typography */
	--cb-font-sans:      'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--cb-font-display:   'Tajawal', 'Cairo', system-ui, sans-serif;

	/* Spacing scale */
	--cb-space-1: 4px;
	--cb-space-2: 8px;
	--cb-space-3: 12px;
	--cb-space-4: 16px;
	--cb-space-5: 24px;
	--cb-space-6: 32px;
	--cb-space-8: 48px;

	/* Radii */
	--cb-radius-sm: 6px;
	--cb-radius-md: 10px;
	--cb-radius-lg: 14px;
	--cb-radius-xl: 20px;
	--cb-radius-full: 999px;

	/* Shadows */
	--cb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--cb-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--cb-shadow-lg: 0 10px 30px rgba(34, 80, 144, 0.12);
	--cb-shadow-xl: 0 20px 50px rgba(34, 80, 144, 0.18);

	/* Motion */
	--cb-ease: cubic-bezier(.4, 0, .2, 1);
	--cb-fast: 150ms;
	--cb-med:  280ms;

	/* Layout */
	--cb-bottomnav-height: 58px;
	--cb-filters-width: 280px;
}


/* ─── 2. TYPOGRAPHY + BASE ────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body,
.entry-content {
	font-family: var(--cb-font-sans);
	color: var(--cb-text);
	line-height: 1.65;
	background: var(--cb-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.product_title {
	font-family: var(--cb-font-display);
	font-weight: 700;
	color: var(--cb-text);
	letter-spacing: -0.01em;
	line-height: 1.25;
}

a {
	color: var(--cb-primary);
	transition: color var(--cb-fast) var(--cb-ease);
}
a:hover { color: var(--cb-primary-dark); }

/* Numbers — use tabular figures for prices so they align in columns */
.woocommerce-Price-amount,
.amount,
.price {
	font-variant-numeric: tabular-nums;
}

/* Selection colour matches brand */
::selection { background: var(--cb-primary-light); color: var(--cb-primary-dark); }


/* ─── 3. BUTTONS / BADGES / FORM FIELDS ───────────────────────────────── */
.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page button.button.alt,
.woocommerce-page a.button.alt {
	font-family: var(--cb-font-display);
	font-weight: 500;
	letter-spacing: 0;
	padding: 12px 22px;
	border-radius: var(--cb-radius-md);
	border: 0;
	box-shadow: var(--cb-shadow-sm);
	transition: transform var(--cb-fast) var(--cb-ease),
	            box-shadow var(--cb-fast) var(--cb-ease),
	            background var(--cb-fast) var(--cb-ease);
}

/* Primary CTA — gradient + glow */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button,
.checkout-button,
#place_order {
	background: linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-primary-dark) 100%);
	color: #fff !important;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover {
	transform: translateY(-1px);
	box-shadow: var(--cb-shadow-lg);
	background: linear-gradient(135deg, var(--cb-primary-dark) 0%, var(--cb-primary) 100%);
}

/* Secondary button — outline */
.woocommerce a.button:not(.alt):not(.added_to_cart),
.woocommerce button.button:not(.alt) {
	background: var(--cb-surface);
	color: var(--cb-primary);
	box-shadow: inset 0 0 0 1.5px var(--cb-border);
}
.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover {
	background: var(--cb-primary-light);
	box-shadow: inset 0 0 0 1.5px var(--cb-primary);
}

/* Sale flash (replaces "Sale!" with تخفيض) */
.woocommerce span.onsale,
.codeblue-sale {
	font-family: var(--cb-font-display);
	font-weight: 700;
	font-size: 12px;
	background: var(--cb-danger);
	color: #fff;
	border-radius: var(--cb-radius-full);
	padding: 4px 12px;
	min-height: 0;
	min-width: 0;
	line-height: 1.4;
	box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Form inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], textarea, select {
	border: 1.5px solid var(--cb-border);
	border-radius: var(--cb-radius-md);
	padding: 11px 14px;
	font-family: var(--cb-font-sans);
	font-size: 15px;
	background: var(--cb-surface);
	color: var(--cb-text);
	transition: border-color var(--cb-fast) var(--cb-ease),
	            box-shadow var(--cb-fast) var(--cb-ease);
}
input:focus, textarea:focus, select:focus {
	outline: 0;
	border-color: var(--cb-primary);
	box-shadow: 0 0 0 4px rgba(34, 80, 144, 0.1);
}

/* Labels */
.woocommerce form .form-row label,
.woocommerce-checkout label {
	font-weight: 500;
	color: var(--cb-text);
	font-size: 14px;
	margin-bottom: var(--cb-space-1);
}


/* ─── 4. PRODUCT CARDS (shop loop) ────────────────────────────────────── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background: var(--cb-surface);
	border: none;
	border-radius: 16px; /* Bold Blue mock */
	box-shadow: 0 12px 36px rgba(34, 80, 144, 0.1);
	padding: 0;
	overflow: hidden;
	transition: transform var(--cb-med) var(--cb-ease),
	            box-shadow var(--cb-med) var(--cb-ease);
	position: relative;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(34, 80, 144, 0.16);
}

/* The image wrapper added by codeblue_open_image_wrap() */
.codeblue-card__media {
	position: relative;
	overflow: hidden;
	background: var(--cb-bg-alt);
	aspect-ratio: 1 / 1;
}
.codeblue-card__media img,
.woocommerce ul.products li.product a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	transition: transform var(--cb-med) var(--cb-ease);
}
.woocommerce ul.products li.product:hover .codeblue-card__media img {
	transform: scale(1.05);
}

/* Sale badge inside card */
.woocommerce ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	margin: 0;
	z-index: 2;
}

/* Title + price block */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	padding: var(--cb-space-3) var(--cb-space-4) 0;
	font-size: 17px;   /* mock: bold, prominent name */
	font-weight: 700;
	color: var(--cb-text);
	line-height: 1.4;
	min-height: 2.8em; /* aligns 1-line and 2-line titles */
}

.woocommerce ul.products li.product .price {
	padding: var(--cb-space-2) var(--cb-space-4);
	color: var(--cb-primary);
	font-size: 20px;   /* mock: heavy brand-blue price */
	font-weight: 800;
	margin: 0;
}
.woocommerce ul.products li.product .price del {
	color: var(--cb-text-muted);
	font-weight: 400;
	margin-inline-end: 6px;
	font-size: 14px;
}
.woocommerce ul.products li.product .price ins {
	background: none;
	text-decoration: none;
	color: var(--cb-danger);
	font-weight: 700;
}

/* Add-to-cart button stretches full width inside card */
.woocommerce ul.products li.product .button {
	display: block;
	margin: var(--cb-space-3) var(--cb-space-4) var(--cb-space-4);
	text-align: center;
	border-radius: var(--cb-radius-md);
}


/* ─── 5. SHOP PAGE LAYOUT ─────────────────────────────────────────────── */
.woocommerce-products-header,
.woocommerce-shop .page-header {
	text-align: center;
	margin-bottom: var(--cb-space-6);
	padding: var(--cb-space-5) 0;
}
.woocommerce-products-header__title {
	font-size: clamp(28px, 5vw, 40px);
	margin: 0;
}

.woocommerce-result-count {
	color: var(--cb-text-muted);
	font-size: 14px;
}

.woocommerce-ordering select {
	padding: 10px 36px 10px 14px;
	border: 1.5px solid var(--cb-border);
	border-radius: var(--cb-radius-md);
	background-color: var(--cb-surface);
	cursor: pointer;
}

/* Grid gap on archive */
.woocommerce ul.products {
	gap: var(--cb-space-5);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	padding: 0;
	list-style: none;
}
.woocommerce ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	gap: var(--cb-space-2);
	display: inline-flex;
}
.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border: 1.5px solid var(--cb-border);
	border-radius: var(--cb-radius-md);
	padding: 8px 14px;
	font-weight: 500;
	background: var(--cb-surface);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--cb-primary);
	color: #fff;
	border-color: var(--cb-primary);
}


/* ─── 6. SINGLE PRODUCT PAGE ──────────────────────────────────────────── */
.woocommerce div.product {
	margin-top: var(--cb-space-5);
}

.woocommerce div.product .product_title {
	font-size: clamp(24px, 4vw, 34px);
	margin-bottom: var(--cb-space-3);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--cb-primary);
	font-size: 28px;
	font-weight: 700;
	margin-bottom: var(--cb-space-4);
}
.woocommerce div.product p.price del {
	color: var(--cb-text-muted);
	font-weight: 400;
	font-size: 22px;
}
.woocommerce div.product p.price ins {
	background: none;
	color: var(--cb-danger);
	text-decoration: none;
}

.woocommerce div.product .woocommerce-product-rating {
	margin-bottom: var(--cb-space-3);
}

/* Gallery: larger, rounded, soft shadow */
.woocommerce div.product div.images img {
	border-radius: var(--cb-radius-lg);
	box-shadow: var(--cb-shadow-md);
}

/* Thumbnail strip */
.woocommerce div.product div.images .flex-control-thumbs li {
	width: 22%;
	margin: 0 var(--cb-space-1) var(--cb-space-1) 0;
}
.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: var(--cb-radius-md);
	border: 2px solid transparent;
	transition: border-color var(--cb-fast) var(--cb-ease);
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
	border-color: var(--cb-primary);
	opacity: 1;
}

/* Quantity + Add-to-Cart */
.woocommerce div.product form.cart {
	margin: var(--cb-space-4) 0;
	display: flex;
	gap: var(--cb-space-3);
	align-items: center;
	flex-wrap: wrap;
}

.woocommerce .quantity .qty {
	width: 80px;
	height: 48px;
	text-align: center;
	border: 1.5px solid var(--cb-border);
	border-radius: var(--cb-radius-md);
	font-weight: 600;
	font-size: 16px;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button {
	height: 48px;
	padding: 0 28px;
	font-size: 16px;
	flex: 1;
	min-width: 200px;
}

/* Short description */
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--cb-text-muted);
	font-size: 15px;
	margin-bottom: var(--cb-space-4);
	padding-block: var(--cb-space-3);
	border-block: 1px solid var(--cb-border);
}

/* Product meta */
.woocommerce div.product .product_meta {
	font-size: 14px;
	color: var(--cb-text-muted);
	border-top: 1px solid var(--cb-border);
	padding-top: var(--cb-space-3);
	margin-top: var(--cb-space-4);
}
.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: 4px;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 2px solid var(--cb-border);
	padding: 0;
	margin: var(--cb-space-6) 0 var(--cb-space-4);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0 var(--cb-space-2) -2px;
	padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: var(--cb-space-3) 0;
	color: var(--cb-text-muted);
	font-weight: 600;
	border-bottom: 2px solid transparent;
	transition: all var(--cb-fast) var(--cb-ease);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--cb-primary);
	border-bottom-color: var(--cb-primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }


/* ─── 7. CART + CHECKOUT ──────────────────────────────────────────────── */
/* Cart table */
.woocommerce table.shop_table {
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--cb-surface);
}
.woocommerce table.shop_table th {
	background: var(--cb-bg-alt);
	color: var(--cb-text);
	font-weight: 600;
	padding: var(--cb-space-3);
}
.woocommerce table.shop_table td {
	padding: var(--cb-space-3);
	border-top: 1px solid var(--cb-border);
}
.woocommerce table.shop_table img {
	border-radius: var(--cb-radius-sm);
}

/* Cart totals box */
.woocommerce .cart_totals,
.woocommerce-checkout-review-order-table tfoot {
	background: var(--cb-surface);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-lg);
	padding: var(--cb-space-5);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
	font-size: 20px;
	margin-bottom: var(--cb-space-4);
	padding-bottom: var(--cb-space-3);
	border-bottom: 2px solid var(--cb-primary-light);
}
.woocommerce .cart_totals .order-total,
.woocommerce-checkout-review-order-table .order-total {
	font-size: 18px;
}
.woocommerce .cart_totals .order-total .woocommerce-Price-amount,
.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
	color: var(--cb-primary);
	font-size: 22px;
	font-weight: 700;
}

/* Checkout: 2-col on desktop */
@media (min-width: 992px) {
	form.woocommerce-checkout {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: var(--cb-space-6);
		align-items: start;
	}
	form.woocommerce-checkout .col2-set { width: 100%; }
	form.woocommerce-checkout #order_review_heading,
	form.woocommerce-checkout #order_review {
		position: sticky;
		top: 20px;
	}
}

/* Payment methods */
.woocommerce-checkout #payment {
	background: var(--cb-surface);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-lg);
	padding: var(--cb-space-4);
}
.woocommerce-checkout #payment ul.payment_methods li {
	padding: var(--cb-space-3);
	border-radius: var(--cb-radius-md);
	border: 1.5px solid var(--cb-border);
	margin-bottom: var(--cb-space-3);
	background: var(--cb-surface);
	transition: border-color var(--cb-fast) var(--cb-ease);
}
.woocommerce-checkout #payment ul.payment_methods li:hover,
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--cb-primary);
	background: var(--cb-primary-light);
}

/* Quantity stepper on cart */
.woocommerce-cart .quantity .qty { width: 70px; height: 40px; }


/* ─── 8. TRUST BADGES ─────────────────────────────────────────────────── */
.codeblue-trust {
	list-style: none;
	padding: 0;
	margin: var(--cb-space-4) 0 var(--cb-space-5);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--cb-space-3);
}
.codeblue-trust__item {
	display: flex;
	align-items: center;
	gap: var(--cb-space-2);
	padding: var(--cb-space-3);
	background: var(--cb-primary-light);
	border-radius: var(--cb-radius-md);
	font-size: 13px;
	font-weight: 500;
	color: var(--cb-primary-dark);
	line-height: 1.3;
}
.codeblue-trust__icon {
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	color: var(--cb-primary);
	flex-shrink: 0;
}
.codeblue-trust__icon svg { width: 100%; height: 100%; }
.codeblue-trust__label { flex: 1; }

/* Checkout variant — compact horizontal */
.codeblue-trust--checkout {
	margin-block: var(--cb-space-4);
	background: var(--cb-bg-alt);
	padding: var(--cb-space-3);
	border-radius: var(--cb-radius-lg);
}
.codeblue-trust--checkout .codeblue-trust {
	margin: 0;
	background: none;
}
.codeblue-trust--checkout .codeblue-trust__item {
	background: var(--cb-surface);
	font-size: 12px;
}


/* ─── 9. STICKY WHATSAPP BUTTON ───────────────────────────────────────── */
.codeblue-whatsapp {
	position: fixed;
	bottom: 24px;
	inset-inline-end: 24px; /* respects RTL: bottom-left in Arabic */
	z-index: 9999;
	width: 56px;
	height: 56px;
	border-radius: var(--cb-radius-full);
	background: var(--cb-whatsapp);
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
	transition: transform var(--cb-fast) var(--cb-ease),
	            box-shadow var(--cb-fast) var(--cb-ease);
	text-decoration: none;
}
.codeblue-whatsapp:hover {
	transform: scale(1.08);
	box-shadow: 0 12px 32px rgba(37, 211, 102, 0.6);
	color: #fff;
}
.codeblue-whatsapp svg { width: 30px; height: 30px; position: relative; z-index: 2; }

/* Pulse animation behind the icon */
.codeblue-whatsapp__pulse {
	position: absolute;
	inset: 0;
	border-radius: var(--cb-radius-full);
	background: var(--cb-whatsapp);
	animation: codeblue-pulse 2s infinite;
	z-index: 1;
	opacity: 0.6;
}
@keyframes codeblue-pulse {
	0%   { transform: scale(1);   opacity: 0.6; }
	70%  { transform: scale(1.6); opacity: 0;   }
	100% { transform: scale(1.6); opacity: 0;   }
}

/* Mobile: slightly smaller + safer corner */
@media (max-width: 640px) {
	.codeblue-whatsapp {
		bottom: 16px;
		inset-inline-end: 16px;
		width: 52px;
		height: 52px;
	}
	.codeblue-whatsapp svg { width: 26px; height: 26px; }
}

/* When mobile checkout sticky bar is visible, lift WhatsApp button */
body.woocommerce-checkout .codeblue-whatsapp { bottom: 80px; }


/* ─── 10. HEADER — Bold Blue ──────────────────────────────────────────────
   Mockup: blue gradient bar, white logo + white nav links, «OUTLET/العروض»
   highlighted, search + white rounded cart square on the end side.
   Selectors match Blocksy's rendered markup (.ct-header / .ct-header-cart /
   .ct-header-search / .ct-header-trigger). */
.ct-header,
.ct-header [data-row] > .ct-container {
	background: linear-gradient(135deg, var(--cb-primary-dark), var(--cb-primary));
}
.ct-header [data-row] {
	border: none;
	box-shadow: 0 6px 24px rgba(15, 23, 42, 0.18);
}

/* Logo — the white lockup, large and legible like the mock (~88px).
   Blocksy sizes each header row via the `--height` variable it prints from
   the Customizer, so the row is raised with it — the logo never clips. */
.ct-header [data-row="middle"] {
	--height: 112px;
}
/* Blocksy sizes the logo through this variable — its base rule is
   `.site-logo-container { height: var(--logo-shrink-height, var(--logo-max-height, 50px)) }`
   so overriding the img alone leaves a 50px box. Set the variable itself. */
.ct-header .site-logo-container {
	--logo-max-height: 92px;
	--logo-shrink-height: 92px;
}
.ct-header .site-logo-container img {
	max-height: 92px;
	width: auto;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18)); /* lifts it off the gradient */
}
.ct-header .site-title { display: none; } /* the lockup already carries the name */

/* Mobile: keep the bar compact so content stays above the fold */
@media (max-width: 689px) {
	.ct-header [data-row="middle"] { --height: 76px; }
	.ct-header .site-logo-container { --logo-max-height: 60px; --logo-shrink-height: 60px; }
	.ct-header .site-logo-container img { max-height: 60px; }
}

/* Nav links: white, bold like the mockup */
.ct-header .menu-item > a.ct-menu-link {
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
}
.ct-header .menu-item > a.ct-menu-link:hover,
.ct-header .current-menu-item > a.ct-menu-link {
	color: #cfe0f5 !important;
}
/* OUTLET / promos item pops (mockup: #ff9a9a) */
.ct-header .menu-item > a.ct-menu-link[href*='outlet'] {
	color: #ff9a9a !important;
}

/* Search + mobile trigger: white glass squares */
.ct-header .ct-header-search,
.ct-header .ct-header-trigger {
	color: #fff;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 10px;
}
.ct-header .ct-header-search:hover { background: rgba(255, 255, 255, 0.24); }
.ct-header .ct-header-search .ct-label { color: #cfe0f5; }

/* Cart: solid white rounded square with brand-blue icon (mockup) */
.ct-header .ct-header-cart .ct-cart-item {
	background: #fff;
	color: var(--cb-primary);
	border-radius: 12px;
	padding: 10px;
	transition: transform var(--cb-fast) var(--cb-ease);
}
.ct-header .ct-header-cart .ct-cart-item:hover { transform: translateY(-1px); }
.ct-header .ct-header-cart .ct-icon { fill: var(--cb-primary); }
.ct-header .ct-dynamic-count-cart {
	background: var(--cb-danger);
	color: #fff;
}

input[type="search"] { border-radius: var(--cb-radius-full) !important; }


/* ─── 11. FOOTER — Bold Blue ──────────────────────────────────────────────
   Mockup: deep navy #0f2547, three parts — links / white logo / WhatsApp
   pill + domain. Structure comes from codeblue-footer-setup.php. */
.ct-footer {
	background: #0f2547 !important;
	color: #cfe0f5;
}
.ct-footer [data-row] > .ct-container { border: none; }
.ct-footer a { color: #cfe0f5; }
.ct-footer a:hover { color: #fff; }

/* footer menu: airy horizontal list */
.ct-footer .footer-menu-inline .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	justify-content: center;
}
.ct-footer .footer-menu-inline a {
	font-weight: 600;
	font-size: 15px;
}

/* footer logo size */
.ct-footer .site-logo-container img { max-height: 96px; width: auto; }

/* WhatsApp pill + domain column (markup from codeblue-footer-setup.php) */
.cb-footer-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.cb-footer-contact__tagline {
	font-size: 15px;
	color: #cfe0f5;
}
.cb-footer-contact__wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cb-whatsapp);
	color: #fff !important;
	font-weight: 800;
	font-size: 16px;
	padding: 12px 26px;
	border-radius: var(--cb-radius-full);
	box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}
.cb-footer-contact__wa:hover { filter: brightness(1.06); color: #fff !important; }
.cb-footer-contact__socials {
	display: flex;
	gap: 12px;
}
.cb-footer-contact__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff !important;
	transition: background var(--cb-fast) var(--cb-ease), transform var(--cb-fast) var(--cb-ease);
}
.cb-footer-contact__social svg { width: 22px; height: 22px; }
.cb-footer-contact__social:hover {
	background: rgba(255, 255, 255, 0.24);
	transform: translateY(-2px);
}
.cb-footer-contact__domain {
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.02em;
}

/* copyright row */
.ct-footer .ct-footer-copyright {
	color: #8fa8cc;
	font-size: 13px;
	text-align: center;
}


/* ─── 12. UTILITIES + RESPONSIVE ──────────────────────────────────────── */
/* Loader overlay (matches WC) */
.woocommerce .blockUI.blockOverlay {
	background: rgba(255, 255, 255, 0.85) !important;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--cb-radius-md);
	border: 0;
	padding: var(--cb-space-3) var(--cb-space-4);
	background: var(--cb-primary-light);
	color: var(--cb-primary-dark);
	font-weight: 500;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--cb-primary);
}
.woocommerce-error {
	background: #fef2f2;
	color: var(--cb-danger);
}
.woocommerce-error::before {
	color: var(--cb-danger);
}

/* Skip-link a11y */
.skip-link {
	position: absolute;
	top: -40px;
	inset-inline-start: 0;
	background: var(--cb-primary);
	color: #fff;
	padding: 8px 16px;
	z-index: 100000;
}
.skip-link:focus { top: 0; }

/* Mobile single-product: stack image + summary; sticky add-to-cart */
@media (max-width: 768px) {
	.woocommerce div.product .images,
	.woocommerce div.product .summary {
		width: 100% !important;
		margin-inline-end: 0 !important;
	}
	.woocommerce div.product form.cart .button.single_add_to_cart_button {
		width: 100%;
		flex: none;
		min-width: 0;
	}
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.codeblue-whatsapp__pulse { display: none; }
}


/* ─── 13. MEDICAL SPECS (fabric/care tab + size guide) ────────────────── */
.codeblue-specs__row {
	font-size: 15px;
	color: var(--cb-text);
	margin: 0 0 var(--cb-space-2);
}
.codeblue-specs__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--cb-primary);
	margin: var(--cb-space-4) 0 var(--cb-space-2);
}

/* Feature badges */
.codeblue-specs__badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cb-space-2);
}
.codeblue-specs__badge {
	background: var(--cb-primary-light);
	color: var(--cb-primary-dark);
	font-size: 13px;
	font-weight: 500;
	padding: 6px 14px;
	border-radius: var(--cb-radius-full);
}

/* Care instructions list */
.codeblue-specs__care {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--cb-space-2);
}
.codeblue-specs__care-item {
	display: flex;
	align-items: center;
	gap: var(--cb-space-2);
	font-size: 14px;
	color: var(--cb-text);
	padding: var(--cb-space-2) var(--cb-space-3);
	background: var(--cb-bg-alt);
	border-radius: var(--cb-radius-md);
}
.codeblue-specs__care-icon {
	font-size: 18px;
	line-height: 1;
	flex-shrink: 0;
}

/* Size guide table */
.codeblue-sizeguide__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-lg);
	overflow: hidden;
	background: var(--cb-surface);
}
.codeblue-sizeguide__table th {
	background: var(--cb-primary);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: var(--cb-space-3);
	text-align: center;
}
.codeblue-sizeguide__table td {
	padding: var(--cb-space-3);
	text-align: center;
	border-top: 1px solid var(--cb-border);
	font-size: 14px;
}
.codeblue-sizeguide__table tbody tr:nth-child(even) {
	background: var(--cb-bg-alt);
}
.codeblue-sizeguide__note {
	font-size: 12px;
	color: var(--cb-text-muted);
	margin-top: var(--cb-space-2);
}


/* ─── 14. SHOP FILTERS SIDEBAR (inc/shop-filters.php) ─────────────────── */

.codeblue-shop-layout {
	display: grid;
	grid-template-columns: var(--cb-filters-width) 1fr;
	gap: var(--cb-space-6);
	align-items: start;
}

.codeblue-shop-layout__filters {
	position: sticky;
	top: var(--cb-space-4);
}

.codeblue-filters-toggle {
	display: none; /* shown only on mobile, see media query below */
}

.codeblue-filters-close {
	display: none; /* shown only inside the mobile drawer header */
}

.codeblue-shop-layout__backdrop {
	display: none;
}

/* Widget chrome for whatever WooCommerce classic filter widgets the admin drops in */
.codeblue-filter-widget {
	background: var(--cb-surface);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-lg);
	padding: var(--cb-space-4);
	margin-bottom: var(--cb-space-4);
}
.codeblue-filter-widget__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--cb-text);
	margin: 0 0 var(--cb-space-3);
	padding-bottom: var(--cb-space-2);
	border-bottom: 1px solid var(--cb-border);
}

/*
 * Filter by Attribute — checkbox/list layout.
 *
 * `.widget_layered_nav` is the outer wrapper class WordPress always adds
 * (derived from the widget's PHP class name), so it's safe to rely on
 * across WooCommerce versions. The exact BEM class names WooCommerce gives
 * the inner <ul>/<li>/count elements HAVE changed between versions, so we
 * target them generically (ul/li/a/.count) plus the commonly-seen specific
 * classes as a bonus — if a class doesn't exist on your WC version the
 * selector simply never matches, it won't break anything. If the widget
 * still looks unstyled after activating it, inspect the rendered HTML
 * (browser DevTools) and add the real class names here.
 */
.codeblue-filter-widget.widget_layered_nav ul,
.codeblue-filter-widget .woocommerce-widget-layered-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cb-space-1);
}
.codeblue-filter-widget.widget_layered_nav li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cb-space-2);
}
.codeblue-filter-widget.widget_layered_nav li a {
	flex: 1;
	padding: 6px var(--cb-space-2);
	border-radius: var(--cb-radius-sm);
	font-size: 13px;
	color: var(--cb-text);
	text-decoration: none;
	transition: background var(--cb-fast) var(--cb-ease), color var(--cb-fast) var(--cb-ease);
}
.codeblue-filter-widget.widget_layered_nav li a:hover {
	background: var(--cb-primary-light);
	color: var(--cb-primary-dark);
}
.codeblue-filter-widget.widget_layered_nav li.chosen a,
.codeblue-filter-widget.widget_layered_nav li.wc-layered-nav-term a {
	font-weight: 600;
}
.codeblue-filter-widget.widget_layered_nav .count {
	font-size: 11px;
	color: var(--cb-text-muted);
	background: var(--cb-bg-alt);
	border-radius: var(--cb-radius-full);
	padding: 1px 7px;
	flex-shrink: 0;
}

/* Filter by Price — restyle the jQuery UI slider WooCommerce loads */
.codeblue-filter-widget .price_slider_wrapper .ui-slider {
	background: var(--cb-border);
	border: 0;
	height: 4px;
	border-radius: var(--cb-radius-full);
	margin: var(--cb-space-4) var(--cb-space-1) var(--cb-space-3);
}
.codeblue-filter-widget .price_slider_wrapper .ui-slider .ui-slider-range {
	background: var(--cb-primary);
	border-radius: var(--cb-radius-full);
}
.codeblue-filter-widget .price_slider_wrapper .ui-slider .ui-slider-handle {
	width: 16px;
	height: 16px;
	top: -6px;
	background: var(--cb-surface);
	border: 3px solid var(--cb-primary);
	border-radius: 50%;
	cursor: pointer;
	outline: none;
}
.codeblue-filter-widget .price_slider_amount {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cb-space-2);
	font-size: 13px;
}
.codeblue-filter-widget .price_slider_amount .button {
	padding: 6px 14px;
	font-size: 12px;
}

/* Active Product Filters — removable chips (same version-safety note as above) */
.codeblue-filter-widget.widget_layered_nav_filters ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cb-space-2);
}
.codeblue-filter-widget.widget_layered_nav_filters li {
	display: inline-flex;
}
.codeblue-filter-widget.widget_layered_nav_filters a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--cb-primary-light);
	color: var(--cb-primary-dark);
	border-radius: var(--cb-radius-full);
	font-size: 12px;
	text-decoration: none;
}
.codeblue-filter-widget.widget_layered_nav_filters a::after {
	content: '✕';
	font-size: 10px;
}

/* Mobile: off-canvas drawer */
@media (max-width: 991px) {
	.codeblue-shop-layout {
		display: block;
	}
	.codeblue-filters-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--cb-space-2);
		width: 100%;
		justify-content: center;
		padding: 12px;
		margin-bottom: var(--cb-space-4);
		background: var(--cb-surface);
		border: 1.5px solid var(--cb-border);
		border-radius: var(--cb-radius-md);
		font-family: var(--cb-font-display);
		font-weight: 600;
		font-size: 14px;
		color: var(--cb-text);
	}
	.codeblue-filters-toggle svg { width: 18px; height: 18px; }

	.codeblue-shop-layout__filters {
		position: fixed;
		inset-block: 0;
		inset-inline-start: 0;
		width: min(85vw, 340px);
		z-index: 9996;
		background: var(--cb-surface);
		box-shadow: var(--cb-shadow-xl);
		transform: translateX(-105%);
		transition: transform var(--cb-med) var(--cb-ease);
		overflow-y: auto;
		padding: var(--cb-space-4);
	}
	[dir="rtl"] .codeblue-shop-layout__filters {
		transform: translateX(105%);
	}
	.codeblue-shop-layout__filters.is-open {
		transform: translateX(0);
	}

	.codeblue-shop-layout__filters-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-family: var(--cb-font-display);
		font-weight: 700;
		font-size: 16px;
		padding-bottom: var(--cb-space-3);
		margin-bottom: var(--cb-space-3);
		border-bottom: 1px solid var(--cb-border);
	}
	.codeblue-filters-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: var(--cb-radius-full);
		background: var(--cb-bg-alt);
		border: 0;
		font-size: 14px;
		cursor: pointer;
	}

	.codeblue-shop-layout__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, 0.5);
		z-index: 9995;
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--cb-med) var(--cb-ease);
	}
	.codeblue-shop-layout__backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}
}


/* ─── 15. MOBILE BOTTOM NAVIGATION (inc/mobile-nav.php) ───────────────── */

.codeblue-bottomnav {
	display: none; /* desktop: hidden, floating WhatsApp button covers that role */
}

@media (max-width: 768px) {
	body { padding-bottom: var(--cb-bottomnav-height); }

	/* The floating WhatsApp button is redundant once the bar has its own
	   WhatsApp icon — avoid two competing corner elements on a small screen. */
	.codeblue-whatsapp { display: none; }

	.codeblue-bottomnav {
		display: flex;
		align-items: stretch;
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		height: var(--cb-bottomnav-height);
		z-index: 9993;
		background: var(--cb-surface);
		border-top: 1px solid var(--cb-border);
		box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
	}
	.codeblue-bottomnav__item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		position: relative;
		color: var(--cb-text-muted);
		text-decoration: none;
		font-size: 11px;
		font-weight: 500;
	}
	.codeblue-bottomnav__item svg { width: 22px; height: 22px; }
	.codeblue-bottomnav__item.is-active {
		color: var(--cb-primary);
	}
	.codeblue-bottomnav__whatsapp {
		color: var(--cb-whatsapp);
	}
	.codeblue-bottomnav__badge {
		position: absolute;
		top: 2px;
		inset-inline-start: 50%;
		margin-inline-start: 4px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: var(--cb-radius-full);
		background: var(--cb-danger);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}
}


/* ─── 16. MERCHANDISING BADGES (inc/merch-badges.php) ─────────────────── */

/* Shop-loop card: opposite corner from the sale-flash badge, which sits at
   inset-inline-start (see §4 PRODUCT CARDS) — so the two never collide. */
.woocommerce ul.products li.product .codeblue-merch-badge {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	z-index: 2;
	font-family: var(--cb-font-display);
	font-weight: 700;
	font-size: 11px;
	padding: 4px 11px;
	border-radius: var(--cb-radius-full);
	color: #fff;
	box-shadow: var(--cb-shadow-sm);
}

/* Single product page: inline badge above the title */
.woocommerce div.product .codeblue-merch-badge {
	display: inline-block;
	font-family: var(--cb-font-display);
	font-weight: 700;
	font-size: 12px;
	padding: 5px 14px;
	border-radius: var(--cb-radius-full);
	color: #fff;
	margin-bottom: var(--cb-space-2);
}

.codeblue-merch-badge.is-bestseller { background: var(--cb-accent); }
.codeblue-merch-badge.is-outlet     { background: var(--cb-danger); }
.codeblue-merch-badge.is-limited    { background: var(--cb-warning); }
.codeblue-merch-badge.is-new        { background: var(--cb-success); }


/* ─── 17. OUTLET SECTION IDENTITY (inc/outlet-section.php) ────────────── */

/* Full-width promo banner at the top of the OUTLET archive */
.codeblue-outlet-hero {
	display: flex;
	align-items: center;
	gap: var(--cb-space-4);
	margin-bottom: var(--cb-space-5);
	padding: var(--cb-space-5);
	border-radius: var(--cb-radius-xl);
	background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
	color: #fff;
	box-shadow: 0 12px 30px rgba(220, 38, 38, 0.25);
	position: relative;
	overflow: hidden;
}
/* faint decorative glow */
.codeblue-outlet-hero::after {
	content: '';
	position: absolute;
	inset-inline-end: -40px;
	top: -40px;
	width: 180px;
	height: 180px;
	background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%);
	pointer-events: none;
}
.codeblue-outlet-hero__icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.15);
	border-radius: var(--cb-radius-full);
}
.codeblue-outlet-hero__icon svg { width: 28px; height: 28px; }
.codeblue-outlet-hero__text { flex: 1; min-width: 0; }
.codeblue-outlet-hero__title {
	font-family: var(--cb-font-display);
	font-weight: 900;
	font-size: clamp(20px, 4vw, 28px);
	margin: 0 0 4px;
	color: #fff;
}
.codeblue-outlet-hero__sub {
	margin: 0;
	font-size: 14px;
	opacity: 0.92;
	line-height: 1.5;
}
.codeblue-outlet-hero__flag {
	flex-shrink: 0;
	align-self: flex-start;
	background: #fff;
	color: var(--cb-danger);
	font-weight: 700;
	font-size: 12px;
	padding: 5px 14px;
	border-radius: var(--cb-radius-full);
	white-space: nowrap;
}

/* Whole-page red accent while browsing OUTLET (overrides the default blue) */
body.codeblue-outlet .woocommerce-products-header__title,
body.codeblue-outlet .woocommerce ul.products li.product .price {
	color: var(--cb-danger);
}
body.codeblue-outlet .woocommerce ul.products li.product:hover {
	border-color: #fecaca;
	box-shadow: 0 10px 30px rgba(220, 38, 38, 0.14);
}
/* Sale-flash + OUTLET card badge already red — keep the price strike clear */
body.codeblue-outlet .woocommerce ul.products li.product .price del {
	opacity: 0.7;
}

@media (max-width: 640px) {
	.codeblue-outlet-hero { flex-wrap: wrap; padding: var(--cb-space-4); }
	.codeblue-outlet-hero__flag { order: -1; }
}


/* ─── 18. EMPTY STATES + 404 ──────────────────────────────────────────── */

/* "No products found" on shop/category + empty search results
   (custom markup from functions.php replaces WooCommerce's default). */
.codeblue-empty {
	text-align: center;
	padding: var(--cb-space-8) var(--cb-space-4);
	background: var(--cb-surface);
	border: 1px dashed var(--cb-border);
	border-radius: var(--cb-radius-lg);
	color: var(--cb-text-muted);
}
.codeblue-empty__icon {
	font-size: 44px;
	line-height: 1;
	margin-bottom: var(--cb-space-3);
	filter: grayscale(0.2);
}
.codeblue-empty__title {
	font-family: var(--cb-font-display);
	font-weight: 700;
	font-size: 18px;
	color: var(--cb-text);
	margin: 0 0 var(--cb-space-1);
}
.codeblue-empty__sub {
	font-size: 14px;
	margin: 0 0 var(--cb-space-4);
}

/* 404 page */
.error404 .entry-content,
.error-404.not-found {
	text-align: center;
	max-width: 560px;
	margin-inline: auto;
	padding: var(--cb-space-8) var(--cb-space-4);
}
.error404 .page-title,
.error-404.not-found .page-title {
	font-size: clamp(28px, 6vw, 44px);
	color: var(--cb-primary);
	margin-bottom: var(--cb-space-3);
}
.error-404.not-found .page-content .search-form {
	margin-top: var(--cb-space-4);
}


/* ─── 19. PRODUCT CARD COLOR SWATCHES (inc/product-swatches.php) ───────── */
.codeblue-card-swatches {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0 var(--cb-space-4) var(--cb-space-2);
	min-height: 18px;
}
.codeblue-card-swatch {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(15, 23, 42, 0.15);
	box-shadow: inset 0 0 0 1.5px #fff;
	flex-shrink: 0;
}
.codeblue-card-swatch-more {
	font-size: 11px;
	font-weight: 600;
	color: var(--cb-text-muted);
	margin-inline-start: 2px;
}


/* ─── 20. ANNOUNCEMENT BAR (inc/storefront-extras.php) ─────────────────── */
.codeblue-announce {
	background: linear-gradient(135deg, var(--cb-primary) 0%, var(--cb-primary-dark) 100%);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	padding: 8px var(--cb-space-4);
	line-height: 1.4;
}
.codeblue-announce__inner { display: inline-block; letter-spacing: 0.01em; }
@media (max-width: 640px) { .codeblue-announce { font-size: 12px; padding: 7px var(--cb-space-3); } }


/* ─── 21. FREE-SHIPPING PROGRESS BAR (cart) ───────────────────────────── */
.codeblue-freeship {
	background: var(--cb-primary-light);
	border: 1px solid #d7e6f7;
	border-radius: var(--cb-radius-lg);
	padding: var(--cb-space-4);
	margin-bottom: var(--cb-space-4);
}
.codeblue-freeship__msg {
	margin: 0 0 var(--cb-space-2);
	font-size: 14px;
	font-weight: 500;
	color: var(--cb-primary-dark);
}
.codeblue-freeship__msg--done { color: var(--cb-success); }
.codeblue-freeship__track {
	height: 8px;
	background: #fff;
	border-radius: var(--cb-radius-full);
	overflow: hidden;
}
.codeblue-freeship__fill {
	height: 100%;
	background: linear-gradient(90deg, var(--cb-accent), var(--cb-primary));
	border-radius: var(--cb-radius-full);
	transition: width var(--cb-med) var(--cb-ease);
}


/* ─── 22. BREADCRUMBS ─────────────────────────────────────────────────── */
.woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--cb-text-muted);
	margin-bottom: var(--cb-space-4);
	padding: var(--cb-space-2) 0;
}
.woocommerce-breadcrumb a {
	color: var(--cb-text-muted);
	text-decoration: none;
	transition: color var(--cb-fast) var(--cb-ease);
}
.woocommerce-breadcrumb a:hover { color: var(--cb-primary); }


/* ─── 23. SECTION HEADINGS (reusable, for homepage/showcases) ─────────── */
.codeblue-section-heading {
	text-align: center;
	margin: 0 0 var(--cb-space-6);
}
.codeblue-section-heading__title {
	font-family: var(--cb-font-display);
	font-weight: 800;
	font-size: clamp(22px, 4vw, 30px);
	color: var(--cb-text);
	margin: 0 0 var(--cb-space-2);
	position: relative;
	display: inline-block;
	padding-bottom: var(--cb-space-2);
}
.codeblue-section-heading__title::after {
	content: '';
	position: absolute;
	inset-inline-start: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: 48px;
	height: 3px;
	border-radius: var(--cb-radius-full);
	background: linear-gradient(90deg, var(--cb-accent), var(--cb-primary));
}
.codeblue-section-heading__sub {
	color: var(--cb-text-muted);
	font-size: 15px;
	margin: 0;
}


/* ─── 24. CATEGORY TILES (photo-free, brand-colored) ──────────────────── */
/* WooCommerce subcategory cards on shop/parent-category pages */
.woocommerce ul.products li.product-category {
	background: var(--cb-surface);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-lg);
	overflow: hidden;
	transition: transform var(--cb-med) var(--cb-ease), box-shadow var(--cb-med) var(--cb-ease);
}
.woocommerce ul.products li.product-category:hover {
	transform: translateY(-4px);
	box-shadow: var(--cb-shadow-lg);
}
.woocommerce ul.products li.product-category > a {
	display: block;
	text-decoration: none;
}
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title {
	padding: var(--cb-space-4);
	font-size: 16px;
	font-weight: 700;
	color: var(--cb-text);
	text-align: center;
}
.woocommerce ul.products li.product-category h2 .count {
	display: inline-block;
	background: var(--cb-primary-light);
	color: var(--cb-primary-dark);
	font-size: 12px;
	font-weight: 600;
	border-radius: var(--cb-radius-full);
	padding: 1px 9px;
	margin-inline-start: 6px;
}
/* When a category has no image, give it a branded gradient block */
.woocommerce ul.products li.product-category a > img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	width: 100%;
}


/* ─── 25. FOOTER POLISH ───────────────────────────────────────────────── */
.site-footer .widget-title,
[class*='footer'] .widget-title {
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	margin-bottom: var(--cb-space-3);
}
.site-footer .widget,
[class*='footer'] .widget {
	font-size: 14px;
	line-height: 1.9;
}
.site-footer ul,
[class*='footer'] .menu {
	list-style: none;
	padding: 0;
	margin: 0;
}


/* ─── 26. PREMIUM POLISH (spacing + focus rings + card price weight) ──── */
/* A touch more air on the shop grid for a premium feel */
.woocommerce ul.products { gap: var(--cb-space-5); }
/* Clear, brand-colored focus ring for keyboard users everywhere */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--cb-primary);
	outline-offset: 2px;
}
/* Slightly stronger price on the card for scannability */
.woocommerce ul.products li.product .price { letter-spacing: -0.01em; }


/* ─── 27. SIZE GUIDE BUTTON + MODAL (inc/size-guide.php) ──────────────── */

/* The trigger button — sits just above the add-to-cart form */
.codeblue-sizeguide-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: var(--cb-primary);
	border: 1.5px solid var(--cb-border);
	border-radius: var(--cb-radius-md);
	padding: 9px 16px;
	font-family: var(--cb-font-display);
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	margin: 0 0 var(--cb-space-3);
	transition: border-color var(--cb-fast) var(--cb-ease), background var(--cb-fast) var(--cb-ease);
}
.codeblue-sizeguide-btn:hover {
	border-color: var(--cb-primary);
	background: var(--cb-primary-light);
}
.codeblue-sizeguide-btn svg { width: 18px; height: 18px; }

/* Modal overlay */
.codeblue-sizeguide-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: var(--cb-space-4);
}
.codeblue-sizeguide-modal[hidden] { display: none; }
.codeblue-sizeguide-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: codeblue-fade 160ms var(--cb-ease);
}
.codeblue-sizeguide-modal__dialog {
	position: relative;
	background: var(--cb-surface);
	border-radius: var(--cb-radius-xl);
	box-shadow: var(--cb-shadow-xl);
	width: 100%;
	max-width: 520px;
	max-height: 85vh;
	overflow-y: auto;
	padding: var(--cb-space-6);
	animation: codeblue-pop 200ms var(--cb-ease);
	outline: none;
}
.codeblue-sizeguide-modal__close {
	position: absolute;
	inset-inline-end: 14px;
	top: 12px;
	width: 34px;
	height: 34px;
	border: 0;
	background: var(--cb-bg-alt);
	color: var(--cb-text-muted);
	border-radius: var(--cb-radius-full);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--cb-fast) var(--cb-ease), color var(--cb-fast) var(--cb-ease);
}
.codeblue-sizeguide-modal__close:hover { background: var(--cb-danger); color: #fff; }
.codeblue-sizeguide-modal__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--cb-primary);
	margin: 0 0 var(--cb-space-4);
	padding-inline-end: 40px;
}

@keyframes codeblue-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes codeblue-pop {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.codeblue-sizeguide-modal__backdrop,
	.codeblue-sizeguide-modal__dialog { animation: none; }
}


/* ─── 28. SIMPLIFIED CHECKOUT (inc/checkout.php) ──────────────────────── */

/* Hidden helper (country field is present but not shown) */
.codeblue-hidden,
#billing_country_field.codeblue-hidden { display: none !important; }

/* Phone field: LTR digits, live validity colouring */
#billing_phone { direction: ltr; text-align: start; letter-spacing: 0.02em; }
.codeblue-field--valid {
	border-color: var(--cb-success) !important;
	box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12) !important;
}
.codeblue-field--invalid {
	border-color: var(--cb-danger) !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
}
.codeblue-field-hint {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: var(--cb-text-muted);
	direction: ltr;
	text-align: start;
}

/* Give the 5-field form room to breathe + a clean single column */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	gap: var(--cb-space-3);
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: 100%;
	float: none;
}

/* COD box: make the single method feel deliberate, not empty */
.woocommerce-checkout #payment ul.payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-checkout #payment .payment_box {
	background: var(--cb-primary-light);
	border-radius: var(--cb-radius-md);
	color: var(--cb-primary-dark);
	font-size: 13px;
}

/* Big, confident place-order button */
#place_order {
	width: 100%;
	height: 52px;
	font-size: 17px;
	font-weight: 700;
	margin-top: var(--cb-space-3);
}

/* Secure-checkout reassurance line under the button */
.codeblue-checkout-secure {
	text-align: center;
	font-size: 13px;
	color: var(--cb-text-muted);
	margin-top: var(--cb-space-3);
}


/* ─── 29. CART EXPERIENCE (inc/cart.php) ──────────────────────────────── */

/* Continue-shopping link under the cart table */
.codeblue-continue {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--cb-space-3);
	font-weight: 600;
	font-size: 14px;
	color: var(--cb-primary);
	text-decoration: none;
}
.codeblue-continue:hover { color: var(--cb-primary-dark); }

/* Free-shipping bar inside the header mini-cart: tighter spacing */
.widget_shopping_cart .codeblue-freeship,
.ct-mini-cart .codeblue-freeship {
	padding: var(--cb-space-3);
	margin-bottom: var(--cb-space-3);
}
.widget_shopping_cart .codeblue-freeship__msg { font-size: 12px; }

/* Mobile sticky checkout bar on the cart page */
.codeblue-cartbar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 9990;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--cb-space-3);
	padding: var(--cb-space-3) var(--cb-space-4);
	background: var(--cb-surface);
	border-top: 1px solid var(--cb-border);
	box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.1);
	transform: translateY(100%);
	transition: transform var(--cb-med) var(--cb-ease);
}
.codeblue-cartbar.is-visible { transform: translateY(0); }
.codeblue-cartbar__total { display: flex; flex-direction: column; line-height: 1.2; }
.codeblue-cartbar__label { font-size: 11px; color: var(--cb-text-muted); }
.codeblue-cartbar__amount { font-size: 17px; font-weight: 700; color: var(--cb-primary); }
.codeblue-cartbar__amount .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }
.codeblue-cartbar__btn {
	flex: 1;
	max-width: 60%;
	text-align: center;
	height: 46px;
	line-height: 46px;
	padding: 0 var(--cb-space-4);
	border-radius: var(--cb-radius-md);
}

/* Only on mobile; desktop keeps the normal cart-totals box */
@media (min-width: 768px) {
	.codeblue-cartbar { display: none !important; }
}
@media (max-width: 767px) {
	.codeblue-cartbar { display: flex; }
	/* leave room so the bar never hides the last cart row / footer */
	body.woocommerce-cart .site-footer { padding-bottom: 84px; }
}


/* ─── 30. HOMEPAGE HERO + FEATURES (inc/shortcodes.php) ───────────────── */

/* Photo-free branded hero */
.codeblue-hero {
	/* Bold Blue mock: 120deg #1a3f73 → #225090 (60%) → #2a63b0 */
	background: linear-gradient(120deg, var(--cb-primary-dark) 0%, var(--cb-primary) 60%, #2a63b0 100%);
	border-radius: var(--cb-radius-xl);
	color: #fff;
	padding: clamp(var(--cb-space-6), 6vw, var(--cb-space-8)) var(--cb-space-5);
	margin-bottom: var(--cb-space-6);
	position: relative;
	overflow: hidden;
}
.codeblue-hero::after {
	content: '';
	position: absolute;
	inset-inline-end: -100px;
	top: -180px;
	width: 560px;
	height: 560px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(14,165,233,0.4) 0%, transparent 65%);
	pointer-events: none;
}
.codeblue-hero__inner { position: relative; z-index: 1; max-width: 720px; }
.codeblue-hero__badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: var(--cb-radius-full);
	margin-bottom: var(--cb-space-4);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}
.codeblue-hero__title {
	font-family: var(--cb-font-display);
	font-weight: 900;
	font-size: clamp(30px, 6vw, 56px);
	line-height: 1.1;
	margin: 0 0 var(--cb-space-3);
	color: #fff;
}

/* Optional side photo (mock: rounded 20, deep shadow, photo on the visual
   left in RTL) — activates via [codeblue_hero image="…"] */
.codeblue-hero--with-image {
	display: flex;
	align-items: center;
	gap: var(--cb-space-6);
}
.codeblue-hero--with-image .codeblue-hero__inner { flex: 1.1; }
/* White card behind the photo. Studio shots are cut out on white, so the
   card reads as one clean panel instead of a hard rectangle on the blue —
   and `contain` keeps the whole figure (head to shoes) visible, which
   `cover` would crop on a tall 2:3 portrait. */
.codeblue-hero__media {
	flex: 1;
	position: relative;
	z-index: 1;
	align-self: stretch;
	min-height: 420px;
	background: #fff;
	border-radius: var(--cb-radius-xl);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}
.codeblue-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom; /* figure stands on the card's base */
	display: block;
}
/* Cut-out variant — a transparent PNG (e.g. the four-model group) stands
   straight on the gradient: no panel, no shadow box. A soft drop-shadow on
   the figures themselves keeps them from looking pasted on, and the column
   gets more room because a group needs horizontal space to stay legible. */
.codeblue-hero--cutout .codeblue-hero__inner { flex: 1; }
.codeblue-hero--cutout .codeblue-hero__media {
	flex: 1.35;
	background: none;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	min-height: 520px;
}
.codeblue-hero--cutout .codeblue-hero__media img {
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.32));
}

@media (max-width: 900px) {
	.codeblue-hero--with-image { flex-direction: column; }
	.codeblue-hero__media { width: 100%; min-height: 340px; }
	.codeblue-hero--cutout .codeblue-hero__media { min-height: 380px; }
}
.codeblue-hero__subtitle {
	font-size: clamp(15px, 2.5vw, 19px);
	line-height: 1.6;
	opacity: 0.94;
	margin: 0 0 var(--cb-space-5);
}
.codeblue-hero__cta { display: flex; flex-wrap: wrap; gap: var(--cb-space-3); }
.codeblue-hero__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 28px;
	border-radius: var(--cb-radius-md);
	font-family: var(--cb-font-display);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	transition: transform var(--cb-fast) var(--cb-ease), box-shadow var(--cb-fast) var(--cb-ease), background var(--cb-fast) var(--cb-ease);
}
.codeblue-hero__btn--primary { background: #fff; color: var(--cb-primary-dark); }
.codeblue-hero__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.2); color: var(--cb-primary-dark); }
.codeblue-hero__btn--ghost { background: rgba(255,255,255,0.12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5); }
.codeblue-hero__btn--ghost:hover { background: rgba(255,255,255,0.22); color: #fff; }
.codeblue-hero__points {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cb-space-4);
	padding: 0;
	margin: var(--cb-space-5) 0 0;
	font-size: 14px;
	font-weight: 500;
	opacity: 0.95;
}

/* "Why us" 4-up feature strip */
.codeblue-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--cb-space-4);
	margin: var(--cb-space-6) 0;
}
.codeblue-features__item {
	background: var(--cb-surface);
	border: 1px solid var(--cb-border);
	border-radius: var(--cb-radius-lg);
	padding: var(--cb-space-5);
	text-align: center;
	transition: transform var(--cb-med) var(--cb-ease), box-shadow var(--cb-med) var(--cb-ease);
}
.codeblue-features__item:hover { transform: translateY(-4px); box-shadow: var(--cb-shadow-md); }
.codeblue-features__icon { font-size: 34px; line-height: 1; margin-bottom: var(--cb-space-2); }
.codeblue-features__title { font-size: 16px; font-weight: 700; color: var(--cb-text); margin: 0 0 4px; }
.codeblue-features__sub { font-size: 13px; color: var(--cb-text-muted); margin: 0; line-height: 1.5; }


/* ─── 31. BOLD BLUE HOMEPAGE COMPONENTS (inc/shortcodes.php) ──────────── */
/* Matches the approved «Bold Blue» design mock (Claude Design). */

/* Dark navy trust strip */
.codeblue-trustbar {
	background: #132a54;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--cb-space-3);
	padding: var(--cb-space-4) var(--cb-space-6);
	border-radius: var(--cb-radius-lg);
	margin: var(--cb-space-5) 0;
}
.codeblue-trustbar__item {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}
.codeblue-trustbar__icon { font-size: 24px; line-height: 1; }
@media (max-width: 767px) {
	.codeblue-trustbar { flex-direction: column; align-items: flex-start; }
}

/* Gradient category tiles (3-up) */
.codeblue-cattiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin: var(--cb-space-5) 0;
}
.codeblue-cattiles__tile {
	height: 180px;
	border-radius: 18px;
	padding: 26px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-decoration: none;
	transition: transform var(--cb-med) var(--cb-ease), box-shadow var(--cb-med) var(--cb-ease);
}
.codeblue-cattiles__tile:hover { transform: translateY(-4px); }
.codeblue-cattiles__title {
	font-family: var(--cb-font-display);
	font-size: 26px;
	font-weight: 900;
	line-height: 1.2;
}
.codeblue-cattiles__sub { font-size: 16px; font-weight: 600; margin-top: 2px; }

.codeblue-cattiles__tile.is-primary {
	background: linear-gradient(135deg, #225090, #1a3f73);
	box-shadow: 0 12px 36px rgba(34, 80, 144, 0.18);
}
.codeblue-cattiles__tile.is-primary .codeblue-cattiles__title { color: #fff; }
.codeblue-cattiles__tile.is-primary .codeblue-cattiles__sub   { color: #cfe0f5; }

.codeblue-cattiles__tile.is-sky {
	background: linear-gradient(135deg, #0ea5e9, #225090);
	box-shadow: 0 12px 36px rgba(14, 165, 233, 0.18);
}
.codeblue-cattiles__tile.is-sky .codeblue-cattiles__title { color: #fff; }
.codeblue-cattiles__tile.is-sky .codeblue-cattiles__sub   { color: #e0f2fe; }

.codeblue-cattiles__tile.is-light { background: var(--cb-primary-light); }
.codeblue-cattiles__tile.is-light .codeblue-cattiles__title { color: var(--cb-primary); }
.codeblue-cattiles__tile.is-light .codeblue-cattiles__sub   { color: var(--cb-text-muted); }

@media (max-width: 900px) { .codeblue-cattiles { grid-template-columns: 1fr; } .codeblue-cattiles__tile { height: 140px; } }

/* Sky-gradient promo band */
.codeblue-promo {
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(120deg, #0ea5e9, #225090);
	padding: 44px 56px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cb-space-4);
	flex-wrap: wrap;
	margin: var(--cb-space-6) 0;
}
.codeblue-promo__title {
	color: #fff;
	font-family: var(--cb-font-display);
	font-size: clamp(24px, 4vw, 34px);
	font-weight: 900;
}
.codeblue-promo__sub { color: #e0f2fe; font-size: 18px; font-weight: 500; margin-top: 6px; }
.codeblue-promo__btn {
	background: #fff;
	color: #225090;
	font-family: var(--cb-font-display);
	font-size: 20px;
	font-weight: 900;
	padding: 18px 44px;
	border-radius: 12px;
	text-decoration: none;
	transition: transform var(--cb-fast) var(--cb-ease), box-shadow var(--cb-fast) var(--cb-ease);
}
.codeblue-promo__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.25); color: #225090; }
@media (max-width: 767px) { .codeblue-promo { padding: 28px; } }


/* ─── 32. «قريباً» SECTIONS (inc/coming-soon.php) ──────────────────────────
   A section the shop doesn't stock yet stays visible and honest: badged in
   the menu and on its homepage tile, with a branded notice + WhatsApp CTA
   on its archive page instead of an empty grid. */

/* menu chip */
.codeblue-soon-chip {
	display: inline-block;
	margin-inline-start: 6px;
	padding: 2px 8px;
	border-radius: var(--cb-radius-full);
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	vertical-align: middle;
	letter-spacing: 0.02em;
}

/* homepage tile */
.codeblue-cattiles__tile.is-soon {
	position: relative;
	filter: saturate(0.75);
}
.codeblue-cattiles__tile.is-soon::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(15, 37, 71, 0.35);
	border-radius: inherit;
	pointer-events: none;
}
.codeblue-cattiles__soon {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	z-index: 2;
	background: #fff;
	color: var(--cb-primary);
	font-size: 12px;
	font-weight: 800;
	padding: 6px 14px;
	border-radius: var(--cb-radius-full);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
}

/* archive notice */
.codeblue-soon {
	text-align: center;
	max-width: 620px;
	margin: var(--cb-space-8) auto;
	padding: var(--cb-space-8) var(--cb-space-5);
	background: linear-gradient(135deg, var(--cb-primary-dark), var(--cb-primary));
	border-radius: var(--cb-radius-xl);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.codeblue-soon::after {
	content: '';
	position: absolute;
	inset-inline-end: -80px;
	top: -80px;
	width: 260px;
	height: 260px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(14, 165, 233, 0.4), transparent 65%);
	pointer-events: none;
}
.codeblue-soon__badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.18);
	padding: 7px 20px;
	border-radius: var(--cb-radius-full);
	font-size: 13px;
	font-weight: 800;
	margin-bottom: var(--cb-space-4);
	position: relative;
}
.codeblue-soon__title {
	font-family: var(--cb-font-display);
	font-size: clamp(22px, 4vw, 32px);
	font-weight: 900;
	color: #fff;
	margin: 0 0 var(--cb-space-3);
	position: relative;
}
.codeblue-soon__sub {
	font-size: 16px;
	line-height: 1.7;
	color: #cfe0f5;
	margin: 0 0 var(--cb-space-5);
	position: relative;
}
.codeblue-soon__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cb-space-3);
	justify-content: center;
	position: relative;
}
.codeblue-soon__wa,
.codeblue-soon__link {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 26px;
	border-radius: var(--cb-radius-md);
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	transition: transform var(--cb-fast) var(--cb-ease), filter var(--cb-fast) var(--cb-ease);
}
.codeblue-soon__wa {
	background: var(--cb-whatsapp);
	color: #fff !important;
	box-shadow: 0 10px 26px rgba(37, 211, 102, 0.32);
}
.codeblue-soon__wa:hover { filter: brightness(1.07); transform: translateY(-2px); }
.codeblue-soon__link {
	background: #fff;
	color: var(--cb-primary-dark) !important;
}
.codeblue-soon__link:hover { transform: translateY(-2px); color: var(--cb-primary-dark) !important; }

/* ────────────────────────────────────────────────────────────────────────
   33. SHOP CARD — COMPACT, WHOLE-GARMENT IMAGES, ONE COLOUR PER CARD
   ────────────────────────────────────────────────────────────────────────
   Written against the markup Blocksy actually prints:

     li.product > figure > img        (no class on the figure)
                > h2.woocommerce-loop-product__title > a > span.codeblue-card-colour
                > span.price
                > ul.entry-meta                       (category — hidden)
                > div.ct-woo-card-actions > a.button

   Earlier rules here targeted a wrapper this theme never fills, so nothing
   they said reached the image. The figure is the frame now.
*/

.woocommerce ul.products li.product figure,
.woocommerce-page ul.products li.product figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #f4f7fb;
	aspect-ratio: 3 / 4;
	/* Fallback for any context where aspect-ratio does not win: the frame must
	   never be allowed to reach zero height. See the note on the image below. */
	min-height: 240px;
}

/* Whatever sits directly inside the frame is taken out of flow.
   Sizing an image with height:100% inside an auto-height figure is a circular
   definition — the figure asks the image how tall it is, the image asks the
   figure back — and it resolves to zero. A zero-height frame is invisible, and
   worse, it never enters the viewport, so `loading="lazy"` never fires and the
   photo is not even requested.

   It has to be `> *`, not `img`: the shop grid puts the image straight in the
   figure, but related products wrap it in an `<a class="ct-media-container">`.
   Positioning the image against that wrapper instead of the frame collapsed it
   all over again — which is why the row under a product page came up blank
   while the shop grid was fine. */
.woocommerce ul.products li.product figure > *,
.woocommerce-page ul.products li.product figure > * {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.woocommerce ul.products li.product figure img,
.woocommerce-page ul.products li.product figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;   /* the whole garment — hem and collar included */
	margin: 0;
	padding: 4px;
	transition: transform var(--cb-med) var(--cb-ease);
}
.woocommerce ul.products li.product:hover figure img {
	transform: scale(1.03);
}

/* The category is the same on every card here and only added a line. */
.woocommerce ul.products li.product .entry-meta {
	display: none;
}

/* Colour name, under the product name. */
.codeblue-card-colour {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--cb-text-muted);
	margin-top: 1px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	padding: 9px 12px 0;
	font-size: 15px;
	line-height: 1.3;
	min-height: 0;
}
.woocommerce ul.products li.product .price {
	padding: 5px 12px;
	font-size: 18px;
	margin: 0;
}
.woocommerce ul.products li.product .ct-woo-card-actions,
.woocommerce ul.products li.product .button {
	margin-top: 0;
}
.woocommerce ul.products li.product .button {
	padding: 10px 12px;
	font-size: 13.5px;
}

/* ── Phones ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
	.woocommerce ul.products li.product figure,
	.woocommerce-page ul.products li.product figure {
		aspect-ratio: 4 / 5;   /* shorter frame → more products per screen */
		min-height: 180px;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product h2 {
		padding: 7px 9px 0;
		font-size: 13px;
	}
	.codeblue-card-colour { font-size: 11px; }
	.woocommerce ul.products li.product .price {
		padding: 3px 9px;
		font-size: 15px;
	}
	.woocommerce ul.products li.product .button {
		padding: 8px 9px;
		font-size: 12px;
	}
	.codeblue-card-swatches { padding: 0 9px 7px; gap: 5px; }
	.codeblue-card-swatch { width: 15px; height: 15px; }
}


/* Size-chart artwork inside the guide modal. The charts are wide diagrams —
   letting one overflow the dialog on a phone would hide half the table. */
.codeblue-sizeguide__chart {
	display: block;
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	border-radius: 10px;
	background: #fff;
}