/* Fanki — single product page. Depends on tokens.css + base.css. */

/* align-items: start (not the grid default "stretch") — several summary
   fields are blank-by-default (trust row, WhatsApp button, size guide), so
   a product whose gallery/summary content lengths differ would otherwise
   have the shorter column force-stretched into a visible empty block.
   No padding-bottom here: .woocommerce-tabs/.fanki-tabs below already adds
   its own margin-top immediately after this element with nothing in
   between, so a second gap here would just double-stack the same space. */
.fanki-product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: var(--fanki-space-8);
}

/* Gallery */

.fanki-gallery__main {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--fanki-radius-md);
	overflow: hidden;
	background: var(--fanki-color-surface);
	margin-bottom: var(--fanki-space-3);
}

.fanki-gallery__main.is-video {
	aspect-ratio: 16 / 9;
}

.fanki-gallery__main-media {
	width: 100%;
	height: 100%;
}

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

.fanki-gallery__zoom-btn {
	position: absolute;
	right: var(--fanki-space-3);
	bottom: var(--fanki-space-3);
	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);
}

/* Same size/border/shadow as .fanki-quick-view-btn (base.css) — mirrors its
   hover treatment too, missed when that pass added hover states to every
   other free-floating icon button (2026-08-19 button-style chronology audit). */
.fanki-gallery__zoom-btn:hover {
	border-color: var(--fanki-color-primary);
	color: var(--fanki-color-primary);
}

.fanki-gallery__main.is-video .fanki-gallery__zoom-btn {
	display: none;
}

/* Product video embed (WordPress core's own wp_oembed_get() output, or a
   native <video> fallback for a direct file URL) — sized to fill
   .fanki-gallery__main-media exactly like the product images do. */

.fanki-gallery__video-wrap,
.fanki-gallery__video-wrap iframe,
.fanki-gallery__video {
	width: 100%;
	height: 100%;
}

/* flex-wrap, not a 5-column grid — a rigid repeat(5, 1fr) reserved 5 equal
   slots regardless of actual image count, leaving 1-3 empty trailing
   cells for the common case of a 2-4 image gallery. Fixed-width thumbs
   that wrap keep every thumbnail the same size and just stop where the
   images stop, whatever the count. */
.fanki-gallery__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fanki-space-2);
}

.fanki-gallery__thumb {
	position: relative;
	width: 72px;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	border-radius: var(--fanki-radius-sm);
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--fanki-color-surface);
}

.fanki-gallery__thumb--active {
	border-color: var(--fanki-color-primary);
}

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

.fanki-gallery__thumb-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fanki-overlay-dark-subtle);
	color: var(--fanki-color-text-inverse);
}

/* Summary */

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

.fanki-product-summary__title {
	font-size: var(--fanki-font-size-2xl);
	margin-block: var(--fanki-space-2);
}

.fanki-product-summary__meta {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-4);
	margin-bottom: var(--fanki-space-4);
	font-size: var(--fanki-font-size-sm);
}

.fanki-product-summary__meta a {
	color: var(--fanki-color-primary);
}

.fanki-product-summary__price {
	display: flex;
	align-items: baseline;
	gap: var(--fanki-space-3);
	font-size: var(--fanki-font-size-xl);
	margin-bottom: var(--fanki-space-4);
}

.fanki-product-summary__excerpt {
	color: var(--fanki-color-text-muted);
	margin-bottom: var(--fanki-space-5);
}

.fanki-option-group {
	margin-bottom: var(--fanki-space-5);
}

.fanki-option-group__label {
	display: flex;
	justify-content: space-between;
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	margin-bottom: var(--fanki-space-2);
}

.fanki-option-group__label .fanki-option-group__value {
	color: var(--fanki-color-text-muted);
	font-weight: var(--fanki-font-weight-regular);
}

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

.fanki-swatch {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--fanki-color-border);
	padding: 0;
	cursor: pointer;
}

.fanki-swatch--lg {
	width: 36px;
	height: 36px;
}

.fanki-swatch--selected {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 2px;
}

/* Real WooCommerce variation attributes, progressively enhanced from the
   native <select> markup into the swatch/pill buttons above — see
   assets/js/variation-swatches.js. The <select> itself stays in the DOM
   (WooCommerce's own variation-matching JS still drives price/availability
   off it) but visually hidden via .fanki-visually-hidden (base.css).
   WooCommerce's own <table class="variations"> (role="presentation" — it's
   layout only, not real tabular data) had zero theme styling before this:
   bare browser table box model, a default-blue-underline "Clear" link, no
   visual relationship between the attribute label and its options.
   Flattened out of table display entirely; the label and its options sit
   on ONE row (th.label + td.value as flex items of tr, not stacked full-
   width blocks), wrapping onto a second line only if the row is too
   narrow to fit everything. */

.fanki-product-summary .variations,
.fanki-product-summary .variations tbody {
	display: block;
	width: 100%;
}

.fanki-product-summary .variations tr {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--fanki-space-3);
	padding: 0;
	border: 0;
}

.fanki-product-summary .variations tr + tr {
	margin-top: var(--fanki-space-4);
}

.fanki-product-summary .variations th.label {
	flex-shrink: 0;
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	padding: 0;
	border: 0;
}

.fanki-product-summary .variations td.value {
	display: flex;
	align-items: center;
	flex: 1;
	flex-wrap: wrap;
	gap: var(--fanki-space-2);
	padding: 0;
	border: 0;
}

.fanki-product-summary .reset_variations {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-muted);
	text-decoration: underline;
}

.fanki-product-summary .reset_variations:hover {
	color: var(--fanki-color-primary);
}

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

/* Tied to the site's actual button theme (--fanki-button-radius, so Corner
   Style — Sharp/Rounded/Pill — matches instead of a hardcoded radius; the
   primary color for hover/selected) but deliberately not styled as a real
   .fanki-btn: this is a size CHIP, not an action — a solid Button-Style
   fill here would compete visually with the real Add to Cart button right
   below it, and it needs its own small/square shape regardless of
   whichever Button Style preset (outline, ghost, 3D, etc.) is active. */
.fanki-size-option {
	min-width: 44px;
	height: 44px;
	padding-inline: var(--fanki-space-3);
	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-button-radius);
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	transition: background-color var(--fanki-transition-fast), border-color var(--fanki-transition-fast), color var(--fanki-transition-fast);
}

.fanki-size-option:hover:not(.fanki-size-option--selected) {
	border-color: var(--fanki-color-primary);
	background: var(--fanki-color-primary-light);
	color: var(--fanki-color-primary);
}

.fanki-size-option--selected {
	border-color: var(--fanki-color-primary);
	background: var(--fanki-color-primary);
	color: var(--fanki-color-primary-contrast);
}

.fanki-add-to-cart-row {
	display: flex;
	align-items: stretch;
	gap: var(--fanki-space-3);
	margin-bottom: var(--fanki-space-5);
}

/* .fanki-qty-stepper / WooCommerce's real .quantity live in base.css
   (shared with the cart page's line-item quantity inputs) */

.fanki-add-to-cart-row .fanki-btn--primary {
	flex: 1;
}

/* form.cart is WooCommerce's real single-product add-to-cart wrapper
   (single-product/add-to-cart/simple.php, unmodified) — for a SIMPLE
   product, its two children, the quantity stepper and the submit button,
   were only ever sitting side by side because both default to inline-level
   boxes, with no real gap between them. Mirrors .fanki-add-to-cart-row
   above (the static design reference's version of this exact row) but
   without its margin-bottom — the wishlist/WhatsApp buttons right after
   this already carry their own margin-top, and adding both would
   double-stack the gap between them.
   :not(.variations_form) matters — a VARIABLE product's add-to-cart form
   carries BOTH "cart" and "variations_form" classes and wraps the entire
   Size/Color <table class="variations"> block AND .single_variation_wrap
   (which contains the real quantity+submit row) as ITS direct children.
   Without this exclusion, this rule turned THOSE into a flex row instead —
   putting the size table and the quantity+cart row side by side instead of
   stacked as separate lines. Variable products already had their own
   correct rule for the actual quantity+button pairing, further down
   (.woocommerce-variation-add-to-cart) — nested two levels deeper than
   form.cart's own direct children, so this rule was never meant to reach
   it in the first place. */
.fanki-product-summary form.cart:not(.variations_form) {
	display: flex;
	align-items: stretch;
	gap: var(--fanki-space-3);
}

.fanki-product-summary form.cart:not(.variations_form) .single_add_to_cart_button {
	flex: 1;
}

/* WooCommerce's own single-product Add to Cart button — every product
   type's template (simple.php, variation-add-to-cart-button.php,
   grouped.php, external.php) emits the exact same "single_add_to_cart_
   button button alt" class string, with no fanki-btn/fanki-btn--primary
   anywhere and no filter hook available to add one (unlike the shop-loop
   card's Add to Cart button, which gets real fanki-btn fanki-btn--primary
   classes via fanki_loop_add_to_cart_args(), inc/woocommerce/wc-hooks.php).
   Left to base.css's generic .button:not(.fanki-btn) fallback, this button
   was completely disconnected from the Button Style preset / Advanced
   Styling system every other primary button in the theme responds to.
   Restated the same --fanki-btn-primary-* custom properties here — rather
   than editing .fanki-btn--primary's own selector list in base.css —
   specifically so this loads AFTER, and therefore correctly wins over,
   base.css's LATER .button:not(.fanki-btn):hover rule at the same tied
   specificity (0,3,0 either way): the same class of cross-file specificity
   bug already fixed for other buttons earlier this session. */
.fanki-product-summary .single_add_to_cart_button {
	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);
	/* Routed through the same --fanki-button-font-size token as every
	   other button site-wide (Fanki: Branding > Typography > Button Text
	   Size, 2026-08-30) — used to be its own explicit --fanki-font-size-
	   base override so this read the same 16px as "Proceed to Checkout"/
	   "Place Order"; now unified under one control instead. */
	font-size: var(--fanki-button-font-size);
	/* Same reasoning, found in the 2026-08-19 button-style chronology
	   audit: the fallback's padding (space-2/space-4) is .fanki-btn--sm's
	   box size — with the font bumped to base above but the box left small,
	   this was a bigger font crammed into a smaller box than any real
	   .fanki-btn size tier produces. Restated .fanki-btn--lg's own padding
	   here to match Proceed to Checkout/Place Order's actual proportions,
	   not just their font-size. */
	padding: var(--fanki-space-4) var(--fanki-space-7);
}

.fanki-product-summary .single_add_to_cart_button: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-product-summary .single_add_to_cart_button:active:not(:disabled):not(.disabled):not(.loading) {
	box-shadow: var(--fanki-btn-primary-shadow-active);
}

.fanki-product-summary__trust {
	display: flex;
	flex-direction: column;
	gap: var(--fanki-space-3);
	border-top: 1px solid var(--fanki-color-border);
	padding-top: var(--fanki-space-5);
}

/* .fanki-trust-row lives in base.css (shared with the checkout header badge) */

/* Native WooCommerce summary output (title/rating/price/excerpt/variations),
   re-skinned in place instead of overriding each template. */

.fanki-product-summary .product_title {
	font-size: var(--fanki-font-size-2xl);
	margin-block: var(--fanki-space-2);
}

/* .fanki-badge itself carries no margin — it's reused for product-card sale/
   stock ribbons and the inline "Save X%" badge next to the price, contexts
   where a margin would be wrong. Scoped here to the single-product stock
   badge specifically (fanki_single_product_stock_badge(), inc/woocommerce/
   wc-hooks.php), which sits between the title and the rating below it and,
   without this, had zero breathing room while every sibling here does. */
.fanki-product-summary .fanki-badge {
	margin-bottom: var(--fanki-space-4);
}

.fanki-product-summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-4);
	margin-bottom: var(--fanki-space-4);
	font-size: var(--fanki-font-size-sm);
}

.fanki-product-summary .woocommerce-review-link {
	color: var(--fanki-color-primary);
}

.fanki-product-summary .price {
	display: flex;
	align-items: baseline;
	gap: var(--fanki-space-3);
	font-size: var(--fanki-font-size-xl);
	margin-bottom: var(--fanki-space-4);
}

.fanki-product-summary .price del {
	color: var(--fanki-color-text-subtle);
	text-decoration: line-through;
	font-weight: var(--fanki-font-weight-regular);
}

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

.fanki-product-summary .woocommerce-product-details__short-description {
	color: var(--fanki-color-text-muted);
	margin-bottom: var(--fanki-space-5);
}

/* Short description is real post content (woocommerce_short_description()),
   so it can genuinely contain a link — same "invisible against surrounding
   text" gap as .fanki-post-content a (base.css), same fix. */
.fanki-product-summary .woocommerce-product-details__short-description a {
	color: var(--fanki-color-primary);
	text-decoration: underline;
}

.fanki-product-summary .woocommerce-product-details__short-description a:hover {
	color: var(--fanki-color-primary-dark);
}

.fanki-product-summary .variations,
.fanki-product-summary .single_variation_wrap {
	margin-bottom: var(--fanki-space-5);
}

.fanki-product-summary .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: stretch;
	gap: var(--fanki-space-3);
}

.fanki-product-summary .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	flex: 1;
}

/* product_meta (SKU/Category/Tags — WooCommerce's real single-product/
   meta.php, unmodified) had no theme CSS at all: no spacing from the
   wishlist/WhatsApp row above it, and full-strength body text/color for
   what should read as quiet secondary info. The trust row right after it
   (.fanki-product-summary__trust below) already supplies its own
   border-top, so this only adds top spacing, not a second divider. */
.fanki-product-summary .product_meta {
	margin-top: var(--fanki-space-4);
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text-muted);
}

.fanki-product-summary .product_meta a {
	color: var(--fanki-color-primary);
}

/* Tabs — .fanki-tabs is the static design-reference's markup; .woocommerce-tabs
   is WooCommerce's real default tabs.php wrapper, used unmodified so the
   description/attributes/reviews dispatch logic stays exactly as WooCommerce
   ships it (only re-skinned here to match the same spacing/typography). */

.fanki-tabs,
.woocommerce-tabs {
	margin-top: var(--fanki-space-9);
}

.woocommerce-tabs ul.tabs {
	display: flex;
	gap: var(--fanki-space-6);
	border-bottom: 1px solid var(--fanki-color-border);
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.woocommerce-tabs ul.tabs li {
	padding-block: var(--fanki-space-3);
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	color: var(--fanki-color-text-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.woocommerce-tabs ul.tabs li.active {
	color: var(--fanki-color-text);
	border-bottom-color: var(--fanki-color-primary);
}

.woocommerce-tabs ul.tabs li a {
	color: inherit;
}

.woocommerce-tabs .woocommerce-Tabs-panel {
	padding-block: var(--fanki-space-6);
	max-width: 70ch;
	color: var(--fanki-color-text-muted);
}

/* The Description tab is the product's own real post_content, so it can
   genuinely contain a link — same fix as .fanki-post-content a (base.css).
   Scoped to the whole panel (not just #tab-description) since Additional
   Information's attribute values could theoretically carry one too. */
.woocommerce-tabs .woocommerce-Tabs-panel a {
	color: var(--fanki-color-primary);
	text-decoration: underline;
}

.woocommerce-tabs .woocommerce-Tabs-panel a:hover {
	color: var(--fanki-color-primary-dark);
}

.woocommerce-tabs .woocommerce-product-attributes {
	width: 100%;
	border-collapse: collapse;
	max-width: 640px;
}

.woocommerce-tabs .woocommerce-product-attributes th,
.woocommerce-tabs .woocommerce-product-attributes td {
	text-align: left;
	padding: var(--fanki-space-3);
	border-bottom: 1px solid var(--fanki-color-border);
	font-size: var(--fanki-font-size-sm);
}

.woocommerce-tabs .woocommerce-product-attributes th {
	width: 220px;
	color: var(--fanki-color-text-muted);
	font-weight: var(--fanki-font-weight-medium);
}

.fanki-tabs__list {
	display: flex;
	gap: var(--fanki-space-6);
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-tabs__tab {
	padding-block: var(--fanki-space-3);
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	color: var(--fanki-color-text-muted);
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.fanki-tabs__tab--active {
	color: var(--fanki-color-text);
	border-bottom-color: var(--fanki-color-primary);
}

.fanki-tabs__panel {
	padding-block: var(--fanki-space-6);
	max-width: 70ch;
	color: var(--fanki-color-text-muted);
}

.fanki-tabs__panel + .fanki-tabs__panel {
	border-top: 1px solid var(--fanki-color-border);
}

.fanki-tabs__panel-title {
	font-size: var(--fanki-font-size-md);
	color: var(--fanki-color-text);
	margin-bottom: var(--fanki-space-3);
}

.fanki-spec-table {
	width: 100%;
	border-collapse: collapse;
	max-width: 640px;
}

.fanki-spec-table th,
.fanki-spec-table td {
	text-align: left;
	padding: var(--fanki-space-3);
	border-bottom: 1px solid var(--fanki-color-border);
	font-size: var(--fanki-font-size-sm);
}

.fanki-spec-table th {
	width: 220px;
	color: var(--fanki-color-text-muted);
	font-weight: var(--fanki-font-weight-medium);
}

.fanki-review {
	display: flex;
	gap: var(--fanki-space-4);
	padding-block: var(--fanki-space-5);
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-review__avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--fanki-radius-full);
	flex-shrink: 0;
	object-fit: cover;
}

.fanki-review__author {
	font-weight: var(--fanki-font-weight-semibold);
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text);
}

.fanki-review__date {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-subtle);
}

.fanki-review__body {
	color: var(--fanki-color-text-muted);
	margin-top: var(--fanki-space-2);
}

/* Real WooCommerce reviews (#reviews tab) — templates/single-product/tabs/
   reviews.php + review.php, unmodified, re-skinned here in place same as
   everything else in this file. .fanki-review* above is the static design-
   reference's own hand-authored markup (assets/design-reference/product.html
   links this same stylesheet directly, so those rules stay for that page);
   these target what WooCommerce's real templates actually output live. */

.woocommerce-Reviews-title {
	font-size: var(--fanki-font-size-md);
	margin-bottom: var(--fanki-space-3);
}

.commentlist {
	list-style: none;
	margin: 0 0 var(--fanki-space-2);
	padding: 0;
}

.commentlist .comment_container {
	display: flex;
	gap: var(--fanki-space-4);
	padding-block: var(--fanki-space-5);
	border-bottom: 1px solid var(--fanki-color-border);
}

.commentlist .comment_container img.avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--fanki-radius-full);
	flex-shrink: 0;
}

.commentlist .comment-text {
	flex: 1;
	min-width: 0;
}

.commentlist .comment-text > p:last-child {
	margin-bottom: 0;
}

.commentlist .meta {
	margin: 0;
	font-size: var(--fanki-font-size-sm);
}

.commentlist .woocommerce-review__author {
	font-weight: var(--fanki-font-weight-semibold);
	color: var(--fanki-color-text);
}

.commentlist .woocommerce-review__dash {
	color: var(--fanki-color-text-subtle);
	margin-inline: var(--fanki-space-1);
}

.commentlist .woocommerce-review__published-date {
	font-size: var(--fanki-font-size-xs);
	color: var(--fanki-color-text-subtle);
}

.commentlist .woocommerce-review__verified {
	display: block;
	font-size: var(--fanki-font-size-xs);
	font-style: normal;
	color: var(--fanki-color-success);
	margin-bottom: var(--fanki-space-1);
}

.commentlist .star-rating {
	margin-block: var(--fanki-space-2);
}

/* Review form (#respond, comment_form()'s default output — WooCommerce's
   reviews.php calls it with only text-content overrides, no custom markup
   or field classes, so every selector below targets WP core's own default
   IDs/classes). The rating field is NOT a <select> — WooCommerce's real
   markup is a <p class="stars"><span role="group"><a class="star-1">1 of 5
   stars</a>...</span></p> accessible radiogroup widget (click/keyboard
   handled by WooCommerce's own core script, unaffected by this theme —
   only .woocommerce_enqueue_styles is filtered empty, not scripts). */

#review_form_wrapper {
	margin-top: var(--fanki-space-6);
	padding-top: var(--fanki-space-6);
	border-top: 1px solid var(--fanki-color-border);
}

#review_form #reply-title {
	font-size: var(--fanki-font-size-md);
	margin-bottom: var(--fanki-space-4);
}

.comment-form-rating,
.comment-form-comment,
.comment-form-author,
.comment-form-email {
	margin-bottom: var(--fanki-space-4);
}

.comment-form-rating label,
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label {
	display: block;
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	margin-bottom: var(--fanki-space-2);
}

#comment,
#author,
#email {
	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);
}

#comment:focus,
#author:focus,
#email:focus {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 1px;
	border-color: var(--fanki-color-primary);
}

#comment {
	resize: vertical;
	min-height: 120px;
}

/* Star-rating picker widget (see the docblock above this section for the
   real markup shape). Text stays in the DOM for screen readers/keyboard
   nav (WooCommerce's own script drives role="radio"/aria-checked/tabindex
   already) — text-indent shoves it off-screen instead of display:none,
   which would strip it from the accessibility tree. Fill logic uses :has()
   to cumulative-fill preceding stars up to whichever is hovered/.active,
   without needing the classic reversed-flex-direction sibling-combinator
   trick — this theme already targets evergreen browsers only elsewhere. */

.comment-form-rating .stars span[role="group"] {
	display: flex;
	gap: var(--fanki-space-1);
}

.comment-form-rating .stars a {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	overflow: hidden;
	text-indent: -999em;
	color: var(--fanki-color-border);
}

.comment-form-rating .stars a::before {
	content: '★';
	position: absolute;
	inset: 0;
	text-indent: 0;
	font-size: var(--fanki-font-size-md);
	line-height: 24px;
	text-align: center;
}

.comment-form-rating .stars a:focus-visible {
	outline: 2px solid var(--fanki-color-primary);
	outline-offset: 2px;
}

/* Committed rating (.active, WooCommerce's own class for the selected
   star) — only shown while nothing in the group is being hovered, so a
   hover preview (below) can cleanly take over instead of both states
   showing filled stars at once. */
.comment-form-rating .stars span[role="group"]:not(:hover) a.active,
.comment-form-rating .stars span[role="group"]:not(:hover) a:has(~ a.active) {
	color: var(--fanki-color-warning);
}

/* Hover preview — fills this star and every star before it in DOM order. */
.comment-form-rating .stars span[role="group"]:hover a:hover,
.comment-form-rating .stars span[role="group"]:hover a:has(~ a:hover) {
	color: var(--fanki-color-warning);
}

#review_form .form-submit {
	margin: 0;
}

/* Related products — .fanki-related is the static design-reference's
   markup; .related.products/.upsells.products are WooCommerce's real
   related.php/up-sells.php wrappers (grid via the shared ul.products rules
   in base.css), used unmodified and only re-skinned here. */

.fanki-related,
.related.products,
.upsells.products {
	margin-top: var(--fanki-space-9);
}

.related.products > h2,
.upsells.products > h2 {
	font-size: var(--fanki-font-size-2xl);
	margin-bottom: var(--fanki-space-5);
}

/* Scoped override of base.css's ul.products (repeat(4, 1fr)) — that fixed
   4-column grid is fine for the shop archive, which is nearly always
   fully populated, but WooCommerce's related/upsell query commonly
   returns fewer than 4 products, leaving empty trailing grid cells at
   the end of the row. auto-fit collapses unused tracks so 1-3 cards
   simply take up the row at their natural width instead. Selector is
   scoped to .related.products/.upsells.products specifically so the
   shop archive's own grid is untouched. */
.related.products ul.products,
.upsells.products ul.products {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

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

@media (max-width: 768px) {
	.fanki-tabs__list,
	.woocommerce-tabs ul.tabs {
		gap: var(--fanki-space-4);
		overflow-x: auto;
	}
}

/* ---------- Urgency indicators (low stock, sale countdown) ---------- */

.fanki-urgency {
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	margin: 0 0 var(--fanki-space-3);
}

.fanki-urgency--stock {
	color: var(--fanki-color-warning);
}

.fanki-urgency--countdown {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
	color: var(--fanki-color-danger);
}

.fanki-urgency__timer {
	font-variant-numeric: tabular-nums;
	font-weight: var(--fanki-font-weight-semibold);
}

/* ---------- Single product Wishlist + WhatsApp + Messenger row ---------- */
/* .fanki-product-actions is a real wrapper (opened/closed by
   fanki_open/close_product_actions_wrapper(), inc/woocommerce/
   wc-hooks.php) around whichever of the 3 action buttons (Wishlist,
   WhatsApp, Messenger — each independently toggleable, Fanki: Product >
   Product Action Buttons) are actually enabled/configured for this
   product — flex:1 on each present child splits the row evenly between
   however many of the three that is (1, 2, or 3), matching the
   quantity+Add to Cart row above it, which is already full-width. */

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

.fanki-product-actions > .fanki-wishlist-btn--labeled,
.fanki-product-actions > .fanki-whatsapp-btn,
.fanki-product-actions > .fanki-messenger-btn {
	flex: 1;
	margin-top: 0;
}

/* WhatsApp/Messenger use their own brand colors at rest — not just on
   hover, and not the site's primary color (.fanki-btn--outline's default)
   — so each is recognizable at a glance. On hover, each fills solid with
   its own brand color and switches to white text/icon, rather than the
   soft/no-fill hover every other outline button on the site uses.
   base.css's .fanki-btn--outline / :hover rules load first, these
   (product.css depends on fanki-base) correctly win at the same
   specificity via source order. */
.fanki-whatsapp-btn {
	border-color: var(--fanki-color-whatsapp);
	color: var(--fanki-color-whatsapp);
}

.fanki-whatsapp-btn:hover {
	background: var(--fanki-color-whatsapp);
	border-color: var(--fanki-color-whatsapp);
	color: var(--fanki-color-text-inverse);
}

.fanki-messenger-btn {
	border-color: var(--fanki-color-messenger);
	color: var(--fanki-color-messenger);
}

.fanki-messenger-btn:hover {
	background: var(--fanki-color-messenger);
	border-color: var(--fanki-color-messenger);
	color: var(--fanki-color-text-inverse);
}

/* ---------- Sticky mobile add-to-cart bar ---------- */

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

.fanki-sticky-cart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--fanki-z-header);
	background: var(--fanki-color-bg);
	border-top: 1px solid var(--fanki-color-border);
	box-shadow: var(--fanki-shadow-lg);
}

.fanki-sticky-cart__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fanki-space-4);
	padding-block: var(--fanki-space-3);
}

.fanki-sticky-cart__info {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-3);
	min-width: 0;
}

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

.fanki-sticky-cart__title {
	font-size: var(--fanki-font-size-sm);
	font-weight: var(--fanki-font-weight-medium);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

.fanki-sticky-cart__btn {
	flex-shrink: 0;
}

@media (min-width: 769px) {
	.fanki-sticky-cart {
		display: none !important;
	}
}

/* ---------- Gallery lightbox ---------- */

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

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

.fanki-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: var(--fanki-overlay-dark-strong);
}

.fanki-lightbox__figure {
	position: relative;
	max-width: min(90vw, 1000px);
	max-height: 85vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--fanki-space-3);
}

.fanki-lightbox__image {
	max-width: 100%;
	max-height: 75vh;
	object-fit: contain;
	border-radius: var(--fanki-radius-md);
}

.fanki-lightbox__counter {
	color: var(--fanki-color-text-inverse);
	font-size: var(--fanki-font-size-sm);
	opacity: 0.8;
}

.fanki-lightbox__close {
	position: absolute;
	top: var(--fanki-space-5);
	right: var(--fanki-space-5);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fanki-overlay-light-subtle);
	border: 0;
	border-radius: var(--fanki-radius-full);
	color: var(--fanki-color-text-inverse);
	z-index: 1;
	transition: background-color var(--fanki-transition-fast);
}

.fanki-lightbox__nav {
	position: relative;
	z-index: 1;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--fanki-overlay-light-subtle);
	border: 0;
	border-radius: var(--fanki-radius-full);
	color: var(--fanki-color-text-inverse);
	margin-inline: var(--fanki-space-4);
	transition: background-color var(--fanki-transition-fast);
}

/* Same glass-on-photo treatment as .fanki-hero-slider__arrow/__playpause
   (home.css) — missed here originally (2026-08-19 button-style chronology
   audit). */
.fanki-lightbox__close:hover,
.fanki-lightbox__nav:hover {
	background: var(--fanki-overlay-light-medium);
}

body.fanki-lightbox-open {
	overflow: hidden;
}

/* ---------- Size guide ---------- */
/* Shown directly in the page, collapsed by default (fanki_size_guide_
   section(), inc/woocommerce/wc-size-guide.php) rather than behind a
   button that opens a separate modal — removed at the user's request.
   $fanki_content is arbitrary admin-pasted HTML (Fanki: Product > Size
   Guide), typically a table but not guaranteed to be, hence the generic
   table/th/td/p defaults below rather than assuming one specific shape. */

.fanki-size-guide {
	margin-bottom: var(--fanki-space-5);
	padding: var(--fanki-space-4);
	background: var(--fanki-color-surface);
	border: 1px solid var(--fanki-color-border);
	border-radius: var(--fanki-radius-md);
}

.fanki-size-guide__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.fanki-size-guide__title {
	display: flex;
	align-items: center;
	gap: var(--fanki-space-2);
	font-size: var(--fanki-font-size-xs);
	font-weight: var(--fanki-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: var(--fanki-letter-spacing-wide);
	color: var(--fanki-color-text-muted);
}

.fanki-size-guide__title::before {
	content: '';
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='10' rx='1.5'/%3E%3Cpath d='M6 7v3M10 7v3M14 7v3M18 7v3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='10' rx='1.5'/%3E%3Cpath d='M6 7v3M10 7v3M14 7v3M18 7v3'/%3E%3C/svg%3E");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fanki-size-guide__chevron {
	flex-shrink: 0;
	color: var(--fanki-color-text-muted);
	transition: transform var(--fanki-transition-fast);
}

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

.fanki-size-guide__body {
	margin-top: var(--fanki-space-3);
	font-size: var(--fanki-font-size-sm);
	color: var(--fanki-color-text-muted);
	/* A size chart's Content field (Fanki: Product > Size Charts repeater)
	   is a plain textarea, not a rich editor — an admin just as easily
	   types one size per line as pastes a real <table>, and
	   without this, plain newlines collapse to nothing (standard HTML
	   whitespace behavior), running every line into one another. Has no
	   effect on real HTML content (tables lay out by structure, not
	   whitespace), so this is safe for either case. */
	white-space: pre-line;
}

.fanki-size-guide__body table {
	width: 100%;
	border-collapse: collapse;
}

.fanki-size-guide__body th,
.fanki-size-guide__body td {
	text-align: left;
	padding: var(--fanki-space-2) var(--fanki-space-3);
	border-bottom: 1px solid var(--fanki-color-border);
}

.fanki-size-guide__body th {
	font-weight: var(--fanki-font-weight-semibold);
	color: var(--fanki-color-text);
}

.fanki-size-guide__body tr:last-child td {
	border-bottom: 0;
}

.fanki-size-guide__body p {
	margin: 0 0 var(--fanki-space-2);
}

.fanki-size-guide__body p:last-child {
	margin-bottom: 0;
}