/*
Theme Name: FORTE
Theme URI:
Author: FORTE
Author URI:
Description: Premium bilingual (Arabic/English) WooCommerce block theme for FORTE — Zone of Power / منطقة القوة. Built on WordPress Full Site Editing; all design tokens live in theme.json and are editable via Appearance → Editor → Styles.
Version: 1.0.8
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: forte
Domain Path: /languages
*/

/*
 * Design tokens (colors, fonts, spacing, gradients, shadows) live in
 * theme.json. This file only adds texture/motion/depth that the block
 * editor cannot express as attributes — logical (RTL/LTR-safe) properties
 * only, per FORTE_BRIEF.md section 11.
 *
 * v4 — flat, bold-typographic e-commerce look: crisp cards (no blur/glow),
 * heavy display headlines, rounded banner cards, solid ink CTAs. Light/dark
 * mode switch carried over from v3.
 */

/* ---------- Theme tokens: light / dark mode ----------
 * theme.json's --wp--preset--color--* variables are emitted on :root by
 * WordPress core with the dark-mode values baked in — those are this
 * site's default look. One extra RGB-triplet variable exists only here
 * (not a real WP color) so translucent hairline borders/overlays can flip
 * alongside the palette: a white-tint border reads as "lighten against a
 * dark surface" in dark mode but needs to become black-tint "darken
 * against a light surface" in light mode.
 *
 * Light is the default for every visitor regardless of OS preference;
 * an explicit [data-theme="dark"] attribute (set by the header toggle,
 * see theme-toggle.js) is the only thing that switches to dark — the
 * attribute selector on :root is more specific than a bare :root, so it
 * always wins regardless of source order. */
:root {
	--forte-overlay-rgb: 255,255,255;
	--forte-accent-rgb: 0,102,255;
	--forte-onsale-badge: var(--wp--preset--color--white);
}
:root:not([data-theme="dark"]) {
	--wp--preset--color--primary: #0066FF;
	--wp--preset--color--primary-glow: #3D8BFF;
	--wp--preset--color--secondary: #6B7280;
	--wp--preset--color--background: #F3F4F6;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--surface-raised: #FFFFFF;
	--wp--preset--color--border-glow: #E2E4E8;
	--wp--preset--color--light-silver: #5B5F68;
	--wp--preset--color--white: #14161C;
	--forte-overlay-rgb: 0,0,0;
	--forte-onsale-badge: #0066FF;
}
:root[data-theme="light"] {
	--wp--preset--color--primary: #0066FF;
	--wp--preset--color--primary-glow: #3D8BFF;
	--wp--preset--color--secondary: #6B7280;
	--wp--preset--color--background: #F3F4F6;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--surface-raised: #FFFFFF;
	--wp--preset--color--border-glow: #E2E4E8;
	--wp--preset--color--light-silver: #5B5F68;
	--wp--preset--color--white: #14161C;
	--forte-overlay-rgb: 0,0,0;
	--forte-onsale-badge: #0066FF;
}

body {
	position: relative;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* ---------- Ambient background: soft blurred blue mesh + slow-drifting
   glow orbs, fixed behind the whole site. Brand color reintroduced here
   deliberately — everything else (cards, header, buttons) stays flat/
   neutral, so the glow reads as one deliberate accent layer instead of
   color everywhere at once. ---------- */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background-color: var(--wp--preset--color--background);
	background-image:
		radial-gradient( 45% 35% at 15% 10%,  rgba(var(--forte-accent-rgb),0.20) 0%, transparent 100% ),
		radial-gradient( 40% 40% at 85% 15%,  rgba(var(--forte-accent-rgb),0.14) 0%, transparent 100% ),
		radial-gradient( 50% 45% at 80% 85%,  rgba(var(--forte-accent-rgb),0.12) 0%, transparent 100% ),
		radial-gradient( 40% 35% at 10% 85%,  rgba(var(--forte-overlay-rgb),0.05) 0%, transparent 100% );
	filter: blur(50px);
	transition: background-color 0.3s ease;
}
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient( circle, rgba(var(--forte-overlay-rgb),0.5) 0.5px, transparent 0.5px );
	background-size: 3px 3px;
	opacity: 0.04;
	pointer-events: none;
}
.forte-bg-orbs {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.forte-bg-orbs .forte-orb {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient( circle, rgba(var(--forte-accent-rgb),0.30) 0%, rgba(var(--forte-accent-rgb),0) 70% );
	filter: blur(35px);
	animation: forte-orb-float 16s ease-in-out infinite;
}
.forte-bg-orbs .forte-orb-1 { width: 420px; height: 420px; inset-inline-start: -6%; inset-block-start: 6%;  animation-delay: 0s; }
.forte-bg-orbs .forte-orb-2 { width: 300px; height: 300px; inset-inline-end: -4%;   inset-block-start: 38%; animation-delay: 4s; }
.forte-bg-orbs .forte-orb-3 { width: 340px; height: 340px; inset-inline-start: 8%;  inset-block-start: 78%; animation-delay: 8s; }
@keyframes forte-orb-float {
	0%, 100% { transform: translate(0,0) scale(1); opacity: 0.55; }
	50% { transform: translate(26px,-32px) scale(1.1); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
	.forte-bg-orbs .forte-orb {
		animation: none !important;
	}
}

/* ---------- Footer always pinned to the bottom of the viewport, even on
   short pages (policies, FAQ, etc.) — never floats up mid-screen. ---------- */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.wp-site-blocks > main {
	flex: 1 0 auto;
}
.wp-site-blocks > .wp-block-template-part:has(> footer),
.wp-site-blocks > footer {
	flex-shrink: 0;
}
footer.wp-block-group {
	position: relative;
	background: var(--wp--preset--color--surface-raised);
	border-top: 1px solid var(--wp--preset--color--border-glow);
	padding-inline: 2rem !important;
	width: 100%;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Footer: WhatsApp contact pill — oval shape, flat sunken fill, on-brand icon badge */
.forte-whatsapp-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1rem;
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--wp--preset--color--border-glow);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--light-silver);
	text-decoration: none;
	font-size: 0.85rem;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.forte-whatsapp-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	line-height: 1.3;
}
.forte-whatsapp-text strong {
	color: var(--wp--preset--color--white);
	font-size: 0.95rem;
	font-weight: 700;
	direction: ltr;
	unicode-bidi: isolate;
}
.forte-whatsapp-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-glow);
	color: var(--wp--preset--color--white);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.forte-whatsapp-icon svg { fill: currentColor; }
.forte-whatsapp-pill:hover .forte-whatsapp-icon {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}
.forte-whatsapp-pill:hover {
	border-color: var(--wp--preset--color--primary);
}

/* Footer: small circular social icons — one unified ink language instead
   of each platform's own brand color, so the row reads as part of the site. */
.forte-social-row {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 0.9rem;
}
.forte-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	text-decoration: none;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-glow);
	color: var(--wp--preset--color--white);
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.forte-social-icon svg { fill: currentColor; }
.forte-social-icon:hover {
	transform: translateY(-2px);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* Footer "Important Links" — plain text, no bullets, no underline */
footer.wp-block-group ul {
	list-style: none;
	padding-inline-start: 0;
	margin: 0;
}
footer.wp-block-group ul li a {
	text-decoration: none;
}
footer.wp-block-group ul li a:hover {
	text-decoration: underline;
}

/* Footer: payment method badges */
.forte-payment-badges {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.forte-payment-badges span {
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border-glow);
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--light-silver);
}

/* ---------- Header ---------- */

/* Thin top utility row — small print (policy links etc.), same idea as
   a store's top info bar: quiet by default, not part of the main nav. */
.forte-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2.5rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	font-size: 0.95rem;
	font-weight: 600;
}
/* Same 1400px "wide" container and 2rem side padding as the header's
   inner row, so the links group lands directly above the logo and the
   email lands directly above the icon cluster, at any viewport width —
   not just coincidentally at one screen size. */
.forte-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2.5rem;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-block: 0.5rem;
	padding-inline: 2rem;
	box-sizing: border-box;
}
/* Below ~900px the links group and the email can no longer share a row,
   so they wrap onto two — but space-between still treats them as two
   ends of the SAME row's leftover space, stretching a huge gap between
   the wrapped lines. Once wrapping is the norm (not the occasional
   overflow), switch to a tight, centered stack instead. */
@media (max-width: 900px) {
	.forte-topbar-inner {
		justify-content: center;
		gap: 0.5rem 1.5rem;
		padding-block: 0.6rem;
		text-align: center;
	}
	.forte-topbar-links {
		justify-content: center;
	}
}
.forte-topbar a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}
.forte-topbar a:hover {
	opacity: 1;
	text-decoration: underline;
}
.forte-topbar-links {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}
/* The email is the only direct-child link of .forte-topbar-inner (the
   three policy links are nested inside .forte-topbar-links instead) —
   given extra weight/size since it's the one piece of contact info in
   the bar, not just a navigation link. */
.forte-topbar-inner > a {
	font-size: 1.05rem;
	font-weight: 800;
	opacity: 1;
	letter-spacing: 0.01em;
}

.wp-block-template-part:has(> header.wp-block-group) {
	position: sticky;
	inset-inline-start: 0;
	inset-block-start: 0;
	z-index: 100;
}

header.wp-block-group.has-background-background-color {
	padding-inline: 2rem !important;
	position: relative;
	background: var(--wp--preset--color--surface-raised);
	border-bottom: 1px solid var(--wp--preset--color--border-glow);
	width: 100%;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Logo pinned to the right edge, icon cluster pinned to the left edge —
   both landing on the exact same 1400px "wide" bounds as the hero banner
   below, so their outer edges line up with the banner's edges. Nav falls
   wherever the remaining space puts it (roughly center, since logo and
   icon-cluster are close in width). */
header.wp-block-group.has-background-background-color > .wp-block-group {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	gap: 1.5rem;
}
header.wp-block-group.has-background-background-color > .wp-block-group > .wp-block-group:has(> .forte-search-wrap) {
	gap: 0.5rem;
}

header .wp-block-navigation .wp-block-navigation__container {
	justify-content: center;
	flex-wrap: wrap;
}

/* Nav links: quiet underline on hover, not a filled pill — matches the
   flatter, text-forward header language. */
header .wp-block-navigation-item__content {
	padding: 0.5em 0.2em !important;
	position: relative;
	transition: color 0.2s ease;
}
header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline-start: 0.2em;
	inset-inline-end: 0.2em;
	inset-block-end: 0.3em;
	height: 2px;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 8px rgba(var(--forte-accent-rgb),0.7);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}
header .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
}

/* Account + cart + theme toggle: flat icon buttons, hairline border,
   same rounded-square language as the search field. Rounded-square (not
   a tight circle) with room to breathe, so the cart's quantity badge
   sits naturally at its corner instead of being clipped or fighting the
   button's own centering. */
/* The flex row default-stretches its children to the tallest one (the
   search field) unless told otherwise — that's what made the icon boxes
   uneven heights. Force them to align on their own natural size instead. */
header .wp-block-group:has(> .forte-search-wrap) {
	align-items: center !important;
}

/* Search: collapsed to an icon-only toggle button (same 42px rounded-
   square language as account/cart/theme-toggle) that opens a small
   floating panel with the real search field, instead of a permanently
   expanded input taking up header width. */
.forte-search-wrap {
	position: relative;
}
.forte-search-panel {
	position: absolute;
	inset-block-start: calc(100% + 10px);
	inset-inline-end: 0;
	width: 280px;
	padding: 0.6rem;
	border-radius: 14px;
	border: 1px solid var(--wp--preset--color--border-glow);
	background: var(--wp--preset--color--surface-raised);
	box-shadow: 0 10px 30px rgba(0,0,0,0.15);
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.3s ease, border-color 0.3s ease;
	z-index: 50;
}
.forte-search-wrap.is-open .forte-search-panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.forte-search-panel {
		transition: none !important;
	}
}
header .wp-block-woocommerce-customer-account,
header .wc-block-mini-cart {
	display: flex;
	align-items: center;
}
header .wc-block-mini-cart__icon {
	width: 20px !important;
	height: 20px !important;
}

header .wp-block-woocommerce-customer-account .wc-block-customer-account__link,
header .wc-block-mini-cart__button,
.forte-theme-toggle,
.forte-search-toggle {
	box-sizing: border-box !important;
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	padding: 0 !important;
	border-radius: 10px !important;
	border: 1px solid var(--wp--preset--color--border-glow);
	background: transparent;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	line-height: 1;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
header .wp-block-woocommerce-customer-account .wc-block-customer-account__link svg,
header .wc-block-mini-cart__icon,
.forte-theme-toggle svg,
.forte-search-toggle svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
header .wp-block-woocommerce-customer-account .wc-block-customer-account__link:hover,
header .wc-block-mini-cart__button:hover,
.forte-theme-toggle:hover,
.forte-search-toggle:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	transform: translateY(-2px);
}
.forte-theme-toggle:active,
.forte-search-toggle:active {
	transform: translateY(0) scale(0.93);
}
/* Theme icon: one SVG that morphs between moon and sun instead of
   swapping two separate icons. The crescent is a circle with a second
   "cutout" circle punched out of it via an SVG mask; sliding that cutout
   off to the side reveals the full circle underneath, and the rays
   scale/fade in around it — moon and sun are the same shape mid-eclipse,
   so animating the eclipse itself is what makes it read as one shape
   transforming rather than a cross-fade between two unrelated icons.
   Gated by [data-theme] the same way as the color tokens: light by
   default, explicit "dark" attribute (set by theme-toggle.js) wins. */
.forte-theme-toggle .forte-icon-cutout {
	cx: 18px;
	transition: cx 0.45s cubic-bezier(0.65,0,0.35,1);
}
.forte-theme-toggle .forte-icon-rays {
	opacity: 0;
	transform: scale(0.4) rotate(-30deg);
	transform-origin: 12px 12px;
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.65,0,0.35,1);
}
.forte-theme-toggle .forte-theme-icon {
	transition: transform 0.45s cubic-bezier(0.65,0,0.35,1);
}
html:not([data-theme="dark"]) .forte-theme-toggle .forte-icon-cutout { cx: 30px; }
html:not([data-theme="dark"]) .forte-theme-toggle .forte-icon-rays { opacity: 1; transform: scale(1) rotate(0deg); }
html:not([data-theme="dark"]) .forte-theme-toggle .forte-theme-icon { transform: rotate(40deg); }
html[data-theme="light"] .forte-theme-toggle .forte-icon-cutout { cx: 30px; }
html[data-theme="light"] .forte-theme-toggle .forte-icon-rays { opacity: 1; transform: scale(1) rotate(0deg); }
html[data-theme="light"] .forte-theme-toggle .forte-theme-icon { transform: rotate(40deg); }
@media (prefers-reduced-motion: reduce) {
	.forte-theme-toggle .forte-icon-cutout,
	.forte-theme-toggle .forte-icon-rays,
	.forte-theme-toggle .forte-theme-icon {
		transition: none !important;
	}
}

/* .wc-block-mini-cart__quantity-badge is the WRAPPER around the icon + the
   real counter (.wc-block-mini-cart__badge) — it must stay a plain,
   normally-sized wrapper, not a small circle, or it squashes the cart icon. */
header .wc-block-mini-cart__quantity-badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
header .wc-block-mini-cart__badge {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	font-size: 0.65rem;
	line-height: 16px;
	text-align: center;
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--background) !important;
	border-radius: 999px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--surface-raised);
}

/* ---------- Header: mobile ----------
 * Below ~640px the topbar row, the logo and the icon cluster all keep
 * their full desktop size (font-size, 150px logo, 42px icon buttons,
 * 1.5rem block padding) and together push the real page content off the
 * first screen. Nothing here changes structure — same elements, just
 * scaled down and given tighter padding so the whole header reads as one
 * slim strip on a phone instead of taking up half the viewport. */
@media (max-width: 640px) {
	.forte-topbar {
		font-size: 0.7rem;
	}
	.forte-topbar-inner {
		gap: 0.3rem 0.9rem;
		padding-block: 0.4rem;
		padding-inline: 1rem;
	}
	.forte-topbar-links {
		gap: 0.6rem;
	}
	.forte-topbar-inner > a {
		font-size: 0.75rem;
	}

	header.wp-block-group.has-background-background-color {
		padding-block: 0.6rem !important;
		padding-inline: 1rem !important;
	}
	header.wp-block-group.has-background-background-color > .wp-block-group {
		gap: 0.6rem;
	}

	.wp-block-site-logo img {
		width: 96px !important;
		height: auto !important;
	}

	header .wp-block-woocommerce-customer-account .wc-block-customer-account__link,
	header .wc-block-mini-cart__button,
	.forte-theme-toggle,
	.forte-search-toggle {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		min-height: 34px !important;
		border-radius: 8px !important;
	}
	header .wp-block-woocommerce-customer-account .wc-block-customer-account__link svg,
	header .wc-block-mini-cart__icon,
	.forte-theme-toggle svg,
	.forte-search-toggle svg {
		width: 16px;
		height: 16px;
	}
	header .wc-block-mini-cart__icon {
		width: 16px !important;
		height: 16px !important;
	}

	.forte-search-panel {
		width: min(280px, calc(100vw - 2rem));
	}
}
@media (max-width: 400px) {
	.forte-topbar-links {
		gap: 0.4rem 0.7rem;
	}
	.forte-topbar,
	.forte-topbar-inner > a {
		font-size: 0.65rem;
	}
	.wp-block-site-logo img {
		width: 80px !important;
	}
}

/* Benefits strip icons: follow the ink token so they track the light/dark
   toggle instead of staying a fixed brand color. */
.forte-benefit-icon {
	color: var(--wp--preset--color--primary);
}

/* ---------- Headings: bold display type, matching the poster-style
   section titles — heavy weight, tight tracking, plus a short accent
   underline stroke under standalone section titles. ---------- */
h1, .wp-block-heading h1 {
	text-wrap: balance;
}
.forte-underline {
	display: block;
	width: 4.5rem;
	height: 4px;
	margin-block-start: 0.75rem;
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
	box-shadow: 0 0 12px rgba(var(--forte-accent-rgb),0.6);
}
.forte-section-heading {
	text-align: center;
}
.forte-section-heading .forte-underline {
	margin-inline: auto;
}

/* ---------- Search field: flat pill, hairline border ---------- */
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border-glow);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
	transition: border-color 0.25s ease;
}
.wp-block-search__button-inside .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary);
}
/* In the header specifically, match the exact 42px height of the icon buttons beside it. */
header .wp-block-search__inside-wrapper {
	box-sizing: border-box;
	height: 42px;
	display: flex !important;
	align-items: center !important;
}
header .wp-block-search__input {
	height: 100%;
	align-self: stretch;
}
header .wp-block-search__button {
	height: 34px !important;
	width: 34px !important;
	flex-shrink: 0;
	align-self: center !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.wp-block-search__input {
	background: transparent !important;
	border: none !important;
	color: var(--wp--preset--color--white);
	padding-inline-start: 1.1em !important;
}
.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--light-silver);
	opacity: 0.8;
}
.wp-block-search__input:focus {
	outline: none;
	box-shadow: none !important;
}
.wp-block-search__button {
	background: transparent !important;
	border: none !important;
	color: var(--wp--preset--color--light-silver) !important;
	border-radius: 999px !important;
	margin: 3px !important;
	transition: color 0.2s ease, background-color 0.2s ease;
}
.wp-block-search__button:hover {
	color: var(--wp--preset--color--background) !important;
	background: var(--wp--preset--color--primary) !important;
}
.wp-block-search__button svg {
	fill: currentColor;
}

/* ---------- Buttons: solid ink pill, flat — no gradient/glow. Gentle
   lift on hover, tactile press on click keep the "dynamic" feel without
   relying on color. Applies sitewide (block-editor buttons AND
   WooCommerce's own add-to-cart / checkout / apply-coupon buttons, which
   render through the shared .wp-element-button class from theme.json's
   global button style). ---------- */
.wp-block-button__link,
.wp-element-button {
	position: relative;
	border-radius: 999px !important;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
	transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	text-transform: none;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--wp--preset--color--primary-glow);
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}
.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(0) scale(0.96);
	box-shadow: 0 4px 10px rgba(0,0,0,0.16);
	transition-duration: 0.1s;
}
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--border-glow);
	background: transparent;
	color: var(--wp--preset--color--white);
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}

/* ---------- Hero / promo banner: large rounded card, image one side,
   bold headline + underline + pill CTA the other — reused for the
   homepage hero and any promo/category banner section. ---------- */
.forte-banner {
	position: relative;
	border-radius: 32px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-glow);
	overflow: hidden;
}
.forte-banner-media {
	display: flex;
	align-items: center;
	justify-content: center;
}
.forte-banner-media img {
	max-width: 100%;
	height: auto;
}
.forte-hero-emblem-float {
	animation: forte-emblem-float 5s ease-in-out infinite;
}
@keyframes forte-emblem-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
	.forte-hero-emblem-float {
		animation: none !important;
	}
}

/* Small flat pill badge (e.g. "منتجات FORTE أصلية") */
.forte-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 1.1em;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border-glow);
	background: var(--wp--preset--color--surface);
	font-size: 0.8rem;
	font-weight: 700;
}
.forte-pill::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	animation: forte-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes forte-dot-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
	.forte-pill::before {
		animation: none !important;
	}
}

/* ---------- Section rhythm ---------- */
.forte-section-divider {
	position: relative;
}

/* ---------- Cards: flat, sharp, minimal border, small lift on hover — no
   blur, no glow, product-photography-forward. ---------- */
.forte-card {
	position: relative;
	border-radius: 14px !important;
	border: 1px solid var(--wp--preset--color--border-glow) !important;
	background: var(--wp--preset--color--surface) !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
	transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.25s ease, border-color 0.25s ease;
	overflow: hidden;
}
.forte-card:hover {
	transform: translateY(-4px);
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* WooCommerce native product cards get the same flat treatment, plus a
   more premium/dynamic presentation: bigger radius, a soft ink-tinted
   glow on hover instead of a plain black shadow, and the image clipped
   to the card's own rounded corners so its hover zoom reads as looking
   through a frame rather than the photo spilling past the edges.
   !important throughout: WooCommerce's own block CSS sets an explicit
   light card background here (unlike the header/footer, which are plain
   divs with nothing else competing), so a normal-specificity rule loses
   to it silently. */
.wc-block-grid__product,
.wp-block-woocommerce-product-template > li,
.products .product {
	position: relative !important;
	padding: var(--wp--preset--spacing--20) !important;
	border: 1px solid var(--wp--preset--color--border-glow) !important;
	border-radius: 20px !important;
	background: var(--wp--preset--color--surface) !important;
	box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.wc-block-grid__product *,
.wp-block-woocommerce-product-template > li *,
.products .product * {
	color: var(--wp--preset--color--white) !important;
}
.wc-block-grid__product .wc-block-grid__product-price,
.wc-block-grid__product .price,
.products .product .price {
	color: var(--wp--preset--color--light-silver) !important;
}
/* Same "* { color }" direct-match problem as the sale badge: it also
   repaints the card's own "add to cart" button text, silently matching
   the button's own solid-ink background (invisible text either way the
   theme flips) since both the card rule and the button rule read the
   ink token and lose the tie only on selector count. Needs the same
   card-qualified, higher-specificity override. */
.wc-block-grid__product .wp-element-button,
.wp-block-woocommerce-product-template > li .wp-element-button,
.products .product .wp-element-button,
.wc-block-grid__product .wp-element-button *,
.wp-block-woocommerce-product-template > li .wp-element-button *,
.products .product .wp-element-button * {
	color: var(--wp--preset--color--background) !important;
}
.wc-block-grid__product:hover,
.wp-block-woocommerce-product-template > li:hover,
.products .product:hover {
	transform: translateY(-6px);
	border-color: var(--wp--preset--color--primary) !important;
	box-shadow: 0 20px 40px -12px color-mix( in srgb, var(--wp--preset--color--primary) 30%, transparent ) !important;
}
.wc-block-grid__product img,
.wp-block-woocommerce-product-image img,
.products .product img {
	transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
	border-radius: 12px;
}
.wc-block-grid__product:hover img,
.wp-block-woocommerce-product-template > li:hover img,
.products .product:hover img {
	transform: scale(1.08) rotate(-1deg);
}

/* Add-to-cart: lives inside .forte-product-media (image + button grouped
   together, see the product patterns) as a bar pinned to the image's own
   bottom edge, hidden below it by default and sliding up on hover —
   the same "quiet by default, comes alive on interaction" idea as
   before, but anchored to the photo instead of floating under the price
   so it reads as a single card action, not a fourth stacked element. */
.forte-product-media {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}
.forte-product-media img {
	display: block;
}
/* .forte-product-cta lands on the wp:button block's own wrapping <div>
   (className is applied to the outer element WordPress renders for the
   block, not the inner <a>/<button> it wraps) — so positioning goes on
   that div, but the visible pill itself is the inner .wp-element-button,
   which needs its own overrides to actually fill the bar and lose its
   default 999px pill radius; styling only the wrapper left a normal
   rounded button floating, uncentered, inside an invisibly-positioned
   full-width box. */
.forte-product-media .forte-product-cta {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	width: 100%;
	margin: 0 !important;
	z-index: 2;
}
.forte-product-media .forte-product-cta .wp-element-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	width: 100%;
	border-radius: 0 !important;
	margin: 0 !important;
}
.forte-product-media .forte-product-cta .wp-element-button::before {
	content: "";
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10l1.5 3.2H5.5L7 4zm-3 5h16l-1.1 10.2a2 2 0 0 1-2 1.8H7.1a2 2 0 0 1-2-1.8L4 9zm5 2.5a3 3 0 0 0 6 0' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10l1.5 3.2H5.5L7 4zm-3 5h16l-1.1 10.2a2 2 0 0 1-2 1.8H7.1a2 2 0 0 1-2-1.8L4 9zm5 2.5a3 3 0 0 0 6 0' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (hover: hover) {
	.forte-product-media .forte-product-cta {
		transform: translateY(100%);
		transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
	}
	.forte-product-media .forte-product-cta .wp-element-button {
		transition: box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
	}
	.wc-block-grid__product:hover .forte-product-cta,
	.wp-block-woocommerce-product-template > li:hover .forte-product-cta,
	.products .product:hover .forte-product-cta {
		transform: translateY(0);
	}
}

/* Price: the discounted price reads as the headline figure — bold and
   in the accent color — the original struck-through price recedes
   instead of competing with it. The unscoped ".price ins" rule alone
   only ties (same specificity as) the card's own "* { color }" rule
   above — a tie that happens to resolve by source order on the single
   product page (no competing card class there to begin with) but silently
   loses on homepage/grid cards, where that rule actually applies. Same
   fix as the badge/button text bugs earlier: qualify with the card's own
   class for a guaranteed, order-independent win. */
.price ins,
.wc-block-components-product-price ins,
.wc-block-grid__product .price ins,
.wp-block-woocommerce-product-template > li .price ins,
.products .product .price ins {
	font-weight: 800 !important;
	text-decoration: none !important;
	color: var(--wp--preset--color--primary) !important;
}
.price del,
.wc-block-components-product-price del,
.wc-block-grid__product .price del,
.wp-block-woocommerce-product-template > li .price del,
.products .product .price del {
	opacity: 0.55;
	font-weight: 400 !important;
}
.price:not(:has(ins)),
.wc-block-components-product-price:not(:has(ins)) {
	font-weight: 700 !important;
}

/* Sale badge (classic circular ribbon on the single-product gallery,
   distinct from the card grid's badge above): WooCommerce's own default
   is a mustard-yellow circle (#958e09) that doesn't match either theme
   mode. Blue in light mode, white in dark mode. */
.onsale {
	background-color: var(--forte-onsale-badge) !important;
	color: var(--wp--preset--color--background) !important;
}

/* Sale badge: WooCommerce's own default is a white box with dark-gray
   text (#43454b), meant for light-background sites. The card rule above
   (".wp-block-woocommerce-product-template > li *") repaints all card
   text to the ink token — and at equal !important, its 1-class+1-element
   specificity beats a plain ".wc-block-components-product-sale-badge"
   selector, silently repainting the badge text back to the same color as
   its own background. Qualifying with the card's own class (2 classes)
   is what actually wins here, not just adding another color rule.
   Restyle it as a solid ink flag instead of just fixing the contrast.
   Covers both the modern block class and the legacy classic-grid class
   (used on the empty-cart "New in store" cross-sell block). */
.wc-block-grid__product .wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-template > li .wc-block-components-product-sale-badge,
.products .product .wc-block-components-product-sale-badge,
.wc-block-grid__product-onsale,
.wc-block-grid__product .wc-block-grid__product-onsale {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--background) !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 0.3em 0.8em !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	text-transform: none !important;
	box-shadow: none !important;
}
/* The card rule's "* { color }" also matches the badge's own inner
   __text span directly (not just the badge div) — a direct match on the
   element itself, so the parent's color above doesn't cascade in via
   inheritance. Needs its own equally-qualified override. */
.wc-block-grid__product .wc-block-components-product-sale-badge *,
.wp-block-woocommerce-product-template > li .wc-block-components-product-sale-badge *,
.products .product .wc-block-components-product-sale-badge * {
	color: var(--wp--preset--color--background) !important;
}

/* Quantity stepper (single product + cart): WooCommerce's default is a
   plain white input box that clashed with the old glass theme; keep it
   flat and on-token now that the whole site is flat. */
.quantity .qty,
input.qty {
	background: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--border-glow) !important;
	border-radius: 8px !important;
	color: var(--wp--preset--color--white) !important;
	text-align: center;
	height: 48px;
	padding: 0 0.5rem;
}

/* Checkout / cart-totals form fields (WooCommerce's block-based Checkout:
   contact info, shipping address, coupon field, etc.). Same story as the
   quantity stepper and every other WooCommerce-default input this theme
   has hit — a light-site white box with dark-gray text, unstyled here so
   it just sits there clashing with the dark theme. Step sections get the
   same card language as the rest of the site (surface-raised container,
   surface inputs) instead of blending invisibly into the page. */
.wc-block-components-checkout-step {
	background: var(--wp--preset--color--surface-raised) !important;
	border: 1px solid var(--wp--preset--color--border-glow) !important;
	border-radius: 14px !important;
	padding: 1.5rem !important;
	margin-block-end: 1.5rem !important;
}
.wc-block-components-checkout-step__heading .wc-block-components-checkout-step__title {
	color: var(--wp--preset--color--white) !important;
}
.wc-block-components-checkout-step__heading .wc-block-components-checkout-step__heading-content {
	color: var(--wp--preset--color--primary) !important;
}
.wc-block-components-checkout-step__description {
	color: var(--wp--preset--color--light-silver) !important;
}
.wc-block-components-text-input input[type=email],
.wc-block-components-text-input input[type=number],
.wc-block-components-text-input input[type=password],
.wc-block-components-text-input input[type=tel],
.wc-block-components-text-input input[type=text],
.wc-block-components-text-input input[type=url],
.wc-block-components-textarea textarea,
textarea.wc-block-components-textarea,
.wc-block-checkout select,
.wc-block-components-combobox input {
	background-color: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--border-glow) !important;
	border-radius: 8px !important;
	color: var(--wp--preset--color--primary) !important;
}
.wc-block-components-text-input input[type=email]:focus,
.wc-block-components-text-input input[type=number]:focus,
.wc-block-components-text-input input[type=password]:focus,
.wc-block-components-text-input input[type=tel]:focus,
.wc-block-components-text-input input[type=text]:focus,
.wc-block-components-text-input input[type=url]:focus,
.wc-block-components-textarea textarea:focus,
textarea.wc-block-components-textarea:focus {
	background-color: var(--wp--preset--color--surface) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
}
.wc-block-components-text-input label,
.wc-block-components-textarea label {
	color: var(--wp--preset--color--light-silver) !important;
}
.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	background: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--border-glow) !important;
	border-radius: 10px !important;
	color: var(--wp--preset--color--white) !important;
}
.wc-block-components-totals-item,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
	color: var(--wp--preset--color--white) !important;
}

/* ---------- My Account: login / register tabs ----------
 * See woocommerce/myaccount/form-login.php override + account-tabs.js.
 * Same two WooCommerce forms as core, just switched between instead of
 * stacked, so "create a new account" reads as a clear, explicit choice
 * next to "log in" rather than a second form further down the page. */
.forte-account-tabs {
	max-width: 480px;
	margin-inline: auto;
}
.forte-account-tabs__nav {
	display: flex;
	gap: 0.4rem;
	margin-block-end: 1.75rem;
	padding: 0.3rem;
	border: 1px solid var(--wp--preset--color--border-glow);
	border-radius: 12px;
	background: var(--wp--preset--color--surface-raised);
}
.forte-account-tabs__btn {
	flex: 1;
	padding: 0.75rem 1rem;
	border: none;
	border-radius: 9px;
	background: transparent;
	color: var(--wp--preset--color--light-silver);
	font-weight: 700;
	font-size: 0.95rem;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.forte-account-tabs__btn.is-active {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}
.forte-account-tabs__panel {
	display: none;
}
.forte-account-tabs__panel.is-active,
.forte-account-tabs--login-only .forte-account-tabs__panel {
	display: block;
}
.forte-account-tabs .woocommerce-form-row {
	margin-block-end: 1rem;
}
.forte-account-tabs .woocommerce-Input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.9rem;
	margin-block-start: 0.4rem;
	border: 1px solid var(--wp--preset--color--border-glow);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--white);
}
.forte-account-tabs .woocommerce-Input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}

/* ---------- Focus visibility (accessibility — section 59) ---------- */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary );
	outline-offset: 2px;
}

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wp-element-button,
	.forte-card,
	.wc-block-grid__product,
	.wp-block-woocommerce-product-template > li,
	.products .product,
	.wc-block-grid__product img,
	.wp-block-woocommerce-product-image img,
	.products .product img {
		transition: none !important;
	}
}