/* ==========================================================================
   BneuTech — WooCommerce component overrides
   ==========================================================================

   Ground rules for this file:

   1. assets/css/bneutech-base.css is a BYTE COPY of the live static stylesheet
      (public/css/styles.css). Never restate a declaration that already resolves there —
      a "helpful" extra colour or size is exactly how the port stops matching the live
      pixels. Read the base file first; only add what has no rule at all.

   2. The live catalogue card (public/js/products.js -> cardHtml()) is the contract for
      the loop. Only the differences WordPress/WooCommerce force are fixed here:

        live:  <a class="product-card reveal">…</a>
        here:  <li class="product-card reveal …"><a class="card-link">…</a></li>
        live:  <div class="products-grid">        (JS-rendered, no list item)
        here:  <ul class="products columns-3">    (WooCommerce loop contract)
        live:  —                                  (no sale flash, rating or quick-add)
        here:  —                                  (unhooked in functions.php)

      The card internals (.card-head, .logo, .title, .badge, .body, .foot) keep the exact
      class names products.js emits, so the base CSS styles the WordPress cards with the
      same pixels the static catalogue gets. Nothing below restates them.

   3. Everything WooCommerce adds that the static site never had (notices, pagination,
      the single-product gallery, tabs, quantity inputs, cart/checkout tables, forms) is
      built in the design's language only: same custom properties, radii, gradients and
      .btn metrics as the base CSS.

   Load order (functions.php -> bneutech_enqueue_assets):
     bneutech-base -> components -> WooCommerce's own sheets -> THIS FILE -> style.css
   ========================================================================== */

/* ---------- Catalogue grid: WooCommerce's <ul class="products"> at .products-grid metrics ----------
   Values copied verbatim from `.products-grid` (bneutech-base.css line 193):
   display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)).
   `margin:0; padding:0` only cancels the UA list defaults — the live page puts
   `<div id="grid" class="products-grid">` in exactly this position (a .container child
   under `<section style="padding-top:40px">`), and its grid box carries no margin of its
   own, so any bottom margin here would push the WordPress page 32px taller than the
   static one. Measured: _tools/parity/run-parity.py. */
.woocommerce ul.products,
.woocommerce-page ul.products {
	clear: none;
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WooCommerce prints `ul.products::before/::after { content:" "; display:table; clear:both }`
   to clear floats. Inside a CSS grid those two pseudo-elements are real grid items, so the
   first product was placed in cell 2 and the whole catalogue shifted - the live shop showed
   a hole at the top-left and rows of 2-3-3 instead of 3-3-2 (and the grid box grew far taller
   than its cards). There are no floats in a grid, so they are not needed. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

/* ---------- The card item: the cascade bug that broke the live shop ----------
   WooCommerce ships this in woocommerce-layout.css:

     .woocommerce ul.products li.product            { float:left; margin:0 3.8% 2.992em 0;
                                                      padding:0; position:relative;
                                                      width:22.05%; margin-left:0 }  (0,3,2)
     .woocommerce      ul.products.columns-3 li.product { width:30.75% }             (0,4,2)
     .woocommerce-page ul.products.columns-3 li.product { width:30.75% }             (0,4,2)

   The old selector here was `ul.products li.product.product-card` — (0,3,2). It tied with the
   first rule and won on order (this file is enqueued after WooCommerce's), but it LOST to the
   two `.columns-3` rules, because the theme's archive prints the loop inside
   `<div class="… woocommerce woocommerce-page …">` — measured on the live /shop/, where the
   <ul> computes `display:grid` with 3 x 369.3px columns while every card laid out 113.6px
   wide (= 30.75% of its own grid cell): a 113px sliver, a 240px-tall card head, the product
   title overflowing the card to the right and the tagline wrapped one word per line.

   Why the parity harness never caught it: _tools/parity/wp-card.html renders this markup with
   the theme's stylesheets but WITHOUT a `.woocommerce` ancestor, so WooCommerce's (0,4,2)
   rules had nothing to match. Reproduced and re-verified 2026-09-17 against the live /shop/
   HTML and the live stylesheets — _tools/parity/live-cascade.md.

   The `.woocommerce` / `.woocommerce-page` prefixes put these selectors at (0,4,2) too, so the
   tie is decided by file order and the theme wins. Do not drop the prefix. */
.woocommerce ul.products li.product.product-card,
.woocommerce-page ul.products li.product.product-card {
	clear: none;
	display: flex;
	flex-direction: column;
	float: none;
	list-style: none;
	margin: 0;
	max-width: none;
	padding: 0;
	position: relative;
	width: auto;
}

/* ---------- The card link ----------
   The live card IS the anchor. WordPress needs the <li> to carry .product-card (WooCommerce
   wraps this template in <ul class="products"> in every loop, including shortcodes and
   related products), so the link becomes a full-height flex column child that reproduces
   the .product-card flex context for .card-head / .body / .foot.

   No colour is set here on purpose: on the live site the card is itself an <a>, so the
   global `a` / `a:hover` rules in the base CSS are the intended in-card colours (blue-cyan
   title, gold on hover) and the anchor must keep driving them. */
.woocommerce ul.products li.product.product-card > .card-link,
.woocommerce-page ul.products li.product.product-card > .card-link {
	display: flex;
	flex: 1;
	flex-direction: column;
	height: 100%;
}

/* ---------- Card presentation: what a shopper actually sees ----------
   bneutech-base.css is a byte copy of the live static stylesheet, and in that copy the card
   internals lost their descendant space:

     .product-card.card-head   .product-card.logo      .product-card.title
     .product-card.title h3    .product-card.badge     .product-card.body
     .product-card.body p      .product-card.foot      .product-card.price
     .product-card.foot a

   Every one of those is a dead selector (each reads as if both classes sat on one element),
   so the card was styled by nothing but WooCommerce. That is why the live shop showed a raw
   200x200 logo in a 240px-tall head, a title squeezed into a 111px column wrapping over 5-6
   lines, the tagline flush against the card edge (`.body` had no padding) and price + action
   jammed together as "$24.00View ->" (`.foot` was not a flex row). The same dead selectors
   exist in public/css/styles.css on the static catalogue; that is a separate fix.

   So the loop states the design's own numbers here, scoped to the shop markup:
     96x96 logo tile     the featured images are square 300x300 marketing logos, so a square
                         tile with `object-fit: contain` never crops and never stretches
     h3, 3 lines         wrapping on purpose - the design's `white-space: nowrap` would clip a
                         65-character product name to "Bneu Consistency-Rule On-Ch..."
     .body flex:1 with .foot at margin-top:auto
                         the tagline block absorbs the slack, so every card in a row is the
                         same height and all price rows line up
   Measured before/after on the live stack: _tools/parity/live-cascade.md. */
.woocommerce ul.products li.product.product-card .card-head,
.woocommerce-page ul.products li.product.product-card .card-head {
	align-items: center;
	display: flex;
	gap: 16px;
	padding: 20px;
}

.woocommerce ul.products li.product.product-card .card-head img.logo,
.woocommerce-page ul.products li.product.product-card .card-head img.logo {
	background: #000;
	border: 1px solid var(--border);
	border-radius: 12px;
	flex-shrink: 0;
	height: 96px;
	max-height: 96px;
	max-width: 96px;
	object-fit: contain;
	width: 96px;
}

.woocommerce ul.products li.product.product-card .title,
.woocommerce-page ul.products li.product.product-card .title {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce ul.products li.product.product-card .title h3,
.woocommerce-page ul.products li.product.product-card .title h3 {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	display: -webkit-box;
	font-size: 1.02rem;
	line-height: 1.35;
	margin: 0 0 8px;
	overflow: hidden;
	overflow-wrap: break-word;
	white-space: normal;
}

.woocommerce ul.products li.product.product-card .badge,
.woocommerce-page ul.products li.product.product-card .badge {
	border-radius: 999px;
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 3px 10px;
	text-transform: uppercase;
}

.woocommerce ul.products li.product.product-card .body,
.woocommerce-page ul.products li.product.product-card .body {
	color: var(--text-dim);
	flex: 1;
	font-size: 0.92rem;
	padding: 0 20px 18px;
}

.woocommerce ul.products li.product.product-card .body p,
.woocommerce-page ul.products li.product.product-card .body p {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
}

.woocommerce ul.products li.product.product-card .foot,
.woocommerce-page ul.products li.product.product-card .foot {
	align-items: center;
	background: rgba(0, 0, 0, 0.25);
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	margin-top: auto;
	padding: 14px 20px;
}

.woocommerce ul.products li.product.product-card .foot .price,
.woocommerce-page ul.products li.product.product-card .foot .price {
	color: var(--text);
	font-size: 1.1rem;
	font-weight: 700;
}

.woocommerce ul.products li.product.product-card .foot .price.free,
.woocommerce-page ul.products li.product.product-card .foot .price.free {
	-webkit-background-clip: text;
	background: var(--grad-gold);
	background-clip: text;
	color: transparent;
}

.woocommerce ul.products li.product.product-card .foot .price small,
.woocommerce-page ul.products li.product.product-card .foot .price small {
	color: var(--text-mute);
	font-size: 0.7rem;
	font-weight: 500;
	margin-left: 4px;
}

.woocommerce ul.products li.product.product-card .foot > span:not(.price),
.woocommerce-page ul.products li.product.product-card .foot > span:not(.price),
.woocommerce ul.products li.product.product-card .foot a,
.woocommerce-page ul.products li.product.product-card .foot a {
	font-size: 0.9rem;
	font-weight: 600;
}

/* ---------- Filter bar: search form + category pills + WooCommerce count/ordering ----------
   The search input is a descendant of .filter-bar, so `.filter-bar input` already gives it
   the design's field styling. Only the wrapper needs to exist in flex terms. */
.filter-bar .product-search {
	display: flex;
	margin: 0;
}

/* Anchor twin of `.filter-bar button` — same values as bneutech-base.css lines 266-275,
   because the base file styles input/button only and navigation must stay real links.
   `line-height: normal` + `text-align: center` are copied from the UA stylesheet's
   <button> defaults that the static page's pills inherit without asking: without them the
   anchor pills measure 45.55px instead of 42px, and because .filter-bar centres its items
   that 3.55px of extra height pushes the entire card grid down by the same amount.
   Parity harness caught it: _tools/parity/run-parity.py. */
.filter-bar .filter-link {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text);
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 500;
	line-height: normal;
	padding: 10px 16px;
	text-align: center;
	transition: border-color 0.2s, background 0.2s;
}

.filter-bar .filter-link:hover {
	border-color: var(--blue);
	color: var(--text);
}

.filter-bar .filter-link.active {
	background: var(--grad-blue);
	border-color: transparent;
	color: #fff;
	font-weight: 600;
}

/* WooCommerce's result count and ordering select, sitting in the same bar. */
.filter-bar .woocommerce-result-count {
	color: var(--text-mute);
	font-size: 0.85rem;
	margin: 0;
}

.filter-bar .woocommerce-ordering {
	margin: 0;
}

.filter-bar .woocommerce-ordering select {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.92rem;
	padding: 10px 16px;
	transition: border-color 0.2s, background 0.2s;
}

.filter-bar .woocommerce-ordering select:focus {
	border-color: var(--blue);
	outline: none;
}

/* If a plugin prints notices into the bar, they take the whole row instead of squeezing
   between the pills (the theme's own notices print above the bar — see archive-product.php). */
.filter-bar .woocommerce-notices-wrapper,
.filter-bar .woocommerce-message,
.filter-bar .woocommerce-info,
.filter-bar .woocommerce-error {
	flex: 1 0 100%;
}

/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 4px solid var(--blue);
	border-radius: var(--radius-sm);
	color: var(--text);
	list-style: none;
	margin: 0 0 22px;
	padding: 14px 18px;
}

.woocommerce-message {
	border-left-color: var(--green);
}

.woocommerce-info {
	border-left-color: var(--blue-2);
}

.woocommerce-error {
	border-left-color: var(--red);
}

.woocommerce-error li {
	margin: 0 0 6px;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	float: right;
	margin-left: 18px;
}

/* ---------- Buttons ----------
   WooCommerce emits `button` / `.button` / `#submit`, never `.btn`, so the design's primary
   button is mapped onto it. Values copied from `.btn` + `.btn-primary` (base CSS 142-149). */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--grad-blue);
	border: 0;
	border-radius: 999px;
	box-shadow: 0 10px 30px -8px rgba(30, 144, 255, 0.6);
	color: #fff;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	padding: 12px 22px;
	transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.2s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--grad-blue);
	color: #fff;
	filter: brightness(1.08);
	transform: translateY(-2px);
}

/* Quiet variant for "continue shopping" / coupon style actions — same as .btn-outline. */
.woocommerce .button.wc-backward,
.woocommerce .cart .button[name="update_cart"],
.woocommerce .cart .actions .button,
.woocommerce a.button.added_to_cart {
	background: transparent;
	border: 1px solid var(--border);
	box-shadow: none;
	color: var(--text);
}

.woocommerce .button.wc-backward:hover,
.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce .cart .actions .button:hover,
.woocommerce a.button.added_to_cart:hover {
	background: transparent;
	border-color: var(--blue);
	color: var(--blue-2);
}

/* ---------- Pagination ---------- */
.woocommerce nav.woocommerce-pagination {
	margin: 8px 0 40px;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text-dim);
	display: block;
	font-size: 0.9rem;
	min-width: 40px;
	padding: 8px 12px;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--blue);
	color: var(--blue-2);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--grad-blue);
	border-color: transparent;
	color: #fff;
	font-weight: 600;
}

/* ---------- Single product ----------
   The static equivalent of a product page is the /mql5/<slug>/ doc page: a .doc-hero panel
   (gradient surface, 1px border, 32px padding, --radius, 32px bottom margin — values from
   bneutech-base.css line 286) above .doc-section cards. WooCommerce's single-product
   template swaps the hero's logo/text/price columns for a gallery + .summary, so the panel
   shell is reused and the two halves sit where the hero columns sat. */
.single-product div.product {
	align-items: start;
	background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	display: grid;
	gap: 32px 48px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	margin-bottom: 32px;
	padding: 32px;
}

.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > section {
	grid-column: 1 / -1;
}

.woocommerce-product-gallery__wrapper {
	margin: 0;
}

.woocommerce-product-gallery img {
	background: #000;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
}

.woocommerce-product-gallery .flex-control-thumbs li {
	margin: 0;
	width: 64px;
}

.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: 10px;
	cursor: pointer;
}

/* Title + price mirror the .doc-hero h1 and the gold price treatment in the base CSS. */
.single-product .summary .product_title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin: 0 0 6px;
}

/* Deliberately NOT gradient-clipped text: WooCommerce nests <del>/<ins> inside .price for
   sale prices, and background-clip:text would make the struck-through price invisible. */
.single-product .summary .price {
	color: var(--text);
	font-size: 1.6rem;
	font-weight: 800;
}

.single-product .summary .price del {
	color: var(--text-mute);
	font-size: 1rem;
	font-weight: 500;
	opacity: 1;
}

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

.woocommerce .star-rating {
	color: var(--gold);
}

.woocommerce .star-rating::before {
	color: var(--border);
}

.woocommerce-product-rating {
	margin-bottom: 12px;
}

.single-product .summary .woocommerce-product-details__short-description {
	margin-bottom: 22px;
}

/* Add-to-cart: the design's "Buy on MQL5" button is .btn-gold, so the primary purchase
   action is gold and the quantity field is a design-language pill field. */
.single-product .summary form.cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.woocommerce .quantity .qty {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--text);
	font-family: inherit;
	font-size: 0.95rem;
	padding: 12px 14px;
	width: 5.5em;
}

.woocommerce .quantity .qty:focus {
	border-color: var(--blue);
	outline: none;
}

.single-product .summary .single_add_to_cart_button {
	background: var(--grad-gold);
	box-shadow: 0 10px 30px -8px rgba(255, 179, 0, 0.6);
	color: #1a1300;
}

.single-product .summary .single_add_to_cart_button:hover {
	background: var(--grad-gold);
	color: #1a1300;
}

.variations select {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--text);
	font-family: inherit;
	max-width: 100%;
	padding: 10px 12px;
}

.variations td.label,
.variations th.label {
	color: var(--text-dim);
	font-weight: 500;
	padding-right: 12px;
	text-align: left;
}

.single-product .product_meta {
	border-top: 1px solid var(--border);
	color: var(--text-mute);
	font-size: 0.85rem;
	margin-top: 22px;
	padding-top: 16px;
}

.single-product .product_meta a {
	color: var(--text-dim);
}

/* Tabs = the design's .doc-section cards (values from bneutech-base.css lines 295-297). */
.woocommerce div.product .woocommerce-tabs ul.wc-tabs {
	border-bottom: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.wc-tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.woocommerce div.product .woocommerce-tabs ul.wc-tabs li a {
	background: var(--surface);
	border: 1px solid var(--border);
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
	color: var(--text-dim);
	display: block;
	font-size: 0.9rem;
	font-weight: 600;
	padding: 10px 18px;
}

.woocommerce div.product .woocommerce-tabs ul.wc-tabs li.active a {
	background: var(--surface-2);
	border-color: var(--blue);
	color: var(--text);
}

.woocommerce div.product .woocommerce-tabs .panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-dim);
	margin: 0 0 22px;
	padding: 28px 32px;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	align-items: center;
	display: flex;
	font-size: 1.4rem;
	gap: 10px;
	margin-bottom: 14px;
}

.woocommerce div.product .woocommerce-tabs .panel h2::before {
	background: var(--grad-blue);
	border-radius: 2px;
	content: '';
	height: 22px;
	width: 4px;
}

.woocommerce table.shop_attributes {
	border: 1px solid var(--border);
	border-collapse: separate;
	border-radius: var(--radius-sm);
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	background: transparent;
	border-bottom: 1px solid var(--border);
	color: var(--text-dim);
	padding: 12px 16px;
}

.woocommerce table.shop_attributes th {
	color: var(--text);
	font-weight: 600;
	text-align: left;
	width: 30%;
}

.woocommerce table.shop_attributes p {
	margin: 0;
}

.single-product .related > h2,
.single-product .upsells > h2 {
	margin: 0 0 22px;
}

/* ---------- Cart, checkout and account forms ----------
   None of this exists on the static site, so these blocks only speak the design's language
   (surface panels, --border hairlines, --radius, pill buttons). No new colours. */
.woocommerce table.shop_table {
	background: var(--surface);
	border: 1px solid var(--border);
	border-collapse: separate;
	border-radius: var(--radius);
	border-spacing: 0;
	color: var(--text-dim);
	margin: 0 0 32px;
	overflow: hidden;
	width: 100%;
}

.woocommerce table.shop_table th {
	background: var(--surface-2);
	color: var(--text);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	padding: 14px 16px;
	text-align: left;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	border-top: 1px solid var(--border);
	padding: 14px 16px;
	vertical-align: middle;
}

.woocommerce table.shop_table .product-thumbnail img {
	background: #000;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	height: auto;
	width: 60px;
}

.woocommerce table.shop_table .product-name a {
	color: var(--text);
}

.woocommerce table.shop_table .product-name a:hover {
	color: var(--blue-2);
}

.woocommerce a.remove {
	color: var(--red) !important;
}

.woocommerce .cart-collaterals .cart_totals {
	width: 100%;
}

.woocommerce .cart-collaterals .cart_totals > h2,
.woocommerce .cart-collaterals .cross-sells > h2 {
	font-size: 1.15rem;
	margin-bottom: 16px;
}

.woocommerce #order_review,
.woocommerce-checkout #payment {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px 32px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--border);
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-form-coupon {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px 32px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce .coupon .input-text {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	padding: 12px 14px;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .coupon .input-text:focus {
	border-color: var(--blue);
	outline: none;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--text);
	line-height: 1.6;
	padding-left: 0;
}

.woocommerce form .form-row label {
	color: var(--text-dim);
	font-size: 0.9rem;
}

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

.woocommerce-checkout-review-order-table .order-total .amount,
.woocommerce .cart_totals .order-total .amount {
	color: var(--text);
	font-weight: 700;
}

/* ---------- Widgets / shortcode blocks in the design's card language ---------- */
.woocommerce ul.product_list_widget li {
	border-bottom: 1px solid var(--border);
	color: var(--text-dim);
	padding: 12px 0;
}

.woocommerce ul.product_list_widget li a {
	color: var(--text);
	font-weight: 500;
}

.woocommerce ul.product_list_widget li a:hover {
	color: var(--blue-2);
}

/* ---------- Responsive: same 860px stack point the design uses ---------- */
@media (max-width: 860px) {
	.single-product div.product {
		gap: 24px;
		grid-template-columns: 1fr;
		padding: 22px;
	}

	.woocommerce div.product .woocommerce-tabs .panel {
		padding: 22px;
	}

	.woocommerce-checkout #payment,
	.woocommerce form.checkout_coupon,
	.woocommerce form.login,
	.woocommerce form.register,
	.woocommerce-form-coupon {
		padding: 22px;
	}

	.filter-bar .product-search {
		width: 100%;
	}

	.filter-bar .product-search input {
		width: 100%;
	}
}