/*
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: 1.0.0
Requires at least: 6.0
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 ---------------------------------------------------------- */
:root {
  --kavi-bg: #08090A;
  --kavi-bg-alt: #0A0C0B;
  --kavi-panel: #0E1211;
  --kavi-panel-2: #101413;
  --kavi-well: #0A0D0C;
  --kavi-raise: #171D1B;
  --kavi-line: #1A1F1E;
  --kavi-line-soft: #141918;
  --kavi-border: #232A28;
  --kavi-border-2: #2C3634;
  --kavi-accent: #1FD6B0;
  --kavi-accent-hi: #4BE8C6;
  --kavi-accent-dim: rgba(31, 214, 176, 0.12);
  --kavi-accent-line: rgba(31, 214, 176, 0.35);
  --kavi-warn: #E2A33C;
  --kavi-warn-dim: rgba(226, 163, 60, 0.12);
  --kavi-text: #E8EDEB;
  --kavi-text-hi: #F2F7F5;
  --kavi-text-2: #B9C4C0;
  --kavi-text-3: #9AA8A4;
  --kavi-muted: #7E8B87;
  --kavi-muted-2: #5F6C68;
  --kavi-wrap: 1280px;
  --kavi-font: Sora, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 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: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--kavi-accent); text-decoration: none; }
a:hover { color: var(--kavi-accent-hi); }
::selection { background: var(--kavi-accent); color: var(--kavi-bg); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; }

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: 8px; font-weight: 700;
}

/* Buttons ---------------------------------------------------------------- */
.kavi-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-block;
  background: var(--kavi-accent);
  color: var(--kavi-bg);
  font-family: var(--kavi-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 14px 26px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.kavi-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--kavi-accent-hi);
  color: var(--kavi-bg);
}

.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); }

.kavi-btn--quiet {
  background: var(--kavi-raise);
  border: 1px solid var(--kavi-border-2);
  color: var(--kavi-text);
  font-size: 11px;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 8px;
}
.kavi-btn--quiet:hover { background: var(--kavi-accent); color: var(--kavi-bg); border-color: var(--kavi-accent); }

.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: 28px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.kavi-brand { display: flex; align-items: center; gap: 12px; 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: 2px; }
.kavi-brand__name { font-size: 19px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--kavi-accent); }
.kavi-brand__tag { font-size: 8px; font-weight: 600; letter-spacing: 0.34em; color: var(--kavi-muted); line-height: 1; text-transform: uppercase; }

.kavi-nav { flex: 0 0 auto; }
.kavi-nav ul { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.kavi-nav a {
  display: block;
  font-size: 13px;
  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: 10px;
  color: var(--kavi-text);
  font-size: 12px;
  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-border);
  border-radius: 10px;
  padding: 11px 14px 11px 38px;
  color: var(--kavi-text);
  font-size: 13px;
  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: 12px;
  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: 12px;
  padding: 10px 12px; border-radius: 8px; color: inherit;
}
.kavi-suggest__item:hover, .kavi-suggest__item:focus { background: var(--kavi-raise); color: inherit; }
.kavi-suggest__name { font-size: 13px; font-weight: 600; color: var(--kavi-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kavi-suggest__meta { font-size: 11px; color: var(--kavi-muted); }
.kavi-suggest__price { font-size: 12px; font-weight: 700; color: var(--kavi-accent); white-space: nowrap; }
.kavi-suggest__empty { padding: 12px; font-size: 12px; color: var(--kavi-muted); }

/* Cart pill -------------------------------------------------------------- */
.kavi-cartlink {
  display: flex; align-items: center; gap: 9px;
  background: var(--kavi-panel-2);
  border: 1px solid var(--kavi-border);
  border-radius: 10px;
  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: 13px; height: 11px; border: 1.5px solid var(--kavi-accent); border-radius: 2px; }
.kavi-cartlink__count { font-size: 12px; font-weight: 600; }
.kavi-cartlink__total { font-size: 12px; 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: 24px;
  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: 40px;
  align-items: center;
  padding: 56px;
}
.kavi-hero__slide[hidden] { display: none; }
.kavi-hero__copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; min-height: 390px; }
.kavi-badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; flex-shrink: 0;
  background: var(--kavi-accent-dim);
  border: 1px solid var(--kavi-accent-line);
  border-radius: 999px;
  padding: 6px 13px;
}
.kavi-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--kavi-accent); }
.kavi-badge__label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kavi-accent); }
.kavi-hero__title {
  font-size: clamp(34px, 4vw, 54px);
  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: 15px; line-height: 1.7; color: var(--kavi-text-3); max-width: 460px; text-wrap: pretty; flex-shrink: 0; }
.kavi-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; flex-shrink: 0; }
.kavi-hero__media { position: relative; height: 390px; border-radius: 16px; overflow: hidden; min-width: 0; }
.kavi-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.kavi-hero__dots { display: flex; gap: 9px; 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: 2px; 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-2);
  font-size: 11px; 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: 22px; }
.kavi-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kavi-section__title { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.kavi-section__more { font-size: 12px; font-weight: 600; color: var(--kavi-accent); }
.kavi-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kavi-muted); }

/* Game cards ------------------------------------------------------------- */
.kavi-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.kavi-game {
  position: relative; border-radius: 18px; 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: 12px; }
.kavi-game__name { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.kavi-game__count { font-size: 11px; color: var(--kavi-muted); }
.kavi-game__arrow { font-size: 18px; color: var(--kavi-accent); }

/* Product cards ---------------------------------------------------------- */
.kavi-grid,
ul.products,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kavi-grid--wide { grid-template-columns: repeat(auto-fit, minmax(230px, 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; }

.kavi-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--kavi-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--kavi-panel);
}
.kavi-card:hover { border-color: var(--kavi-border-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;
  height: 290px;
  overflow: hidden;
  background: var(--kavi-well);
}
.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;
}
.kavi-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.kavi-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.kavi-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 4px; padding: 3px 7px;
  color: var(--kavi-text-3); background: var(--kavi-raise);
}
.kavi-tag--accent { color: var(--kavi-accent); background: var(--kavi-accent-dim); }
.kavi-tag--foil { color: var(--kavi-warn); background: var(--kavi-warn-dim); }
.kavi-card__name { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--kavi-text); text-wrap: pretty; }
.kavi-card__name:hover { color: var(--kavi-accent); }
.kavi-card__meta { font-size: 11px; color: var(--kavi-muted); }
.kavi-card__submeta { font-size: 11px; color: var(--kavi-muted-2); }
.kavi-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.kavi-card__price,
ul.products li.product .price,
.woocommerce ul.products li.product .price {
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--kavi-text-hi); margin: 0;
}
ul.products li.product .price del { color: var(--kavi-muted-2); font-weight: 600; font-size: 13px; }
ul.products li.product .price ins { text-decoration: none; }
.kavi-card__stock { font-size: 10px; font-weight: 600; color: var(--kavi-warn); }

/* Recently viewed -------------------------------------------------------- */
.kavi-recent { display: flex; gap: 14px; flex-wrap: wrap; }
.kavi-recent__item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--kavi-line); border-radius: 12px;
  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: 4px;
  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: 12px; font-weight: 600; }
.kavi-recent__price { font-size: 11px; 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: 8px; padding-bottom: 28px; }
.kavi-shop__crumb { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--kavi-muted); }
.kavi-shop__title { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }

.kavi-tabs { display: flex; gap: 16px; padding-bottom: 26px; border-bottom: 1px solid var(--kavi-line); flex-wrap: wrap; }
.kavi-tab {
  font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 999px;
  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: 26px; min-width: 0; }
.kavi-filters__head { display: flex; align-items: center; justify-content: space-between; }
.kavi-filters__title { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kavi-muted); }
.kavi-filters__clear { font-size: 11px; 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: 12px;
  min-width: 0;
  margin: 0;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid var(--kavi-line-soft);
}
.kavi-fgroup__label { font-size: 12px; font-weight: 700; color: var(--kavi-text); padding: 0; }
.kavi-fgroup__opts { display: flex; flex-direction: column; gap: 9px; }
.kavi-opt { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.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: 4px; 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: 2px; 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: 12.5px; color: var(--kavi-text-2); flex: 1 1 auto; }
.kavi-opt__count { font-size: 11px; color: var(--kavi-muted-2); }

.kavi-price { display: flex; flex-direction: column; gap: 14px; 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: 12px; font-weight: 700; }
.kavi-price__value { font-size: 11px; color: var(--kavi-accent); font-weight: 600; }
.kavi-price input[type="range"] { width: 100%; accent-color: var(--kavi-accent); }

.kavi-results { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.kavi-results__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kavi-results__count { font-size: 12px; color: var(--kavi-muted); }
.kavi-sorts { display: flex; gap: 8px; flex-wrap: wrap; }
.kavi-sort {
  font-size: 11px; font-weight: 600; padding: 7px 13px; border-radius: 7px;
  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: 16px; }
.kavi-empty__title { font-size: 15px; font-weight: 600; color: var(--kavi-text-2); }
.kavi-empty__link { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--kavi-accent); }

/* Pagination ------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul,
.kavi-pagination { border: 0; display: flex; gap: 8px; 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: 9px;
  border: 1px solid var(--kavi-border); color: var(--kavi-text-2);
  font-size: 12px; 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: 12px; 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; }
.kavi-gallery { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kavi-gallery__main {
  position: relative; width: 100%; aspect-ratio: 0.715;
  border-radius: 16px; 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: 10px; flex-wrap: wrap; }
.kavi-gallery__thumb {
  width: 62px; height: 87px; border-radius: 6px; 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: 22px; min-width: 0; }
.kavi-summary__tags { display: flex; gap: 7px; flex-wrap: wrap; }
.kavi-summary__tags .kavi-tag { font-size: 9px; letter-spacing: 0.14em; border-radius: 5px; padding: 4px 9px; }
.kavi-summary__title { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.06; text-wrap: pretty; }
.kavi-summary__setline { font-size: 13px; color: var(--kavi-muted); }
.kavi-summary__pricerow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kavi-summary__pricerow .price,
.kavi-summary__pricerow .amount { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--kavi-accent); margin: 0; }
.kavi-summary__pricerow del .amount { font-size: 20px; color: var(--kavi-muted-2); }
.kavi-summary__taxnote { font-size: 12px; color: var(--kavi-muted); }
.kavi-summary__stock { font-size: 12px; font-weight: 600; color: var(--kavi-warn); }
.kavi-summary__desc { font-size: 13px; line-height: 1.75; color: var(--kavi-text-3); text-wrap: pretty; }

.kavi-conditions { display: flex; flex-direction: column; gap: 11px; }
.kavi-conditions__label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kavi-muted); }
.kavi-conditions__opts { display: flex; gap: 9px; flex-wrap: wrap; }
.kavi-condition {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid var(--kavi-border); border-radius: 10px;
  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: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kavi-accent); min-height: 12px; }
.kavi-condition__label { font-size: 13px; font-weight: 700; color: var(--kavi-text); }
.kavi-condition__price { font-size: 12px; font-weight: 600; color: var(--kavi-text-3); }
.kavi-condition__stock { font-size: 10px; color: var(--kavi-muted-2); }
.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; }

.kavi-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--kavi-line);
  border: 1px solid var(--kavi-line); border-radius: 12px; overflow: hidden; margin-top: 8px;
}
.kavi-spec { background: var(--kavi-panel); padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; }
.kavi-spec__label { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kavi-muted-2); }
.kavi-spec__value { font-size: 13px; font-weight: 600; color: var(--kavi-text); }

/* Quantity + add to cart -------------------------------------------------- */
.woocommerce div.product form.cart { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; padding-top: 4px; margin: 0; }
.woocommerce div.product form.cart .variations { flex: 1 1 100%; }
.woocommerce .quantity,
.kavi-qty {
  display: flex; align-items: center;
  border: 1px solid var(--kavi-border); border-radius: 10px; 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: 15px; line-height: 1;
}
.kavi-qty__btn:hover { color: var(--kavi-accent); }
.woocommerce .quantity .qty,
.kavi-qty input {
  width: 52px; background: transparent; border: 0; color: var(--kavi-text);
  font-size: 14px; 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; }
.woocommerce div.product form.cart button.single_add_to_cart_button {
  flex: 1 1 200px; font-size: 14px; padding: 15px 28px;
}

/* Cart ------------------------------------------------------------------- */
.kavi-cart { padding-top: 44px; padding-bottom: 90px; display: flex; flex-direction: column; gap: 32px; }
.kavi-cart__title { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }
.kavi-cart__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 32px; align-items: start; }
.kavi-cart__lines { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kavi-line {
  display: flex; gap: 18px; align-items: center;
  border: 1px solid var(--kavi-line); border-radius: 14px;
  padding: 16px; background: var(--kavi-panel); flex-wrap: wrap;
}
.kavi-line__thumb {
  width: 60px; height: 84px; flex: 0 0 auto; border-radius: 6px; 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: 5px; }
.kavi-line__name { font-size: 14px; font-weight: 600; text-wrap: pretty; color: var(--kavi-text); }
.kavi-line__meta { font-size: 11px; color: var(--kavi-muted); }
.kavi-line__condition { font-size: 11px; color: var(--kavi-accent); font-weight: 600; }
.kavi-line__total { font-size: 16px; font-weight: 800; min-width: 84px; text-align: right; flex: 0 0 auto; }
.kavi-line__remove { font-size: 11px; color: var(--kavi-muted-2); flex: 0 0 auto; background: none; border: 0; cursor: pointer; }
.kavi-line__remove:hover { color: var(--kavi-warn); }

.kavi-cart__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-top: 6px; }
.kavi-cart__actions .coupon { display: flex; gap: 10px; flex: 1 1 260px; }
.kavi-cart__actions .coupon input { flex: 1 1 auto; }

.kavi-summary-box {
  display: flex; flex-direction: column; gap: 16px;
  border: 1px solid var(--kavi-line); border-radius: 16px;
  padding: 24px; background: var(--kavi-panel); min-width: 260px;
}
.kavi-summary-box__title { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kavi-muted); }
.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: 12px; font-size: 13px; 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: 12px; }
.kavi-summary-box__total dt { font-size: 14px; font-weight: 700; color: var(--kavi-text); }
.kavi-summary-box__total dd { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: var(--kavi-accent); }
.kavi-summary-box__total .amount { color: inherit; }
.kavi-summary-box__note { font-size: 11px; line-height: 1.7; color: var(--kavi-muted-2); padding-top: 4px; }
.kavi-summary-box__continue { font-size: 12px; 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: 11px; 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: 10px;
  padding: 12px 14px;
  color: var(--kavi-text);
  font-size: 13px;
  outline: none;
}
.woocommerce form .form-row input.input-text:focus,
input:focus, textarea:focus, select:focus { border-color: 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: 12px;
  color: var(--kavi-text-2);
  padding: 16px 20px;
  margin: 0 0 22px;
  list-style: none;
  display: flex; align-items: center; gap: 16px; 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: 14px;
  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: 12px; 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: 24px; }
.kavi-page__title { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; }
.kavi-page__content { font-size: 14px; line-height: 1.8; color: var(--kavi-text-3); }
.kavi-page__content h2 { font-size: 22px; margin: 28px 0 10px; }
.kavi-page__content h3 { font-size: 17px; 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: 6px; padding: 2px 6px; font-size: 13px; }

.kavi-postlist { display: flex; flex-direction: column; gap: 18px; }
.kavi-post { border: 1px solid var(--kavi-line); border-radius: 16px; background: var(--kavi-panel); padding: 24px; }
.kavi-post__title { font-size: 20px; font-weight: 700; }
.kavi-post__meta { font-size: 11px; color: var(--kavi-muted); margin-top: 6px; }
.kavi-post__excerpt { font-size: 13px; line-height: 1.7; color: var(--kavi-text-3); margin-top: 12px; }

/* 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: 24px; flex-wrap: wrap;
  padding-top: 40px; padding-bottom: 40px;
}
.kavi-footer__brand { display: flex; align-items: center; gap: 12px; }
.kavi-footer__copy { font-size: 12px; color: var(--kavi-muted-2); }
.kavi-footer__social { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.kavi-footer__social a { font-size: 12px; font-weight: 600; color: var(--kavi-muted); }
.kavi-footer__social a:hover { color: var(--kavi-accent); }

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

@media (max-width: 860px) {
  .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: 4; flex: 1 1 100%; }
  .kavi-cartlink { order: 3; }
  .kavi-hero__slide { padding: 32px; gap: 28px; }
  .kavi-hero__copy { min-height: 0; }
  .kavi-hero__title { min-height: 0; }
  .kavi-hero__media { height: 260px; }
  .kavi-hero__dots { margin-top: 8px; }
  .kavi-product__grid { gap: 32px; }
  .kavi-summary__title { font-size: 30px; }
  .kavi-home { gap: 52px; }
}

@media (max-width: 520px) {
  .kavi-wrap { padding-left: 16px; padding-right: 16px; }
  .kavi-shop__title, .kavi-cart__title, .kavi-page__title { font-size: 26px; }
  .kavi-grid, ul.products, .woocommerce ul.products { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
  .kavi-card__media,
  .woocommerce ul.products li.product .kavi-card__media { height: 210px; }
}

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