/*
 * Fanki base stylesheet.
 * Loaded on every page: reset, typography, layout primitives, header,
 * footer, buttons, forms, badges, breadcrumbs, pagination, and the shared
 * "message page" pattern (used by the thank-you and 404 pages).
 * Depends on tokens.css being loaded first.
 */

/* ---------- Reset ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* WordPress core's standard sr-only utility class. Several un-overridden
   WooCommerce form templates rely on this already (the "Required" field
   marker on checkout/account/login/reset-password, the price filter
   widget's Min/Max price <label>s) — without it that text renders visible
   instead of screen-reader-only. */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--fanki-font-family-base);
	font-size: var(--fanki-font-size-base);
	line-height: var(--fanki-line-height-base);
	color: var(--fanki-color-text);
	background: var(--fanki-color-bg);
}

img,
picture,
svg {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--fanki-font-family-heading);
	line-height: var(--fanki-line-height-tight);
	color: var(--fanki-color-text);
}

/* Weight tapers from bold (h1/h2) to semibold (h3/h4) to medium (h5/h6)
   instead of one uniform bold — a modern-minimal hierarchy cue. Sizes are
   admin-editable (Fanki Theme Options > Typography > Heading Sizes) — this
   is the theme's real, global H1–H6 scale now, not just a fallback;
   components that need a specific size independent of these
   (.fanki-page-title, .fanki-section__title, etc.) keep their own
   font-size rules, which simply override these by selector specificity. */

h1,
h2 {
	font-weight: var(--fanki-font-weight-bold);
}

h3,
h4 {
	font-weight: var(--fanki-font-weight-semibold);
}

h5,
h6 {
	font-weight: var(--fanki-font-weight-medium);
}

h1 {
	font-size: var(--fanki-h1-size);
	letter-spacing: var(--fanki-letter-spacing-tight);
}

h2 {
	font-size: var(--fanki-h2-size);
	letter-spacing: var(--fanki-letter-spacing-snug);
}

h3 {
	font-size: var(--fanki-h3-size);
}

h4 {
	font-size: var(--fanki-h4-size);
}

h5 {
	font-size: var(--fanki-h5-size);
}

h6 {
	font-size: var(--fanki-h6-size);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* ---------- Accessibility utilities ---------- */

.fanki-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fanki-skip-link {
	position: absolute;
	top: -48px;
	left: var(--fanki-space-4);
	z-index: var(--fanki-z-toast);
	background: var(--fanki-color-primary);
	color: var(--fanki-color-primary-contrast);
	padding: var(--fanki-space-2) var(--fanki-space-4);
	border-radius: var(--fanki-radius-sm);
	transition: top var(--fanki-transition-fast);
}

.fanki-skip-link:focus {
	top: var(--fanki-space-2);
}

/* ---------- Layout primitives ---------- */

.fanki-container {
	width: 100%;
	max-width: var(--fanki-container-max-width);
	margin-inline: auto;
	padding-inline: var(--fanki-container-padding);
}

.fanki-section {
	padding-block: var(--fanki-space-8);
	background: var(--fanki-color-bg);
}

/* Every other rendered homepage section (fanki_render_homepage_sections_block(),
   inc/template-tags.php, counts rendered BLOCKS — a grouped Promo Banner
   run is one block — not raw repeater rows) gets this subtle tint instead
   of the plain page background, so consecutive sections stay visually
   distinguishable even before their own content is read. Hero is excluded
   entirely (renders separately in front-page.php, already has its own
   image/slider background). */
.fanki-section--alt {
	background: var(--fanki-color-surface);
}

.fanki-section__heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--fanki-space-4);
	margin-bottom: var(--fanki-space-5);
	background: var(--fanki-color-primary-light);
	padding: var(--fanki-space-4) var(--fanki-space-5);
	border-radius: var(--fanki-radius-md);
}

.fanki-section__title {
	font-size: var(--fanki-font-size-2xl);
}

.fanki-page-title {
	font-size: var(--fanki-font-size-2xl);
	margin-bottom: var(--fanki-space-5);
}

/* Intro paragraph directly under a .fanki-page-title (Contact, FAQ, and any
   future simple content page) — shared here since it's not specific to any
   one page-specific stylesheet. */
.fanki-page-intro {
	color: var(--fanki-color-text-muted);
	max-width: 640px;
	margin-bottom: var(--fanki-space-6);
}

/* ---------- Buttons ---------- */

.fanki-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fanki-space-2);
	padding: var(--fanki-space-3) var(--fanki-space-5);
	font-size: var(--fanki-button-font-size);
	font-weight: var(--fanki-font-weight-semibold);
	border-radius: var(--fanki-button-radius);
	text-transform: var(--fanki-button-text-transform);
	border: 1px solid transparent;
	transition: background-color var(--fanki-transition-fast), border-color var(--fanki-transition-fast), color var(--fanki-transition-fast), transform var(--fanki-transition-fast), box-shadow var(--fanki-transition-fast);
}

.fanki-btn:hover:not(:disabled):not(.disabled):not(.loading) {
	transform: translateY(-1px);
}

.fanki-btn:active:not(:disabled):not(.disabled):not(.loading) {
	transform: translateY(1px);
}

.fanki-btn:focus-visible {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 2px;
}

.fanki-btn--primary {
	background: var(--fanki-btn-primary-bg);
	color: var(--fanki-btn-primary-color);
	border-color: var(--fanki-btn-primary-border-color);
	border-width: var(--fanki-btn-primary-border-width);
	font-weight: var(--fanki-btn-primary-font-weight);
	box-shadow: var(--fanki-btn-primary-shadow);
}

.fanki-btn--primary:hover {
	background: var(--fanki-btn-primary-hover-bg);
	color: var(--fanki-btn-primary-hover-color);
	border-color: var(--fanki-btn-primary-hover-border-color);
}

.fanki-btn--primary:active:not(:disabled):not(.disabled):not(.loading) {
	box-shadow: var(--fanki-btn-primary-shadow-active);
}

.fanki-btn--secondary {
	background: var(--fanki-btn-secondary-bg);
	color: var(--fanki-btn-secondary-color);
	border-color: var(--fanki-btn-secondary-border-color);
	border-width: var(--fanki-btn-secondary-border-width);
	font-weight: var(--fanki-btn-secondary-font-weight);
}

.fanki-btn--secondary:hover:not(:disabled):not(.disabled):not(.loading) {
	background: var(--fanki-btn-secondary-hover-bg);
	color: var(--fanki-btn-secondary-hover-color);
	border-color: var(--fanki-btn-secondary-hover-border-color);
}

.fanki-btn--outline {
	background: var(--fanki-btn-outline-bg);
	color: var(--fanki-btn-outline-color);
	border-color: var(--fanki-btn-outline-border-color);
	border-width: var(--fanki-btn-outline-border-width);
	font-weight: var(--fanki-btn-outline-font-weight);
}

.fanki-btn--outline:hover {
	background: var(--fanki-btn-outline-hover-bg);
	color: var(--fanki-btn-outline-hover-color);
	border-color: var(--fanki-btn-outline-hover-border-color);
}

.fanki-btn--sm {
	/* Every real .fanki-btn--sm usage in this theme (Add to Cart/Order Now,
	   View All, Read More, the cookie-banner Accept button) is a compact
	   CTA meant to read at the same size as Add to Cart — none is a true
	   tiny/badge-style label. Font-size used to be --fanki-font-size-xs
	   (11px), which meant every NEW button reaching for this same class
	   started smaller than Add to Cart by default and needed its own
	   scoped context-specific bump to --sm (13px) to match — that
	   happened independently at least 4 times (Quick View's Add to Cart,
	   the product card's Add to Cart/Order Now, View All, and Read More)
	   because the fix was always scoped to one selector, not the base
	   class. Set to --sm directly here instead, so every future .fanki-
	   btn--sm button matches Add to Cart automatically with no separate
	   override needed — this is now the single place that size lives.
	   2026-08-30: both this and .fanki-btn's own base font-size were
	   repointed from --fanki-font-size-sm to the new, dedicated
	   --fanki-button-font-size token (Fanki: Branding > Typography >
	   Button Text Size) — same 13px default, but now independently
	   adjustable from the many other things -sm also governs. */
	padding: var(--fanki-space-2) var(--fanki-space-4);
	font-size: var(--fanki-button-font-size);
}

/* Was its own --fanki-font-size-base (16px) — unified into
   --fanki-button-font-size on 2026-08-30 per an explicit choice to fold
   this "large CTA" tier (also: single-product Add to Cart, Proceed to
   Checkout, Place Order, 2 shop-filter buttons) into the same one
   Button Text Size control as every other button, rather than keeping a
   separate large-button tier. */
.fanki-btn--lg {
	padding: var(--fanki-space-4) var(--fanki-space-7);
	font-size: var(--fanki-button-font-size);
}

.fanki-btn--block {
	width: 100%;
}

.fanki-btn--icon {
	padding: var(--fanki-space-2);
}

/* ---------- Forms ---------- */

.fanki-field {
	display: flex;
	flex-direction: column;
	gap: var(--fanki-space-2);
	margin-bottom: var(--fanki-space-4);
}

.fanki-label {
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
}

.fanki-label .fanki-required {
	color: var(--fanki-color-danger);
}

/* --fanki-radius-md here (a rounded rectangle) is the standard for every
   real text input/select/textarea in the theme, deliberately different
   from the header .fanki-search bar's --fanki-radius-full pill shape
   further down this file — that's a distinct, intentional convention for
   search-as-a-pill, not a drifted/forgotten value. .form-row is
   WooCommerce's own generated field markup (checkout, addresses) —
   combined into the same rule as .fanki-input/-select/-textarea rather
   than duplicated, since both need to stay identical anyway. */

.fanki-input,
.fanki-select,
.fanki-textarea,
.form-row input.input-text,
.form-row select,
.form-row textarea {
	width: 100%;
	padding: var(--fanki-space-3) var(--fanki-space-4);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	background: var(--fanki-color-bg);
	font-size: var(--fanki-font-size-sm);
}


.fanki-checkbox-row {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
	font-size: var(--fanki-font-size-sm);
}

.fanki-hint {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
}

.fanki-hint--center {
	text-align: center;
	margin-top: var(--fanki-space-3);
}

.fanki-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fanki-space-4);
}

@media (max-width: 768px) {
	.fanki-field-row {
		grid-template-columns: 1fr;
	}
}

/* ---------- Trust row (icon + text; product page + checkout header) ---------- */

.fanki-trust-row {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-3);
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text-muted);
}

.fanki-trust-row svg {
	flex-shrink: 0;
	color: var(--fanki-color-primary);
}

.fanki-trust-row--compact {
	gap: var(--fanki-space-2);
}

/* ---------- Quantity stepper (product page + cart line items) ---------- */
/* .fanki-qty-stepper now really is what wraps the whole minus/input/plus
   group on the single-product page (inc/woocommerce/wc-hooks.php prints its
   opening/closing tags around WooCommerce's own .quantity div) — it, not
   .quantity, owns the single unified pill border. .quantity keeps its OWN
   border only for cart line items, where it renders unwrapped (cart.php
   never fires the two hooks that add the wrapper — see wc-hooks.php's
   comment on fanki_quantity_decrease_button()); the nested-context selector
   right below cancels that border out wherever .quantity IS wrapped, so it
   doesn't double up with the wrapper's own border around it. */

.fanki-qty-stepper,
.quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
}

.fanki-qty-stepper {
	flex-shrink: 0;
}

.fanki-qty-stepper .quantity {
	border: 0;
	border-radius: 0;
}

.fanki-qty-stepper button,
.fanki-qty-stepper__btn {
	width: 40px;
	height: 48px;
	background: none;
	border: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--fanki-radius-sm);
	transition: background-color var(--fanki-transition-fast);
}

.fanki-qty-stepper button:hover,
.fanki-qty-stepper__btn:hover {
	background: var(--fanki-color-surface);
}

.fanki-qty-stepper input,
.quantity .qty {
	width: 40px;
	height: 48px;
	border: 0;
	border-inline: 1px solid var(--fanki-color-border);
	text-align: center;
	/* The custom +/- buttons are the only intended way to change quantity
	   by click — the input's own native up/down spinner duplicated that
	   (and, until fankiAdjustQuantity()'s wrapper-lookup bug was fixed,
	   was the only one of the two that actually worked), reading as two
	   separate controls for one action. type="number" is kept (mobile
	   numeric keyboard, native min/max/step validation) — only its
	   spinner arrows are hidden. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.fanki-qty-stepper input::-webkit-outer-spin-button,
.fanki-qty-stepper input::-webkit-inner-spin-button,
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---------- WooCommerce form rows (checkout + account forms) ---------- */
/* .form-row is WooCommerce's real class for a form field wrapper, used by
   checkout billing/shipping, the account edit-account/edit-address forms,
   and the login/register forms — none of those templates are overridden
   (see CLAUDE.md's Phase 4/5 notes), so this re-skins the real class. */

.form-row {
	margin-bottom: var(--fanki-space-4);
}

.form-row label {
	display: block;
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	margin-bottom: var(--fanki-space-2);
}

.form-row .required {
	color: var(--fanki-color-danger);
	text-decoration: none;
}

.form-row-first,
.form-row-last {
	width: 48%;
}

/* Both sides must float (not just .form-row-last) — mixing a floated box
   with a plain inline-block one breaks down as soon as the two fields have
   different heights (e.g. one gets a validation error message and the
   other doesn't), since only floats reliably sit side-by-side regardless of
   each other's height. Matches WooCommerce's own default form-row-first/
   -last CSS, which floats both sides for the same reason. */
.form-row-first {
	float: left;
}

.form-row-last {
	float: right;
}

/* WooCommerce's own real field-width class (not specific to any one form)
   — harmless whenever nothing precedes it, but needed wherever a
   full-width row (e.g. checkout's Full Address) directly follows a
   .form-row-last pair: without it, the floated last field isn't cleared
   and the wide row after it can render beside the float instead of below
   it. */
.form-row-wide {
	clear: both;
}

/* Field-level validation feedback — checkout.js (WooCommerce core, ships
   its own JS even though its default stylesheet is disabled) adds
   .woocommerce-invalid to a .form-row on a failed field, and on a full
   validation-error response appends a <p class="checkout-inline-error-
   message"> inside that same .form-row. Unstyled, that paragraph renders
   in default black body text sitting flush under the field with no gap —
   reads as broken next to the rest of the form. Same danger color already
   used for .woocommerce-error and the required-field asterisk above, so
   invalid fields/messages read as one consistent error language. Shared
   here (not checkout.css) because .form-row/.woocommerce-invalid are the
   same WooCommerce classes on the account and login/register forms too. */
.woocommerce-invalid input.input-text,
.woocommerce-invalid select,
.woocommerce-invalid textarea {
	border-color: var(--fanki-color-danger);
}

.checkout-inline-error-message {
	margin: var(--fanki-space-2) 0 0;
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-danger);
}

@media (max-width: 768px) {
	.form-row-first,
	.form-row-last {
		width: 100%;
		float: none;
	}
}

/* ---------- Summary row (cart totals, checkout order summary, order-received receipt) ---------- */

.fanki-summary-card {
	max-width: 720px;
	margin-inline: auto;
	margin-bottom: var(--fanki-space-9);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	padding: var(--fanki-space-5);
}

.fanki-summary-title {
	font-size: var(--fanki-font-size-lg);
	margin-bottom: var(--fanki-space-4);
}

.fanki-summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--fanki-font-size-sm);
	padding-block: var(--fanki-space-2);
}

.fanki-summary-row--total {
	border-top: 1px solid var(--fanki-color-border);
	margin-top: var(--fanki-space-2);
	padding-top: var(--fanki-space-4);
	font-size: var(--fanki-font-size-md);
	font-weight: var(--fanki-font-weight-semibold);
}

.fanki-summary-cta {
	margin-top: var(--fanki-space-4);
}

/* ---------- Badges ---------- */

.fanki-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--fanki-space-1) var(--fanki-space-3);
	font-size: var(--fanki-font-size-xs);
	font-weight: var(--fanki-font-weight-semibold);
	border-radius: var(--fanki-radius-full);
	line-height: 1;
}

.fanki-badge--sale {
	background: var(--fanki-color-danger-light);
	color: var(--fanki-color-danger);
}

.fanki-badge--new {
	background: var(--fanki-color-info-light);
	color: var(--fanki-color-info);
}

.fanki-badge--out-of-stock {
	background: var(--fanki-color-surface-alt);
	color: var(--fanki-color-text-muted);
}

.fanki-badge--success {
	background: var(--fanki-color-success-light);
	color: var(--fanki-color-success);
}

.fanki-badge--warning {
	background: var(--fanki-color-warning-light);
	color: var(--fanki-color-warning);
}

/* ---------- Breadcrumbs ---------- */

.fanki-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--fanki-space-2);
	/* sm, not xs — xs (12px) is this scale's smallest step, meant for true
	   micro text (badges, timestamps), and read as too small for a line of
	   navigation text sitting right above a page title. sm matches the
	   "muted small text" tier used everywhere else on the site (widget
	   titles, table cells, meta info). */
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text-muted);
	padding-block: var(--fanki-space-4);
}

.fanki-breadcrumbs a:hover {
	color: var(--fanki-color-primary);
}

.fanki-breadcrumbs__current {
	color: var(--fanki-color-text);
}

/* ---------- Pagination ---------- */

.fanki-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--fanki-space-2);
	padding-block: var(--fanki-space-6);
}

.fanki-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border-radius: var(--fanki-radius-md);
	border: 1px solid var(--fanki-color-border);
	font-size: var(--fanki-font-size-sm);
}

.fanki-pagination__link:hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

.fanki-pagination__link--current {
	background: var(--fanki-color-primary);
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary-contrast);
}

/* WordPress's own the_posts_pagination() markup (nav.pagination > .page-numbers),
   styled to match .fanki-pagination above, for index.php/archive.php/single.php.
   WooCommerce's own woocommerce_pagination() (nav.woocommerce-pagination > .page-numbers)
   is aliased onto the same rules for the shop archive. */

.pagination,
.woocommerce-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--fanki-space-2);
	padding-block: var(--fanki-space-6);
}

.pagination .page-numbers,
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border-radius: var(--fanki-radius-md);
	border: 1px solid var(--fanki-color-border);
	font-size: var(--fanki-font-size-sm);
}

.pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers:hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
	background: var(--fanki-color-primary);
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary-contrast);
}

.pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
}

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

.fanki-header {
	position: sticky;
	top: 0;
	z-index: var(--fanki-z-header);
	background: var(--fanki-color-bg);
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-header__top-bar {
	background: var(--fanki-color-secondary);
	color: var(--fanki-color-secondary-contrast);
	/* xs -> sm (2026-08-31): a persistent, always-visible announcement
	   strip on every page shouldn't read at the same tiny size as a
	   homepage section's minor sub-text — bumped to match the
	   eyebrow/USP-title/testimonial-author tier instead. */
	font-size: var(--fanki-font-size-sm);
}

.fanki-header__top-bar .fanki-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--fanki-space-2);
}

/* "Track Order" (the top-bar's one link) previously had zero hover
   feedback — it just sat at the bar's own inherited text color with
   nothing changing on interaction. Underline rather than a color/token
   change, since the bar already uses full-contrast text with no muted
   variant to shift toward. */
.fanki-header__top-bar nav a:hover {
	text-decoration: underline;
}

.fanki-header__main {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-6);
	min-height: var(--fanki-header-height);
}

.fanki-logo {
	font-size: var(--fanki-font-size-xl);
	font-weight: var(--fanki-font-weight-bold);
	white-space: nowrap;
}

.fanki-nav {
	flex: 1;
}

.fanki-nav__list {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fanki-nav__item {
	position: relative;
}

.fanki-nav__link {
	display: inline-block;
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	padding-block: var(--fanki-space-2);
}

.fanki-nav__link:hover {
	color: var(--fanki-color-primary);
}

/* ---------- Nav dropdowns (one level) ----------
   Desktop: CSS-only hover/focus-within, no JS required. The caret button
   still gets a click-toggle behavior everywhere (assets/js/nav-dropdown.js)
   as a progressive enhancement for touch/keyboard users, and is the ONLY
   way dropdowns open inside the mobile nav panel (no hover state there). */

.fanki-nav__caret-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: var(--fanki-radius-full);
	padding: var(--fanki-space-1);
	color: inherit;
	cursor: pointer;
	transition: background-color var(--fanki-transition-fast);
}

.fanki-nav__caret-btn:hover {
	background: var(--fanki-color-surface);
}

.fanki-nav__caret-btn:focus-visible {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 2px;
}

.fanki-nav__caret {
	transition: transform var(--fanki-transition-fast);
}

.fanki-nav__caret-btn[aria-expanded="true"] .fanki-nav__caret {
	transform: rotate(180deg);
}

.fanki-nav .fanki-nav__dropdown {
	display: none;
	list-style: none;
	margin: 0;
	padding: var(--fanki-space-2);
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--fanki-color-bg);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	box-shadow: var(--fanki-shadow-md);
	z-index: var(--fanki-z-header);
}

.fanki-nav .fanki-nav__dropdown .fanki-nav__item {
	position: static;
}

.fanki-nav .fanki-nav__dropdown .fanki-nav__link {
	display: block;
	padding: var(--fanki-space-2) var(--fanki-space-3);
	border-radius: var(--fanki-radius-sm);
}

.fanki-nav .fanki-nav__dropdown .fanki-nav__link:hover {
	background: var(--fanki-color-surface-alt);
}

@media (min-width: 1025px) {
	.fanki-nav__item--has-children:hover > .fanki-nav__dropdown,
	.fanki-nav__item--has-children:focus-within > .fanki-nav__dropdown,
	.fanki-nav__item--has-children.fanki-nav__item--open > .fanki-nav__dropdown {
		display: block;
	}
}

/* Mobile nav panel: dropdowns expand inline (accordion), not as a floating
   absolutely-positioned panel — there's no room for that in a slide-down
   mobile menu. */
.fanki-mobile-nav .fanki-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.fanki-mobile-nav .fanki-nav__dropdown {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: var(--fanki-space-4);
}

.fanki-mobile-nav .fanki-nav__item--open > .fanki-nav__dropdown {
	display: block;
}

.fanki-mobile-nav .fanki-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.fanki-mobile-nav .fanki-nav__dropdown .fanki-nav__item {
	width: 100%;
}

.fanki-search {
	display: flex;
	align-items: center;
	flex: 1;
	max-width: 420px;
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-full);
	padding-inline: var(--fanki-space-4);
	transition: border-color var(--fanki-transition-fast), outline-color var(--fanki-transition-fast);
}

/* .fanki-search__input suppresses its own default focus outline below —
   so the wrapper itself has to carry SOME focus indicator via
   :focus-within, or a keyboard user tabbing here would get no visible
   focus state at all. Border-color change only (no outline ring, removed
   per the user's request) — more subtle than before, but still a real,
   visible state change on focus, not nothing. */
.fanki-search:focus-within {
	border-color: var(--fanki-color-primary);
}

.fanki-search--full {
	max-width: none;
}

.fanki-header__spacer {
	flex: 1;
}

.fanki-search__input {
	border: 0;
	flex: 1;
	padding-block: var(--fanki-space-2);
	background: transparent;
}

.fanki-search__input:focus {
	outline: none;
}

.fanki-header__icons {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-4);
}

.fanki-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: none;
	border: 0;
	border-radius: var(--fanki-radius-full);
	transition: background-color var(--fanki-transition-fast);
}

.fanki-icon-btn:hover {
	background: var(--fanki-color-surface);
}

/* Header icon size (Fanki Theme Options > Branding > Icons) — a single
   CSS rule covers every header icon uniformly, including the ones NOT in
   the swappable inc/icons.php registry (search, theme toggle, menu
   toggle); CSS width/height on an <svg> override its own hardcoded
   width/height HTML attributes, so this works without touching markup. */

.fanki-icon-btn svg,
.fanki-theme-toggle svg {
	width: var(--fanki-icon-size);
	height: var(--fanki-icon-size);
}

/* Shared with .fanki-order-summary__qty-badge (checkout.css) — the exact
   same small circular count-badge, previously defined twice independently
   in two files (both hardcoding font-size: 10px raw, below the smallest
   scale step) instead of sharing one rule (2026-08-11 design audit).
   Each keeps only its own position offset, since the two sit on
   differently-sized parent icons. */
.fanki-icon-btn__count,
.fanki-order-summary__qty-badge {
	position: absolute;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fanki-font-size-2xs);
	font-weight: var(--fanki-font-weight-bold);
	background: var(--fanki-color-primary);
	color: var(--fanki-color-primary-contrast);
	border-radius: var(--fanki-radius-full);
}

.fanki-icon-btn__count {
	top: -4px;
	right: -4px;
}

.fanki-menu-toggle {
	display: none;
	background: none;
	border: 0;
	width: 40px;
	height: 40px;
	border-radius: var(--fanki-radius-full);
	transition: background-color var(--fanki-transition-fast);
}

.fanki-menu-toggle:hover {
	background: var(--fanki-color-surface);
}

@media (max-width: 1024px) {
	.fanki-nav {
		display: none;
	}

	.fanki-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.fanki-search {
		display: none;
	}
}

.fanki-mobile-nav[hidden] {
	display: none;
}

.fanki-mobile-nav {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--fanki-color-border);
	padding: var(--fanki-space-2) var(--fanki-container-padding) var(--fanki-space-4);
}

.fanki-mobile-nav__link {
	display: block;
	padding-block: var(--fanki-space-3);
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
}

/* Top-level menu rows (.fanki-nav__item, from Fanki_Nav_Walker) and the
   standalone My Account/Cart links after <hr> both read as a list of
   full-width rows with a bottom divider — the border lives on the row
   (li or bare link), not on .fanki-mobile-nav__link itself, since a menu
   link's border would only span its own flex-shrunk width once the item
   also lays out a caret button beside it. */
.fanki-mobile-nav > .fanki-nav__list > .fanki-nav__item,
.fanki-mobile-nav > .fanki-mobile-nav__link,
.fanki-mobile-nav .fanki-nav__dropdown .fanki-nav__item {
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-mobile-nav > .fanki-nav__list > .fanki-nav__item:last-child,
.fanki-mobile-nav > .fanki-mobile-nav__link:last-child,
.fanki-mobile-nav .fanki-nav__dropdown .fanki-nav__item:last-child {
	border-bottom: 0;
}

.fanki-mobile-nav__divider {
	border: 0;
	border-top: 1px solid var(--fanki-color-border);
	margin-block: var(--fanki-space-2);
}

@media (min-width: 1025px) {
	.fanki-mobile-nav {
		display: none !important;
	}
}

/* ---------- Cart drawer ----------
   Site-wide (renders in header.php on every page except checkout — see
   $fanki_is_checkout_page there), so this lives in base.css rather than
   cart.css (only loaded on is_cart()). .fanki-cart-drawer__body wraps
   WooCommerce's own real mini-cart template output (woocommerce_mini_cart(),
   inc/woocommerce/wc-template-functions.php's fanki_cart_drawer_body()) —
   the .woocommerce-mini-cart*/.remove_from_cart_button/etc. selectors below
   are WC core's real, long-stable class names, re-skinned in place rather
   than reinventing the cart-item markup. Not verified against a live
   WooCommerce install (no WC source is vendored in this project to check
   against). */

.fanki-cart-drawer[hidden] {
	display: none;
}

.fanki-cart-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--fanki-z-overlay);
}

.fanki-cart-drawer__overlay {
	position: absolute;
	inset: 0;
	background: var(--fanki-overlay-dark-medium);
}

.fanki-cart-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 100%);
	background: var(--fanki-color-bg);
	display: flex;
	flex-direction: column;
	box-shadow: var(--fanki-shadow-lg);
}

.fanki-cart-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--fanki-space-5);
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-cart-drawer__title {
	font-size: var(--fanki-font-size-lg);
	font-weight: var(--fanki-font-weight-semibold);
}

.fanki-cart-drawer__close {
	background: none;
	border: 0;
	border-radius: var(--fanki-radius-full);
	cursor: pointer;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	transition: background-color var(--fanki-transition-fast);
}

/* Same circular-icon-button shape/hover as .fanki-icon-btn — both missing
   here (2026-08-19 button-style chronology audit). */
.fanki-cart-drawer__close:hover {
	background: var(--fanki-color-surface);
}

.fanki-cart-drawer__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--fanki-space-5);
}

body.fanki-cart-drawer-open {
	overflow: hidden;
}

/* WooCommerce's real mini-cart output */

.woocommerce-mini-cart__empty-message {
	color: var(--fanki-color-text-muted);
	text-align: center;
	padding-block: var(--fanki-space-6);
}

ul.woocommerce-mini-cart {
	list-style: none;
	margin: 0 0 var(--fanki-space-5);
	padding: 0;
}

.woocommerce-mini-cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: var(--fanki-space-3);
	align-items: start;
	padding-block: var(--fanki-space-4);
	border-bottom: 1px solid var(--fanki-color-border);
}

.woocommerce-mini-cart-item:first-child {
	padding-top: 0;
}

.woocommerce-mini-cart-item img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--fanki-radius-sm);
}

.woocommerce-mini-cart-item__name {
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
}

.woocommerce-mini-cart-item .quantity {
	display: block;
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
	margin-top: var(--fanki-space-1);
}

.woocommerce-mini-cart-item dl {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
	margin: var(--fanki-space-1) 0 0;
}

.woocommerce-mini-cart-item dl dt,
.woocommerce-mini-cart-item dl dd {
	display: inline;
	margin: 0;
}

.woocommerce-mini-cart-item dl dt::after {
	content: ": ";
}

.woocommerce-mini-cart-item dl p {
	display: inline;
	margin: 0;
}

.remove_from_cart_button {
	grid-column: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-lg);
	line-height: 1;
}

.remove_from_cart_button:hover {
	color: var(--fanki-color-danger);
}

.woocommerce-mini-cart__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: var(--fanki-font-size-md);
	font-weight: var(--fanki-font-weight-semibold);
	padding-top: var(--fanki-space-4);
	border-top: 1px solid var(--fanki-color-border);
}

.woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--fanki-space-3);
	margin-top: var(--fanki-space-4);
}

.woocommerce-mini-cart__buttons .button {
	width: 100%;
}

/* Routed through the real --fanki-btn-primary-* tokens (same pattern as
   .single_add_to_cart_button, product.css) instead of a hardcoded
   --fanki-color-primary — so this responds to Button Style preset/Advanced
   Styling the same as every other primary CTA in the buy flow, including
   the full cart page's own "Proceed to Checkout" right below in this file
   (2026-08-19 button-style chronology audit). */
.woocommerce-mini-cart__buttons .checkout {
	background: var(--fanki-btn-primary-bg);
	color: var(--fanki-btn-primary-color);
	border-color: var(--fanki-btn-primary-border-color);
	border-width: var(--fanki-btn-primary-border-width);
	font-weight: var(--fanki-btn-primary-font-weight);
	box-shadow: var(--fanki-btn-primary-shadow);
}

.woocommerce-mini-cart__buttons .checkout:hover {
	background: var(--fanki-btn-primary-hover-bg);
	color: var(--fanki-btn-primary-hover-color);
	border-color: var(--fanki-btn-primary-hover-border-color);
}

/* ---------- Footer ---------- */

.fanki-footer {
	background: var(--fanki-color-secondary);
	color: var(--fanki-color-secondary-contrast);
	margin-top: var(--fanki-space-9);
}

.fanki-footer__newsletter {
	border-bottom: 1px solid var(--fanki-overlay-light-subtle);
	padding-block: var(--fanki-space-6);
}

.fanki-footer__newsletter .fanki-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fanki-space-5);
	flex-wrap: wrap;
}

.fanki-footer__newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fanki-space-2);
}

.fanki-footer__newsletter-form .fanki-input {
	background: var(--fanki-overlay-light-subtle);
	border-color: var(--fanki-overlay-light-subtle);
	color: var(--fanki-color-text-inverse);
	min-width: 260px;
}

.fanki-footer__newsletter-message {
	flex-basis: 100%;
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-success);
}

.fanki-footer__newsletter-message:empty {
	display: none;
}

.fanki-footer__newsletter-message--error {
	color: var(--fanki-color-danger-light);
}


.fanki-footer__columns {
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr);
	gap: var(--fanki-space-6);
	padding-block: var(--fanki-space-8);
}

.fanki-footer__heading {
	color: var(--fanki-color-secondary-contrast);
	font-size: var(--fanki-font-size-sm);
	text-transform: uppercase;
	letter-spacing: var(--fanki-letter-spacing-wide);
	margin-bottom: var(--fanki-space-4);
}

.fanki-footer__columns a,
.fanki-footer__columns p {
	color: var(--fanki-color-text-inverse-muted);
	font-size: var(--fanki-font-size-sm);
}

.fanki-footer__columns li + li {
	margin-top: var(--fanki-space-2);
}

.fanki-footer__newsletter-title {
	margin-bottom: var(--fanki-space-1);
}

.fanki-footer__newsletter-text {
	color: var(--fanki-color-text-inverse-muted);
	font-size: var(--fanki-font-size-sm);
}

.fanki-footer__logo {
	color: var(--fanki-color-secondary-contrast);
}

.fanki-footer__tagline {
	margin-top: var(--fanki-space-3);
	max-width: 32ch;
}

.fanki-footer__columns a:hover {
	color: var(--fanki-color-secondary-contrast);
}

.fanki-footer__socials {
	display: flex;
	gap: var(--fanki-space-3);
	margin-top: var(--fanki-space-4);
}

.fanki-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--fanki-radius-full);
	background: var(--fanki-overlay-light-subtle);
	transition: background-color var(--fanki-transition-fast);
}

/* Previously only the icon's own text color changed on hover (inherited
   from .fanki-footer__columns a:hover, below) — the circle itself stayed
   static, unlike every other circular icon-button site-wide. */
.fanki-footer__socials a:hover {
	background: var(--fanki-overlay-light-medium);
}

.fanki-footer__bottom {
	border-top: 1px solid var(--fanki-overlay-light-subtle);
	padding-block: var(--fanki-space-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--fanki-space-3);
	color: var(--fanki-color-text-inverse-muted);
}

/* The copyright line is plain footer body text, not a decorative/meta
   label — it was previously unstyled here and fell back to this
   container's own font-size (formerly --xs/11px), reading smaller than
   every other piece of footer text (.fanki-footer__heading, nav links,
   tagline, newsletter text — all --sm/13px) for no real reason. Payment
   badges (.fanki-footer__payments span, below) correctly stay at --xs —
   they're genuinely the same decorative-pill category as .fanki-badge,
   sized the same everywhere else in the theme. */
.fanki-footer__bottom > p {
	font-size: var(--fanki-font-size-sm);
}

.fanki-footer__bottom--flush {
	border-top: 0;
}

.fanki-footer__payments {
	display: flex;
	gap: var(--fanki-space-2);
}

.fanki-footer__payments span {
	padding: var(--fanki-space-1) var(--fanki-space-2);
	border-radius: var(--fanki-radius-sm);
	background: var(--fanki-overlay-light-subtle);
	font-size: var(--fanki-font-size-xs);
}

@media (max-width: 1024px) {
	.fanki-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.fanki-footer__columns {
		grid-template-columns: 1fr;
	}
}

/* ---------- Back to top ---------- */

.fanki-back-to-top[hidden] {
	display: none;
}

.fanki-back-to-top {
	position: fixed;
	right: var(--fanki-space-5);
	bottom: var(--fanki-space-5);
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fanki-color-primary);
	color: var(--fanki-color-primary-contrast);
	border: 0;
	border-radius: var(--fanki-radius-full);
	box-shadow: var(--fanki-shadow-md);
	cursor: pointer;
	z-index: var(--fanki-z-header);
}

.fanki-back-to-top:hover {
	background: var(--fanki-color-primary-dark);
}

/* ---------- Long-form content (single posts, static pages) ---------- */

.fanki-post-cover {
	aspect-ratio: 21 / 9;
	border-radius: var(--fanki-radius-lg);
	overflow: hidden;
	background: var(--fanki-color-surface);
	margin-bottom: var(--fanki-space-8);
}

.fanki-post-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fanki-post-content {
	max-width: 720px;
	margin-inline: auto;
	color: var(--fanki-color-text-muted);
	line-height: var(--fanki-line-height-relaxed);
}

.fanki-post-content h2 {
	color: var(--fanki-color-text);
	font-size: var(--fanki-font-size-xl);
	margin-block: var(--fanki-space-6) var(--fanki-space-3);
}

.fanki-post-content p + p {
	margin-top: var(--fanki-space-4);
}

/* A link typed into real post/page content (the_content()) previously
   inherited only the bare global reset (a { color: inherit; text-decoration:
   none; }) — correct for UI links (nav/cards/footer, all separately styled)
   but made a prose link fully invisible against the surrounding muted body
   text, since nothing distinguished it at all. Underlined at rest (not just
   on hover) so it reads as a link without relying on color alone. Font-size
   deliberately not set here — always inherits its paragraph's own size
   (Design Consistency Reference > "links inside rich/prose content"). */
.fanki-post-content a {
	color: var(--fanki-color-primary);
	text-decoration: underline;
}

.fanki-post-content a:hover {
	color: var(--fanki-color-primary-dark);
}

/* ---------- Message page (thank-you, 404) ---------- */

.fanki-message-page {
	padding-block: var(--fanki-space-10);
	text-align: center;
}

.fanki-message-page__icon {
	width: 72px;
	height: 72px;
	margin-inline: auto;
	margin-bottom: var(--fanki-space-5);
	border-radius: var(--fanki-radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fanki-color-primary-light);
	color: var(--fanki-color-primary);
}

.fanki-message-page__title {
	font-size: var(--fanki-font-size-3xl);
	margin-bottom: var(--fanki-space-3);
}

.fanki-message-page__body {
	color: var(--fanki-color-text-muted);
	max-width: 480px;
	margin-inline: auto;
	margin-bottom: var(--fanki-space-6);
}

.fanki-message-page__actions {
	display: flex;
	gap: var(--fanki-space-3);
	justify-content: center;
	flex-wrap: wrap;
}

/* ---------- WooCommerce notices (cart/checkout/account/product pages) ---------- */
/* .woocommerce-error / .woocommerce-message / .woocommerce-info are real
   WooCommerce classes for validation errors, success messages (e.g.
   "product added to cart"), and info notices — normally styled by
   WooCommerce's own disabled default stylesheet (see wc-hooks.php). */

.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fanki-space-4);
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 var(--fanki-space-5);
	padding: var(--fanki-space-4) var(--fanki-space-5);
	border-radius: var(--fanki-radius-md);
	font-size: var(--fanki-font-size-sm);
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	list-style: none;
}

.woocommerce-error {
	background: var(--fanki-color-danger-light);
	color: var(--fanki-color-danger);
}

.woocommerce-message {
	background: var(--fanki-color-success-light);
	color: var(--fanki-color-success);
}

/* ---------- Quick-view modal ----------
   Site-wide (renders in footer.php on every page that can show a product
   card — shop, front page, single-product related/upsells — same
   reasoning as the cart drawer above), so this lives in base.css. */

.fanki-quick-view-modal[hidden] {
	display: none;
}

.fanki-quick-view-modal {
	position: fixed;
	inset: 0;
	z-index: var(--fanki-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--fanki-space-5);
}

.fanki-quick-view-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--fanki-overlay-dark-medium);
}

.fanki-quick-view-modal__panel {
	position: relative;
	width: min(720px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--fanki-color-bg);
	border-radius: var(--fanki-radius-lg);
	box-shadow: var(--fanki-shadow-lg);
	padding: var(--fanki-space-6);
}

.fanki-quick-view-modal__close {
	position: absolute;
	top: var(--fanki-space-4);
	right: var(--fanki-space-4);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fanki-color-surface);
	border: 0;
	border-radius: var(--fanki-radius-full);
	color: inherit;
	transition: background-color var(--fanki-transition-fast), color var(--fanki-transition-fast);
}

/* Missed when hover states were added to every other icon-button
   (2026-08-19 button-style chronology audit). */
.fanki-quick-view-modal__close:hover {
	background: var(--fanki-color-surface-alt);
	color: var(--fanki-color-primary);
}

.fanki-quick-view-modal__loading {
	text-align: center;
	padding: var(--fanki-space-9) 0;
	color: var(--fanki-color-text-muted);
}

body.fanki-quick-view-open {
	overflow: hidden;
}

.fanki-quick-view {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fanki-space-6);
}

/* No forced aspect-ratio/object-fit here on purpose — a cropped square was
   distorting portrait/landscape product photos. Letting the image size
   naturally means the panel shows it at its own real proportions instead. */
.fanki-quick-view__main-image img {
	width: 100%;
	height: auto;
	max-height: 60vh;
	border-radius: var(--fanki-radius-md);
	object-fit: contain;
}

.fanki-quick-view__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fanki-space-2);
	margin-top: var(--fanki-space-3);
}

.fanki-quick-view__thumb {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 2px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-sm);
	background: none;
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--fanki-transition-fast);
}

.fanki-quick-view__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fanki-quick-view__thumb:hover,
.fanki-quick-view__thumb.is-active {
	border-color: var(--fanki-color-primary);
}

.fanki-quick-view__cart-row {
	display: flex;
	align-items: stretch;
	gap: var(--fanki-space-3);
	margin-top: var(--fanki-space-4);
}

.fanki-quick-view__cart-row .add_to_cart_button {
	flex: 1;
}

.fanki-quick-view__buy-now {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: var(--fanki-space-2);
}

.fanki-quick-view .product_meta {
	margin-top: var(--fanki-space-4);
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text-muted);
}

.fanki-quick-view .product_meta a {
	color: var(--fanki-color-primary);
}

.fanki-quick-view__view-full {
	display: block;
	margin-top: var(--fanki-space-4);
	color: var(--fanki-color-primary);
	/* Was unset, silently inheriting the page's base 16px — the biggest
	   text in the whole modal despite being its least important action (a
	   plain "see more" link). Brought down to sm, matching Wishlist/
	   WhatsApp/Messenger/Buy Now/Add to Cart, all now sm too. */
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.fanki-quick-view {
		grid-template-columns: 1fr;
	}
}

/* ---------- Header search — live results dropdown ---------- */

.fanki-search {
	position: relative;
}

.fanki-search__results[hidden] {
	display: none;
}

.fanki-search__results {
	position: absolute;
	top: calc(100% + var(--fanki-space-2));
	left: 0;
	right: 0;
	background: var(--fanki-color-bg);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	box-shadow: var(--fanki-shadow-lg);
	z-index: var(--fanki-z-overlay);
	overflow: hidden;
}

.fanki-search__result {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-3);
	padding: var(--fanki-space-3) var(--fanki-space-4);
	color: inherit;
}

.fanki-search__result:hover,
.fanki-search__result:focus {
	background: var(--fanki-color-surface);
	outline: none;
}

/* :focus-visible (not the :focus above) so mouse clicks stay a plain
   background swap and only keyboard navigation gets the ring — negative
   offset since the dropdown wrapper has overflow:hidden and would clip a
   normal outward-drawn outline on items near its edge. */
.fanki-search__result:focus-visible {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: -2px;
}

.fanki-search__result img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: var(--fanki-radius-sm);
	flex-shrink: 0;
}

.fanki-search__result-title {
	display: block;
	font-size: var(--fanki-font-size-sm);
}

.fanki-search__result-price {
	display: block;
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
}

.fanki-search__view-all {
	display: block;
	text-align: center;
	padding: var(--fanki-space-3);
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	color: var(--fanki-color-primary);
	border-top: 1px solid var(--fanki-color-border);
}

/* ---------- Dark mode toggle ----------
   Both icons are always in the DOM; only one shows at a time, matching
   the current effective theme — see assets/js/dark-mode.js and the
   inline no-flash script in header.php's <head>. */

.fanki-theme-toggle__icon-dark {
	display: none;
}

:root[data-fanki-theme="dark"] .fanki-theme-toggle__icon-light {
	display: none;
}

:root[data-fanki-theme="dark"] .fanki-theme-toggle__icon-dark {
	display: block;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-fanki-theme="light"]) .fanki-theme-toggle__icon-light {
		display: none;
	}

	:root:not([data-fanki-theme="light"]) .fanki-theme-toggle__icon-dark {
		display: block;
	}
}

/* ---------- Cookie consent banner ---------- */

.fanki-cookie-banner[hidden] {
	display: none;
}

.fanki-cookie-banner {
	position: fixed;
	left: var(--fanki-space-5);
	right: var(--fanki-space-5);
	bottom: var(--fanki-space-5);
	z-index: var(--fanki-z-toast);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fanki-space-4);
	flex-wrap: wrap;
	max-width: 640px;
	margin-inline: auto;
	padding: var(--fanki-space-4) var(--fanki-space-5);
	background: var(--fanki-color-secondary);
	color: var(--fanki-color-secondary-contrast);
	border-radius: var(--fanki-radius-md);
	box-shadow: var(--fanki-shadow-lg);
}

.fanki-cookie-banner__text {
	font-size: var(--fanki-font-size-sm);
}

.fanki-cookie-banner__text a {
	color: inherit;
	text-decoration: underline;
}

.fanki-cookie-banner__accept {
	flex-shrink: 0;
}

.woocommerce-info {
	background: var(--fanki-color-info-light);
	color: var(--fanki-color-info);
}

.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
	flex-shrink: 0;
}

/* ---------- Generic WooCommerce ".button" fallback ---------- */
/* Covers any real WooCommerce button/link (e.g. "View cart" inside an
   add-to-cart notice) not already re-skinned by a more specific selector
   elsewhere (cart.css, checkout.css, account.css). Every selector here is
   scoped :not(.fanki-btn) — WooCommerce's own add-to-cart button markup
   (fanki_loop_add_to_cart_args(), inc/woocommerce/wc-hooks.php) carries
   BOTH .button and .fanki-btn--primary at once, and without this guard
   .button:hover's color rule ties in specificity with
   .fanki-btn--primary:hover's and wins on source order, silently turning
   the hover text back to --fanki-color-primary (nearly invisible against
   the equally-primary-derived hover background) instead of the correct
   contrast color. */

.button:not(.fanki-btn) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--fanki-space-2) var(--fanki-space-4);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-button-radius);
	text-transform: var(--fanki-button-text-transform);
	background: var(--fanki-color-bg);
	color: var(--fanki-color-text);
	font-size: var(--fanki-button-font-size);
	font-weight: var(--fanki-font-weight-semibold);
	transition: transform var(--fanki-transition-fast), box-shadow var(--fanki-transition-fast);
}

.button:not(.fanki-btn):hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

.button:not(.fanki-btn):hover:not(:disabled):not(.disabled):not(.loading) {
	transform: translateY(-1px);
}

.button:not(.fanki-btn):active:not(:disabled):not(.disabled):not(.loading) {
	transform: translateY(1px);
}

.button:not(.fanki-btn):focus-visible {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.fanki-btn,
	.button {
		transition-property: background-color, border-color, color;
	}

	.fanki-btn:hover,
	.fanki-btn:active,
	.button:hover,
	.button:active {
		transform: none;
	}

	.fanki-post-grid > article,
	.fanki-post-card__media img {
		transition: none;
	}

	.fanki-post-grid > article:hover {
		transform: none;
	}

	.fanki-post-grid > article:hover .fanki-post-card__media img {
		transform: none;
	}
}

/* ---------- AJAX loading overlay (cart/checkout updates) ---------- */
/* .blockUI.blockOverlay is added by the jquery-blockui library WooCommerce's
   own AJAX scripts use while a cart/checkout update is in flight; only the
   spinner graphic itself normally comes from WooCommerce's disabled default
   stylesheet, so it's reproduced here with a plain CSS spinner. */

.blockUI.blockOverlay {
	position: relative;
}

.blockUI.blockOverlay::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid var(--fanki-color-border);
	border-top-color: var(--fanki-color-primary);
	border-radius: var(--fanki-radius-full);
	animation: fanki-spin 0.8s linear infinite;
}

@keyframes fanki-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- Product card (shared by shop, home, blog "related" grids) ---------- */

.fanki-product-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
	overflow: hidden;
	transition: box-shadow var(--fanki-transition-base);
}

.fanki-product-card:hover {
	box-shadow: var(--fanki-shadow-md);
}

.fanki-product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--fanki-color-surface);
}

.fanki-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Cursor-scrub gallery (woocommerce/content-product.php,
   assets/js/product-gallery-hover.js): one invisible flex-strip per gallery
   image, laid over the real <img>, inside the same <a> so a tap still
   navigates. z-index:1 keeps it above the photo; .fanki-product-card__badges/
   __actions get an explicit z-index below so the sale badge and quick-view/
   wishlist icons stay reachable on top of it, not the other way round. */

.fanki-product-card__hover-gallery {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
}

.fanki-product-card__hover-slide {
	flex: 1;
}

.fanki-product-card__dots {
	position: absolute;
	bottom: var(--fanki-space-2);
	left: var(--fanki-space-3);
	right: var(--fanki-space-3);
	z-index: 2;
	display: flex;
	gap: var(--fanki-space-1);
	opacity: 0;
	transition: opacity var(--fanki-transition-fast);
}

.fanki-product-card:hover .fanki-product-card__dots {
	opacity: 1;
}

.fanki-product-card__dot {
	flex: 1;
	height: 3px;
	border-radius: var(--fanki-radius-full);
	background: var(--fanki-overlay-light-strong);
	transition: background-color var(--fanki-transition-fast);
}

.fanki-product-card__dot.is-active {
	background: var(--fanki-color-text-inverse);
}

/* Hover has no meaning on touch — hide the scrub layer/dots below desktop
   rather than leave inert invisible strips sitting over the image. */
@media (max-width: 1024px) {
	.fanki-product-card__hover-gallery,
	.fanki-product-card__dots {
		display: none;
	}
}

.fanki-product-card__badges {
	position: absolute;
	top: var(--fanki-space-3);
	left: var(--fanki-space-3);
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--fanki-space-1);
}

/* Add to Cart and the Order Now "buy now" button (woocommerce/content-
   product.php) sit side by side in the card body, right after the price —
   not absolutely positioned over the media/photo area. Each .fanki-btn
   inside gets flex:1 so the two share the row evenly regardless of label
   length. The quick-view modal's own add-to-cart button
   (inc/woocommerce/wc-quick-view.php) reuses the same
   woocommerce_template_loop_add_to_cart() output — and therefore the same
   fanki_loop_add_to_cart_args() class-adding filter
   (inc/woocommerce/wc-hooks.php) — but lays out inline in
   .fanki-quick-view__actions, unaffected by this rule since it isn't
   wrapped in .fanki-product-card__cart-row there. */

.fanki-product-card__cart-row {
	display: flex;
	gap: var(--fanki-space-2);
	/* margin-top:auto pins this row to the bottom of .fanki-product-card__
	   body once it's grown to fill the card's stretched height (see the
	   flex:1 above) — so every card's buttons align across a row
	   regardless of title length. padding-top (not margin-top) supplies
	   the always-present minimum gap above it: an auto margin resolves to
	   0 in the "this card IS the tallest in its row" case, so a fixed
	   margin here would have silently lost its own breathing room in
	   exactly that case; padding isn't part of that free-space
	   distribution, so it's unconditionally preserved either way. */
	margin-top: auto;
	padding-top: var(--fanki-space-2);
}

.fanki-product-card__cart-row .fanki-btn {
	flex: 1;
}

.fanki-product-card__actions {
	position: absolute;
	top: var(--fanki-space-3);
	right: var(--fanki-space-3);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: var(--fanki-space-2);
	opacity: 0;
	transition: opacity var(--fanki-transition-fast);
}

.fanki-product-card:hover .fanki-product-card__actions,
.fanki-product-card__actions:focus-within {
	opacity: 1;
}

.fanki-quick-view-btn,
.fanki-wishlist-btn:not(.fanki-wishlist-btn--labeled) {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fanki-color-bg);
	color: var(--fanki-color-text);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-full);
	box-shadow: var(--fanki-shadow-sm);
	transition: border-color var(--fanki-transition-fast), color var(--fanki-transition-fast);
}

.fanki-quick-view-btn:hover,
.fanki-wishlist-btn:not(.fanki-wishlist-btn--labeled):not(.fanki-wishlist-btn--active):hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

.fanki-wishlist-btn--active {
	color: var(--fanki-color-danger);
	border-color: var(--fanki-color-danger-light);
}

.fanki-wishlist-btn--active:hover {
	border-color: var(--fanki-color-danger);
}

@media (hover: none) {
	.fanki-product-card__actions {
		opacity: 1;
	}
}

.fanki-wishlist-btn--labeled {
	display: inline-flex;
	align-items: center;
	gap: var(--fanki-space-2);
}

.fanki-wishlist-btn--labeled.fanki-wishlist-btn--active {
	border-color: var(--fanki-color-danger);
	color: var(--fanki-color-danger);
}

.fanki-product-card__body {
	padding: var(--fanki-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--fanki-space-1);
	/* Fills the card's full stretched height (ul.products/.fanki-product-
	   slider both default to align-items:stretch, so every card in a row
	   already matches the tallest one) — without this, a longer title
	   just made THIS card's own content taller instead of the button row
	   staying pinned to a shared bottom edge across the row. */
	flex: 1;
}

.fanki-product-card__title {
	/* Decoupled from --fanki-font-size-sm on 2026-08-30 — its own
	   dedicated --fanki-product-card-title-size token (Fanki: Branding >
	   Typography > Product Card Title Size), same 13px default. */
	font-size: var(--fanki-product-card-title-size);
	font-weight: var(--fanki-font-weight-medium);
}

.fanki-price {
	font-weight: var(--fanki-font-weight-semibold);
}

.fanki-price--current {
	color: var(--fanki-color-text);
}

.fanki-price--was {
	color: var(--fanki-color-text-subtle);
	text-decoration: line-through;
	font-weight: var(--fanki-font-weight-regular);
	margin-right: var(--fanki-space-2);
}

/* WooCommerce's real get_price_html() output (<del>/<ins>) inside .fanki-price,
   styled the same as the .fanki-price--was/--current pair above. */

.fanki-price del {
	color: var(--fanki-color-text-subtle);
	text-decoration: line-through;
	font-weight: var(--fanki-font-weight-regular);
	margin-right: var(--fanki-space-2);
}

.fanki-price ins {
	color: var(--fanki-color-text);
	text-decoration: none;
}

.fanki-rating {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-1);
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
}

/* WooCommerce's real star-rating widget (single-product summary + reviews).
   Reproduces WC's own width%-overlay technique with plain unicode stars
   instead of an icon font, now that WooCommerce's default stylesheet
   (which normally supplies this) is disabled — see inc/woocommerce/wc-hooks.php. */

.star-rating {
	position: relative;
	display: inline-block;
	overflow: hidden;
	width: 5.4em;
	font-size: var(--fanki-font-size-sm);
	line-height: 1;
	letter-spacing: 0.2em;
}

.star-rating::before {
	content: '☆☆☆☆☆';
	display: block;
	color: var(--fanki-color-border);
}

.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
}

.star-rating span::before {
	content: '★★★★★';
	display: block;
	color: var(--fanki-color-warning);
}

/* ---------- Product grid ---------- */
/* Shared grid container for .fanki-product-card collections: home featured
   products, single-product "related", cart cross-sell. The shop archive
   grid is its own .fanki-shop-grid (shop.css) since it sits inside a
   filters layout and defaults to 3 columns instead of 4. */

.fanki-product-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--fanki-space-5);
}

@media (max-width: 1024px) {
	.fanki-product-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.fanki-product-grid {
		grid-template-columns: 1fr;
	}
}

/* WooCommerce's own product-loop wrapper (ul.products), used by the shop
   archive and the single-product related/upsell sections — reset to the
   same 4-column grid as .fanki-product-grid. archive-product.php narrows it
   to 3 columns via .fanki-shop-layout ul.products in shop.css. */

ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--fanki-space-5);
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1024px) {
	ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	ul.products {
		grid-template-columns: 1fr;
	}
}

/* ---------- Post card / Post grid (shared by blog index/archives — index.php,
   archive.php — single-post related posts, and the homepage Sections
   repeater's "Blog Posts" section, inc/template-tags.php) ---------- */

.fanki-post-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--fanki-space-6);
}

@media (max-width: 1024px) {
	.fanki-post-grid {
		grid-template-columns: 1fr;
	}
}

/* Hover-lift + image zoom on every post card, across all its contexts
   (blog index/archives/related posts/homepage section/Blog page) —
   matches the same lift/press motion language already used on
   .fanki-btn/.fanki-product-card elsewhere in this theme. */
.fanki-post-grid > article {
	transition: transform var(--fanki-transition-fast);
}

.fanki-post-grid > article:hover {
	transform: translateY(-4px);
}

.fanki-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--fanki-radius-md);
	overflow: hidden;
	background: var(--fanki-color-surface);
	margin-bottom: var(--fanki-space-3);
	transition: box-shadow var(--fanki-transition-fast);
}

.fanki-post-grid > article:hover .fanki-post-card__media {
	box-shadow: var(--fanki-shadow-md);
}

.fanki-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--fanki-transition-base);
}

.fanki-post-grid > article:hover .fanki-post-card__media img {
	transform: scale(1.05);
}

.fanki-post-card__meta {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-3);
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
	margin-bottom: var(--fanki-space-2);
}

.fanki-post-card__meta--center {
	justify-content: center;
}

.fanki-post-card__title {
	font-size: var(--fanki-font-size-lg);
	margin-bottom: var(--fanki-space-2);
}

.fanki-post-card__excerpt {
	color: var(--fanki-color-text-muted);
	font-size: var(--fanki-font-size-sm);
}

.fanki-post-card__read-more {
	margin-top: var(--fanki-space-3);
}