/*
 * gobookfair.com — ported WooCommerce / catalog / search styles.
 *
 * Brand design tokens are defined here so the values the gvbf-store plugin
 * references (e.g. --skinny--color-primary, used in the account dashboard) and
 * the catalog styling have a home independent of the old Skinny theme.
 *
 * The bespoke product-card / filter / product-page rules will be ported from the
 * old theme's SCSS partials (_woocommerce.scss, _search.scss) in the CSS pass —
 * scope/approach pending (faithful port vs. BB-native + minimal custom).
 */

:root {
	/* Brand colors — from old theme _variables.scss */
	--gvbf-color-blue: #00567c;
	--gvbf-color-green: #00853D;
	--gvbf-color-green-dark: #004d26;
	--gvbf-color-green-bright: #7bc24e;
	--gvbf-color-yellow: #f2b237;
	--gvbf-color-dark: #1d1e25;   /* Skinny color-dark-bg */
	--gvbf-color-light: #f3f3f3;  /* Skinny color-light-bg */

	/* Primary accent — green on live (sale badge, in-stock text, author hover,
	   active filter, account "YES"). Skinny's *default* was #FDBF70; the live
	   Customizer overrode it to green (confirmed by the green sale badge). */
	--gvbf-primary: var(--gvbf-color-green);
	--skinny--color-primary: var(--gvbf-primary); /* back-compat alias (plugin cart.php) */

	/* Buttons — real live values (green-on-green, NOT blue). Normal: pale-green
	   bg + dark-green text; hover: bright-green bg + dark-green text. Used by the
	   cover "Info" button; mirrors the BB Customizer Button settings. */
	--gvbf-btn-bg: #ebf6e5;
	--gvbf-btn-text: #004d26;            /* = --gvbf-color-green-dark */
	--gvbf-btn-hover-bg: #7bc24e;        /* = --gvbf-color-green-bright */
	--gvbf-btn-hover-text: #004d26;

	/* Fonts — the live site uses Ainslie Sans for BOTH body and headings (the old
	   theme overrode Skinny's DM Sans/DM Serif to Ainslie). The Adobe kit defines
	   the family as "ainslie-sans" (lowercase) — this MUST match the kit and the BB
	   font registration in functions.php. These tokens style the custom non-heading
	   elements (e.g. the author line) to match; BB applies the font globally via the
	   Customizer typography setting. Falls back to sans-serif until the kit loads
	   (kit id + allowed-domains note in functions.php). */
	--gvbf-font-body: "ainslie-sans", sans-serif;
	--gvbf-font-heading: "ainslie-sans", sans-serif;

	/* Type scale — real Skinny values (px sizes + unitless line-heights) */
	--gvbf-type-label: 14px;        --gvbf-type-label-lh: 1.4;
	--gvbf-type-body: 18px;         --gvbf-type-body-lh: 1.8;
	--gvbf-type-xl: 22px;           --gvbf-type-xl-lh: 1.7;
	--gvbf-type-xxl: 26px;          --gvbf-type-xxl-lh: 1.7;
	--gvbf-heading-small: 14px;     --gvbf-heading-small-lh: 1.3;
	--gvbf-heading-medium: 24px;    --gvbf-heading-medium-lh: 1.17;
	--gvbf-heading-large: 25px;     --gvbf-heading-large-lh: 1.36;
	--gvbf-heading-xl: 54px;        --gvbf-heading-xl-lh: 1.38;

	--gvbf-border-width: 2px;

	/* Content-photo corner radius (matches the 14px buttons); products stay square. */
	--gvbf-photo-radius: 14px;
}

/* TODO (CSS pass): port from old theme —
 * - product cards: .author, .msrp/.msrp-label, .info/.info-wrap, .in-store-only
 * - product page: .product-subtitle/.subtitle, .genre_is, stock ".more" message,
 *   .tagged_as, .sku_wrapper
 * - filters: .woocommerce-filter, .filter-wrap, .filter-toggle, .checkboxes,
 *   .active-filter, .filter-links
 * - Algolia autocomplete: .aa-dropdown-menu, .autocomplete-header,
 *   .suggestion-link, .suggestion-post-*, .autocomplete-footer
 */

/* --- Search results: force full width (no empty sidebar gutter) ---
 * The BB theme's global page layout has a sidebar; our search template renders a
 * product grid with none, so pin the content column to full width. ID selector
 * to reliably beat the theme's .fl-content sidebar-layout width. */
#gvbf-search-content {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
}

/* --- Catalog filter row + collapsing taxonomy dropdowns ---
 * Ported from old theme _woocommerce.scss (Skinny vars swapped for our tokens).
 * Pairs with the .woocommerce-filters-wrapper added in inc/archives.php and the
 * toggle behavior in the plugin's assets/filters.js. */
.woocommerce .woocommerce-filters-wrapper {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 2rem;
}
.woocommerce .woocommerce-filters-wrapper .woocommerce-result-count,
.woocommerce .woocommerce-filters-wrapper form {
	float: none;
	margin-bottom: 0;
}
.woocommerce .woocommerce-filters-wrapper .woocommerce-result-count {
	margin-right: auto;
	flex-basis: 100%;
}
.woocommerce .woocommerce-filters-wrapper select {
	padding-right: 1.75rem;
}

.woocommerce-taxonomies-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.woocommerce-taxonomies-filter .filter-wrap {
	position: relative;
}
.woocommerce-taxonomies-filter .filter-links {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}
.woocommerce-taxonomies-filter .active-filter {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background-color: var(--gvbf-color-green);
	position: absolute;
	top: -0.25rem;
	right: -0.25rem;
	z-index: 12;
	/* TODO (CSS pass): fine-tune position over the toggle button. */
}
.woocommerce-taxonomies-filter .checkboxes {
	background: var(--surface, #fff);
	border: 1px solid #8d8d8d;
	visibility: hidden;
	padding: 0.5rem;
	position: absolute;
	width: max-content;
	min-width: 100%;
	z-index: 11;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.woocommerce-taxonomies-filter .checkboxes.open {
	visibility: visible;
}
@media (min-width: 1440px) {
	.woocommerce .woocommerce-filters-wrapper {
		justify-content: flex-end;
	}
	.woocommerce .woocommerce-filters-wrapper .woocommerce-result-count {
		flex-basis: unset;
	}
}

/* ===========================================================================
   PRODUCT GRID — responsive, up to 6 wide. ONE grid for ALL ul.products so the
   archive AND the related-products section match (ported from old theme). The
   plugin requests 6 related products; loop_shop_columns=6 sets the archive class.
   =========================================================================== */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.25rem;
	margin: 0 0 2.25rem;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none; /* remove WooCommerce's float clearfix */
}
.woocommerce ul.products li.product {
	width: auto !important;
	margin: 0;
	float: none;
}
@media (min-width: 520px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 800px) {
	.woocommerce ul.products { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1080px) {
	.woocommerce ul.products { grid-template-columns: repeat(6, 1fr); }
}

/* ===========================================================================
   PRODUCT CARDS (shop / archive loop) — CSS pass 1
   Ported from old theme _woocommerce.scss; Skinny vars → gvbf tokens, mixins
   inlined. Selectors validated against the live clone markup. The in-store-only
   badge is positioned provisionally (no in-store product was viewable to tune it).
   =========================================================================== */

.woocommerce ul.products li.product {
	position: relative;
}

/* Sale badge */
.woocommerce ul.products li.product span.onsale,
.woocommerce .product span.onsale {
	background-color: var(--gvbf-primary);
	color: #fff;
}

/* Title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: var(--gvbf-heading-medium);
	margin-bottom: 0.25rem;
	padding: 0;
}

/* Author (old design used the heading font + small size) */
.woocommerce ul.products li.product .author {
	font-family: var(--gvbf-font-heading);
	font-size: var(--gvbf-heading-small);
	line-height: 1.5;
	margin-bottom: 0.5rem;
}
.woocommerce ul.products li.product .author a {
	color: var(--text) !important;
	text-decoration: none !important;
}
.woocommerce ul.products li.product .author a:hover,
.woocommerce ul.products li.product .author a:focus {
	color: var(--gvbf-primary) !important;
}

/* Price (underlined amount) */
.woocommerce ul.products li.product .price > .amount,
.woocommerce ul.products li.product .price ins .amount {
	font-size: var(--gvbf-heading-large);
	font-weight: 700;
	border-bottom: var(--gvbf-border-width) solid currentColor;
}

/* MSRP / retail */
.woocommerce ul.products li.product .msrp {
	font-size: var(--gvbf-heading-small);
	font-style: italic;
	line-height: 1.5;
	margin-top: 0.25rem;
	margin-bottom: 0;
}
.woocommerce ul.products li.product .msrp .msrp-label {
	display: block;
	font-size: var(--gvbf-heading-small);
	font-weight: 400;
	margin-bottom: 0;
	text-transform: none;
}

/* "Info" button on the cover + hover popover */
.woocommerce ul.products li.product span.info,
.woocommerce .product span.info {
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	z-index: 9;
	margin: 0;
	min-width: auto;
	min-height: auto;
	padding: 15px 20px;
	text-align: center;
	border-radius: 0;
	font-weight: bold;
	text-transform: uppercase;
	font-size: var(--gvbf-type-label);
	line-height: var(--gvbf-type-label-lh);
	color: var(--gvbf-btn-text);
	background-color: var(--gvbf-btn-bg);
}
.woocommerce ul.products li.product span.info:hover,
.woocommerce ul.products li.product span.info:focus {
	cursor: pointer;
	background-color: var(--gvbf-btn-hover-bg);
	color: var(--gvbf-btn-hover-text);
	transition: 0.2s all ease-in;
}
.woocommerce ul.products li.product span.info:hover + .info-wrap,
.woocommerce ul.products li.product span.info:focus + .info-wrap {
	opacity: 1;
	transition: 0.2s all ease-in;
}
.woocommerce .info-wrap {
	position: absolute;
	top: 3.375em;
	opacity: 0;
	z-index: 9;
	display: flex;
	justify-content: center;
	width: 100%;
}
.woocommerce .info-wrap .text {
	position: relative;
	flex-basis: 95%;
	padding: 0.5em;
	font-size: 0.75em;
	background-color: var(--gvbf-btn-hover-bg);
	color: var(--gvbf-btn-hover-text);
}
.woocommerce .info-wrap .text::before {
	content: '';
	position: absolute;
	top: -0.625em;
	right: 2em;
	border-left: 0.5em solid transparent;
	border-right: 0.5em solid transparent;
	border-bottom: 0.75em solid var(--gvbf-btn-hover-bg);
}

/* "In store only" badge — dark box + light warehouse icon, overlaid on the cover.
   PROVISIONAL placement (top-left corner): no in-store-only product was available
   on the clone to position against. The old design used a flex/negative-margin
   overlay near the image bottom; revisit once an in-store product is viewable. */
.woocommerce ul.products li.product .in-store-only {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 3.75rem;
	height: 3.125rem;
	padding: 1.125rem;
	line-height: 0;
	background: var(--gvbf-color-dark);
}
.woocommerce ul.products li.product .in-store-only svg {
	fill: var(--gvbf-color-light);
}

/* Card hover/focus micro-interactions */
a.woocommerce-loop-product__link:hover .onsale,
a.woocommerce-loop-product__link:focus .onsale {
	transform: translate(-2px, -3px);
	transition: 0.2s all ease-in;
}
a.woocommerce-loop-product__link:hover .info,
a.woocommerce-loop-product__link:focus .info {
	transform: translate(2px, -3px);
	transition: 0.2s all ease-in;
}
a.woocommerce-loop-product__link:hover img,
a.woocommerce-loop-product__link:focus img {
	transform: scale(1.02);
	box-shadow: 1px 1px 6px rgb(80, 80, 80) !important;
	transition: 0.2s all ease-in;
}

/* Add-to-cart button + pagination */
.woocommerce ul.products li.product .button {
	margin-top: 0;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers {
	margin-bottom: 20px;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers.dots {
	border: 0;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers.next,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.previous {
	font-weight: bold;
	text-transform: uppercase;
	font-size: var(--gvbf-type-label);
	line-height: var(--gvbf-type-label-lh);
}

/* ===========================================================================
   Ported from the live site's Customizer "Additional CSS" (carried as code here
   so it travels via files — the .dat export does NOT include Additional CSS).
   The Skinny "#content" wrapper is dropped (doesn't exist under Beaver Builder).
   =========================================================================== */

/* Single-product sale badge positioning */
.woocommerce.single-product div.product {
	position: relative;
}
.woocommerce.single-product div.product span.onsale {
	position: absolute;
}

/* Hide the Stripe "Pay with Link" express-checkout button on product pages
   (this is how the live site removes it — resolves the button seen on the clone) */
.single-product #wc-stripe-express-checkout-element-link {
	display: none;
}

/* Product gallery thumbnail list — no bullets */
ol.flex-control-thumbs {
	list-style: none;
}

/* Generic no-margins utility (used in page content) */
.no-margins {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Filter toggle styled like the sort dropdown (outlined), not a solid button */
.woocommerce-taxonomies-filter .filter-toggle {
	background: var(--surface, #fff);
	color: var(--text, #1d1e25);
	border: 1px solid var(--border, #999);
	border-radius: 4px;
	padding: 0.5rem 1rem;
	font-weight: 400;
	cursor: pointer;
}
.woocommerce-taxonomies-filter .filter-toggle:hover,
.woocommerce-taxonomies-filter .filter-toggle:focus {
	border-color: var(--gvbf-primary, #00853d);
}

/* ===========================================================================
   SINGLE PRODUCT page — CSS pass 2 (ported from old _woocommerce.scss)
   Selectors validated against the live clone markup.
   =========================================================================== */

/* Image / summary column split — image ~33%, summary ~64% (matches the old site;
   WooCommerce/BB default to ~48/48). !important + extra specificity because the BB
   theme's stylesheets (base-4 / skin) load AFTER this file, so they'd otherwise win.
   width + flex-basis covers both float and flex layouts. */
@media (min-width: 769px) {
	.woocommerce.single-product div.product div.images,
	.woocommerce.single-product div.product .woocommerce-product-gallery {
		width: 33% !important;
		max-width: 33% !important;
		flex: 0 0 33% !important;
		margin: 0;
	}
	.woocommerce.single-product div.product div.summary,
	.woocommerce.single-product div.product .entry-summary {
		width: 64% !important;
		max-width: 64% !important;
		flex: 0 0 64% !important;
	}
}

/* Subtitle (ACF) — our hook renders .product-subtitle just after the title */
.woocommerce div.product .product-subtitle {
	display: block;
	font-size: 50%;
	margin-top: 1.25rem;
	line-height: 1.2;
}

/* Author (display font, larger) */
.woocommerce div.product .entry-summary .author {
	font-family: var(--gvbf-font-heading);
	font-size: var(--gvbf-heading-large);
	line-height: 1.36;
	margin-bottom: 2.75rem;
}
.woocommerce div.product .entry-summary .author a {
	text-decoration: underline;
}

/* Short description / excerpt */
.woocommerce div.product .woocommerce-product-details__short-description {
	margin-bottom: 2.75rem;
}

/* Price (large, bold, underlined amount) */
.woocommerce div.product .entry-summary .price {
	font-size: var(--gvbf-type-xxl);
	font-weight: 700;
	margin-bottom: 0;
}
.woocommerce div.product .entry-summary .price > .amount,
.woocommerce div.product .entry-summary .price ins .amount {
	border-bottom: var(--gvbf-border-width) solid currentColor;
}

/* MSRP / retail — uppercase italic label */
.woocommerce div.product .entry-summary p.msrp {
	margin: 0 0 10px;
	font-style: italic;
	font-size: var(--gvbf-type-label);
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Stock message — uppercase green; the ".more" tail resets to normal text */
.woocommerce div.product .entry-summary .stock {
	color: var(--gvbf-primary);
	font-weight: 700;
	font-size: var(--gvbf-type-label);
	line-height: 1.4;
	text-transform: uppercase;
}
.woocommerce div.product .entry-summary .stock.out-of-stock {
	color: #c12121;
}
.woocommerce div.product .entry-summary .stock .more {
	color: var(--text);
	font-weight: 400;
	text-transform: none;
}
.woocommerce div.product .entry-summary p:last-of-type {
	margin-bottom: 1.25rem;
}

/* In store only notice */
.woocommerce div.product .in-store-only {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
}
.woocommerce div.product .in-store-only .icon {
	line-height: 0;
	width: 3rem;
}

/* Product meta (genre / tags / sku / categories) in the Description tab */
.single-product .product_meta {
	margin-top: 2.75rem;
}
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .genre_is,
.woocommerce div.product .product_meta .tagged_as,
.woocommerce div.product .product_meta .sku_wrapper {
	display: block;
	margin-bottom: 0.3rem;
}

/* Single-product tabs — vertical sidebar layout ported from live: a 25% uppercase
   tab list (right border + green left-accent on the active tab) beside a 70%
   content panel, stacking on small screens. Scoped under .woocommerce.single-product
   with !important on the layout flips because WC-core + the BB theme tab CSS load
   after ours and win equal-specificity ties (see gotchas: BB theme wins ties). */
.woocommerce.single-product div.product .woocommerce-tabs {
	display: flex !important;
	width: 100%;
	padding: 2.5rem 0;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
	width: 25%;
	margin: 0;
	padding: 0 1.5rem 0 0;
	border-right: var(--gvbf-border-width) solid var(--border, #999);
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li {
	display: block !important;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-left: 3px solid transparent;
	border-radius: 0;
	font-family: var(--gvbf-font-body);
	font-size: var(--gvbf-type-label);
	line-height: var(--gvbf-type-label-lh);
	font-weight: 700;
	text-transform: uppercase;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.6rem 0 0.6rem 1.25rem;
	color: var(--text, #1d1e25);
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--gvbf-primary);
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	border-left-color: var(--gvbf-primary);
}
.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--gvbf-primary);
}
.woocommerce.single-product div.product .woocommerce-tabs .panel {
	width: 70%;
	margin: 0;
	padding-left: 1.5rem;
}
/* Additional-information attribute table: borderless, left-aligned, bold-uppercase
   labels (live style). */
.woocommerce.single-product div.product table.shop_attributes th,
.woocommerce.single-product div.product table.shop_attributes td {
	border: 0;
	text-align: left;
	font-family: var(--gvbf-font-body);
	font-size: var(--gvbf-type-label);
	line-height: var(--gvbf-type-label-lh);
}
.woocommerce.single-product div.product table.shop_attributes th {
	font-weight: 700;
	text-transform: uppercase;
}
/* Stack the tabs on small screens. */
@media (max-width: 768px) {
	.woocommerce.single-product div.product .woocommerce-tabs {
		flex-direction: column;
	}
	.woocommerce.single-product div.product .woocommerce-tabs ul.tabs,
	.woocommerce.single-product div.product .woocommerce-tabs .panel {
		width: 100%;
		padding-left: 0;
	}
	.woocommerce.single-product div.product .woocommerce-tabs ul.tabs {
		padding-right: 0;
		padding-bottom: 1.25rem;
		border-right: 0;
		border-bottom: var(--gvbf-border-width) solid var(--border, #999);
	}
}

/* --- Per-term archive hero (inc/archives.php) — structural stub --- */
.gvbf-archive-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	padding: 3rem 1.5rem;
	margin-bottom: 1.5rem;
}
.gvbf-archive-hero__cover {
	position: absolute;
	inset: 0;
	background: var(--scheme-overlay, rgba(0, 0, 0, 0.4));
}
.gvbf-archive-hero__inner {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
}
.gvbf-archive-hero__title {
	color: #fff;
	margin: 0;
}

/* --- Browse-by-term archive list ([gvbf-term-archive]) — structural stub --- */
.gvbf-term-archive {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}

/* --- Global content-photo rounding ------------------------------------------
 * Site-wide default: round photos in content areas (BB Photo modules + Gutenberg
 * image blocks) to --gvbf-photo-radius (14px, matching the buttons), so photos don't
 * need per-image rounding. Product / catalog imagery stays SQUARE — it uses different
 * classes so it's naturally excluded; the .woocommerce resets below are
 * belt-and-suspenders. Override per-photo in BB when a specific image needs a
 * different radius. */
.fl-photo-img,
.wp-block-image img {
	border-radius: var(--gvbf-photo-radius, 14px);
}
.woocommerce .fl-photo-img,
.woocommerce .wp-block-image img,
.woocommerce-product-gallery__image img,
.woocommerce ul.products li.product img,
.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: 0;
}