/**
 * psiako.pl — strona produktu (PDP) + strony treściowe (jak-mierzyć / kontakt / o-nas / dostawa / FAQ).
 * Markup PDP: inc/psiako/product.php. Strony treściowe: inc/psiako/content-pages.php.
 *
 * Nadpisania WC/parenta przez scoping `.single-product X` / `.mbf-single-product X` — bez
 * `!important` (0,2,0+ bije WC 0,1,0; przy równej specyficzności wygrywa kolejnością).
 * Wyjątek: `display:none` chowające domyślne elementy WC ustawiane inline / z `!important` —
 * te zostają z `!important` (docelowo `remove_action`/`wc_get_template` w inc/psiako/).
 *
 * Wszystko na tokenach. Breakpointy: 480 · 768 · 1024 · 1320.
 */

/* ── Zakładki opisu (WC container reset) ── */
.woocommerce-tabs-desc-content { margin: 0 auto; }

.woocommerce-Tabs-panel {
  max-width: 720px;
  margin: 0 auto;
}

/* ── Reset ograniczeń layoutu parenta ── */
.single-product .mbf-main-content,
.single-product .mbf-site-content {
  margin: 0;
  padding: 0;
  max-width: none;
  row-gap: 0;
}

/* scope `.mbf-site-content` — nie łapać `.mbf-container` panelu wyszukiwarki w headerze */
.single-product .mbf-site-content .mbf-container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.mbf-single-product .mbf-single-product-summary-wrap .mbf-single-product-summary {
  display: block;
  grid-template-columns: none;
}

.mbf-single-product .mbf-single-product-summary-wrap {
  padding-top: 0;
}

/* ── Ukrycie domyślnych elementów WC (mamy własne) ──
   Docelowo: `remove_action` / `wc_get_template` zamiast `display:none`. */
.single-product .woocommerce-product-gallery,
.single-product .mbf-breadcrumbs,
.single-product .stock,
.single-product .woocommerce-stock-message,
.single-product .woocommerce-variation-availability,
.single-product .mbf-product-stock-label,
.single-product .mbf-delivery-label,
.single-product .mbf-product-delivery,
.single-product .product_meta,
.single-product .woocommerce-tabs,
.single-product .tagged_as,
.single-product .posted_in,
.single-product .sku_wrapper,
.single-product .woocommerce-variation.single_variation,
.single-product .variations_form .variations,
.single-product .quantity.woocommerce-quantity,
.single-product .reset_variations {
  display: none;
}

/* selecty wariantów + single_variation_wrap + domyślny ATC — zostają w DOM dla JS WC,
   ale wizualnie schowane (bez przestrzeni) */
.single-product .single_variation_wrap,
.single-product .single_add_to_cart_button:not(#psiako-atc-btn) {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  visibility: hidden;
  pointer-events: none;
}

/* ── Breadcrumb ──
   Przepływ inline (NIE flex) — `»` i etykiety siadają na wspólnej linii bazowej.
   `flex + align-items: center` centrował każdy element osobno → mniejszy `»`
   „skakał" w pionie (nierówny ślad). */
.single-product .woocommerce-breadcrumb,
.single-product .psiako-breadcrumb {
  display: block;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--space-3-5) var(--space-6) 0;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: normal;
  color: var(--color-ink-muted);
}

.single-product .woocommerce-breadcrumb a,
.single-product .psiako-breadcrumb a {
  color: var(--color-ink-muted);
  background: none; /* kasuje gradientowe podkreślenie linków z parenta */
  text-decoration: none;
  transition: color var(--transition-fast);
}

@media (hover: hover) {
  .single-product .woocommerce-breadcrumb a:hover,
  .single-product .psiako-breadcrumb a:hover {
  color: var(--color-ink-strong);
}
}

.single-product .woocommerce-breadcrumb span[aria-hidden],
.single-product .psiako-breadcrumb span[aria-hidden] {
  color: var(--color-ink-muted);
}

.single-product .woocommerce-breadcrumb span[aria-current],
.single-product .psiako-breadcrumb span[aria-current] {
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-strong);
}

/* ── Layout produktu — galeria szersza od panelu (klient widzi produkt duży) ── */
.psiako-product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-9);
  max-width: var(--container-wide);
  margin: var(--space-6) auto 0;
  padding: 0 var(--space-6);
}

/* Uwaga: reguły layoutu 2-kolumnowego ≥769px (opis + FAQ do lewej kolumny pod galerię,
   panel zakupu sticky) są w single-product.css — musi wygrać z tamtejszą regułą
   `.psiako-product-desc { grid-column: 1 / -1 }` (ładuje się po product.css). */

/* ── Panel informacji o produkcie ── */
.psiako-product-info {
  display: flex;
  flex-direction: column;
}

.psiako-product-info__brand {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* WC title/price: parent MBF + WC (`div.product p.price` 0,2,2) stylują je agresywnie
   z reguł responsywnych — scoping nie wystarcza, `!important` uzasadnione. */
.single-product .product_title.entry-title {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-2xl) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-tight) !important;
  color: var(--color-ink-strong) !important;
}

.single-product .woocommerce-product-details__short-description p {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--color-ink-muted);
}

.single-product .price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1-5);
  font-size: var(--font-size-3xl) !important;
  font-weight: var(--font-weight-bold) !important;
  color: var(--color-ink-strong) !important;
}

.single-product .price del {
  font-size: var(--font-size-md);
  color: var(--color-ink-muted);
  opacity: 1;
}

.single-product .price ins {
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

.single-product .woocommerce-variation-price .price {
  font-size: var(--font-size-2xl);
}

.psiako-product-info__tax {
  margin-bottom: var(--space-5);
  font-size: var(--font-size-2xs);
  color: var(--color-ink-muted);
}

.psiako-product-info__divider {
  margin: var(--space-5) 0;
  border: none;
  border-top: 2px solid var(--color-border);
}

/* ── Chipy dostawa / stan — ostre, z ramką (spójne z paskiem filtrów na listingu) ── */
.psiako-product-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.psiako-product-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-none);
  border-radius: var(--radius-none);
}

.psiako-product-pill--delivery {
  background: var(--color-surface);
  color: var(--color-ink-strong);
  border: 1px solid var(--color-border);
}

.psiako-product-pill--delivery svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.psiako-product-pill--stock {
  background: var(--color-lowstock-bg);
  color: var(--color-lowstock-text);
}

.psiako-product-pill__dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-lowstock-dot);
  animation: psiako-pulse-dot 2s infinite;
}

@keyframes psiako-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Swatche wariantów ── */
.psiako-swatches { margin-bottom: var(--space-4); }

.psiako-swatches__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2-5);
}

.psiako-swatches__label {
  margin-bottom: 0;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-strong);
}

.psiako-swatches__label span {
  font-weight: var(--font-weight-regular);
  color: var(--color-ink-muted);
}

.psiako-swatches__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.single-product .psiako-swatch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0;
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-none);
  text-transform: none;
  white-space: nowrap;
  color: var(--color-ink-strong);
  background: var(--color-surface);
  background-image: none;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-none);
  box-shadow: none;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.single-product .psiako-swatch:focus {
  color: var(--color-ink-strong);
  background: var(--color-surface);
  border-color: var(--color-ink-strong);
  outline: none;
}

@media (hover: hover) {
  .single-product .psiako-swatch:hover {
  color: var(--color-ink-strong);
  background: var(--color-surface);
  border-color: var(--color-ink-strong);
  outline: none;
}
}

.single-product .psiako-swatch:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.single-product .psiako-swatch.is-active,
.single-product .psiako-swatch.is-active:focus {
  color: var(--color-on-dark);
  background: var(--color-ink-strong);
  border-color: var(--color-ink-strong);
}

@media (hover: hover) {
  .single-product .psiako-swatch.is-active:hover {
  color: var(--color-on-dark);
  background: var(--color-ink-strong);
  border-color: var(--color-ink-strong);
}
}

/* ── Przycisk „dodaj do koszyka" ── */
.psiako-atc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 50px;
  margin-bottom: var(--space-3);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  color: var(--color-on-dark);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-none);
  cursor: pointer;
  transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

@media (hover: hover) {
  .psiako-atc-btn:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
}

.psiako-atc-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-on-dark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.psiako-atc-btn:disabled {
  color: var(--color-ink-muted);
  background: var(--color-border-subtle);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Link do tabeli rozmiarów ── */
.psiako-size-guide-link {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* link „Jak zmierzyć psa" w opisie na PDP */
.psiako-measuring-guide {
  margin: var(--space-3) 0;
  font-size: var(--font-size-sm);
}

.psiako-measuring-guide a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── USP — prosta lista z hairline'ami (bez „kafli z ikonką", które wyglądały generycznie) ── */
.psiako-usp-strip {
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.psiako-usp-strip li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-ink-strong);
}

.psiako-usp-strip li svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Zakładki: opis + tabela rozmiarów ── */
.psiako-product-desc {
  max-width: var(--container-wide);
  margin: var(--space-9) auto 0;
  padding: 0 var(--space-6) var(--space-11);
}

.psiako-product-desc__tabs {
  display: flex;
  margin-bottom: var(--space-7);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 2px solid var(--color-border);
}
.psiako-product-desc__tabs::-webkit-scrollbar { display: none; }

.psiako-product-desc__tab {
  flex-shrink: 0; /* w wąskim `__tabs` (mobile) nie ściskaj — pasek przewija się w poziomie */
  margin-bottom: -2px;
  padding: var(--space-3-5) var(--space-7);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-ink-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}

.psiako-product-desc__tab:focus {
  color: var(--color-ink-strong);
  background: none;
  border-color: transparent;
  outline: none;
}

@media (hover: hover) {
  .psiako-product-desc__tab:hover {
  color: var(--color-ink-strong);
  background: none;
  border-color: transparent;
  outline: none;
}
}

.psiako-product-desc__tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.psiako-product-desc__tab.is-active,
.psiako-product-desc__tab.is-active:focus {
  color: var(--color-accent);
  background: none;
  border-bottom-color: var(--color-accent);
}

@media (hover: hover) {
  .psiako-product-desc__tab.is-active:hover {
  color: var(--color-accent);
  background: none;
  border-bottom-color: var(--color-accent);
}
}

.psiako-product-desc__panel {
  display: none;
  opacity: 0;
}

.psiako-product-desc__panel.is-active {
  display: block;
  animation: psiako-fade-in 0.25s ease forwards;
}

@keyframes psiako-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.psiako-product-desc__short {
  max-width: 720px;
  margin-bottom: var(--space-7);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-ink-strong);
}
.psiako-product-desc__short p { margin-bottom: var(--space-3-5); }
.psiako-product-desc__short strong { color: var(--color-accent); }

.psiako-product-desc__full {
  max-width: 720px;
  margin-bottom: var(--space-7);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-ink-muted);
}

.psiako-product-desc__full p {
  margin-bottom: var(--space-3-5);
  color: var(--color-ink-muted);
}

.psiako-product-desc__full ul {
  margin-bottom: var(--space-4);
  padding-left: var(--space-5);
  line-height: 2.2;
}
.psiako-product-desc__full li::marker { color: var(--color-accent); }

.psiako-product-desc__full strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}

.psiako-product-desc__full h2,
.psiako-product-desc__full h3 {
  margin: var(--space-6) 0 var(--space-2-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-strong);
}

.psiako-product-desc__full .wp-block-group,
.psiako-product-desc__full blockquote {
  margin: var(--space-6) 0 0;
  padding: var(--space-5) var(--space-6);
  color: var(--color-on-dark);
  background: var(--color-accent);
  border-left: none;
  border-radius: var(--radius-none);
}

.psiako-product-desc__full blockquote p,
.psiako-product-desc__full blockquote strong { color: var(--color-on-dark); }

/* ── Tabela rozmiarów ── */
.psiako-size-table {
  width: 100%;
  max-width: 680px;
  margin-top: var(--space-4);
  border-collapse: collapse;
}

.psiako-size-table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-align: left;
  color: var(--color-ink-muted);
  border-bottom: 2px solid var(--color-border);
}

.psiako-size-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-ink-strong);
  border-bottom: 1px solid var(--color-border-subtle);
}

@media (hover: hover) {
  .psiako-size-table tr:hover td { background: var(--color-layout); }
}

.psiako-size-guide-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 680px;
  margin-top: var(--space-5);
  padding: var(--space-5);
  background: var(--color-layout);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
}

.psiako-size-guide-note svg {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin-top: 2px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.psiako-size-guide-note p {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-muted);
}

.psiako-size-guide-note a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ── FAQ produktu ── */
.psiako-product-faq {
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin: 0 auto var(--space-11);
  padding: 0 var(--space-6);
}

.psiako-product-faq__title {
  margin-bottom: var(--space-6);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-strong);
}

.psiako-faq-item {
  overflow: hidden;
  border-bottom: 2px solid var(--color-border);
}

.psiako-faq-item:first-child {
  border-top: 2px solid var(--color-border);
}

.psiako-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  list-style: none;
  user-select: none;
  cursor: pointer;
  color: var(--color-ink-strong);
}
.psiako-faq-item summary::-webkit-details-marker { display: none; }

.psiako-faq-item summary svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform var(--transition-slow);
}
.psiako-faq-item[open] summary svg { transform: rotate(45deg); }

.psiako-faq-item__answer {
  max-width: 100%;
  padding: 0 0 var(--space-5);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-loose);
  color: var(--color-ink-muted);
  overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════════════════
   STRONY TREŚCIOWE (jak mierzyć / kontakt / dostawa / FAQ standalone)
   ═══════════════════════════════════════════════════════════════════ */

.psiako-measure-page,
.psiako-contact-page,
.psiako-delivery-page,
.psiako-faq-page {
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto var(--space-11);
  padding: 0 var(--space-6);
}

.psiako-measure-page__intro,
.psiako-contact-page__intro,
.psiako-delivery-page__intro,
.psiako-faq-page__intro {
  margin-bottom: var(--space-8);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-ink-muted);
}
.psiako-contact-page__intro { margin-bottom: var(--space-7); }

.psiako-delivery-page__intro,
.psiako-faq-page__intro { line-height: var(--line-height-relaxed); }

/* Jak mierzyć psa */
.psiako-measure-section {
  margin-bottom: var(--space-9);
  padding-bottom: var(--space-9);
  border-bottom: 2px solid var(--color-border);
}
.psiako-measure-section:last-of-type { border-bottom: none; }

.psiako-measure-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.psiako-measure-section__title {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-strong);
}

.psiako-measure-section__badge {
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-success-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-none);
}

.psiako-measure-section__body--img-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--space-6);
}
.psiako-measure-section__figure { margin: 0 0 var(--space-5); }
.psiako-measure-section__figure--full { margin-bottom: var(--space-6); }

.psiako-measure-section__figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-none);
}

.psiako-measure-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.psiako-measure-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3-5);
}

.psiako-measure-step__dot,
.psiako-measure-point__letter {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-heading);
  border-radius: var(--radius-none);
  font-weight: var(--font-weight-bold);
  color: var(--color-on-dark);
  background: var(--color-accent);
}

.psiako-measure-step__dot {
  width: 28px;
  height: 28px;
  font-size: var(--font-size-xs);
}

.psiako-measure-point__letter {
  width: 32px;
  height: 32px;
  font-size: var(--font-size-sm);
}

.psiako-measure-step p {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-muted);
}

.psiako-measure-tip,
.psiako-measure-point,
.psiako-measure-smycz__card,
.psiako-delivery-card,
.psiako-delivery-info-box,
.psiako-contact-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
}

.psiako-measure-tip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-1);
  padding: var(--space-2-5) var(--space-3-5);
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
  border-radius: var(--radius-none);
}

.psiako-measure-tip svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-accent);
}

.psiako-measure-points {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.psiako-measure-point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3-5);
  border-radius: var(--radius-none);
}

.psiako-measure-point__body strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-strong);
}

.psiako-measure-point__body p {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-muted);
}

.psiako-measure-smycz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.psiako-measure-smycz__card { padding: var(--space-5); }

.psiako-measure-smycz__width {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-strong);
}

.psiako-measure-smycz__card p {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-muted);
}

.psiako-measure-note,
.psiako-contact-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2-5);
  padding: var(--space-3-5) var(--space-4);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-muted);
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-none);
}
.psiako-measure-note { margin-top: var(--space-2); }

.psiako-measure-note svg,
.psiako-contact-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}

.psiako-measure-note a,
.psiako-contact-note a,
.psiako-delivery-info-box a {
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-strong);
}

/* Kontakt */
.psiako-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.psiako-contact-card { padding: var(--space-5); }

.psiako-contact-card--main {
  background: var(--color-ink-strong);
}

.psiako-contact-card--main .psiako-contact-card__title,
.psiako-contact-card--main .psiako-contact-method__label {
  color: var(--color-on-dark-subtle);
}
.psiako-contact-card--main .psiako-contact-method__value { color: var(--color-on-dark); }
.psiako-contact-card--main .psiako-contact-method__icon { color: var(--color-on-dark-faint); }
.psiako-contact-card--main .psiako-contact-method { border-bottom-color: var(--color-divider-on-dark); }

.psiako-contact-card__title {
  margin-bottom: var(--space-3-5);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.psiako-contact-card__title--spaced { margin-top: var(--space-5); }

.psiako-contact-method {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2-5) 0;
  text-decoration: none;
  border-bottom: 1px solid var(--color-divider);
  transition: opacity var(--transition-fast);
}
.psiako-contact-method:last-child { border-bottom: none; }

@media (hover: hover) {
  .psiako-contact-method:not(.psiako-contact-method--static):hover { opacity: 0.75; }
}

.psiako-contact-method__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-accent);
}

.psiako-contact-method__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0-5);
}

.psiako-contact-method__label {
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.psiako-contact-method__value {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  color: var(--color-ink-strong);
}

.psiako-contact-socials {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.psiako-contact-social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-strong);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: color var(--transition-fast);
}
.psiako-contact-social:last-child { border-bottom: none; }

@media (hover: hover) {
  .psiako-contact-social:hover { color: var(--color-accent); }
}

/* Dostawa i zwroty */
.psiako-delivery-page__section { margin-bottom: var(--space-9); }

.psiako-delivery-page__section-title,
.psiako-faq-page__section-title {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2-5);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-border);
}
.psiako-faq-page__section-title { margin-bottom: var(--space-1); }

.psiako-delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.psiako-delivery-card { padding: var(--space-4); }

.psiako-delivery-card__label {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-strong);
}

.psiako-delivery-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.psiako-delivery-card__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
}

.psiako-delivery-card__price {
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  color: var(--color-ink-strong);
}

.psiako-delivery-info-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
}

.psiako-delivery-info-box__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}

.psiako-delivery-info-box p {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  color: var(--color-ink-muted);
}
.psiako-delivery-info-box p:last-child { margin-bottom: 0; }

.psiako-delivery-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.psiako-delivery-contact__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2-5) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-on-dark);
  background: var(--color-ink-strong);
  border-radius: var(--radius-none);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

@media (hover: hover) {
  .psiako-delivery-contact__item:hover { opacity: 0.85; }
}

.psiako-delivery-contact__note {
  width: 100%;
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
}

/* FAQ standalone */
.psiako-faq-page__section { margin-bottom: var(--space-8); }

/* ═══ Related / Upsells ═══ */
.psiako-related {
  max-width: var(--container-wide);
  margin: 0 auto var(--space-12);
  padding: 0 var(--space-6);
}

.psiako-related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.psiako-related__kicker {
  margin-bottom: var(--space-1);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.psiako-related__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-strong);
}

.psiako-related__link {
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  text-decoration: underline;
}

/* „Kratownica" podobnych produktów — 1:1 jak bestsellery na stronie głównej / PLP */
.psiako-related__grid {
  display: grid;

  /* liczba kolumn = liczba produktów (1–4, `--related-count` inline z product.php) —
     bez pustej komórki „kratownicy" gdy zestaw ma 2–3 pozycje */
  grid-template-columns: repeat(var(--related-count, 4), minmax(0, 1fr));
  border-top: 2px solid var(--color-border);
  border-left: 2px solid var(--color-border);
}

.psiako-related-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  transition: background var(--transition-base);
}

@media (hover: hover) {
  .psiako-related-card:hover { background: var(--color-layout); }
}

.psiako-related-card__img {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
  text-decoration: none;
}

.psiako-related-card__img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
  transition: transform var(--transition-image);
}

@media (hover: hover) {
  .psiako-related-card:hover .psiako-related-card__img img { transform: scale(1.04); }
}

.psiako-related-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
}

.psiako-related-card__cat {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.psiako-related-card__name {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-ink-strong);
}

.psiako-related-card__name a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .psiako-related-card:hover .psiako-related-card__name a { color: var(--color-accent); }
}

.psiako-related-card__price {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-strong);
}

.psiako-related-card__btn {
  display: block;
  width: 100%;
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-align: center;
  text-decoration: none;
  color: var(--color-on-dark);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-none);
  transition: background var(--transition-fast);
}

@media (hover: hover) {
  .psiako-related-card:hover .psiako-related-card__btn { background: var(--color-accent-hover); }
}

/* ═══════════════════════════════════════════════════════════════════
   Strona „O nas" (/o-nas/) — .psiako-aboutp*
   ═══════════════════════════════════════════════════════════════════ */
.psiako-aboutp { max-width: 760px; }

.psiako-aboutp__intro {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-7);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-ink-muted);
  font-size: var(--font-size-base);
  line-height: var(--line-height-loose);
}

.psiako-aboutp__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  margin-bottom: var(--space-8);
}

.psiako-aboutp__section {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 var(--space-5);
  align-items: start;
}

.psiako-aboutp__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-top: var(--space-1);
  background: var(--color-layout);
  border-radius: var(--radius-none);
  color: var(--color-accent);
}

.psiako-aboutp__body h2 {
  margin: 0 0 var(--space-2);
  color: var(--color-accent);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.psiako-aboutp__body p {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
}

.psiako-aboutp__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-layout);
  border-radius: var(--radius-none);
}

.psiako-aboutp__cta-text {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.psiako-aboutp__cta-text strong { color: var(--color-accent); }

.psiako-aboutp__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.psiako-aboutp__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2-5) var(--space-5);
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-primary-contrast);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

@media (hover: hover) {
  .psiako-aboutp__cta-btn:hover {
  opacity: 0.85;
  color: var(--color-primary-contrast);
}
}

.psiako-aboutp__cta-btn--outline {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

@media (hover: hover) {
  .psiako-aboutp__cta-btn--outline:hover {
  background: var(--color-layout);
  color: var(--color-accent);
}
}

/* ── Responsywność ── */
@media (max-width: 600px) {
  .psiako-measure-section__body--img-right { grid-template-columns: 1fr; }
  .psiako-measure-section__body--img-right .psiako-measure-section__figure { order: -1; }
  .psiako-contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .psiako-delivery-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .psiako-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .psiako-related__grid { grid-template-columns: minmax(0, 1fr); }
  .psiako-related-card__body { padding: var(--space-4); }
}

@media (max-width: 768px) {
  .psiako-product-layout {
    /* `minmax(0, 1fr)` nie `1fr` — inaczej szeroki obrazek galerii (img width="1500")
       rozpycha kolumnę ponad viewport → cała karta produktu „przesunięta w bok"
       (widać na legowiskach, na wąskich zdjęciach smyczy nie). */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    margin-top: var(--space-4);
    padding: 0 var(--space-4);
  }

  .psiako-gallery,
  .psiako-gallery__main,
  .psiako-gallery__thumbs {
    min-width: 0;
    max-width: 100%;
  }

  .single-product .product_title.entry-title { font-size: var(--font-size-xl) !important; }
  .single-product .price { font-size: var(--font-size-2xl) !important; }
  .psiako-product-desc { padding: 0 var(--space-4) var(--space-9); }
  .psiako-product-faq { padding: 0 var(--space-4); }
  .psiako-related { padding: 0 var(--space-4); }

  .psiako-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Zakładki PDP na mobile: 3 nie mieszczą się w rzędzie → układ pionowy,
     jedna pod drugą, każda na całą szerokość. Aktywna = akcent + pasek z lewej. */
  .psiako-product-desc__tabs {
    flex-direction: column;
    margin-bottom: var(--space-5);
    overflow: visible;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-none);
  }

  .psiako-product-desc__tab {
    width: 100%;
    margin-bottom: 0;
    padding: var(--space-3-5) var(--space-4);
    text-align: left;
    white-space: normal;
    border-bottom: 1px solid var(--color-border);
    box-shadow: inset 3px 0 0 transparent;
    transition: color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  }

  .psiako-product-desc__tabs .psiako-product-desc__tab:last-child {
    border-bottom: 0;
  }

  .psiako-product-desc__tab.is-active,
  .psiako-product-desc__tab.is-active:focus {
    background: var(--color-layout);
    border-bottom-color: var(--color-border-subtle);
    box-shadow: inset 3px 0 0 var(--color-accent);
  }
}

@media (max-width: 480px) {
  .psiako-measure-smycz { grid-template-columns: 1fr; }

  .psiako-aboutp__section { grid-template-columns: 1fr; }

  .psiako-aboutp__icon {
    width: 44px;
    height: 44px;
  }

  .psiako-aboutp__cta {
    flex-direction: column;
    align-items: flex-start;
  }
}