/**
 * Hockey Store — warstwa systemowa
 * =================================
 * Ladowana jako OSTATNI arkusz motywu (patrz hs_enqueue_assets w functions.php).
 * Zawiera poprawki wdrozone po audycie UI/UX z 06.08.2026.
 *
 * ARCHITEKTURA KASKADY — przeczytaj przed edycja
 * ----------------------------------------------
 * W CSS style BEZ warstwy maja wyzszy priorytet niz style W warstwie.
 * WooCommerce Blocks, FiboSearch i Lumise nie uzywaja @layer, wiec sa
 * niewarstwowe. Gdyby caly CSS motywu trafil do @layer, motyw zaczalby
 * PRZEGRYWAC z wtyczkami. Dlatego:
 *
 *   - @layer hs.tokens / hs.base / hs.components  -> wlasne style motywu,
 *     porzadkowane miedzy soba, bez !important
 *   - sekcja NIEWARSTWOWA na koncu pliku          -> wylacznie nadpisania
 *     CSS wtyczek; kazda regula z komentarzem, ktora wtyczke nadpisuje
 *
 * Nie przenos regul z sekcji niewarstwowej do warstw — przestana dzialac.
 *
 * BREAKPOINTY (ujednolicone, patrz audyt P2 #18)
 * ----------------------------------------------
 *   600px  — telefon / tablet pionowo
 *   782px  — breakpoint paska admina WP, tu tez zwijanie kolumn
 *  1024px  — tablet poziomo / maly laptop
 * Nie dodawaj nowych wartosci. Stare 900/1020/420 sa wygaszane.
 */

@layer hs.tokens, hs.base, hs.components;

/* ============================================================
   TOKENY
   ============================================================ */
@layer hs.tokens {

  :root {
    /* Paleta bazowa — jedyne zrodlo prawdy, zgodne z DESIGN.md */
    --hs-navy:      #14213D;
    --hs-graphite:  #334155;
    --hs-ice:       #F4F7FA;
    --hs-white:     #FFFFFF;
    --hs-blue:      #3F6E8C;
    --hs-copper:    #C48A3A;
    --hs-border:    #D9E2EA;

    /* Warianty pochodne (--hs-copper-hover, --hs-blue-hover, --hs-navy-soft,
       --hs-surface-alt, --hs-border-soft, --hs-copper-tint) sa definiowane
       w site.css — tam maja statyczne fallbacki dla przegladarek bez
       color-mix(). NIE powielaj ich tutaj: system.css laduje sie ostatni,
       wiec nadpisalby fallbacki wersja bez zabezpieczenia. */

    /* Focus — jeden system dla calego serwisu (audyt P2 #20) */
    --hs-focus-color:   var(--hs-blue);
    --hs-focus-width:   3px;
    --hs-focus-offset:  2px;
    /* rgba() zamiast color-mix() — dziala wszedzie, a wartosc jest stala */
    --hs-focus-halo:    0 0 0 4px rgba(63, 110, 140, .22);

    /* Minimalny cel dotykowy — DESIGN.md wymaga 44px */
    --hs-tap: 44px;
  }
}

/* ============================================================
   BAZA — dostepnosc, typografia, ruch
   ============================================================ */
@layer hs.base {

  /* --- Focus widoczny na WSZYSTKIM, co interaktywne (P0 #2, P2 #20) --- */
  :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--hs-focus-width) solid var(--hs-focus-color);
    outline-offset: var(--hs-focus-offset);
    border-radius: 4px;
  }

  /* Nigdy nie gasimy focusu bez podania zamiennika */
  :focus:not(:focus-visible) { outline: none; }

  /* --- Cele dotykowe min. 44px (P1 #12) ---
     inline-flex + min-height powieksza obszar klikniecia bez zmiany
     rytmu wizualnego; padding poziomy daje zapas w osi X. */
  .hs-topbar a,
  .hs-category-nav a,
  .hs-footer a,
  .hs-footer .wp-block-navigation-item__content {
    min-height: var(--hs-tap);
    display: inline-flex;
    align-items: center;
    padding-inline: 2px;
  }

  /* Stopka: linki w kolumnach sa jeden pod drugim — kompensujemy
     wieksza wysokosc mniejszym odstepem, zeby stopka nie urosla. */
  .hs-footer .wp-block-navigation__container { gap: 0; }

  .wp-element-button,
  .wp-block-button__link,
  .button {
    min-height: var(--hs-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Typografia plynna (P2 #19) ---
     theme.json ma typography.fluid:true, ale CSS motywu omijal go
     sztywnymi pikselami. Tu przywracamy skalowanie na kluczowych
     poziomach; pojedyncze font-size:NNpx w marketplace.css sa
     stopniowo wygaszane. */
  .hs-section > h2,
  .hs-section--surface > h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

  .hs-card h3,
  .wc-block-product .wp-block-post-title { font-size: clamp(0.95rem, 1.1vw, 1.0625rem); }

  /* --- Ograniczenie ruchu (P2 #21) ---
     site.css mial to tylko dla .hs-card; marketplace.css i product.css
     nie mialy wcale. Tu obejmujemy calosc. */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: .001ms !important;   /* !important konieczny:
         nadpisuje inline i keyframes wtyczek */
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    .hs-card:hover,
    .wc-block-product:hover { transform: none; }
  }
}

/* ============================================================
   KOMPONENTY
   ============================================================ */
@layer hs.components {

  /* --- STOPKA: naglowki byly niewidoczne (P0 #1) ---
     theme.json ustawia elements.heading.color.text na #14213D globalnie.
     Stopka ma granatowe tlo, wiec naglowki mialy kontrast 1:1. */
  .hs-footer :is(h1, h2, h3, h4, h5, h6),
  .hs-footer .wp-block-heading {
    color: var(--hs-white);
  }

  .hs-footer a:hover { color: var(--hs-copper); }

  /* --- NAWIGACJA KATEGORII: sygnal przewijania (P2 #27) ---
     9 kategorii nie miesci sie na telefonie, a pasek nie dawal zadnej
     wskazowki, ze da sie go przewinac. */
  .hs-category-nav {
    position: relative;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .hs-category-nav::-webkit-scrollbar { display: none; }
  .hs-category-menu > li { scroll-snap-align: start; }

  .hs-category-nav::after {
    content: "";
    position: sticky;
    right: 0;
    float: right;
    width: 48px;
    height: 100%;
    min-height: 32px;
    margin-left: -48px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--hs-white) 75%);
  }

  /* --- KATALOG NA MOBILE: filtry pod produktami (P0 #3) ---
     archive-product.html uzywa wp:columns 25/75. core/columns zwija sie
     do pionu przy 781px, a kolumna filtrow jest pierwsza w DOM — przez co
     telefon dostawal 9 grup i 44 pola wyboru PRZED pierwszym produktem.
     Docelowo: drawer (etap 3). Tu: odwrocenie kolejnosci + zwijanie. */
  @media (max-width: 782px) {
    .hs-shop-grid {
      display: flex;
      flex-direction: column;
    }
    .hs-shop-grid > .hs-filters      { order: 2; }
    .hs-shop-grid > .wp-block-column:not(.hs-filters) { order: 1; }

    /* Filtry zwiniete do naglowka — pelna lista po tknieciu */
    .hs-filters > .wp-block-woocommerce-product-filters { display: none; }
    .hs-filters.is-open > .wp-block-woocommerce-product-filters { display: block; }

    .hs-filters > h2 {
      margin: 0;
      cursor: pointer;
      min-height: var(--hs-tap);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .hs-filters > h2::after {
      content: "";
      width: 10px;
      height: 10px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
      transition: transform .15s ease;
    }
    .hs-filters.is-open > h2::after { transform: rotate(-135deg); }
  }

  /* --- KARTA PRODUKTU: hierarchia CTA (audyt P1 #7) ---
     UWAGA: product.css juz porzadkuje te przyciski wlasnoscia `order`
     (kreator = order 1, miedziany; zakup bez projektu = order 2, bialy).
     Nie duplikujemy tego tutaj. Do rozstrzygniecia zostaje wylacznie,
     czy oba przyciski sa rodzenstwem w tym samym kontenerze flex — jesli
     Lumise renderuje swoj przycisk poza form.cart, `order` nie posortuje
     ich wzgledem siebie. Zweryfikowac pomiarem przed dalsza zmiana. */

  /* --- STICKY CTA na mobilnej karcie produktu (P1 #15) ---
     Karta ma ~3000px wysokosci; po zjechaniu do opisu przycisk zakupu
     znikal bezpowrotnie. Pasek pokazuje IntersectionObserver w site.js. */
  .hs-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--hs-white);
    border-top: 1px solid var(--hs-border);
    box-shadow: 0 -2px 12px rgba(20, 33, 61, .10);
  }
  .hs-sticky-cta__price {
    font-weight: 750;
    color: var(--hs-navy);
    white-space: nowrap;
  }
  .hs-sticky-cta__btn {
    flex: 1;
    min-height: var(--hs-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: var(--hs-copper);
    color: var(--hs-navy);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    text-decoration: none;
  }
  .hs-sticky-cta__btn:hover { background: var(--hs-copper-hover); }

  @media (max-width: 782px) {
    .hs-sticky-cta.is-visible { display: flex; }
    /* zapas na pasek, zeby nie zaslanial stopki */
    body.hs-has-sticky-cta .hs-footer { padding-bottom: 76px; }
  }

  /* --- Stan pusty sekcji opinii (P1 #14) --- */
  .hs-reviews-empty {
    padding: 18px;
    border: 1px dashed var(--hs-border);
    border-radius: 10px;
    background: var(--hs-surface-alt);
    color: var(--hs-graphite);
    margin: 0;
  }
}

/* ============================================================
   NADPISANIA CSS WTYCZEK — sekcja NIEWARSTWOWA
   ------------------------------------------------------------
   Ponizsze reguly MUSZA byc poza @layer, bo nadpisuja niewarstwowy
   CSS wtyczek. Kazda z komentarzem, ktora wtyczke dotyczy.
   ============================================================ */

/* FiboSearch — pole wyszukiwania nie mialo ZADNEGO stanu focus (P0 #2).
   Przyczyna: regula .hs-search input { box-shadow:none !important }
   w marketplace.css gasila natywny focus wtyczki, nie dajac zamiennika.
   Wyszukiwarka jest wg DESIGN.md glowna kontrolka nagłowka. */
.hs-search .dgwt-wcas-search-input:focus,
.hs-search .dgwt-wcas-search-input:focus-visible,
.hs-search input[type="search"]:focus,
.hs-search input[type="search"]:focus-visible {
  outline: var(--hs-focus-width) solid var(--hs-focus-color) !important;
  outline-offset: var(--hs-focus-offset) !important;
  box-shadow: var(--hs-focus-halo) !important;
  border-color: var(--hs-blue) !important;
}

/* FiboSearch — przycisk lupy: pozycja i rozmiar.

   UWAGA na pulapke, ktora juz raz wywolala regresje: przycisk jest
   position:absolute, a jego CSS ma JEDNOCZESNIE left:23px i right:0 oraz
   top:21px. W przypadku nadspecyfikowanym wygrywa left i top, wiec samo
   podniesienie min-width/min-height do 48px wypchnelo go w lewo i ponizej
   pola, na pasek kategorii.

   Dlatego kotwiczymy go jawnie do prawej krawedzi (inset: 0 0 0 auto)
   i pozwalamy rozciagnac sie na pelna wysokosc pola zamiast wymuszac
   min-height. Cel dotykowy: 56 x 48 px, powyzej wymaganych 44 px. */
.hs-search .dgwt-wcas-search-submit {
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: 56px !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0 8px 8px 0 !important;
}

/* Tekst w polu nie moze wchodzic pod przycisk. */
.hs-search .dgwt-wcas-search-input,
.hs-search input[type="search"] {
  padding-right: 68px !important;
  border-radius: 8px !important;
}
/* WooCommerce Blocks — sekcja "Podobne produkty" z jednym elementem
   w rzedzie na 4 kolumny wygladala jak blad renderowania (P2 #30).
   Ukrycie steruje klasa dodawana w PHP (hs_hide_thin_related). */
.hs-related-thin .wp-block-woocommerce-related-products { display: none; }


/* ============================================================
   SZABLON "WKRÓTCE" — natywny dla motywu Hockey Store
   ============================================================ */
@layer hs.components {
  .hs-coming-soon {
    box-sizing: border-box;
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    background: var(--hs-ice);
    color: var(--hs-graphite);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .hs-coming-soon__header {
    width: min(100%, 1280px);
    min-height: 5rem;
    border-bottom: 1px solid var(--hs-border);
  }

  .hs-coming-soon__header .wp-block-site-title {
    margin: 0;
    color: var(--hs-navy);
    font-size: 1.125rem;
    font-weight: 750;
  }

  .hs-coming-soon__header a {
    color: inherit;
    text-decoration: none;
  }

  .hs-coming-soon__hero {
    width: min(100%, 1280px);
    margin-block: 0;
    gap: clamp(2rem, 5vw, 5rem);
  }

  .hs-coming-soon__copy {
    max-width: 42rem;
  }

  .hs-coming-soon__copy h1 {
    max-width: 13ch;
    margin: 0 0 1.5rem;
    color: var(--hs-navy);
    font-size: clamp(2.5rem, 6vw, 5.25rem);
    font-weight: 750;
    line-height: 1.03;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .hs-coming-soon__copy p {
    max-width: 58ch;
    margin: 0 0 2rem;
    color: var(--hs-graphite);
    font-size: clamp(1rem, 1.4vw, 1.125rem);
    line-height: 1.6;
  }

  .hs-coming-soon__visual {
    min-height: clamp(22rem, 52vw, 42rem);
    border: 1px solid var(--hs-border);
    border-radius: 16px;
    background:
      url("../images/hero-puck.webp") center / cover no-repeat,
      var(--hs-white);
  }

  .hs-coming-soon__foot {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding-block: 1rem 1.5rem;
    border-top: 1px solid var(--hs-border);
    color: var(--hs-graphite);
  }

  @media (max-width: 782px) {
    .hs-coming-soon {
      display: block;
    }

    .hs-coming-soon__hero {
      gap: 2rem;
      padding-block: 2.5rem;
    }

    .hs-coming-soon__copy h1 {
      font-size: clamp(2.25rem, 12vw, 3.75rem);
    }

    .hs-coming-soon__visual {
      min-height: min(72vw, 25rem);
    }

    .hs-coming-soon__foot {
      margin-top: 1rem;
    }
  }
}


/* Stopka kompaktowa: spójny rytm pionowy po usunięciu parametrów dostawy. */
@layer hs.components {
  .hs-footer.hs-footer--compact {
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }

  .hs-footer--compact .wp-block-columns {
    margin: 0;
  }

  .hs-footer--compact .wp-block-column > * + * {
    margin-block-start: 12px !important;
  }

  .hs-footer--compact h3 {
    margin: 0 0 8px;
  }

  .hs-footer--compact nav.wp-block-navigation {
    margin-block-start: 8px !important;
  }

  .hs-footer--compact .wp-block-navigation__container {
    gap: 0;
  }

  .hs-footer--compact .wp-block-navigation-item__content {
    min-height: 32px;
    line-height: 1.4;
  }

  .hs-footer--compact > .wp-block-separator {
    width: 100% !important;
    max-width: none !important;
    margin: 20px 0 0 !important;
  }

  .hs-footer--compact .hs-footer__bar {
    margin-top: 12px;
  }

  .hs-footer--compact .hs-footer__methods {
    gap: 6px 10px;
  }

  @media (max-width: 782px) {
    .hs-footer--compact .wp-block-navigation-item__content {
      min-height: 44px;
    }
  }
}


/* Nadpisanie rytmu stopki poza warstwami: marketplace.css jest bezwarstwowy. */
.hs-footer.hs-footer--compact nav.wp-block-navigation {
  gap: 0;
  margin-block-start: 8px !important;
}

.hs-footer.hs-footer--compact ul.wp-block-navigation__container {
  gap: 0;
  margin: 0 !important;
}

.hs-footer.hs-footer--compact .hs-footer__bar {
  margin-top: 12px;
}