/* ─────────────────────────────────────────────────────────────
   Zadanie — component interaction states
   Hover / focus / error behaviours that inline styles can't express.
   Keyed to the class names the React components emit.
   ───────────────────────────────────────────────────────────── */

/* ---- Button ---- */
.zd-btn { -webkit-tap-highlight-color: transparent; }

.zd-btn--primary:not(:disabled):not([aria-disabled="true"]):hover {
  background: color-mix(in oklab, var(--scheme-button) 86%, #000);
  border-color: color-mix(in oklab, var(--scheme-button) 86%, #000);
}
.zd-btn--secondary:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--accent);
  color: var(--accent);
}
.zd-btn--link:not(:disabled):not([aria-disabled="true"]):hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.zd-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Fields ---- */
.zd-field__input:focus {
  border-color: var(--scheme-text);
  outline: none;
}
.zd-field--underline .zd-field__input:focus {
  border-bottom-color: var(--scheme-text);
}
.zd-field__input::placeholder { color: var(--text-muted); opacity: 0.7; }
.zd-field--error .zd-field__input { border-color: var(--error); }
.zd-field--error .zd-field__input:focus { border-color: var(--error); }

/* ---- Product card hover : whisper zoom of the image ---- */
.zd-product__frame img,
.zd-product__frame .zd-product__ph {
  transition: transform var(--dur-slow) var(--ease-out);
}
.zd-product:hover .zd-product__frame img,
.zd-product:hover .zd-product__frame .zd-product__ph {
  transform: scale(1.04);
}

/* Fix: obrazy w kartach mają wypełniać ramkę (cover). Wysokość %
   nie rozwiązuje się względem aspect-ratio → wymuszamy absolutne inset:0. */
.zd-product__frame { position: relative; }
.zd-product__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* To samo dla galerii na stronie produktu. */
[data-gallery] > div { position: relative; }
[data-gallery] > div > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}