/*
Theme Name: Sweetcake Child
Template: sweetcake
Version: 1.0
*/

@import url("../sweetcake/style.css");


/* =====================================================================
   SINGLE PRODUCT - układ dwukolumnowy + sticky prawa kolumna
   ---------------------------------------------------------------------
   Struktura budowana w functions.php:

     div.product
       └ .sweetcake-child-product-columns        <- siatka 2 kolumn
           ├ .sweetcake-child-product-column-left
           │    ├ galeria
           │    └ .sweetcake-child-short-description
           └ div.summary.entry-summary           <- sticky
       ├ div.woocommerce-tabs                    <- pełna szerokość
       └ section.related.products

   Kontener kolumn jest blokiem odniesienia dla position:sticky, więc prawa
   kolumna opiera się dokładnie o .woocommerce-tabs i nie schodzi niżej.

   Selektory są celowo o stopień bardziej szczegółowe niż reguły WooCommerce
   (.woocommerce div.product div.images { float:left; width:48% }), żeby
   nadpisanie nie zależało od kolejności wczytywania arkuszy.
   ===================================================================== */

body.single-product {

    /* Odstęp sticky od górnej krawędzi ekranu.
       Header SweetCake (nd-shortcodes) domyślnie NIE jest przyklejony -
       przewija się razem ze stroną - więc wystarczy mały "oddech".
       Jeżeli włączysz sticky header (Wygląd > Dostosuj > Header >
       Header 2 > Sticky), zwiększ tę wartość o wysokość paska, np. 130px. */
    --sc-sticky-top: 30px;

    /* Odstęp między kolumnami (48% + 48% + 4% = 100%). */
    --sc-col-gap: 4%;
}

/* Pasek administratora WP (32px na desktopie) */
body.single-product.admin-bar {
    --sc-sticky-top: 62px;
}

/* Motyw ustawia overflow-x:hidden na <body> (sweetcake/style.css:250).
   `clip` daje ten sam efekt wizualny, ale nie tworzy kontekstu przewijania,
   który w części przeglądarek potrafi zablokować position:sticky.
   Starsze przeglądarki po prostu zignorują tę deklarację. */
body.single-product.nicdark_body {
    overflow-x: clip;
}


/* ---------------------------------------------------------------------
   SKRÓCONY OPIS POD GALERIĄ
   --------------------------------------------------------------------- */

.sweetcake-child-short-description {
    margin-top: 20px;
}

/* Odtworzenie formatowania z poprzedniej lokalizacji.
   Gdy opis był w prawej kolumnie, akapity stylowała reguła nd-shortcodes
   (customizer/styles/custom-style-4.php, sekcja "top description"):
       .woocommerce.woocommerce-page .product.type-product
       .summary.entry-summary div p { margin: 20px 0px; }
   Po przeniesieniu opisu poza .summary przestała działać - poniżej jej
   odpowiednik dla nowej lokalizacji. Porównanie computed styles starej
   i nowej pozycji pokazało, że to jedyna różnica (font, kolor,
   interlinia i marginesy wrappera są dziedziczone tak samo). */
.sweetcake-child-short-description p {
    margin: 20px 0px;
}

/* Odpowiednik reguły z Twojego custom CSS (.entry-summary a img.alignleft) */
.sweetcake-child-short-description a img.alignleft {
    float: unset;
    margin: 0px 10px;
}


/* ---------------------------------------------------------------------
   DESKTOP / TABLET (>= 768px) - dwie kolumny + sticky
   768px to breakpoint zgodny z motywem (nd_options_container 748px)
   i z domyślnym układem WooCommerce.
   --------------------------------------------------------------------- */
@media only screen and (min-width: 768px) {

    body.single-product div.product .sweetcake-child-product-columns {
        display: grid;
        grid-template-columns: minmax(0, 48%) minmax(0, 48%);
        column-gap: var(--sc-col-gap);
        align-items: start;
    }

    /* LEWA KOLUMNA - galeria + skrócony opis */
    body.single-product div.product .sweetcake-child-product-column-left {
        grid-column: 1;
        min-width: 0;
    }

    body.single-product div.product .sweetcake-child-product-columns div.images,
    body.single-product div.product .sweetcake-child-product-columns .woocommerce-product-gallery {
        float: none;
        width: auto;
        margin: 0;
    }

    /* PRAWA KOLUMNA - sticky w obrębie kontenera kolumn.
       align-self:start jest konieczne - element rozciągnięty na całą
       wysokość kontenera nie miałby się gdzie przykleić. */
    body.single-product div.product .sweetcake-child-product-columns > div.summary {
        grid-column: 2;
        float: none;
        width: auto;
        margin: 0;
        min-width: 0;
        align-self: start;
        position: sticky;
        top: var(--sc-sticky-top);
    }
}


/* ---------------------------------------------------------------------
   MOBILE (<= 767px) - jedna kolumna, bez sticky
   WooCommerce trzyma 48% + float także na małych ekranach, więc trzeba
   to jawnie wyzerować.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    body.single-product div.product .sweetcake-child-product-columns div.images,
    body.single-product div.product .sweetcake-child-product-columns .woocommerce-product-gallery,
    body.single-product div.product .sweetcake-child-product-columns > div.summary {
        position: static;
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        top: auto;
    }

    body.single-product div.product .sweetcake-child-product-columns .woocommerce-product-gallery {
        margin-bottom: 20px;
    }

    /* OPCJONALNIE: jeżeli na telefonie skrócony opis ma być POD blokiem
       "dodaj do koszyka" (a nie zaraz pod zdjęciem), odkomentuj poniższe.
       display:contents "rozpuszcza" lewą kolumnę, dzięki czemu order
       działa na galerii, opisie i prawej kolumnie jednocześnie.

    body.single-product div.product .sweetcake-child-product-columns {
        display: flex;
        flex-direction: column;
    }
    body.single-product div.product .sweetcake-child-product-column-left { display: contents; }
    body.single-product div.product .sweetcake-child-product-columns .woocommerce-product-gallery { order: 1; }
    body.single-product div.product .sweetcake-child-product-columns > div.summary { order: 2; }
    body.single-product div.product .sweetcake-child-short-description { order: 3; }
    */
}