/**
 * WooCommerce Appearance - storefront styles.
 *
 * Every rule is scoped to body.wcapp so it only affects the Cart and Checkout
 * pages this plugin targets, and every visual value reads from a --wcapp-*
 * design token. Switching a preset (or editing a token) re-maps those tokens
 * and restyles everything below.
 */

/* -------------------------------------------------------------------------
 * Derived tokens (a modular scale computed from the editable base tokens).
 * The base tokens themselves are injected inline, scoped to body.wcapp.
 * ---------------------------------------------------------------------- */
body.wcapp {
  --wcapp-radius-sm: calc(var(--wcapp-radius) * 0.55);
  --wcapp-fs-sm: calc(var(--wcapp-font-size) * 0.86);
  --wcapp-fs-lg: calc(var(--wcapp-font-size) * 1.15);
  --wcapp-fs-h1: calc(var(--wcapp-font-size) * 1.9);
  --wcapp-fs-h2: calc(var(--wcapp-font-size) * 1.35);
  --wcapp-fs-h3: calc(var(--wcapp-font-size) * 1.1);
  --wcapp-gap: 14px;
  --wcapp-pad: var(--wcapp-surface-padding);
  --wcapp-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
  --wcapp-ring: 0 0 0 3px color-mix(in srgb, var(--wcapp-color-focus) 40%, transparent);
}

/* -------------------------------------------------------------------------
 * Foundation: inherit colour and typography only. The plugin deliberately does
 * NOT set width, padding, background, margin, or positioning on WooCommerce's
 * structural containers so the active theme keeps full control of the layout.
 * ---------------------------------------------------------------------- */
body.wcapp .woocommerce {
  color: var(--wcapp-color-text);
  font-family: var(--wcapp-font-base);
  font-size: var(--wcapp-font-size);
  line-height: var(--wcapp-line-height);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

body.wcapp .woocommerce img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------------------------------------
 * Full Canvas Mode (opt-in).
 *
 * When enabled, the plugin also paints the Cart/Checkout page background with
 * the preset so the design reads as a full-width, immersive layout instead of
 * themed cards on the theme's page background. It is scoped to the
 * wcapp-full-canvas body class, which the plugin only adds on its target pages
 * and only when the setting is on, so the theme's own background is preserved
 * everywhere else. Header and footer text colours are left to the theme.
 * ---------------------------------------------------------------------- */
body.wcapp-full-canvas {
  background-color: var(--wcapp-color-bg);
}
body.wcapp-full-canvas #page,
body.wcapp-full-canvas .site,
body.wcapp-full-canvas #content,
body.wcapp-full-canvas .site-content,
body.wcapp-full-canvas .content-area,
body.wcapp-full-canvas #primary,
body.wcapp-full-canvas .site-main,
body.wcapp-full-canvas main,
body.wcapp-full-canvas .entry-content,
body.wcapp-full-canvas article {
  background-color: transparent;
}
body.wcapp-full-canvas #content,
body.wcapp-full-canvas .site-content,
body.wcapp-full-canvas .content-area,
body.wcapp-full-canvas #primary,
body.wcapp-full-canvas .site-main,
body.wcapp-full-canvas main,
body.wcapp-full-canvas .entry-content,
body.wcapp-full-canvas article {
  color: var(--wcapp-color-text);
}
body.wcapp-full-canvas .woocommerce {
  padding-block: clamp(20px, 4vw, 48px);
}

body.wcapp .woocommerce *,
body.wcapp .woocommerce *::before,
body.wcapp .woocommerce *::after {
  box-sizing: border-box;
}

body.wcapp .woocommerce h1,
body.wcapp .woocommerce h2,
body.wcapp .woocommerce h3,
body.wcapp .woocommerce h4 {
  font-family: var(--wcapp-font-heading);
  color: var(--wcapp-color-heading);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

body.wcapp .woocommerce h1 { font-size: var(--wcapp-fs-h1); font-weight: 700; letter-spacing: -0.02em; }
body.wcapp .woocommerce h2 { font-size: var(--wcapp-fs-h2); font-weight: 650; letter-spacing: -0.01em; }
body.wcapp .woocommerce h3 { font-size: var(--wcapp-fs-h3); font-weight: 600; }

body.wcapp .woocommerce a {
  color: var(--wcapp-color-accent);
  text-decoration: none;
  transition: color var(--wcapp-transition);
}
body.wcapp .woocommerce a:hover { color: var(--wcapp-color-accent-hover); }

/* Smooth interactions only after the runtime marks the page ready. */
body.wcapp.wcapp-ready .woocommerce a,
body.wcapp.wcapp-ready .woocommerce .button,
body.wcapp.wcapp-ready .woocommerce input,
body.wcapp.wcapp-ready .woocommerce select,
body.wcapp.wcapp-ready .woocommerce textarea {
  transition:
    color var(--wcapp-transition),
    background-color var(--wcapp-transition),
    border-color var(--wcapp-transition),
    box-shadow var(--wcapp-transition),
    transform var(--wcapp-transition);
}

/* -------------------------------------------------------------------------
 * Checkout progress stepper.
 *
 * Shoptimizer ships a native "checkout-bar" progress list (li items with an
 * .active current step and .visited completed steps; each numbered circle is
 * drawn with li::before). We deliberately DO NOT rebuild it - the theme owns the
 * layout, sizing, spacing, and connecting lines. We only (1) perfectly centre
 * the number inside each circle (the theme centres it with line-height, which
 * leaves the digit sitting a couple of pixels low) and (2) map the three state
 * colours - inactive, completed, active - to the selected preset. This keeps the
 * original Shoptimizer design intact on every screen size.
 * ---------------------------------------------------------------------- */

/* (1) Centre the digit regardless of the theme's circle size / line-height. */
body.wcapp ul.checkout-bar li::before {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-shadow: none;
}

/* (2a) Inactive / upcoming steps. */
body.wcapp ul.checkout-bar li { color: var(--wcapp-color-muted); }
body.wcapp ul.checkout-bar li::before {
  background-color: var(--wcapp-color-surface-alt);
  border-color: var(--wcapp-color-surface);
  color: var(--wcapp-color-muted);
}

/* (2b) Completed steps (.visited). */
body.wcapp ul.checkout-bar li.visited { color: var(--wcapp-color-text); }
body.wcapp ul.checkout-bar li.visited::before {
  background-color: color-mix(in srgb, var(--wcapp-color-accent) 22%, var(--wcapp-color-surface));
  border-color: var(--wcapp-color-surface);
  color: var(--wcapp-color-accent);
}

/* (2c) Current step (.active). */
body.wcapp ul.checkout-bar li.active { color: var(--wcapp-color-heading); }
body.wcapp ul.checkout-bar li.active::before {
  background-color: var(--wcapp-color-accent);
  border-color: var(--wcapp-color-surface);
  color: var(--wcapp-color-accent-contrast);
}

/* -------------------------------------------------------------------------
 * Surfaces (tables and panels).
 * ---------------------------------------------------------------------- */
body.wcapp .woocommerce table.shop_table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--wcapp-color-surface);
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  border-radius: var(--wcapp-radius);
  box-shadow: var(--wcapp-shadow);
  overflow: hidden;
  margin: 0 0 var(--wcapp-gap);
  color: var(--wcapp-color-text);
}

body.wcapp .woocommerce table.shop_table th,
body.wcapp .woocommerce table.shop_table td {
  padding: 16px 18px;
  border: 0;
  border-bottom: var(--wcapp-border-width) solid var(--wcapp-color-border);
  text-align: left;
  vertical-align: middle;
  background: transparent;
  /* Set the colour explicitly rather than relying on inheritance: themes
     (Shoptimizer included) colour <th> directly, which would otherwise beat the
     colour inherited from the table and render labels like "Subtotal" unreadable. */
  color: var(--wcapp-color-text);
}

/* Row-header cells (Subtotal / Shipping / Total labels) and footer totals get
   the stronger heading colour for clear, AA-contrast emphasis. */
body.wcapp .woocommerce table.shop_table th {
  color: var(--wcapp-color-heading);
}
body.wcapp .woocommerce table.shop_table tfoot th,
body.wcapp .woocommerce table.shop_table tfoot td {
  color: var(--wcapp-color-heading);
}

body.wcapp .woocommerce table.shop_table thead th {
  font-size: var(--wcapp-fs-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wcapp-color-muted);
  background: var(--wcapp-color-surface-alt);
}

body.wcapp .woocommerce table.shop_table tbody tr:last-child td,
body.wcapp .woocommerce table.shop_table tfoot tr:last-child th,
body.wcapp .woocommerce table.shop_table tfoot tr:last-child td {
  border-bottom: 0;
}

body.wcapp .woocommerce table.shop_table tbody tr:hover td {
  background: color-mix(in srgb, var(--wcapp-color-accent) 5%, transparent);
}

/* Prices */
body.wcapp .woocommerce .woocommerce-Price-amount,
body.wcapp .woocommerce .product-price,
body.wcapp .woocommerce .product-subtotal,
body.wcapp .woocommerce .product-total {
  color: var(--wcapp-color-price);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

body.wcapp .woocommerce .woocommerce-Price-currencySymbol { font-weight: 500; }

/* -------------------------------------------------------------------------
 * Cart specifics.
 * ---------------------------------------------------------------------- */
body.wcapp .woocommerce .cart .product-thumbnail img,
body.wcapp .woocommerce .cart_item .product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--wcapp-radius-sm);
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  display: block;
}

body.wcapp .woocommerce .cart .product-name a {
  font-weight: 600;
  color: var(--wcapp-color-heading);
}
body.wcapp .woocommerce .cart .product-name a:hover { color: var(--wcapp-color-accent); }

body.wcapp .woocommerce .cart .product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  color: var(--wcapp-color-muted);
  background: transparent;
  border: var(--wcapp-border-width) solid transparent;
  text-decoration: none;
}
body.wcapp .woocommerce .cart .product-remove a.remove:hover {
  color: var(--wcapp-color-error);
  background: color-mix(in srgb, var(--wcapp-color-error) 12%, transparent);
  border-color: color-mix(in srgb, var(--wcapp-color-error) 30%, transparent);
}

/* Quantity stepper */
body.wcapp .woocommerce .quantity {
  display: inline-flex;
  align-items: center;
  border: var(--wcapp-border-width) solid var(--wcapp-color-input-border);
  border-radius: var(--wcapp-radius-sm);
  background: var(--wcapp-color-input-bg);
  overflow: hidden;
}
body.wcapp .woocommerce .quantity input.qty {
  width: 62px;
  border: 0;
  background: transparent;
  color: var(--wcapp-color-text);
  text-align: center;
  padding: 10px 6px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
body.wcapp .woocommerce .quantity input.qty:focus { outline: none; box-shadow: none; }

/* Cart action row */
body.wcapp .woocommerce .cart .actions {
  background: var(--wcapp-color-surface-alt);
}
body.wcapp .woocommerce .cart .actions .coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
body.wcapp .woocommerce .cart .actions .coupon .input-text {
  max-width: 240px;
}

/* Cart totals card */
body.wcapp .woocommerce .cart-collaterals .cart_totals {
  background: var(--wcapp-color-surface-alt);
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  border-radius: var(--wcapp-radius);
  box-shadow: var(--wcapp-shadow);
  padding: var(--wcapp-pad);
}
body.wcapp .woocommerce .cart-collaterals .cart_totals h2 { margin-top: 0; }
body.wcapp .woocommerce .cart-collaterals .cart_totals table.shop_table {
  border: 0;
  box-shadow: none;
  background: transparent;
  margin-bottom: 18px;
}
body.wcapp .woocommerce .cart-collaterals .cart_totals table.shop_table th {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--wcapp-font-size);
  color: var(--wcapp-color-muted);
  font-weight: 500;
}
body.wcapp .woocommerce .cart_totals .order-total th,
body.wcapp .woocommerce .cart_totals .order-total td {
  font-size: var(--wcapp-fs-lg);
  color: var(--wcapp-color-heading);
  font-weight: 700;
  border-top: var(--wcapp-border-width) solid var(--wcapp-color-border);
}
body.wcapp .woocommerce .cart_totals .order-total .woocommerce-Price-amount {
  color: var(--wcapp-color-price);
}

/* -------------------------------------------------------------------------
 * Buttons.
 * ---------------------------------------------------------------------- */
body.wcapp .woocommerce .button,
body.wcapp .woocommerce button.button,
body.wcapp .woocommerce input.button,
body.wcapp .woocommerce a.button,
body.wcapp .woocommerce #place_order,
body.wcapp .woocommerce .checkout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: var(--wcapp-font-size);
  font-weight: var(--wcapp-button-weight);
  line-height: 1.1;
  padding: 13px 22px;
  border-radius: var(--wcapp-button-radius);
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  background: var(--wcapp-color-surface);
  color: var(--wcapp-color-heading);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--wcapp-transition), color var(--wcapp-transition),
    border-color var(--wcapp-transition), transform var(--wcapp-transition),
    box-shadow var(--wcapp-transition);
  -webkit-appearance: none;
  appearance: none;
}
body.wcapp .woocommerce .button:hover,
body.wcapp .woocommerce button.button:hover,
body.wcapp .woocommerce input.button:hover,
body.wcapp .woocommerce a.button:hover {
  border-color: var(--wcapp-color-accent);
  color: var(--wcapp-color-accent);
  transform: translateY(-1px);
}

/* Primary / call-to-action buttons */
body.wcapp .woocommerce .button.alt,
body.wcapp .woocommerce button.button.alt,
body.wcapp .woocommerce input.button.alt,
body.wcapp .woocommerce #place_order,
body.wcapp .woocommerce .checkout-button {
  background: var(--wcapp-color-accent);
  border-color: var(--wcapp-color-accent);
  color: var(--wcapp-color-accent-contrast);
  box-shadow: var(--wcapp-shadow);
}
body.wcapp .woocommerce .button.alt:hover,
body.wcapp .woocommerce button.button.alt:hover,
body.wcapp .woocommerce input.button.alt:hover,
body.wcapp .woocommerce #place_order:hover,
body.wcapp .woocommerce .checkout-button:hover {
  background: var(--wcapp-color-accent-hover);
  border-color: var(--wcapp-color-accent-hover);
  color: var(--wcapp-color-accent-contrast);
  transform: translateY(-1px);
}
body.wcapp .woocommerce .button:active,
body.wcapp .woocommerce button.button:active,
body.wcapp .woocommerce #place_order:active { transform: translateY(0); }

body.wcapp .woocommerce .button:disabled,
body.wcapp .woocommerce button.button:disabled,
body.wcapp .woocommerce button.button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

body.wcapp .woocommerce .wc-proceed-to-checkout { padding-top: 4px; }
body.wcapp .woocommerce .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  padding: 16px 22px;
  font-size: var(--wcapp-fs-lg);
}

/* -------------------------------------------------------------------------
 * Forms (Checkout + coupon/login).
 * ---------------------------------------------------------------------- */
body.wcapp .woocommerce form .form-row { margin: 0 0 16px; padding: 0; }

body.wcapp .woocommerce label {
  display: block;
  font-size: var(--wcapp-fs-sm);
  font-weight: 600;
  color: var(--wcapp-color-heading);
  margin: 0 0 7px;
}
body.wcapp .woocommerce .required { color: var(--wcapp-color-error); border: 0; }
body.wcapp .woocommerce .optional { color: var(--wcapp-color-muted); }

body.wcapp .woocommerce input.input-text,
body.wcapp .woocommerce input[type="text"],
body.wcapp .woocommerce input[type="email"],
body.wcapp .woocommerce input[type="tel"],
body.wcapp .woocommerce input[type="password"],
body.wcapp .woocommerce input[type="number"],
body.wcapp .woocommerce input[type="search"],
body.wcapp .woocommerce textarea,
body.wcapp .woocommerce select {
  width: 100%;
  font-family: inherit;
  font-size: var(--wcapp-font-size);
  color: var(--wcapp-color-input-text, var(--wcapp-color-text));
  background: var(--wcapp-color-input-bg);
  border: var(--wcapp-border-width) solid var(--wcapp-color-input-border);
  border-radius: var(--wcapp-radius-sm);
  padding: 12px 14px;
  line-height: 1.4;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
body.wcapp .woocommerce textarea { min-height: 110px; padding: 12px 14px; resize: vertical; }

/* Select2 / SelectWoo control chrome (both single and multi selects) - matches
   the text inputs visually, but WITHOUT the shared 12px vertical padding, which
   is what pushed the country label down and clipped its lower half. Vertical
   centring is handled by the single-select rule below. Scoped to
   .select2-container (not the --default modifier) so it applies whatever theme
   class SelectWoo emits, and it leaves every other WooCommerce field untouched. */
body.wcapp .woocommerce .select2-container .select2-selection {
  width: 100%;
  font-family: inherit;
  font-size: var(--wcapp-font-size);
  color: var(--wcapp-color-input-text, var(--wcapp-color-text));
  background: var(--wcapp-color-input-bg);
  border: var(--wcapp-border-width) solid var(--wcapp-color-input-border);
  border-radius: var(--wcapp-radius-sm);
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

body.wcapp .woocommerce input.input-text::placeholder,
body.wcapp .woocommerce textarea::placeholder {
  color: var(--wcapp-color-muted);
  opacity: 0.8;
}

body.wcapp .woocommerce input.input-text:focus,
body.wcapp .woocommerce input[type="text"]:focus,
body.wcapp .woocommerce input[type="email"]:focus,
body.wcapp .woocommerce input[type="tel"]:focus,
body.wcapp .woocommerce input[type="password"]:focus,
body.wcapp .woocommerce input[type="number"]:focus,
body.wcapp .woocommerce textarea:focus,
body.wcapp .woocommerce select:focus {
  outline: none;
  border-color: var(--wcapp-color-focus);
  box-shadow: var(--wcapp-ring);
}

/* Validation states */
body.wcapp .woocommerce .form-row.woocommerce-invalid input.input-text,
body.wcapp .woocommerce .form-row.woocommerce-invalid select,
body.wcapp .woocommerce .form-row.woocommerce-invalid .select2-selection {
  border-color: var(--wcapp-color-error);
}
body.wcapp .woocommerce .form-row.woocommerce-validated input.input-text,
body.wcapp .woocommerce .form-row.woocommerce-validated select {
  border-color: var(--wcapp-color-success);
}

/* Checkout structure (columns, field grid, sticky order summary) is
   intentionally left to the active theme. WooCommerce Appearance only themes the
   individual fields, buttons, tables, and the summary/payment surfaces below, so
   it composes with the theme's layout instead of overriding it. */

/* Order review + payment card */
body.wcapp .woocommerce #order_review {
  background: var(--wcapp-color-surface-alt);
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  border-radius: var(--wcapp-radius);
  box-shadow: var(--wcapp-shadow);
  padding: var(--wcapp-pad);
}
body.wcapp .woocommerce #order_review table.shop_table {
  border: 0;
  box-shadow: none;
  background: transparent;
}
body.wcapp .woocommerce #order_review .order-total th,
body.wcapp .woocommerce #order_review .order-total td {
  font-size: var(--wcapp-fs-lg);
  font-weight: 700;
  color: var(--wcapp-color-heading);
}

/* Payment methods */
body.wcapp .woocommerce #payment {
  background: transparent;
  border-radius: var(--wcapp-radius);
}
body.wcapp .woocommerce #payment ul.payment_methods {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.wcapp .woocommerce #payment ul.payment_methods li.wc_payment_method {
  background: var(--wcapp-color-surface);
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  border-radius: var(--wcapp-radius-sm);
  padding: 14px 16px;
}
/* Reflect the ACTUAL selected gateway. Previously every method shared one
   identical highlighted card, so they all read as "selected". Now only the
   method whose radio is :checked shows the active (accent) state; all others
   stay in the neutral, unselected state. :has() tracks the real :checked input,
   so the highlight follows clicks AND keyboard selection instantly - no JS, and
   no dependency on theme-added classes. Where :has() is unsupported the rule is
   simply ignored and every method stays neutral (never all-selected). */
body.wcapp .woocommerce #payment ul.payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
  border-color: var(--wcapp-color-accent);
  background: color-mix(in srgb, var(--wcapp-color-accent) 8%, var(--wcapp-color-surface));
  box-shadow: 0 0 0 1px var(--wcapp-color-accent);
}
body.wcapp .woocommerce #payment ul.payment_methods li.wc_payment_method > label {
  display: inline-block;
  margin: 0 0 0 6px;
  font-weight: 600;
  color: var(--wcapp-color-heading);
  cursor: pointer;
}
body.wcapp .woocommerce #payment ul.payment_methods li input[type="radio"] { accent-color: var(--wcapp-color-accent); }
body.wcapp .woocommerce #payment div.payment_box {
  background: var(--wcapp-color-surface-alt);
  border-radius: var(--wcapp-radius-sm);
  color: var(--wcapp-color-muted);
  font-size: var(--wcapp-fs-sm);
  margin-top: 12px;
  padding: 14px 16px;
}
body.wcapp .woocommerce #payment div.payment_box::before { display: none; }
body.wcapp .woocommerce #payment .place-order { padding-top: 4px; }
body.wcapp .woocommerce #payment #place_order { width: 100%; padding: 16px 22px; font-size: var(--wcapp-fs-lg); }

/* Terms / privacy */
body.wcapp .woocommerce .woocommerce-terms-and-conditions-wrapper { color: var(--wcapp-color-muted); font-size: var(--wcapp-fs-sm); }

/* Coupon / login toggles shown as info banners */
body.wcapp .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info,
body.wcapp .woocommerce .woocommerce-form-login-toggle .woocommerce-info {
  margin-bottom: 16px;
  color: var(--wcapp-color-text);
}
/* The "Have a coupon?" prompt and its toggle link must stay legible on every
   preset (the default theme colour is often too dark on the themed banner), so
   the prompt uses the readable text token and the link uses the accent token. */
body.wcapp .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon,
body.wcapp .woocommerce a.showcoupon,
body.wcapp .woocommerce .woocommerce-form-login-toggle .woocommerce-info a.showlogin,
body.wcapp .woocommerce a.showlogin {
  color: var(--wcapp-color-accent);
  font-weight: 600;
  text-decoration: underline;
}
body.wcapp .woocommerce .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon:hover,
body.wcapp .woocommerce a.showcoupon:hover,
body.wcapp .woocommerce .woocommerce-form-login-toggle .woocommerce-info a.showlogin:hover,
body.wcapp .woocommerce a.showlogin:hover {
  color: var(--wcapp-color-accent-hover);
}
body.wcapp .woocommerce form.checkout_coupon,
body.wcapp .woocommerce form.login,
body.wcapp .woocommerce form.woocommerce-form-login {
  background: var(--wcapp-color-surface);
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  border-radius: var(--wcapp-radius);
  box-shadow: var(--wcapp-shadow);
  padding: var(--wcapp-pad);
}

/* -------------------------------------------------------------------------
 * Notices.
 * ---------------------------------------------------------------------- */
body.wcapp .woocommerce .woocommerce-message,
body.wcapp .woocommerce .woocommerce-info,
body.wcapp .woocommerce .woocommerce-error {
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  border-left-width: 4px;
  border-radius: var(--wcapp-radius-sm);
  background: var(--wcapp-color-surface);
  color: var(--wcapp-color-text);
  box-shadow: var(--wcapp-shadow);
  padding: 14px 16px;
  margin: 0 0 18px;
  list-style: none;
}
body.wcapp .woocommerce .woocommerce-message { border-left-color: var(--wcapp-color-success); }
body.wcapp .woocommerce .woocommerce-info { border-left-color: var(--wcapp-color-accent); }
body.wcapp .woocommerce .woocommerce-error { border-left-color: var(--wcapp-color-error); }
body.wcapp .woocommerce .woocommerce-error li { list-style: none; }

/* Empty cart. Shoptimizer renders a centred icon + "No products in the basket."
   message + button. The message carries the .woocommerce-info class, so our
   banner box (padding / border / shadow) was landing on it and colliding with
   the theme's icon. Neutralise the box here so the native centred layout stands;
   only the colour follows the preset. The theme's icon (its own ::before /
   background) is left untouched. */
body.wcapp .woocommerce .cart-empty.woocommerce-info,
body.wcapp .woocommerce .wc-empty-cart-message .cart-empty {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: var(--wcapp-color-text);
}

/* -------------------------------------------------------------------------
 * Select2 (country / state dropdowns). Rendered at the end of <body>, so we
 * scope through body.wcapp to catch the detached dropdown too.
 * ---------------------------------------------------------------------- */
body.wcapp .woocommerce .select2-container { max-width: 100%; }
/* Give the single-select a fixed height that matches the text inputs and centre
   the label with line-height equal to the inner (content-box) height. This is
   the canonical Select2 fix: the label sits on one perfectly centred line, so
   the previous clipping of the lower half of the country name cannot occur.
   min-width:0 lets the flex item shrink so ellipsis works instead of overflow. */
body.wcapp .woocommerce .select2-container .select2-selection--single {
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px;
}
body.wcapp .woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
  display: block;
  min-width: 0;
  color: var(--wcapp-color-input-text, var(--wcapp-color-text));
  /* 48px height - 2px (top+bottom border) = 46px content box. */
  line-height: 46px;
  /* Clear the absolutely-positioned arrow so the selected text is never covered. */
  padding: 0 26px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.wcapp .woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 12px;
  height: 48px;
  width: 20px;
}
/* Keep the detached dropdown above sticky theme elements. */
body.wcapp .select2-container--open { z-index: 99999; }
body.wcapp .select2-dropdown {
  background: var(--wcapp-color-surface);
  border: var(--wcapp-border-width) solid var(--wcapp-color-input-border);
  border-radius: var(--wcapp-radius-sm);
  color: var(--wcapp-color-text);
  box-shadow: var(--wcapp-shadow);
}
body.wcapp .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--wcapp-color-accent);
  color: var(--wcapp-color-accent-contrast);
}
body.wcapp .select2-search--dropdown .select2-search__field {
  background: var(--wcapp-color-input-bg);
  border: var(--wcapp-border-width) solid var(--wcapp-color-input-border);
  border-radius: var(--wcapp-radius-sm);
  color: var(--wcapp-color-text);
  padding: 8px 10px;
}

/* -------------------------------------------------------------------------
 * Focus visibility (accessibility).
 * ---------------------------------------------------------------------- */
body.wcapp .woocommerce a:focus-visible,
body.wcapp .woocommerce .button:focus-visible,
body.wcapp .woocommerce button:focus-visible,
body.wcapp .woocommerce input:focus-visible,
body.wcapp .woocommerce select:focus-visible,
body.wcapp .woocommerce textarea:focus-visible {
  outline: 2px solid var(--wcapp-color-focus);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Thank you / Order received page.
 *
 * The order-received page is a Checkout endpoint, so it already carries the
 * body.wcapp scope and inherits the shared table / button / heading / notice
 * styling. These rules finish the confirmation-specific pieces so the page reads
 * as a natural continuation of the Cart and Checkout design system, on light and
 * dark presets alike.
 * ---------------------------------------------------------------------- */

/* Success confirmation message ("Thank you. Your order has been received."). */
body.wcapp .woocommerce .woocommerce-order .woocommerce-notice--success,
body.wcapp .woocommerce p.woocommerce-thankyou-order-received {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  border-left: 4px solid var(--wcapp-color-success);
  border-radius: var(--wcapp-radius-sm);
  background: color-mix(in srgb, var(--wcapp-color-success) 8%, var(--wcapp-color-surface));
  color: var(--wcapp-color-heading);
  font-size: var(--wcapp-fs-lg);
  font-weight: 600;
}

/* Order overview: order number / date / email / total / payment method. */
body.wcapp .woocommerce ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  list-style: none;
  /* The theme paints this list white (via .order_details), which shows through
     the gaps between the stat cards and clashes with dark presets. Make it
     transparent so the cards sit on the page background. !important is required
     because the theme sets this with high priority on the order-received page. */
  background-color: transparent !important;
}
body.wcapp .woocommerce ul.woocommerce-order-overview li {
  flex: 1 1 160px;
  float: none;
  margin: 0;
  padding: 14px 16px;
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  border-radius: var(--wcapp-radius-sm);
  background: var(--wcapp-color-surface);
  color: var(--wcapp-color-muted);
  font-size: var(--wcapp-fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
body.wcapp .woocommerce ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 6px;
  color: var(--wcapp-color-heading);
  font-size: var(--wcapp-font-size);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}
body.wcapp .woocommerce ul.woocommerce-order-overview li .woocommerce-Price-amount {
  color: var(--wcapp-color-price);
}

/* Section headings. */
body.wcapp .woocommerce .woocommerce-order-details > h2,
body.wcapp .woocommerce .woocommerce-customer-details > h2,
body.wcapp .woocommerce .woocommerce-order-downloads > h2 {
  color: var(--wcapp-color-heading);
  margin: 0 0 14px;
}

/* Order-details line items. The theme colours the item name / quantity / total
   directly on the child elements, which overrides the colour inherited from the
   cell and can render too dark (invisible) on dark presets. Force the readable
   text colour on every descendant. !important is required to beat the theme's
   element-level colours on the order-received page. */
body.wcapp .woocommerce .woocommerce-table__line-item.order_item,
body.wcapp .woocommerce .woocommerce-table__line-item.order_item * {
  color: var(--wcapp-color-text) !important;
}

/* Customer / billing / shipping address cards. */
body.wcapp .woocommerce .woocommerce-customer-details .woocommerce-columns--addresses,
body.wcapp .woocommerce .woocommerce-customer-details .col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wcapp-gap);
  margin: 0;
  width: 100%;
}
body.wcapp .woocommerce .woocommerce-customer-details .woocommerce-column,
body.wcapp .woocommerce .woocommerce-customer-details .col2-set .col-1,
body.wcapp .woocommerce .woocommerce-customer-details .col2-set .col-2 {
  flex: 1 1 240px;
  width: auto;
  margin: 0;
  padding: 18px 20px;
  border: var(--wcapp-border-width) solid var(--wcapp-color-border);
  border-radius: var(--wcapp-radius);
  background: var(--wcapp-color-surface);
  box-shadow: var(--wcapp-shadow);
}
body.wcapp .woocommerce .woocommerce-customer-details .woocommerce-column__title,
body.wcapp .woocommerce .woocommerce-customer-details .col-1 > h2,
body.wcapp .woocommerce .woocommerce-customer-details .col-2 > h2 {
  color: var(--wcapp-color-heading);
  margin: 0 0 10px;
}
body.wcapp .woocommerce .woocommerce-customer-details address {
  color: var(--wcapp-color-text);
  font-style: normal;
  line-height: 1.7;
  border: 0;
  padding: 0;
}
body.wcapp .woocommerce .woocommerce-customer-details address a {
  color: var(--wcapp-color-accent);
}

/* -------------------------------------------------------------------------
 * Responsive: let cart / order tables reflow into rows on small screens.
 * ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  body.wcapp .woocommerce table.shop_table.shop_table_responsive thead { display: none; }
  body.wcapp .woocommerce table.shop_table.shop_table_responsive tbody tr {
    display: block;
    border-bottom: var(--wcapp-border-width) solid var(--wcapp-color-border);
  }
  body.wcapp .woocommerce table.shop_table.shop_table_responsive tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    border-bottom: 0;
  }
  body.wcapp .woocommerce table.shop_table.shop_table_responsive tbody td::before {
    content: attr(data-title);
    font-weight: 600;
    color: var(--wcapp-color-muted);
    text-align: left;
  }
}

/* -------------------------------------------------------------------------
 * Responsive: Order Review on small screens.
 *
 * The Order Review is a compact 2-column table plus the payment options, all
 * wrapped in a padded card (#order_review uses --wcapp-pad, 28px by default). On
 * phones that card padding + the 16/18px cell padding + the per-method padding
 * stack up and squeeze the cart_item rows and bloat the payment area. The
 * checkout review table is NOT .shop_table_responsive, so the reflow above never
 * reaches it - these rules tighten the spacing and keep the item name wrapping
 * while the price stays compact and right-aligned. Desktop layout is unchanged.
 * ---------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Trim the card padding so content isn't squeezed on narrow screens. */
  body.wcapp .woocommerce #order_review { padding: 14px; }

  /* Keep the 2-column review layout, tighten cell padding, and top-align both
     columns so a wrapped item name lines up with its price. */
  body.wcapp .woocommerce .woocommerce-checkout-review-order-table th,
  body.wcapp .woocommerce .woocommerce-checkout-review-order-table td {
    padding: 10px 8px;
  }
  body.wcapp .woocommerce .woocommerce-checkout-review-order-table .product-name {
    width: auto;
    vertical-align: top;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  body.wcapp .woocommerce .woocommerce-checkout-review-order-table .product-total {
    vertical-align: top;
    text-align: right;
    white-space: nowrap;
  }

  /* Remove the oversized paddings around the payment options. */
  body.wcapp .woocommerce #payment ul.payment_methods { gap: 8px; }
  body.wcapp .woocommerce #payment ul.payment_methods li.wc_payment_method { padding: 10px 12px; }
  body.wcapp .woocommerce #payment div.payment_box { padding: 10px 12px; margin-top: 8px; }
  body.wcapp .woocommerce #payment #place_order { padding: 14px 18px; }
}

/* -------------------------------------------------------------------------
 * Preset-specific signatures.
 * ---------------------------------------------------------------------- */

/* Glass: frost the translucent surfaces. */
body.wcapp.wcapp-preset-glass .woocommerce table.shop_table,
body.wcapp.wcapp-preset-glass .woocommerce .cart_totals,
body.wcapp.wcapp-preset-glass .woocommerce #order_review,
body.wcapp.wcapp-preset-glass .woocommerce #payment ul.payment_methods li.wc_payment_method {
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}

/* Aurora: gradient call-to-action buttons. */
body.wcapp.wcapp-preset-aurora .woocommerce .button.alt,
body.wcapp.wcapp-preset-aurora .woocommerce #place_order,
body.wcapp.wcapp-preset-aurora .woocommerce .checkout-button {
  background-image: linear-gradient(135deg, #a855f7 0%, #d946ef 55%, #ec4899 100%);
  border-color: transparent;
}

/* Titanium: subtle brushed-metal sheen on cards. */
body.wcapp.wcapp-preset-titanium .woocommerce table.shop_table,
body.wcapp.wcapp-preset-titanium .woocommerce .cart_totals,
body.wcapp.wcapp-preset-titanium .woocommerce #order_review {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 60%);
}

/* Neon: glowing call-to-action buttons. */
body.wcapp.wcapp-preset-neon .woocommerce .button.alt,
body.wcapp.wcapp-preset-neon .woocommerce #place_order,
body.wcapp.wcapp-preset-neon .woocommerce .checkout-button {
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.4), 0 0 22px rgba(74, 222, 128, 0.35);
}

/* -------------------------------------------------------------------------
 * Reduced motion.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.wcapp .woocommerce *,
  body.wcapp .woocommerce *::before,
  body.wcapp .woocommerce *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  body.wcapp .woocommerce .button:hover,
  body.wcapp .woocommerce #place_order:hover { transform: none; }
}