/* ==========================================================================
   COMPLETE THE LOOK
   ========================================================================== */

.complete-look {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.complete-look__header { margin-bottom: var(--space-md); }
.complete-look__header p { font-size: var(--fs-small); color: var(--color-text-muted); margin-bottom: var(--space-sm); }

.complete-look__items {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
}
.complete-look__items::-webkit-scrollbar { display: none; }

.complete-look__item {
  flex: 0 0 130px;
  text-align: center;
}
.complete-look__item-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-white);
  margin-bottom: var(--space-xs);
}
.complete-look__item-media img { width: 100%; height: 100%; object-fit: cover; }
.complete-look__item-media a { display: block; width: 100%; height: 100%; }
.complete-look__item-name { font-size: var(--fs-xs); }
.complete-look__item-price { font-size: var(--fs-xs); font-weight: 500; }

@media (min-width: 768px) {
  .complete-look { display: flex; align-items: center; gap: var(--space-xl); }
  .complete-look__header { margin-bottom: 0; flex: 0 0 220px; }
  .complete-look__items { flex: 1; }
}

/* ==========================================================================
   PRODUCT TABS — Szczegóły / FAQ / Wysyłka i zwroty
   ========================================================================== */

.product-tabs__nav {
  display: flex;
  gap: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.product-tabs__nav::-webkit-scrollbar { display: none; }
.product-tabs__nav button {
  white-space: nowrap;
  padding-block: var(--space-sm);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
}
.product-tabs__nav button.is-active {
  color: var(--color-black);
  border-color: var(--color-black);
}

.product-tabs__panel { display: none; padding-block: var(--space-lg); }
.product-tabs__panel.is-active { display: block; }

.product-tabs__description {
  width: 100%;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--color-text);
}
.product-tabs__description > * + * { margin-top: var(--space-md); }
.product-tabs__description ul,
.product-tabs__description ol { padding-left: 1.25em; }
.product-tabs__description ul { list-style: disc; }
.product-tabs__description ol { list-style: decimal; }
/* Wymuszenie tej samej czcionki nagłówków co reszta strony — treść z edytora
   WYSIWYG (zwłaszcza wklejona z Worda/Google Docs) czasem niesie własne style. */
.product-tabs__description h1,
.product-tabs__description h2,
.product-tabs__description h3,
.product-tabs__description h4 {
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
  color: var(--color-text);
}

.spec-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.spec-row { display: flex; justify-content: space-between; font-size: var(--fs-small); padding-block: var(--space-xs); border-bottom: 1px solid var(--color-border); }
.spec-row dt { color: var(--color-text-muted); }
.spec-row dd { font-weight: 500; text-align: right; }

.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-item__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-sm);
  font-size: var(--fs-small);
  text-align: left;
}
.accordion-item__trigger .plus { transition: transform var(--transition-fast); }
.accordion-item.is-open .plus { transform: rotate(45deg); }
.accordion-item__panel {
  max-height: 0;
  overflow: hidden;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  transition: max-height var(--transition-base);
}
.accordion-item.is-open .accordion-item__panel { padding-bottom: var(--space-sm); }

@media (min-width: 768px) {
  .product-tabs__panel--details { display: grid; }
  .product-tabs__panel--details.is-active { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
}