/*
Theme Name: Alicja w krainie szycia
Theme URI: https://alicjawkrainieszycia.pl
Description: Motyw potomny Blocksy - paleta i typografia marki "Alicja w krainie szycia".
Author: MIR-KOR
Template: blocksy
Version: 1.1.1
Text Domain: alicja-child
*/

/* ==========================================================================
   1. TOKENY MARKI
   Kolory zdjete z plakatu. Roz jest chlodny (mauve), NIE ceglasty -
   inaczej gryzlby sie ze zdjeciami tkanin.
   ========================================================================== */

:root {
    --a-rose:        #B76E82;   /* akcent glowny - wstazka, przyciski */
    --a-rose-deep:   #96566A;   /* hover */
    --a-plum:        #5C2E3E;   /* naglowki - glebokie sliwkowe, nie czarne */
    --a-ink:         #4B3A3E;   /* tekst */
    --a-muted:       #8C7378;   /* tekst drugorzedny */
    --a-cream:       #FBF5F1;   /* tlo strony - krem z nutą rozu */
    --a-blush:       #F4E6E3;   /* tlo sekcji */
    --a-line:        #E7D2CE;   /* linie, ramki */

    --a-display: "Fraunces", Georgia, serif;
    --a-body:    "Karla", -apple-system, "Segoe UI", sans-serif;

    /* rozstrzelone wersaliki - glowny zabieg typograficzny z plakatu */
    --a-track: 0.18em;
}

/* Mapowanie na zmienne Blocksy (best effort - nizej sa tez
   bezposrednie reguly, ktore zadzialaja niezaleznie od tego) */
:root {
    --theme-palette-color-1: var(--a-rose);
    --theme-palette-color-2: var(--a-rose-deep);
    --theme-palette-color-3: var(--a-plum);
    --theme-palette-color-4: var(--a-ink);
    --theme-palette-color-5: var(--a-line);
    --theme-palette-color-6: var(--a-blush);
    --theme-palette-color-7: var(--a-cream);
    --theme-palette-color-8: #FFFFFF;

    --theme-text-color: var(--a-ink);
    --theme-headings-color: var(--a-plum);
    --theme-link-initial-color: var(--a-rose);
    --theme-link-hover-color: var(--a-rose-deep);
    --theme-border-radius: 2px;
}

/* ==========================================================================
   2. TYPOGRAFIA
   Fraunces ma os "SOFT" i "WONK" - dosownie os miekkosci. Do recznego
   szycia pasuje lepiej niz zimne Playfair.
   ========================================================================== */

body,
.entry-content,
.woocommerce {
    font-family: var(--a-body);
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--a-ink);
    background-color: var(--a-cream);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
    font-family: var(--a-display);
    font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 40;
    font-weight: 400;
    color: var(--a-plum);
    letter-spacing: -0.01em;
    line-height: 1.15;
}

h1, .entry-title { font-size: clamp(2rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }

/* Rozstrzelone wersaliki - menu, etykiety, przyciski */
.header-menu-1 > li > a,
.ct-header [data-id="menu"] a,
.widget-title,
.woocommerce-breadcrumb {
    font-family: var(--a-body);
    font-size: 12.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--a-track);
}

/* ==========================================================================
   3. PRZYCISKI
   Bez zaokraglen (2px). Recznie szyte = proste, precyzyjne krawedzie.
   ========================================================================== */

.ct-button,
.wp-block-button__link,
button[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: var(--a-rose);
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: 14px 30px;
    font-family: var(--a-body);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--a-track);
    transition: background-color .25s ease, transform .25s ease;
}

.ct-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background-color: var(--a-rose-deep);
    color: #fff;
    transform: translateY(-1px);
}

/* wariant obrysowy */
.ct-button-ghost,
.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--a-rose);
    border: 1px solid var(--a-rose);
}

/* ==========================================================================
   4. NAGLOWEK I STOPKA
   ========================================================================== */

header.ct-header,
.ct-header [data-row] {
    background-color: var(--a-cream);
}

.ct-header [data-row="middle"] {
    border-bottom: 1px solid var(--a-line);
}

/* nazwa sklepu, gdy nie ma jeszcze logo graficznego */
.site-title,
.site-title a {
    font-family: var(--a-display);
    font-variation-settings: "SOFT" 60, "WONK" 1;
    font-weight: 400;
    color: var(--a-plum);
    letter-spacing: 0;
}

footer.ct-footer,
.ct-footer [data-row] {
    background-color: var(--a-blush);
    color: var(--a-ink);
}

footer.ct-footer a { color: var(--a-plum); }
footer.ct-footer a:hover { color: var(--a-rose); }

/* ==========================================================================
   5. PRODUKTY
   Karta bez ramki i cienia. Zdjecie tkaniny ma byc jedynym akcentem.
   ========================================================================== */

.woocommerce ul.products li.product,
.wc-block-grid__product {
    background: transparent;
    text-align: left;
}

.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
    border-radius: 2px;
    transition: opacity .3s ease;
}

.woocommerce ul.products li.product:hover img {
    opacity: .88;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--a-display);
    font-variation-settings: "SOFT" 40, "WONK" 1;
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--a-plum);
    padding-top: 14px;
    padding-bottom: 4px;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-family: var(--a-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--a-ink);
}

.woocommerce div.product p.price {
    font-size: 1.5rem;
    color: var(--a-plum);
}

/* wyprzedane - zostaje widoczne jako portfolio, ale wyciszone */
.woocommerce ul.products li.product.outofstock img {
    filter: grayscale(.35);
    opacity: .75;
}

.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
    background-color: var(--a-plum);
    color: #fff;
    border-radius: 2px;
    font-family: var(--a-body);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--a-track);
    padding: 6px 12px;
    min-height: 0;
    min-width: 0;
    line-height: 1.2;
}

.woocommerce div.product .stock {
    font-family: var(--a-body);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: var(--a-track);
    color: var(--a-rose);
}

/* zakladki na karcie produktu */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    padding-left: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom-color: var(--a-rose);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    font-family: var(--a-body);
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--a-track);
    color: var(--a-muted);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--a-plum);
}

/* ==========================================================================
   6. KOSZYK, KASA, KOMUNIKATY
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background-color: var(--a-blush);
    border-top-color: var(--a-rose);
    color: var(--a-ink);
    border-radius: 2px;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--a-rose);
}

.woocommerce table.shop_table,
.woocommerce-checkout .woocommerce-checkout-review-order-table {
    border-color: var(--a-line);
    border-radius: 2px;
}

.woocommerce table.shop_table th {
    font-family: var(--a-body);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: var(--a-track);
    color: var(--a-muted);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea, select {
    border: 1px solid var(--a-line);
    border-radius: 2px;
    background: #fff;
    padding: 12px 14px;
    font-family: var(--a-body);
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--a-rose);
    outline-offset: 1px;
    border-color: var(--a-rose);
}

/* ==========================================================================
   7. DROBIAZGI
   ========================================================================== */

a { color: var(--a-rose); }
a:hover { color: var(--a-rose-deep); }

::selection {
    background: var(--a-rose);
    color: #fff;
}

hr, .wp-block-separator {
    border: none;
    border-top: 1px solid var(--a-line);
}

blockquote {
    border-left: 2px solid var(--a-rose);
    font-family: var(--a-display);
    font-variation-settings: "SOFT" 60, "WONK" 1;
    font-size: 1.25rem;
    color: var(--a-plum);
    font-style: normal;
}

/* dostepnosc - widoczny focus klawiatury */
a:focus-visible,
button:focus-visible,
.ct-button:focus-visible {
    outline: 2px solid var(--a-plum);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   8. OZDOBNIKI SVG
   Pliki leza w /img/ w tym motywie. Zeby wylaczyc dowolny element -
   zakomentuj cala regule (zaznacz i Ctrl+/ albo otocz przez /* ... */).
   ========================================================================== */

/* Delikatny wzor tla calej strony */
body {
    background-image: url('img/tlo.svg');
    background-repeat: repeat;
    background-size: 260px auto;
    background-attachment: fixed;
}

/* Naroznik botaniczny w naglowku - tylko na duzych ekranach,
   na telefonie zabralby miejsce logo */
@media (min-width: 1100px) {
    header.ct-header {
        background-image: url('img/naroznik.svg');
        background-repeat: no-repeat;
        background-position: right -30px top -40px;
        background-size: 220px auto;
    }
}

/* Przekladka nad naglowkami sekcji na stronie glownej */
.awks-sec-head h2::before {
    content: '';
    display: block;
    width: 260px;
    height: 46px;
    margin: 0 auto 10px;
    background: url('img/przekladka.svg') center/contain no-repeat;
}

/* Serce jako separator - klasa do recznego uzycia w tresci:
   <p class="alicja-serce"></p> */
.alicja-serce {
    height: 42px;
    margin: 34px 0;
    background: url('img/serce.svg') center/contain no-repeat;
}

/* Serce zamiast standardowej kreski separatora */
.wp-block-separator.is-style-default,
.entry-content hr {
    border: none;
    height: 40px;
    background: url('img/serce.svg') center/contain no-repeat;
}

/* Naroznik w sekcji "O mnie" na stronie glownej */
.awks-about {
    position: relative;
    overflow: hidden;
}
.awks-about::before {
    content: '';
    position: absolute;
    right: -46px;
    bottom: -46px;
    width: 210px;
    height: 210px;
    background: url('img/naroznik.svg') center/contain no-repeat;
    transform: rotate(180deg);
    opacity: 0.5;
    pointer-events: none;
}

/* Ikony kategorii - dopisz klase do linku kafelka w HTML strony glownej */
.awks-cat.ikona-bluza h3::before,
.awks-cat.ikona-sukienka h3::before,
.awks-cat.ikona-komplet h3::before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 8px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.awks-cat.ikona-bluza h3::before     { background-image: url('img/ikona-bluza.svg'); }
.awks-cat.ikona-sukienka h3::before  { background-image: url('img/ikona-sukienka.svg'); }
.awks-cat.ikona-komplet h3::before   { background-image: url('img/ikona-komplet.svg'); }

/* Stopka - subtelny pasek kwiatowy na gorze */
footer.ct-footer {
    border-top: 1px solid var(--a-line);
}

/* ==========================================================================
   9. KONIEC Z BIALYM TLEM
   Blocksy wstrzykuje tlo naglowka/stopki inline z Customizera -
   dlatego tu jest !important. To jedyne miejsce, gdzie go uzywam.
   ========================================================================== */

header#header [data-row],
header#header [data-row] > .ct-container,
header.ct-header [data-row],
.ct-header [data-row="top"],
.ct-header [data-row="middle"],
.ct-header [data-row="bottom"],
[data-header*="type-1"] [data-row],
.ct-panel-inner,
#offcanvas .ct-panel-inner {
    background-color: var(--a-cream) !important;
    --header-background-color: var(--a-cream);
}

/* pasek przyklejony przy przewijaniu */
[data-sticky] [data-row],
[data-sticky*="yes"] [data-row] {
    background-color: var(--a-cream) !important;
}

/* tresc strony i kontenery Blocksy */
#main-container,
.site-main,
[class*="ct-container"],
.ct-container,
.ct-container-fluid {
    background-color: transparent;
}

body,
#main-container {
    background-color: var(--a-cream) !important;
}

/* biale karty w Woo (koszyk, kasa, konto) na krem */
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-account .woocommerce-MyAccount-navigation {
    background-color: var(--a-blush);
    border-radius: 2px;
}

/* ==========================================================================
   10. LOGO
   Po wgraniu logo w Customizerze tekstowy tytul znika sam.
   Te reguly tylko dopilnowuja rozmiarow.
   ========================================================================== */

.site-logo-container img,
.ct-logo-container img {
    max-height: 78px;
    width: auto;
}

@media (max-width: 999px) {
    .site-logo-container img,
    .ct-logo-container img {
        max-height: 56px;
    }
}

/* jesli zostawisz sam tekst zamiast obrazka */
.site-title,
.site-title a {
    font-family: "Parisienne", var(--a-display);
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--a-plum);
}

/* ==========================================================================
   11. TWARDE POPRAWKI NAGLOWKA
   Sekcja nadpisuje 9 i 10. Blocksy trzyma tlo wiersza w Customizerze -
   jesli ustawisz je tam na #FBF5F1, ta sekcja jest tylko asekuracja.
   ========================================================================== */

header#header,
header#header > div,
header#header [data-row],
header#header [data-row] > .ct-container,
header#header [data-column],
header#header [data-items],
#header .ct-container,
#header .ct-container-fluid,
.ct-header [data-row]::before,
.ct-header [data-row]::after {
    background-color: var(--a-cream) !important;
    background-image: none !important;
}

/* wyjatek: przyciski w naglowku maja zostac rozowe */
header#header .ct-button,
header#header .ct-cart-item,
header#header button.ct-button {
    background-color: var(--a-rose) !important;
}

/* --- TYTUL WITRYNY POD LOGO ---
   Nie usuwam calkiem, tylko chowam wizualnie - czytniki ekranu
   i Google dalej widza nazwe sklepu. */
.site-title,
.site-description,
.ct-logo-container .site-title {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- LOGO WIEKSZE, skoro tytul zniknal --- */
.site-logo-container img,
.ct-logo-container img,
[data-id="logo"] img {
    max-height: 110px !important;
    width: auto !important;
    height: auto !important;
}

@media (max-width: 999px) {
    .site-logo-container img,
    .ct-logo-container img,
    [data-id="logo"] img {
        max-height: 68px !important;
    }
}

/* naglowek nieco nizszy, zeby logo mialo oddech bez pustki */
header#header [data-row="middle"] {
    padding-top: 6px;
    padding-bottom: 6px;
}


/* ==========================================================================
   12. MENU - JEDNA REGULA, BEZ WOJNY Z BLOCKSY

   Historia: Blocksy rysuje efekt najechania pseudoelementem na linku,
   a link ma wysokosc calego paska. Kazda proba dania tla konczyla sie
   rozowym pudlem. Rozwiazanie: zero tel, podkreslenie robi
   text-decoration - dziala na TEKSCIE, nie na pudle.
   ========================================================================== */

/* efekty Blocksy wylaczone */
#header li::before,
#header li::after,
#header li > a::before,
#header li > a::after {
    content: none !important;
    display: none !important;
}

/* zadnych tel w menu, na zadnym poziomie */
#header li,
#header li > a,
#header li > a > span {
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* aktywna pozycja: ciemniejsza + przerywane podkreslenie (scieg) */
#header li[class*="current"] > a {
    color: var(--a-plum) !important;
    text-decoration: underline dashed var(--a-rose) 2px !important;
    text-underline-offset: 7px !important;
}

/* najechanie na nieaktywna: ten sam scieg, bledszy */
#header li:not([class*="current"]) > a:hover {
    color: var(--a-rose) !important;
    text-decoration: underline dashed var(--a-line) 2px !important;
    text-underline-offset: 7px !important;
}

/* ==========================================================================
   13. TYTULY STRON I ODSTEPY
   ========================================================================== */

/* sekcja hero z wielkim tytulem strony - znika wszedzie poza karta produktu */
body:not(.single-product) .hero-section,
.woocommerce-products-header {
    display: none !important;
}

/* jednakowy odstep nad trescia na kazdym typie strony */
.site-main > .ct-container,
.site-main > .ct-container-fluid {
    padding-top: clamp(18px, 2.5vw, 32px) !important;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
    margin-bottom: 18px;
}

/* ==========================================================================
   14. LOGO I TYTUL WITRYNY
   ========================================================================== */

/* tytul chowamy wizualnie - Google i czytniki ekranu dalej go widza */
.site-title,
.site-description {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-logo-container img,
.ct-logo-container img,
[data-id="logo"] img {
    max-height: 110px !important;
    width: auto !important;
    height: auto !important;
}

@media (max-width: 999px) {
    .site-logo-container img,
    .ct-logo-container img,
    [data-id="logo"] img {
        max-height: 68px !important;
    }
}

/* ==========================================================================
   15. MENU MOBILNE (panel wysuwany)
   Blocksy stylizuje panel osobno od naglowka - domyslnie jasny tekst
   na ciemnym tle. Po zmianie tla na kremowe trzeba przestawic tekst.
   ========================================================================== */

#offcanvas,
#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-content,
.ct-panel .ct-panel-inner,
.ct-panel .ct-panel-content {
    background-color: var(--a-cream) !important;
}

/* pozycje menu - czytelne, z separatorami */
#offcanvas .ct-panel-content a,
#offcanvas li > a,
#offcanvas .menu > li > a,
.ct-panel li > a {
    display: block;
    color: var(--a-plum) !important;
    font-family: var(--a-body);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--a-track);
    padding: 17px 4px;
    border-bottom: 1px solid var(--a-line);
    text-decoration: none;
}

#offcanvas li:last-child > a,
.ct-panel li:last-child > a {
    border-bottom: none;
}

/* aktywna pozycja */
#offcanvas li[class*="current"] > a,
.ct-panel li[class*="current"] > a {
    color: var(--a-rose) !important;
    text-decoration: underline dashed var(--a-rose) 2px !important;
    text-underline-offset: 6px !important;
}

/* krzyzyk zamykania - byl bialy na kremowym */
#offcanvas .ct-toggle-close,
#offcanvas .ct-toggle-close .ct-icon,
.ct-panel .ct-toggle-close,
.ct-panel .ct-toggle-close .ct-icon,
#offcanvas [data-behaviour] svg,
.ct-panel button svg {
    color: var(--a-plum) !important;
    fill: var(--a-plum) !important;
    opacity: 1 !important;
}

/* oddech w panelu */
#offcanvas .ct-panel-content,
.ct-panel .ct-panel-content {
    padding: 24px 22px;
}

/* przyciski i ikony w panelu */
#offcanvas .ct-button,
.ct-panel .ct-button {
    background-color: var(--a-rose) !important;
    color: #fff !important;
}

/* przyciemnienie tla za panelem */
#offcanvas::before,
.ct-panel::before {
    background-color: rgba(76, 44, 56, 0.45) !important;
}