/**
 * KotobZone — visual identity layer over Storefront/WooCommerce.
 * Bilingual (Arabic-first) bookstore: confident navy + a coral "zone" accent,
 * Cairo for display, Tajawal for body/UI.
 */

:root {
	--kz-bg: #f6f5f2;
	--kz-surface: #ffffff;
	--kz-surface-2: #f0eee8;
	--kz-ink: #171b2e;
	--kz-ink-soft: #545b78;
	--kz-ink-faint: #8891ac;
	--kz-line: #e4e1d8;

	--kz-navy: #142747;
	--kz-navy-deep: #0c1a30;
	--kz-navy-soft: #e5e9f1;

	--kz-accent: #ba4e1e;
	--kz-accent-deep: #9a3f16;
	--kz-accent-soft: #f7e3d8;

	--kz-gold: #d9a441;
	--kz-trust-gold: #c99738;
	--kz-papyrus-border: #e2d2a5;
	--kz-papyrus-bg: #faf7f2;

	--kz-font-display: "Cairo", "Tajawal", sans-serif;
	/* Reem Kufi: geometric Kufi display face, reserved for the big category
	   banner titles. Tops out at 700 (no 800/900) -- don't assign it a heavier
	   weight than that or the browser will synthesise a fake bold. */
	--kz-font-kufi: "Reem Kufi", "Cairo", "Tajawal", sans-serif;
	--kz-font-body: "Tajawal", "Cairo", sans-serif;

	--kz-radius-sm: 4px;
	--kz-radius-md: 8px;
	--kz-space-2: 8px;
	--kz-space-3: 12px;
	--kz-space-4: 16px;
	--kz-space-5: 24px;
	--kz-space-6: 32px;
	--kz-space-7: 48px;
	--kz-space-9: 96px;
}

/* ---------- Base ---------- */
body {
	background: var(--kz-bg);
	color: var(--kz-ink);
	font-family: var(--kz-font-body);
	line-height: 1.7;
}
/* Storefront's own base stylesheet sets font-family on `body,button,input,
   textarea` as one selector group — our `body{}` rule above only re-targets
   `body` itself, so buttons/inputs/textareas were still falling through to
   Storefront's leftover Western stack ("Source Sans Pro", HelveticaNeue-Light,
   ...) instead of Tajawal/Cairo. Confirmed live: every <button> on the site
   (add-to-cart, checkout, quantity steppers) was rendering in that stack. */
button,
input,
textarea,
select {
	font-family: var(--kz-font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kz-font-display);
	color: var(--kz-ink);
	font-weight: 700;
}

a {
	color: var(--kz-navy);
}

.col-full {
	max-width: 1240px;
}

/* ---------- Header ---------- */
#masthead.site-header {
	background: var(--kz-surface);
	border-bottom: 1px solid var(--kz-line);
	padding-block: var(--kz-space-3);
}

.site-header .site-header-cart,
.site-header .storefront-primary-navigation,
.site-header .site-search {
	background: transparent;
}

.kz-logo {
	display: flex;
	align-items: center;
	gap: var(--kz-space-2);
	text-decoration: none;
}
.kz-logo svg {
	height: 58px;
	width: auto;
	display: block;
}
.kz-logo-brand {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	line-height: 1;
	text-align: right;
}
.kz-logo-text {
	font-family: var(--kz-font-display);
	font-weight: 800;
	font-size: 26px;
	color: var(--kz-navy);
	white-space: nowrap;
	line-height: 1.1;
}
.kz-logo-accent {
	color: var(--kz-accent);
}
.kz-logo-tagline {
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--kz-ink-light, #63554B);
	letter-spacing: 0.2px;
	line-height: 1.25;
	margin-top: 2px;
}
.kz-tagline {
	font-size: 12.5px;
	color: var(--kz-ink-faint);
	margin: 2px 0 0;
}

@media (max-width: 480px) {
	.kz-logo svg {
		height: 44px;
	}
	.kz-logo-text {
		font-size: 22px;
	}
	.kz-logo-tagline {
		font-size: 11.5px;
	}
}

/* ==========================================================================
   Header Navigation & Dropdown Menus (Desktop & Mobile)
   ========================================================================== */
.main-navigation {
	border-top: 1px solid var(--kz-line);
	border-bottom: 1px solid var(--kz-line);
}

@media (min-width: 768px) {
	.storefront-primary-navigation .col-full {
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
	}
	.storefront-primary-navigation #site-navigation.main-navigation {
		float: none !important;
		width: auto !important;
		flex: 1 1 auto !important;
		margin: 0 !important;
	}
	.storefront-primary-navigation .site-header-cart {
		float: none !important;
		width: auto !important;
		flex-shrink: 0 !important;
		margin: 0 !important;
	}

	.main-navigation ul.menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.main-navigation ul.menu > li {
		float: none !important;
		display: inline-flex !important;
		align-items: center !important;
		margin: 0 !important;
		position: relative !important;
	}
	.main-navigation ul.menu > li > a {
		font-family: var(--kz-font-body) !important;
		font-weight: 700 !important;
		font-size: 14px !important;
		color: var(--kz-ink) !important;
		display: inline-flex !important;
		align-items: center !important;
		padding: 12px 10px !important;
		white-space: nowrap !important;
		transition: color 0.15s ease !important;
	}
	.main-navigation ul.menu > li > a:hover {
		color: var(--kz-accent) !important;
	}

	/* Chevron indicator for dropdown parents */
	.main-navigation ul.menu > li.menu-item-has-children > a::after {
		content: '';
		display: inline-block;
		width: 5px;
		height: 5px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg) translateY(-2px);
		margin-inline-start: 6px;
		transition: transform 0.2s ease, color 0.2s ease;
		opacity: 0.65;
	}
	.main-navigation ul.menu > li.menu-item-has-children:hover > a::after {
		transform: rotate(-135deg) translateY(-2px);
		color: var(--kz-accent);
		opacity: 1;
	}

	/* Safe Hover Buffer */
	.main-navigation ul.menu li.menu-item-has-children::before {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 12px;
		z-index: 998;
	}

	/* Desktop Dropdown Card Base */
	.main-navigation ul.menu ul.sub-menu,
	.primary-navigation ul.menu li.menu-item-has-children > ul.sub-menu {
		display: none !important;
		position: absolute !important;
		top: 100% !important;
		right: 0 !important;
		left: auto !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		border: 1px solid var(--kz-line) !important;
		border-top: 3px solid var(--kz-accent) !important;
		border-radius: 0 0 var(--kz-radius-md) var(--kz-radius-md) !important;
		box-shadow: 0 14px 36px rgba(20, 39, 71, 0.14), 0 3px 10px rgba(20, 39, 71, 0.05) !important;
		padding: var(--kz-space-2) 0 !important;
		margin: 0 !important;
		min-width: 240px !important;
		z-index: 9999 !important;
	}

	/* Show on Hover / Focus */
	.main-navigation ul.menu li.menu-item-has-children:hover > ul.sub-menu,
	.main-navigation ul.menu li.menu-item-has-children.focus > ul.sub-menu,
	.main-navigation ul.menu li.menu-item-has-children:focus-within > ul.sub-menu {
		display: block !important;
	}

	/* 2-Column Grid for the English Books Dropdown */
	.main-navigation ul.menu li#menu-item-3872:hover > ul.sub-menu,
	.main-navigation ul.menu li#menu-item-3872.focus > ul.sub-menu,
	.main-navigation ul.menu li#menu-item-3872:focus-within > ul.sub-menu {
		display: grid !important;
		grid-template-columns: repeat(2, 225px) !important;
		width: 470px !important;
		min-width: 470px !important;
		gap: 2px 4px !important;
		padding: var(--kz-space-2) 4px !important;
		direction: ltr !important;
		text-align: left !important;
	}

	/* Dropdown Item Styles */
	.main-navigation ul.menu ul.sub-menu li,
	.primary-navigation ul.sub-menu li {
		float: none !important;
		display: block !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.main-navigation ul.menu ul.sub-menu li a,
	.primary-navigation ul.sub-menu li a {
		background: transparent !important;
		color: var(--kz-navy) !important;
		padding: 9px var(--kz-space-4) !important;
		font-family: var(--kz-font-body) !important;
		font-size: 13.5px !important;
		font-weight: 600 !important;
		border-radius: var(--kz-radius-sm) !important;
		margin: 1px var(--kz-space-2) !important;
		width: auto !important;
		display: flex !important;
		align-items: center !important;
		box-sizing: border-box !important;
		transition: background 0.15s ease, color 0.15s ease, padding-inline-start 0.15s ease !important;
	}
	.main-navigation ul.menu li#menu-item-3872 ul.sub-menu li a {
		justify-content: flex-start !important;
		text-align: left !important;
	}
	.main-navigation ul.menu ul.sub-menu li a:hover,
	.primary-navigation ul.sub-menu li a:hover {
		background: var(--kz-surface-2) !important;
		color: var(--kz-accent) !important;
		padding-inline-start: calc(var(--kz-space-4) + 4px) !important;
	}

	/* "All" Link at bottom of Dropdown */
	.main-navigation ul.menu ul.sub-menu li:last-child a,
	.primary-navigation ul.sub-menu li:last-child a {
		font-weight: 700 !important;
		color: var(--kz-accent) !important;
		background: rgba(186, 78, 30, 0.05) !important;
		margin-top: 4px !important;
		border-top: 1px solid rgba(186, 78, 30, 0.12) !important;
	}
	.main-navigation ul.menu ul.sub-menu li:last-child a:hover,
	.primary-navigation ul.sub-menu li:last-child a:hover {
		background: var(--kz-accent) !important;
		color: #ffffff !important;
	}
	.main-navigation ul.menu li#menu-item-3872 > ul.sub-menu li:last-child {
		grid-column: 1 / -1 !important;
	}
	.main-navigation ul.menu li#menu-item-3872 > ul.sub-menu li:last-child a {
		justify-content: center !important;
	}
}

/* Mobile Handheld Navigation */
@media (max-width: 767px) {
	.primary-navigation ul.menu li.menu-item-has-children {
		position: relative !important;
	}
	.primary-navigation ul.menu li.menu-item-has-children > button.dropdown-toggle {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 10px 14px !important;
		position: absolute !important;
		left: 0 !important;
		top: 0 !important;
		height: 44px !important;
		width: 44px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		color: var(--kz-ink-soft) !important;
	}
	.primary-navigation ul.menu li.menu-item-has-children > ul.sub-menu {
		position: static !important;
		float: none !important;
		box-shadow: none !important;
		border: none !important;
		border-inline-start: 2px solid var(--kz-line) !important;
		margin-inline-start: 18px !important;
		padding: 4px 8px !important;
		background: transparent !important;
		width: auto !important;
		min-width: 0 !important;
	}
	.primary-navigation ul.menu li.menu-item-has-children > ul.sub-menu li a {
		font-size: 13.5px !important;
		padding: 8px 12px !important;
		color: var(--kz-navy) !important;
		font-weight: 500 !important;
		display: block !important;
		background: transparent !important;
	}
	.primary-navigation ul.menu li.menu-item-has-children > ul.sub-menu li a:hover {
		color: var(--kz-accent) !important;
		background: rgba(186, 78, 30, 0.05) !important;
	}
}

.site-search input.search-field {
	border-radius: 999px;
	border: 1px solid var(--kz-line);
	background: var(--kz-surface-2);
	font-family: var(--kz-font-body);
}
.site-search input.search-field:focus {
	border-color: var(--kz-navy);
	box-shadow: 0 0 0 3px var(--kz-navy-soft);
}

#site-header-cart .cart-contents {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--kz-navy);
}
#site-header-cart .cart-contents .amount {
	color: var(--kz-ink-soft);
	font-weight: 500;
}
/* ---------- Header mini-cart dropdown (redesigned 2026-09-26) ----------
   Storefront sizes the dropdown to the cart <li> (~190px), so titles broke
   word by word and the two buttons stacked. It is now a 360px card anchored
   to the cart's left edge (the cart sits at the left end in RTL), with one
   row per book: cover, title, qty × price, and a small remove button. */
#site-header-cart {
	position: relative;
}
#site-header-cart .widget_shopping_cart {
	width: 360px;
	max-width: calc(100vw - 32px);
	background: var(--kz-surface);
	border: 1px solid var(--kz-line);
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(20, 39, 71, 0.16);
	padding: 0;
	overflow: hidden;
}
#site-header-cart:hover .widget_shopping_cart,
#site-header-cart.focus .widget_shopping_cart {
	left: 0 !important;
	right: auto !important;
}
#site-header-cart .widget_shopping_cart_content {
	padding: var(--kz-space-4);
}
#site-header-cart .woocommerce-mini-cart {
	margin: 0;
	padding: 0;
	max-height: 320px;
	overflow-y: auto;
}
#site-header-cart .woocommerce-mini-cart-item {
	position: relative;
	display: block;
	min-height: 96px;
	/* right: room for the 48px cover + gap; left: room for the remove button */
	padding: var(--kz-space-3) 60px var(--kz-space-3) 32px;
	margin: 0;
	border-bottom: 1px solid var(--kz-line);
	list-style: none;
}
#site-header-cart .woocommerce-mini-cart-item:first-child {
	padding-top: 0;
}
#site-header-cart .woocommerce-mini-cart-item > a:not(.remove) {
	display: block;
	color: var(--kz-ink);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
}
#site-header-cart .woocommerce-mini-cart-item img {
	position: absolute;
	right: 0;
	top: var(--kz-space-3);
	float: none;
	width: 48px;
	height: 72px;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: var(--kz-radius-sm);
	box-shadow: 0 3px 8px rgba(20, 39, 71, 0.15);
}
#site-header-cart .woocommerce-mini-cart-item:first-child img {
	top: 0;
}
/* Item notes (e.g. the pre-order line) sit under the title, above qty × price. */
#site-header-cart .woocommerce-mini-cart-item dl.variation {
	margin: 4px 0 0;
	padding: 0;
	border: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--kz-accent-deep);
}
#site-header-cart .woocommerce-mini-cart-item dl.variation dt {
	display: none;
}
#site-header-cart .woocommerce-mini-cart-item dl.variation dd,
#site-header-cart .woocommerce-mini-cart-item dl.variation dd p {
	margin: 0;
	padding: 0;
}
#site-header-cart .woocommerce-mini-cart-item .quantity {
	display: block;
	margin: 4px 0 0;
	color: var(--kz-ink-soft);
	font-size: 13px;
}
#site-header-cart .woocommerce-mini-cart-item .quantity .amount {
	color: var(--kz-accent-deep);
	font-weight: 700;
}
#site-header-cart .woocommerce-mini-cart-item a.remove {
	position: absolute;
	left: 0;
	right: auto;
	top: var(--kz-space-3);
	width: 24px;
	height: 24px;
	line-height: 22px;
	border-radius: 50%;
	text-align: center;
	font-size: 16px;
	color: var(--kz-ink-faint) !important;
	background: var(--kz-surface-2);
}
#site-header-cart .woocommerce-mini-cart-item:first-child a.remove {
	top: 0;
}
#site-header-cart .woocommerce-mini-cart-item a.remove:hover {
	color: #fff !important;
	background: var(--kz-accent);
}
#site-header-cart .woocommerce-mini-cart__total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
	padding: var(--kz-space-3) 0;
	border: 0;
	font-size: 15px;
}
#site-header-cart .woocommerce-mini-cart__total .amount {
	color: var(--kz-accent-deep);
	font-weight: 800;
	font-size: 17px;
}
#site-header-cart .woocommerce-mini-cart__buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kz-space-2);
	margin: 0;
	padding: 0;
}
#site-header-cart .woocommerce-mini-cart__buttons a.button {
	margin: 0;
	padding: 11px 8px;
	border-radius: var(--kz-radius-md);
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	line-height: 1.3;
}
#site-header-cart .woocommerce-mini-cart__buttons a.button:not(.checkout) {
	background: var(--kz-surface-2);
	color: var(--kz-navy);
}
#site-header-cart .woocommerce-mini-cart__buttons a.button.checkout {
	background: var(--kz-accent);
	color: #fff;
}
#site-header-cart .woocommerce-mini-cart__buttons a.button:hover {
	filter: brightness(0.95);
}
#site-header-cart .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: var(--kz-space-4) 0;
	text-align: center;
	color: var(--kz-ink-soft);
}

/* ---------- Buttons (WooCommerce core classes) ---------- */
.button,
a.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background: var(--kz-navy);
	color: #fff;
	border: 0;
	border-radius: var(--kz-radius-sm);
	font-family: var(--kz-font-body);
	font-weight: 700;
	padding: 12px 22px;
	transition: background 0.15s ease;
}
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--kz-navy-deep);
	color: #fff;
}
.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-checkout #payment #place_order {
	background: var(--kz-accent);
}
.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce-checkout #payment #place_order:hover {
	background: var(--kz-accent-deep);
}

/* ---------- Product grid ----------
   Storefront ships its own float/percentage columns-N rules, but on this
   install several of its declarations (verified present in the served
   CSS bytes, absent from the parsed stylesheet — a parser casualty
   somewhere earlier in that file) never reach the page, so `ul.products`
   falls back to block layout. Own the grid outright instead of depending
   on that stylesheet parsing cleanly. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--kz-space-5);
	margin: 0 0 var(--kz-space-6);
	padding: 0;
	list-style: none;
}
/* Storefront's float-era clearfix (`content:""; display:table`) still
   generates real boxes — once the container is a grid, those pseudo-
   elements become phantom grid items and eat one cell per row, silently
   knocking every row a product short. Grid needs no clearfix. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
}
@media (max-width: 860px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* Shop/category pages with the filter sidebar (kotobzone_shop_filters_open()
   sets loop_shop_columns to 3 there) — the grid above hardcodes 4 and ignores
   WooCommerce's own columns-N class, so it needs an explicit override here,
   not just the PHP filter. */
.woocommerce ul.products.columns-3,
.woocommerce-page ul.products.columns-3 {
	grid-template-columns: repeat(3, 1fr);
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	float: none !important;
	background: var(--kz-surface);
	border: 1px solid var(--kz-line);
	border-radius: var(--kz-radius-md);
	margin: 0 !important;
	padding: var(--kz-space-4) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px rgba(23, 27, 46, 0.1);
}
/* The <img> carries its own `aspect-ratio: 2/3` — as a replaced element,
   that alone is enough to size it correctly from its width regardless of
   intrinsic HTML width/height attributes, guaranteeing uniform card covers
   across images with different source dimensions.
   IMPORTANT: this link wrapper must NOT get `overflow: hidden` +
   `aspect-ratio` of its own — WooCommerce's loop template nests the title,
   language badge, and price *inside this same <a>* (only the add-to-cart
   button is a sibling), so clipping the anchor to the image's ratio cuts
   off all of that text silently (found via computed-geometry inspection,
   not visually obvious since nothing errors — verify with real DOM
   coordinates, not just a glance at the screenshot, if this regresses). */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product > a:first-child,
.woocommerce-page ul.products li.product a.woocommerce-loop-product__link,
.woocommerce-page ul.products li.product > a:first-child {
	display: block;
}
.woocommerce ul.products li.product img,
.woocommerce-page ul.products li.product img {
	width: 100% !important;
	height: auto !important;
	max-width: none;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: var(--kz-radius-sm);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--kz-font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--kz-ink);
	margin-top: var(--kz-space-3);
}
/* Shared meta badge (category on grid cards, language on the single
   product page) — kept neutral (navy, not accent) so it never competes
   with the terracotta onsale badge / price / CTA for attention. */
.kz-badge {
	display: inline-block;
	font-family: var(--kz-font-body);
	font-size: 12px;
	font-weight: 700;
	color: var(--kz-navy);
	background: var(--kz-navy-soft);
	border-radius: 999px;
	padding: 2px 10px;
	margin-top: 4px;
}
.kz-badge--single {
	font-size: 13px;
	margin: var(--kz-space-3) 0 4px 0;
}
.kz-card-author {
	display: block;
	font-family: var(--kz-font-body);
	font-size: 13px;
	color: var(--kz-ink-soft);
	margin-top: 2px;
}
.kz-whatsapp-order-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: var(--kz-space-3);
	padding: 12px 20px;
	background: #25d366;
	color: #fff;
	font-family: var(--kz-font-body);
	font-size: 15px;
	font-weight: 700;
	border-radius: var(--kz-radius-sm);
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.kz-whatsapp-order-btn:hover,
.kz-whatsapp-order-btn:focus {
	background: #1ebe5b;
	color: #fff;
}
.kz-whatsapp-order-btn svg {
	flex-shrink: 0;
}
/* Single product author link */
.kz-single-author {
	font-family: var(--kz-font-body);
	font-size: 14.5px;
	line-height: 1.5;
	margin: var(--kz-space-2) 0 var(--kz-space-3) 0;
	color: var(--kz-ink-soft);
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	background: rgba(20, 39, 71, 0.04);
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(20, 39, 71, 0.08);
	transition: all 0.2s ease;
}
.kz-single-author:hover {
	background: rgba(186, 78, 30, 0.06);
	border-color: rgba(186, 78, 30, 0.2);
}
.kz-single-author .kz-author-icon {
	display: inline-flex;
	align-items: center;
	color: var(--kz-accent);
}
.kz-single-author .kz-author-label {
	font-weight: 600;
	color: var(--kz-navy);
}
.kz-single-author .kz-author-link {
	font-weight: 700;
	color: var(--kz-accent);
	text-decoration: underline;
	text-decoration-color: rgba(186, 78, 30, 0.35);
	text-underline-offset: 3px;
	padding: 2px 4px;
	min-height: 38px;
	display: inline-flex;
	align-items: center;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.kz-single-author .kz-author-link:hover {
	color: var(--kz-accent-deep);
	text-decoration-color: var(--kz-accent-deep);
}

/* ---------- Single Product Trust & Delivery Banner ---------- */
.kz-single-trust-banner {
	background: var(--kz-surface);
	border: 1px solid var(--kz-line);
	border-radius: var(--kz-radius-md);
	padding: var(--kz-space-4);
	margin: var(--kz-space-4) 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--kz-font-body);
	font-size: 13.5px;
	color: var(--kz-ink-soft);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.kz-trust-item {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 1.4;
}
.kz-trust-item strong {
	color: var(--kz-navy);
}
.kz-trust-icon {
	color: var(--kz-accent);
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.kz-trust-item--free-shipping .kz-trust-icon {
	color: var(--kz-gold);
}

/* ---------- Mobile Sticky Add to Cart Bar ---------- */
.kz-sticky-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #ffffff;
	box-shadow: 0 -4px 20px rgba(12, 26, 48, 0.12);
	border-top: 1px solid #e2e8f0;
	padding: 10px 16px;
	transform: translateY(110%);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	display: none;
}
@media (max-width: 768px) {
	.kz-sticky-bar {
		display: block;
	}
	.kz-sticky-bar.is-visible {
		transform: translateY(0);
	}
	body.single-product {
		padding-bottom: 74px;
	}
}
.kz-sticky-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 600px;
	margin: 0 auto;
}
.kz-sticky-bar__info {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
}
.kz-sticky-bar__thumb {
	width: 36px;
	height: 54px;
	object-fit: cover;
	aspect-ratio: 2 / 3;
	border-radius: 4px;
	background: var(--kz-surface-2);
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.kz-sticky-bar__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}
.kz-sticky-bar__title {
	font-family: var(--kz-font-display);
	font-weight: 700;
	font-size: 13px;
	color: var(--kz-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}
.kz-sticky-bar__price {
	font-family: var(--kz-font-body);
	font-weight: 700;
	font-size: 14px;
	color: var(--kz-accent);
	line-height: 1.3;
}
.kz-sticky-bar__price del {
	font-size: 11px;
	color: var(--kz-ink-faint);
	font-weight: normal;
	margin-left: 4px;
}
.kz-sticky-bar__price ins {
	text-decoration: none;
}
.kz-sticky-bar__btn {
	background: var(--kz-accent);
	color: #ffffff;
	border: 0;
	border-radius: var(--kz-radius-md);
	font-family: var(--kz-font-display);
	font-weight: 700;
	font-size: 14px;
	padding: 10px 18px;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease, transform 0.1s ease;
	box-shadow: 0 2px 8px rgba(186, 78, 30, 0.25);
}
.kz-sticky-bar__btn:hover,
.kz-sticky-bar__btn:active {
	background: var(--kz-accent-deep);
	transform: scale(0.98);
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	font-family: var(--kz-font-body);
	font-weight: 700;
	color: var(--kz-accent-deep);
}
.woocommerce ul.products li.product .price del,
.woocommerce-page ul.products li.product .price del {
	color: var(--kz-ink-faint);
	font-weight: 400;
	opacity: 1;
}
.woocommerce ul.products li.product .price ins,
.woocommerce-page ul.products li.product .price ins {
	text-decoration: none;
}
.woocommerce span.onsale,
.woocommerce-page span.onsale {
	background: var(--kz-accent);
	/* White on terracotta: the badge inherited the accent colour for its text
	   and "تخفيض!" disappeared into its own background. */
	color: #fff;
	border-color: var(--kz-accent);
	font-family: var(--kz-font-body);
	font-weight: 700;
	border-radius: 999px;
	min-height: 0;
	min-width: 0;
	padding: 4px 10px;
	line-height: 1;
	top: 10px;
	left: 10px;
	right: auto;
}
html[dir="rtl"] .woocommerce span.onsale,
html[dir="rtl"] .woocommerce-page span.onsale {
	left: auto;
	right: 10px;
}
.woocommerce .star-rating,
.woocommerce-page .star-rating {
	color: var(--kz-gold);
}
.woocommerce .star-rating::before,
.woocommerce-page .star-rating::before {
	color: var(--kz-line);
}

/* ---------- Single product ---------- */
.woocommerce div.product .product_title {
	font-family: var(--kz-font-display);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--kz-accent-deep);
	font-family: var(--kz-font-body);
	font-weight: 700;
	font-size: 24px;
}
/* Series bundle pages: savings box and the "what's inside" cover grid.
   Markup lives in the product description (kz-bundle-* classes). */
.kz-bundle-save {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kz-space-3) var(--kz-space-5);
	align-items: center;
	margin: var(--kz-space-5) 0;
	padding: var(--kz-space-4) var(--kz-space-5);
	background: var(--kz-navy);
	color: #fff;
	border-radius: var(--kz-radius-md);
}
.kz-bundle-save__item {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}
.kz-bundle-save__label {
	font-size: 13px;
	opacity: .75;
}
.kz-bundle-save__value {
	font-family: var(--kz-font-display);
	font-size: 22px;
	font-weight: 700;
}
.kz-bundle-save__value s {
	opacity: .6;
	font-weight: 400;
}
.kz-bundle-save__value--accent {
	color: var(--kz-gold);
}
.kz-bundle-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: var(--kz-space-5) var(--kz-space-4);
	margin: var(--kz-space-5) 0;
	padding: 0;
	list-style: none;
}
.kz-bundle-list li {
	margin: 0;
	text-align: center;
}
.kz-bundle-list a {
	display: block;
	color: var(--kz-ink);
	text-decoration: none;
}
.kz-bundle-list img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var(--kz-radius-sm);
	box-shadow: 0 8px 18px rgba(20, 39, 71, .18);
	transition: transform .2s ease;
}
.kz-bundle-list a:hover img {
	transform: translateY(-4px);
}
.kz-bundle-list__num {
	display: inline-block;
	margin-top: var(--kz-space-3);
	padding: 2px 10px;
	background: var(--kz-accent-soft);
	color: var(--kz-accent-deep);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
}
.kz-bundle-list__title {
	display: block;
	margin-top: 6px;
	font-weight: 700;
	line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
	.kz-bundle-list img { transition: none; }
	.kz-bundle-list a:hover img { transform: none; }
}

/* Pre-order notice under the price (kotobzone_preorder_single_notice). */
.woocommerce div.product .kz-preorder-note {
	display: inline-block;
	margin: 0 0 var(--kz-space-4);
	padding: var(--kz-space-2) var(--kz-space-3);
	background: var(--kz-accent-soft);
	color: var(--kz-accent-deep);
	border-radius: var(--kz-radius-md);
	font-family: var(--kz-font-body);
	font-weight: 700;
	line-height: 1.5;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--kz-ink-soft);
	line-height: 1.8;
}
.woocommerce-tabs .tabs li.active,
.woocommerce-tabs ul.tabs li a {
	font-family: var(--kz-font-body);
	font-weight: 700;
}
.woocommerce-tabs .tabs li.active a {
	color: var(--kz-navy);
}

/* ---------- Cart / Checkout ---------- */
.woocommerce table.shop_table {
	border-color: var(--kz-line);
	border-radius: var(--kz-radius-md);
}
.woocommerce table.shop_table th {
	font-family: var(--kz-font-body);
	background: var(--kz-surface-2);
}
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review {
	background: var(--kz-surface);
	border: 1px solid var(--kz-line);
	border-radius: var(--kz-radius-md);
	padding: var(--kz-space-5);
}
.woocommerce-checkout form.checkout input.input-text,
.woocommerce-checkout form.checkout select {
	border-radius: var(--kz-radius-sm);
	border-color: var(--kz-line);
	font-family: var(--kz-font-body);
}

/* ---------- Footer ---------- */
#colophon.site-footer {
	background: var(--kz-navy-deep);
	color: #d7dcef;
}
#colophon.site-footer .widget-title {
	font-family: var(--kz-font-display);
	color: #fff;
}
#colophon.site-footer a {
	color: #b8c1e6;
}
#colophon.site-footer a:hover {
	color: var(--kz-accent);
}

/* 3-Column Modern Grid for Footer Widgets */
@media (min-width: 768px) {
	#colophon.site-footer .footer-widgets.col-3 {
		display: grid !important;
		grid-template-columns: 1.4fr 1fr 1.1fr !important;
		gap: var(--kz-space-6, 32px) !important;
		padding-top: var(--kz-space-6, 32px) !important;
		padding-bottom: var(--kz-space-6, 32px) !important;
	}
	#colophon.site-footer .footer-widgets.col-3::before,
	#colophon.site-footer .footer-widgets.col-3::after {
		display: none !important;
	}
	#colophon.site-footer .footer-widgets.col-3 .block {
		width: 100% !important;
		float: none !important;
		margin: 0 !important;
	}
}
#colophon .site-info {
	background: var(--kz-navy-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
#colophon .site-info .col-full {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kz-space-3);
	padding-block: var(--kz-space-5);
}
#colophon .site-info p {
	margin: 0;
	color: #9aa4cc;
	font-size: 13px;
	text-align: center;
}
#colophon .site-info a {
	color: #b8c1e6;
	text-decoration: none;
}
#colophon .site-info a:hover {
	color: #fff;
}

/* Bottom Trust: Payment Logos & Tax Registration Bar */
.kz-footer-bottom-trust {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kz-space-3);
	margin-bottom: var(--kz-space-2);
	width: 100%;
}
.kz-footer-payments-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}
.kz-footer-payments-bar .kz-pay-label {
	color: #9aa4cc;
	font-size: 13px;
	font-weight: 700;
	margin-left: 4px;
}
.kz-pay-items {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}
.kz-pay-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	padding: 5px 11px;
	height: 32px;
	color: #0c1a30;
	font-size: 12px;
	font-weight: 700;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	user-select: none;
	text-decoration: none;
}
.kz-pay-pill:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.kz-pay-pill img {
	display: block;
	max-height: 20px;
	width: auto;
	object-fit: contain;
}
.kz-pay-pill.kz-pay-cod {
	background: #ffffff;
	color: #0c1a30;
}
.kz-pay-pill.kz-pay-cod .kz-pay-icon {
	color: var(--kz-accent, #BA4E1E);
}
.kz-pay-pill.kz-pay-instapay img {
	max-height: 18px;
}
.kz-pay-pill.kz-pay-wallet img {
	max-height: 18px;
	width: 18px;
}

/* Distinguished Tax Registration Badge */
.kz-tax-badge-wrap {
	display: flex;
	justify-content: center;
}
.kz-tax-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, rgba(217, 164, 65, 0.12) 0%, rgba(20, 39, 71, 0.6) 100%);
	border: 1px solid rgba(217, 164, 65, 0.45);
	border-radius: 9999px;
	padding: 6px 18px;
	color: #e2e8f0;
	font-size: 13px;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transition: all 0.25s ease;
}
.kz-tax-badge:hover {
	border-color: var(--kz-gold);
	background: linear-gradient(135deg, rgba(217, 164, 65, 0.2) 0%, rgba(20, 39, 71, 0.8) 100%);
	transform: translateY(-1px);
}
.kz-tax-icon {
	color: var(--kz-gold);
	flex-shrink: 0;
}
.kz-tax-label {
	color: #e2e8f0;
	font-weight: 600;
	font-size: 13px;
}
.kz-tax-number {
	color: #fce79a;
	font-family: var(--kz-font-display, 'Cairo', sans-serif);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.08em;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(217, 164, 65, 0.35);
	padding: 2px 10px;
	border-radius: 6px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.kz-tax-seal {
	display: inline-flex;
	align-items: center;
	background: rgba(34, 197, 94, 0.15);
	border: 1px solid rgba(34, 197, 94, 0.35);
	color: #4ade80;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 9999px;
}

/* Footer Column 1: WhatsApp Button & Email */
.kz-footer-about {
	font-size: 14px;
	line-height: 1.7;
	color: #c4cbe8;
	margin-bottom: var(--kz-space-4);
}
.kz-footer-contact-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
}
.kz-footer-wa-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	background: #25D366 !important;
	color: #ffffff !important;
	font-family: var(--kz-font-body);
	font-size: 14px;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: 9999px;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.kz-footer-wa-btn:hover {
	background: #1ebd56 !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
}
.kz-footer-wa-btn .kz-wa-svg {
	flex-shrink: 0;
}
.kz-footer-phone-link,
.kz-footer-email-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #b8c1e6 !important;
	font-size: 13px;
	text-decoration: none;
	transition: color 0.2s ease;
}
.kz-footer-phone-link:hover,
.kz-footer-email-link:hover {
	color: #ffffff !important;
}
.kz-footer-phone-link svg {
	color: #4ade80;
	flex-shrink: 0;
}
.kz-contact-phone-link {
	color: var(--kz-accent, #BA4E1E) !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.kz-contact-phone-link:hover {
	color: var(--kz-navy, #142747) !important;
}
.kz-footer-location {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #c4cbe8;
	font-size: 13px;
	line-height: 1.5;
}
.kz-footer-location svg {
	flex-shrink: 0;
	color: var(--kz-accent, #BA4E1E);
}

/* Footer Column 4: Payment Badges */
.kz-footer-payment-note {
	font-size: 13px;
	color: #a8b2d1;
	margin-bottom: var(--kz-space-3);
}
.kz-footer-payment-badges {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.kz-pay-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--kz-radius-sm, 8px);
	padding: 8px 12px;
	color: #e2e8f0;
	transition: all 0.2s ease;
}
.kz-pay-badge:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.22);
	transform: translateX(-2px);
}
.kz-pay-badge-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 6px;
	padding: 5px 8px;
	flex-shrink: 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.kz-pay-badge-icon-box svg {
	color: var(--kz-accent, #BA4E1E);
}
.kz-pay-badge-icon-box img {
	display: block;
	max-height: 20px;
	width: auto;
	object-fit: contain;
}
.kz-pay-badge-icon-box.kz-wallets-box {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 7px;
}
.kz-pay-badge-icon-box.kz-wallets-box img {
	width: 18px;
	height: 18px;
}
.kz-pay-badge-content {
	display: flex;
	flex-direction: column;
	text-align: right;
}
.kz-pay-badge-title {
	font-size: 13px;
	font-weight: 700;
	color: #f8fafc;
	line-height: 1.35;
}
.kz-pay-badge-sub {
	font-size: 11px;
	color: #94a3b8;
	line-height: 1.35;
}

/* FAQ Page Styling */
.kz-faq-page {
	max-width: 900px;
	margin: 0 auto;
	padding-block: var(--kz-space-6);
}
.kz-faq-page .entry-header {
	text-align: center;
	margin-bottom: var(--kz-space-7);
}
.kz-faq-page .entry-title {
	font-family: var(--kz-font-display);
	font-size: 34px;
	font-weight: 800;
	color: var(--kz-navy);
	margin-bottom: 8px;
}
.kz-faq-subtitle {
	font-size: 16px;
	color: #55627a;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}
.kz-faq-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kz-space-4);
	margin-bottom: var(--kz-space-7);
}
.kz-faq-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	transition: all 0.25s ease;
}
.kz-faq-card:hover {
	border-color: var(--kz-accent);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	transform: translateY(-2px);
}
.kz-faq-q {
	font-family: var(--kz-font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--kz-navy);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.kz-faq-a {
	font-size: 15px;
	line-height: 1.8;
	color: #334155;
}
.kz-faq-a ul {
	margin: 10px 0 10px 20px;
	padding: 0;
}
.kz-faq-a li {
	margin-bottom: 6px;
}
.kz-faq-highlight {
	background: #fff8f0;
	border-right: 4px solid var(--kz-accent);
	padding: 10px 14px;
	border-radius: 4px;
	margin-top: 12px;
}
.kz-faq-footer-cta {
	background: var(--kz-navy);
	color: #ffffff;
	border-radius: 12px;
	padding: 32px 24px;
	text-align: center;
	margin-top: var(--kz-space-7);
}
.kz-faq-footer-cta h4 {
	color: #ffffff;
	font-size: 20px;
	margin: 0 0 8px;
}
.kz-faq-footer-cta p {
	color: #c4cbe8;
	font-size: 15px;
	margin: 0 0 20px;
}
.kz-faq-wa-cta {
	background: #25D366 !important;
	color: #ffffff !important;
	font-weight: 700;
	padding: 12px 24px !important;
	border-radius: 9999px !important;
	display: inline-block;
}
.kz-faq-wa-cta:hover {
	background: #1ebd56 !important;
	color: #ffffff !important;
}

/* ---------- Homepage hero (front-page.php) ---------- */
.kz-hero {
	background: var(--kz-navy);
	color: #fff;
	padding-block: 44px;
	overflow: clip;
}
.kz-hero-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: var(--kz-space-6);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--kz-space-7);
	align-items: center;
}
.kz-hero-inner > div {
	min-width: 0;
}
.kz-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--kz-space-2);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--kz-accent);
	margin-bottom: var(--kz-space-4);
}
.kz-hero h1 {
	color: #fff;
	font-size: 44px;
	line-height: 1.2;
	margin: 0 0 var(--kz-space-4);
}
.kz-hero-inner > div:first-child p {
	color: #c4cbe8;
	font-size: 17px;
	line-height: 1.8;
	max-width: 46ch;
	margin: 0 0 var(--kz-space-5);
}
.kz-hero .button {
	background: var(--kz-accent);
}
.kz-hero .button:hover {
	background: var(--kz-accent-deep);
}

/* Hero shelf — built from real cover art, not decorative blocks. Each
   book is a shallow CSS 3D box (front cover + page-edge + spine faces)
   fanned in perspective; the center book carries a ribbon bookmark
   clipped to the same notch shape as the logo mark's ribbon, in the
   same terracotta — the one recurring signature device, echoed at
   small scale on the category tabs below. Hover tilts a book toward
   the viewer; the fan angle and entrance are pure CSS, no JS. */
.kz-hero-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.kz-shelf-3d {
	display: flex;
	/* Fit the hero's grid column, including the narrow two-column breakpoints. */
	width: 100%;
	justify-content: center;
	align-items: flex-end;
	gap: min(36px, 4%);
	perspective: 1500px;
	perspective-origin: 50% 25%;
	padding-block: var(--kz-space-2);
}
.kz-book-3d {
	position: relative;
	display: block;
	width: 172px;
	max-width: 28%;
	flex-shrink: 0;
	aspect-ratio: 2 / 3;
	color: inherit;
	text-decoration: none;
	outline: none;
	animation-duration: 0.7s;
	animation-timing-function: ease;
	animation-fill-mode: both;
	z-index: 2;
}
.kz-book-3d:nth-child(1) {
	animation-name: kz-book-in-left;
	animation-delay: 0.1s;
}
.kz-book-3d:nth-child(2) {
	width: 198px;
	max-width: 32%;
	z-index: 3;
	animation-name: kz-book-in-center;
	animation-delay: 0.28s;
}
.kz-book-3d:nth-child(3) {
	animation-name: kz-book-in-right;
	animation-delay: 0.46s;
}
/* Raise active book above neighbors on hover/focus/is-open to prevent 3D clipping */
.kz-book-3d:hover,
.kz-book-3d:focus-within,
.kz-book-3d.is-open {
	z-index: 25 !important;
}
.kz-book-3d-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* RTL Fan angle: child(1) right, child(2) center, child(3) left */
.kz-book-3d:nth-child(1) .kz-book-3d-inner { transform: rotateY(20deg) rotateX(2.5deg); }
.kz-book-3d:nth-child(2) .kz-book-3d-inner { transform: rotateY(0deg) rotateX(2deg) translateZ(28px); }
.kz-book-3d:nth-child(3) .kz-book-3d-inner { transform: rotateY(-20deg) rotateX(2.5deg); }
.kz-book-3d:hover .kz-book-3d-inner,
.kz-book-3d:focus-within .kz-book-3d-inner,
.kz-book-3d.is-open .kz-book-3d-inner {
	transform: rotateY(0deg) rotateX(0deg) translateZ(60px) scale(1.05);
}
.kz-book-face {
	position: absolute;
	inset: 0;
	border-radius: 2px;
	overflow: hidden;
	backface-visibility: hidden;
}

/* Front cover swinging leaf: Arabic book hinges on the RIGHT spine */
.kz-book-cover-leaf {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform-origin: right center;
	transform: translateZ(10px) rotateY(0deg);
	transition: transform 0.65s cubic-bezier(0.25, 1, 0.35, 1);
	z-index: 6;
	cursor: pointer;
}
.kz-book-3d:hover .kz-book-cover-leaf,
.kz-book-3d:focus-visible .kz-book-cover-leaf,
.kz-book-3d.is-open .kz-book-cover-leaf {
	transform: translateZ(10px) rotateY(142deg);
}

/* Outer front cover face */
.kz-book-face--cover {
	transform: rotateY(0deg);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
	z-index: 2;
}
.kz-book-face--cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Inside of front cover (Endpaper / بطانة الغلاف الداخلية) */
.kz-book-face--cover-inside {
	transform: rotateY(180deg);
	background: linear-gradient(135deg, #f6f0e4 0%, #ebe2ce 100%);
	box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(0, 0, 0, 0.06);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kz-cover-endpaper-pattern {
	width: 78%;
	height: 82%;
	border: 1px solid rgba(186, 78, 30, 0.2);
	border-radius: 2px;
	background: radial-gradient(circle at center, rgba(186, 78, 30, 0.04) 0%, transparent 70%);
	position: relative;
}

/* Inside revealed book page */
.kz-book-face--page-content {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 12px 14px;
	background: linear-gradient(135deg, #fdfbf7 0%, #f3ece0 100%);
	color: var(--kz-navy-deep);
	text-align: start;
	overflow: hidden;
	transform: translateZ(9px);
	box-shadow: inset 3px 0 12px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.35);
	border-radius: 2px;
}
.kz-book-3d:nth-child(2) .kz-book-face--page-content {
	padding: 14px 16px;
}
.kz-book-page-header {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kz-book-page-title {
	font-family: var(--kz-font-display);
	font-weight: 700;
	font-size: 11.5px;
	line-height: 1.25;
	color: var(--kz-navy);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kz-book-3d:nth-child(2) .kz-book-page-title {
	font-size: 12.5px;
}
.kz-book-page-author {
	font-size: 9.5px;
	font-weight: 600;
	color: var(--kz-accent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kz-book-3d:nth-child(2) .kz-book-page-author {
	font-size: 10px;
}
/* Micro-typography for complete description / meta display without cutoff */
.kz-book-page-text {
	font-family: var(--kz-font-body, 'Tajawal', sans-serif) !important;
	font-size: 8.5px !important;
	line-height: 1.55 !important;
	color: #4a4032 !important;
	margin: 2px 0 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 10 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	text-align: justify !important;
	text-justify: inter-word !important;
}
.kz-book-3d:nth-child(2) .kz-book-page-text {
	font-size: 9px !important;
	line-height: 1.6 !important;
	-webkit-line-clamp: 11 !important;
}
.kz-book-page-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px dashed rgba(20, 39, 71, 0.16);
	padding-top: 5px;
	margin-top: auto;
}
.kz-book-page-price {
	font-family: var(--kz-font-display);
	font-size: 12px;
	font-weight: 800;
	color: var(--kz-navy);
}
.kz-book-page-price del {
	font-size: 9px;
	color: #999;
	font-weight: 400;
	margin-inline-end: 2px;
}
.kz-book-page-price ins {
	text-decoration: none;
	color: var(--kz-accent);
}
.kz-book-page-cta {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 9.5px;
	font-weight: 700;
	color: var(--kz-accent);
	transition: transform 0.2s ease;
}
.kz-book-3d:hover .kz-book-page-cta,
.kz-book-3d.is-open .kz-book-page-cta {
	transform: translateX(-2px);
}

/* Book 3D thickness: Spine on the RIGHT (Arabic book) */
.kz-book-face--spine {
	width: 20px;
	height: 100%;
	left: auto;
	right: -10px;
	transform-origin: center center;
	transform: rotateY(90deg);
	background: linear-gradient(90deg, #0c1a30 0%, #142747 50%, #0c1a30 100%);
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}

/* Book 3D thickness: Page edges on the LEFT (where book opens) */
.kz-book-face--pages {
	width: 20px;
	height: 100%;
	left: -10px;
	right: auto;
	transform-origin: center center;
	transform: rotateY(-90deg);
	background: repeating-linear-gradient(
		to bottom,
		#efe6d0 0px,
		#efe6d0 1px,
		#dfd4b9 1px,
		#dfd4b9 2px
	);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.25);
}

/* Book 3D thickness: Top edge of pages */
.kz-book-face--top {
	width: 100%;
	height: 20px;
	top: -10px;
	left: 0;
	transform-origin: center center;
	transform: rotateX(90deg);
	background: repeating-linear-gradient(
		to right,
		#efe6d0 0px,
		#efe6d0 1px,
		#dfd4b9 1px,
		#dfd4b9 2px
	);
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Signature ribbon on center book */
.kz-book-3d:nth-child(2) .kz-book-face--cover::before {
	content: "";
	position: absolute;
	top: -24px;
	right: 24px;
	width: 26px;
	height: 48px;
	background: var(--kz-accent);
	clip-path: polygon(0% 0%, 0% 100%, 50% 68%, 100% 100%, 100% 0%);
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
	z-index: 10;
}

/* Pillar badges (Kids & English badges) */
.kz-book-pillar-badge {
	align-self: flex-start;
	font-size: 7.5px;
	font-weight: 700;
	padding: 1.5px 6px;
	border-radius: 999px;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin-bottom: 2px;
	display: inline-block;
}
.kz-book-pillar-badge--kids {
	background: #fff0eb;
	color: var(--kz-accent);
	border: 1px solid rgba(186, 78, 30, 0.25);
}
.kz-book-pillar-badge--eng {
	background: #eaf0fb;
	color: #1e458a;
	border: 1px solid rgba(30, 69, 138, 0.25);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* English Book Physics (LTR: Left hinge spine, right page edge, opens to left) */
.kz-book-3d--ltr .kz-book-cover-leaf {
	transform-origin: left center !important;
	transform: translateZ(10px) rotateY(0deg);
}
.kz-book-3d--ltr:hover .kz-book-cover-leaf,
.kz-book-3d--ltr:focus-visible .kz-book-cover-leaf,
.kz-book-3d--ltr.is-open .kz-book-cover-leaf {
	transform: translateZ(10px) rotateY(-142deg) !important;
}
.kz-book-3d--ltr .kz-book-face--spine {
	left: -10px !important;
	right: auto !important;
	transform: rotateY(-90deg) !important;
}
.kz-book-3d--ltr .kz-book-face--pages {
	right: -10px !important;
	left: auto !important;
	transform: rotateY(90deg) !important;
}
.kz-book-3d--ltr .kz-book-face--page-content {
	direction: ltr !important;
	text-align: left !important;
}
.kz-book-3d--ltr .kz-book-page-title {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important;
	font-size: 11px !important;
	line-height: 1.25 !important;
	text-align: left !important;
}
.kz-book-3d--ltr .kz-book-page-author {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 9px !important;
	text-align: left !important;
}
.kz-book-3d--ltr .kz-book-page-text {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	font-size: 8px !important;
	line-height: 1.45 !important;
	direction: ltr !important;
	text-align: left !important;
}
.kz-book-3d--ltr .kz-book-page-footer {
	direction: ltr !important;
}
.kz-book-3d--ltr .kz-book-page-cta {
	direction: ltr !important;
}
.kz-book-3d--ltr .kz-book-page-cta svg {
	transform: rotate(180deg);
}
.kz-book-3d--ltr:hover .kz-book-page-cta svg,
.kz-book-3d--ltr.is-open .kz-book-page-cta svg {
	transform: rotate(180deg) translateX(-2px);
}

.kz-shelf-ledge {
	width: 480px;
	max-width: 100%;
	height: 5px;
	margin-top: var(--kz-space-4);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
	border-radius: 999px;
}
/* The books slide in but are never invisible: starting at opacity 0 used to
   hold back Largest Contentful Paint (Google does not count an element until it
   shows), adding the animation delay on top of every page load. */
@keyframes kz-book-in-left {
	from { transform: translateY(20px) rotate(-4deg); }
	to { transform: translateY(0) rotate(0deg); }
}
@keyframes kz-book-in-right {
	from { transform: translateY(20px) rotate(4deg); }
	to { transform: translateY(0) rotate(0deg); }
}
@keyframes kz-book-in-center {
	from { transform: translateY(20px); }
	to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.kz-book-3d {
		animation: none;
		opacity: 1;
	}
	.kz-book-3d-inner,
	.kz-book-3d:hover .kz-book-3d-inner {
		transition: none;
	}
	.kz-book-3d:nth-child(1) .kz-book-3d-inner { transform: rotateY(12deg); }
	.kz-book-3d:nth-child(3) .kz-book-3d-inner { transform: rotateY(-12deg); }
	.kz-book-cover-leaf {
		transition: opacity 0.2s linear;
	}
	.kz-book-3d:hover .kz-book-cover-leaf,
	.kz-book-3d:focus-visible .kz-book-cover-leaf,
	.kz-book-3d.is-open .kz-book-cover-leaf {
		transform: translateZ(10px) rotateY(0deg);
		opacity: 0;
	}
}
@media (max-width: 900px) {
	.kz-shelf-3d { gap: min(24px, 4%); perspective: 1100px; padding-block: 4px; }
	.kz-book-3d { width: 140px; }
	.kz-book-3d:nth-child(2) { width: 162px; }
	.kz-shelf-ledge { width: 380px; }
	.kz-book-face--page-content { padding: 9px 11px; }
	.kz-book-page-title { font-size: 10.5px; }
	.kz-book-page-author { font-size: 8.5px; }
	.kz-book-page-text { font-size: 7.5px; line-height: 1.4; -webkit-line-clamp: 7; }
	.kz-book-page-price { font-size: 10.5px; }
	.kz-book-page-cta { font-size: 8.5px; }
}
@media (max-width: 480px) {
	.kz-shelf-3d { gap: min(10px, 4%); perspective: 850px; }
	.kz-book-3d { width: 92px; }
	.kz-book-3d:nth-child(2) { width: 108px; }
	.kz-shelf-ledge { width: 260px; }
	.kz-book-face--page-content { padding: 6px 7px; }
	.kz-book-page-title { font-size: 8.5px; -webkit-line-clamp: 2; }
	.kz-book-page-author { font-size: 7.5px; }
	.kz-book-page-text { font-size: 7px !important; line-height: 1.35 !important; -webkit-line-clamp: 6 !important; }
	.kz-book-page-price { font-size: 8.5px; }
	.kz-book-page-cta { font-size: 7px; }
	.kz-book-3d:nth-child(2) .kz-book-face--cover::before {
		top: -12px;
		right: 10px;
		width: 14px;
		height: 28px;
	}
}

.kz-section {
	padding-block: var(--kz-space-9);
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: var(--kz-space-6);
}
.kz-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: var(--kz-space-6);
	flex-wrap: wrap;
	gap: var(--kz-space-3);
}
.kz-section-head h2 {
	font-size: 26px;
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--kz-space-3);
}
.kz-mask-outer {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	vertical-align: bottom;
}
.kz-mask-inner {
	display: inline-block;
	will-change: transform, opacity;
}
.kz-section-head h2::before {
	content: "";
	width: 5px;
	height: 1em;
	background: var(--kz-accent);
	border-radius: 2px;
	flex-shrink: 0;
}
.kz-section-head a {
	font-size: 14px;
	font-weight: 700;
	color: var(--kz-navy);
	text-decoration: none;
	border-bottom: 1px solid var(--kz-navy);
}

.kz-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--kz-space-5);
}
.kz-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kz-space-3);
	background: var(--kz-surface);
	border: 1px solid var(--kz-line);
	border-radius: var(--kz-radius-md);
	padding: var(--kz-space-6) var(--kz-space-5) var(--kz-space-5);
	text-align: center;
	text-decoration: none;
	color: var(--kz-ink);
	transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.kz-cat-card:hover {
	border-color: var(--kz-navy);
	transform: translateY(-4px);
	box-shadow: 0 16px 30px -18px rgba(20, 39, 71, 0.35);
}
/* شارة الأيقونة — نفس مجموعة الرسومات المستخدمة في بانر صفحة القسم
   (kotobzone_category_icon_svg)، عشان يبقى فيه اتساق بصري بين الصفحة
   الرئيسية وصفحة القسم نفسها بدل شكلين مختلفين لنفس القسم. */
.kz-cat-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--kz-accent-soft);
	color: var(--kz-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.kz-cat-card:hover .kz-cat-icon {
	background: var(--kz-accent);
	color: #fff;
	transform: scale(1.06);
}
.kz-cat-icon svg {
	width: 32px;
	height: 32px;
}
.kz-cat-name {
	font-family: var(--kz-font-display);
	font-weight: 700;
	font-size: 17px;
}
.kz-cat-card .kz-cat-count {
	display: block;
	font-size: 12px;
	color: var(--kz-ink-faint);
}

/* ---------- Category page banner ---------- */
/* Signature motif: thin vertical bars of alternating height/opacity,
   evoking a shelf of book spines seen edge-on — repeats on every category
   page as the one element that ties them together as a family. */
.kz-category-banner {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--kz-space-6);
	overflow: hidden;
	margin-bottom: var(--kz-space-6);
	padding: var(--kz-space-7) var(--kz-space-6);
	background:
		repeating-linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.09) 0,
			rgba(255, 255, 255, 0.09) 2px,
			transparent 2px,
			transparent 14px
		),
		linear-gradient(135deg, var(--kz-navy) 0%, var(--kz-navy-deep) 100%);
	border-radius: var(--kz-radius-md);
	color: #fff;
}
.kz-category-banner__icon {
	flex: 0 0 auto;
	display: flex;
	width: 120px;
	height: 120px;
	color: var(--kz-gold);
	opacity: 0.35;
}
.kz-category-banner__icon svg {
	width: 100%;
	height: 100%;
}
.kz-category-banner__text {
	position: relative;
	z-index: 1;
}
.kz-category-banner__title {
	margin: 0 0 var(--kz-space-3);
	font-family: var(--kz-font-kufi);
	font-weight: 700;
	font-size: clamp(30px, 4.2vw, 48px);
	/* Kufi rides taller and deeper than Cairo — 1.15 clipped the descenders. */
	line-height: 1.3;
	color: #fff;
	border-bottom: 3px solid var(--kz-accent);
	padding-bottom: var(--kz-space-3);
	display: inline-block;
}
.kz-category-banner__count {
	margin: 0;
	font-family: var(--kz-font-body);
	font-size: 14px;
	color: var(--kz-gold);
}
.kz-category-banner__desc {
	margin-top: var(--kz-space-2);
	max-width: 60ch;
	font-family: var(--kz-font-body);
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.65);
}

.kz-category-banner--en {
	direction: ltr;
	text-align: left;
}
.kz-category-banner--en .kz-category-banner__title {
	font-family: var(--kz-font-display);
	letter-spacing: -0.5px;
}
.kz-category-banner--en .kz-category-banner__desc {
	direction: ltr;
	text-align: left;
}

@media (max-width: 860px) {
	.kz-hero {
		padding-block: 36px 40px;
	}
	.kz-hero-inner {
		grid-template-columns: 1fr;
	}
	.kz-hero h1 {
		font-size: 32px;
	}
	.kz-category-banner {
		padding: var(--kz-space-6) var(--kz-space-4);
		gap: var(--kz-space-4);
	}
	.kz-category-banner__icon {
		width: 72px;
		height: 72px;
	}
	.kz-category-banner__title {
		font-size: 27px;
	}
}

/* ---------- Category pill bar ---------- */
.kz-pill-bar-wrap {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--kz-space-2);
	margin: 0 0 var(--kz-space-2);
}
.kz-pill-arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-top: calc(var(--kz-space-2) * -1);
	border-radius: 50%;
	border: 1px solid var(--kz-line);
	background: #fff;
	color: var(--kz-navy);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kz-pill-arrow:hover {
	border-color: var(--kz-accent);
	color: var(--kz-accent-deep);
}
.kz-pill-bar-wrap.is-at-start .kz-pill-arrow--start,
.kz-pill-bar-wrap.is-at-end .kz-pill-arrow--end {
	opacity: 0.3;
	pointer-events: none;
}
@media (max-width: 640px) {
	.kz-pill-arrow {
		display: none;
	}
}
.kz-pill-bar {
	flex: 1 1 auto;
	display: flex;
	gap: var(--kz-space-2);
	overflow-x: auto;
	padding: var(--kz-space-2) 0 var(--kz-space-5);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	-webkit-mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
	mask-image: linear-gradient(to right, transparent, black 24px, black calc(100% - 24px), transparent);
}
.kz-pill-bar-wrap.is-at-start .kz-pill-bar {
	-webkit-mask-image: linear-gradient(to right, black, black calc(100% - 24px), transparent);
	mask-image: linear-gradient(to right, black, black calc(100% - 24px), transparent);
}
.kz-pill-bar-wrap.is-at-end .kz-pill-bar {
	-webkit-mask-image: linear-gradient(to right, transparent, black 24px, black);
	mask-image: linear-gradient(to right, transparent, black 24px, black);
}
.kz-pill-bar-wrap.is-at-start.is-at-end .kz-pill-bar {
	-webkit-mask-image: none;
	mask-image: none;
}

.kz-pill-bar-wrap--sub {
	margin-top: calc(var(--kz-space-2) * -1);
}
.kz-pill-bar--sub {
	padding-bottom: var(--kz-space-4);
}
.kz-pill--sm {
	padding: 6px var(--kz-space-3);
	font-size: 13px;
	font-weight: 500;
	color: var(--kz-ink-soft);
	background: transparent;
	border-color: transparent;
}
.kz-pill--sm:hover {
	color: var(--kz-accent-deep);
	border-color: var(--kz-line);
}
.kz-pill--sm.is-active {
	background: var(--kz-accent-soft);
	border-color: var(--kz-accent-soft);
	color: var(--kz-accent-deep);
	font-weight: 700;
}
.kz-pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--kz-space-2);
	padding: 9px var(--kz-space-4);
	border: 1px solid var(--kz-line);
	border-radius: 999px;
	font-family: var(--kz-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--kz-navy);
	background: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kz-pill svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}
.kz-pill:hover {
	border-color: var(--kz-accent);
	color: var(--kz-accent-deep);
}
.kz-pill.is-active {
	background: var(--kz-accent);
	border-color: var(--kz-accent);
	color: #fff;
}

.kz-pill-count {
	font-size: 11px;
	font-weight: 700;
	opacity: 0.75;
	margin-inline-start: 4px;
	letter-spacing: 0.2px;
}
.kz-pill.is-active .kz-pill-count {
	opacity: 0.95;
	color: #fff;
}
.kz-pill--sm.is-active .kz-pill-count {
	opacity: 1;
	color: var(--kz-accent-deep);
}

.woocommerce-ordering {
	margin-bottom: var(--kz-space-4);
}
.woocommerce-ordering select.orderby {
	padding: 8px 16px 8px 32px;
	border: 1.5px solid var(--kz-line);
	border-radius: var(--kz-radius-md);
	font-family: var(--kz-font-body);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--kz-navy);
	background-color: #fff;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(20, 39, 71, 0.04);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce-ordering select.orderby:hover {
	border-color: var(--kz-accent);
}
.woocommerce-ordering select.orderby:focus {
	border-color: var(--kz-accent);
	outline: none;
	box-shadow: 0 0 0 2px rgba(186, 78, 30, 0.15);
}

.kz-did-you-mean {
	font-family: var(--kz-font-body);
	font-size: 15px;
	color: var(--kz-ink-soft);
	margin: 0 0 var(--kz-space-5);
}
.kz-did-you-mean a {
	color: var(--kz-accent-deep);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.kz-did-you-mean a:hover {
	color: var(--kz-accent);
}

/* ---------- Mobile UX/UI Enhancements (<= 600px) ---------- */
@media (max-width: 600px) {
	/* 1. Hero text padding & bounds */
	.kz-hero {
		padding-block: 20px 24px !important;
		border-radius: var(--kz-radius-md) !important;
		overflow: hidden !important;
	}
	.kz-hero-inner {
		padding-inline: 20px !important;
	}
	.kz-hero-inner > div {
		min-width: 0 !important;
	}
	.kz-hero .kz-kicker {
		font-size: 12px !important;
		margin-bottom: 6px !important;
	}
	.kz-hero h1 {
		font-size: 25px !important;
		line-height: 1.25 !important;
		margin-bottom: 8px !important;
	}
	.kz-hero-inner > div:first-child p {
		font-size: 14px !important;
		line-height: 1.65 !important;
		color: #d2d8ee !important;
		max-width: 100% !important;
		margin-bottom: 16px !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;
	}
	.kz-hero .button {
		padding: 8px 22px !important;
		font-size: 14.5px !important;
	}

	/* 2. 2-Column Category Grid */
	.kz-cat-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
	.kz-cat-card {
		padding: 16px 10px 14px !important;
		border-radius: var(--kz-radius-md) !important;
	}
	.kz-cat-icon {
		width: 48px !important;
		height: 48px !important;
	}
	.kz-cat-icon svg {
		width: 26px !important;
		height: 26px !important;
	}
	.kz-cat-name {
		font-size: 15px !important;
		font-weight: 700 !important;
	}
	.kz-cat-card .kz-cat-count {
		font-size: 12px !important;
	}

	/* 3. 2-Column Product Grid (Home, Shop & Archives) */
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
		display: grid !important;
	}
	.woocommerce ul.products li.product,
	.woocommerce-page ul.products li.product {
		padding: 10px !important;
		display: flex !important;
		flex-direction: column !important;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
		font-size: 13px !important;
		line-height: 1.4 !important;
		min-height: 2.8em !important;
		margin: 8px 0 4px !important;
	}
	.woocommerce ul.products li.product .price,
	.woocommerce-page ul.products li.product .price {
		font-size: 14px !important;
		margin-bottom: 8px !important;
	}
	.woocommerce ul.products li.product .button,
	.woocommerce-page ul.products li.product .button {
		padding: 6px 10px !important;
		font-size: 12px !important;
		margin-top: auto !important;
	}
}

/* ---------- Trust & Value Props Bar (Animated SVG Badges) ---------- */
.kz-trust-bar-section,
section.kz-trust-bar {
	display: block !important;
	width: 100% !important;
	max-width: 1240px;
	margin: var(--kz-space-7) auto var(--kz-space-5);
	padding: 0 20px;
}

.kz-trust-grid-3 {
	display: grid !important;
	width: 100% !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
}

@media (max-width: 860px) {
	.kz-trust-grid-3 {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}
}

.kz-trust-card {
	background: #FFFFFF !important;
	border: 1px solid var(--kz-papyrus-border, #E2D2A5) !important;
	border-radius: 14px !important;
	padding: 18px 20px !important;
	display: flex !important;
	align-items: center !important;
	gap: 18px !important;
	box-shadow: 0 2px 10px rgba(38, 29, 23, 0.03) !important;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important;
	position: relative;
	overflow: hidden;
	will-change: transform, opacity;
}

.kz-trust-card:hover {
	border-color: var(--kz-navy, #142747) !important;
	box-shadow: 0 8px 24px rgba(20, 39, 71, 0.08) !important;
	transform: translateY(-2px);
}

.kz-trust-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 4px;
	height: 100%;
	background: var(--kz-accent, #BA4E1E);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.kz-trust-card:hover::before {
	opacity: 1;
}

.kz-trust-card-icon {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	background: var(--kz-papyrus-bg, #FAF7F2) !important;
	border: 1.5px solid var(--kz-papyrus-border, #E2D2A5);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: visible;
	position: relative;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.kz-trust-card:hover .kz-trust-card-icon {
	transform: scale(1.05);
}

.kz-trust-card-icon svg {
	width: 52px;
	height: 52px;
	display: block;
	overflow: visible;
}

/* SVG Stroke animation preparation */
.kz-trust-card-icon svg .stroke-path,
.kz-trust-card-icon svg .seal-stroke-path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.kz-trust-card-icon svg .seal-stroke-path {
	stroke: var(--kz-trust-gold, #C99738);
}

.kz-trust-card-content {
	flex: 1;
}

.kz-trust-card-content h3,
.kz-trust-card-content h4 {
	margin: 0 0 5px !important;
	font-family: var(--kz-font-display, 'Cairo', sans-serif) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	color: var(--kz-navy, #142747) !important;
	line-height: 1.35 !important;
}

.kz-trust-card-content p {
	margin: 0 !important;
	font-family: var(--kz-font-body, 'Tajawal', sans-serif) !important;
	font-size: 13px !important;
	color: var(--kz-ink-soft, #545b78) !important;
	line-height: 1.5 !important;
}

/* ---------- Free Shipping Progress Bar (Cart & Checkout) ---------- */
.kz-free-shipping-progress-wrap {
	margin-bottom: var(--kz-space-5);
}
.kz-free-shipping-progress {
	background: var(--kz-surface);
	border: 1.5px solid var(--kz-accent-soft);
	border-radius: var(--kz-radius-md);
	padding: 16px 20px;
	box-shadow: 0 4px 12px rgba(20, 39, 71, 0.04);
	transition: all 0.3s ease;
}
.kz-free-shipping-progress.is-unlocked {
	border-color: #38a169;
	background: #f0fff4;
}
.kz-fsp-header {
	display: flex;
	align-items: center;
	gap: var(--kz-space-3);
	font-family: var(--kz-font-body);
	font-size: 15px;
	color: var(--kz-navy);
}
.kz-fsp-icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--kz-accent);
}
.kz-fsp-message {
	line-height: 1.5;
}
.kz-fsp-bar-outer {
	width: 100%;
	height: 9px;
	background: var(--kz-line);
	border-radius: 999px;
	overflow: hidden;
	margin-top: 12px;
}
.kz-fsp-bar-inner {
	height: 100%;
	background: linear-gradient(90deg, var(--kz-accent), #e06d3b);
	border-radius: 999px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.kz-free-shipping-progress.is-unlocked .kz-fsp-bar-inner {
	background: #38a169;
}

/* ---------- More by Same Author Section ---------- */
.kz-author-books-section {
	border-top: 1px solid var(--kz-line);
	margin-top: var(--kz-space-7);
	padding-top: var(--kz-space-6);
}

/* ---------- Quick Google Sign-In on Checkout ---------- */
.kz-checkout-google-prompt-wrap {
	margin-bottom: var(--kz-space-5);
}
.kz-checkout-google-prompt {
	background: #ffffff;
	border: 1.5px solid #e2e8f0;
	border-radius: var(--kz-radius-md);
	padding: 18px 24px;
	box-shadow: 0 4px 14px rgba(20, 39, 71, 0.04);
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	transition: border-color 0.2s ease;
}
.kz-checkout-google-prompt:hover {
	border-color: #cbd5e1;
}
.kz-admin-preview-notice {
	font-size: 13px;
	color: #1e40af;
	background: #eff6ff;
	border: 1px solid #bfdbfe;
	border-radius: var(--kz-radius-sm, 6px);
	padding: 8px 12px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.kz-admin-tag {
	display: inline-block;
	background: #2563eb;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 4px;
}
.kz-cgp-header {
	display: flex;
	align-items: center;
	gap: 12px;
}
.kz-cgp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(186, 78, 30, 0.1);
	color: var(--kz-accent);
	flex-shrink: 0;
}
.kz-cgp-text {
	font-family: var(--kz-font-body);
	font-size: 15px;
	color: var(--kz-navy);
	line-height: 1.4;
}
.kz-cgp-text strong {
	font-family: var(--kz-font-display);
	color: var(--kz-navy);
}
.kz-cgp-button {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.kz-cgp-button .nsl-container {
	width: 100%;
	max-width: 320px;
}
.kz-cgp-button .nsl-container-block {
	display: block !important;
}
@media (min-width: 640px) {
	.kz-checkout-google-prompt {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.kz-admin-preview-notice {
		width: 100%;
	}
	.kz-cgp-header {
		flex: 1;
		min-width: 260px;
	}
	.kz-cgp-button {
		justify-content: flex-end;
		flex-shrink: 0;
	}
}

/* -------------------------------------------------------------------------
 * Publisher Brand Archive Header & Logo Badge
 * ------------------------------------------------------------------------- */
.tax-product_brand .woocommerce-products-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: 2rem;
}
.tax-product_brand .woocommerce-products-header .page-title {
	font-family: var(--kz-font-display);
	font-weight: 800;
	color: var(--kz-navy);
	margin: 0 0 1rem 0;
	font-size: 2.15rem;
}
.kz-brand-header-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0.5rem auto 1.5rem auto;
	padding: 1rem 2rem;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	box-shadow: 0 4px 20px rgba(20, 39, 71, 0.06);
	min-width: 200px;
	max-width: 360px;
	min-height: 120px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kz-brand-header-logo:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 26px rgba(20, 39, 71, 0.1);
}
/* Storefront caps the brand logo with
   `.tax-product_brand .woocommerce-products-header .brand-thumbnail { max-height: 2.29em }`
   (~36px). That selector outranks a plain `.kz-brand-header-logo img…`, so the
   logo rendered at ~34×36px inside a 200px card. Match its scope to win. */
.tax-product_brand .woocommerce-products-header .kz-brand-header-logo img.kz-brand-thumbnail {
	max-width: 300px;
	max-height: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}
@media (max-width: 768px) {
	.kz-brand-header-logo {
		padding: 0.75rem 1.25rem;
		max-width: 280px;
		min-height: 100px;
	}
	.tax-product_brand .woocommerce-products-header .kz-brand-header-logo img.kz-brand-thumbnail {
		max-width: 220px;
		max-height: 120px;
	}
}
/* Publishers without a logo: monogram in the same card (kotobzone_brand_archive_header()). */
.kz-brand-header-monogram {
	min-width: 150px;
	min-height: 150px;
	padding: 1rem;
}
.kz-brand-header-monogram span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: var(--kz-navy);
	box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--kz-accent);
	color: #fff;
	font-family: var(--kz-font-kufi);
	font-weight: 700;
	font-size: 3rem;
	line-height: 1;
	letter-spacing: 0.02em;
}
@media (max-width: 768px) {
	.kz-brand-header-monogram { min-width: 120px; min-height: 120px; }
	.kz-brand-header-monogram span { width: 86px; height: 86px; font-size: 2.3rem; }
}
/* Ensure unassigned placeholder thumbnails in brands are never displayed */
.tax-product_brand img.brand-thumbnail:not(.kz-brand-thumbnail) {
	display: none !important;
}

/* ==========================================================================
   Shop/category filter sidebar (kotobzone_shop_filters_open/close in
   functions.php) — sidebar on desktop, bottom sheet on mobile.
   ========================================================================== */

.kz-shop-layout {
	display: flex;
	gap: var(--kz-space-6);
	align-items: flex-start;
}

.kz-shop-main {
	flex: 1;
	min-width: 0;
}

.kz-shop-filters {
	flex: none;
	width: 240px;
	background: var(--kz-surface);
	border: 1px solid var(--kz-line);
	border-radius: var(--kz-radius-md);
	padding: var(--kz-space-4);
}

.kz-shop-filters-head {
	display: none;
}

.kz-filter-trigger,
.kz-shop-filters-backdrop {
	display: none;
}

/* ---------- Facet groups (the_widget() before/after wrappers) ---------- */

.kz-facet {
	margin-bottom: var(--kz-space-5);
}
.kz-facet:last-child {
	margin-bottom: 0;
}

.kz-facet-title {
	font-family: var(--kz-font-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--kz-ink);
	margin-bottom: var(--kz-space-2);
}

/* Layered nav (language / author list or dropdown) */
.kz-facet .woocommerce-widget-layered-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kz-facet .woocommerce-widget-layered-nav-list__item {
	padding: 4px 0;
}
.kz-facet .woocommerce-widget-layered-nav-list__item a,
.kz-facet .woocommerce-widget-layered-nav-list__item span {
	font-family: var(--kz-font-body);
	font-size: 13.5px;
	color: var(--kz-ink-soft);
	text-decoration: none;
}
.kz-facet .woocommerce-widget-layered-nav-list__item a:hover {
	color: var(--kz-accent);
}
.kz-facet .woocommerce-widget-layered-nav-list__item--chosen a {
	color: var(--kz-ink);
	font-weight: 700;
}
.kz-facet .woocommerce-widget-layered-nav-list__item .count {
	color: var(--kz-ink-faint);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

/* Active filter chips */
.kz-facet .woocommerce-widget-layered-nav-filters-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.kz-facet .woocommerce-widget-layered-nav-filters-list li a {
	display: inline-flex;
	align-items: center;
	background: var(--kz-accent-soft);
	color: var(--kz-accent-deep);
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	padding: 5px 10px;
	text-decoration: none;
}

/* Price filter (WooCommerce's own slider template) */
.kz-facet .price_slider_amount {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	margin-top: var(--kz-space-3);
}
.kz-facet .price_slider_amount .button {
	background: var(--kz-navy);
	color: #fff;
	border-radius: var(--kz-radius-sm);
	font-family: var(--kz-font-body);
	font-weight: 700;
	font-size: 12.5px;
	padding: 7px 14px;
}
/*
 * Storefront's price-slider CSS is written for `.widget_price_filter` as the
 * wrapper class (see kotobzone_shop_filters_open() in functions.php for why
 * that class had gone missing) — these three rules restore position/size once
 * that class is back, kept here since `.kz-facet` is the color/branding layer
 * on top either way.
 */
.kz-facet.widget_price_filter .price_slider,
.kz-facet.widget_price_filter .ui-slider {
	position: relative;
	text-align: right;
	margin: 14px 6px 10px;
}
.kz-facet.widget_price_filter .ui-slider-horizontal {
	height: 0.5em;
}
.kz-facet.widget_price_filter .ui-slider .ui-slider-range {
	position: absolute;
	top: 0;
	z-index: 1;
	display: block;
	height: 100%;
	border: 0;
	border-radius: 1em;
}
.kz-facet.widget_price_filter .ui-slider .ui-slider-handle {
	position: absolute;
	top: auto;
	z-index: 2;
	width: 1em;
	height: 1em;
	margin-top: -0.25em;
	box-sizing: border-box;
	border-radius: 1em;
	cursor: ew-resize;
	outline: 0;
}
.kz-facet .ui-slider .ui-slider-range {
	background: var(--kz-accent);
}
.kz-facet .ui-slider .ui-slider-handle {
	background: #fff;
	border: 2px solid var(--kz-accent);
}

/* Manual min/max price entry — WooCommerce ships these inputs but hides them
 * (price-slider.js runs `$('input#min_price, input#max_price').hide()`
 * unconditionally on init), leaving the slider as the only way to set a
 * price; !important is here specifically to beat that inline display:none. */
.kz-facet .price_slider_amount .price_label {
	display: none;
}
/* WooCommerce's own "أدنى سعر" / "أعلى سعر" labels exist but are
 * screen-reader-only by default — surfaced here as the only visual cue for
 * which of the two bare number boxes is which, since a pre-filled "0" value
 * hides the input's own placeholder text. */
.kz-facet .price_slider_amount label.screen-reader-text {
	position: static !important;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	white-space: nowrap;
	font-size: 11px;
	color: var(--kz-ink-faint);
	font-family: var(--kz-font-body);
}
.kz-facet .price_slider_amount input#min_price,
.kz-facet .price_slider_amount input#max_price {
	display: block !important;
	width: 72px;
	padding: 6px 8px;
	border: 1px solid var(--kz-line);
	border-radius: var(--kz-radius-sm);
	background: var(--kz-surface);
	color: var(--kz-ink);
	font-family: var(--kz-font-body);
	font-size: 12.5px;
	text-align: center;
	direction: ltr;
}
.kz-facet .price_slider_amount input#min_price:focus,
.kz-facet .price_slider_amount input#max_price:focus {
	outline: none;
	border-color: var(--kz-accent);
}
.kz-facet .price_slider_amount .kz-price-sep {
	color: var(--kz-ink-faint);
	font-size: 12.5px;
}

@media (max-width: 860px) {
	.kz-shop-layout {
		display: block;
	}

	.kz-filter-trigger {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		background: var(--kz-surface);
		border: 1px solid var(--kz-line);
		border-radius: 999px;
		font-family: var(--kz-font-body);
		font-weight: 700;
		font-size: 13px;
		color: var(--kz-ink);
		padding: 8px 16px;
		margin: 0 0 var(--kz-space-3);
		cursor: pointer;
	}

	.kz-filter-trigger-badge {
		display: inline-grid;
		place-items: center;
		min-width: 17px;
		height: 17px;
		border-radius: 999px;
		background: var(--kz-accent);
		color: #fff;
		font-size: 10.5px;
		font-weight: 800;
		padding: 0 4px;
	}

	.kz-shop-filters-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(12, 26, 48, 0.4);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s ease;
		z-index: 1000;
	}
	.kz-shop-filters-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	.kz-shop-filters {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		max-height: 80vh;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -8px 30px rgba(20, 39, 71, 0.18);
		transform: translateY(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		z-index: 1001;
	}
	.kz-shop-filters.is-open {
		transform: translateY(0);
	}

	.kz-shop-filters-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: -16px -16px 12px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--kz-line);
		position: sticky;
		top: 0;
		background: var(--kz-surface);
	}
	.kz-shop-filters-head span {
		font-family: var(--kz-font-display);
		font-weight: 700;
		font-size: 15px;
	}
	.kz-shop-filters-close-btn {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		background: var(--kz-surface-2);
		border: none;
		font-size: 14px;
		color: var(--kz-ink-soft);
		cursor: pointer;
	}
}

/* Site-wide floating WhatsApp button (kotobzone_floating_whatsapp_button()) —
   hidden on single product pages, see the PHP for why. */
.kz-whatsapp-float {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 6px 18px rgba(20, 39, 71, 0.28);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kz-whatsapp-float:hover,
.kz-whatsapp-float:focus {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(20, 39, 71, 0.32);
}
@media (max-width: 480px) {
	.kz-whatsapp-float {
		width: 48px;
		height: 48px;
		left: 14px;
		bottom: 14px;
	}
}

/* =========================================================================
 * Checkout Page Overhaul (Distraction-Free, CTA, Trust & Ergonomics)
 * ========================================================================= */

/* ---------- 1. Distraction-Free Header & Footer ---------- */
body.woocommerce-checkout .site-search,
body.woocommerce-checkout .main-navigation,
body.woocommerce-checkout .site-header-cart,
body.woocommerce-checkout .storefront-breadcrumb {
	display: none !important;
}

body.woocommerce-checkout .site-header {
	padding: 16px 0 !important;
	border-bottom: 1px solid #e2e8f0 !important;
	margin-bottom: 24px !important;
	background: #ffffff !important;
}

body.woocommerce-checkout .site-header .site-branding {
	margin: 0 auto !important;
	float: none !important;
	text-align: center !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
}

body.woocommerce-checkout .site-header .site-branding .custom-logo-link,
body.woocommerce-checkout .site-header .site-branding .site-title a {
	margin: 0 auto !important;
}

body.woocommerce-checkout .site-footer .col-full > .kz-footer-grid,
body.woocommerce-checkout .site-footer .footer-widgets,
body.woocommerce-checkout .site-footer .site-info .kz-footer-bottom-links {
	display: none !important;
}

body.woocommerce-checkout .site-footer {
	padding: 24px 0 !important;
	border-top: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	margin-top: 40px !important;
}

body.woocommerce-checkout .site-footer .site-info {
	text-align: center !important;
	padding: 0 !important;
}

/* Hide floating WhatsApp on checkout to avoid visual interference */
body.woocommerce-checkout .kz-whatsapp-float {
	display: none !important;
}

/* ---------- 2. Primary Place Order CTA Button (Blocks & Classic) ---------- */
.wc-block-components-checkout-place-order-button,
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout button#place_order {
	background-color: #BA4E1E !important;
	color: #ffffff !important;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif) !important;
	font-weight: 800 !important;
	font-size: 1.15rem !important;
	min-height: 54px !important;
	border-radius: 12px !important;
	border: none !important;
	box-shadow: 0 4px 15px rgba(186, 78, 30, 0.35) !important;
	transition: all 0.25s ease !important;
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	letter-spacing: normal !important;
	margin-top: 12px !important;
}

.wc-block-components-checkout-place-order-button:hover,
.woocommerce-checkout #payment #place_order:hover,
.woocommerce-checkout button#place_order:hover {
	background-color: #9a3f16 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 20px rgba(186, 78, 30, 0.45) !important;
	transform: translateY(-1px) !important;
}

.wc-block-components-checkout-place-order-button:active,
.woocommerce-checkout #payment #place_order:active,
.woocommerce-checkout button#place_order:active {
	transform: translateY(1px) !important;
	box-shadow: 0 2px 8px rgba(186, 78, 30, 0.3) !important;
}

/* Saved-address card: WooCommerce shows only a small "تحرير" link, and
   customers didn't find where to change the governorate. Make it a clear
   button that says what it does. (The label is set in CSS because the
   Blocks checkout text comes from JS translations, not PHP gettext.) */
.wc-block-components-address-card__edit {
	font-size: 0 !important;
	display: inline-flex !important;
	align-items: center;
	padding: 6px 12px !important;
	border: 1.5px solid var(--kz-accent) !important;
	border-radius: 999px;
	text-decoration: none !important;
	background: var(--kz-accent-soft);
	cursor: pointer;
}
.wc-block-components-address-card__edit::after {
	content: "تغيير العنوان أو المحافظة";
	font-size: 13px;
	font-weight: 700;
	color: var(--kz-accent-deep);
	line-height: 1.4;
}

/* ---------- 3. Egyptian Address Ergonomics ---------- */
/* Country is Egypt-only: hide field */
.wc-block-components-address-form__country,
.wc-block-components-country-input,
#shipping-country,
#billing-country,
.woocommerce-checkout .form-row[id*="country_field"] {
	display: none !important;
}

/* Postcode is not used in Egypt: hide field */
.wc-block-components-address-form__postcode,
#shipping-postcode,
#billing-postcode,
.woocommerce-checkout .form-row[id*="postcode_field"] {
	display: none !important;
}

/* WhatsApp note under phone input */
.kz-checkout-phone-note {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #059669;
	margin-top: 6px;
	margin-bottom: 4px;
	font-family: var(--kz-font-body, 'Tajawal', sans-serif);
	line-height: 1.4;
}

.kz-checkout-phone-note svg {
	flex-shrink: 0;
}

/* ---------- 4. WhatsApp Checkout Order Option ---------- */
.kz-checkout-wa-order-wrap {
	margin-top: 14px;
	margin-bottom: 8px;
	width: 100%;
}

.kz-checkout-wa-divider {
	display: flex;
	align-items: center;
	text-align: center;
	margin: 12px 0;
	color: #94a3b8;
	font-family: var(--kz-font-body, 'Tajawal', sans-serif);
	font-size: 13px;
}

.kz-checkout-wa-divider::before,
.kz-checkout-wa-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #e2e8f0;
}

.kz-checkout-wa-divider span {
	padding: 0 10px;
	background: #ffffff;
}

.kz-checkout-wa-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 100% !important;
	min-height: 50px !important;
	background-color: #25D366 !important;
	color: #ffffff !important;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	border-radius: 12px !important;
	text-decoration: none !important;
	box-shadow: 0 3px 12px rgba(37, 211, 102, 0.25) !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
}

.kz-checkout-wa-btn:hover,
.kz-checkout-wa-btn:focus {
	background-color: #1ebe5d !important;
	color: #ffffff !important;
	box-shadow: 0 5px 16px rgba(37, 211, 102, 0.35) !important;
	transform: translateY(-1px) !important;
}

.kz-checkout-wa-btn svg {
	fill: #ffffff;
	flex-shrink: 0;
}

/* ---------- 5. Checkout Trust Badges Card ---------- */
.kz-checkout-trust-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kz-ctc-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.kz-ctc-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(186, 78, 30, 0.08);
	color: #BA4E1E;
	flex-shrink: 0;
	margin-top: 2px;
}

.kz-ctc-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kz-ctc-text strong {
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
	font-size: 13.5px;
	font-weight: 700;
	color: #142747;
}

.kz-ctc-text span {
	font-family: var(--kz-font-body, 'Tajawal', sans-serif);
	font-size: 12px;
	color: #64748b;
	line-height: 1.35;
}

/* ==========================================================================
   GSAP Flip Plugin — Quick View Modal, Book Cover Wrap & Grid Toolbar
   ========================================================================== */

/* 1. Homepage Flip Toolbar */
.kz-home-flip-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: -5px 0 25px 0;
	padding: 10px 16px;
	background: rgba(20, 39, 71, 0.04);
	border: 1px solid rgba(20, 39, 71, 0.1);
	border-radius: 14px;
	font-family: var(--kz-font-body, 'Tajawal', sans-serif);
	direction: rtl;
}

.kz-flip-toolbar-label {
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
	font-weight: 700;
	color: var(--kz-navy, #142747);
	font-size: 0.88rem;
	margin-left: 4px;
}

.kz-flip-pill-group {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.kz-flip-pill {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	color: #475569;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 0.82rem;
	font-weight: 700;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
	cursor: pointer;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	line-height: 1.4;
}

.kz-flip-pill:hover {
	border-color: var(--kz-accent, #BA4E1E);
	color: var(--kz-accent, #BA4E1E);
}

.kz-flip-pill.active {
	background: var(--kz-accent, #BA4E1E);
	border-color: var(--kz-accent, #BA4E1E);
	color: #ffffff;
	box-shadow: 0 4px 12px rgba(186, 78, 30, 0.25);
}

/* 2. List Mode Layout Morphing */
ul.products.kz-flip-list-mode {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

ul.products.kz-flip-list-mode li.product {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 16px !important;
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
	margin: 0 !important;
}

ul.products.kz-flip-list-mode li.product .kz-card-cover-wrap,
ul.products.kz-flip-list-mode li.product a.woocommerce-LoopProduct-link > img {
	width: 80px !important;
	min-width: 80px !important;
	height: 120px !important;
	object-fit: cover !important;
	margin: 0 0 0 20px !important;
	flex-shrink: 0 !important;
	border-radius: 6px !important;
}

ul.products.kz-flip-list-mode li.product a.woocommerce-LoopProduct-link {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex: 1 !important;
	gap: 16px !important;
	text-decoration: none !important;
}

ul.products.kz-flip-list-mode li.product .woocommerce-loop-product__title {
	font-size: 1.1rem !important;
	margin: 0 !important;
	color: var(--kz-navy, #142747) !important;
}

ul.products.kz-flip-list-mode li.product .price {
	margin: 0 !important;
	font-size: 1.1rem !important;
	color: var(--kz-accent, #BA4E1E) !important;
}

ul.products.kz-flip-list-mode li.product .button {
	margin: 0 !important;
	white-space: nowrap !important;
}

/* 3. Cover Wrapper & Quick View Pill */
.kz-card-cover-wrap {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--kz-radius-sm, 6px);
}

.kz-card-cover-wrap img {
	display: block;
	width: 100%;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

li.product:hover .kz-card-cover-wrap img {
	transform: scale(1.03);
}

.kz-card-quickview-btn {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	background: rgba(20, 39, 71, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #ffffff;
	border: 1px solid rgba(217, 164, 65, 0.6);
	padding: 7px 18px;
	border-radius: 24px;
	font-size: 0.82rem;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
	font-weight: 700;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	white-space: nowrap;
}

li.product:hover .kz-card-quickview-btn {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	background: var(--kz-accent, #BA4E1E);
	border-color: var(--kz-accent, #BA4E1E);
	box-shadow: 0 10px 24px rgba(186, 78, 30, 0.45);
}

.kz-card-quickview-btn:hover {
	background: #9a3f16;
	border-color: #9a3f16;
	transform: translateX(-50%) translateY(-2px) scale(1.05);
}

@media (max-width: 768px) {
	.kz-card-quickview-btn {
		opacity: 0.95;
		pointer-events: auto;
		bottom: 8px;
		padding: 5px 12px;
		font-size: 0.74rem;
		transform: translateX(-50%) translateY(0);
	}
}

/* 4. Quick-View Modal Overlay & Layout */
.kz-home-flip-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(12, 26, 48, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	direction: rtl;
}

.kz-home-flip-modal-overlay.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.kz-home-flip-modal {
	position: relative;
	background: #ffffff;
	border-radius: 20px;
	max-width: 760px;
	width: 90%;
	max-height: 90vh;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.kz-home-modal-close {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 38px;
	height: 38px;
	background: rgba(20, 39, 71, 0.06);
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	color: var(--kz-navy, #142747);
	cursor: pointer;
	z-index: 20;
	transition: all 0.2s ease;
}

.kz-home-modal-close:hover {
	background: var(--kz-accent, #BA4E1E);
	color: #ffffff;
	transform: rotate(90deg);
}

.kz-home-modal-inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 28px;
	padding: 36px 32px;
	align-items: center;
}

.kz-home-modal-cover-wrap {
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
	position: relative;
	background: #f1f5f9;
}

.kz-home-modal-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kz-home-modal-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: right;
}

.kz-home-modal-badge {
	align-self: flex-start;
	background: rgba(186, 78, 30, 0.08);
	color: var(--kz-accent, #BA4E1E);
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 0.78rem;
	font-weight: 700;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
}

.kz-home-modal-title {
	font-size: 1.55rem;
	font-weight: 800;
	color: var(--kz-navy, #142747);
	margin: 0;
	line-height: 1.35;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
}

.kz-home-modal-author {
	font-size: 0.95rem;
	font-weight: 700;
	color: #64748b;
	margin: -4px 0 0 0;
	font-family: var(--kz-font-body, 'Tajawal', sans-serif);
}

.kz-home-modal-price {
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--kz-accent, #BA4E1E);
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
}

.kz-home-modal-desc {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #475569;
	margin: 0;
	font-family: var(--kz-font-body, 'Tajawal', sans-serif);
}

.kz-home-modal-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	flex-wrap: wrap;
}

.kz-home-modal-add-to-cart {
	background: var(--kz-accent, #BA4E1E);
	color: #ffffff;
	border: none;
	padding: 12px 24px;
	border-radius: 10px;
	font-weight: 700;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
	font-size: 0.95rem;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 4px 14px rgba(186, 78, 30, 0.3);
}

.kz-home-modal-add-to-cart:hover {
	background: #9a3f16;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(186, 78, 30, 0.4);
}

.kz-home-modal-link {
	color: var(--kz-navy, #142747);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 11px 18px;
	border-radius: 10px;
	border: 1px solid #cbd5e1;
	transition: all 0.2s ease;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
}

.kz-home-modal-link:hover {
	background: rgba(20, 39, 71, 0.05);
	border-color: var(--kz-navy, #142747);
}

@media (max-width: 640px) {
	.kz-home-modal-inner {
		grid-template-columns: 1fr;
		padding: 24px 20px;
		gap: 16px;
	}
	.kz-home-modal-cover-wrap {
		width: 140px;
		margin: 0 auto;
		order: -1;
	}
	.kz-home-modal-title {
		font-size: 1.25rem;
		text-align: center;
	}
	.kz-home-modal-author {
		text-align: center;
	}
	.kz-home-modal-price {
		text-align: center;
	}
	.kz-home-modal-actions {
		justify-content: center;
	}
}

/* ==========================================================================
   GSAP Draggable Bookshelf Carousel
   ========================================================================== */
.kz-draggable-shelf-section {
	margin: 40px 0 50px 0;
	padding: 30px 24px 25px 24px;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
	border: 1px solid #e2e8f0;
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(20, 39, 71, 0.05);
	direction: rtl;
	font-family: var(--kz-font-body, 'Tajawal', sans-serif);
	overflow: hidden;
	position: relative;
}

.kz-shelf-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 25px;
}

.kz-shelf-badge {
	display: inline-block;
	background: rgba(186, 78, 30, 0.08);
	color: var(--kz-accent, #BA4E1E);
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.78rem;
	font-weight: 700;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
	margin-bottom: 6px;
}

.kz-shelf-title {
	font-size: 1.65rem;
	font-weight: 800;
	color: var(--kz-navy, #142747);
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
	margin: 0;
}

.kz-shelf-subtitle {
	font-size: 0.92rem;
	color: #64748b;
	margin: 0;
}

.kz-shelf-nav-controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kz-shelf-nav-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #cbd5e1;
	color: var(--kz-navy, #142747);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.kz-shelf-nav-btn:hover {
	background: var(--kz-navy, #142747);
	color: #ffffff;
	border-color: var(--kz-navy, #142747);
	transform: scale(1.05);
}

/* Viewport & Track */
.kz-shelf-viewport {
	position: relative;
	width: 100%;
	padding: 30px 10px 0 10px;
	overflow: hidden;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	perspective: 1200px;
}

.kz-shelf-viewport:active {
	cursor: grabbing;
}

.kz-shelf-track {
	display: flex;
	gap: 32px;
	padding-bottom: 10px;
	will-change: transform;
	transform-style: preserve-3d;
	position: relative;
	z-index: 2;
}

/* Shelf Items & Book 3D Cards */
.kz-shelf-item {
	flex: 0 0 200px;
	width: 200px;
	position: relative;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
	transform-origin: center bottom;
}

.kz-shelf-book-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.kz-shelf-cover-wrap {
	width: 175px;
	height: 262px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 16px 28px rgba(20, 39, 71, 0.22);
	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
	background: #e2e8f0;
	z-index: 3;
}

.kz-shelf-item:hover .kz-shelf-cover-wrap {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 24px 36px rgba(186, 78, 30, 0.3);
}

.kz-shelf-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.kz-shelf-book-spine-effect {
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 100%;
	background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0.05) 100%);
	pointer-events: none;
}

.kz-shelf-cover-sheen {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 60%);
	pointer-events: none;
}

.kz-shelf-quickview-btn {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	background: rgba(20, 39, 71, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #ffffff;
	border: 1px solid rgba(217, 164, 65, 0.6);
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 0.78rem;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
	font-weight: 700;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: all 0.25s ease;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	z-index: 5;
}

.kz-shelf-item:hover .kz-shelf-quickview-btn {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	background: var(--kz-accent, #BA4E1E);
	border-color: var(--kz-accent, #BA4E1E);
}

.kz-shelf-book-shadow {
	width: 155px;
	height: 12px;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 70%);
	border-radius: 50%;
	margin-top: -6px;
	margin-bottom: 24px;
	pointer-events: none;
	z-index: 1;
}

.kz-shelf-book-details {
	width: 100%;
	padding-top: 4px;
	z-index: 3;
}

.kz-shelf-book-title {
	font-size: 0.95rem;
	font-weight: 700;
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
	color: var(--kz-navy, #142747);
	margin: 0 0 4px 0;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 2.7em;
}

.kz-shelf-book-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.kz-shelf-book-title a:hover {
	color: var(--kz-accent, #BA4E1E);
}

.kz-shelf-book-author {
	font-size: 0.8rem;
	color: #64748b;
	margin-bottom: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kz-shelf-book-price {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--kz-accent, #BA4E1E);
	font-family: var(--kz-font-heading, 'Cairo', sans-serif);
}

/* 3D Wooden Plank sitting directly under covers */
.kz-shelf-wood-plank {
	position: absolute;
	top: 290px;
	left: 0;
	width: 100%;
	height: 20px;
	z-index: 1;
}

.kz-shelf-wood-surface {
	width: 100%;
	height: 10px;
	background: linear-gradient(90deg, #d97706 0%, #b45309 30%, #92400e 70%, #d97706 100%);
	box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.3);
}

.kz-shelf-wood-bevel {
	width: 100%;
	height: 3px;
	background: #78350f;
}

.kz-shelf-wood-front {
	width: 100%;
	height: 7px;
	background: linear-gradient(180deg, #451a03 0%, #290e02 100%);
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

/* Footer: Hint & Dots */
.kz-shelf-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
	flex-wrap: wrap;
	gap: 12px;
}

.kz-shelf-hint {
	font-size: 0.85rem;
	color: #64748b;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.kz-shelf-hand-icon {
	font-size: 1.1rem;
	animation: kzWiggle 2s infinite ease-in-out;
}

@keyframes kzWiggle {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(8px); }
}

.kz-shelf-dots {
	display: flex;
	align-items: center;
	gap: 6px;
}

.kz-shelf-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cbd5e1;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all 0.2s ease;
}

/* The global button padding left the 42px nav buttons no room, so their
   18px arrow icons shrank to zero width and the buttons showed as empty circles. */
.kz-shelf-nav-btn {
	padding: 0;
}

.kz-shelf-nav-btn svg {
	flex-shrink: 0;
}

/* The dots are 8px tall; this widens the tappable area to 24px without
   changing how they look (WCAG 2.5.8 minimum target size). */
.kz-shelf-dot {
	position: relative;
}

.kz-shelf-dot::after {
	content: "";
	position: absolute;
	inset: -8px -3px;
}

.kz-shelf-dot.active {
	width: 24px;
	border-radius: 10px;
	background: var(--kz-accent, #BA4E1E);
}

@media (max-width: 640px) {
	.kz-draggable-shelf-section {
		padding: 20px 14px 15px 14px;
	}
	.kz-shelf-title {
		font-size: 1.35rem;
	}
	.kz-shelf-item {
		flex: 0 0 160px;
		width: 160px;
	}
	.kz-shelf-cover-wrap {
		width: 135px;
		height: 202px;
	}
	.kz-shelf-wood-plank {
		top: 232px;
	}
	.kz-shelf-quickview-btn {
		opacity: 0.95;
		pointer-events: auto;
		padding: 4px 10px;
		font-size: 0.7rem;
	}
}

/* ==========================================================================
   GSAP Micro-Interactions: 3D Mouse Tilt & Dynamic Glare
   ========================================================================== */

.kz-card-cover-wrap,
.kz-shelf-cover-wrap {
	transform-style: preserve-3d;
	perspective: 1000px;
	will-change: transform;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
}

.kz-card-cover-wrap img,
.kz-shelf-cover-wrap img {
	transform-style: preserve-3d;
	backface-visibility: hidden;
}

.kz-cover-glare {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.48) 0%, rgba(255, 255, 255, 0) 65%);
	opacity: 0;
	mix-blend-mode: overlay;
	transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 4;
}

.site-branding .kz-logo svg {
	overflow: visible;
}