/* ===========================================================================
   Bootstrap grid compatibility

   WooCommerce named two of its wrappers col-1 and col-2 long before this
   theme loaded Bootstrap, and it means them as "first of two columns",
   not as "one twelfth" - checkout/form-checkout.php,
   myaccount/form-login.php and order/order-details-customer.php. With the
   grid loaded they would come out 8.33% and 16.66% wide.

   Neutralised only inside the three wrappers WooCommerce puts them in, so
   col-1 and col-2 keep their Bootstrap meaning everywhere a person writes
   them deliberately.
   ========================================================================== */
.col2-set > .col-1,
.col2-set > .col-2,
.u-columns > .col-1,
.u-columns > .col-2,
.woocommerce-columns > .col-1,
.woocommerce-columns > .col-2 {
	flex: initial;
	width: auto;
	max-width: none;
	padding-right: 0;
	padding-left: 0;
	margin-top: 0;
}

:root {
	--wooforge-color-primary: #2c2c2c;
	--wooforge-color-accent: #d4a13a;
	--wooforge-max-width: 1200px;

	/* Border-radius design tokens. Change one value here to retune that
	   category site-wide. Circles (border-radius:50% on spinners, color
	   swatches, slider handles) and small one-off decorative details are
	   left as literal values on purpose - they're a fixed shape, not part
	   of this "corner rounding" scale. */
	--wooforge-radius: 4px;         /* dropdowns, thumbnails, small UI chrome */
	--wooforge-radius-lg: 6px;      /* card-like containers (bundle boxes) */
	--wooforge-radius-popup: 4px;   /* [wooforge_popup] dialog, SweetAlert2 */
	--wooforge-radius-button: 0;    /* site buttons + SweetAlert2 buttons */
	--wooforge-radius-pill: 999px;  /* fully-rounded badges/tags */

	/* One knob for the height of every primary action button (add to cart,
	   mini-cart View cart/Checkout, cart page Proceed to checkout, Place
	   order) - see the "Shared primary-button height" block in
	   woocommerce.css for the buttons that consume it. */
	--wooforge-button-height: 44px;

	/* Height of every form control - text inputs, selects, and the select2
	   containers WooCommerce swaps the country/state selects for. Defaults to
	   the button height so a field and the button next to it line up, but kept
	   as its OWN token so the two can be tuned apart without one dragging the
	   other along. */
	--wooforge-input-height: var(--wooforge-button-height, 44px);
}


* {
	box-sizing: border-box;
}

/* Kills the light-blue flash a touch browser paints over whatever was tapped
   (Chrome on Android defaults to rgba(51, 181, 229, .4)). It is not tied to
   links - anything tappable gets it, links are just the common case - and it
   was most obvious on the product tabs accordion, where the whole header went
   blue for a moment on every open/close.

   Set once here rather than on a list of interactive tags, because the
   property is INHERITED and plenty of tappable things are not <a>/<button>:
   the variation swatches are clickable <span>s, and a tag list left those
   still flashing. Global on purpose too - the flash is identical everywhere,
   so scoping it per component would leave the same artifact on every other
   control.

   Nothing is lost with it gone: :focus-visible outlines are a separate
   mechanism and still apply, and every control here has its own pressed or
   state change to confirm the tap. */
html {
	-webkit-tap-highlight-color: transparent;
}

/* Global font-size variables (--wooforge-fs-*) are set from WooForge →
   Settings → General → Typography; the fallbacks here are the theme
   defaults, so an empty setting changes nothing. */
body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: var(--wooforge-fs-base, 16px);
	font-weight: var(--wooforge-fw-base, normal);
	text-transform: var(--wooforge-tt-base, none);
	color: var(--wooforge-color-primary);
	overflow: clip;
}

/* 100vw includes the vertical scrollbar, so full-bleed elements built with
   width:100vw (e.g. .wooforge-slider-fullwidth, full-width mega panels)
   overflow the layout by the scrollbar width and create a horizontal
   scrollbar. clip (not hidden) cuts that overflow without turning <html>
   into a scroll container, so position:sticky keeps working. */
html {
	overflow-x: clip;
	/* In-page anchor links (e.g. a button pointing at #upsells) glide instead
	   of jumping. JS-driven scrolls are unaffected - they already pass their
	   own behavior to scrollTo/scrollIntoView (see shop-ajax.js et al.). */
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

html.wooforge-scroll-locked {
	overflow: hidden;
	margin-right: var(--wf-scrollbar-width, 0px);
}

/* Deliberately NO layout compensation on the header: html's margin-right
   above already keeps the content box identical to the pre-lock state, so
   nothing in the header moves by even a pixel when a panel opens. Any
   negative-margin-only approach re-lays the row-inner out (content jumps
   right in fullwidth, the centered block shifts in fixed).

   What DOES need covering is the scrollbar-wide strip right of the header:
   with a non-white header background it shows as an unpainted gap while a
   panel is open. The pair below extends each row's BACKGROUND into the
   strip without moving its content — the negative margin widens the border
   box by the scrollbar width and the equal padding shrinks the content area
   right back, so the row-inner's containing width is unchanged. Stuck rows
   are excluded: they are position:fixed at full viewport width already and
   have their own padding-right compensation below. */
html.wooforge-scroll-locked #masthead.wooforge-header,
html.wooforge-scroll-locked .wooforge-header-row:not(.is-stuck) {
	margin-right: calc(-1 * var(--wf-scrollbar-width, 0px));
	padding-right: var(--wf-scrollbar-width, 0px);
}

/* position:fixed rows ignore parent margin — compensate with padding-right */
html.wooforge-scroll-locked .wooforge-header-row--sticky.is-stuck {
	padding-right: var(--wf-scrollbar-width, 0px);
}

a {
	color: var(--wooforge-color-primary);
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
	margin: 0;
	font-weight: var(--wooforge-fw-heading, bold);
	text-transform: var(--wooforge-tt-heading, none);
}

/* Heading scale driven by one base (H1) size; the ratios reproduce the
   browser defaults relative to 16px body, so with the setting empty the
   sizes stay exactly what they were. */
h1 { font-size: var(--wooforge-fs-heading, 32px); }
h2 { font-size: calc(var(--wooforge-fs-heading, 32px) * .75); }
h3 { font-size: calc(var(--wooforge-fs-heading, 32px) * .585); }
h4 { font-size: calc(var(--wooforge-fs-heading, 32px) * .5); }
h5 { font-size: calc(var(--wooforge-fs-heading, 32px) * .415); }
h6 { font-size: calc(var(--wooforge-fs-heading, 32px) * .335); }

p {
	line-height: 1.6;
	margin: 0 0 10px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
	font-family: inherit;
	/* iOS Safari auto-zooms the page on focus for any text field under
	   16px - this is the base rule for nearly every form field site-wide
	   (checkout, login/register, account, coupon, price filters), so
	   staying at/above 16px here matters far more broadly than it looks. */
	font-size: 16px;
	padding: 10px;
	border: 1px solid #d5d5d5;
	background: #fff;
	color: var(--wooforge-color-primary);
	/* Same corner radius as every other surface in the theme. Without this
	   the fields were square while the error outline drawn around them (and
	   the select2 container replacing the country/state selects) were
	   rounded - the mismatch read as a bug rather than a style. */
	border-radius: var(--wooforge-radius, 4px);
}

/* One height for every control, so a text input, a select and a select2
   container sit level with each other and with the buttons beside them.
   min-height rather than height: a textarea still grows, and a field whose
   font or padding is overridden locally is not clipped.

   textarea is excluded - it has its own taller sizing further down, and a
   44px floor would make a message box look like a single-line input. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
select {
	min-height: var(--wooforge-input-height, 44px);
}

textarea {
	width: 100%;
}

/* ── Custom checkboxes & radio buttons ──────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	border: 2px solid #d5d5d5;
	background: #fff;
	cursor: pointer;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	position: relative;
	transition: border-color .15s, background-color .15s;
}

input[type="checkbox"] {
	border-radius: var(--wooforge-radius, 4px);
}

input[type="radio"] {
	border-radius: 50%;
}

input[type="checkbox"]:hover:not(:disabled),
input[type="radio"]:hover:not(:disabled) {
	border-color: var(--wooforge-color-primary);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
	background-color: var(--wooforge-color-primary);
	border-color: var(--wooforge-color-primary);
}

input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 0px;
	width: 6px;
	height: 10px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	transform: rotate(45deg);
}

input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	inset: 2px;
	border-radius: 50%;
	background: #fff;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
	opacity: .4;
	cursor: not-allowed;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid var(--wooforge-color-primary);
	outline-offset: 2px;
}

/* No prefers-color-scheme override here on purpose: the theme has no dark
   mode, so inputs must always follow the site's light palette — an OS-level
   dark theme was making checkboxes render dark on the light site. */

button,
.button,
input[type="submit"] {
	font-family: inherit;
	font-size: var(--wooforge-fs-button, 14px);
	font-weight: var(--wooforge-fw-button, normal);
	text-transform: var(--wooforge-tt-button, none);
}

.wooforge-breadcrumbs {
	margin-bottom: 8px;
	font-size: var(--wooforge-fs-small, 13px);
	font-weight: var(--wooforge-fw-small, normal);
	text-transform: var(--wooforge-tt-small, none);
	color: #777;
}

.wooforge-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wooforge-breadcrumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 4px;
}

.wooforge-breadcrumbs a {
	color: #777;
	text-decoration: none;
}

.wooforge-breadcrumbs a:hover {
	text-decoration: underline;
}

/* Header elements inherit --wooforge-fs-header; the top row's own 13px
   below stays in charge for that strip (nearest explicit size wins). */
/* Base stacking: keeps the header above normal page content (hero sliders -
   Swiper's own CSS hardcodes z-index:1 - product badges at z-index:20, etc.)
   at all times, without touching #masthead's descendants' own z-index
   values. Deliberately far from both the .is-stuck row range (200-202,
   9999-10001 in no-overlap-sidebar mode) and the 9999+ range used by
   header dropdowns/panels, so it can never numerically collide with them -
   see get_overlap_sidebar_css() in inc/layout/class-wooforge-layout.php for
   why a *permanent* #masthead z-index matching a nested panel's own value
   caused real rendering bugs in the past. When a panel that's actually
   nested inside #masthead's markup is open (the drawer-style Menu element,
   the Mobile Menu element - see the closest('#masthead') check in
   js/core/overlay-panels.js), #masthead is raised to 9999 so that panel
   isn't capped below the body-level backdrop; that rule's extra class
   selector always outranks this one regardless of source order. Cart
   flyout / wishlist / account / filters drawer render outside #masthead
   (wp_footer) with their own z-index already above the backdrop, so
   opening them does NOT raise #masthead - it stays dimmable along with
   the rest of the page, matching what "Overlap header sidebar" intends.
   The drop back to 30 is delayed by --wf-mm-panel-close-total (defined in
   mega-menu.css - the mega-menu panel's own close-fade delay + whichever of
   its opacity/transform durations is longer) - without the delay,
   #masthead falls back to 30 the instant :hover/is-open ends, capping the
   still-fading panel below its own backdrop (z-index:9998, outside
   #masthead) for the rest of the fade - visible as the backdrop flashing
   over the menu on close. Reading the same variable mega-menu.css uses
   means this never needs recomputing by hand when that timing changes.
   Every rule that RAISES #masthead sets transition-delay back to 0s so the
   raise itself stays instant; only this base (falling) rule carries the
   delay, since transition-delay is a property of whichever rule is
   winning the cascade for `transition`, not of whichever rule changed
   z-index. */
#masthead.wooforge-header {
	position: relative;
	z-index: 40;
	transition: z-index 0s linear var(--wf-mm-panel-close-total);
	font-size: var(--wooforge-fs-header, 16px);
	font-weight: var(--wooforge-fw-header, normal);
	text-transform: var(--wooforge-tt-header, none);
}

body.wooforge-overlay-open #masthead.wooforge-header {
	z-index: 9999;
	transition: z-index 0s linear 0s;
}

.wooforge-header-row-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	max-width: var(--wooforge-max-width);
	margin: 0 auto;
	padding: 12px var(--wooforge-content-gutter, 24px);
}

.wooforge-header-row[style*="--wooforge-row-height"] .wooforge-header-row-inner {
	height: var(--wooforge-row-height);
}

.wooforge-header-row--sticky.is-stuck[style*="--wooforge-row-sticky-height"] .wooforge-header-row-inner {
	height: var(--wooforge-row-sticky-height);
}

.wooforge-header-zone {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.wooforge-header-zone--left {
	justify-content: flex-start;
}

.wooforge-header-zone--center {
	justify-content: center;
}

.wooforge-header-zone--right {
	justify-content: flex-end;
}

.wooforge-header-row--top {
	font-size: 13px;
}

.wooforge-header-row--top .wooforge-header-row-inner {
	padding: 6px var(--wooforge-content-gutter, 24px);
}

.wooforge-header-menu ul {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Desktop top nav only - wp_nav_menu() already nests children into a
   <ul class="sub-menu"> inside a <li class="menu-item-has-children"> by
   default, with no special walker needed. The mobile drawer below leaves
   sub-menu as an always-expanded nested list instead (no hover on touch). */
.wooforge-header-menu:not(.wooforge-drawer) li.menu-item-has-children {
	position: relative;
}

.wooforge-header-menu:not(.wooforge-drawer) .sub-menu {
	display: none;
	position: absolute;
	/* --wooforge-dropdown-offset is written onto the <li> by
	   js/header/submenu-position.js and is the distance from the bottom of the
	   item down to whatever the "Dropdown opens below" setting picked. It
	   defaults to 0, which is the browser's own behaviour, so the dropdown
	   still works with the script absent - that is exactly what the "item"
	   setting does, and why it loads no JavaScript at all. Kept as an offset on
	   top: 100% rather than re-anchoring the element, because the horizontal
	   alignment with the item comes for free from staying inside it. */
	top: calc(100% + var(--wooforge-dropdown-offset, 0px));
	left: 0;
	flex-direction: column;
	gap: 0;
	min-width: 180px;
	padding: 8px 0;
	background: #fff;
	border: 1px solid #e5e5e5;
	/* Above the overlay backdrop (9998): in no-overlap mode the backdrop
	   starts below the header, so the header stays interactive — a dropdown
	   hanging past the header line must not be cut off by the dim layer.
	   Same level as the live-search results / fullscreen search panels. */
	z-index: 9999;
}

.wooforge-header-menu:not(.wooforge-drawer) li.menu-item-has-children:hover > .sub-menu,
.wooforge-header-menu:not(.wooforge-drawer) li.menu-item-has-children:focus-within > .sub-menu {
	display: flex;
}

/* Gap bridge. Once the dropdown is pushed clear of the header row there is
   dead space between the item and the list, and crossing it ends :hover - the
   menu would close before the pointer arrived. This fills exactly that gap so
   the hover survives the trip. Same idea as the mega menu's own bridge
   (css/mega-menu.css), which is why that one is on .wooforge-mm-item and this
   one on .menu-item-has-children: a li is never both.

   Only while hovering, so an invisible block is not sitting over the page
   swallowing clicks the rest of the time. Height collapses to 0 with the
   offset, making this inert under the "item" setting. */
.wooforge-header-menu:not(.wooforge-drawer) > ul > li.menu-item-has-children::after {
	content: "";
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: var(--wooforge-dropdown-offset, 0px);
}

.wooforge-header-menu:not(.wooforge-drawer) > ul > li.menu-item-has-children:hover::after,
.wooforge-header-menu:not(.wooforge-drawer) > ul > li.menu-item-has-children:focus-within::after {
	display: block;
}

/* Touch fallback (js/header/submenu-touch.js) - :hover never meaningfully
   fires on touch, so a tap on the parent link would otherwise just
   navigate away, making the whole submenu unreachable. The link itself is
   left alone (still a real, working destination) - a dedicated button
   toggles the dropdown instead, same idea as the mobile drawer's own
   .wooforge-mmob-expand. */
html.wooforge-is-touch .wooforge-header-menu:not(.wooforge-drawer) li.menu-item-has-children {
	display: flex;
	align-items: center;
}
html.wooforge-is-touch .wooforge-header-menu:not(.wooforge-drawer) li.menu-item-has-children.wooforge-submenu-open > .sub-menu {
	display: flex;
}
.wooforge-submenu-expand {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	margin-left: 2px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: inherit;
	transition: transform .2s;
}
.wooforge-submenu-expand svg {
	width: 12px;
	height: 12px;
	pointer-events: none;
}
.wooforge-submenu-expand[aria-expanded="true"] {
	transform: rotate(180deg);
}

/* Submenu indicator for POINTER devices.
   Without it a parent item looks exactly like a plain link and nothing says a
   dropdown is there until you happen to hover it. Touch devices already get a
   real chevron button (.wooforge-submenu-expand above, added by
   js/header/submenu-touch.js), so this is scoped away from them - otherwise
   the same item would carry two arrows.

   Drawn on the <a>, never the <li>: css/mega-menu.css already owns
   .wooforge-mm-item::after as the invisible bridge across the gap between the
   nav item and its panel, and reusing it here would break the hover path into
   every mega menu.

   Mega menu items get the same arrow even though WordPress does not mark them
   .menu-item-has-children - their children live in a .wooforge-mm-panel that
   the walker builds instead, and to a visitor it is the same promise. */
html:not(.wooforge-is-touch) .wooforge-header-menu:not(.wooforge-drawer) > ul > li.menu-item-has-children > a::after,
html:not(.wooforge-is-touch) .wooforge-header-menu:not(.wooforge-drawer) > ul > li.wooforge-mm-item > a::after {
	content: "";
	display: inline-block;
	width: .36em;
	height: .36em;
	margin-left: .45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-.16em) rotate(45deg);
}

/* Second level and deeper: those dropdowns fly out sideways, so the arrow
   points that way too. The `> ul > li >` chain keeps this to real .sub-menu
   dropdowns - a .sub-menu nested inside a mega menu panel is part of the
   panel's own layout and is left alone. */
html:not(.wooforge-is-touch) .wooforge-header-menu:not(.wooforge-drawer) > ul > li > .sub-menu li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: .36em;
	height: .36em;
	margin-left: .45em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateX(-.1em) rotate(-45deg);
}

.wooforge-header-menu:not(.wooforge-drawer) .sub-menu li {
	width: 100%;
}

.wooforge-header-menu:not(.wooforge-drawer) .sub-menu a {
	display: block;
	padding: 8px 16px;
	white-space: nowrap;
}

/* A 3rd-level (and deeper) sub-menu would otherwise stack below its own
   parent item, which already sits inside the level-2 dropdown - open it
   to the side instead so it doesn't overlap. */
.wooforge-header-menu:not(.wooforge-drawer) .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.wooforge-header-account a,
.wooforge-header-wishlist a,
.wooforge-header-cart a {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.wooforge-header-icon-wrap {
	position: relative;
	display: inline-flex;
}

.wooforge-header-account--has-dropdown {
	position: relative;
}

.wooforge-header-account-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 180px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #e5e5e5;
	/* Above the overlay backdrop (9998) — see .sub-menu note above. */
	z-index: 9999;
}

.wooforge-header-account--has-dropdown:hover .wooforge-header-account-dropdown,
.wooforge-header-account--has-dropdown:focus-within .wooforge-header-account-dropdown {
	display: block;
}

/* Touch fallback (js/header/submenu-touch.js) - see the identical comment
   on the regular .sub-menu rules above; same reasoning, same pattern. */
html.wooforge-is-touch .wooforge-header-account--has-dropdown {
	display: flex;
	align-items: center;
}
html.wooforge-is-touch .wooforge-header-account--has-dropdown.wooforge-submenu-open > .wooforge-header-account-dropdown {
	display: block;
}

.wooforge-header-account-dropdown li {
	display: block;
}

.wooforge-header-account-dropdown a {
	display: block;
	padding: 8px 16px;
	white-space: nowrap;
	text-decoration: none;
	color: inherit;
}

.wooforge-header-account-dropdown a:hover {
	background: #f6f6f6;
}

.wooforge-header-total {
	font-size: 13px;
	opacity: 0.8;
}

.wooforge-header-count {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--wooforge-color-accent);
	color: #fff;
	font-size: var(--wooforge-fs-badge, 10px);
	line-height: 16px;
	text-align: center;
}

.wooforge-header-device--mobile {
	display: none;
}

/* The desktop/mobile switch breakpoint is injected inline by
   WooForge_Layout::output_width_style() from the Mobile menu break
   setting, since it needs to be admin-configurable. */

.wooforge-header-menu.wooforge-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	width: 300px;
	max-width: 90vw;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	z-index: 9999;
	background: #fff;
	transition: transform 0.3s ease;
	padding: 48px 16px 16px;
}

.wooforge-header-menu.wooforge-drawer ul {
	flex-direction: column;
}

.wooforge-header-menu.wooforge-drawer--left {
	left: 0;
	transform: translateX(-100%);
}

.wooforge-header-menu.wooforge-drawer--right {
	right: 0;
	transform: translateX(100%);
}

.wooforge-header-menu.wooforge-drawer--fullwidth {
	left: 0;
	width: 100%;
	max-width: none;
	transform: translateY(-100%);
}

.wooforge-header-menu.wooforge-drawer.is-open {
	transform: translate(0, 0);
}

.wooforge-drawer-close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: none;
	cursor: pointer;
}

.wooforge-icon-close {
	width: 20px;
	height: 20px;
	display: block;
}

.wooforge-drawer-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.wooforge-drawer-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--wooforge-color-primary);
}

.wooforge-header-search--icon_inside .search-form,
.wooforge-header-search--icon_inside .woocommerce-product-search {
	position: relative;
}

.wooforge-header-search--icon_inside .search-field {
	width: 100%;
	padding-right: 40px;
	box-sizing: border-box;
}

.wooforge-header-search--icon_inside .search-submit,
.wooforge-header-search--icon_inside .woocommerce-product-search button[type="submit"] {
	position: absolute;
	top: 0;
	right: 0;
	width: 38px;
	height: 100%;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 0;
}

.wooforge-header-search--icon_inside .search-submit::before,
.wooforge-header-search--icon_inside .woocommerce-product-search button[type="submit"]::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	margin: 0 auto;
	border: 2px solid var(--wooforge-color-primary);
}

.wooforge-search-fullscreen-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
}

/* NEVER TALLER THAN WHAT IS LEFT OF THE SCREEN. The panel is anchored at
   top: 100% of the header, so the room below it is the viewport minus the
   header - which is exactly what --wooforge-header-total-height holds
   (js/main.js measures it; confirmed equal to the panel's own offsetTop at
   every breakpoint). Without the cap a live search with a couple of dozen
   hits simply ran off the bottom: measured on a 390x844 phone, the panel was
   1036px tall and the "view all" link sat 300px below the fold - and the page
   behind it cannot be scrolled either, because the overlay locks <html>.

   dvh after vh so browsers that know it use it: on mobile 100vh is the tall
   viewport, the one with the address bar hidden, which would let the panel
   run under the bar again. The old value stays as the fallback. */
.wooforge-search-fullscreen {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	max-height: calc(100vh - var(--wooforge-header-total-height, 0px));
	max-height: calc(100dvh - var(--wooforge-header-total-height, 0px));
}

/* The shared overlay backdrop dims the whole page, but fullscreen search
   opens directly below the header - keep the header itself undimmed by
   raising it above the backdrop only while this panel is open. #masthead
   is position: relative already (see the unconditional rule above); giving
   it an explicit z-index here is enough on its own to make the *whole*
   subtree - including a stuck sticky row's position: fixed (z-index: 200)
   - paint above the backdrop as one composited layer, since #masthead now
   establishes its own stacking context and nested z-index values inside it
   no longer get compared against the backdrop directly.
   Don't also set position/z-index straight on .wooforge-header-row here:
   a same-or-higher-specificity rule touching `position` would silently
   override .wooforge-header-row--sticky.is-stuck's position: fixed while
   the panel is open, breaking the spacer/placeholder math in js/main.js
   (visible as a layout jump or an empty gap appearing under the row). */
body.wooforge-fullscreen-search-open #masthead.wooforge-header {
	z-index: 9999;
	transition: z-index 0s linear 0s;
}

/* flex, not block, so the cap above can be handed down: the panel is a
   column whose inner is allowed to shrink, and the results list inside it
   takes the leftover height and scrolls. Scrolling the results rather than
   the whole panel keeps the search field itself on screen while the list
   moves under it. */
.wooforge-search-fullscreen.is-open {
	display: flex;
	flex-direction: column;
}

.wooforge-search-fullscreen-inner {
	position: relative;
	max-width: var(--wooforge-max-width);
	margin: 0 auto;
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	/* Both needed: width, because a flex item is sized by its content and
	   would otherwise stop short of max-width; min-height, because a flex
	   item refuses to shrink below its content by default, which is what
	   would let the results push the panel past the cap again. */
	width: 100%;
	min-height: 0;
}

/* The form is a link in the height chain, not just a wrapper: live-search
   appends its results INSIDE it (see the submit button rule below), so the
   panel's cap only reaches the results if the form passes it on. Hence the
   column and, on it too, the min-height: 0 that lets a flex item shrink
   below its content. The submit button is absolute and unaffected. */
.wooforge-search-fullscreen-inner .search-form,
.wooforge-search-fullscreen-inner .woocommerce-product-search {
	display: flex;
	flex-direction: column;
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

/* The field's box is described by these three variables so the search icon
   below can be sized from the SAME numbers instead of a hardcoded guess -
   see .wooforge-search-fullscreen-icon for why that matters. line-height is
   pinned here rather than inherited (body sets 1.6): the icon's height has
   to be computable, and an inherited value silently changes it. */
.wooforge-search-fullscreen-inner {
	--wooforge-search-fs: 20px;
	--wooforge-search-lh: 1.4;
	--wooforge-search-pad: 16px;
	--wooforge-search-border: 1px;
	--wooforge-search-field-height: calc(
		var(--wooforge-search-fs) * var(--wooforge-search-lh)
		+ var(--wooforge-search-pad) * 2
		+ var(--wooforge-search-border) * 2
	);
}

.wooforge-search-fullscreen-inner .search-field {
	width: 100%;
	font-size: var(--wooforge-search-fs);
	line-height: var(--wooforge-search-lh);
	padding: var(--wooforge-search-pad) 56px var(--wooforge-search-pad) var(--wooforge-search-pad);
	box-sizing: border-box;
	outline: none;
}

/* Native search-input clear ("x") button - the theme draws its own icon
   (.wooforge-search-fullscreen-icon) and close button, so the browser's
   built-in one (tinted blue by some Chromium builds) is redundant. */
.wooforge-search-fullscreen-inner .search-field::-webkit-search-cancel-button,
.wooforge-search-fullscreen-inner .search-field::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

/* The submit button carries the icon (js/header/header-search.js moves it
   in - see the comment there). font-size: 0 hides the button's own "Search"
   text; the visible mark is the same icon configured for the header's search
   element, custom upload or default SVG, so the two always match.

   HEIGHT IS THE FIELD'S, NOT 100%. js/header/live-search.js appends its
   results panel INSIDE the <form>, so the form grows as results arrive -
   height:100% grew with it and the button stretched from 62px to 462px,
   turning the whole results dropdown into one giant submit target. Measured.
   The field's own height is the only correct value here. */
.wooforge-search-fullscreen-inner .search-submit,
.wooforge-search-fullscreen-inner .woocommerce-product-search button[type="submit"] {
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: var(--wooforge-search-field-height);
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* NO POSITIONING HERE ON PURPOSE. The icon lives inside the submit button,
   which is itself pinned to the field, so it just centres in its parent.

   It used to be absolutely positioned against
   .wooforge-search-fullscreen-inner with top:32px / right:24px - numbers
   that were copies of that wrapper's own padding and only held while the
   padding stayed exactly what it was. Two earlier attempts to fix the
   alignment (a hardcoded 56px height, then a derived one) each corrected the
   symptom while leaving the coupling in place. Keeping the icon out of the
   layout entirely is what actually ends it.

   pointer-events stays off so clicks fall through to the button underneath. */
.wooforge-search-fullscreen-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* Reset control, moved into the <form> by js/header/header-search.js so the
   form (position: relative, see .search-form below) is what it anchors to.
   Sits just left of the 56px submit button and is hidden by the [hidden]
   attribute whenever the field is empty, so it never covers an empty field. */
.wooforge-search-clear {
	position: absolute;
	top: 0;
	right: 56px;
	width: 40px;
	height: var(--wooforge-search-field-height);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	cursor: pointer;
	opacity: .5;
	transition: opacity .15s;
}

.wooforge-search-clear:hover,
.wooforge-search-clear:focus-visible {
	opacity: 1;
}

.wooforge-search-clear[hidden] {
	display: none;
}

.wooforge-search-clear img {
	width: 18px;
	height: 18px;
	display: block;
}

.wooforge-search-fullscreen-close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border: none;
	cursor: pointer;
}

/* Live search (js/live-search.js) appends its results panel directly into
   whichever <form> holds the .search-field, anchored with position:
   relative here so the dropdown lines up under the field regardless of
   search style (inline/icon_inside/fullscreen) or where the form lives. */
.search-form,
.woocommerce-product-search {
	position: relative;
}

/* 360px is the cap this dropdown wants, 70vh is the one a short screen can
   afford. On a phone in landscape the field sits ~55px down and 360px of
   results ended 6px above the fold - it fits, but only just, and a header
   with one more row would push it under. Unlike the fullscreen panel this
   one never traps its contents (the page behind it still scrolls), so the
   vh cap is a comfort measure rather than a fix. */
.wooforge-live-search-results {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 9999;
	margin-top: 4px;
	background: #fff;
	max-height: min(360px, 70vh);
	max-height: min(360px, 70dvh);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	text-align: left;
}

/* The compact 360px dropdown cap makes sense for the inline/icon_inside
   styles, where the results float over the page. In the fullscreen panel
   they are part of the layout instead, so the cap is dropped and the height
   comes from the panel: this is the flex child that takes whatever is left
   under the search field and scrolls, which is why min-height: 0 is here -
   without it the list refuses to shrink below its content and the panel
   grows past its own max-height, taking the "view all" link off screen.

   The (Header Builder -> Search -> Results style) grid variant behaves the
   same way; it is the same element with a different inner layout. */
.wooforge-search-fullscreen-inner .wooforge-live-search-results {
	position: static;
	max-height: none;
	margin-top: 24px;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.wooforge-live-search-results-grid {
	margin-top: 0;
}

.wooforge-live-search-results.is-open {
	display: block;
}

.wooforge-live-search-results-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wooforge-live-search-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	text-decoration: none;
	color: inherit;
}

.wooforge-live-search-result:hover {
	background: #f6f6f6;
}

.wooforge-live-search-result img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	flex-shrink: 0;
}

.wooforge-live-search-result-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wooforge-live-search-result-title {
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wooforge-live-search-result-price {
	font-size: 12px;
	color: var(--wooforge-color-accent);
}

.wooforge-live-search-empty {
	margin: 0;
	padding: 12px;
	font-size: 13px;
	color: #777;
}

.wooforge-live-search-view-all {
	display: block;
	padding: 10px 12px;
	font-size: 13px;
	text-align: center;
	border-top: 1px solid #e5e5e5;
	text-decoration: none;
}

.wooforge-overlay-backdrop {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9998;
	transition: opacity .3s ease, visibility 0s linear .3s;
	/* html.wooforge-scroll-locked's overflow:hidden (below) does not
	   reliably stop iOS Safari from touch-drag-scrolling the page behind an
	   open panel - confirmed live via WebKit: dragging on the backdrop
	   still moved window.scrollY despite overflow:hidden being applied.
	   touch-action:none tells the browser to never start a scroll/pan
	   gesture from a touch that begins on this element, which is enforced
	   before any scrolling begins (unlike a JS touchmove+preventDefault
	   listener). Scoped to the backdrop only - it's a sibling of every
	   panel (not an ancestor), so it can't intersect with and block a
	   panel's own scrollable content, which keeps its default touch-action
	   and keeps scrolling normally. */
	touch-action: none;
}

.wooforge-overlay-backdrop.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity .3s ease, visibility 0s linear 0s;
}


.wooforge-header-icon {
	width: 24px;
	height: 24px;
	vertical-align: middle;
	/* A store admin's own uploaded icon (header icons, and the wishlist
	   default/active pair - see WooForge_Header_Builder) isn't guaranteed
	   to be square like the built-in SVGs; contain keeps it fully visible
	   and undistorted within this fixed box instead of being stretched. */
	object-fit: contain;
}

/* Deliberately right: 0 here, not the gutter-compensated width used by the
   backdrop/flyouts/drawers - this row is also static (in normal flow,
   body-constrained width) until JS adds .is-stuck, and widening only the
   stuck state would make it ~15px wider than its own static width,
   visibly re-centering/shifting .wooforge-header-row-inner's content the
   instant .is-stuck toggles (including on page load, for header configs
   where the row has nothing above it - see js/main.js). Right: 0 keeps
   both states at the same (body-constrained) width, at the cost of a
   matching, currently-unreported, thin gap on this one row's far edge. */
.wooforge-header-row--sticky.is-stuck {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 200;
	background: #fff;
}

/* Each stuck row is its own stacking context (position: fixed always creates one).
   On a z-index tie DOM order decides, so --bottom (last) would paint over --main's
   entire layer including its open dropdown. Stepping up per row type prevents that. */
.wooforge-header-row--main.is-stuck {
	z-index: 201;
}

.wooforge-header-row--top.is-stuck {
	z-index: 202;
}

.wooforge-header-logo-link {
	display: inline-block;
}

.wooforge-header-logo-link img {
	max-height: 60px;
	width: auto;
}

.wooforge-header-logo--sticky {
	display: none;
}

.wooforge-header-row--sticky.is-stuck .wooforge-header-logo--sticky {
	display: inline-block;
}

.wooforge-header-row--sticky.is-stuck .wooforge-header-logo--normal {
	display: none;
}

.wooforge-header-row-spacer {
	display: none;
}

.wooforge-footer {
	margin-top: 48px;
	padding: 24px var(--wooforge-content-gutter, 24px);
	text-align: center;
}

.wooforge-content {
	max-width: var(--wooforge-max-width);
	margin: 0 auto;
	padding: 0 var(--wooforge-content-gutter, 24px);
	display: flex;
	gap: 32px;
	align-items: flex-start;
}
.wooforge-main {
	width: 100%;
}
.wooforge-main,
.wooforge-shop-wrapper {
	flex: 1;
	min-width: 0;
}

.wooforge-sidebar {
	flex: 0 0 var(--wooforge-sidebar-width, 280px);
}

body.wooforge-sidebar-left .wooforge-sidebar {
	order: -1;
}

/* Archives nest .wooforge-sidebar inside .products-grid instead of as a
   direct flex child of .wooforge-content - see css/woocommerce.css. */
.wooforge-content.shop-page {
	display: block;
}

/* WP's admin bar is position:fixed and isn't accounted for by its own
   html { margin-top } bump, which only shifts elements in normal flow -
   the filters drawer/cart flyout panels are position:fixed with top: 0,
   so without this their top edge sits underneath the admin bar. */
body.admin-bar .wooforge-sidebar-panel {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .wooforge-sidebar-panel {
		top: 46px;
	}
}

/* "Overlap header sidebar" / "...on mobile" (General -> Sidebar) - the
   actual rules are printed inline by WooForge_Layout::output_width_style(),
   gated to either side of the admin-configurable mobile breakpoint (that
   inline <style> prints after this stylesheet, so it still overrides the
   admin-bar rules above, same as before). */

@media (max-width: 768px) {
	.wooforge-content {
		flex-direction: column;
	}
}

/* ── [wooforge_gallery] grid ──────────────────────────────────────────── */
/* Same responsive column classes and breakpoints as .products in
   woocommerce.css, kept separate so the gallery works on non-shop pages. */

.wooforge-media-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wooforge-gallery-gap, 24px);
}

.wooforge-media-gallery.is-rslider {
	display: block;
	overflow: hidden;
}

.wooforge-media-gallery.desktop-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.wooforge-media-gallery.desktop-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wooforge-media-gallery.desktop-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wooforge-media-gallery.desktop-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wooforge-media-gallery.desktop-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wooforge-media-gallery.desktop-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

@media (max-width: 900px) {
	.wooforge-media-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wooforge-media-gallery.tablet-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.wooforge-media-gallery.tablet-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wooforge-media-gallery.tablet-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wooforge-media-gallery.tablet-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wooforge-media-gallery.tablet-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.wooforge-media-gallery.tablet-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.wooforge-media-gallery { grid-template-columns: 1fr; }
	.wooforge-media-gallery.mobile-columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
	.wooforge-media-gallery.mobile-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wooforge-media-gallery.mobile-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.wooforge-media-gallery.mobile-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.wooforge-media-gallery.mobile-columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.wooforge-media-gallery.mobile-columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.wooforge-gallery-item {
	margin: 0;
}

.wooforge-gallery-item img {
	display: block;
	width: 100%;
	height: auto;
}

.wooforge-gallery-slider .swiper-slide {
	height: auto;
}

.wooforge-gallery-slider .wooforge-gallery-item,
.wooforge-gallery-slider .wooforge-gallery-item img {
	height: 100%;
	object-fit: cover;
}

/* ── Scroll to top button (General → Layout) ─────────────────────────── */

.wooforge-scroll-to-top {
	position: fixed;
	right: 24px;
	/* env() safely falls back to 0px on browsers/devices without a notch or
	   home-indicator gesture area (its second argument is the fallback used
	   when the env() var itself isn't supported at all) - always safe to
	   include unconditionally. */
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: var(--wooforge-radius-button, 0);
	background: var(--wooforge-color-accent);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}

.wooforge-scroll-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}

.wooforge-cookie-notice {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 24px;
	/* iPhone X+ home-indicator gesture area sits right under this bar since
	   it's flush against bottom:0 - env() falls back to 0px on devices
	   without one, safe to include unconditionally. */
	padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	background: #2c2c2c;
	color: #fff;
}

.wooforge-cookie-notice.is-visible {
	display: flex;
}

.wooforge-cookie-notice .button {
	background: var(--wooforge-color-accent);
	color: #fff;
	border: none;
	border-radius: var(--wooforge-radius-button, 0);
	padding: 8px 16px;
	cursor: pointer;
}

/* Off-canvas panel layout convention (cart flyout, wishlist, account):
   no padding on the fixed container itself — the header carries
   24px 24px 16px and the scrollable body 0 24px 24px, so all three
   panels line up and the body's scrollbar reaches the panel edge. */
.wooforge-cart-flyout {
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--wooforge-sidebar-width, 320px);
	max-width: 92vw;
	overflow: hidden;
	transition: transform 0.3s ease;
	z-index: 9999;
	background: #fff;
	display: flex;
	flex-direction: column;
}

#wooforge-cart-flyout .widget_shopping_cart_content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
	padding: 0 24px 24px;
}

#wooforge-cart-flyout .wooforge-mini-cart-items {
	flex: 1;
	max-height: none;
	min-height: 0;
	overflow-y: auto;
	margin-bottom: 0;
}

#wooforge-cart-flyout .wooforge-mini-cart-footer {
	flex-shrink: 0;
	padding-top: 16px;
}

.wooforge-cart-flyout--right {
	right: 0;
	transform: translateX(100%);
}

.wooforge-cart-flyout--left {
	left: 0;
	transform: translateX(-100%);
}

.wooforge-cart-flyout.is-open {
	transform: translateX(0);
}

/* ── Shared sidebar-panel header ─────────────────────────────────────────
   Every off-canvas panel (cart flyout, wishlist, account, filters drawer,
   mobile menu) renders the same markup: .wooforge-panel-header >
   .wooforge-panel-title + .wooforge-panel-close. Style it once here;
   per-panel classes below only add spacing differences.               */

.wooforge-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-shrink: 0;
}

.wooforge-panel-title {
	margin: 0;
	font-size: var(--wooforge-fs-widget-title, 18px);
	font-weight: var(--wooforge-fw-widget-title, 600);
	text-transform: var(--wooforge-tt-widget-title, none);
	/* Was an h3 (headings carry line-height 1.25 globally); now a plain div,
	   so keep the same line-height explicitly. */
	line-height: 1.25;
}

.wooforge-panel-close {
	display: flex;
	align-items: center;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
}

.wooforge-cart-flyout-header {
	padding: 24px 24px 16px;
}

.wooforge-filters-drawer-header {
	margin-bottom: 16px;
}

/* Wishlist Panel */
.wooforge-wishlist-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--wooforge-sidebar-width, 320px);
	max-width: 92vw;
	transition: transform 0.3s ease;
	z-index: 9999;
	background: #fff;
	display: flex;
	flex-direction: column;
}

.wooforge-wishlist-panel--right {
	right: 0;
	transform: translateX(100%);
}

.wooforge-wishlist-panel--left {
	left: 0;
	transform: translateX(-100%);
}

.wooforge-wishlist-panel--fullwidth {
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	transform: translateX(100%);
}

.wooforge-wishlist-panel.is-open {
	transform: translateX(0);
}

.wooforge-wishlist-panel-header {
	padding: 24px 24px 16px;
}

.wooforge-wishlist-panel-content {
	padding: 0 24px 24px;
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	min-height: 0;
}

/* Same spinner as .wooforge-ajax-loader (css/woocommerce.css) and
   #wooforge-cart-flyout .blockOverlay::after - reuses the shared
   wooforge-ajax-spin keyframes, just positioned within this panel instead
   of fixed to the viewport or a blockUI overlay. */
.wooforge-wishlist-panel-loading {
	position: relative;
	min-height: 120px;
}

.wooforge-wishlist-panel-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	border: 3px solid rgba(0, 0, 0, .1);
	border-top-color: var(--wooforge-color-accent, currentColor);
	border-radius: 50%;
	animation: wooforge-ajax-spin .65s linear infinite;
}

.wooforge-wishlist-panel-footer {
	flex-shrink: 0;
	padding: 16px 24px 24px;
	border-top: 1px solid var(--wooforge-color-border, #e0e0e0);
}

/* Shares --wooforge-button-height with the other primary buttons - see the
   token's doc comment in woocommerce.css. */
.wooforge-wishlist-panel-show-all {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--wooforge-button-height, 44px);
	box-sizing: border-box;
	text-align: center;
}

.wooforge-wishlist-panel--fullwidth .wooforge-wishlist-panel-header,
.wooforge-wishlist-panel--fullwidth .wooforge-wishlist-panel-content,
.wooforge-wishlist-panel--fullwidth .wooforge-wishlist-panel-footer {
	max-width: var(--wooforge-max-width);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Account Panel */
.wooforge-account-panel {
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--wooforge-sidebar-width, 320px);
	max-width: 92vw;
	background: #fff;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	transition: transform .3s ease;
}

.wooforge-account-panel--right {
	right: 0;
	transform: translateX(100%);
}

.wooforge-account-panel--left {
	left: 0;
	transform: translateX(-100%);
}

.wooforge-account-panel.is-open {
	transform: translateX(0);
}

/* Header row itself comes from the shared .wooforge-panel-header /
   .wooforge-panel-title / .wooforge-panel-close classes above; spacing
   follows the shared panel convention (see .wooforge-cart-flyout). */
.wooforge-account-panel-header {
	padding: 24px 24px 16px;
}

.wooforge-account-panel-body {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 24px 24px;
	min-height: 0;
}

/* Login/register forms inside the panel */
.wooforge-account-panel-body .woocommerce-form-login,
.wooforge-account-panel-body .woocommerce-form-register {
	border: none;
	padding: 0;
	box-shadow: none;
}

.wooforge-account-panel-body .woocommerce-form-login .form-row,
.wooforge-account-panel-body .woocommerce-form-register .form-row {
	padding: 0;
	margin: 0 0 14px;
}

.wooforge-account-panel-body label {
	display: block;
	margin-bottom: 4px;
	font-size: var(--wooforge-fs-form-label, 14px);
}

.wooforge-account-panel-body .input-text {
	width: 100%;
	padding: 10px;
	border: 1px solid #d5d5d5;
	box-sizing: border-box;
}

/* Full width in the panel; everything else comes from the shared button
   block further down. */
.wooforge-account-panel-body .button {
	width: 100%;
}

.wooforge-account-panel-switch {
	margin: 16px 0 0;
	font-size: 14px;
	color: #666;
}

.wooforge-account-panel-switch button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: inherit;
	color: var(--wooforge-color-accent);
	text-decoration: underline;
}

/* "Continue with Google" (WooForge_Google_Login::render_button()) - shared,
   unscoped rules so the same markup looks right both on the My Account page
   (woocommerce/myaccount/form-login.php) and the header's account flyout
   panel (#wooforge-account-panel), without duplicating the CSS per context. */
.wooforge-google-login-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
	font-size: var(--wooforge-fs-eyebrow, 12px);
	color: #999;
	text-transform: var(--wooforge-tt-eyebrow, uppercase);
}

.wooforge-google-login-divider::before,
.wooforge-google-login-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e0e0e0;
}

/* Sits directly under the login submit, so it reads the same
   --wooforge-button-height token - see the shared block in
   css/woocommerce.css. */
.wooforge-google-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: var(--wooforge-button-height, 44px);
	padding: 11px;
	background: #fff;
	color: #3c4043;
	border: 1px solid #d5d5d5;
	border-radius: var(--wooforge-radius-button, 0);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	box-sizing: border-box;
	transition: box-shadow .15s, background .15s;
}

.wooforge-google-login-btn:hover {
	background: #f8f8f8;
	color: #3c4043;
}

.wooforge-google-login-icon {
	flex-shrink: 0;
}

/* ── Buttons ───────────────────────────────────────────────────────────
   ONE look for every button on the site, WooCommerce's and the theme's
   alike. WooCommerce marks its own with .button and puts .alt on the
   single emphasised call to action in a view (Place order, Proceed to
   checkout, Pay); the theme's own buttons - [wooforge_button], the contact
   form submit - carry the same two classes, so there is one definition to
   retune instead of two that drift apart.

   It lives HERE and not in css/woocommerce.css because that file loads only
   on shop pages, and a [wooforge_button] on an ordinary page has to look
   like a button too. That is what it used to fall foul of.

   Each kind also keeps a class of its own - .wooforge-button,
   .wooforge-form-submit - which this block deliberately does not touch.
   They are hooks: restyle one kind of button without reaching the rest. */
a.button,
button.button,
input.button,
.wooforge-button {
	padding: 10px 16px;
	min-height: var(--wooforge-button-height, 44px);
	box-sizing: border-box;
	background: var(--wooforge-color-primary);
	color: #fff;
	border: none;
	border-radius: var(--wooforge-radius-button, 0);
	text-decoration: none;
	cursor: pointer;
	transition: opacity .15s;
}

/* Centring the label takes a flex box, which an <input> cannot be - it has
   no children to lay out, and it centres its own label anyway. */
a.button,
button.button,
.wooforge-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* The one emphasised action in a view. A separate rule on purpose: this is
   the line to change to make primary buttons a different colour, size or
   width without touching the other twenty buttons on the page. */
a.button.alt,
button.button.alt,
input.button.alt {
	background: var(--wooforge-color-accent, var(--wooforge-color-primary));
}

a.button:hover,
button.button:hover,
input.button:hover,
.wooforge-button:hover {
	color: #fff;
}

/* Sending, adding to cart, anything mid-request. A button that still looks
   clickable invites the second click that submits twice. */
button.button:disabled,
input.button:disabled {
	opacity: .6;
	cursor: default;
}

.wooforge-button-icon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	display: block;
}

/* Icon inside toolbar buttons ([wooforge_archive_filters_button icon=""],
   [wooforge_archive_sorting icon=""]). */
.wooforge-toolbar-btn-icon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	display: block;
}
/* Standard WordPress visually-hidden utility. Added when the checkout review
   table gained a remove column whose header has no visible caption but still
   needs an accessible name - without this class defined anywhere in the theme,
   that caption rendered as plain visible text in the header row. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}