/*
 * AI Diagnostic Concierge.
 *
 * The concierge is a plugin, so it owns its markup and the theme must adapt to
 * it rather than the other way round. The plugin no longer asserts any brand
 * colour — its icons use currentColor — so everything here comes from the
 * theme's tokens and it will follow whatever theme is active.
 *
 * Note the plugin emits a generic `.btn-primary`, which is not the theme's
 * `.k-btn`. It is styled to match rather than renamed, because the plugin is
 * live in production and changing its markup would be a production change.
 */

.concierge-widget-card {
  background-color: var(--k-surface);
  border: 1px solid var(--k-rule);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  margin-block: var(--k-space-6);
}

.concierge-header-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-1);
  font-size: var(--k-size-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
  margin-bottom: var(--k-space-3);
}

.concierge-title {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h2);
  font-weight: 400;
  line-height: 1.15;
  color: var(--k-ink);
  margin-bottom: var(--k-space-3);
}

.concierge-desc {
  color: var(--k-ink-muted);
  margin-bottom: var(--k-space-5);
}

.symptom-chips-label {
  display: block;
  font-size: var(--k-size-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
  margin-bottom: var(--k-space-3);
}

.symptom-chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2);
  margin-bottom: var(--k-space-5);
}

/* Chips carry the same square trim as the button family. Icons inherit
   currentColor, so they take the chip's ink and invert with it when active. */
.symptom-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--k-space-2);
  min-height: 48px;
  padding: 0 var(--k-space-3);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: var(--k-surface);
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-size-small);
  cursor: pointer;
  transition: background-color var(--k-duration) var(--k-ease),
              color var(--k-duration) var(--k-ease),
              border-color var(--k-duration) var(--k-ease);
}

.symptom-chip:hover,
.symptom-chip.is-active {
  background-color: var(--k-forest);
  border-color: var(--k-forest);
  color: var(--k-paper);
}

.symptom-chip svg { width: 16px; height: 16px; }

.concierge-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2);
  align-items: stretch;
}

.concierge-input {
  flex: 1 1 18rem;
  min-height: 54px;
  padding: 0 var(--k-space-3);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: var(--k-surface);
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-size-body);
}

.concierge-input::placeholder { color: var(--k-ink-muted); opacity: 1; }

/*
 * The concierge submit is a genuine primary action, but it is not a buy action,
 * so it takes the secondary tier. Rose stays reserved for adding to cart.
 */
.concierge-form-row .btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 2.5rem;
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: transparent;
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-size-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color var(--k-duration) var(--k-ease),
              background-color var(--k-duration) var(--k-ease);
}

.concierge-form-row .btn-primary::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--k-brass);
  opacity: 0.55;
  pointer-events: none;
  transition: inset var(--k-duration) var(--k-ease), opacity var(--k-duration) var(--k-ease);
}

.concierge-form-row .btn-primary:hover {
  border-color: var(--k-ink);
  background-color: var(--k-surface);
}

.concierge-form-row .btn-primary:hover::after { inset: 3px; opacity: 0.85; }

/* Results */
.remedy-results-wrapper:not(:empty) { margin-top: var(--k-space-5); }

.remedy-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--k-space-4);
}

.remedy-card-item,
.kihara-remedy-card {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-2);
  padding: var(--k-space-4);
  border: 1px solid var(--k-rule);
  background-color: var(--k-paper);
}

.remedy-product-title,
.kihara-remedy-card h4 {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h3);
  font-weight: 400;
  color: var(--k-ink);
  margin: 0;
}

.remedy-product-desc { color: var(--k-ink-muted); margin: 0; }

.remedy-badge-tag {
  align-self: flex-start;
  font-size: var(--k-size-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-brass-text);
}

.remedy-sku {
  font-size: var(--k-size-meta);
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
}

.kihara-loading,
.kihara-loading-box {
  padding: var(--k-space-3) var(--k-space-4);
  border-left: 2px solid var(--k-forest);
  background-color: var(--k-forest-tint);
  color: var(--k-ink);
  font-size: var(--k-size-small);
}

.kihara-error,
.kihara-error-box {
  padding: var(--k-space-3) var(--k-space-4);
  border-left: 2px solid var(--k-rose);
  background-color: var(--k-surface);
  color: var(--k-ink);
  font-size: var(--k-size-small);
}

/* ---------------------------------------------------------------------------
   Concierge v3.
   The v3 plugin uses the theme's own class names and asserts no colours, so it
   needs only layout here. Results render through .k-card, the same component
   the shop uses, so the two can never diverge.
--------------------------------------------------------------------------- */
.k-concierge {
  border: 1px solid var(--k-rule);
  background-color: var(--k-surface);
  padding: clamp(1.5rem, 5vw, 3.5rem);
  margin-block: var(--k-space-6);
}

.k-concierge__title {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h2);
  font-weight: 400;
  line-height: 1.15;
  margin-block: var(--k-space-2) var(--k-space-3);
  max-width: 24ch;
}

.k-concierge__intro { color: var(--k-ink-muted); margin-bottom: var(--k-space-5); }

.k-concierge__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2);
  align-items: stretch;
}

.k-concierge__input {
  flex: 1 1 18rem;
  min-height: 54px;
  padding: 0 var(--k-space-3);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: var(--k-surface);
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-size-body);
}

.k-concierge__input::placeholder { color: var(--k-ink-muted); opacity: 1; }

.k-concierge__presets { margin-top: var(--k-space-5); }

.k-concierge__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-2);
  margin-top: var(--k-space-2);
}

/* Chips carry the same square trim as the button family. */
.k-chip {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--k-space-3);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: var(--k-surface);
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-size-small);
  cursor: pointer;
  transition: background-color var(--k-duration) var(--k-ease),
              color var(--k-duration) var(--k-ease),
              border-color var(--k-duration) var(--k-ease);
}

.k-chip:hover,
.k-chip.is-active {
  background-color: var(--k-forest);
  border-color: var(--k-forest);
  color: var(--k-paper);
}

.k-concierge__results:not(:empty) {
  margin-top: var(--k-space-6);
  padding-top: var(--k-space-5);
  border-top: 1px solid var(--k-rule);
}

.k-concierge__results-heading { margin-bottom: var(--k-space-4); }

.k-concierge__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--k-space-5) var(--k-space-4);
}

.k-concierge__message { color: var(--k-ink-muted); margin: 0; }

/* -------------------------------------------------------------------------
 * Start over.
 *
 * Offered only once the results region has something in it — a reset control
 * on an empty widget is noise. Set as a quiet text button rather than a third
 * bordered control: the page already has the field and the presets competing
 * for attention, and this is the least important thing on it.
 * ---------------------------------------------------------------------- */
.k-concierge__reset {
  margin: var(--k-space-4) 0 0;
}

.k-concierge__reset-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  font-family: inherit;
  font-size: var(--k-size-meta);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--k-ink-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--k-rule-strong);
  border-radius: 0;
  cursor: pointer;
  transition: color var(--k-duration) var(--k-ease), border-color var(--k-duration) var(--k-ease);
}

.k-concierge__reset-button:hover,
.k-concierge__reset-button:focus-visible {
  color: var(--k-forest);
  border-color: var(--k-forest);
}

.k-concierge__reset-button:focus-visible {
  outline: 2px solid var(--k-forest);
  outline-offset: 3px;
}