/**
 * Hockey Store — dolna sekcja strony produktu.
 * =============================================
 * Uklad pionowy zamiast zakladek. Laduje sie po buybox.css.
 *
 * Problem, ktory rozwiazuje: dol strony wygladal jak z innego projektu.
 * Box zakupowy to biala karta z ramka i promieniem 16 px, a panele
 * zakladek nie mialy zadnej powierzchni — goly tekst na tle strony,
 * dziedziczacy entry-content, czyli domyslny styl artykulu WordPressa.
 * Do tego .panel { max-width: 72ch } w kolumnie 1280 px zostawialo prawa
 * polowe pusta.
 *
 * Selektory celowo zaczynaja sie od .single-product div.product — patrz
 * komentarz w buybox.css o specyficznosci woocommerce-blocktheme.css.
 */

.single-product div.product .hs-psections {
  grid-column: 1 / -1;
  margin-top: 48px;
  display: grid;
  gap: 20px;
}

/* --- SEKCJE WIDOCZNE ---------------------------------------------------
   Ta sama powierzchnia co box zakupowy: biala karta, chlodna ramka,
   promien 16 px wg skali z DESIGN.md (sekcje i wieksze bannery). */
.single-product div.product .hs-psection {
  background: var(--hs-white);
  border: 1px solid var(--hs-border);
  border-radius: 16px;
  padding: 28px 32px;
}

.single-product div.product .hs-psection__title {
  margin: 0 0 16px;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  color: var(--hs-navy);
}

/* Szerokosc czytelna, ale bez pustej polowy: tekst dostaje 68ch,
   a sekcja zachowuje pelna szerokosc karty. */
.single-product div.product .hs-psection__body {
  max-width: 68ch;
}

.single-product div.product .hs-psection__body > *:first-child { margin-top: 0; }
.single-product div.product .hs-psection__body > *:last-child { margin-bottom: 0; }

.single-product div.product .hs-psection__body h3 {
  margin: 24px 0 8px;
  font-size: 1.0625rem;
  color: var(--hs-navy);
}

.single-product div.product .hs-psection__body h4 {
  margin: 20px 0 6px;
  font-size: 0.9375rem;
  color: var(--hs-navy);
}

.single-product div.product .hs-psection__body p { margin: 0 0 12px; }

.single-product div.product .hs-psection__body :is(ul, ol) {
  margin: 0 0 12px;
  padding-left: 20px;
}

.single-product div.product .hs-psection__body li { margin: 0 0 6px; }

/* --- Personalizacja: kroki jako rzad, nie jako lista ------------------
   Cztery kroki procesu czytaja sie lepiej poziomo — to sekwencja,
   nie wyliczenie. Numeracja z licznika CSS, bez dekoracyjnych etykiet. */
@media (min-width: 783px) {
  .single-product div.product .hs-psection--hsc_personalization .hs-psection__body > ol {
    counter-reset: hs-step;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: none;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
  }

  .single-product div.product .hs-psection--hsc_personalization .hs-psection__body > ol > li {
    counter-increment: hs-step;
    margin: 0;
    padding: 14px 16px;
    background: var(--hs-surface-alt);
    border-radius: 10px;
    font-size: 0.9375rem;
  }

  .single-product div.product .hs-psection--hsc_personalization .hs-psection__body > ol > li::before {
    content: counter(hs-step);
    display: block;
    margin-bottom: 6px;
    font-weight: 750;
    font-size: 0.8125rem;
    color: var(--hs-blue);
  }
}

/* --- SEKCJE ZWIJANE ---------------------------------------------------
   Informacje referencyjne. Jedna karta, w srodku rozdzielone liniami —
   nizsza waga wizualna niz sekcje widoczne, zgodnie z ich rola. */
.single-product div.product .hs-pref {
  background: var(--hs-white);
  border: 1px solid var(--hs-border);
  border-radius: 16px;
  padding: 4px 32px;
}

.single-product div.product .hs-pref__item + .hs-pref__item {
  border-top: 1px solid var(--hs-border-soft);
}

.single-product div.product .hs-pref__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--hs-navy);
}

.single-product div.product .hs-pref__item > summary::-webkit-details-marker { display: none; }

.single-product div.product .hs-pref__item > summary::after {
  content: "";
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--hs-blue);
  border-bottom: 2px solid var(--hs-blue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}

.single-product div.product .hs-pref__item[open] > summary::after {
  transform: rotate(-135deg);
}

.single-product div.product .hs-pref__body {
  max-width: 68ch;
  padding: 0 0 20px;
}

.single-product div.product .hs-pref__body > *:first-child { margin-top: 0; }
.single-product div.product .hs-pref__body > *:last-child { margin-bottom: 0; }

.single-product div.product .hs-pref__body h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--hs-navy);
}

/* Tabela atrybutow — czytelna siatka zamiast domyslnej tabeli WooCommerce. */
.single-product div.product .hs-pref__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.single-product div.product .hs-pref__body table th,
.single-product div.product .hs-pref__body table td {
  padding: 10px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hs-border-soft);
  font-size: 0.9375rem;
}

.single-product div.product .hs-pref__body table th {
  width: 40%;
  font-weight: 400;
  color: var(--hs-graphite);
}

.single-product div.product .hs-pref__body table td {
  color: var(--hs-navy);
  font-weight: 600;
}

.single-product div.product .hs-pref__body table tr:last-child :is(th, td) {
  border-bottom: 0;
}

/* --- MOBILE ----------------------------------------------------------- */
@media (max-width: 782px) {
  .single-product div.product .hs-psections { margin-top: 32px; gap: 16px; }
  .single-product div.product .hs-psection { padding: 20px; border-radius: 12px; }
  .single-product div.product .hs-pref { padding: 4px 20px; border-radius: 12px; }
}