/* Zouqly components — buttons, cards, forms, pills, tables.
   Radius 4px (999px pills only). One soft shadow. All interactive states explicit. */

/* ---------- Buttons ---------- */
.zq-btn,
.wp-element-button,
button.zq-btn {
  display: inline-block;
  font-family: var(--zq-font-body);
  font-size: var(--zq-size-step-0);
  font-weight: 600;
  line-height: 1;
  padding: var(--zq-space-2) var(--zq-space-4);
  border-radius: var(--zq-radius-base);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--zq-motion-fast) var(--zq-motion-ease),
              color var(--zq-motion-fast) var(--zq-motion-ease),
              border-color var(--zq-motion-fast) var(--zq-motion-ease);
}

/* Primary: solid ember */
.zq-btn--primary, .zq-btn:not([class*="--"]) {
  background: var(--zq-color-accent);
  color: var(--zq-color-canvas);
}
.zq-btn--primary:hover, .zq-btn:not([class*="--"]):hover {
  background: var(--zq-color-accent-deep);
  color: var(--zq-color-canvas);
}
.zq-btn--primary:active { background: var(--zq-color-accent-deep); }
.zq-btn--primary:disabled { background: var(--zq-color-line); color: var(--zq-color-ink-soft); cursor: not-allowed; }

/* Secondary: ink outline */
.zq-btn--outline {
  background: transparent;
  color: var(--zq-color-ink);
  border-color: var(--zq-color-ink);
}
.zq-btn--outline:hover { background: var(--zq-color-ink); color: var(--zq-color-canvas); }

/* Tertiary: text link */
.zq-btn--text {
  background: none;
  padding-inline: 0;
  color: var(--zq-color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.zq-btn--text:hover { color: var(--zq-color-accent); }

/* ---------- Pills ---------- */
.zq-pill {
  display: inline-block;
  font-size: var(--zq-size-step--1);
  padding: calc(var(--zq-space-1) / 2) var(--zq-space-2);
  border-radius: var(--zq-radius-pill);
  border: 1px solid var(--zq-color-line);
  background: var(--zq-color-surface);
  color: var(--zq-color-ink-soft);
}
.zq-pill--accent { background: var(--zq-color-accent); border-color: var(--zq-color-accent); color: var(--zq-color-canvas); }

/* ---------- Cards ---------- */
.zq-card {
  background: var(--zq-color-surface);
  border-radius: var(--zq-radius-base);
  border: 1px solid var(--zq-color-line);
}
.zq-card--raise { border: 0; box-shadow: var(--zq-shadow-raise); }

/* Product card: image scale + crossfade to second image on hover */
.zq-product-card { position: relative; }
.zq-product-card .zq-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--zq-radius-base);
  aspect-ratio: 4 / 5;
  background: var(--zq-color-surface);
}
.zq-product-card .zq-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--zq-motion-slow) var(--zq-motion-ease),
              opacity var(--zq-motion-slow) var(--zq-motion-ease);
}
.zq-product-card .zq-media .zq-img-alt {
  position: absolute; inset: 0;
  opacity: 0;
}
.zq-product-card:hover .zq-media img { transform: scale(1.03); }
.zq-product-card:hover .zq-media .zq-img-alt { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .zq-product-card:hover .zq-media img { transform: none; }
}
.zq-product-card .zq-title {
  font-family: var(--zq-font-body);
  font-weight: 600;
  font-size: var(--zq-size-step-0);
  margin: var(--zq-space-2) 0 0;
}
.zq-product-card .zq-title a { color: var(--zq-color-ink); text-decoration: none; }
.zq-product-card .zq-title a:hover { color: var(--zq-color-accent-deep); text-decoration: underline; }
.zq-product-card .zq-price { color: var(--zq-color-ink-soft); margin-top: calc(var(--zq-space-1) / 2); }

/* ---------- Forms ---------- */
.zq-input, input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], select, textarea {
  font: inherit;
  color: var(--zq-color-ink);
  background: var(--zq-color-surface);
  border: 1px solid var(--zq-color-line);
  border-radius: var(--zq-radius-base);
  padding: var(--zq-space-2);
  width: 100%;
  transition: border-color var(--zq-motion-fast) var(--zq-motion-ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--zq-color-ink-soft); }
input:focus, select:focus, textarea:focus {
  border-color: var(--zq-color-accent-deep);
  outline: none;
  box-shadow: 0 0 0 1px var(--zq-color-accent-deep); /* focus ring, not a glow */
}
label { display: block; font-size: var(--zq-size-step--1); font-weight: 600; margin-bottom: calc(var(--zq-space-1) / 2); }

/* ---------- Tables (spec tables) ---------- */
.zq-spec-table { width: 100%; border-collapse: collapse; font-size: var(--zq-size-step--1); }
.zq-spec-table th, .zq-spec-table td {
  text-align: left;
  padding: var(--zq-space-2) var(--zq-space-2);
  border-bottom: 1px solid var(--zq-color-line);
  vertical-align: top;
}
.zq-spec-table th { color: var(--zq-color-ink-soft); font-weight: 500; width: 38%; }

/* ---------- Notices ---------- */
.zq-notice {
  border-left: 3px solid var(--zq-color-line);
  background: var(--zq-color-surface);
  padding: var(--zq-space-2) var(--zq-space-3);
  border-radius: var(--zq-radius-base);
}
.zq-notice--success { border-left-color: var(--zq-color-success); }
.zq-notice--alert { border-left-color: var(--zq-color-alert); }

/* ---------- Hairline index rows (typographic category index) ---------- */
.zq-index { list-style: none; margin: 0; padding: 0; }
.zq-index li { border-top: 1px solid var(--zq-color-line); }
.zq-index li:last-child { border-bottom: 1px solid var(--zq-color-line); }
.zq-index a {
  display: grid;
  grid-template-columns: 3ch 1fr auto;
  gap: var(--zq-space-4);
  align-items: baseline;
  padding: var(--zq-space-3) 0;
  text-decoration: none;
  color: var(--zq-color-ink);
}
.zq-index .zq-index__num {
  font-family: var(--zq-font-display);
  font-feature-settings: "onum" 1;
  color: var(--zq-color-ink-soft);
}
.zq-index .zq-index__name {
  font-family: var(--zq-font-display);
  font-size: var(--zq-size-step-3);
  transition: color var(--zq-motion-fast) var(--zq-motion-ease);
}
.zq-index a:hover .zq-index__name { color: var(--zq-color-accent-deep); }
.zq-index .zq-index__hint { color: var(--zq-color-ink-soft); font-size: var(--zq-size-step--1); }

/* ---------- Announcement bar ---------- */
.zq-announce {
  background: var(--zq-color-ink);
  color: var(--zq-color-canvas);
  text-align: center;
  font-size: var(--zq-size-step--1);
  padding: calc(var(--zq-space-1) * 1.25) var(--zq-space-3);
}
.zq-announce a { color: inherit; }