/* Balconit storefront — shared primitives (Wave 0).
   Site-wide, depends on tokens.css → promo-banner.css. Logical props only. */

/* ===== Form fields ===== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.field-label {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: var(--weight-caption);
  color: var(--ink-2);
}
.field-input,
.field-select,
.field-textarea {
  width: 100%;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  outline: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.field-input::placeholder,
.field-textarea::placeholder { color: var(--ink-3); }
.field-input:focus-visible,
.field-select:focus-visible,
.field-textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"],
.field-textarea[aria-invalid="true"] {
  border-color: var(--error);
  background: var(--error-soft);
}
.field-textarea { min-height: 120px; resize: vertical; }
.field-help { font-size: var(--text-micro); line-height: var(--leading-micro); color: var(--ink-3); }
.field-error { font-size: var(--text-micro); line-height: var(--leading-micro); color: var(--error-ink); }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* Native select + custom caret (caret on inline-end for RTL) */
.field-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237A7167' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
  padding-inline-end: 16px;
  padding-inline-start: 40px;
  cursor: pointer;
}
body[dir="rtl"] .field-select { background-position: left 16px center; }

/* Custom checkbox / radio — accent fill on-state (from .care-dot.on + .how-tl-dot) */
.field-check,
.field-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: 16px;
  color: var(--ink-2);
  cursor: pointer;
}
.field-check input,
.field-radio input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--rule);
  background: var(--surface);
  margin: 0;
  display: grid;
  place-items: center;
  transition: border-color 160ms var(--ease), background 160ms var(--ease);
}
.field-check input { border-radius: var(--radius-sm); }
.field-radio input { border-radius: 50%; }
.field-check input:checked,
.field-radio input:checked {
  border-color: var(--accent);
  background: var(--accent);
}
.field-check input:checked::after {
  content: "";
  width: 10px; height: 6px;
  border: 2px solid var(--accent-ink);
  border-top: 0; border-inline-end: 0;
  transform: translateY(-1px) rotate(-45deg);
}
.field-radio input:checked::after {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-ink);
}
.field-check input:focus-visible,
.field-radio input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ===== Breadcrumbs ===== */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--ink-3);
}
.breadcrumbs a {
  color: var(--ink-3);
  transition: color 180ms var(--ease);
}
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs .sep { opacity: 0.5; }

/* ===== Pagination (numbered chips / prev-next) ===== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-12);
}
.pagination a,
.pagination span {
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: var(--pill);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  transition: all 180ms var(--ease);
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .current {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}
.pagination .dots { border: none; }

/* ===== Shop toolbar (result count + sort row) ===== */
.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--space-8);
}
.shop-toolbar .count {
  font-size: var(--text-caption);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ===== Facets (collapsible filter groups + active pills) ===== */
.facets { display: flex; flex-direction: column; gap: var(--space-6); }
.facet { border-block-end: 1px solid var(--rule-soft); padding-block-end: var(--space-5); }
.facet-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  text-align: start;
}
.facet-head[aria-expanded="false"] + .facet-body { display: none; }
.facet-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
  margin-block-start: var(--space-3);
}
.facet-active {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.facet-active-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--text-caption);
  color: var(--ink-2);
  background: var(--bone-2);
  border-radius: var(--pill);
  padding: 4px 12px;
}
.facet-active-pill button { color: var(--ink-3); line-height: 1; }
.facet-active-pill button:hover { color: var(--ink); }

/* ===== Notices (Woo message slot — soft-tint bg + -ink text + dot) ===== */
.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--bone-2);
  margin-block: var(--space-4);
}
.notice::before {
  content: "";
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  margin-block-start: 8px;
}
.notice a { color: var(--ink); border-block-end: 1px solid var(--rule); }
.notice a:hover { border-color: var(--ink); }
.notice--success { background: var(--success-soft); color: var(--success-ink); }
.notice--success::before { background: var(--success); }
.notice--warning { background: var(--warning-soft); color: var(--warning-ink); }
.notice--warning::before { background: var(--warning); }
.notice--error { background: var(--error-soft); color: var(--error-ink); }
.notice--error::before { background: var(--error); }
.notice--info { background: var(--info-soft); color: var(--info-ink); }
.notice--info::before { background: var(--info); }

/* ===== Cart summary (canonical totals panel — cart + checkout + order-received) ===== */
.cart-summary {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.cart-summary h2,
.cart-summary .cart-summary-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  margin: 0 0 var(--space-5);
}
.cart-summary .summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: 16px;
  color: var(--ink-2);
  padding-block: var(--space-2);
}
.cart-summary .summary-row span:last-child { font-variant-numeric: tabular-nums; color: var(--ink); }
.cart-summary .summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--rule);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
}
.cart-summary .summary-total .amount { font-variant-numeric: tabular-nums; }

/* ===== Table (account orders / downloads / addresses) ===== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.table th {
  text-align: start;
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--space-3) var(--space-3);
  border-block-end: 1px solid var(--rule);
}
.table td {
  padding: var(--space-4) var(--space-3);
  border-block-end: 1px solid var(--rule-soft);
  color: var(--ink-2);
  vertical-align: middle;
}
.table td.amount,
.table td .amount { font-variant-numeric: tabular-nums; color: var(--ink); }
.table tr:last-child td { border-block-end: none; }

/* ===== Account nav (tabs; active = accent marker) ===== */
.account-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.account-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 16px;
  color: var(--ink-2);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.account-nav a:hover { background: var(--bone-2); color: var(--ink); }
.account-nav a.is-active {
  background: var(--bone-2);
  color: var(--ink);
  font-weight: 500;
}
.account-nav a.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 8px;
  width: 3px;
  border-radius: var(--pill);
  background: var(--accent);
}

/* ===== Empty state (empty cart / no results / no orders) ===== */
.empty-state {
  text-align: center;
  padding-block: var(--space-24);
  max-width: 48ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}
.empty-state .empty-mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bone-2);
  color: var(--ink-3);
}
.empty-state p { color: var(--ink-3); margin: 0; }

/* ===== Rating (read + input stars — promotes .kc-stars) ===== */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 16px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.rating svg,
.rating .star { color: var(--accent); }
.rating--input .star {
  cursor: pointer;
  color: var(--rule);
  transition: color 140ms var(--ease);
}
.rating--input .star:hover,
.rating--input .star.is-on { color: var(--accent); }

/* ===== Price / strikethrough / sale badge ===== */
.price {
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}
.price__was {
  color: var(--price-was);
  text-decoration: line-through;
  margin-inline-end: var(--space-2);
  font-weight: 400;
}
.price--sale,
.price ins { color: var(--price-sale); text-decoration: none; }
.badge--sale {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--pill);
  padding: 4px 10px;
}

/* ===== Skip link (a11y — first focusable element) ===== */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: -64px;
  z-index: 200;
  background: var(--ink);
  color: var(--bone);
  padding: 12px 20px;
  border-radius: var(--pill);
  font-size: 16px;
  font-weight: 500;
  transition: top 180ms var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-4);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ===== Quantity stepper (shared: cart + product page, via global/quantity-input.php) ===== */
.vh-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule);
  border-radius: var(--pill);
  height: 40px;
  overflow: hidden;
}
.vh-qty-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--ink-2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.vh-qty-btn:hover { color: var(--accent); }
.vh-qty-input {
  width: 44px;
  height: 38px;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.vh-qty-input::-webkit-outer-spin-button,
.vh-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vh-qty-input:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--pill); }