/*
Theme Name: Kavi TCG
Theme URI: https://github.com/endlessfaith/Kavi-WooCommerce
Author: Kavi TCG
Description: A dark, accent-teal WooCommerce theme for a trading card game store. Ported from the "Kavi TCG Store" Claude Design canvas: sticky search header with live suggestions, rotating hero, shop-by-game grid, faceted product archive, condition-priced product pages and a cart summary with GST and free-shipping threshold.
Version: 3.1.4
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kavi-tcg
Tags: e-commerce, dark, one-column, custom-menu, featured-images, translation-ready
WC requires at least: 7.0
WC tested up to: 9.9
*/

/* Design tokens ---------------------------------------------------------- */
/*
 * Single source of truth is theme.json: its colour palette generates the
 * --wp--preset--color--* variables, and these aliases map them onto the
 * --kavi-* names the rest of this stylesheet (and every block's render.php)
 * uses. Editing a colour in the Site Editor therefore flows through the whole
 * theme. Hex fallbacks keep the CSS standalone if global styles fail to load.
 */
:root {
  --kavi-bg: var(--wp--preset--color--bg, #08090A);
  --kavi-bg-alt: var(--wp--preset--color--bg-alt, #0A0C0B);
  --kavi-panel: var(--wp--preset--color--panel, #0E1211);
  --kavi-panel-2: var(--wp--preset--color--panel-2, #101413);
  --kavi-well: var(--wp--preset--color--well, #0A0D0C);
  --kavi-raise: var(--wp--preset--color--raise, #171D1B);
  --kavi-line: var(--wp--preset--color--line, #1A1F1E);
  --kavi-line-soft: var(--wp--preset--color--line-soft, #141918);
  --kavi-border: var(--wp--preset--color--border, #232A28);
  --kavi-border-2: var(--wp--preset--color--border-2, #2C3634);
  --kavi-accent: var(--wp--preset--color--accent, #1FD6B0);
  --kavi-accent-hi: var(--wp--preset--color--accent-hi, #4BE8C6);
  --kavi-accent-dim: rgba(31, 214, 176, 0.12);
  --kavi-accent-line: rgba(31, 214, 176, 0.35);
  --kavi-warn: var(--wp--preset--color--warn, #E2A33C);
  --kavi-warn-dim: rgba(226, 163, 60, 0.12);
  --kavi-text: var(--wp--preset--color--text, #E8EDEB);
  --kavi-text-hi: var(--wp--preset--color--text-hi, #F2F7F5);
  --kavi-text-2: var(--wp--preset--color--text-2, #B9C4C0);
  --kavi-text-3: var(--wp--preset--color--text-3, #9AA8A4);
  --kavi-muted: var(--wp--preset--color--muted, #7E8B87);
  --kavi-muted-2: var(--wp--preset--color--muted-2, #5F6C68);

  /* Form boundaries. The decorative hairlines above sit at 1.2-1.6:1 against
     their surface, which is right for structure you should not notice, but an
     input's edge is information: WCAG 1.4.11 wants 3:1 for it. */
  --kavi-field-line: #55635F;

  --kavi-wrap: 1280px;
  --kavi-font: Sora, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Radius. Four steps, chosen by what the thing is rather than by eye:
     a chip, a control, a card, a pill. */
  --kavi-r-chip: 6px;
  --kavi-r-ctl: 10px;
  --kavi-r-card: 16px;
  --kavi-r-pill: 999px;

  /* Spacing on a 4px grid. */
  --kavi-s-1: 4px;
  --kavi-s-2: 8px;
  --kavi-s-3: 12px;
  --kavi-s-4: 16px;
  --kavi-s-5: 24px;
  --kavi-s-6: 32px;
  --kavi-s-7: 48px;
  --kavi-s-8: 64px;

  /* Type. 11px is the floor: below that the shop's meta lines stopped being
     readable. Display sizes are fluid so titles scale without stepping. */
  --kavi-t-xs: 11px;
  --kavi-t-sm: 13px;
  --kavi-t-base: 15px;
  --kavi-t-md: 18px;
  --kavi-t-lg: 24px;
  --kavi-t-xl: 32px;
  --kavi-t-2xl: 44px;
  --kavi-t-title: clamp(28px, 4vw, 44px);
  --kavi-t-display: clamp(34px, 6vw, 64px);
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--kavi-bg);
  color: var(--kavi-text);
  font-family: var(--kavi-font);
  font-size: var(--kavi-t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--kavi-accent); text-decoration: none; }
a:hover { color: var(--kavi-accent-hi); }

/* Keyboard focus. Nothing but the skip link defined one before, and the
   buttons' :focus only repeated their hover colour, so tabbing through the
   site was invisible. One ring, everywhere, inheriting each element's radius. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--kavi-accent);
  outline-offset: 2px;
  border-radius: inherit;
}
::selection { background: var(--kavi-accent); color: var(--kavi-bg); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; }

/* An unstyled fieldset still gets the browser's 2px groove border in near
   white — visible around "Password change" on the account form. Scoped to
   fieldsets the theme has not classed, so Woo Blocks' own (which carry
   classes and reset their borders) are left alone. */
fieldset:not([class]) {
  border: 1px solid var(--kavi-line);
  border-radius: var(--kavi-r-card);
  padding: var(--kavi-s-4);
  margin: 0 0 var(--kavi-s-4);
  min-width: 0;
}
fieldset:not([class]) > legend {
  padding: 0 var(--kavi-s-2);
  font-size: var(--kavi-t-sm);
  font-weight: 600;
  color: var(--kavi-text-2);
}

h1, h2, h3, h4 { letter-spacing: -0.03em; color: var(--kavi-text-hi); margin: 0; }

.kavi-wrap { max-width: var(--kavi-wrap); margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.kavi-wrap--narrow { max-width: 1080px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  clip: auto; clip-path: none; width: auto; height: auto;
  background: var(--kavi-accent); color: var(--kavi-bg);
  padding: 10px 18px; border-radius: var(--kavi-r-ctl); font-weight: 700;
}

/* Buttons ----------------------------------------------------------------
 * WooCommerce's own CSS ships opacity/filter-based hover dimming on its
 * button classes — both the classic ones targeted here (.button.alt,
 * .checkout-button, .wc-forward — the "Proceed to checkout" link is exactly
 * this: class="checkout-button button alt wc-forward wp-element-button",
 * entirely unrelated to the Cart/Checkout block's .wc-block-components-button
 * fixed separately below) and, as found earlier, the block-based ones too.
 * Any selector list here needs !important on colour plus an explicit
 * opacity/filter/box-shadow reset on :hover, or a same-specificity rule in
 * Woo's own stylesheet can win the cascade tie and wash the colour out —
 * that happened here because the base rule had neither.
 * ---------------------------------------------------------------------- */
.kavi-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
a.checkout-button,
a.wc-forward {
  display: inline-block;
  background: var(--kavi-accent) !important;
  color: var(--kavi-bg) !important;
  font-family: var(--kavi-font);
  font-size: var(--kavi-t-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--kavi-r-ctl);
  cursor: pointer;
  text-align: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kavi-btn:hover,
.kavi-btn:focus,
.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit:focus,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:hover,
.woocommerce button.button.alt:focus,
a.checkout-button:hover,
a.checkout-button:focus,
a.wc-forward:hover,
a.wc-forward:focus {
  background: var(--kavi-accent-hi) !important;
  color: var(--kavi-bg) !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

.kavi-btn--ghost {
  background: transparent;
  border: 1px solid var(--kavi-border-2);
  color: var(--kavi-text);
  font-weight: 600;
}
.kavi-btn--ghost:hover { background: transparent; border-color: var(--kavi-accent); color: var(--kavi-accent); }

/* The shop's buy button was 52x31 — the smallest target on the page was also
   the one that takes the money. */
/* The quiet variant never actually looked quiet: the base button rule above
   sets its background with !important, so every card action rendered as a
   solid accent block. With the price now carrying the accent too, the grid
   had two competing teal elements per card. Filled accent is reserved for the
   one decisive action on a page — the product page's add button, checkout's
   place-order — and the card's action is outlined. */
.kavi-btn--quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--kavi-raise) !important;
  border: 1px solid var(--kavi-border-2);
  color: var(--kavi-text) !important;
  font-size: var(--kavi-t-sm);
  font-weight: 700;
  padding: 0 var(--kavi-s-4);
  border-radius: var(--kavi-r-ctl);
}
.kavi-btn--quiet:hover,
.kavi-btn--quiet:focus { background: var(--kavi-accent) !important; color: var(--kavi-bg) !important; border-color: var(--kavi-accent); }
.woocommerce button.single_add_to_cart_button.is-out-of-stock,
.woocommerce button.single_add_to_cart_button.is-out-of-stock:hover {
  background: var(--kavi-raise) !important;
  color: var(--kavi-muted-2) !important;
  border: 1px solid var(--kavi-border-2);
  cursor: not-allowed;
}
.kavi-btn--quiet.is-out-of-stock,
.kavi-btn--quiet.is-out-of-stock:hover {
  background: var(--kavi-raise) !important;
  border-color: var(--kavi-border-2);
  color: var(--kavi-muted-2) !important;
}

.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after { display: none; }
.woocommerce a.button.loading { opacity: 0.6; }

/* Header ----------------------------------------------------------------- */
.kavi-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 9, 10, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--kavi-line);
}

.kavi-header__inner {
  display: flex;
  align-items: center;
  gap: var(--kavi-s-6);
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.kavi-brand { display: flex; align-items: center; gap: var(--kavi-s-3); flex: 0 0 auto; }
.kavi-brand__mark { flex: 0 0 auto; color: var(--kavi-accent); }
.kavi-brand--logo img,
.kavi-brand--logo .custom-logo { max-height: 44px; width: auto; }
.kavi-brand--small img,
.kavi-brand--small .custom-logo { max-height: 30px; }
.kavi-brand__text { display: flex; flex-direction: column; gap: var(--kavi-s-1); }
.kavi-brand__name { font-size: var(--kavi-t-lg); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--kavi-accent); }
.kavi-brand__tag { font-size: var(--kavi-t-xs); font-weight: 600; letter-spacing: 0.34em; color: var(--kavi-muted); line-height: 1; text-transform: uppercase; }

.kavi-cartlink__icon { position: relative; display: inline-flex; }
.kavi-cartlink__badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: none; align-items: center; justify-content: center;
  border-radius: var(--kavi-r-pill);
  background: var(--kavi-accent); color: var(--kavi-bg);
  font-size: var(--kavi-t-xs); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kavi-search-toggle { display: none; }

/* The confirmation that something landed in the cart. */
@keyframes kavi-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.kavi-cartlink__badge.is-bumped,
.kavi-cartlink.is-bumped { animation: kavi-bump 0.32s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .kavi-cartlink__badge.is-bumped,
  .kavi-cartlink.is-bumped { animation: none; }
}

.kavi-nav { flex: 0 0 auto; }
.kavi-nav ul { display: flex; align-items: center; gap: var(--kavi-s-5); list-style: none; margin: 0; padding: 0; }
.kavi-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--kavi-t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kavi-text-2);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.kavi-nav a:hover,
.kavi-nav .current-menu-item > a,
.kavi-nav .current-menu-parent > a { color: var(--kavi-accent); border-bottom-color: var(--kavi-accent); }

.kavi-nav-toggle {
  display: none;
  background: var(--kavi-panel-2);
  border: 1px solid var(--kavi-border);
  border-radius: var(--kavi-r-ctl);
  color: var(--kavi-text);
  font-size: var(--kavi-t-sm);
  font-weight: 600;
  padding: 10px 14px;
  cursor: pointer;
}

/* Search ----------------------------------------------------------------- */
.kavi-search { position: relative; flex: 1 1 260px; min-width: 220px; }
/* Scoped so the generic input[type="search"] rule further down cannot win on
   specificity and drop the left padding under the search glyph. */
.kavi-search .kavi-search__field {
  width: 100%;
  background: var(--kavi-panel-2);
  border: 1px solid var(--kavi-field-line);
  border-radius: var(--kavi-r-ctl);
  padding: 11px 14px 11px 38px;
  color: var(--kavi-text);
  font-size: var(--kavi-t-sm);
  outline: none;
}
.kavi-search__field::placeholder { color: var(--kavi-muted); }
.kavi-search__field:focus { border-color: var(--kavi-accent); }
.kavi-search__glyph {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px;
  border: 1.5px solid var(--kavi-muted);
  border-radius: 50%;
  pointer-events: none;
}
.kavi-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: var(--kavi-panel-2);
  border: 1px solid var(--kavi-border);
  border-radius: var(--kavi-r-ctl);
  padding: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  z-index: 50;
}
.kavi-suggest[hidden] { display: none; }
.kavi-suggest__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--kavi-s-3);
  padding: 10px 12px; border-radius: var(--kavi-r-ctl); color: inherit;
}
.kavi-suggest__item:hover, .kavi-suggest__item:focus { background: var(--kavi-raise); color: inherit; }
.kavi-suggest__name { font-size: var(--kavi-t-sm); font-weight: 600; color: var(--kavi-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kavi-suggest__meta { font-size: var(--kavi-t-xs); color: var(--kavi-muted); }
.kavi-suggest__price { font-size: var(--kavi-t-sm); font-weight: 700; color: var(--kavi-accent); white-space: nowrap; }
.kavi-suggest__empty { padding: 12px; font-size: var(--kavi-t-sm); color: var(--kavi-muted); }

/* Cart pill -------------------------------------------------------------- */
.kavi-cartlink {
  display: flex; align-items: center; gap: var(--kavi-s-2); min-height: 44px;
  background: var(--kavi-panel-2);
  border: 1px solid var(--kavi-border);
  border-radius: var(--kavi-r-ctl);
  padding: 10px 15px;
  flex: 0 0 auto;
  color: var(--kavi-text);
}
.kavi-cartlink:hover { border-color: var(--kavi-accent); color: var(--kavi-text); }
.kavi-cartlink__glyph { width: 16px; height: 16px; color: var(--kavi-accent); flex-shrink: 0; }
.kavi-cartlink__count { font-size: var(--kavi-t-sm); font-weight: 600; }
.kavi-cartlink__total { font-size: var(--kavi-t-sm); font-weight: 700; color: var(--kavi-accent); }
.kavi-cartlink__total .amount { color: inherit; }

/* Hero ------------------------------------------------------------------- */
.kavi-home { display: flex; flex-direction: column; gap: 72px; padding-top: 40px; padding-bottom: 80px; }

.kavi-hero {
  position: relative;
  border-radius: var(--kavi-r-card);
  overflow: hidden;
  background: var(--kavi-panel);
  border: 1px solid var(--kavi-line);
}
.kavi-hero__grain {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(31, 214, 176, 0.07) 0px, rgba(31, 214, 176, 0.07) 1px, transparent 1px, transparent 18px);
  pointer-events: none;
}
.kavi-hero__slide {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--kavi-s-7);
  align-items: center;
  padding: var(--kavi-s-7);
}
.kavi-hero__slide[hidden] { display: none; }
.kavi-hero__copy { display: flex; flex-direction: column; gap: var(--kavi-s-4); min-width: 0; min-height: 0; }
.kavi-badge {
  display: inline-flex; align-items: center; gap: var(--kavi-s-2); align-self: flex-start; flex-shrink: 0;
  background: var(--kavi-accent-dim);
  border: 1px solid var(--kavi-accent-line);
  border-radius: var(--kavi-r-pill);
  padding: 6px 13px;
}
.kavi-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kavi-accent); }
/* The dot carries the status colour; the label itself is just a label. */
.kavi-badge__label { font-size: var(--kavi-t-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kavi-text-2); }
.kavi-hero__title {
  font-size: var(--kavi-t-display);
  font-weight: 800; letter-spacing: -0.045em; line-height: 1.05;
  color: var(--kavi-text-hi); text-wrap: pretty; flex-shrink: 0; min-height: 118px;
}
.kavi-hero__body { font-size: var(--kavi-t-base); line-height: 1.7; color: var(--kavi-text-3); max-width: 460px; text-wrap: pretty; flex-shrink: 0; }
.kavi-hero__actions { display: flex; gap: var(--kavi-s-3); flex-wrap: wrap; padding-top: 4px; flex-shrink: 0; }
.kavi-hero__media { position: relative; height: 300px; max-height: 42vh; border-radius: var(--kavi-r-card); overflow: hidden; min-width: 0; }
.kavi-hero__media img { width: 100%; height: 100%; object-fit: contain; }
.kavi-hero__dots { display: flex; gap: var(--kavi-s-2); margin-top: auto; padding-top: 12px; }
.kavi-hero__dot { background: none; border: 0; padding: 6px 0; cursor: pointer; }
.kavi-hero__dot span { display: block; width: 14px; height: 3px; border-radius: var(--kavi-r-chip); background: var(--kavi-border-2); transition: width 0.2s ease, background 0.2s ease; }
.kavi-hero__dot[aria-selected="true"] span { width: 34px; background: var(--kavi-accent); }

/* Image slot (empty-state placeholder, ported from <image-slot>) ---------- */
.kavi-slot {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--kavi-well);
  color: var(--kavi-muted);
  font-size: var(--kavi-t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; padding: 16px;
}
.kavi-slot img { width: 100%; height: 100%; object-fit: contain; }

/* Section headers -------------------------------------------------------- */
.kavi-section { display: flex; flex-direction: column; gap: var(--kavi-s-5); }
.kavi-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kavi-s-4); flex-wrap: wrap; }
.kavi-section__title { font-size: var(--kavi-t-xl); font-weight: 700; letter-spacing: -0.03em; }
.kavi-section__more { font-size: var(--kavi-t-sm); font-weight: 600; color: var(--kavi-accent); }
.kavi-eyebrow { font-size: var(--kavi-t-sm); font-weight: 600; letter-spacing: 0; color: var(--kavi-muted); }

/* Game cards ------------------------------------------------------------- */
.kavi-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--kavi-s-5); }
.kavi-game {
  position: relative; border-radius: var(--kavi-r-card); overflow: hidden;
  border: 1px solid var(--kavi-line); background: var(--kavi-panel);
  color: inherit; display: block;
}
.kavi-game:hover { border-color: var(--kavi-accent); color: inherit; }
/* display:block matters — these are spans, and height is ignored on inline
   boxes, which collapses the media area onto the caption. */
/* Game artwork is typically a logo/wordmark rather than a photo, so cover
   crops letters off whenever the image's ratio doesn't exactly match the
   tile. Contain shows the whole mark, letterboxed on the panel. */
.kavi-game__media {
  position: relative;
  display: block;
  height: 190px;
  overflow: hidden;
  background: var(--kavi-well);
}
.kavi-game__media img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.kavi-game__foot { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: var(--kavi-s-3); }
.kavi-game__name { font-size: var(--kavi-t-md); font-weight: 700; letter-spacing: -0.02em; }
.kavi-game__count { font-size: var(--kavi-t-xs); color: var(--kavi-muted); }
.kavi-game__arrow { font-size: var(--kavi-t-md); color: var(--kavi-accent); }

/* Product cards ---------------------------------------------------------- */
.kavi-grid,
ul.products,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--kavi-s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kavi-grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* woocommerce.css gives the product list ::before/::after clearfix
   pseudo-elements. They were inert while the list was float-based, but in a
   grid container pseudo-elements are grid items — the ::before claimed the
   first cell and shunted every product along by one, leaving a blank slot. */
ul.products::before,
ul.products::after,
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after { content: none; }

/* The loop <li> is only a grid cell; .kavi-card inside it is the card. Giving
   both the card treatment nested a card inside a card, leaving dead,
   unclickable space below the visible one. */
ul.products li.product,
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
  border: 0;
  background: none;
  list-style: none;
}
ul.products li.product > .kavi-card,
.woocommerce ul.products li.product > .kavi-card { flex: 1 1 auto; }

/* The card sits on tone, not on an outline. A 1.2:1 hairline around every tile
   added noise without reading as structure; the border now appears only when
   the card is being interacted with, where it means something. */
.kavi-card {
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  border-radius: var(--kavi-r-card);
  overflow: hidden;
  background: var(--kavi-panel);
  transition: border-color 0.15s ease, background 0.15s ease;
  container-type: inline-size;
}
.kavi-card:hover,
.kavi-card:focus-within { border-color: var(--kavi-border-2); background: var(--kavi-panel-2); }

/* The .woocommerce-prefixed duplicates outrank woocommerce.css's own
   `.woocommerce ul.products li.product a img { height: auto }`, which
   otherwise lets the image render at natural size and burst the card. */
.kavi-card__media,
.woocommerce ul.products li.product .kavi-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  height: auto;
  overflow: hidden;
  background: var(--kavi-well);
}
/* Singles get the thin inner bezel of a graded slab; sealed products keep the
   plain well, so the two read apart before you reach the title. */
.kavi-card--single .kavi-card__media::after {
  content: "";
  position: absolute; inset: var(--kavi-s-2);
  border: 1px solid var(--kavi-line);
  border-radius: var(--kavi-r-chip);
  pointer-events: none;
}
.kavi-card__chip {
  position: absolute; left: var(--kavi-s-3); bottom: var(--kavi-s-3);
  background: rgba(8, 9, 10, 0.82);
  backdrop-filter: blur(6px);
  color: var(--kavi-text);
}
.kavi-card__heading { font-size: inherit; font-weight: inherit; letter-spacing: inherit; margin: 0; }
.kavi-card__media img,
.woocommerce ul.products li.product .kavi-card__media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  padding: 12px;
}
/* Cards in a row hold different amounts of text — a single carries tags, set
   and language lines, a sealed box carries fewer — so the price and button
   landed at a different height in each. The body grows to fill the card and
   the foot is pushed to its end, which lines the two up across the row; the
   stock line keeps its slot even when empty so it cannot shift the foot. */
.kavi-card__body { padding: var(--kavi-s-4) var(--kavi-s-4) var(--kavi-s-4); display: flex; flex-direction: column; gap: var(--kavi-s-3); flex: 1 1 auto; }
.kavi-card__tags { display: flex; gap: var(--kavi-s-1); flex-wrap: wrap; }
.kavi-tag {
  font-size: var(--kavi-t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: var(--kavi-r-chip); padding: 3px 7px;
  color: var(--kavi-text-3); background: var(--kavi-raise);
}
/* Condition is information, not an action, so the chip sits on the neutral
   ramp. Teal returns in the condition picker, where a chip is selectable. */
.kavi-tag--accent { color: var(--kavi-text-2); background: var(--kavi-raise); }
.kavi-tag--foil { color: var(--kavi-warn); background: var(--kavi-warn-dim); }
/* "Pikachu - 044/128 - Illustration rare - Near Mint, Normal" is four lines on
   a phone. Two, with the rest available on the product page. */
.kavi-card__name {
  font-size: var(--kavi-t-base); font-weight: 600; line-height: 1.35;
  color: var(--kavi-text); text-wrap: pretty;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.kavi-card__name:hover { color: var(--kavi-accent); }
.kavi-card__meta { font-size: var(--kavi-t-sm); color: var(--kavi-muted); font-variant-numeric: tabular-nums; }
.kavi-card__submeta { font-size: var(--kavi-t-xs); color: var(--kavi-muted); }
/* Price and action share a row where there is room, and stack where there is
   not, so the button can carry its full label at any width. */
.kavi-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kavi-s-3); padding-top: var(--kavi-s-1); margin-top: auto;
  flex-wrap: wrap;
}
.kavi-card__foot .kavi-btn { flex: 0 1 auto; }
@container (max-width: 240px) {
  .kavi-card__foot { flex-direction: column; align-items: stretch; }
}
.kavi-card__price,
ul.products li.product .price,
.woocommerce ul.products li.product .price {
  font-size: var(--kavi-t-md); font-weight: 800; letter-spacing: -0.02em;
  color: var(--kavi-accent); margin: 0;
  font-variant-numeric: tabular-nums;
}
ul.products li.product .price del { color: var(--kavi-muted); font-weight: 600; font-size: var(--kavi-t-sm); }
ul.products li.product .price ins { text-decoration: none; }
.kavi-card__stock { font-size: var(--kavi-t-xs); font-weight: 600; color: var(--kavi-warn); min-height: 16px; font-variant-numeric: tabular-nums; }

/* Recently viewed -------------------------------------------------------- */
.kavi-recent { display: flex; gap: var(--kavi-s-4); flex-wrap: wrap; }
.kavi-recent__item {
  display: flex; align-items: center; gap: var(--kavi-s-3);
  border: 1px solid var(--kavi-line); border-radius: var(--kavi-r-ctl);
  padding: 10px 16px 10px 10px; background: var(--kavi-panel); color: inherit;
}
.kavi-recent__item:hover { border-color: var(--kavi-accent); color: inherit; }
.kavi-recent__thumb {
  width: 38px; height: 53px; flex: 0 0 auto; border-radius: var(--kavi-r-chip);
  background: var(--kavi-well); border: 1px solid var(--kavi-line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.kavi-recent__thumb img { width: 100%; height: 100%; object-fit: contain; }
.kavi-recent__name { font-size: var(--kavi-t-sm); font-weight: 600; }
.kavi-recent__price { font-size: var(--kavi-t-xs); font-weight: 700; color: var(--kavi-accent); }
.kavi-recent__price .amount { color: inherit; }

/* Shop archive ----------------------------------------------------------- */
.kavi-shop { padding-top: 36px; padding-bottom: 80px; }
.kavi-shop__head { display: flex; flex-direction: column; gap: var(--kavi-s-2); padding-bottom: 28px; }
.kavi-shop__crumb { font-size: var(--kavi-t-sm); font-weight: 600; letter-spacing: 0; color: var(--kavi-muted); }
.kavi-shop__title { font-size: var(--kavi-t-title); font-weight: 800; letter-spacing: -0.04em; }

.kavi-tabs { display: flex; gap: var(--kavi-s-4); padding-bottom: 26px; border-bottom: 1px solid var(--kavi-line); flex-wrap: wrap; }
.kavi-tab {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--kavi-t-sm); font-weight: 600; padding: 0 var(--kavi-s-4); border-radius: var(--kavi-r-pill);
  border: 1px solid var(--kavi-border); color: var(--kavi-text-2);
}
.kavi-tab:hover { border-color: var(--kavi-accent); color: var(--kavi-accent); }
.kavi-tab.is-active { color: var(--kavi-accent); border-color: var(--kavi-accent); }
.kavi-tab.is-active::before { content: "\25CF"; margin-right: 6px; }

.kavi-shop__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  padding-top: 30px;
}

.kavi-filters { display: flex; flex-direction: column; gap: var(--kavi-s-6); min-width: 0; }
.kavi-filters__head { display: flex; align-items: center; justify-content: space-between; }
/* Reset at every width: the button is only interactive below the sidebar
   breakpoint, but the browser's default button chrome applied everywhere. */
.kavi-filters__toggle {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--kavi-text);
}
.kavi-filters__title { font-size: var(--kavi-t-sm); font-weight: 600; letter-spacing: 0; color: var(--kavi-text-2); }
.kavi-filters__clear { font-size: var(--kavi-t-xs); font-weight: 600; color: var(--kavi-accent); }
/* <fieldset>/<legend> carry UA defaults — a groove border on all four sides
   and legend padding — so the border must be reset, not just overridden on
   one edge, or each group draws a box. */
.kavi-fgroup {
  display: flex;
  flex-direction: column;
  gap: var(--kavi-s-2);
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--kavi-s-4);
  border: 0;
  border-bottom: 1px solid var(--kavi-line-soft);
}
.kavi-fgroup__label { font-size: var(--kavi-t-sm); font-weight: 700; color: var(--kavi-text); padding: 0; }
.kavi-fgroup__opts { display: flex; flex-direction: column; }
/* Rows sit flush: the whole row is the target, so height alone carries the
   hit area and a gap would only loosen the list. Touch gets the full 44px. */
.kavi-opt { display: flex; align-items: center; gap: var(--kavi-s-3); cursor: pointer; min-height: 30px; }
@media (pointer: coarse) {
  .kavi-opt { min-height: 44px; }
}
.kavi-opt:hover { color: var(--kavi-accent); }
.kavi-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.kavi-opt__box {
  width: 15px; height: 15px; border-radius: var(--kavi-r-chip); border: 1px solid var(--kavi-border-2);
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
}
.kavi-opt__box::after { content: ""; width: 9px; height: 9px; border-radius: var(--kavi-r-chip); background: transparent; }
.kavi-opt input:checked + .kavi-opt__box::after { background: var(--kavi-accent); }
.kavi-opt input:focus-visible + .kavi-opt__box { outline: 2px solid var(--kavi-accent); outline-offset: 2px; }
.kavi-opt__label { font-size: var(--kavi-t-sm); color: var(--kavi-text-2); flex: 1 1 auto; }
.kavi-opt__count { font-size: var(--kavi-t-xs); color: var(--kavi-muted); }

.kavi-price { display: flex; flex-direction: column; gap: var(--kavi-s-4); padding-bottom: 22px; border-bottom: 1px solid var(--kavi-line-soft); }
.kavi-price__head { display: flex; align-items: baseline; justify-content: space-between; }
.kavi-price__label { font-size: var(--kavi-t-sm); font-weight: 700; }
.kavi-price__value { font-size: var(--kavi-t-xs); color: var(--kavi-accent); font-weight: 600; }
/* Two inputs share one track. Each is transparent and only its thumb shows,
   so the pair reads as a single control with a filled range between them. */
.kavi-price__slider {
  --kavi-range-from: 0%;
  --kavi-range-to: 100%;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.kavi-price__track {
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  border-radius: var(--kavi-r-pill);
  background:
    linear-gradient(
      to right,
      var(--kavi-raise) 0, var(--kavi-raise) var(--kavi-range-from),
      var(--kavi-accent) var(--kavi-range-from), var(--kavi-accent) var(--kavi-range-to),
      var(--kavi-raise) var(--kavi-range-to), var(--kavi-raise) 100%
    );
}
.kavi-price__input {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  min-height: 44px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  /* The element spans the whole track, so only the thumb may take the pointer;
     otherwise the input on top would swallow every press meant for the other. */
  pointer-events: none;
}
.kavi-price__input:focus-visible { outline-offset: -2px; }
.kavi-price__slider.is-min-on-top .kavi-price__input--min { z-index: 2; }
.kavi-price__input--max { z-index: 1; }

.kavi-price__input::-webkit-slider-runnable-track {
  height: 4px; background: transparent; border: 0;
}
.kavi-price__input::-moz-range-track {
  height: 4px; background: transparent; border: 0;
}
/* The dark ring keeps the two handles legible where they sit close together
   or overlap. */
.kavi-price__input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  pointer-events: auto;
  width: 16px; height: 16px; margin-top: -6px;
  border-radius: var(--kavi-r-pill);
  background: var(--kavi-accent);
  border: 2px solid var(--kavi-bg);
  cursor: grab;
}
.kavi-price__input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px; height: 16px;
  border-radius: var(--kavi-r-pill);
  background: var(--kavi-accent);
  border: 2px solid var(--kavi-bg);
  cursor: grab;
}
.kavi-price__input:active::-webkit-slider-thumb { cursor: grabbing; }
.kavi-price__input:active::-moz-range-thumb { cursor: grabbing; }

.kavi-results { min-width: 0; display: flex; flex-direction: column; gap: var(--kavi-s-5); }
.kavi-results__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--kavi-s-4); flex-wrap: wrap; }
.kavi-results__count { font-size: var(--kavi-t-sm); color: var(--kavi-muted); }
.kavi-sorts { display: flex; gap: var(--kavi-s-2); flex-wrap: wrap; }
.kavi-sort {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: var(--kavi-t-sm); font-weight: 600; padding: 0 var(--kavi-s-4); border-radius: var(--kavi-r-ctl);
  border: 1px solid var(--kavi-border); color: var(--kavi-text-3);
}
.kavi-sort:hover, .kavi-sort.is-active { border-color: var(--kavi-accent); color: var(--kavi-accent); }

.kavi-empty { padding: 70px 24px; text-align: center; border: 1px dashed var(--kavi-border); border-radius: var(--kavi-r-card); }
.kavi-empty__title { font-size: var(--kavi-t-base); font-weight: 600; color: var(--kavi-text-2); }
.kavi-empty__link { display: inline-block; margin-top: 14px; font-size: var(--kavi-t-sm); font-weight: 600; color: var(--kavi-accent); }
.kavi-empty__hint { font-size: var(--kavi-t-sm); color: var(--kavi-muted); margin-top: 8px; }
.kavi-empty__cta { margin-top: 20px; }

/* Pagination ------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul,
.kavi-pagination { border: 0; display: flex; gap: var(--kavi-s-2); justify-content: center; margin: 8px 0 0; padding: 0; list-style: none; }
.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 {
  display: block; padding: 9px 15px; border-radius: var(--kavi-r-ctl);
  border: 1px solid var(--kavi-border); color: var(--kavi-text-2);
  font-size: var(--kavi-t-sm); font-weight: 600; background: transparent;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--kavi-accent); color: var(--kavi-accent); background: transparent; }
.woocommerce nav.woocommerce-pagination ul li span.current { border-color: var(--kavi-accent); color: var(--kavi-bg); background: var(--kavi-accent); }

/* Single product --------------------------------------------------------- */
.kavi-product { padding-top: 30px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 60px; }
.kavi-back { font-size: var(--kavi-t-sm); font-weight: 600; color: var(--kavi-muted); }
.kavi-back:hover { color: var(--kavi-accent); }

.kavi-product__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; align-items: start; }
/* The art stays with you while the ledger beside it scrolls. */
.kavi-gallery { display: flex; flex-direction: column; gap: var(--kavi-s-4); min-width: 0; }
@media (min-width: 861px) {
  .kavi-gallery { position: sticky; top: 96px; align-self: start; }
}
.kavi-gallery__main {
  position: relative; width: 100%; aspect-ratio: 0.715;
  border-radius: var(--kavi-r-card); overflow: hidden;
  background: var(--kavi-panel); border: 1px solid var(--kavi-line);
}
.kavi-gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.kavi-gallery__thumbs { display: flex; gap: var(--kavi-s-3); flex-wrap: wrap; }
.kavi-gallery__thumb {
  width: 62px; height: 87px; border-radius: var(--kavi-r-chip); overflow: hidden;
  border: 1px solid var(--kavi-border); background: var(--kavi-well);
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.kavi-gallery__thumb.is-active { border-color: var(--kavi-accent); }
.kavi-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }

.kavi-summary { display: flex; flex-direction: column; gap: var(--kavi-s-5); min-width: 0; }
.kavi-summary__tags { display: flex; gap: var(--kavi-s-2); flex-wrap: wrap; }
.kavi-summary__tags .kavi-tag { font-size: var(--kavi-t-xs); letter-spacing: 0.14em; border-radius: var(--kavi-r-chip); padding: 4px 9px; }
.kavi-summary__title { font-size: var(--kavi-t-2xl); font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; text-wrap: pretty; }
.kavi-summary__setline { font-size: var(--kavi-t-sm); color: var(--kavi-muted); }
.kavi-summary__pricerow { display: flex; align-items: baseline; gap: var(--kavi-s-4); flex-wrap: wrap; }
.kavi-summary__pricerow .price,
.kavi-summary__pricerow .amount { font-size: var(--kavi-t-2xl); font-weight: 800; letter-spacing: -0.03em; color: var(--kavi-accent); margin: 0; font-variant-numeric: tabular-nums; }
.kavi-summary__pricerow del .amount { font-size: var(--kavi-t-lg); color: var(--kavi-muted); }
.kavi-summary__taxnote { font-size: var(--kavi-t-sm); color: var(--kavi-muted); }
.kavi-summary__stock { font-size: var(--kavi-t-sm); font-weight: 600; color: var(--kavi-warn); }
.kavi-summary__desc { font-size: var(--kavi-t-sm); line-height: 1.75; color: var(--kavi-text-3); text-wrap: pretty; }

.kavi-conditions { display: flex; flex-direction: column; gap: 11px; }
.kavi-conditions[hidden] { display: none; }
.kavi-conditions__label { font-size: var(--kavi-t-sm); font-weight: 600; letter-spacing: 0; color: var(--kavi-text-2); }
.kavi-conditions__opts { display: flex; gap: var(--kavi-s-2); flex-wrap: wrap; }
.kavi-condition {
  display: flex; flex-direction: column; gap: var(--kavi-s-1); text-align: left;
  border: 1px solid var(--kavi-border); border-radius: var(--kavi-r-ctl);
  padding: 11px 16px; min-width: 92px; cursor: pointer;
  background: transparent; color: inherit; font-family: inherit;
}
.kavi-condition:hover { border-color: var(--kavi-accent); }
.kavi-condition.is-active { border-color: var(--kavi-accent); }
.kavi-condition__tag { font-size: var(--kavi-t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kavi-accent); min-height: 12px; }
.kavi-condition__label { font-size: var(--kavi-t-sm); font-weight: 700; color: var(--kavi-text); }
.kavi-condition__price { font-size: var(--kavi-t-sm); font-weight: 600; color: var(--kavi-text-3); }
.kavi-condition__stock { font-size: var(--kavi-t-xs); color: var(--kavi-muted); }
.kavi-condition[disabled], .kavi-condition.is-unavailable {
  opacity: 0.4; cursor: not-allowed; border-color: var(--kavi-line);
}
.kavi-condition[disabled]:hover, .kavi-condition.is-unavailable:hover { border-color: var(--kavi-line); }
/* Variant tiles carry no price/stock, so they need less room than condition tiles. */
.kavi-conditions--compact .kavi-condition { min-width: 0; padding: 9px 15px; }

/* Quantity + add to cart -------------------------------------------------- */
/* The block template has no `.woocommerce div.product` wrapper, so the
   add-to-cart form is scoped through the product-summary block instead. */
.kavi-summary form.cart { display: flex; gap: var(--kavi-s-3); align-items: stretch; flex-wrap: wrap; padding-top: 4px; margin: 0; }
.kavi-summary form.cart .variations { flex: 1 1 100%; }
/* Variable products nest the qty box + button one level deeper, inside
   .single_variation_wrap > .woocommerce-variation-add-to-cart, so the row above
   never reaches them and the qty box stretches full width. Re-establish the
   same row on the nested wrapper. */
.kavi-summary form.cart .single_variation_wrap { flex: 1 1 100%; }
.kavi-summary form.cart .woocommerce-variation-add-to-cart {
  display: flex; gap: var(--kavi-s-3); align-items: stretch; flex-wrap: wrap;
}
.woocommerce .quantity,
.kavi-qty {
  display: flex; align-items: center;
  border: 1px solid var(--kavi-border); border-radius: var(--kavi-r-ctl); overflow: hidden;
  flex: 0 0 auto;
}
.kavi-qty__btn {
  padding: 13px 17px; cursor: pointer; color: var(--kavi-text-2);
  font-weight: 700; user-select: none; background: none; border: 0; font-size: var(--kavi-t-base); line-height: 1;
}
.kavi-qty__btn:hover { color: var(--kavi-accent); }
.kavi-qty__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.kavi-qty__btn:disabled:hover { color: var(--kavi-text-2); }
.woocommerce .quantity .qty,
.kavi-qty input {
  width: 52px; background: transparent; border: 0; color: var(--kavi-text);
  font-size: var(--kavi-t-base); font-weight: 700; text-align: center; padding: 12px 0; outline: none;
  -moz-appearance: textfield;
}
.kavi-qty input::-webkit-outer-spin-button,
.kavi-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kavi-summary form.cart button.single_add_to_cart_button {
  flex: 1 1 200px; font-size: var(--kavi-t-base); padding: 15px 28px;
}

/* Cart ------------------------------------------------------------------- */
.kavi-cart { padding-top: 44px; padding-bottom: 90px; display: flex; flex-direction: column; gap: var(--kavi-s-6); }
.kavi-cart__title { font-size: var(--kavi-t-title); font-weight: 800; letter-spacing: -0.04em; }
.kavi-cart__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--kavi-s-6); align-items: start; }
.kavi-cart__lines { min-width: 0; display: flex; flex-direction: column; gap: var(--kavi-s-4); }
.kavi-line {
  display: flex; gap: var(--kavi-s-4); align-items: center;
  border: 1px solid var(--kavi-line); border-radius: var(--kavi-r-card);
  padding: 16px; background: var(--kavi-panel); flex-wrap: wrap;
}
.kavi-line__thumb {
  width: 60px; height: 84px; flex: 0 0 auto; border-radius: var(--kavi-r-chip); overflow: hidden;
  background: var(--kavi-well); border: 1px solid var(--kavi-line);
  display: flex; align-items: center; justify-content: center;
}
.kavi-line__thumb img { width: 100%; height: 100%; object-fit: contain; }
.kavi-line__info { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: var(--kavi-s-1); }
.kavi-line__name { font-size: var(--kavi-t-base); font-weight: 600; text-wrap: pretty; color: var(--kavi-text); }
.kavi-line__meta { font-size: var(--kavi-t-xs); color: var(--kavi-muted); }
.kavi-line__condition { font-size: var(--kavi-t-xs); color: var(--kavi-accent); font-weight: 600; }
.kavi-line__total { font-size: var(--kavi-t-md); font-weight: 800; min-width: 84px; text-align: right; flex: 0 0 auto; }
/* "Remove" was 18px tall and below AA. The ::after widens the hit area to the
   44px minimum without moving the text or disturbing the row. */
.kavi-line__remove {
  position: relative;
  font-size: var(--kavi-t-xs); color: var(--kavi-muted);
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
}
.kavi-line__remove:hover { color: var(--kavi-accent); }
.kavi-line__remove::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; min-width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.kavi-line__remove:hover { color: var(--kavi-warn); }

.kavi-cart__actions { display: flex; gap: var(--kavi-s-3); flex-wrap: wrap; align-items: center; padding-top: 6px; }
.kavi-cart__actions .coupon { display: flex; gap: var(--kavi-s-3); flex: 1 1 260px; }
.kavi-cart__actions .coupon input { flex: 1 1 auto; }

.kavi-summary-box {
  display: flex; flex-direction: column; gap: var(--kavi-s-4);
  border: 1px solid var(--kavi-line); border-radius: var(--kavi-r-card);
  padding: 24px; background: var(--kavi-panel); min-width: 260px;
}
.kavi-summary-box__title { font-size: var(--kavi-t-sm); font-weight: 600; letter-spacing: 0; color: var(--kavi-text-2); }
.kavi-summary-box__rows { display: flex; flex-direction: column; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--kavi-line); }
.kavi-summary-box__row { display: flex; justify-content: space-between; gap: var(--kavi-s-3); font-size: var(--kavi-t-sm); color: var(--kavi-text-2); }
.kavi-summary-box__row .amount { color: inherit; }
.kavi-summary-box__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--kavi-s-3); }
.kavi-summary-box__total dt { font-size: var(--kavi-t-base); font-weight: 700; color: var(--kavi-text); }
.kavi-summary-box__total dd { margin: 0; font-size: var(--kavi-t-xl); font-weight: 800; letter-spacing: -0.03em; color: var(--kavi-accent); }
.kavi-summary-box__total .amount { color: inherit; }
.kavi-summary-box__note { font-size: var(--kavi-t-xs); line-height: 1.7; color: var(--kavi-muted); padding-top: var(--kavi-s-1); }
.kavi-summary-box__continue { font-size: var(--kavi-t-sm); font-weight: 600; color: var(--kavi-muted); text-align: center; }
.kavi-summary-box__continue:hover { color: var(--kavi-accent); }

/* Checkout / account / forms --------------------------------------------- */
.woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label { display: block; font-size: var(--kavi-t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--kavi-muted); margin-bottom: 7px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="url"], input[type="number"], textarea, select {
  width: 100%;
  background: var(--kavi-panel-2);
  border: 1px solid var(--kavi-border);
  border-radius: var(--kavi-r-ctl);
  padding: 12px 14px;
  color: var(--kavi-text);
  font-size: var(--kavi-t-base);
  outline: none;
}
.woocommerce form .form-row input.input-text:focus,
input:focus, textarea:focus, select:focus { border-color: var(--kavi-accent); }

/* Show/hide password toggle, drawn as an eye icon inside the field. */
.woocommerce .password-input { position: relative; display: block; }
.woocommerce .password-input input { padding-right: 44px; }
.woocommerce .show-password-input {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; margin: 0;
  border: 0; background: var(--kavi-muted); cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce .show-password-input::after { content: none; }
.woocommerce .show-password-input:hover,
.woocommerce .show-password-input.display-password { background: var(--kavi-accent); }

/* The <option> list of a native select is drawn by the browser, not the page,
   so it ignores the rules above and renders light unless the element declares
   a dark color-scheme. */
select { color-scheme: dark; }
select option {
  background: var(--kavi-panel-2);
  color: var(--kavi-text);
}

.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
  background: var(--kavi-panel);
  border: 1px solid var(--kavi-line);
  border-top: 2px solid var(--kavi-accent);
  border-radius: var(--kavi-r-ctl);
  color: var(--kavi-text-2);
  padding: 16px 20px;
  margin: 0 0 22px;
  list-style: none;
  display: flex; align-items: center; gap: var(--kavi-s-4); flex-wrap: wrap;
}
.woocommerce .woocommerce-error { border-top-color: var(--kavi-warn); }
.woocommerce .woocommerce-error::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before { display: none; }
.woocommerce .woocommerce-message a.button { margin-left: auto; }

.woocommerce table.shop_table {
  border: 1px solid var(--kavi-line);
  border-radius: var(--kavi-r-card);
  border-collapse: separate;
  background: var(--kavi-panel);
  color: var(--kavi-text-2);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-color: var(--kavi-line); padding: 14px 16px; }
.woocommerce table.shop_table th { color: var(--kavi-text); font-size: var(--kavi-t-sm); letter-spacing: 0.1em; text-transform: uppercase; }

.woocommerce-tabs { display: none; }

.kavi-page { padding-top: 44px; padding-bottom: 80px; display: flex; flex-direction: column; gap: var(--kavi-s-5); }
.kavi-page__title { font-size: var(--kavi-t-title); font-weight: 800; letter-spacing: -0.04em; }
.kavi-page__content { font-size: var(--kavi-t-base); line-height: 1.8; color: var(--kavi-text-3); }
.kavi-page__content h2 { font-size: var(--kavi-t-lg); margin: 28px 0 10px; }
.kavi-page__content h3 { font-size: var(--kavi-t-md); margin: 22px 0 8px; }
.kavi-page__content ul, .kavi-page__content ol { padding-left: 20px; }
.kavi-page__content blockquote { border-left: 2px solid var(--kavi-accent); margin: 20px 0; padding-left: 18px; color: var(--kavi-text-2); }
.kavi-page__content code, .kavi-page__content pre { background: var(--kavi-panel-2); border-radius: var(--kavi-r-chip); padding: 2px 6px; font-size: var(--kavi-t-sm); }

.kavi-postlist { display: flex; flex-direction: column; gap: var(--kavi-s-4); }
.kavi-post { border: 1px solid var(--kavi-line); border-radius: var(--kavi-r-card); background: var(--kavi-panel); padding: 24px; }
.kavi-post__title { font-size: var(--kavi-t-lg); font-weight: 700; }
.kavi-post__meta { font-size: var(--kavi-t-xs); color: var(--kavi-muted); margin-top: 6px; }
.kavi-post__excerpt { font-size: var(--kavi-t-sm); line-height: 1.7; color: var(--kavi-text-3); margin-top: 12px; }

/* Coming soon -------------------------------------------------------------- */
.kavi-comingsoon {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--kavi-bg);
}
.kavi-comingsoon::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, rgba(31, 214, 176, 0.07) 0px, rgba(31, 214, 176, 0.07) 1px, transparent 1px, transparent 18px);
  pointer-events: none;
}
.kavi-comingsoon__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kavi-s-5);
  width: 100%;
  max-width: 640px;
  padding: 64px 24px;
  text-align: left;
}
.kavi-comingsoon__title {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.08;
  color: var(--kavi-text-hi);
  text-wrap: pretty;
}
.kavi-comingsoon__body { font-size: var(--kavi-t-base); line-height: 1.7; color: var(--kavi-text-3); max-width: 480px; text-wrap: pretty; }
.kavi-badge--dot {
  display: inline-flex; align-items: center; gap: var(--kavi-s-2);
  background: var(--kavi-accent-dim);
  border: 1px solid var(--kavi-accent-line);
  border-radius: var(--kavi-r-pill);
  padding: 6px 13px;
  font-size: var(--kavi-t-xs); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kavi-accent);
}
.kavi-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kavi-accent); flex-shrink: 0; }
.kavi-comingsoon__actions { display: flex; align-items: center; gap: var(--kavi-s-3); flex-wrap: wrap; padding-top: 4px; }
.kavi-comingsoon__contact { font-size: var(--kavi-t-sm); color: var(--kavi-muted); }
.kavi-comingsoon__contact a { color: var(--kavi-accent); font-weight: 600; }
.kavi-comingsoon__contact a:hover { color: var(--kavi-accent-hi); }

/* Footer ----------------------------------------------------------------- */
.kavi-footer { border-top: 1px solid var(--kavi-line); background: var(--kavi-bg-alt); }
.kavi-footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--kavi-s-5); flex-wrap: wrap;
  padding-top: 40px; padding-bottom: 40px;
}
.kavi-footer__brand { display: flex; align-items: center; gap: var(--kavi-s-3); }
.kavi-footer__copy { font-size: var(--kavi-t-sm); color: var(--kavi-muted); }
/* Footer links are short text; the ::after lifts the hit area to 44px without
   padding the row apart. */
.kavi-footer__legal { position: relative; font-size: var(--kavi-t-sm); color: var(--kavi-muted); }
.kavi-footer__legal::after,
.kavi-footer__social a::after,
.kavi-footer__social .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 44px; transform: translateY(-50%);
}
.kavi-footer__social a,
.kavi-footer__social .wp-block-navigation-item__content { position: relative; }
.kavi-footer__legal:hover { color: var(--kavi-accent); }
.kavi-footer__social { display: flex; gap: var(--kavi-s-5); list-style: none; margin: 0; padding: 0; }
.kavi-footer__social a { font-size: var(--kavi-t-sm); font-weight: 600; color: var(--kavi-muted); }
.kavi-footer__social a:hover { color: var(--kavi-accent); }
.kavi-social { display: flex; align-items: center; gap: var(--kavi-s-4); }
.kavi-social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--kavi-r-ctl);
  border: 1px solid var(--kavi-line); color: var(--kavi-muted);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.kavi-social__link:hover { color: var(--kavi-accent); border-color: var(--kavi-accent); background: var(--kavi-bg); }
.kavi-social__icon { display: block; }
.kavi-social__empty { font-size: var(--kavi-t-sm); color: var(--kavi-muted); }

/* Account links ---------------------------------------------------------- */
.kavi-account { display: flex; align-items: center; gap: var(--kavi-s-2); flex: 0 0 auto; }
.kavi-account__link {
  display: flex; align-items: center; gap: var(--kavi-s-2); min-height: 44px;
  font-size: var(--kavi-t-sm); font-weight: 600; color: var(--kavi-text);
  padding: 10px 6px;
}
.kavi-account__link:hover { color: var(--kavi-accent); }
.kavi-account__glyph { width: 16px; height: 16px; color: var(--kavi-accent); }
.kavi-account__signup {
  font-size: var(--kavi-t-sm); font-weight: 700;
  padding: 10px 15px; border-radius: var(--kavi-r-ctl);
  background: var(--kavi-accent); color: var(--kavi-bg);
  border: 1px solid var(--kavi-accent);
}
.kavi-account__signup:hover { background: transparent; color: var(--kavi-accent); }

/* Sign-up page ----------------------------------------------------------- */
.kavi-signup { max-width: 520px; }
.kavi-signup form.register {
  border: 1px solid var(--kavi-border); border-radius: var(--kavi-r-ctl);
  padding: 24px 20px; margin: 0 0 16px;
}
.kavi-signup__note, .kavi-signup__closed { font-size: var(--kavi-t-sm); color: var(--kavi-muted); }
.kavi-field__error { display: block; margin-top: 7px; font-size: var(--kavi-t-sm); color: #ff6b6b; }
.woocommerce .kavi-signup input.has-error { border-color: #ff6b6b; }
.kavi-signup__switch { font-size: var(--kavi-t-sm); color: var(--kavi-muted); margin-top: 14px; }

/* Login card ------------------------------------------------------------- */
/* The login form carries no wrapper of its own, so the card is drawn on the
   form element and sized to its fields rather than the full content width. */
.woocommerce-account form.woocommerce-form-login {
  max-width: 520px;
  border: 1px solid var(--kavi-border); border-radius: var(--kavi-r-ctl);
  padding: 24px 20px; margin: 20px 0 0;
}
.woocommerce-account form.woocommerce-form-login .form-row { margin-bottom: 14px; }
.woocommerce-account form.woocommerce-form-login .lost_password { font-size: var(--kavi-t-sm); margin: 2px 0 0; }
.kavi-login__signup {
  display: block; width: 100%;
  background: transparent !important; color: var(--kavi-text) !important;
  margin-top: 4px;
}
.kavi-login__signup:hover, .kavi-login__signup:focus {
  background: transparent !important; color: var(--kavi-accent) !important;
  border-color: var(--kavi-accent);
}
.woocommerce-account form.woocommerce-form-login .kavi-signup__switch {
  margin: 18px 0 10px; padding-top: 16px;
  border-top: 1px solid var(--kavi-line);
}

/* Long-form pages -----------------------------------------------------------
 * Terms, privacy and the like run the full 1000px content width, which is far
 * past a comfortable measure. Only direct children are capped, so the shop,
 * cart, checkout and account screens — whose content sits inside wrappers of
 * their own — keep the full width they are laid out for.
 */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > h2,
.entry-content > h3,
.entry-content > blockquote { max-width: 72ch; }

/* Woo marks the order number, date and status with <mark>, which the browser
   paints highlighter-yellow on black. */
mark, .woocommerce mark {
  background: transparent;
  color: var(--kavi-accent);
  font-weight: 600;
}

/* My account ----------------------------------------------------------------
 * Woo ships this area unstyled, so it arrived as a bare list of underlined
 * links above whatever page was showing. Lay it out as a sidebar of pills
 * beside a content card, stacking to a scrollable row of pills on narrow
 * screens. :has() is the only way to tell the logged-in layout (nav + content)
 * from the logged-out login card; browsers without it simply stack, which is
 * the mobile layout and still reads correctly.
 */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--kavi-s-5);
  align-items: start;
}
/* Place both children explicitly. Left to auto-placement they came out
   swapped — nav in the wide column, content in the narrow one. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content { grid-column: 2; grid-row: 1; }
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: auto; }
/* Woo's block-theme sheet pads each li by 1em and underlines the links; its
   selectors carry the .woocommerce-account prefix, so ours must too. */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--kavi-s-1);
}
.woocommerce-account .woocommerce-MyAccount-navigation li { padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { text-decoration: none; }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 11px 14px;
  border-radius: var(--kavi-r-ctl);
  border: 1px solid transparent;
  font-size: var(--kavi-t-sm); font-weight: 600;
  color: var(--kavi-muted);
  text-decoration: none;
}
.woocommerce-MyAccount-navigation a:hover {
  background: var(--kavi-raise);
  color: var(--kavi-text);
}
.woocommerce-MyAccount-navigation-link.is-active a {
  background: var(--kavi-raise);
  border-color: var(--kavi-accent);
  color: var(--kavi-accent);
}
/* Logging out is the one destructive item here, so it sits apart. */
.woocommerce-MyAccount-navigation-link--customer-logout {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--kavi-line);
}
.woocommerce-MyAccount-content {
  border: 1px solid var(--kavi-border);
  border-radius: var(--kavi-r-ctl);
  padding: 24px 20px;
  min-width: 0;
}
.woocommerce-MyAccount-content > p { color: var(--kavi-text-3); }
.woocommerce-MyAccount-content a { color: var(--kavi-accent); }
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content legend { font-size: var(--kavi-t-md); margin: 0 0 14px; }
.woocommerce-MyAccount-content .woocommerce-Address {
  border: 1px solid var(--kavi-line); border-radius: var(--kavi-r-ctl);
  padding: 16px; margin-bottom: 16px;
}
.woocommerce-MyAccount-content .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--kavi-s-3); }

/* Orders table */
.woocommerce-orders-table { width: 100%; border-collapse: collapse; font-size: var(--kavi-t-sm); }
.woocommerce-orders-table th,
.woocommerce-orders-table td {
  padding: 12px 10px; text-align: left;
  border-bottom: 1px solid var(--kavi-line);
}
.woocommerce-orders-table thead th {
  font-size: var(--kavi-t-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--kavi-muted);
}
.woocommerce-orders-table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-orders-table .woocommerce-orders-table__cell-order-actions { text-align: right; }

@media (max-width: 860px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    grid-template-columns: minmax(0, 1fr);
  }
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-MyAccount-content { grid-column: 1; grid-row: 2; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; gap: var(--kavi-s-2);
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .woocommerce-MyAccount-navigation a { white-space: nowrap; }
  .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 0; padding-top: 0; border-top: 0;
    border-left: 1px solid var(--kavi-line); padding-left: 8px;
  }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .kavi-shop__layout { grid-template-columns: minmax(0, 1fr); }
  .kavi-filters {
    border: 1px solid var(--kavi-line);
    border-radius: var(--kavi-r-card);
    padding: 20px;
    background: var(--kavi-panel);
  }
  .kavi-cart__layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* iOS zooms the page when a focused field is under 16px, so touch widths
     keep the larger size rather than the 15px body step. */
  input[type="text"], input[type="email"], input[type="password"], input[type="search"],
  input[type="tel"], input[type="url"], input[type="number"], textarea, select,
  .wc-block-components-text-input input,
  .wc-block-components-combobox input,
  .wc-blocks-components-select select { font-size: 16px !important; }

  /* The full facet list pushed the products a screen and a half down, so it
     collapses behind its own heading; kavi.js makes the heading the button. */
  .kavi-filters__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 44px; gap: var(--kavi-s-3);
  }
  .kavi-filters__toggle::after {
    content: ""; width: 8px; height: 8px; flex: 0 0 auto;
    border-right: 2px solid var(--kavi-muted); border-bottom: 2px solid var(--kavi-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s ease;
  }
  .kavi-filters[data-open="true"] .kavi-filters__toggle::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .kavi-filters[data-open="false"] > *:not(.kavi-filters__head) { display: none; }
  /* The header stacked into three rows and ate 208px — a quarter of the
     screen — before any content. One row now: brand, menu, account, cart and
     a search button that reveals the field beneath. Labels go visually hidden
     rather than display:none so the links keep their accessible names. */
  .kavi-header__inner {
    gap: var(--kavi-s-3);
    padding-top: var(--kavi-s-3);
    padding-bottom: var(--kavi-s-3);
  }
  .kavi-search-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    order: 3; width: 44px; height: 44px; flex: 0 0 auto;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--kavi-text-2); border-radius: var(--kavi-r-ctl);
  }
  .kavi-search-toggle svg { width: 20px; height: 20px; }
  .kavi-search-toggle[aria-expanded="true"] { color: var(--kavi-accent); background: var(--kavi-raise); }
  .kavi-header:not(.is-search-open) .kavi-search { display: none; }
  .kavi-cartlink__badge { display: inline-flex; }
  .kavi-account__label,
  .kavi-cartlink__count,
  .kavi-cartlink__total {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .kavi-account__link, .kavi-cartlink {
    min-width: 44px; min-height: 44px;
    justify-content: center; padding: 0 var(--kavi-s-2);
  }
  .kavi-nav-toggle { display: block; order: 2; margin-left: auto; }
  .kavi-nav { order: 5; flex: 1 1 100%; }
  .kavi-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .kavi-nav li { border-top: 1px solid var(--kavi-line); }
  .kavi-nav a { padding: 12px 0; border-bottom: 0; }
  .kavi-nav[data-open="false"] { display: none; }
  .kavi-search { order: 6; flex: 1 1 100%; }
  .kavi-cartlink { order: 5; }
  .kavi-account { order: 4; }
  /* One editorial slot, not a screen and a half of banner: the slide is
     capped so the first products sit inside the opening screen. */
  .kavi-hero__slide { padding: var(--kavi-s-5); gap: var(--kavi-s-3); }
  .kavi-hero__copy { gap: var(--kavi-s-3); }
  .kavi-hero__media { height: 150px; max-height: 20vh; }
  /* The two hero buttons missed sharing a row by a few pixels and wrapped,
     costing a line the editorial slot could not spare. */
  .kavi-hero__actions .kavi-btn { padding: var(--kavi-s-3) var(--kavi-s-4); }
  .kavi-hero__copy { min-height: 0; }
  .kavi-hero__title { min-height: 0; }
  .kavi-hero__dots { margin-top: 8px; }
  .kavi-product__grid { gap: var(--kavi-s-6); }
  .kavi-summary__title { font-size: var(--kavi-t-xl); }
  .kavi-home { gap: 52px; }
}

@media (max-width: 520px) {
  .kavi-wrap { padding-left: 16px; padding-right: 16px; }
  .kavi-grid, ul.products, .woocommerce ul.products { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--kavi-s-3); }
  /* A 3:4 slab at two columns put the second row off the bottom of the screen;
     4:5 plus a tighter body brings the first row's price and action up into
     the opening screen. */
  .kavi-card__media,
  .woocommerce ul.products li.product .kavi-card__media { aspect-ratio: 4 / 5; }
  .kavi-card__body { padding: var(--kavi-s-3); gap: var(--kavi-s-2); }
  .kavi-card__meta {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
    overflow: hidden;
  }
  /* Language and variant are both already in the meta line above. */
  .kavi-card__submeta { display: none; }

  /* The shop's own chrome — eyebrow, title, tabs, filter bar, sort row — ran
     to 622px before the first card. */
  .kavi-shop__crumb { display: none; }
  .kavi-shop__head { gap: var(--kavi-s-2); padding-bottom: var(--kavi-s-3); }
  .kavi-tabs { gap: var(--kavi-s-2); padding-bottom: var(--kavi-s-3); }
  .kavi-shop__layout { gap: var(--kavi-s-4); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Block theme adjustments -------------------------------------------------
 * The layouts above are flex/grid containers, but the block editor also emits
 * flow-layout margins for the same elements. These rules stop the two systems
 * double-spacing each other, and dress the core blocks the templates use.
 * ---------------------------------------------------------------------- */

.wp-site-blocks > * { margin-block: 0; }

.kavi-home > *,
.kavi-page > *,
.kavi-shop > *,
.kavi-results > *,
.kavi-cart > *,
.kavi-product > *,
.kavi-section > *,
.kavi-header__inner > *,
.kavi-footer__inner > * { margin-block-start: 0; margin-block-end: 0; }

/* Group blocks carry no chrome of their own here — the kavi-* classes own it. */
.wp-block-group.kavi-wrap { max-width: var(--kavi-wrap); }
.wp-block-group.kavi-wrap--narrow { max-width: 1080px; }

/* Navigation block, header ------------------------------------------------ */
.kavi-nav.wp-block-navigation { flex: 0 0 auto; }
.kavi-nav .wp-block-navigation__container { display: flex; align-items: center; gap: var(--kavi-s-5); }
.kavi-nav .wp-block-navigation-item__content {
  display: block;
  font-size: var(--kavi-t-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--kavi-text-2);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.kavi-nav .wp-block-navigation-item__content:hover,
.kavi-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--kavi-accent);
  border-bottom-color: var(--kavi-accent);
}
.kavi-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--kavi-bg);
  padding: 24px;
}
.kavi-nav .wp-block-navigation__responsive-container-open,
.kavi-nav .wp-block-navigation__responsive-container-close { color: var(--kavi-text); }

/* Navigation block, footer ------------------------------------------------ */
.kavi-footer__social .wp-block-navigation__container { display: flex; gap: var(--kavi-s-5); }
.kavi-footer__social .wp-block-navigation-item__content {
  font-size: var(--kavi-t-sm);
  font-weight: 600;
  color: var(--kavi-muted);
  text-decoration: none;
}
.kavi-footer__social .wp-block-navigation-item__content:hover { color: var(--kavi-accent); }

/* Query loop, used by the blog/search templates --------------------------- */
.kavi-postlist .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: var(--kavi-s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.kavi-postlist .wp-block-post-title { margin: 0; }
.kavi-postlist .wp-block-post-title a { color: var(--kavi-text-hi); }
.kavi-postlist .wp-block-post-title a:hover { color: var(--kavi-accent); }
.kavi-pagination .wp-block-query-pagination-numbers,
.kavi-pagination a,
.kavi-pagination span { font-size: var(--kavi-t-sm); font-weight: 600; }
.kavi-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--kavi-s-3) var(--kavi-s-4);
  border-radius: var(--kavi-r-ctl);
  border: 1px solid var(--kavi-border);
  color: var(--kavi-text-2);
  text-decoration: none;
}
.kavi-pagination .page-numbers:hover { border-color: var(--kavi-accent); color: var(--kavi-accent); }
.kavi-pagination .page-numbers.current { border-color: var(--kavi-accent); background: var(--kavi-accent); color: var(--kavi-bg); }

/* Editor canvas ----------------------------------------------------------- */
.kavi-hero-editor { display: flex; flex-direction: column; gap: var(--kavi-s-4); }
.editor-styles-wrapper .kavi-hero__slide[hidden] { display: grid; opacity: 0.5; }

/* WooCommerce Blocks — Cart & Checkout ------------------------------------
 * The Checkout and Cart blocks ship their own component CSS (wc-block-*),
 * entirely separate from classic WooCommerce markup, so none of the rules
 * above ever reached them — hence stark white inputs on the dark page. These
 * overrides key off Woo Blocks' public class names and use !important only
 * on colour/background/border, since load order between the theme
 * stylesheet and Woo Blocks' own isn't guaranteed.
 * ---------------------------------------------------------------------- */

.wc-block-checkout,
.wc-block-cart { color: var(--kavi-text); }

/* Blocks components that kept WooCommerce's own 4-8px corners while the rest
   of the checkout moved onto the theme's scale. */
.wc-block-checkout__shipping-method-container,
.wc-block-checkout__shipping-method-option,
.wc-block-components-address-card,
.wc-blocks-components-select__container,
.wc-block-components-notice-banner {
  border-radius: var(--kavi-r-ctl) !important;
}
/* The summary block wrapper kept a 5px corner and a pale outline of its own
   behind the panel we draw inside it. */
.wp-block-woocommerce-checkout-order-summary-block {
  border-radius: var(--kavi-r-card) !important;
  border: 0 !important;
}
/* Woo sizes the summary item's metadata in em, landing on 11.375px. */
.wc-block-components-product-metadata,
.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata__description p {
  font-size: var(--kavi-t-xs) !important;
}

.wc-block-components-title,
.wc-block-components-checkout-step__title {
  color: var(--kavi-text-hi) !important;
  font-family: var(--kavi-font);
  font-size: var(--kavi-t-md) !important;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Text inputs, textareas and the country/state combobox ------------------- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input textarea,
.wc-blocks-components-select select,
.wc-block-components-combobox input,
textarea.wc-block-components-textarea {
  background: var(--kavi-panel-2) !important;
  border-color: var(--kavi-border) !important;
  color: var(--kavi-text) !important;
  border-radius: var(--kavi-r-ctl);
}
textarea.wc-block-components-textarea::placeholder { color: var(--kavi-muted); opacity: 1; }
textarea.wc-block-components-textarea:focus {
  border-color: var(--kavi-accent) !important;
  box-shadow: 0 0 0 1px var(--kavi-accent) !important;
  outline: none;
}

/* Blocks ships floating labels inside the field at 16px in the accent colour,
   while every other form on the site labels above the field at 11px. Two form
   languages in the two highest-stakes flows; this is the theme's one winning.
   The !important flags are required: Woo's own rules are more specific. */
.wc-block-components-text-input label,
.wc-blocks-components-select label,
.wc-block-components-combobox label {
  position: static !important;
  transform: none !important;
  display: block;
  font-size: var(--kavi-t-xs) !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase !important;
  color: var(--kavi-muted) !important;
  margin: 0 0 7px;
  padding: 0;
  line-height: 1.4;
}
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-combobox input,
.wc-blocks-components-select select,
textarea.wc-block-components-textarea {
  padding: 12px 14px !important;
  border-radius: var(--kavi-r-ctl) !important;
  border: 1px solid var(--kavi-field-line) !important;
  height: auto !important;
}
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus ~ label { transform: none !important; }
/* Text inputs put the label after the field so it can float over it, so the
   column reverses to bring it back above. The select wrapper already has its
   label first, so it only needs the floating removed. */
.wc-block-components-text-input {
  display: flex;
  flex-direction: column-reverse;
  gap: 7px;
}
/* Woo paints this container white so a floating label has something to sit
   on. With the label moved above the field, that panel was left showing as a
   white strip behind it. */
.wc-blocks-components-select__container {
  position: relative;
  background: transparent !important;
  border-radius: var(--kavi-r-ctl) !important;
}
.wc-blocks-components-select__label {
  position: static !important;
  transform: none !important;
  display: block;
  font-size: var(--kavi-t-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase !important;
  color: var(--kavi-muted) !important;
  margin: 0 0 7px !important;
}
/* The chevron is centred on the container, which used to be just the field.
   Now that the label sits above, the container is taller and the icon rode up
   with it; anchoring to the bottom keeps it centred on the field itself.
   13px = (51px field - 24px icon) / 2. */
.wc-blocks-components-select__expand {
  top: auto !important;
  bottom: 13px !important;
  transform: none !important;
}
.wc-blocks-components-select__select {
  padding: 12px 14px !important;
  border-radius: var(--kavi-r-ctl) !important;
  border: 1px solid var(--kavi-field-line) !important;
  height: auto !important;
}

/* Woo's checkbox and radio inputs are 18-20px. The label row they sit in gets
   the 44px minimum instead, which is the thing people actually tap — carried
   by the <label>, so the box and its text centre on the same line rather than
   the box sitting at the top of a 44px span. */
.wc-block-components-checkbox { min-height: 44px; display: flex; align-items: center; }
.wc-block-components-checkbox > label { align-items: center !important; min-height: 44px; }
.wc-block-components-checkbox__label { min-height: 0 !important; }
/* The tick is absolutely placed over the box, so it follows it to the middle. */
.wc-block-components-checkbox__mark {
  top: 50% !important;
  margin: 0 0 0 3px !important;
  transform: translateY(-50%);
}
.wc-block-components-radio-control__option { min-height: 44px; }

/* Labels stay on the neutral ramp in every state. The accent marks what you
   can act on and what things cost; a field label is neither. */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus ~ label,
.wc-blocks-components-select select:focus ~ label {
  color: var(--kavi-muted) !important;
}

.wc-block-components-text-input input:focus,
.wc-blocks-components-select select:focus {
  border-color: var(--kavi-accent) !important;
  box-shadow: 0 0 0 1px var(--kavi-accent) !important;
  outline: none;
}

.wc-blocks-components-select__container svg,
.wc-blocks-components-select__container .select2-selection__arrow { color: var(--kavi-muted); }

/* Checkboxes and radios ---------------------------------------------------- */
.wc-block-components-checkbox__mark { color: var(--kavi-accent); }
.wc-block-components-checkbox__input {
  border-color: var(--kavi-border-2) !important;
  background: var(--kavi-panel-2) !important;
}
.wc-block-components-checkbox__input:checked { background: var(--kavi-accent) !important; border-color: var(--kavi-accent) !important; }

.wc-block-components-radio-control__option {
  background: var(--kavi-panel-2) !important;
  border-color: var(--kavi-border) !important;
  border-radius: var(--kavi-r-ctl);
}
/* Woo's actual BEM class here is __option-checked (single dash), not
   __option--checked-option — the old selector below never matched. */
/* Woo marks the checked row with an inset box-shadow rather than a border, so
   setting border-color alone left the default near-white ring showing. Recolour
   the shadow itself to keep shipping options, pickup locations and payment
   rows on one accent. */
.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option.is-checked {
  border-color: var(--kavi-accent) !important;
  box-shadow: inset 0 0 0 1.5px var(--kavi-accent) !important;
}
.wc-block-components-radio-control__label-group .wc-block-components-radio-control__secondary-label { color: var(--kavi-text-3) !important; }
.wc-block-components-radio-control-accordion-content { background: transparent; color: var(--kavi-text-3); }

/* The accordion wrapper Woo puts around a checked, expandable option (e.g.
   "PayNow QR" with its description) draws its own default light-mode
   highlight border/box-shadow around the option + its content as a group.
   That default doesn't share our card's radius or colour, so it reads as a
   stray white box clipping the corners. Replace it with a themed border
   that matches the row radius and clips its own content instead of
   overflowing it. */
.wc-block-components-radio-control-accordion-option {
  border-radius: var(--kavi-r-ctl);
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  box-shadow: none !important;
  outline: none !important;
  border: 1px solid var(--kavi-accent) !important;
  border-radius: var(--kavi-r-ctl)!important;
  overflow: hidden;
}
.wc-block-components-radio-control--highlight-checked { box-shadow: none !important; }
/* Woo also paints a pale ::after ring on the highlighted option and its
   accordion wrapper. It keeps its own 4px radius, so against our 10px frame
   the corners poke out as grey nicks around the accent border. That frame is
   the outline here, so drop the ring and the row's own accent shadow inside. */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted::after,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__option::after {
  display: none !important;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__option-checked {
  box-shadow: none !important;
}
/* The radio group also draws a pale 1px frame of its own as ::after, inset 0
   on the group — which sits 4px outside the accent card and keeps a 4px
   radius, so its corners showed as grey arcs past the 10px curve. Only the
   accordion case is affected; the shipping and pickup lists rely on that frame
   to group their rows, so it stays for them. */
.wc-block-components-radio-control--highlight-checked:has(.wc-block-components-radio-control-accordion-option--checked-option-highlighted)::after {
  display: none !important;
}
/* Same frame, same artefact, on the shipping options: the package already
   draws a 16px panel around these rows, so the group's pale 4px frame is a
   second outline whose corners cut across the first. */
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control::after {
  display: none !important;
}
/* The pickup list is the one place that frame was doing real work — its
   container has no panel of its own — so rather than leave a 4px pale
   rectangle among 16px panels, the container becomes one. */
.wc-block-components-local-pickup-select .wc-block-components-radio-control::after {
  display: none !important;
}
.wc-block-components-local-pickup-select {
  background: var(--kavi-panel);
  border: 1px solid var(--kavi-line);
  border-radius: var(--kavi-r-card);
  padding: 0;
}
.wc-block-components-local-pickup-select .wc-block-components-radio-control__option:first-child {
  border-top-left-radius: var(--kavi-r-card) !important;
  border-top-right-radius: var(--kavi-r-card) !important;
}
.wc-block-components-local-pickup-select .wc-block-components-radio-control__option:last-child {
  border-bottom-left-radius: var(--kavi-r-card) !important;
  border-bottom-right-radius: var(--kavi-r-card) !important;
}
/* Same mismatch in the shipping package: its rows kept Woo's 4px corners
   inside a 16px panel, so the selected row's accent ring cut across the
   panel's curve. Woo also pads the panel 4px top and bottom, which left the
   ring floating short of the edge it was meant to trace. Dropping that
   padding and matching the panel's radius lets the first and last row sit
   exactly on it; rows in between stay square so a stacked list still reads as
   one group. Clipping the panel instead would shear the ring at the corner. */
/* Woo pads both the panel and the radio group inside it, so the first row
   started 4px below the edge its ring was meant to trace. */
.wc-block-components-shipping-rates-control__package,
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control,
.wc-block-components-local-pickup-select .wc-block-components-radio-control {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option:first-child {
  border-top-left-radius: var(--kavi-r-card) !important;
  border-top-right-radius: var(--kavi-r-card) !important;
}
.wc-block-components-shipping-rates-control__package .wc-block-components-radio-control__option:last-child {
  border-bottom-left-radius: var(--kavi-r-card) !important;
  border-bottom-right-radius: var(--kavi-r-card) !important;
}
/* The label row carried the raised surface while the description below it fell
   back to the page colour, so one card held two tones and the seam read as a
   shadow. Move the surface to the card and let both rows sit on it. */
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
  background: var(--kavi-panel-2);
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control-accordion-content {
  background: transparent !important;
}

/* Ship / Pickup toggle ------------------------------------------------------
 * Woo marks the chosen side with a solid white panel, which leaves our light
 * body text sitting on white and effectively unreadable. Use the raised dark
 * surface with an accent edge instead, matching the selected states around it,
 * and let the icon follow the text through currentColor.
 */
.wc-block-checkout__shipping-method-option {
  background: transparent !important;
  border: 2px solid transparent !important;
  color: var(--kavi-muted) !important;
}
.wc-block-checkout__shipping-method-option .wc-block-checkout__shipping-method-option-title { color: inherit !important; }
.wc-block-checkout__shipping-method-option .wc-block-checkout__shipping-method-option-icon { fill: currentColor !important; }
.wc-block-checkout__shipping-method-option:hover { color: var(--kavi-text) !important; }
.wc-block-checkout__shipping-method-option--selected {
  background: var(--kavi-panel-2) !important;
  border-color: var(--kavi-accent) !important;
  color: var(--kavi-accent) !important;
}
.wc-block-components-radio-control-accordion-option--checked-option-highlighted .wc-block-components-radio-control__option {
  border: none !important;
  border-radius: var(--kavi-r-ctl) var(--kavi-r-ctl) 0 0!important;
}

/* Shipping / notice panels -------------------------------------------------
 * "Your store does not have any Shipping Options configured" and similar
 * messages render as a light-mode notice banner by default.
 */
.wc-block-components-notice-banner {
  background: var(--kavi-panel) !important;
  border-color: var(--kavi-line) !important;
  color: var(--kavi-text-2) !important;
  border-radius: var(--kavi-r-ctl);
}
.wc-block-components-notice-banner.is-error { border-color: var(--kavi-warn) !important; }
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a { color: var(--kavi-accent); }
.wc-block-components-panel,
.wc-block-components-shipping-rates-control__package {
  background: var(--kavi-panel) !important;
  border-color: var(--kavi-line) !important;
  border-radius: var(--kavi-r-card);
}
.wc-block-components-panel__button { color: var(--kavi-text) !important; }

/* Buttons ------------------------------------------------------------------ */
.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button {
  background: var(--kavi-accent) !important;
  color: var(--kavi-bg) !important;
  border-radius: var(--kavi-r-ctl);
  font-family: var(--kavi-font);
  font-weight: 700;
}
/* Woo Blocks dims its solid buttons on hover/focus with an opacity/overlay
   treatment baked into the component, which sits on top of the accent
   background above and washes it out to a pale, low-contrast teal instead of
   the intended brighter accent-hi. Neutralise it explicitly rather than just
   overriding background-color, which the overlay would otherwise mute. */
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus {
  background: var(--kavi-accent-hi) !important;
  color: var(--kavi-bg) !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}
.wc-block-components-button.is-link { color: var(--kavi-accent) !important; }

/* Order summary sidebar -----------------------------------------------------
 * Matched to the classic Cart page's .kavi-summary-box: muted uppercase
 * small-caps title, 13px secondary-colour rows and a large bold accent total
 * set off from the rows by a divider, instead of Woo Blocks' default plain
 * list styling. */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar {
  background: var(--kavi-panel) !important;
  border: 1px solid var(--kavi-line);
  border-radius: var(--kavi-r-card);
  overflow: hidden;
  padding: 24px !important;
}
/* The item list is already inside that panel, so giving it the same panel
   treatment nested one card inside another. Flatten it to a plain list and
   let a hairline separate the items. */
.wc-block-components-order-summary {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible;
}
.wc-block-components-order-summary-item + .wc-block-components-order-summary-item {
  border-top: 1px solid var(--kavi-line-soft) !important;
}
/* Woo insets the totals rows by 16px but not the item rows or the title, so
   the summary's three sections started at three different places. Put them all
   on the same inset. */
.wc-block-components-order-summary-item {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.wc-block-components-checkout-order-summary__title { padding: 0 16px; }
/* Woo gives the rows a 1px bottom, which left the last item sitting on the
   totals divider. */
.wc-block-components-order-summary__content > .wc-block-components-order-summary-item:last-child {
  padding-bottom: 16px !important;
}
/* Singles are portrait and sealed boxes landscape, so letterbox the thumbnail
   inside its square slot rather than filling and distorting it. */
.wc-block-components-order-summary-item__image img { object-fit: contain; }
.wc-block-components-sidebar .wc-block-components-title,
.wc-block-checkout__sidebar .wc-block-components-title,
.wc-block-components-checkout-order-summary__title-text {
  font-size: var(--kavi-t-sm)!important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--kavi-muted) !important;
  margin-bottom: 16px;
}
.wc-block-components-order-summary-item,
.wc-block-components-totals-item {
  border-color: var(--kavi-line-soft) !important;
  color: var(--kavi-text-2);
  font-size: var(--kavi-t-sm);
  padding: 11px 0;
}
.wc-block-components-order-summary__panel-body,
.wc-block-components-totals-wrapper { padding: 0; }
.wc-block-components-order-summary-item__description,
.wc-block-components-product-metadata { color: var(--kavi-muted) !important; }
.wc-block-components-product-name { color: var(--kavi-text) !important; }
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--kavi-line) !important;
  margin-top: 3px;
  padding-top: 14px !important;
  align-items: baseline;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  color: var(--kavi-text) !important;
  font-size: var(--kavi-t-base);
  font-weight: 700 !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--kavi-accent) !important;
  font-size: var(--kavi-t-xl);
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}
.wc-block-components-formatted-money-amount { color: inherit; }

/* Order summary line-item quantity badge (the little "1" overlapping the
 * product thumbnail). Woo's default sets background and text to the same
 * muted grey, which renders the number invisible against its own badge.
 * Theme it with the site's teal accent + dark text like every other accent
 * chip (e.g. .kavi-badge__dot, .kavi-tag--accent). */
.wc-block-components-order-summary-item__quantity {
  background: var(--kavi-accent) !important;
  color: var(--kavi-bg) !important;
  font-weight: 700;
}

/* Payment methods panel ------------------------------------------------------ */
.wc-block-checkout__payment-method .wc-block-components-panel__content,
.wc-block-components-radio-control {
  padding: 4px 0;
}
.wc-block-components-radio-control__option {
  display: flex !important;
  align-items: center !important;
  padding: 14px 16px !important;
  margin-bottom: 10px;
}
.wc-block-components-radio-control__option:last-child { margin-bottom: 0; }
.wc-block-components-radio-control__option-layout {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column;
  min-width: 0;
}

/* The payment-method radio dot is a plain native <input type="radio"> that
   Woo Blocks lays out as a flex sibling of .__option-layout inside the
   <label>. Its own default styling (an absolutely-positioned, near-invisible
   input paired with a thick "filled border" checked state drawn via the
   border shorthand) fights our redraw on properties we weren't setting
   explicitly — position/opacity/border-width — which showed up as the dot
   overlapping the label text instead of sitting beside it. Reset every box
   -model property that matters with !important so nothing Woo sets by
   default can reintroduce that overlap.

   top/left/right/bottom/transform are reset too: Woo's base rule positions
   the input with `position: absolute; left: 16px; top: 50%; transform:
   translateY(-50%)` (its own way of vertically centering an absolutely
   positioned input over the label). Switching `position` to `relative`
   here does NOT clear those inherited values — an element with position:
   relative still honors left/top/transform as offsets from its normal flow
   position — so without this reset the dot renders 16px right and ~8px up
   from where the flex layout placed it, landing on top of the label text.
   This was the real cause of the "PayNow QR" overlap. */
.wc-block-components-radio-control__input {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  opacity: 1 !important;
  z-index: auto !important;
  box-sizing: border-box !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  border: 1.5px solid var(--kavi-border-2) !important;
  border-radius: 50% !important;
  background: var(--kavi-panel-2) !important;
  cursor: pointer;
}
/* A layered background (gradient + solid) for the checked fill is fragile
   here — Woo's own :checked rule sets border-width via the border shorthand,
   which as a same-specificity later property can win over a background-only
   override and leave a hollow ring instead of a filled dot. Draw the fill as
   a generated ::after circle instead: appearance: none makes the input a
   normal styleable box, so pseudo-elements render reliably on it.

   position/z-index/margin are repeated here (not just on the base selector
   above) because Woo's own :checked-specific rule — the one that draws its
   default check-icon overlay — sets position: absolute on exactly this
   state, and a same-or-higher-specificity :checked selector declared after
   ours in its stylesheet can win that property back even though our base
   rule already set position: relative. That is what made the dot overlap
   the label text only when an option was checked (e.g. "PayNow QR") while
   unchecked options were unaffected. */
.wc-block-components-radio-control__input:checked {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  margin: 0 12px 0 0 !important;
  border: 1.5px solid var(--kavi-accent) !important;
  background: var(--kavi-panel-2) !important;
}
.wc-block-components-radio-control__input:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--kavi-accent);
}
.wc-block-components-radio-control__input:focus-visible {
  outline: 2px solid var(--kavi-accent);
  outline-offset: 2px;
}

/* Validation ----------------------------------------------------------------- */
.wc-block-components-validation-error { color: var(--kavi-warn) !important; }
.wc-block-components-validation-error p { color: inherit; }