/*
  rooc-sticky-column.css — przyklejona (sticky) prawa kolumna karty produktu
  (nagłówek + ceny + konfigurator + „Dodaj do koszyka") na szerokim ekranie.

  Ładowany TYLKO na kartach produktu z konfiguratorem ROOC (tag <link> w
  `configurator.tpl`, który renderuje się wyłącznie, gdy produkt ma efektywną
  konfigurację) — więc reguła nie dotyka layoutu produktów bez konfiguratora.

  Włączany i sterowany przez `rooc-sticky-column.js`: to JS dokłada klasę
  `.rooc-sticky-on` i ustawia inline `top` (90px, gdy kolumna mieści się w
  oknie; wartość UJEMNA = zakotwiczenie do DOŁU, gdy kolumna jest WYŻSZA niż
  okno — wtedy to dół kolumny, czyli „Dodaj do koszyka", zostaje w zasięgu
  wzroku, zamiast przyklejać górę i wypychać przycisk pod widoczny obszar;
  to był dokładnie problem „rzeźni" przy wysokim konfiguratorze). Bez JS
  kolumna zostaje statyczna — bezpieczny brak efektu, nie zepsuty layout.

  Tylko desktop (>= 992px): niżej kolumny i tak układają się jedna pod drugą,
  gdzie sticky nie ma sensu.

  WYMÓG sticky w kolumnie flex: element NIE może być rozciągnięty do wysokości
  wiersza (stąd `align-self: flex-start`) — inaczej „sticky" nie ma o ile się
  przesuwać. Łańcuch przodków na tym Warehouse jest czysty (zero
  `overflow:hidden/auto` powyżej — zweryfikowane na żywo), więc natywne
  `position: sticky` działa tu bez dodatkowych obejść.
*/
@media (min-width: 992px) {
    .col-product-info.rooc-sticky-on {
        align-self: flex-start;
        position: -webkit-sticky;
        position: sticky;
        /* `top` ustawiane inline przez rooc-sticky-column.js (dynamiczne). */
    }
}

/*
  Układ karty produktu z konfiguratorem ROOC — kolejność bloków.

  Problem: na mobile kolumny stackują się w kolejności źródłowej DOM. Żeby na
  telefonie było: galeria -> blok konfiguratora -> opis -> zakładki, w
  `product.tpl` (child theme) opis+zakładki są OSOBNĄ kolumną (`.rooc-desc-col`)
  umieszczoną w DOM PO kolumnie konfiguratora (`.col-product-info`). Dzięki temu
  mobile (grid wyłączony, < 768px) daje dokładnie tę kolejność.

  Na desktopie (>= 768px) wracamy do dwóch kolumn przez CSS-grid: galeria (lewa
  góra), opis+zakładki (lewy dół), konfigurator (prawa, span obu wierszy). Grid
  (a nie flex-wrap) świadomie — flex-wrap wypychałby opis pod WYŻSZY z bloków
  wiersza (przy wysokim konfiguratorze zostawałaby pusta luka pod galerią);
  grid stawia opis bezpośrednio pod galerią niezależnie od wysokości
  konfiguratora.

  Szerokości torów z `--rooc-gtc` (ustawiane w product.tpl z pp_img_width /
  pp_content_width), fallback 7fr/5fr. `min-width:0` zdejmuje domyślne minimum
  min-content toru grid (inaczej szeroka galeria/karuzela rozpycha tor i wypycha
  konfigurator poza siatkę — zweryfikowane na żywo). `max-width:none` zdejmuje
  ograniczenie z klas `col-md-*`, których w gridzie nie chcemy. Reguła działa
  tylko na wierszu z klasą `.rooc-product-row` (dodawaną w tpl wyłącznie, gdy
  produkt ma konfigurator), więc nie dotyka pozostałych kart.
*/
@media (min-width: 768px) {
    .product-info-row.rooc-product-row {
        display: grid;
        grid-template-columns: var(--rooc-gtc, minmax(0, 7fr) minmax(0, 5fr));
        grid-template-areas:
            "gallery config"
            "desc    config";
        align-items: start;
        column-gap: 0;
    }
    /* width:100% — bez tego elementy siatki nie wypełniają swoich torów
       (motyw/Bootstrap sprowadza ich szerokość do rozmiaru treści zamiast
       rozciągnięcia do toru — konfigurator wychodził wąski, ~215px). box-sizing
       border-box (globalnie), więc 100% = szerokość toru wraz z paddingiem
       kolumny. max-width:none zdejmuje ograniczenie z col-md-*, min-width:0
       zdejmuje minimum min-content toru. */
    .product-info-row.rooc-product-row > .col-product-image {
        grid-area: gallery;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    .product-info-row.rooc-product-row > .col-product-info {
        grid-area: config;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
    .product-info-row.rooc-product-row > .rooc-desc-col {
        grid-area: desc;
        width: 100%;
        max-width: none;
        min-width: 0;
    }
}