/*
 * WooCommerce design-token bridge.
 *
 * Maps GF's --gf-* custom properties onto WooCommerce block CSS selectors so
 * WooCommerce pages (cart, checkout, single product, account) inherit the
 * site's design tokens. Uses :where() to stay below WooCommerce's own
 * specificity for structural layout while overriding surface properties
 * (colour, spacing, typography, radius, shadow).
 *
 * Conditionally enqueued by WooCommerce\Bridge.php only when WooCommerce is
 * active. Does not duplicate WooCommerce's layout logic.
 *
 * Every --gf-* name read here must be one the plugin defines:
 * check:token-definitions scans *bridge*.css and does not accept a fallback as
 * an excuse, because an undefined name means the fallback literal always wins.
 * Body text on a surface WooCommerce or the theme paints keeps `inherit`, so it
 * follows a dark section (.gf-ink-on-dark sets the ink but does not redefine
 * --gf-text-on-light). --gf-text-on-light is read only inside GF's own product
 * card, which paints its own light surface. Secondary text reads --gf-text-muted,
 * as GF's own blocks do: the dark scheme and the is-style-dark / dark-scrim
 * grounds redefine it, .gf-ink-on-dark does not. Never --gf-color-dark, and never
 * --gf-color-muted, which is a SURFACE. Row hovers are a wash of the current
 * ink, so they stay faint on light and dark sections alike. A white-ink fill reads --gf-color-primary-fill, the
 * primary darkened where white needs it; its hover is the same 88% mix GF's own
 * buttons use. Fonts are `inherit`: GF never picks a face
 * (check:font-follows-site), so there is no font token to read.
 */

/* ---------------------------------------------------------------------------
 * Buttons: primary actions inherit GF's primary colour and radius
 * --------------------------------------------------------------------------- */

/*
 * Specificity (0,1,1) at rest and (0,2,1) on hover, not 0. Core's global
 * styles paint every .wp-element-button through
 * `:root :where(.wp-element-button, .wp-block-button__link)` at (0,1,0), and
 * a zero-specificity rule lost to it: the single-product Add to cart showed
 * core's #32373c at rest and kept its resting fill under :hover (QA, forced
 * :hover through CDP). `:root` and the element list outrank that rule wherever
 * it is printed; the class list stays inside :where(), so the weight is the
 * same for every button named here.
 */
:root :where(
  .wc-block-components-button:not(.is-link),
  .wc-block-components-checkout-place-order-button,
  .wc-block-cart__submit-button,
  .single_add_to_cart_button,
  .wp-element-button.wc-block-components-product-button__button
):is(a, button, input) {
  background-color: var(--gf-color-primary-fill, #1d4ed8);
  color: var(--gf-text-on-dark, #fff);
  border-radius: var(--gf-radius-md, 6px);
  font-family: inherit;
  border: none;
}

:root :where(
  .wc-block-components-button:not(.is-link),
  .single_add_to_cart_button,
  .wp-element-button.wc-block-components-product-button__button
):is(a, button, input):hover {
  background-color: color-mix(in srgb, var(--gf-color-primary-fill, #1d4ed8) 88%, black);
  color: var(--gf-text-on-dark, #fff);
}

/* ---------------------------------------------------------------------------
 * Inputs: form fields inherit GF's border and radius
 * --------------------------------------------------------------------------- */

:where(.wc-block-components-text-input input),
:where(.wc-block-components-text-input textarea),
:where(.wc-block-components-select .wc-block-components-select__container),
:where(.wc-block-components-combobox .wc-block-components-combobox__input) {
  border-color: var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-sm, 4px);
  font-family: inherit;
}

:where(.wc-block-components-text-input input:focus),
:where(.wc-block-components-text-input textarea:focus) {
  border-color: var(--gf-color-primary, #4f46e5);
  box-shadow: 0 0 0 1px var(--gf-color-primary, #4f46e5);
}

/* ---------------------------------------------------------------------------
 * Typography: WooCommerce elements inherit GF's type scale
 * --------------------------------------------------------------------------- */

:where(.wc-block-components-product-name),
:where(.woocommerce-loop-product__title),
:where(.product_title) {
  font-family: inherit;
}

:where(.wc-block-components-product-price),
:where(.woocommerce-Price-amount) {
  font-family: inherit;
  color: inherit;
}

:where(.wc-block-components-product-price .wc-block-components-product-price__value--on-sale),
:where(.woocommerce-Price-amount del) {
  color: var(--gf-text-muted, #757575);
}

/* ---------------------------------------------------------------------------
 * Product images: radius and shadow
 * --------------------------------------------------------------------------- */

:where(.wc-block-components-product-image img),
:where(.woocommerce-product-gallery img) {
  border-radius: var(--gf-radius-md, 6px);
}

/* ---------------------------------------------------------------------------
 * Cards and panels: cart/checkout sections
 * --------------------------------------------------------------------------- */

:where(.wc-block-components-totals-wrapper),
:where(.wc-block-components-panel),
:where(.wc-block-components-order-summary) {
  border-color: var(--gf-color-border, #e0e0e0);
}

:where(.wc-block-components-sidebar-layout .wc-block-components-main) {
  font-family: inherit;
}

/* ---------------------------------------------------------------------------
 * Sale badge: uses GF's success colour
 * --------------------------------------------------------------------------- */

:where(.wc-block-components-sale-badge),
:where(.onsale) {
  background-color: var(--gf-color-success, #16a34a);
  color: var(--gf-text-on-dark, #fff);
  border-radius: var(--gf-radius-sm, 4px);
}

/* ---------------------------------------------------------------------------
 * Notices: error/success/info
 * --------------------------------------------------------------------------- */

:where(.wc-block-components-notice-banner.is-error) {
  border-color: var(--gf-color-danger, #b91c1c);
}

:where(.wc-block-components-notice-banner.is-success) {
  border-color: var(--gf-color-success, #16a34a);
}

:where(.wc-block-components-notice-banner.is-info) {
  border-color: var(--gf-color-primary, #4f46e5);
}

/*
 * Notice grounds follow the scheme. WooCommerce paints every banner with a
 * literal pale ground (#fff, #f4fff7 success, #fff0f0 error, #f4f8ff info,
 * #fffbf4 warning) and #2f2f2f ink, so under the dark scheme the "added to
 * your cart" notice was a light island. Here the ground is the scheme's
 * surface with a 10% wash of the tone, and the ink is the ink around it.
 * WooCommerce's rules are (0,1,0) and (0,2,0) literals, so these sit one
 * class above them via :root. The "View cart" link and the dismiss button
 * carry `color: #2f2f2f !important`; -webkit-text-fill-color paints the link
 * text without an !important war, and the dismiss icon's fill is set directly.
 */
:root .wc-block-components-notice-banner {
  background-color: var(--gf-color-surface, #fff);
  color: inherit;
}

:root .wc-block-components-notice-banner.is-success {
  background-color: color-mix(in srgb, var(--gf-color-success, #16a34a) 10%, var(--gf-color-surface, #fff));
}

:root .wc-block-components-notice-banner.is-error {
  background-color: color-mix(in srgb, var(--gf-color-danger, #b91c1c) 10%, var(--gf-color-surface, #fff));
}

:root .wc-block-components-notice-banner.is-info {
  background-color: color-mix(in srgb, var(--gf-color-primary, #4f46e5) 10%, var(--gf-color-surface, #fff));
}

:root .wc-block-components-notice-banner.is-warning {
  background-color: color-mix(in srgb, var(--gf-color-warning, #b45309) 10%, var(--gf-color-surface, #fff));
}

:where(.wc-block-components-notice-banner .wc-forward) {
  -webkit-text-fill-color: var(--gf-text-on-light, #111827);
}

:where(.wc-block-components-notice-banner > .wc-block-components-button svg) {
  fill: var(--gf-text-on-light, #111827);
}

/* ---------------------------------------------------------------------------
 * Quantity selector
 * --------------------------------------------------------------------------- */

:where(.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input) {
  border-color: var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-sm, 4px);
}

/*
 * The classic quantity box beside a single product's Add to cart. GF's base
 * reset (`*, ::before, ::after { border: 0 solid }`) removed its border and
 * WooCommerce draws none, so in either scheme the number floated with no box.
 */
:where(.quantity .qty) {
  border: 1px solid var(--gf-color-border, #d8dee6);
  border-radius: var(--gf-radius-sm, 4px);
  background-color: var(--gf-color-surface, #fff);
  color: inherit;
  padding: 0.5em 0.25em;
}

/*
 * The single product review form's fields: the same bare-field case as the
 * quantity box above. The base reset removed their borders and WooCommerce draws
 * none, so the comment box, Name and Email had no visible edge in either scheme.
 * Same tokens as `.qty`, so they follow the scheme. Scoped to #review_form
 * (WooCommerce's review form wrapper) so the blog's own comment form, which the
 * theme styles, is untouched while WooCommerce is active.
 */
#review_form .comment-form-comment textarea,
#review_form :is(#author, #email, #url) {
  border: 1px solid var(--gf-color-border, #d8dee6);
  border-radius: var(--gf-radius-sm, 4px);
  background-color: var(--gf-color-surface, #fff);
  color: inherit;
  font-family: inherit;
  padding: 0.5em 0.75em;
  width: 100%;
  box-sizing: border-box;
}

#review_form .comment-form-comment textarea:focus,
#review_form :is(#author, #email, #url):focus {
  border-color: var(--gf-color-primary, #4f46e5);
  box-shadow: 0 0 0 1px var(--gf-color-primary, #4f46e5);
}

/* ---------------------------------------------------------------------------
 * Links inside WooCommerce blocks
 * --------------------------------------------------------------------------- */

:where(.wc-block-components-main a:not(.wc-block-components-button)),
:where(.woocommerce a.woocommerce-LoopProduct-link) {
  color: var(--gf-color-primary, #4f46e5);
}

/* ---------------------------------------------------------------------------
 * Post Loop product cards (GF's own cards for WooCommerce products)
 *
 * Product cards use a two-region structure:
 *   __media-wrap  — positioned, clips image, holds badge + hover overlay
 *   __body        — padded text content, flex column, button at bottom
 *
 * The card's own padding is zeroed so the image bleeds to the edges.
 * --------------------------------------------------------------------------- */

/* Card container: edge-to-edge image via zero padding, flex column layout.
   Specificity must beat .gf-card.gf-card-padding-lg (0,2,0) which sits outside
   @layer in surfaces.css. Three classes gives (0,3,0) so load order can't lose. */
.gf-post-loop__item--product.gf-card.gf-card-padding-lg {
  padding: 0;
}

.gf-post-loop__item--product.gf-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.gf-post-loop__item--product.gf-card:hover {
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.12);
  transform: translateY(-4px);
}

/* Media wrapper: positioned context for badge + overlay. */
.gf-post-loop__media-wrap {
  position: relative;
  overflow: hidden;
}

/* Image box inside the wrapper. */
.gf-post-loop__item--product .gf-post-loop__media {
  margin: 0;
}

/* Product image: fill, cover, scale on hover. */
.gf-post-loop__item--product .gf-post-loop__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.gf-post-loop__item--product:hover .gf-post-loop__media img {
  transform: scale(1.05);
}

/* Gradient overlay: fades in on card hover, darkens bottom of image. */
.gf-post-loop__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.35) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.gf-post-loop__item--product:hover .gf-post-loop__media-overlay {
  opacity: 1;
}

/* Badge: absolute over the image, pill shape, uppercase. */
.gf-post-loop__badge--overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--gf-radius-sm, 4px);
  background: var(--gf-color-success, #16a34a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.gf-post-loop__badge--muted {
  background: var(--gf-color-dark, #111827);
}

/* Body: padded content area, flex column so button stays at bottom. */
.gf-post-loop__body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Product price: prominent, clear sale/original hierarchy. */
.gf-post-loop__item--product .gf-post-loop__price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gf-text-on-light, #111827);
  line-height: 1.3;
}

.gf-post-loop__item--product .gf-post-loop__price del {
  color: var(--gf-text-muted, #757575);
  font-weight: 400;
  font-size: 0.8em;
  text-decoration: line-through;
}

.gf-post-loop__item--product .gf-post-loop__price ins {
  text-decoration: none;
  color: var(--gf-color-primary, #4f46e5);
  font-weight: 700;
}

/* Product card button: full width, pinned to card bottom. */
.gf-post-loop__item--product .gf-button {
  width: 100%;
  justify-content: center;
  margin-block-start: auto;
  padding-block: 10px;
}

/* Hide publish date on product cards — products don't need it. */
.gf-post-loop__item--product .gf-post-loop__meta {
  display: none;
}

/* Product title: clean link, colour transition on hover. */
.gf-post-loop__item--product .gf-heading a {
  text-decoration: none;
  color: var(--gf-text-on-light, #111827);
  transition: color 0.15s ease;
}

.gf-post-loop__item--product .gf-heading a:hover {
  color: var(--gf-color-primary, #4f46e5);
}

/* ---------------------------------------------------------------------------
 * Single product page
 * --------------------------------------------------------------------------- */

/* Gallery images: radius from tokens, subtle shadow. */
:where(.woocommerce-product-gallery) {
  border-radius: var(--gf-radius-lg, 8px);
  overflow: hidden;
}

:where(.woocommerce-product-gallery .woocommerce-product-gallery__image img) {
  border-radius: var(--gf-radius-md, 6px);
}

/* Product price on single page: larger, bolder. */
:where(.wc-block-components-product-price.wc-block-grid__product-price) {
  font-size: 1.5rem;
  font-weight: 700;
}

/* Tabs: match GF tab styling. */
:where(.wc-block-components-product-details .wc-tab) {
  font-family: inherit;
}

:where(.woocommerce-Tabs-panel) {
  font-family: inherit;
}

:where(.woocommerce-tabs ul.tabs li a),
:where(.wc-block-components-tab-panel__tab-button) {
  font-family: inherit;
  color: inherit;
  text-decoration: none;
}

/*
 * Classic product tabs (Description / Reviews). WooCommerce draws them with
 * literal colours at (0,4,2) -- #e9e6ed tabs, a #fff active tab, #cfc8d8
 * borders, and the same colours again in the box-shadows that fake the tab
 * corners -- so under the dark scheme the Reviews tab stayed a white island.
 * The same selectors one :root higher re-point every one of those colours at
 * the scheme's surfaces; the active tab is the page surface, so it still
 * merges with the panel below.
 */
:root .woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom-color: var(--gf-color-border, #d8dee6);
}

:root .woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: var(--gf-color-muted, #f3f6f8);
  border-color: var(--gf-color-border, #d8dee6);
  color: inherit;
}

:root .woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background-color: var(--gf-color-surface, #fff);
  color: inherit;
  border-bottom-color: var(--gf-color-surface, #fff);
}

:root .woocommerce div.product .woocommerce-tabs ul.tabs li::before,
:root .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  border-color: var(--gf-color-border, #d8dee6);
}

:root .woocommerce div.product .woocommerce-tabs ul.tabs li::before {
  box-shadow: 2px 2px 0 var(--gf-color-muted, #f3f6f8);
}

:root .woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  box-shadow: -2px 2px 0 var(--gf-color-muted, #f3f6f8);
}

:root .woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
  box-shadow: 2px 2px 0 var(--gf-color-surface, #fff);
}

:root .woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
  box-shadow: -2px 2px 0 var(--gf-color-surface, #fff);
}

:root .woocommerce div.product .woocommerce-tabs ul.tabs li a,
:root .woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: inherit;
}

:where(.woocommerce-tabs ul.tabs li.active a),
:where(.wc-block-components-tab-panel__tab-button[aria-selected="true"]) {
  color: var(--gf-color-primary, #4f46e5);
  border-color: var(--gf-color-primary, #4f46e5);
}

/* Related products grid: inherit GF spacing. */
:where(.wc-block-related-products .wc-block-grid) {
  gap: var(--wp--preset--spacing--md, 1.5rem);
}

:where(.wc-block-related-products .wc-block-grid__product) {
  border-radius: var(--gf-radius-md, 6px);
}

/* ---------------------------------------------------------------------------
 * Cart page styling
 * --------------------------------------------------------------------------- */

:where(.wc-block-cart .wc-block-cart__main) {
  font-family: inherit;
}

:where(.wc-block-cart-items .wc-block-cart-items__row) {
  border-color: var(--gf-color-border, #e0e0e0);
}

:where(.wc-block-cart-items .wc-block-cart-items__row:hover) {
  background: color-mix(in srgb, currentColor 2%, transparent);
}

:where(.wc-block-components-quantity-selector) {
  border-color: var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-sm, 4px);
}

/* Cart totals: sticky sidebar so it follows the items on scroll. */
:where(.wc-block-cart .wc-block-cart__sidebar) {
  position: sticky;
  top: 2rem;
  align-self: start;
}

/* ---------------------------------------------------------------------------
 * Checkout page styling
 * --------------------------------------------------------------------------- */

:where(.wc-block-checkout .wc-block-checkout__form) {
  font-family: inherit;
}

:where(.wc-block-checkout .wc-block-components-express-payment) {
  border-color: var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-md, 6px);
}

:where(.wc-block-checkout .wc-block-components-payment-method-label) {
  font-family: inherit;
}

:where(.wc-block-checkout .wc-block-components-order-summary) {
  border-radius: var(--gf-radius-md, 6px);
  border-color: var(--gf-color-border, #e0e0e0);
}

/* Checkout order summary: sticky sidebar so it follows the form on scroll. */
:where(.wc-block-checkout .wc-block-components-sidebar-layout .wc-block-components-sidebar) {
  position: sticky;
  top: 2rem;
  align-self: start;
}

/* ---------------------------------------------------------------------------
 * My Account page
 * --------------------------------------------------------------------------- */

/* My Account: two-column layout (sidebar nav + content). */
:where(.woocommerce-MyAccount-navigation) {
  min-width: 200px;
}

:where(.woocommerce-MyAccount-navigation ul) {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

:where(.woocommerce-MyAccount-navigation li a) {
  display: block;
  padding: 10px 16px;
  border-radius: var(--gf-radius-sm, 4px);
  color: inherit;
  text-decoration: none;
  font-family: inherit;
  font-size: 0.9375rem;
  transition: background 0.15s, color 0.15s;
}

:where(.woocommerce-MyAccount-navigation li a:hover) {
  background: color-mix(in srgb, currentColor 4%, transparent);
}

:where(.woocommerce-MyAccount-navigation li.is-active a) {
  background: var(--gf-color-primary-fill, #1d4ed8);
  color: var(--gf-text-on-dark, #fff);
}

/* My Account: content area typography. */
:where(.woocommerce-MyAccount-content) {
  font-family: inherit;
}

:where(.woocommerce-MyAccount-content h2),
:where(.woocommerce-MyAccount-content h3) {
  font-family: inherit;
}

/* My Account: order history table. */
:where(.woocommerce-orders-table) {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
}

:where(.woocommerce-orders-table th) {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--gf-color-border, #e0e0e0);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gf-text-muted, #757575);
}

:where(.woocommerce-orders-table td) {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gf-color-border, #e0e0e0);
  vertical-align: middle;
}

:where(.woocommerce-orders-table tr:hover td) {
  background: color-mix(in srgb, currentColor 2%, transparent);
}

:where(.woocommerce-orders-table .woocommerce-button) {
  font-size: 0.8125rem;
  padding: 6px 14px;
  border-radius: var(--gf-radius-sm, 4px);
  background: var(--gf-color-primary-fill, #1d4ed8);
  color: var(--gf-text-on-dark, #fff);
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s;
}

:where(.woocommerce-orders-table .woocommerce-button:hover) {
  background: color-mix(in srgb, var(--gf-color-primary-fill, #1d4ed8) 88%, black);
}

/* My Account: addresses (billing/shipping cards). */
:where(.woocommerce-Addresses) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wp--preset--spacing--md, 1.5rem);
}

:where(.woocommerce-Address) {
  border: 1px solid var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-md, 6px);
  padding: 24px;
}

:where(.woocommerce-Address-title) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

:where(.woocommerce-Address-title h3) {
  font-family: inherit;
  margin: 0;
}

:where(.woocommerce-Address-title .edit) {
  font-size: 0.8125rem;
  color: var(--gf-color-primary, #4f46e5);
  text-decoration: none;
}

:where(.woocommerce-Address-title .edit:hover) {
  text-decoration: underline;
}

:where(.woocommerce-Address address) {
  font-style: normal;
  line-height: 1.6;
  color: inherit;
}

/* Legacy two-column address layout (col2-set). */
:where(.col2-set.addresses) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wp--preset--spacing--md, 1.5rem);
}

:where(.col2-set.addresses .col-1),
:where(.col2-set.addresses .col-2) {
  border: 1px solid var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-md, 6px);
  padding: 24px;
}

/* My Account: account details form. */
:where(.woocommerce-EditAccountForm) {
  font-family: inherit;
}

:where(.woocommerce-EditAccountForm .woocommerce-form-row) {
  margin-bottom: 16px;
}

:where(.woocommerce-EditAccountForm label) {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.875rem;
  color: inherit;
}

:where(.woocommerce-EditAccountForm .woocommerce-Input),
:where(.woocommerce-EditAccountForm .input-text) {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-sm, 4px);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

:where(.woocommerce-EditAccountForm .woocommerce-Input:focus),
:where(.woocommerce-EditAccountForm .input-text:focus) {
  border-color: var(--gf-color-primary, #4f46e5);
  box-shadow: 0 0 0 1px var(--gf-color-primary, #4f46e5);
  outline: none;
}

:where(.woocommerce-EditAccountForm fieldset) {
  border: 1px solid var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-md, 6px);
  padding: 24px;
  margin-top: 24px;
}

:where(.woocommerce-EditAccountForm fieldset legend) {
  font-weight: 600;
  padding: 0 8px;
  font-family: inherit;
}

:where(.woocommerce-EditAccountForm .woocommerce-Button) {
  background: var(--gf-color-primary-fill, #1d4ed8);
  color: var(--gf-text-on-dark, #fff);
  border: none;
  border-radius: var(--gf-radius-md, 6px);
  padding: 12px 28px;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
}

:where(.woocommerce-EditAccountForm .woocommerce-Button:hover) {
  background: color-mix(in srgb, var(--gf-color-primary-fill, #1d4ed8) 88%, black);
}

/* My Account: login/register forms. */
:where(.woocommerce-form-login),
:where(.woocommerce-form-register) {
  font-family: inherit;
  border: 1px solid var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-md, 6px);
  padding: 32px;
}

:where(.woocommerce-form-login h2),
:where(.woocommerce-form-register h2) {
  font-family: inherit;
  margin-top: 0;
}

:where(.woocommerce-form-login .woocommerce-form-row),
:where(.woocommerce-form-register .woocommerce-form-row) {
  margin-bottom: 16px;
}

:where(.woocommerce-form-login label),
:where(.woocommerce-form-register label) {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 0.875rem;
}

:where(.woocommerce-form-login .input-text),
:where(.woocommerce-form-register .input-text) {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-sm, 4px);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

:where(.woocommerce-form-login .input-text:focus),
:where(.woocommerce-form-register .input-text:focus) {
  border-color: var(--gf-color-primary, #4f46e5);
  box-shadow: 0 0 0 1px var(--gf-color-primary, #4f46e5);
  outline: none;
}

:where(.woocommerce-form-login .woocommerce-button),
:where(.woocommerce-form-register .woocommerce-button) {
  background: var(--gf-color-primary-fill, #1d4ed8);
  color: var(--gf-text-on-dark, #fff);
  border: none;
  border-radius: var(--gf-radius-md, 6px);
  padding: 12px 28px;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
  width: 100%;
}

:where(.woocommerce-form-login .woocommerce-button:hover),
:where(.woocommerce-form-register .woocommerce-button:hover) {
  background: color-mix(in srgb, var(--gf-color-primary-fill, #1d4ed8) 88%, black);
}

:where(.woocommerce-LostPassword) {
  margin-top: 12px;
  font-size: 0.875rem;
}

:where(.woocommerce-LostPassword a) {
  color: var(--gf-color-primary, #4f46e5);
  text-decoration: none;
}

:where(.woocommerce-LostPassword a:hover) {
  text-decoration: underline;
}

/* Login/register two-column layout. */
:where(#customer_login.col2-set) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--wp--preset--spacing--lg, 2rem);
}

/* My Account: downloads table. */
:where(.woocommerce-table--order-downloads) {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
}

:where(.woocommerce-table--order-downloads th) {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--gf-color-border, #e0e0e0);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gf-text-muted, #757575);
}

:where(.woocommerce-table--order-downloads td) {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gf-color-border, #e0e0e0);
}

/* My Account: pagination. */
:where(.woocommerce-pagination) {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 24px;
}

:where(.woocommerce-pagination .woocommerce-button) {
  padding: 8px 18px;
  border-radius: var(--gf-radius-sm, 4px);
  background: var(--gf-color-primary-fill, #1d4ed8);
  color: var(--gf-text-on-dark, #fff);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.15s;
}

:where(.woocommerce-pagination .woocommerce-button:hover) {
  background: color-mix(in srgb, var(--gf-color-primary-fill, #1d4ed8) 88%, black);
}

/* ---------------------------------------------------------------------------
 * Order Confirmation page
 * --------------------------------------------------------------------------- */

/* Status: success message styling. */
:where(.wc-block-order-confirmation-status) {
  font-family: inherit;
}

:where(.wc-block-order-confirmation-status h1),
:where(.wc-block-order-confirmation-status h2) {
  font-family: inherit;
}

/* Summary: order number, date, email, total. */
:where(.wc-block-order-confirmation-summary) {
  font-family: inherit;
  border: 1px solid var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-md, 6px);
  padding: 24px;
}

:where(.wc-block-order-confirmation-summary-list-item__key) {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gf-text-muted, #757575);
}

:where(.wc-block-order-confirmation-summary-list-item__value) {
  color: inherit;
}

/* Totals: line items and total. */
:where(.wc-block-order-confirmation-totals) {
  font-family: inherit;
}

:where(.wc-block-order-confirmation-totals .wc-block-components-totals-wrapper) {
  border-color: var(--gf-color-border, #e0e0e0);
}

:where(.wc-block-order-confirmation-totals .wc-block-components-totals-item__label) {
  font-weight: 500;
}

:where(.wc-block-order-confirmation-totals .wc-block-components-totals-footer-item .wc-block-components-totals-item__label),
:where(.wc-block-order-confirmation-totals .wc-block-components-totals-footer-item .wc-block-components-totals-item__value) {
  font-weight: 700;
  font-size: 1.125rem;
}

/* Addresses on order confirmation: card style. */
:where(.wc-block-order-confirmation-address-wrapper),
:where(.woocommerce-order-confirmation-address-wrapper) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wp--preset--spacing--md, 1.5rem);
}

:where(.wc-block-order-confirmation-shipping-wrapper),
:where(.wc-block-order-confirmation-billing-wrapper) {
  border: 1px solid var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-md, 6px);
  padding: 24px;
  font-family: inherit;
}

:where(.wc-block-order-confirmation-shipping-address h3),
:where(.wc-block-order-confirmation-billing-address h3) {
  font-family: inherit;
  margin-top: 0;
}

:where(.wc-block-order-confirmation-shipping-address address),
:where(.wc-block-order-confirmation-billing-address address) {
  font-style: normal;
  line-height: 1.6;
}

/* Downloads on order confirmation. */
:where(.wc-block-order-confirmation-downloads) {
  font-family: inherit;
}

/* Order confirmation: status actions (pay/cancel links). */
:where(.wc-block-order-confirmation-status__actions a) {
  color: var(--gf-color-primary, #4f46e5);
  text-decoration: none;
}

:where(.wc-block-order-confirmation-status__actions a:hover) {
  text-decoration: underline;
}

/* Classic thank-you page selectors (legacy templates). */
:where(.woocommerce-order) {
  font-family: inherit;
}

:where(.woocommerce-thankyou-order-received) {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gf-color-success, #16a34a);
}

:where(.woocommerce-order-overview) {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  border: 1px solid var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-md, 6px);
  padding: 24px;
}

/* The value (<strong>) sits inside the label's <li>, so muting the <li> would
   mute the value too. Only the label's line is muted: the <strong> is a block,
   so it is not part of the first line and keeps the inherited ink. */
:where(.woocommerce-order-overview li) {
  font-size: 0.875rem;
}

:where(.woocommerce-order-overview li)::first-line {
  color: var(--gf-text-muted, #757575);
}

:where(.woocommerce-order-overview li strong) {
  display: block;
  font-size: 1rem;
  color: inherit;
}

:where(.woocommerce-table--order-details) {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
}

:where(.woocommerce-table--order-details th) {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--gf-color-border, #e0e0e0);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gf-text-muted, #757575);
}

:where(.woocommerce-table--order-details td) {
  padding: 14px 16px;
  border-bottom: 1px solid var(--gf-color-border, #e0e0e0);
}

:where(.woocommerce-table--order-details tfoot th),
:where(.woocommerce-table--order-details tfoot td) {
  border-bottom: 1px solid var(--gf-color-border, #e0e0e0);
}

:where(.woocommerce-customer-details) {
  font-family: inherit;
}

:where(.woocommerce-columns--2.addresses) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wp--preset--spacing--md, 1.5rem);
}

:where(.woocommerce-column--billing-address),
:where(.woocommerce-column--shipping-address) {
  border: 1px solid var(--gf-color-border, #e0e0e0);
  border-radius: var(--gf-radius-md, 6px);
  padding: 24px;
}

:where(.woocommerce-column__title) {
  font-family: inherit;
  margin-top: 0;
}

:where(.woocommerce-customer-details address) {
  font-style: normal;
  line-height: 1.6;
}

/* ---------------------------------------------------------------------------
 * Product category cards (woocommerce/product-categories block)
 * --------------------------------------------------------------------------- */

:where(.wc-block-product-categories-list--has-images) {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--wp--preset--spacing--md, 1.5rem);
}

:where(.wc-block-product-categories-list-item) {
  border-radius: var(--gf-radius-md, 6px);
  overflow: hidden;
  border: 1px solid var(--gf-color-border, #e0e0e0);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

:where(.wc-block-product-categories-list-item:hover) {
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.12);
  transform: translateY(-4px);
}

:where(.wc-block-product-categories-list-item a) {
  text-decoration: none;
  color: inherit;
  display: block;
}

:where(.wc-block-product-categories-list-item__image) {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

:where(.wc-block-product-categories-list-item__name) {
  display: block;
  padding: 16px 20px;
  font-family: inherit;
  font-weight: 600;
  font-size: 1.0625rem;
}

:where(.wc-block-product-categories-list-item__count) {
  color: var(--gf-text-muted, #757575);
  font-size: 0.8125rem;
  font-weight: 400;
}