/* ==========================================================================
   Cheetah WooCommerce — Base Overrides
   ==========================================================================
   Location: assets/css/conditional/woocommerce.css
   Dependencies: core/variables.css, core/components.css
   Loaded on: All WooCommerce pages (class_exists('WooCommerce'))
   ========================================================================== */

/* --------------------------------------------------------------------------
   WooCommerce Notices — canonical, unified styling
   --------------------------------------------------------------------------
   This is the single source of truth for every WooCommerce notice on the
   site (message / info / error / notice). Every page that renders a notice
   — cart, checkout, account, single product, shop archive — inherits from
   this block. Do NOT redeclare notice colors, borders, or padding in the
   page-specific stylesheets (cart / checkout / account); those files may
   only adjust LAYOUT (margins / width) when the notice sits inside a
   specific container.

   Design language
   ---------------
   All four variants share the same visual grammar:
     • Rounded card (12px radius)
     • Subtle tinted background per variant
     • Full 1px tinted border on all four sides — uniform, no accent bar
     • Dark-shade text per variant
     • Consistent typography (0.9375rem / line-height 1.55)
     • An optional action button rendered as a ghost pill that fills with
       the variant accent on hover
     • Links inside the notice use the variant's accent color, no chrome

   Border strategy — why the base rule declares NO border
   ------------------------------------------------------
   The base rule deliberately does NOT include a shared
   `border: 1px solid transparent` placeholder, and it does NOT include a
   `border-left` accent declaration. Instead, each variant below declares
   its own complete 1px border directly.

   There are two reasons for this, and both matter on mobile:

     1.  `transparent` is `rgba(0, 0, 0, 0)` — transparent BLACK. When a
         notice is composited onto its own GPU layer (which mobile
         browsers do aggressively for elements with `border-radius` +
         `background-color`), the fully-transparent black border can
         rasterize as a faint dark ring around the element. The ring
         only shows on mobile because mobile rasterizers blend the
         edge pixels rather than discarding them. Declaring each
         variant's real border directly means there is no transparent
         placeholder for the rasterizer to blend.

     2.  `background-clip: padding-box` (set on the base rule) tells the
         browser to stop the background at the inner edge of the border.
         Without it, both the background and the border paint the rounded
         corners, and the corners composite with a subtle dark halo on
         iOS Safari. This is the classic `border-radius` + `background`
         artifact fix and is required alongside fix #1.

   Layout strategy — flex for single-message notices and for each row of
   a multi-message notice.
   -------------------------------------------------------------------
   Notices come in two shapes:

     • Message / Info / Notice — a single sentence, optionally followed
       by an action button. The container itself is a flex row with
       `justify-content: space-between` so the button hugs the right edge.

     • Error — a `<ul>` list. The container stays `display: block` so the
       list items stack vertically, but EACH `<li>` is itself a flex row
       with the same `justify-content: space-between` contract. That
       gives every individual error the same text-left / button-right
       layout as the other three variants, without wrapping the `<ul>`
       in flex (which would place the list items side by side).

   Focus behaviour
   ---------------
   WooCommerce programmatically focuses every notice (see the dedicated
   "Focus behaviour" block below for the full rationale). That programmatic
   focus would trigger the browser's default focus ring, which draws a dark
   outline around the notice on every platform. The focus block at the end
   of this section removes it.

   Wrapper spacing
   ---------------
   WooCommerce's `woocommerce_output_all_notices()` prints the wrapper
   unconditionally, even when there is nothing to announce. The wrapper
   must therefore contribute ZERO spacing when it is empty. See the
   dedicated block below for the full rationale and the `:has()` guard
   that enforces it.
   -------------------------------------------------------------------------- */

:root {
	/* Shared geometry */
	--cheetah-notice-radius: 12px;
	--cheetah-notice-padding-y: 0.9rem;
	--cheetah-notice-padding-x: 1.15rem;
	--cheetah-notice-gap: 0.85rem;

	/* Success — emerald.
       `accent` is used only for links and the action button's hover fill;
       it does not paint a border (see the border strategy note above). */
	--cheetah-notice-success-bg: #ecfdf5;
	--cheetah-notice-success-border: #d1fae5;
	--cheetah-notice-success-accent: #10b981;
	--cheetah-notice-success-text: #065f46;

	/* Info — blue */
	--cheetah-notice-info-bg: #eff6ff;
	--cheetah-notice-info-border: #dbeafe;
	--cheetah-notice-info-accent: #3b82f6;
	--cheetah-notice-info-text: #1e40af;

	/* Error — red */
	--cheetah-notice-error-bg: #fef2f2;
	--cheetah-notice-error-border: #fee2e2;
	--cheetah-notice-error-accent: #ef4444;
	--cheetah-notice-error-text: #991b1b;

	/* Notice (neutral) — amber */
	--cheetah-notice-notice-bg: #fffbeb;
	--cheetah-notice-notice-border: #fef3c7;
	--cheetah-notice-notice-accent: #f59e0b;
	--cheetah-notice-notice-text: #92400e;
}

/*
 * Notices wrapper — the shared spacing rhythm.
 *
 * IMPORTANT — why this rule is guarded with `:has(*)`
 * ---------------------------------------------------
 * WooCommerce's `woocommerce_output_all_notices()` prints the wrapper
 * unconditionally, even when there is nothing to announce. The wrapper
 * therefore has to contribute ZERO spacing when it is empty.
 *
 * A previous version of this file applied the spacing to every wrapper
 * (empty or not) on the incorrect assumption that WooCommerce only
 * emitted the wrapper when a notice was present. On the shop archive the
 * empty wrapper landed as the first child of the `.cheetah-products`
 * CSS grid, occupying a full-width grid track and inheriting the grid
 * gap beneath it. That is what produced the "big gap" between the shop
 * toolbar and the first product row. The same empty wrapper was also
 * adding dead space above the cart form, the checkout form, the single
 * product article, and the My Account content.
 *
 * The spacing now applies only when the wrapper actually contains at
 * least one element child. `:has(*)` is used rather than `:empty`
 * because plugins and WooCommerce extensions frequently inject a
 * whitespace text node inside the wrapper, which defeats `:empty` while
 * leaving the wrapper visually blank.
 *
 *   padding-top    → small breathing room between the preceding element
 *                    (usually the page title) and the first notice
 *   margin-bottom  → larger breathing room between the last notice and
 *                    the page content below
 */
.woocommerce-notices-wrapper:has(*) {
	margin: 0 0 1.75rem;
	padding-top: 1rem;
}

/*
 * Empty wrapper guard.
 *
 * When the wrapper contains no element child, remove it from layout
 * entirely so it cannot create a grid track, inherit a grid gap, or
 * contribute any margin / padding of its own. `display: none` is
 * preferred over `display: contents` because `display: contents` can
 * still leave a zero-height grid track behind on some engines when the
 * parent grid has an explicit `grid-column` rule for the wrapper — and
 * the shop archive's grid does.
 *
 * `:has()` is a live selector, so if a script injects a notice into the
 * wrapper after page load, the guard stops matching and the wrapper
 * returns to its normal `display: block` automatically. No JavaScript
 * coordination is needed.
 */
.woocommerce-notices-wrapper:not(:has(*)) {
	display: none;
}

/*
 * Shared notice contract — geometry, typography, and mobile-friendly
 * touch behaviour. Inherited by every variant below.
 *
 * Deliberately omits `border` entirely. Each variant declares its own
 * full 1px border. See the "Border strategy" note above for the mobile
 * rationale.
 *
 * Deliberately omits the flex/block layout decision. Each variant's
 * layout is declared separately below so error lists stay list-shaped.
 *
 * Deliberately omits focus-outline handling. See the "Focus behaviour"
 * block further down.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	box-sizing: border-box;
	margin: 0 0 var(--cheetah-notice-gap);
	padding: var(--cheetah-notice-padding-y) var(--cheetah-notice-padding-x);
	font-size: 0.9375rem;
	line-height: 1.55;
	border-radius: var(--cheetah-notice-radius);
	list-style: none;

	/* Stop the background at the inner edge of the border.
       Prevents the rounded corners from compositing into a dark halo
       on iOS Safari and other mobile compositors. */
	background-clip: padding-box;

	/* Suppress the semi-transparent black overlay that iOS Safari and
       Android Chrome paint on tap over any element that looks tappable. */
	-webkit-tap-highlight-color: transparent;
}

/*
 * Single-message notices become flex containers so the optional action
 * button hugs the right edge while the message text stays left-aligned.
 * `flex-wrap` lets a long message push the button onto a second line.
 *
 * Anonymous text nodes (the message sentence) become anonymous flex
 * items, so `justify-content: space-between` places the message on the
 * left and the button on the right without any wrapper markup.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-notice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
}

/*
 * Error notices are `<ul>` lists of individual error messages. The
 * container stays a block so the `<li>` items stack vertically — a
 * flex container here would place every message side by side.
 *
 * The per-row flex contract is applied to each `<li>` below.
 */
.woocommerce-error {
	display: block;
}

/*
 * Each error row mirrors the single-message layout: text on the left,
 * optional action button on the right. This is what makes the "View
 * cart" button in an error notice land in the same position as the
 * "View cart" button in a success message.
 *
 * `flex-wrap` lets a long error push its own button onto a new line
 * rather than squeezing. `gap` guarantees a minimum separation even if
 * the anonymous text node and the button end up adjacent.
 */
.woocommerce-error li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	margin: 0 0 0.35rem;
	padding: 0;
	list-style: none;
}

.woocommerce-error li:last-child {
	margin-bottom: 0;
}

/* The last notice inside a wrapper drops its own bottom margin — the
   wrapper's `margin-bottom` becomes the single source of vertical space
   below the notice group, which prevents double spacing when several
   notices appear together. */
.woocommerce-notices-wrapper > .woocommerce-message:last-child,
.woocommerce-notices-wrapper > .woocommerce-info:last-child,
.woocommerce-notices-wrapper > .woocommerce-error:last-child,
.woocommerce-notices-wrapper > .woocommerce-notice:last-child {
	margin-bottom: 0;
}

/* Remove the icon pseudo-elements WooCommerce injects. The unified design
   communicates the notice type through color, not through a glyph. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
	content: none;
}

/* --------------------------------------------------------------------------
   Variant: Success (emerald)
   -------------------------------------------------------------------------- */
.woocommerce-message {
	background-color: var(--cheetah-notice-success-bg);
	border: 1px solid var(--cheetah-notice-success-border);
	color: var(--cheetah-notice-success-text);
}

.woocommerce-message a,
.woocommerce-message a:visited {
	color: var(--cheetah-notice-success-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-message a:hover {
	color: var(--cheetah-notice-success-text);
}

/* --------------------------------------------------------------------------
   Variant: Info (blue)
   -------------------------------------------------------------------------- */
.woocommerce-info {
	background-color: var(--cheetah-notice-info-bg);
	border: 1px solid var(--cheetah-notice-info-border);
	color: var(--cheetah-notice-info-text);
}

.woocommerce-info a,
.woocommerce-info a:visited {
	color: var(--cheetah-notice-info-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-info a:hover {
	color: var(--cheetah-notice-info-text);
}

/* --------------------------------------------------------------------------
   Variant: Error (red)
   -------------------------------------------------------------------------- */
.woocommerce-error {
	background-color: var(--cheetah-notice-error-bg);
	border: 1px solid var(--cheetah-notice-error-border);
	color: var(--cheetah-notice-error-text);
}

.woocommerce-error a,
.woocommerce-error a:visited {
	color: var(--cheetah-notice-error-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-error a:hover {
	color: var(--cheetah-notice-error-text);
}

/* --------------------------------------------------------------------------
   Variant: Notice (neutral, amber)
   -------------------------------------------------------------------------- */
.woocommerce-notice {
	background-color: var(--cheetah-notice-notice-bg);
	border: 1px solid var(--cheetah-notice-notice-border);
	color: var(--cheetah-notice-notice-text);
}

.woocommerce-notice a,
.woocommerce-notice a:visited {
	color: var(--cheetah-notice-notice-accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-notice a:hover {
	color: var(--cheetah-notice-notice-text);
}

/* --------------------------------------------------------------------------
   Action button inside a notice
   --------------------------------------------------------------------------
   Notices often carry a primary action button ("View cart", "Retry
   payment", "Continue shopping"). These are rendered by WooCommerce as
   `<a class="button wc-forward">` or `<button class="button">`, with no
   `.woocommerce` ancestor on the theme's custom templates — so the base
   `.woocommerce .button` styling does not apply.

   The button is styled as a ghost pill: solid white surface, variant-
   coloured text and border, filling with the variant accent on hover.
   That contrasts with the notice's tinted background without fighting
   it, and reads as an intentional action rather than a decorative blob.

   The `.woocommerce-notices-wrapper` prefix on each selector raises the
   specificity to (0,3,0), which beats the theme's base `.woocommerce
   .button` rule (0,2,0) even though this block is declared earlier in
   the cascade.
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-info .button,
.woocommerce-notices-wrapper .woocommerce-error .button,
.woocommerce-notices-wrapper .woocommerce-notice .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0.4rem 0.9rem;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border-radius: 8px;
	cursor: pointer;
	transition:
			background-color 0.15s ease,
			border-color 0.15s ease,
			color 0.15s ease,
			box-shadow 0.15s ease,
			transform 0.12s ease;
}

.woocommerce-notices-wrapper .woocommerce-message .button:active,
.woocommerce-notices-wrapper .woocommerce-info .button:active,
.woocommerce-notices-wrapper .woocommerce-error .button:active,
.woocommerce-notices-wrapper .woocommerce-notice .button:active {
	transform: translateY(1px);
}

/* Success action button */
.woocommerce-notices-wrapper .woocommerce-message .button {
	color: var(--cheetah-notice-success-text);
	background-color: #ffffff;
	border: 1px solid var(--cheetah-notice-success-border);
	box-shadow: 0 1px 2px rgba(16, 185, 129, 0.06);
}

.woocommerce-notices-wrapper .woocommerce-message .button:hover,
.woocommerce-notices-wrapper .woocommerce-message .button:focus {
	color: #ffffff;
	background-color: var(--cheetah-notice-success-accent);
	border-color: var(--cheetah-notice-success-accent);
	box-shadow: 0 4px 10px rgba(16, 185, 129, 0.22);
	transform: translateY(-1px);
	outline: none;
}

/* Info action button */
.woocommerce-notices-wrapper .woocommerce-info .button {
	color: var(--cheetah-notice-info-text);
	background-color: #ffffff;
	border: 1px solid var(--cheetah-notice-info-border);
	box-shadow: 0 1px 2px rgba(59, 130, 246, 0.06);
}

.woocommerce-notices-wrapper .woocommerce-info .button:hover,
.woocommerce-notices-wrapper .woocommerce-info .button:focus {
	color: #ffffff;
	background-color: var(--cheetah-notice-info-accent);
	border-color: var(--cheetah-notice-info-accent);
	box-shadow: 0 4px 10px rgba(59, 130, 246, 0.22);
	transform: translateY(-1px);
	outline: none;
}

/* Error action button */
.woocommerce-notices-wrapper .woocommerce-error .button {
	color: var(--cheetah-notice-error-text);
	background-color: #ffffff;
	border: 1px solid var(--cheetah-notice-error-border);
	box-shadow: 0 1px 2px rgba(239, 68, 68, 0.06);
}

.woocommerce-notices-wrapper .woocommerce-error .button:hover,
.woocommerce-notices-wrapper .woocommerce-error .button:focus {
	color: #ffffff;
	background-color: var(--cheetah-notice-error-accent);
	border-color: var(--cheetah-notice-error-accent);
	box-shadow: 0 4px 10px rgba(239, 68, 68, 0.22);
	transform: translateY(-1px);
	outline: none;
}

/* Neutral notice action button */
.woocommerce-notices-wrapper .woocommerce-notice .button {
	color: var(--cheetah-notice-notice-text);
	background-color: #ffffff;
	border: 1px solid var(--cheetah-notice-notice-border);
	box-shadow: 0 1px 2px rgba(245, 158, 11, 0.06);
}

.woocommerce-notices-wrapper .woocommerce-notice .button:hover,
.woocommerce-notices-wrapper .woocommerce-notice .button:focus {
	color: #ffffff;
	background-color: var(--cheetah-notice-notice-accent);
	border-color: var(--cheetah-notice-notice-accent);
	box-shadow: 0 4px 10px rgba(245, 158, 11, 0.22);
	transform: translateY(-1px);
	outline: none;
}

/* --------------------------------------------------------------------------
   Focus behaviour — no focus ring on the notice container, ever
   --------------------------------------------------------------------------
   Why notices receive focus
   -------------------------
   WooCommerce's frontend script `scroll_to_notices()` (in
   `assets/js/frontend/woocommerce.js`) runs on every page load that renders
   a notice:

       scrollElement.attr( 'tabindex', '-1' ).focus();

   The `tabindex="-1"` + `.focus()` combination is deliberate: it lets
   screen readers announce the message and makes the browser scroll to it.
   The notice is therefore focused the moment the page loads.

   Why the ring must be suppressed in ALL focus states
   ---------------------------------------------------
   The browser's default focus ring is drawn OUTSIDE the notice's own 1px
   border, and reads as a dark "outer border" around the message box on
   every platform (Chrome, Edge, Firefox, Safari; desktop and mobile).

   It is tempting to keep the ring for `:focus-visible` on the theory that
   "programmatic focus doesn't match `:focus-visible`, so only keyboard
   users will see it". That is not correct in practice:

     • Per Selectors Level 4, `:focus-visible` matches whenever the UA
       determines a visible indicator is warranted. Browsers treat
       programmatic focus that happens shortly after any keyboard
       interaction as warranting one — so on a keyboard-driven page
       load (a user who pressed Enter to submit a form, or who
       navigated with Tab), the ring DOES appear.

     • The notice container carries `tabindex="-1"`, which removes it
       from the tab order. Keyboard users can therefore never focus
       the container directly. A focus ring on the container serves no
       user, in no scenario, ever.

   So the correct policy is a single rule: `outline: none` on any focus
   state, with no `:focus-visible` counterpart. This is not a workaround
   — it is the semantically correct policy for a passive live region.

   Accessibility is preserved
   --------------------------
   Interactive elements *inside* the notice (links, action buttons) are
   the elements keyboard users actually tab to. They keep their own focus
   treatment, untouched by this rule. Screen reader users still hear the
   live-region announcement regardless of the visual ring. Nothing about
   the accessibility contract changes.

   The `.woocommerce-notices-wrapper` selectors are included because some
   WooCommerce versions focus the wrapper instead of (or in addition to)
   the individual notice.
   -------------------------------------------------------------------------- */

.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus,
.woocommerce-notice:focus,
.woocommerce-notices-wrapper:focus {
	outline: none;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.cheetah-product-card .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--cheetah-space-sm) var(--cheetah-space-lg);
	font-size: var(--cheetah-font-size-base, 1rem);
	font-weight: 500;
	line-height: 1.5;
	border: 1px solid var(--cheetah-primary, #2563eb);
	border-radius: var(--cheetah-radius, 4px);
	background-color: var(--cheetah-primary, #2563eb);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
	text-decoration: none;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.cheetah-product-card .button:hover {
	background-color: var(--cheetah-primary-dark, #1d4ed8);
	border-color: var(--cheetah-primary-dark, #1d4ed8);
}

.woocommerce .button:disabled,
.woocommerce .button.disabled,
.cheetah-product-card .button:disabled,
.cheetah-product-card .button.disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.woocommerce .button--secondary,
.woocommerce a.button--secondary,
.cheetah-product-card .button--secondary {
	background-color: transparent;
	color: var(--cheetah-primary, #2563eb);
}

.woocommerce .button--secondary:hover,
.cheetah-product-card .button--secondary:hover {
	background-color: var(--cheetah-primary, #2563eb);
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.woocommerce form .form-row {
	margin-bottom: var(--cheetah-space-md);
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--cheetah-space-xs);
	font-weight: 500;
	color: var(--cheetah-heading, #0f172a);
}

.woocommerce form .form-row .required {
	color: #ef4444;
}

.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select {
	width: 100%;
	padding: var(--cheetah-space-sm) var(--cheetah-space-md);
	font-size: var(--cheetah-font-size-base, 1rem);
	border: 1px solid var(--cheetah-border, #e2e8f0);
	border-radius: var(--cheetah-radius, 4px);
	background-color: #ffffff;
	color: var(--cheetah-text, #1e293b);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	outline: none;
	border-color: var(--cheetah-primary, #2563eb);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* --------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------
   Keep the shared WooCommerce table layer intentionally light. Specialized
   Cheetah tables (cart, checkout review, product details) own their visual
   treatment in their respective component stylesheets.
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table {
	width: 100%;
	margin-bottom: var(--cheetah-space-lg);
	border-collapse: separate;
	border-spacing: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	vertical-align: middle;
}

.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) {
	border: 1px solid var(--cheetah-border, #e2e8f0);
	border-radius: 12px;
	background: var(--cheetah-bg, #ffffff);
	overflow: hidden;
}

.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) th,
.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) td {
	padding: 0.85rem 1rem;
	border: 0;
	text-align: left;
	background: transparent;
}

.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) thead th {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--cheetah-border, #e2e8f0);
	background: #f8fafc;
	color: var(--cheetah-secondary, #64748b);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) tbody tr + tr th,
.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) tbody tr + tr td,
.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) tfoot th,
.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) tfoot td {
	border-top: 1px solid var(--cheetah-border, #e2e8f0);
}

.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) tbody tr {
	transition: background-color 150ms ease;
}

.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) tbody tr:hover th,
.woocommerce table.shop_table:not(.cheetah-cart-table):not(.cheetah-cart-totals__table):not(.cheetah-review-order) tbody tr:hover td {
	background: #f8fbff;
}

.woocommerce table.shop_table td.product-remove {
	width: 44px;
	min-width: 44px;
	padding-left: 0.35rem;
	padding-right: 0.35rem;
	text-align: center;
}

.woocommerce table.shop_table td.product-thumbnail {
	width: 84px;
	min-width: 84px;
}

.woocommerce table.shop_table td.product-thumbnail img {
	width: 64px;
	height: auto;
	border-radius: 8px;
	border: 1px solid var(--cheetah-border, #e2e8f0);
}

/* --------------------------------------------------------------------------
   Product Loop
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(var(--wc-columns, 4), 1fr);
	gap: var(--cheetah-space-xl, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	width: 100%;
	float: none;
	margin: 0;
	clear: none;
}

/* Responsive columns */
@media (max-width: 1024px) {
	.woocommerce ul.products {
		--wc-columns: 3;
	}
}

@media (max-width: 768px) {
	.woocommerce ul.products {
		--wc-columns: 2;
	}
}

@media (max-width: 480px) {
	.woocommerce ul.products {
		--wc-columns: 1;
	}
}

/* --------------------------------------------------------------------------
   Cheetah Product Card
   -------------------------------------------------------------------------- */
.cheetah-product-card {
	position: relative;
	background-color: #ffffff;
	border-radius: var(--cheetah-radius-lg, 8px);
	overflow: hidden;
	border: 1px solid var(--cheetah-border, #e2e8f0);
	transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cheetah-product-card:hover {
	box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15);
	border-color: var(--cheetah-primary, #2563eb);
	transform: translateY(-6px);
}

.cheetah-product-card__image-wrap {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background-color: #f8fafc;
}

.cheetah-product-card__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	border-radius: var(--cheetah-radius-md) var(--cheetah-radius-md) 0 0;
}

.cheetah-product-card:hover .cheetah-product-card__image-wrap img {
	transform: scale(1.03);
}

.cheetah-product-card__link {
	display: block;
	width: 100%;
	height: 100%;
}

/* Badges */
.cheetah-badge {
	position: absolute;
	top: var(--cheetah-space-sm);
	left: var(--cheetah-space-sm);
	padding: var(--cheetah-space-xs) var(--cheetah-space-sm);
	font-size: var(--cheetah-font-size-xs, 0.75rem);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	border-radius: var(--cheetah-radius, 4px);
	z-index: 2;
}

.cheetah-badge--sale {
	background-color: #ef4444;
	color: #ffffff;
}

.cheetah-badge--featured {
	background-color: #f59e0b;
	color: #ffffff;
}

.cheetah-badge--out-of-stock {
	background-color: #64748b;
	color: #ffffff;
}

/* Card Body */
.cheetah-product-card__body {
	padding: var(--cheetah-space-md);
	text-align: center;
}

.cheetah-product-card__title {
	margin: 0 0 var(--cheetah-space-xs);
	font-size: var(--cheetah-font-size-base, 1rem);
	font-weight: 600;
	line-height: 1.4;
}

.cheetah-product-card__title a {
	color: var(--cheetah-heading, #0f172a);
	text-decoration: none;
}

.cheetah-product-card__title a:hover {
	color: var(--cheetah-primary, #2563eb);
}

.cheetah-product-card__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cheetah-space-sm);
	margin-bottom: var(--cheetah-space-sm);
}

.cheetah-product-price {
	font-size: var(--cheetah-font-size-lg, 1.125rem);
	font-weight: 600;
	color: var(--cheetah-primary, #2563eb);
}

.cheetah-product-price del {
	color: var(--cheetah-text-muted, #94a3b8);
	font-weight: 400;
	margin-right: var(--cheetah-space-xs);
}

.cheetah-product-price ins {
	text-decoration: none;
}

.cheetah-product-rating {
	display: flex;
	align-items: center;
	gap: var(--cheetah-space-xs);
}

.cheetah-product-rating .star-rating {
	color: #f59e0b;
}

.cheetah-product-rating__count {
	font-size: var(--cheetah-font-size-sm, 0.875rem);
	color: var(--cheetah-text-muted, #94a3b8);
}

/* --------------------------------------------------------------------------
   Product Card Actions
   --------------------------------------------------------------------------
   Fixed-height, fixed-width action slot that keeps the product card layout
   perfectly stable through the entire WooCommerce AJAX add-to-cart
   lifecycle. Both the original add-to-cart button and the injected
   "View cart" link (a.added_to_cart) share the SAME slot, so:
     • The button is always the same width before and after clicking.
     • The card is always the same height before and after clicking.
     • Related, upsell, cross-sell and archive cards stay visually
       identical regardless of which product has been added to the cart.

   How WooCommerce drives the state:
     1. Click  → wc-add-to-cart.js adds `.loading` to the button.
     2. Success → adds `.added` to the button and appends
        `<a class="added_to_cart wc-forward">…</a>` right after it.
   We hide the original button once it carries `.added`, and let the
   injected link fill the same slot without altering the card's box.
   -------------------------------------------------------------------------- */
.cheetah-product-card__actions {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	margin-top: var(--cheetah-space-sm);
}

.cheetah-product-card__actions .cheetah-product-actions {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	max-width: 220px;
	min-height: 40px;
}

/*
 * The two interactive elements that may occupy the action slot.
 * Both are forced to the same fixed height and to the same flex
 * allocation so a swap from one to the other is invisible.
 */
.cheetah-product-card__actions .button,
.cheetah-product-card__actions .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 1rem;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-radius: var(--cheetah-radius, 8px);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Loading state — spinner replaces the label, box stays identical. */
.cheetah-product-card__actions .button.loading {
	position: relative;
	color: transparent;
	pointer-events: none;
}

.cheetah-product-card__actions .button.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: cheetah-product-card-spin 0.7s linear infinite;
}

@keyframes cheetah-product-card-spin {
	to {
		transform: rotate(360deg);
	}
}

/*
 * Hide the original button once WooCommerce flags it as added. The
 * injected `.added_to_cart` link then takes the full flex share of
 * `.cheetah-product-actions` — i.e. exactly the same width the button
 * had a moment ago.
 */
.cheetah-product-card__actions .button.added {
	display: none;
}

/*
 * Fallback for edge cases where the `.added` class is not applied
 * (older WooCommerce builds, custom AJAX handlers). `:has()` is
 * supported in all modern browsers and is ignored elsewhere.
 */
.cheetah-product-card__actions .cheetah-product-actions:has(.added_to_cart) .button {
	display: none;
}

/*
 * The "View cart" link — same box as the button, ghost-styled so it
 * reads as a distinct secondary action without disrupting the layout.
 */
.cheetah-product-card__actions .added_to_cart {
	background-color: #ffffff;
	color: var(--cheetah-primary, #2563eb);
	border: 1px solid var(--cheetah-primary, #2563eb);
}

.cheetah-product-card__actions .added_to_cart:hover,
.cheetah-product-card__actions .added_to_cart:focus {
	background-color: var(--cheetah-primary, #2563eb);
	color: #ffffff;
	text-decoration: none;
	outline: none;
}

/* --------------------------------------------------------------------------
   Mini Cart styles — MOVED to assets/css/conditional/cart-drawer.css
   --------------------------------------------------------------------------
   The `.cheetah-mini-cart*` rules used to live here. They were removed
   because:
     1. The header mini-cart only renders when the Cart Drawer module is
        enabled (guarded by Cheetah_Cart_Drawer::render_header_mini_cart()
        → should_render() → cart_drawer_enabled).
     2. cart-drawer.css is enqueued on exactly the same condition (see
        inc/core/assets.php → 'cheetah-wc-cart-drawer').
     3. Therefore the mini-cart markup can never appear without
        cart-drawer.css being loaded, and every selector was a duplicate
        of the drawer's authoritative rules.

   Keeping the rules here would only ship dead bytes to every WooCommerce
   page that does not have the drawer enabled.

   DO NOT re-add `.cheetah-mini-cart`, `.cheetah-mini-cart__toggle`,
   `.cheetah-mini-cart__count`, or `.cheetah-mini-cart__total` to this
   file. Edit assets/css/conditional/cart-drawer.css instead.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Quantity Stepper
   -------------------------------------------------------------------------- */

/*
 * The normal `.quantity` wrapper — applied whenever the wrapper holds a
 * visible number input and (optionally) the theme's ± buttons.
 *
 * The wrapper's class is swapped client-side from `quantity` to
 * `cheetah-quantity-locked` (see CartAjax.swapLockedQuantityWrappers()
 * in assets/js/conditional/cart-ajax.js) whenever WooCommerce renders a
 * hidden quantity input — i.e. whenever the effective min and max
 * purchase quantities are equal. Because the locked wrapper never
 * carries `.quantity`, none of the rules below match it, and there is
 * no cascade conflict to resolve for that state.
 */
.woocommerce .quantity,
.quantity {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	background-color: #ffffff;
	border: 1px solid var(--cheetah-border, #e2e8f0);
	border-radius: var(--cheetah-radius-md, 8px);
	overflow: hidden;
}

/*
 * Locked quantity container.
 *
 * The `cheetah-quantity-locked` class is added client-side by the
 * CartAjax module in assets/js/conditional/cart-ajax.js whenever the
 * theme's own "Max N" badge is present inside a `.quantity` wrapper.
 * See that file for the full rationale on why the swap is done in JS
 * rather than PHP or CSS.
 *
 * Because the wrapper no longer carries the `.quantity` class, none of
 * the pill rules above apply to it, and neither the cart page's
 * `.cheetah-cart-table .product-quantity .quantity` override nor the
 * single product page's `.cheetah-product__summary .cart .quantity`
 * override match. There is no cascade conflict, so no reset rule and
 * no `!important` are needed anywhere in the stylesheet.
 *
 * Do NOT add pill chrome to this class. If a future quantity context
 * needs different spacing around the locked wrapper, override the
 * layout (margin/padding) in that context — not the visual style.
 */
.cheetah-quantity-locked {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/*
 * Limit badge — shown in place of the ± stepper when the per-order limit
 * is reached.
 *
 * Compact pill that reads as a status label rather than as a form
 * control. Neutral slate palette keeps it visually quiet next to the
 * price and subtotal columns, and the tabular-numeral setting keeps
 * multi-digit limits (10, 12, 99) aligned column-wise with the numbers
 * around them.
 */
.cheetah-qty-limit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0.35rem 0.7rem;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	color: #64748b;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.005em;
	white-space: nowrap;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.cheetah-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	background-color: transparent;
	border: none;
	color: var(--cheetah-text-muted, #64748b);
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cheetah-qty-btn:hover {
	background-color: var(--cheetah-primary, #2563eb);
	color: #ffffff;
}

.cheetah-qty-btn:active {
	background-color: var(--cheetah-primary-hover, #1d4ed8);
}

.woocommerce .quantity .qty,
.quantity .qty {
	width: 56px;
	height: 44px;
	padding: 0;
	margin: 0;
	background-color: #ffffff;
	border: none;
	border-left: 1px solid var(--cheetah-border, #e2e8f0);
	border-right: 1px solid var(--cheetah-border, #e2e8f0);
	border-radius: 0;
	color: var(--cheetah-text, #1e293b);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce .quantity .qty:focus {
	outline: none;
}

/* Cart page alignment fix */
.woocommerce-cart-form .quantity {
	width: auto;
}