/*
 * Name: Woltario: warstwa ft-core
 * Slug: ft-core
 * Version: 1.7.0
 * Description: Tokeny kontraktu designu v1.7, podkładka pod Astrę i WooCommerce oraz wspólne komponenty sklepu Woltario.
 * Module: core
 * Scope: front
 * Load: manual
 * Media: all
 *
 * 1.7.0: pływający koszyk .ft-fab i szuflada .ft-drawer z listą .ft-mini (dialog z animacją wejścia i wyjścia), licznik ilości wygrywa z Astrą także po kliknięciu, przycisk Do góry motywu przesuwa się nad pływający koszyk, przycisk koszyka na karcie po dodaniu nie jest już przygaszony.
 * 1.6.2: serce w podglądzie administratora (znacznik span) ma ten sam rozmiar i miejsce co przycisk.
 * 1.6.1: serce zaznaczone zawsze w kolorze promocji (wcześniej przegrywało z kolorem karty i było czarne), animacja .ft-bump po kliknięciu.
 * 1.6.0: komponenty całego sklepu w stylu makiety: karta produktu .ft-pc (z sekcji bestsellerów), karta artykułu .ft-post, siatki .ft-pc-grid i .ft-post-grid, chipy .ft-chips, nagłówek podstrony .ft-page-head, serce .ft-fav, przycisk ikony .ft-btn--icon.
 * 1.5.0: makieta strony głównej: .ft-heading z zieloną kreską przed tytułem i linkiem po prawej (bez przewodu z wtyczką), token --ft-fs-section, gęstsze sekcje --compact, .ft-eyebrow--dash, lista .ft-checks z zielonymi znacznikami.
 * 1.4.0: styl z makiety właściciela (kontrakt v1.4): nagłówki w Manrope 800, promienie 4 i 6 px, wyszukiwarka z lupą w polu i zielonym przyciskiem, nagłówek sekcji .ft-heading z kablem i wtyczką zamiast linii z kółkiem, karta .ft-card--accent z zieloną belką, kafel ikony .ft-icon-tile.
 * 1.3.1: strony z układem Astry „pełna szerokość” (strona główna z sekcji) bez bocznych marginesów kontenera, sekcje idą od krawędzi do krawędzi.
 * 1.3.0: wyszukiwarka jako prostokątne pole w ramce marki z doklejonym przyciskiem .ft-search__submit (zamiast zaokrąglonej pigułki), linki i okruszki bez podkreślenia po najechaniu.
 * 1.2.2: wyrównanie kontenera działa też na stronach sklepu (selektor Astry dla archiwum produktów).
 * 1.2.1: pola .ft-input wygrywają z regułami Astry dla input[type=search] i podobnych, kontener treści Astry wyrównany do szerokiego kontenera nagłówka.
 * 1.2.0: komponent okruszków .ft-breadcrumbs dla modułu okruszki (Rank Math).
 * 1.1.0: krój nagłówków Barlow Semi Condensed zamiast Unbounded (kontrakt v1.2), nagłówki H1 od 1,75rem, podtytuły w grubości 700.
 * 1.0.0: pierwsza wersja: tokeny, typografia bazowa, layout, przycisk, link, karta i karta produktu, pola, wyszukiwarka, licznik ilości, odznaki, stan magazynu, cena z linią Omnibus, kabel (rabat, zamówienie, nagłówek), wejście w kadr, pomocnicze.
 */

/* ==========================================================================
   1. TOKENY. Kontrakt designu Woltario v1.4 (KONTRAKT.md).
   Skale są zamknięte. Nowa wartość to nowy token z bumpem wersji, nie liczba w sekcji.
   ========================================================================== */
:root {
    --ft-core: 1;

    /* Kolor */
    --ft-brand: #02902F;
    --ft-accent: #027A28;
    --ft-accent-hover: color-mix(in oklab, var(--ft-accent) 82%, #000);
    --ft-accent-soft: color-mix(in oklab, var(--ft-accent) 10%, #FFF);
    --ft-accent-on-dark: #3CC56A;
    --ft-success: var(--ft-accent);
    --ft-ink: #1A2A30;
    --ft-muted: #56656B;
    --ft-surface: #FFFFFF;
    --ft-surface-alt: #F4F7F5;
    --ft-surface-dark: #1A2A30;
    --ft-border: #DCE3E1;
    --ft-border-strong: #C3CDCA;
    --ft-metal: #A9B6B2;
    --ft-sale: #E11B1D;
    --ft-danger: #C3161A;
    --ft-warning: #A14A07;
    --ft-on-dark-muted: color-mix(in oklab, #FFF 68%, var(--ft-surface-dark));

    /* Typografia */
    --ft-font-display: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ft-font-body: 'Manrope', 'Manrope Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ft-fs-display: clamp(2rem, 1.4rem + 3vw, 3.5rem);
    --ft-fs-h1: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
    --ft-fs-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
    --ft-fs-h3: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    --ft-fs-section: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
    --ft-fs-price: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
    --ft-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --ft-fs-sm: 0.875rem;
    --ft-fs-xs: 0.8125rem;
    --ft-fw-body: 400;
    --ft-fw-medium: 600;
    --ft-fw-bold: 700;
    --ft-fw-display: 800;
    --ft-lh-tight: 1.15;
    --ft-lh-snug: 1.35;
    --ft-lh-body: 1.65;
    --ft-track-display: -0.02em;
    --ft-track-code: 0.02em;
    --ft-track-caps: 0.08em;

    /* Odstępy, siatka 8 px */
    --ft-space-1: 0.25rem;
    --ft-space-2: 0.5rem;
    --ft-space-3: 0.75rem;
    --ft-space-4: 1rem;
    --ft-space-5: 1.5rem;
    --ft-space-6: 2rem;
    --ft-space-7: 3rem;
    --ft-space-8: 4rem;
    --ft-space-9: 6rem;
    --ft-tap: 44px;
    --ft-tap-lg: 52px;

    /* Promienie */
    --ft-radius-sm: 4px;
    --ft-radius-md: 6px;
    --ft-radius-lg: 12px;
    --ft-radius-pill: 999px;

    /* Cienie */
    --ft-shadow-1: 0 1px 2px rgba(26, 42, 48, 0.06);
    --ft-shadow-2: 0 1px 2px rgba(26, 42, 48, 0.06), 0 8px 24px rgba(26, 42, 48, 0.08);
    --ft-shadow-3: 0 16px 48px rgba(26, 42, 48, 0.16);
    --ft-focus-ring: 0 0 0 3px color-mix(in oklab, var(--ft-accent) 35%, transparent);

    /* Ruch */
    --ft-dur-fast: 180ms;
    --ft-dur: 320ms;
    --ft-dur-slow: 700ms;
    --ft-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ft-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ft-lift: -2px;
    --ft-transition: color var(--ft-dur-fast) var(--ft-ease), background-color var(--ft-dur-fast) var(--ft-ease), border-color var(--ft-dur-fast) var(--ft-ease), box-shadow var(--ft-dur-fast) var(--ft-ease), transform var(--ft-dur-fast) var(--ft-ease), opacity var(--ft-dur-fast) var(--ft-ease);

    /* Layout */
    --ft-container: 1280px;
    --ft-container-wide: 1440px;
    --ft-measure: 70ch;
    --ft-gutter: clamp(1rem, 4vw, 2rem);
    --ft-card-min: 18rem;
    --ft-drawer-w: 26rem;
    --ft-header-h: 64px;

    /* Warstwy */
    --ft-z-sticky: 100;
    --ft-z-header: 500;
    --ft-z-overlay: 9000;
    --ft-z-modal: 9999;

    /* Paleta Astry przemapowana na kontrakt: wszystkie elementy motywu mówią tym samym kolorem */
    --ast-global-color-0: var(--ft-accent);
    --ast-global-color-1: var(--ft-accent-hover);
    --ast-global-color-2: var(--ft-ink);
    --ast-global-color-3: var(--ft-ink);
    --ast-global-color-4: var(--ft-surface-alt);
    --ast-global-color-5: var(--ft-surface);
    --ast-global-color-6: var(--ft-border);
    --ast-global-color-7: var(--ft-surface-dark);
    --ast-global-color-8: var(--ft-muted);
}

@media (min-width: 1024px) {
    :root { --ft-header-h: 80px; }
}

/* ==========================================================================
   2. PODKŁADKA POD MOTYW I WOOCOMMERCE.
   Tylko typografia bazowa, focus i elementy sklepu, które bez niej mówiłyby innym językiem.
   Zero resetu globalnego, zero !important.
   ========================================================================== */
body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
    font-family: var(--ft-font-body);
}

body {
    color: var(--ft-ink);
    font-size: var(--ft-fs-body);
    line-height: var(--ft-lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3,
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-title,
.woocommerce-products-header__title,
.product_title {
    font-family: var(--ft-font-display);
    font-weight: var(--ft-fw-display);
    line-height: var(--ft-lh-tight);
    letter-spacing: var(--ft-track-display);
    color: var(--ft-ink);
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}

h1, .entry-content h1, .entry-title, .woocommerce-products-header__title, .product_title { font-size: var(--ft-fs-h1); }
h2, .entry-content h2 { font-size: var(--ft-fs-h2); }
h3, .entry-content h3 { font-size: var(--ft-fs-h3); }

h4, h5, h6,
.entry-content h4, .entry-content h5, .entry-content h6 {
    font-family: var(--ft-font-body);
    font-weight: var(--ft-fw-bold);
    line-height: var(--ft-lh-snug);
    color: var(--ft-ink);
}

.entry-content p { text-wrap: pretty; }

:focus-visible {
    outline: 2px solid var(--ft-accent);
    outline-offset: 2px;
}

::selection {
    background: var(--ft-accent-soft);
    color: var(--ft-ink);
}

/* Ceny WooCommerce: cyfry tabelaryczne, promocja w kolorze promocji */
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-formatted-money-amount {
    font-variant-numeric: tabular-nums;
}
body .price ins,
body .wc-block-components-product-price ins {
    color: var(--ft-sale);
    text-decoration: none;
}
body .price del,
body .wc-block-components-product-price del {
    color: var(--ft-muted);
    font-size: var(--ft-fs-sm);
}

/* Przyciski WooCommerce i bloków w języku .ft-btn--primary */
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .wc-block-components-button:not(.is-link),
body .wp-element-button {
    min-height: var(--ft-tap);
    padding: var(--ft-space-3) var(--ft-space-5);
    border: 1px solid transparent;
    border-radius: var(--ft-radius-sm);
    background-color: var(--ft-accent);
    color: var(--ft-surface);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-bold);
    line-height: var(--ft-lh-tight);
    transition: var(--ft-transition);
}
body .woocommerce a.button:hover,
body .woocommerce button.button:hover,
body .woocommerce input.button:hover,
body .wc-block-components-button:not(.is-link):hover,
body .wp-element-button:hover {
    background-color: var(--ft-accent-hover);
    color: var(--ft-surface);
    box-shadow: var(--ft-shadow-2);
}

/* Odznaka promocji WooCommerce w języku .ft-badge--sale */
body .woocommerce span.onsale,
body .wc-block-components-product-sale-badge {
    min-height: var(--ft-space-5);
    min-width: 0;
    padding: var(--ft-space-1) var(--ft-space-2);
    border: 0;
    border-radius: var(--ft-radius-sm);
    background: var(--ft-sale);
    color: var(--ft-surface);
    font-size: var(--ft-fs-xs);
    font-weight: var(--ft-fw-bold);
    line-height: var(--ft-lh-snug);
}

/* Kontener treści Astry wyrównany do szerokiego kontenera nagłówka, stopki i okruszków */
body .ast-container,
body .site .site-content > .ast-container {
    max-width: var(--ft-container-wide);
    padding-inline: var(--ft-gutter);
}
/* Strony złożone z sekcji (układ Astry „pełna szerokość”): sekcje same pilnują kontenera i idą od krawędzi do krawędzi */
body.ast-page-builder-template .site .site-content > .ast-container {
    max-width: none;
    padding-inline: 0;
}

/* Pola w kasie na blokach: focus z kontraktu */
body .wc-block-components-text-input input:focus,
body .wc-block-components-combobox .wc-block-components-combobox-control input:focus {
    border-color: var(--ft-accent);
    box-shadow: var(--ft-focus-ring);
}

/* Komunikaty WooCommerce */
body .woocommerce-message,
body .woocommerce-info {
    border-top-color: var(--ft-accent);
}
body .woocommerce-error {
    border-top-color: var(--ft-danger);
}

/* Atrybut hidden zawsze wygrywa z display komponentu */
.ft-section [hidden],
.ft-card [hidden],
.ft-field [hidden],
.ft-search [hidden],
.ft-cable [hidden],
[hidden].ft-btn,
[hidden].ft-badge,
[hidden].ft-stock {
    display: none !important;
}

/* Komponenty liczą szerokość z paddingiem i obramowaniem niezależnie od ustawień motywu */
.ft-section,
.ft-container,
.ft-grid > *,
.ft-btn,
.ft-card,
.ft-card *,
.ft-field *,
.ft-input,
.ft-textarea,
.ft-select,
.ft-search,
.ft-qty,
.ft-qty *,
.ft-badge,
.ft-cable,
.ft-cable *,
.ft-cable::before,
.ft-cable::after,
.ft-cable *::before,
.ft-cable *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   3. LAYOUT (mobile first)
   ========================================================================== */
.entry-content .ft-section > * { margin-block: 0; }
.entry-content .ft-list { list-style: none; margin: 0; padding: 0; }

.ft-section {
    padding-block: var(--ft-space-7);
    background: var(--ft-surface);
    color: var(--ft-ink);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-body);
    line-height: var(--ft-lh-body);
}
.ft-section--alt { background: var(--ft-surface-alt); }
.ft-section--dark { background: var(--ft-surface-dark); color: var(--ft-surface); }
.ft-section--tight { padding-block: var(--ft-space-6); }
.ft-section--compact { padding-block: var(--ft-space-4); }

.ft-container {
    width: 100%;
    max-width: var(--ft-container);
    margin-inline: auto;
    padding-inline: var(--ft-gutter);
}
.ft-container--wide { max-width: var(--ft-container-wide); }
.ft-container--narrow { max-width: var(--ft-measure); }

.ft-grid { display: grid; gap: var(--ft-space-5); }
.ft-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(var(--ft-card-min), 100%), 1fr)); }
.ft-grid--products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ft-space-3);
}
.ft-stack { display: flex; flex-direction: column; gap: var(--ft-space-4); }
.ft-row { display: flex; flex-wrap: wrap; gap: var(--ft-space-3); align-items: center; }

@media (min-width: 768px) {
    .ft-grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ft-space-5); }
}
@media (min-width: 1024px) {
    .ft-section { padding-block: var(--ft-space-9); }
    .ft-section--tight { padding-block: var(--ft-space-7); }
    .ft-section--compact { padding-block: var(--ft-space-5); }
    .ft-grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
    .ft-container--wide .ft-grid--products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ==========================================================================
   4. TYPOGRAFIA
   ========================================================================== */
.entry-content .ft-title, .ft-title {
    margin: 0;
    font-family: var(--ft-font-display);
    font-size: var(--ft-fs-h2);
    font-weight: var(--ft-fw-display);
    line-height: var(--ft-lh-tight);
    letter-spacing: var(--ft-track-display);
    color: inherit;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: auto;
}
.entry-content .ft-title--display, .ft-title--display { font-size: var(--ft-fs-display); }
.entry-content .ft-title--h1, .ft-title--h1 { font-size: var(--ft-fs-h1); }
.entry-content .ft-subtitle, .ft-subtitle {
    margin: 0;
    font-family: var(--ft-font-display);
    font-size: var(--ft-fs-h3);
    font-weight: var(--ft-fw-display);
    line-height: var(--ft-lh-snug);
    color: inherit;
}
.entry-content .ft-lead, .ft-lead {
    margin: 0;
    max-width: var(--ft-measure);
    font-size: var(--ft-fs-h3);
    line-height: var(--ft-lh-body);
    color: var(--ft-muted);
    text-wrap: pretty;
}
.ft-eyebrow {
    display: inline-block;
    font-size: var(--ft-fs-xs);
    font-weight: var(--ft-fw-bold);
    letter-spacing: var(--ft-track-caps);
    text-transform: uppercase;
    color: var(--ft-accent);
}
.ft-code {
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ft-track-code);
    color: var(--ft-muted);
}
.ft-section--dark .ft-lead,
.ft-section--dark .ft-code { color: var(--ft-on-dark-muted); }
.ft-section--dark .ft-eyebrow { color: var(--ft-accent-on-dark); }

/* ==========================================================================
   5. KOMPONENTY
   Podwójne selektory z .entry-content wygrywają z regułami Astry dla linków w treści.
   Sekcja nadpisuje komponent własnym prefiksem, nigdy przez !important.
   ========================================================================== */

/* Przycisk */
.entry-content a.ft-btn, .ft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ft-space-2);
    min-height: var(--ft-tap);
    padding: var(--ft-space-3) var(--ft-space-5);
    border: 1px solid transparent;
    border-radius: var(--ft-radius-sm);
    background: var(--ft-accent);
    color: var(--ft-surface);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-bold);
    line-height: var(--ft-lh-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: var(--ft-transition);
}
.entry-content a.ft-btn:hover, .ft-btn:hover {
    background: var(--ft-accent-hover);
    color: var(--ft-surface);
    box-shadow: var(--ft-shadow-2);
}
.ft-btn:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; box-shadow: var(--ft-focus-ring); }
.ft-btn:active { transform: translateY(0); box-shadow: none; }
.ft-btn[disabled], .ft-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.ft-btn svg { flex: none; width: 1.25em; height: 1.25em; transition: transform var(--ft-dur-fast) var(--ft-ease); }

.entry-content a.ft-btn--primary, .ft-btn--primary { background: var(--ft-accent); color: var(--ft-surface); }

.entry-content a.ft-btn--secondary, .ft-btn--secondary {
    background: transparent;
    border-color: var(--ft-border);
    color: var(--ft-ink);
}
.entry-content a.ft-btn--secondary:hover, .ft-btn--secondary:hover {
    background: transparent;
    border-color: var(--ft-accent);
    color: var(--ft-accent);
    box-shadow: none;
}

.entry-content a.ft-btn--ghost, .ft-btn--ghost {
    padding-inline: var(--ft-space-3);
    background: transparent;
    color: var(--ft-accent);
}
.entry-content a.ft-btn--ghost:hover, .ft-btn--ghost:hover {
    background: var(--ft-accent-soft);
    color: var(--ft-accent-hover);
    box-shadow: none;
}

.entry-content a.ft-btn--dark, .ft-btn--dark { background: var(--ft-ink); color: var(--ft-surface); }
.entry-content a.ft-btn--dark:hover, .ft-btn--dark:hover {
    background: color-mix(in oklab, var(--ft-ink) 85%, var(--ft-surface));
    color: var(--ft-surface);
}

.ft-btn--lg { min-height: var(--ft-tap-lg); padding: var(--ft-space-4) var(--ft-space-6); font-size: var(--ft-fs-body); }
.entry-content a.ft-btn--block, .ft-btn--block { display: flex; width: 100%; }
.ft-btn--icon {
    width: var(--ft-tap);
    min-width: var(--ft-tap);
    height: var(--ft-tap);
    padding: 0;
    background: transparent;
    color: var(--ft-ink);
}
.ft-btn--icon:hover { background: var(--ft-accent-soft); color: var(--ft-accent); box-shadow: none; }

@media (hover: hover) {
    .ft-btn:hover { transform: translateY(var(--ft-lift)); }
    .ft-btn--ghost:hover, .ft-btn--icon:hover { transform: none; }
    .ft-btn[data-arrow]:hover svg { transform: translateX(var(--ft-space-1)); }
}

/* Link tekstowy */
.entry-content a.ft-link, .ft-link {
    color: var(--ft-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: var(--ft-transition);
}
.entry-content a.ft-link:hover, .ft-link:hover {
    color: var(--ft-accent-hover);
}
.ft-section--dark a.ft-link { color: var(--ft-accent-on-dark); }

/* Karta */
.ft-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ft-space-3);
    min-width: 0;
    padding: var(--ft-space-4);
    background: var(--ft-surface);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-md);
    box-shadow: var(--ft-shadow-1);
    color: var(--ft-ink);
    transition: var(--ft-transition);
}
.ft-card--flat { box-shadow: none; }
.ft-card__title {
    margin: 0;
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-medium);
    line-height: var(--ft-lh-snug);
    color: var(--ft-ink);
}
.ft-card__text { margin: 0; color: var(--ft-muted); }

@media (hover: hover) {
    .ft-card--hover:hover,
    .ft-card--product:hover {
        box-shadow: var(--ft-shadow-2);
        transform: translateY(var(--ft-lift));
    }
}

/* Karta produktu: zdjęcie 1:1, cała karta klikalna przez link z tytułu, przycisk osobno */
.ft-card--product { gap: var(--ft-space-2); padding: var(--ft-space-3); }
.ft-card__media {
    position: relative;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    border-radius: var(--ft-radius-sm);
    background: var(--ft-surface);
}
.ft-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--ft-space-2);
    object-fit: contain;
    transition: transform var(--ft-dur) var(--ft-ease-out);
}
.ft-card__badges {
    position: absolute;
    top: var(--ft-space-2);
    left: var(--ft-space-2);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--ft-space-1);
}
.ft-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ft-space-1) var(--ft-space-2);
    font-size: var(--ft-fs-xs);
    line-height: var(--ft-lh-snug);
    color: var(--ft-muted);
}
.ft-card--product .ft-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}
.entry-content a.ft-card__link, .ft-card__link {
    color: inherit;
    text-decoration: none;
}
.ft-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--ft-radius-md);
}
.ft-card__link:focus-visible { outline: none; }
.ft-card__link:focus-visible::after { outline: 2px solid var(--ft-accent); outline-offset: 2px; }
.ft-card__actions {
    position: relative;
    z-index: 1;
    display: flex;
    gap: var(--ft-space-2);
    margin-top: auto;
}

@media (hover: hover) {
    .ft-card--product:hover .ft-card__media img { transform: scale(1.04); }
    .ft-card--product:hover .ft-card__title { color: var(--ft-accent); }
}

@media (min-width: 768px) {
    .ft-card--product { padding: var(--ft-space-4); gap: var(--ft-space-3); }
}

/* Pole formularza */
.ft-field { display: flex; flex-direction: column; gap: var(--ft-space-2); min-width: 0; }
.ft-label { font-size: var(--ft-fs-sm); font-weight: var(--ft-fw-medium); color: var(--ft-ink); }
.ft-input, .ft-textarea, .ft-select,
input.ft-input, textarea.ft-textarea, select.ft-select,
.ft-search input.ft-input--search {
    width: 100%;
    min-height: var(--ft-tap);
    padding: var(--ft-space-2) var(--ft-space-4);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-surface);
    color: var(--ft-ink);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-body);
    line-height: var(--ft-lh-snug);
    transition: var(--ft-transition);
}
.ft-input::placeholder, .ft-textarea::placeholder { color: var(--ft-muted); opacity: 1; }
.ft-input:focus-visible, .ft-textarea:focus-visible, .ft-select:focus-visible {
    outline: none;
    border-color: var(--ft-accent);
    box-shadow: var(--ft-focus-ring);
}
.ft-input[aria-invalid="true"], .ft-textarea[aria-invalid="true"], .ft-select[aria-invalid="true"] { border-color: var(--ft-danger); }
.ft-textarea { min-height: calc(var(--ft-space-9) + var(--ft-space-6)); resize: vertical; field-sizing: content; }
.ft-hint { font-size: var(--ft-fs-xs); color: var(--ft-muted); }
.ft-error {
    display: flex;
    align-items: flex-start;
    gap: var(--ft-space-1);
    font-size: var(--ft-fs-xs);
    font-weight: var(--ft-fw-medium);
    color: var(--ft-danger);
}

/* Wyszukiwarka według makiety: jasna ramka, lupa w polu, zielony przycisk z lupą doklejony z prawej */
.ft-search {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: var(--ft-space-7);
    border: 1px solid var(--ft-border-strong);
    border-radius: var(--ft-radius-md);
    background: var(--ft-surface);
    overflow: hidden;
    transition: border-color var(--ft-dur-fast) var(--ft-ease), box-shadow var(--ft-dur-fast) var(--ft-ease);
}
.ft-search:hover { border-color: var(--ft-muted); }
.ft-search:focus-within { border-color: var(--ft-accent); box-shadow: inset 0 0 0 1px var(--ft-accent); }
.ft-search__icon {
    position: absolute;
    top: 50%;
    left: var(--ft-space-4);
    width: var(--ft-space-5);
    height: var(--ft-space-5);
    color: var(--ft-muted);
    pointer-events: none;
    transform: translateY(-50%);
}
.ft-input--search,
.ft-search input.ft-input--search {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0 var(--ft-space-4);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ft-ink);
    font-size: var(--ft-fs-body);
    appearance: none;
}
.ft-search input.ft-input--search::placeholder { color: var(--ft-muted); opacity: 1; }
.ft-search__icon ~ input.ft-input--search { padding-inline-start: calc(var(--ft-space-4) + var(--ft-space-5) + var(--ft-space-3)); }
.ft-input--search:focus,
.ft-input--search:focus-visible,
.ft-search input.ft-input--search:focus,
.ft-search input.ft-input--search:focus-visible { border: 0; background: transparent; box-shadow: none; outline: none; }
.ft-search button.ft-search__submit {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ft-space-2);
    min-width: calc(var(--ft-space-7) + var(--ft-space-2));
    margin: -1px -1px -1px 0;
    padding: 0 var(--ft-space-3);
    border: 0;
    border-radius: 0 var(--ft-radius-md) var(--ft-radius-md) 0;
    background: var(--ft-brand);
    color: var(--ft-surface);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-bold);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--ft-dur-fast) var(--ft-ease);
}
.ft-search button.ft-search__submit svg { flex: none; width: var(--ft-space-5); height: var(--ft-space-5); }
.ft-search button.ft-search__submit:hover,
.ft-search button.ft-search__submit:focus { background: var(--ft-accent); color: var(--ft-surface); }
.ft-search button.ft-search__submit:focus-visible { outline: 2px solid var(--ft-surface); outline-offset: -5px; }
.ft-search__clear {
    position: absolute;
    right: var(--ft-space-1);
}

/* Licznik ilości */
.ft-qty {
    display: inline-grid;
    grid-template-columns: var(--ft-tap) var(--ft-space-8) var(--ft-tap);
    align-items: stretch;
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-surface);
    overflow: hidden;
}
.ft-qty__btn {
    display: grid;
    place-items: center;
    min-height: var(--ft-tap);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ft-ink);
    font-size: var(--ft-fs-h3);
    cursor: pointer;
    transition: var(--ft-transition);
}
.ft-qty__btn:hover { background: var(--ft-accent-soft); color: var(--ft-accent); }
.ft-qty__btn[disabled] { opacity: 0.4; pointer-events: none; }
.ft-qty__input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ft-ink);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-body);
    font-weight: var(--ft-fw-bold);
    font-variant-numeric: tabular-nums;
    text-align: center;
    appearance: textfield;
}
.ft-qty__input::-webkit-outer-spin-button,
.ft-qty__input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.ft-qty:focus-within { border-color: var(--ft-accent); box-shadow: var(--ft-focus-ring); }

/* Odznaka */
.ft-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ft-space-1);
    min-height: var(--ft-space-5);
    padding: var(--ft-space-1) var(--ft-space-2);
    border: 1px solid transparent;
    border-radius: var(--ft-radius-sm);
    background: var(--ft-accent-soft);
    color: var(--ft-accent);
    font-size: var(--ft-fs-xs);
    font-weight: var(--ft-fw-bold);
    line-height: var(--ft-lh-tight);
    white-space: nowrap;
}
.ft-badge svg { width: 1em; height: 1em; flex: none; }
.ft-badge--sale { background: var(--ft-sale); color: var(--ft-surface); }
.ft-badge--b2b { background: var(--ft-ink); color: var(--ft-surface); }
.ft-badge--new { background: var(--ft-accent-soft); color: var(--ft-accent); }
.ft-badge--ship { background: var(--ft-surface); border-color: var(--ft-border); color: var(--ft-ink); }

/* Stan magazynu */
.ft-stock {
    display: inline-flex;
    align-items: center;
    gap: var(--ft-space-2);
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-medium);
    font-variant-numeric: tabular-nums;
    line-height: var(--ft-lh-snug);
}
.ft-stock::before {
    content: "";
    flex: none;
    width: var(--ft-space-2);
    height: var(--ft-space-2);
    border-radius: 50%;
    background: currentColor;
}
.ft-stock--in { color: var(--ft-accent); }
.ft-stock--in::before { background: var(--ft-brand); }
.ft-stock--low { color: var(--ft-warning); }
.ft-stock--out { color: var(--ft-muted); }

/* Cena z linią Omnibus */
.ft-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--ft-space-2);
    font-variant-numeric: tabular-nums;
}
.ft-price__now {
    font-family: var(--ft-font-display);
    font-size: var(--ft-fs-price);
    font-weight: var(--ft-fw-bold);
    line-height: var(--ft-lh-tight);
    letter-spacing: var(--ft-track-display);
    color: var(--ft-ink);
}
.ft-price__tax { font-size: var(--ft-fs-xs); color: var(--ft-muted); }
.ft-price__old { font-size: var(--ft-fs-sm); color: var(--ft-muted); text-decoration: line-through; }
.ft-price__omnibus {
    flex-basis: 100%;
    margin: 0;
    font-size: var(--ft-fs-xs);
    line-height: var(--ft-lh-snug);
    color: var(--ft-muted);
}
.ft-price--sale .ft-price__now { color: var(--ft-sale); }
.ft-card--product .ft-price__now { font-size: var(--ft-fs-h3); }

/* Okruszki (markup Rank Math: nav > p > a, span.separator, span.last) */
.ft-breadcrumbs {
    background: var(--ft-surface);
    border-bottom: 1px solid var(--ft-border);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-xs);
    line-height: var(--ft-lh-snug);
    color: var(--ft-muted);
}
.ft-breadcrumbs nav { min-width: 0; }
.ft-breadcrumbs p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding-block: var(--ft-space-2);
}
.entry-content .ft-breadcrumbs a, .ft-breadcrumbs a {
    display: inline-flex;
    align-items: center;
    min-height: var(--ft-space-6);
    color: var(--ft-muted);
    text-decoration: none;
    transition: color var(--ft-dur-fast) var(--ft-ease);
}
.ft-breadcrumbs a:hover { color: var(--ft-accent); text-decoration: none; }
.ft-breadcrumbs .separator { font-size: 0; }
.ft-breadcrumbs .separator::before {
    content: "/" / "";
    margin-inline: var(--ft-space-2);
    font-size: var(--ft-fs-xs);
    color: var(--ft-border);
}
.ft-breadcrumbs .last {
    padding-block: var(--ft-space-1);
    color: var(--ft-ink);
    font-weight: var(--ft-fw-medium);
}

/* ==========================================================================
   6. KABEL. Sygnatura marki: pasek rabatu, status zamówienia, podkreślenie nagłówka.
   Postęp w zmiennej --ft-cable-progress (0 do 1), pozycja progu w --ft-cable-at (0 do 1).
   ========================================================================== */
.ft-cable {
    --ft-cable-progress: 0;
    display: grid;
    gap: var(--ft-space-2);
    width: 100%;
}
.ft-cable__track {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--ft-space-4);
    margin-inline-end: var(--ft-space-6);
}
.ft-cable__track::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: var(--ft-space-2);
    border-radius: var(--ft-radius-pill);
    background: var(--ft-border);
}
.ft-cable__fill {
    position: absolute;
    inset-inline: 0;
    height: var(--ft-space-2);
    border-radius: var(--ft-radius-pill);
    background: linear-gradient(90deg, var(--ft-brand) 0%, var(--ft-brand) 70%, var(--ft-sale) 86%, var(--ft-ink) 100%);
    clip-path: inset(0 calc(100% - var(--ft-cable-progress) * 100%) 0 0 round var(--ft-radius-pill));
    transition: clip-path var(--ft-dur-slow) var(--ft-ease-out);
}
.ft-cable:not(.is-visible) .ft-cable__fill { clip-path: inset(0 100% 0 0 round var(--ft-radius-pill)); }
.ft-cable__node {
    position: absolute;
    left: calc(var(--ft-cable-at, 0.5) * 100%);
    z-index: 1;
    width: var(--ft-space-4);
    height: var(--ft-space-4);
    border: 2px solid var(--ft-border);
    border-radius: 50%;
    background: var(--ft-surface);
    transform: translateX(-50%);
    transition: border-color var(--ft-dur) var(--ft-ease), background-color var(--ft-dur) var(--ft-ease);
}
.ft-cable__node.is-reached { border-color: var(--ft-sale); }
.ft-cable__plug {
    position: absolute;
    left: 100%;
    width: var(--ft-space-6);
    height: var(--ft-space-6);
    margin-inline-start: var(--ft-space-1);
    color: var(--ft-muted);
    transition: color var(--ft-dur) var(--ft-ease);
}
.ft-cable.is-full .ft-cable__plug { color: var(--ft-ink); }
.ft-cable__label {
    margin: 0;
    font-size: var(--ft-fs-sm);
    line-height: var(--ft-lh-snug);
    color: var(--ft-ink);
}
.ft-cable__label strong { font-variant-numeric: tabular-nums; color: var(--ft-accent); }

/* Status zamówienia: etykiety pod węzłami */
.ft-cable--order .ft-cable__track { margin-block-end: var(--ft-space-6); margin-inline-end: 0; }
.ft-cable--order .ft-cable__node { border-color: var(--ft-border); }
.ft-cable--order .ft-cable__node.is-reached { border-color: var(--ft-brand); background: var(--ft-brand); }
.ft-cable--order .ft-cable__node.is-current { border-color: var(--ft-sale); background: var(--ft-surface); }
.ft-cable__step {
    position: absolute;
    top: calc(100% + var(--ft-space-1));
    left: 50%;
    width: max-content;
    max-width: var(--ft-space-9);
    font-size: var(--ft-fs-xs);
    line-height: var(--ft-lh-snug);
    color: var(--ft-muted);
    text-align: center;
    transform: translateX(-50%);
}
.ft-cable__fill + .ft-cable__node .ft-cable__step { left: 0; text-align: left; transform: none; }
.ft-cable__node:last-child .ft-cable__step { left: auto; right: 0; text-align: right; transform: none; }
.ft-cable__node.is-reached .ft-cable__step,
.ft-cable__node.is-current .ft-cable__step { color: var(--ft-ink); font-weight: var(--ft-fw-medium); }

/* Nagłówek sekcji według makiety strony głównej: zielona kreska przed tytułem, tytuł do lewej, link po prawej.
   Znaczniki: header.ft-heading > h2.ft-heading__title (+ opcjonalnie a.ft-heading__link, p.ft-heading__sub) */
.ft-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ft-space-2) var(--ft-space-5);
    margin: 0 0 var(--ft-space-4);
}
.entry-content .ft-heading__title, .ft-heading__title {
    display: flex;
    align-items: center;
    gap: var(--ft-space-4);
    min-width: 0;
    margin: 0;
    font-family: var(--ft-font-display);
    font-size: var(--ft-fs-section);
    font-weight: var(--ft-fw-display);
    line-height: var(--ft-lh-tight);
    letter-spacing: var(--ft-track-display);
    color: var(--ft-ink);
}
.ft-heading__title::before {
    content: "";
    flex: none;
    width: var(--ft-space-6);
    height: var(--ft-space-1);
    border-radius: var(--ft-radius-pill);
    background: var(--ft-brand);
}
.entry-content .ft-heading__link, .ft-heading__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ft-space-1);
    min-height: var(--ft-tap);
    color: var(--ft-ink);
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ft-dur-fast) var(--ft-ease);
}
.ft-heading__link svg { width: var(--ft-space-4); height: var(--ft-space-4); flex: none; }
.entry-content .ft-heading__link:hover, .ft-heading__link:hover { color: var(--ft-accent); text-decoration: none; }
.entry-content .ft-heading__sub, .ft-heading__sub {
    flex-basis: 100%;
    margin: 0;
    color: var(--ft-muted);
    font-size: var(--ft-fs-body);
    line-height: var(--ft-lh-snug);
}
.ft-section--dark .ft-heading__title { color: var(--ft-surface); }
.ft-section--dark .ft-heading__sub { color: var(--ft-on-dark-muted); }

/* Nadtytuł z zieloną kreską (hero) */
.ft-eyebrow--dash {
    display: inline-flex;
    align-items: center;
    gap: var(--ft-space-3);
    color: var(--ft-ink);
    font-size: var(--ft-fs-body);
    font-weight: var(--ft-fw-medium);
    letter-spacing: 0;
    text-transform: none;
}
.ft-eyebrow--dash::before {
    content: "";
    flex: none;
    width: var(--ft-space-6);
    height: var(--ft-space-1);
    border-radius: var(--ft-radius-pill);
    background: var(--ft-brand);
}

/* Lista z zielonymi znacznikami w kółku (hero, baner B2B) */
.entry-content .ft-checks, .ft-checks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ft-space-2) var(--ft-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.entry-content .ft-checks li, .ft-checks li {
    display: flex;
    align-items: center;
    gap: var(--ft-space-2);
    margin: 0;
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-medium);
    line-height: var(--ft-lh-snug);
}
.ft-checks li::before {
    content: "";
    flex: none;
    width: calc(var(--ft-space-4) + var(--ft-space-1));
    height: calc(var(--ft-space-4) + var(--ft-space-1));
    border-radius: 50%;
    background: var(--ft-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-6.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Notka podglądu dla administratora (sekcje z danymi ze sklepu, gdy danych jeszcze nie ma) */
.entry-content .ft-preview, .ft-preview {
    margin: 0 0 var(--ft-space-4);
    padding: var(--ft-space-3) var(--ft-space-4);
    border: 1px dashed var(--ft-warning);
    border-radius: var(--ft-radius-sm);
    background: color-mix(in oklab, var(--ft-warning) 8%, var(--ft-surface));
    color: var(--ft-ink);
    font-size: var(--ft-fs-sm);
}
.ft-preview__price { color: var(--ft-muted); font-weight: var(--ft-fw-medium); }

/* Karta z zieloną belką na górnej krawędzi (makieta: zalety sklepu) */
.ft-card--accent {
    position: relative;
    border-radius: var(--ft-radius-sm);
    box-shadow: none;
}
.ft-card--accent::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 24%;
    min-width: var(--ft-space-8);
    height: var(--ft-space-1);
    background: var(--ft-brand);
}

/* Kafel ikony: ikona w kolorze akcentu na jasnozielonym tle */
.ft-icon-tile {
    display: grid;
    place-items: center;
    flex: none;
    width: calc(var(--ft-space-8) + var(--ft-space-2));
    aspect-ratio: 1;
    border-radius: var(--ft-radius-md);
    background: var(--ft-accent-soft);
    color: var(--ft-accent);
}
.ft-icon-tile svg { width: 55%; height: 55%; }

/* ==========================================================================
   6A. KOMPONENTY SKLEPU I PORADNIKA (od 1.6.0)
   Jedna definicja dla strony głównej, sklepu, ulubionych i poradnika.
   ========================================================================== */

/* Nagłówek podstrony: nadtytuł z kreską, H1, wstęp */
.ft-page-head { padding-block: var(--ft-space-6) var(--ft-space-5); }
.entry-content .ft-page-head__title, .ft-page-head__title {
    margin: 0;
    color: var(--ft-ink);
    font-family: var(--ft-font-display);
    font-size: var(--ft-fs-h1);
    font-weight: var(--ft-fw-display);
    line-height: var(--ft-lh-tight);
    letter-spacing: var(--ft-track-display);
    text-wrap: balance;
}
.ft-page-head .ft-eyebrow--dash { margin-bottom: var(--ft-space-3); }
.entry-content .ft-page-head__lead, .ft-page-head__lead {
    max-width: var(--ft-measure);
    margin: var(--ft-space-3) 0 0;
    color: var(--ft-muted);
    font-size: var(--ft-fs-body);
    line-height: var(--ft-lh-body);
    text-wrap: pretty;
}
@media (min-width: 1024px) {
    .ft-page-head { padding-block: var(--ft-space-7) var(--ft-space-6); }
}

/* Chipy kategorii: krótkie linki w obramowaniu, aktywny w kolorze akcentu */
.entry-content .ft-chips, .ft-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ft-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.entry-content .ft-chips li, .ft-chips li { margin: 0; }
.entry-content a.ft-chip, .ft-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ft-space-2);
    min-height: calc(var(--ft-tap) - var(--ft-space-2));
    padding: 0 var(--ft-space-4);
    border: 1px solid var(--ft-border-strong);
    border-radius: var(--ft-radius-pill);
    background: var(--ft-surface);
    color: var(--ft-ink);
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-medium);
    line-height: var(--ft-lh-tight);
    text-decoration: none;
    transition: border-color var(--ft-dur-fast) var(--ft-ease), color var(--ft-dur-fast) var(--ft-ease);
}
.ft-chip__count { color: var(--ft-muted); font-size: var(--ft-fs-xs); font-variant-numeric: tabular-nums; }
.entry-content a.ft-chip:hover, .ft-chip:hover { border-color: var(--ft-accent); color: var(--ft-accent); text-decoration: none; }
.entry-content a.ft-chip[aria-current="page"], .ft-chip[aria-current="page"] { border-color: var(--ft-accent); background: var(--ft-accent); color: var(--ft-surface); }
.ft-chip:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; }

/* Siatki kart */
.entry-content .ft-pc-grid, .ft-pc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ft-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.entry-content .ft-pc-grid > li, .ft-pc-grid > li { display: flex; min-width: 0; margin: 0; }
.entry-content .ft-post-grid, .ft-post-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ft-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.entry-content .ft-post-grid > li, .ft-post-grid > li { display: flex; min-width: 0; margin: 0; }
@media (min-width: 640px) {
    .entry-content .ft-pc-grid, .ft-pc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .entry-content .ft-post-grid, .ft-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .entry-content .ft-pc-grid, .ft-pc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ft-space-4); }
    .entry-content .ft-post-grid, .ft-post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ft-space-5); }
}
@media (min-width: 1280px) {
    .entry-content .ft-pc-grid, .ft-pc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Karta produktu według makiety: odznaka, serce, zdjęcie, nazwa, cena, zielony przycisk koszyka.
   Znaczniki: article.ft-pc > span.ft-pc__badge + button.ft-fav.ft-pc__fav + a.ft-pc__media > img
   + h2|h3.ft-pc__name > a + div.ft-pc__foot > div.ft-pc__price + a|span.ft-pc__cart */
.ft-pc {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: var(--ft-space-3);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-md);
    background: var(--ft-surface);
    color: var(--ft-ink);
    text-align: left;
    transition: border-color var(--ft-dur-fast) var(--ft-ease), box-shadow var(--ft-dur-fast) var(--ft-ease);
}
.ft-pc, .ft-pc *, .ft-post, .ft-post * { box-sizing: border-box; }
.ft-pc:hover { border-color: var(--ft-accent); box-shadow: var(--ft-shadow-2); }
.ft-pc__badge {
    position: absolute;
    top: var(--ft-space-3);
    left: var(--ft-space-3);
    z-index: 1;
    padding: var(--ft-space-1) var(--ft-space-2);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-accent);
    color: var(--ft-surface);
    font-size: var(--ft-fs-xs);
    font-weight: var(--ft-fw-bold);
    line-height: var(--ft-lh-tight);
}
.ft-pc__badge--sale { background: var(--ft-sale); }
.ft-pc__badge--muted { background: var(--ft-surface-alt); color: var(--ft-muted); }
.ft-pc .ft-pc__fav,
.ft-pc button.ft-pc__fav {
    position: absolute;
    top: var(--ft-space-2);
    right: var(--ft-space-2);
    z-index: 2;
    display: grid;
    place-items: center;
    width: var(--ft-tap);
    height: var(--ft-tap);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ft-ink);
    box-shadow: none;
    cursor: pointer;
    transition: color var(--ft-dur-fast) var(--ft-ease);
}
.ft-pc .ft-pc__fav svg { width: var(--ft-space-5); height: var(--ft-space-5); }
.ft-pc button.ft-pc__fav:hover,
.ft-pc button.ft-pc__fav:focus { background: transparent; color: var(--ft-sale); }
.ft-pc button.ft-pc__fav:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: -2px; }
.ft-pc__media {
    display: block;
    aspect-ratio: 4 / 3;
    margin: var(--ft-space-5) var(--ft-space-2) var(--ft-space-3);
}
.ft-pc__media img,
.ft-pc__img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}
.ft-pc__img--empty { border-radius: var(--ft-radius-md); background: var(--ft-surface-alt); }
.entry-content .ft-pc__name, .ft-pc .ft-pc__name {
    display: -webkit-box;
    min-height: calc(var(--ft-fs-sm) * 1.35 * 2);
    margin: 0 0 var(--ft-space-3);
    padding: 0;
    overflow: hidden;
    color: var(--ft-ink);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-medium);
    line-height: var(--ft-lh-snug);
    letter-spacing: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.entry-content .ft-pc__name a, .ft-pc .ft-pc__name a { color: inherit; text-decoration: none; }
.ft-pc .ft-pc__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--ft-radius-md); }
.ft-pc .ft-pc__name a:hover { color: var(--ft-accent); text-decoration: none; }
.ft-pc .ft-pc__name a:focus-visible { outline: none; }
.ft-pc .ft-pc__name a:focus-visible::after { outline: 2px solid var(--ft-accent); outline-offset: 2px; }
.ft-pc__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ft-space-2);
    margin-top: auto;
}
.ft-pc__price {
    min-width: 0;
    color: var(--ft-ink);
    font-size: var(--ft-fs-h3);
    font-weight: var(--ft-fw-display);
    line-height: var(--ft-lh-tight);
    font-variant-numeric: tabular-nums;
}
.ft-pc__price del { display: block; color: var(--ft-muted); font-size: var(--ft-fs-xs); font-weight: var(--ft-fw-medium); }
.ft-pc__price ins { color: var(--ft-sale); text-decoration: none; }
.ft-pc__price .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ft-pc__price small, .ft-pc__price .woocommerce-price-suffix { display: block; color: var(--ft-muted); font-size: var(--ft-fs-xs); font-weight: var(--ft-fw-body); }
.entry-content .ft-pc__cart, .ft-pc .ft-pc__cart {
    position: relative;
    z-index: 2;
    display: grid;
    flex: none;
    place-items: center;
    width: var(--ft-tap);
    height: var(--ft-tap);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ft-radius-md);
    background: var(--ft-brand);
    color: var(--ft-surface);
    text-decoration: none;
    transition: background-color var(--ft-dur-fast) var(--ft-ease);
}
.ft-pc .ft-pc__cart svg { width: var(--ft-space-5); height: var(--ft-space-5); }
.entry-content .ft-pc__cart:hover, .ft-pc .ft-pc__cart:hover { background: var(--ft-accent); color: var(--ft-surface); }
.ft-pc .ft-pc__cart--more { background: var(--ft-surface-alt); color: var(--ft-ink); }
.entry-content .ft-pc__cart--more:hover, .ft-pc .ft-pc__cart--more:hover { background: var(--ft-ink); color: var(--ft-surface); }
.ft-pc .ft-pc__cart:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; }
.ft-pc .ft-pc__cart.loading { opacity: 0.7; }
.ft-pc .added_to_cart { display: none; }

/* Serce ulubionych (karta produktu, strona produktu): stan z aria-pressed, zapełnione w kolorze promocji */
.ft-fav svg { fill: none; transition: fill var(--ft-dur-fast) var(--ft-ease); }
.ft-fav[aria-pressed="true"],
.ft-pc button.ft-pc__fav[aria-pressed="true"],
.entry-content .ft-btn--secondary.ft-fav[aria-pressed="true"],
.ft-btn--secondary.ft-fav[aria-pressed="true"] { color: var(--ft-sale); }
.ft-btn--secondary.ft-fav[aria-pressed="true"] { border-color: var(--ft-sale); }
.ft-fav[aria-pressed="true"] svg { fill: currentColor; }

/* Krótkie podbicie elementu po zmianie stanu (serce, licznik w nagłówku). Klasę dokłada ft-core-js. */
@keyframes ft-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.ft-bump { animation: ft-bump var(--ft-dur) var(--ft-ease-out); }
.entry-content a.ft-btn--icon, .ft-btn--icon { width: var(--ft-tap-lg); min-width: var(--ft-tap-lg); min-height: var(--ft-tap-lg); padding: 0; }
.ft-btn--icon svg { width: var(--ft-space-5); height: var(--ft-space-5); }

/* Karta artykułu według makiety: zdjęcie z kategorią, tytuł i strzałka.
   Znaczniki: article.ft-post > a.ft-post__media > img + span.ft-post__badge, div.ft-post__body > h2|h3.ft-post__title > a */
.ft-post {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-md);
    background: var(--ft-surface);
    color: var(--ft-ink);
    transition: border-color var(--ft-dur-fast) var(--ft-ease), box-shadow var(--ft-dur-fast) var(--ft-ease);
}
.ft-post:hover { border-color: var(--ft-accent); box-shadow: var(--ft-shadow-2); }
.entry-content .ft-post__media, .ft-post__media {
    position: relative;
    display: block;
    aspect-ratio: 21 / 9;
    background: var(--ft-surface-alt);
}
.ft-post__media img, .ft-post__img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
}
.ft-post__badge {
    position: absolute;
    bottom: var(--ft-space-3);
    left: var(--ft-space-3);
    padding: var(--ft-space-1) var(--ft-space-2);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-accent);
    color: var(--ft-surface);
    font-size: var(--ft-fs-xs);
    font-weight: var(--ft-fw-bold);
    line-height: var(--ft-lh-tight);
}
.ft-post__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--ft-space-2);
    padding: var(--ft-space-4);
}
.ft-post__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ft-space-3); margin-top: auto; }
.entry-content .ft-post__title, .ft-post .ft-post__title {
    margin: 0;
    color: var(--ft-ink);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-body);
    font-weight: var(--ft-fw-bold);
    line-height: var(--ft-lh-snug);
    letter-spacing: 0;
}
.entry-content .ft-post__title a, .ft-post .ft-post__title a { color: inherit; text-decoration: none; }
.ft-post .ft-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ft-post .ft-post__title a:focus-visible { outline: none; }
.ft-post .ft-post__title a:focus-visible::after { outline: 2px solid var(--ft-accent); outline-offset: -2px; border-radius: var(--ft-radius-md); }
.ft-post:hover .ft-post__title { color: var(--ft-accent); }
.ft-post__meta { margin: 0; color: var(--ft-muted); font-size: var(--ft-fs-xs); font-variant-numeric: tabular-nums; }
.entry-content .ft-post__excerpt, .ft-post__excerpt { margin: 0; color: var(--ft-muted); font-size: var(--ft-fs-sm); line-height: var(--ft-lh-body); }
.ft-post__arrow { flex: none; width: var(--ft-space-5); height: var(--ft-space-5); color: var(--ft-brand); }

/* ==========================================================================
   6B. PŁYWAJĄCY KOSZYK I SZUFLADA (od 1.7.0)
   Znaczniki wypisuje moduł wyglad w stopce, zachowanie daje skrypt ft-koszyk.
   button.ft-fab > span.ft-fab__icon > svg + span.ft-fab__count, span.ft-fab__total
   dialog.ft-drawer > div.ft-drawer__panel > header.ft-drawer__head + div.ft-drawer__body + footer.ft-drawer__foot
   ========================================================================== */
button.ft-fab {
    position: fixed;
    right: var(--ft-space-4);
    bottom: max(var(--ft-space-4), env(safe-area-inset-bottom));
    z-index: var(--ft-z-sticky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ft-space-3);
    width: var(--ft-tap-lg);
    height: var(--ft-tap-lg);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ft-radius-pill);
    background: var(--ft-accent);
    color: var(--ft-surface);
    box-shadow: var(--ft-shadow-3);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-bold);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--ft-dur-fast) var(--ft-ease), opacity var(--ft-dur) var(--ft-ease-out), transform var(--ft-dur) var(--ft-ease-out), display var(--ft-dur) allow-discrete;
}
button.ft-fab:hover,
button.ft-fab:focus { background: var(--ft-accent-hover); color: var(--ft-surface); box-shadow: var(--ft-shadow-3); }
button.ft-fab:focus-visible { outline: 2px solid var(--ft-ink); outline-offset: 3px; }
button.ft-fab[hidden] { display: none; opacity: 0; transform: translateY(var(--ft-space-4)) scale(0.9); }
@starting-style {
    button.ft-fab:not([hidden]) { opacity: 0; transform: translateY(var(--ft-space-4)) scale(0.9); }
}
.ft-fab__icon { position: relative; display: inline-flex; }
.ft-fab__icon svg { width: var(--ft-space-5); height: var(--ft-space-5); flex: none; }
.ft-fab__count {
    position: absolute;
    top: calc(var(--ft-space-3) * -1);
    right: calc(var(--ft-space-3) * -1);
    display: grid;
    place-items: center;
    min-width: calc(var(--ft-space-4) + var(--ft-space-1));
    height: calc(var(--ft-space-4) + var(--ft-space-1));
    padding: 0 var(--ft-space-1);
    border: 2px solid var(--ft-accent);
    border-radius: var(--ft-radius-pill);
    background: var(--ft-surface);
    color: var(--ft-accent);
    font-size: var(--ft-fs-xs);
    font-weight: var(--ft-fw-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.ft-fab__total { display: none; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Na telefonie przycisk chowa się, gdy klient pisze w polu formularza (klasę dokłada ft-koszyk) */
html.ft-typing button.ft-fab { opacity: 0; transform: translateY(var(--ft-space-4)); pointer-events: none; }

/* Przycisk Do góry motywu Astra stoi nad pływającym koszykiem, zamiast pod nim */
html.ft-fab-on #ast-scroll-top { bottom: calc(max(var(--ft-space-4), env(safe-area-inset-bottom)) + var(--ft-tap-lg) + var(--ft-space-3)); }

@media (min-width: 768px) {
    button.ft-fab {
        right: var(--ft-space-5);
        bottom: max(var(--ft-space-5), env(safe-area-inset-bottom));
        width: auto;
        padding: 0 var(--ft-space-5) 0 var(--ft-space-4);
    }
    .ft-fab__total { display: inline; }
    html.ft-fab-on #ast-scroll-top { bottom: calc(max(var(--ft-space-5), env(safe-area-inset-bottom)) + var(--ft-tap-lg) + var(--ft-space-3)); }
}

/* Szuflada: natywny dialog wysuwany z prawej. Zasłona, Esc i pułapka fokusu przychodzą z przeglądarki. */
dialog.ft-drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(calc(100% - var(--ft-space-7)), var(--ft-drawer-w));
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--ft-surface);
    color: var(--ft-ink);
    box-shadow: var(--ft-shadow-3);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-body);
    line-height: var(--ft-lh-body);
    overflow: hidden;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--ft-dur) var(--ft-ease-out), overlay var(--ft-dur) allow-discrete, display var(--ft-dur) allow-discrete;
}
dialog.ft-drawer[open] { transform: none; }
@starting-style {
    dialog.ft-drawer[open] { transform: translateX(100%); }
}
dialog.ft-drawer::backdrop {
    background: color-mix(in oklab, var(--ft-surface-dark, #1A2A30) 55%, transparent);
    opacity: 0;
    transition: opacity var(--ft-dur, 320ms) var(--ft-ease, ease-out), overlay var(--ft-dur, 320ms) allow-discrete, display var(--ft-dur, 320ms) allow-discrete;
}
dialog.ft-drawer[open]::backdrop { opacity: 1; }
@starting-style {
    dialog.ft-drawer[open]::backdrop { opacity: 0; }
}
html:has(dialog.ft-drawer[open]) { overflow: hidden; }
.ft-drawer *, .ft-drawer *::before, .ft-drawer *::after { box-sizing: border-box; }

.ft-drawer__panel { display: flex; flex-direction: column; height: 100%; }
.ft-drawer__head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--ft-space-3);
    min-height: calc(var(--ft-tap) + var(--ft-space-4));
    padding: 0 var(--ft-space-2) 0 var(--ft-space-5);
    background: var(--ft-surface-dark);
    color: var(--ft-surface);
}
.ft-drawer .ft-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--ft-space-2);
    margin: 0;
    color: var(--ft-surface);
    font-family: var(--ft-font-body);
    font-size: var(--ft-fs-body);
    font-weight: var(--ft-fw-display);
    line-height: var(--ft-lh-tight);
    letter-spacing: 0;
}
.ft-drawer__count {
    display: inline-grid;
    place-items: center;
    min-width: var(--ft-space-5);
    height: var(--ft-space-5);
    padding: 0 var(--ft-space-2);
    border-radius: var(--ft-radius-pill);
    background: var(--ft-brand);
    color: var(--ft-surface);
    font-size: var(--ft-fs-xs);
    font-variant-numeric: tabular-nums;
}
.ft-drawer__count:empty { display: none; }
.ft-drawer button.ft-drawer__close {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--ft-tap);
    height: var(--ft-tap);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ft-radius-sm);
    background: transparent;
    color: var(--ft-surface);
    box-shadow: none;
    cursor: pointer;
    transition: color var(--ft-dur-fast) var(--ft-ease);
}
.ft-drawer button.ft-drawer__close:focus { background: transparent; color: var(--ft-surface); }
.ft-drawer button.ft-drawer__close:hover { background: transparent; color: var(--ft-accent-on-dark); }
.ft-drawer button.ft-drawer__close:focus-visible { outline: 2px solid var(--ft-accent-on-dark); outline-offset: -2px; }
.ft-drawer__close svg { width: var(--ft-space-5); height: var(--ft-space-5); }

.ft-drawer__body {
    flex: 1;
    min-height: 0;
    padding: var(--ft-space-4) var(--ft-space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.ft-drawer__foot {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--ft-space-3);
    padding: var(--ft-space-4) var(--ft-space-5) max(var(--ft-space-4), env(safe-area-inset-bottom));
    border-top: 1px solid var(--ft-border);
    background: var(--ft-surface);
}
.ft-drawer__foot[hidden] { display: none; }
.ft-drawer__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ft-space-2); }
.ft-drawer__actions .ft-btn { padding-inline: var(--ft-space-3); }

/* Lista produktów w szufladzie */
.ft-drawer .ft-mini { margin: 0; padding: 0; list-style: none; }
.ft-mini__item {
    display: grid;
    grid-template-columns: var(--ft-space-8) minmax(0, 1fr);
    align-items: start;
    gap: var(--ft-space-3);
    margin: 0;
    padding: var(--ft-space-4) 0;
    border-bottom: 1px solid var(--ft-border);
}
.ft-mini__item:first-child { padding-top: 0; }
.ft-drawer .ft-mini__media {
    display: block;
    width: var(--ft-space-8);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-surface-alt);
}
.ft-mini__media img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; }
.ft-mini__info { display: flex; flex-direction: column; gap: var(--ft-space-1); min-width: 0; }
.ft-mini__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ft-space-2); }
.ft-drawer .ft-mini__name {
    display: -webkit-box;
    overflow: hidden;
    color: var(--ft-ink);
    font-size: var(--ft-fs-sm);
    font-weight: var(--ft-fw-bold);
    line-height: var(--ft-lh-snug);
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color var(--ft-dur-fast) var(--ft-ease);
}
.ft-drawer .ft-mini__name:hover { color: var(--ft-accent); text-decoration: none; }
.ft-drawer .ft-mini__name:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: 2px; }
.ft-drawer .ft-mini__meta,
.ft-drawer .ft-mini__unit { margin: 0; color: var(--ft-muted); font-size: var(--ft-fs-xs); line-height: var(--ft-lh-snug); }
.ft-mini__unit { font-variant-numeric: tabular-nums; }
.ft-mini__unit del { margin-left: var(--ft-space-1); color: var(--ft-muted); }
.ft-mini__unit--sale > span { color: var(--ft-sale); font-weight: var(--ft-fw-bold); }
.ft-mini__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ft-space-2) var(--ft-space-3); margin-top: var(--ft-space-2); }
.ft-mini__total { font-weight: var(--ft-fw-display); font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity var(--ft-dur-fast) var(--ft-ease); }
.ft-mini__fixed { color: var(--ft-muted); font-size: var(--ft-fs-sm); }
.ft-mini .ft-qty { grid-template-columns: var(--ft-tap) var(--ft-space-7) var(--ft-tap); }
.ft-drawer button.ft-mini__remove {
    display: grid;
    place-items: center;
    width: var(--ft-tap);
    height: var(--ft-tap);
    margin: calc(var(--ft-space-3) * -1) calc(var(--ft-space-3) * -1) 0 0;
    padding: 0;
    border: 0;
    border-radius: var(--ft-radius-sm);
    background: transparent;
    color: var(--ft-muted);
    box-shadow: none;
    cursor: pointer;
    transition: color var(--ft-dur-fast) var(--ft-ease);
}
.ft-drawer button.ft-mini__remove:focus { background: transparent; color: var(--ft-muted); }
.ft-drawer button.ft-mini__remove:hover { background: transparent; color: var(--ft-danger); }
.ft-drawer button.ft-mini__remove:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: -2px; }
.ft-mini__remove svg { width: var(--ft-space-5); height: var(--ft-space-5); }

.ft-mini__empty { display: flex; flex-direction: column; align-items: center; gap: var(--ft-space-4); padding: var(--ft-space-7) var(--ft-space-2); color: var(--ft-muted); text-align: center; }
.ft-mini__empty[hidden] { display: none; }
.ft-mini__empty p { margin: 0; }
.ft-mini__empty-icon { display: grid; place-items: center; width: var(--ft-space-8); height: var(--ft-space-8); border-radius: 50%; background: var(--ft-surface-alt); color: var(--ft-accent); }
.ft-mini__empty-icon svg { width: var(--ft-space-6); height: var(--ft-space-6); }

.ft-drawer .ft-mini__msg {
    margin: 0 0 var(--ft-space-4);
    padding: var(--ft-space-3) var(--ft-space-4);
    border-left: 3px solid var(--ft-danger);
    border-radius: var(--ft-radius-sm);
    background: color-mix(in oklab, var(--ft-danger) 8%, var(--ft-surface));
    color: var(--ft-danger);
    font-size: var(--ft-fs-sm);
    line-height: var(--ft-lh-snug);
}
.ft-drawer .ft-mini__msg[hidden] { display: none; }

.ft-mini__sum { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ft-space-3); margin: 0; }
.ft-mini__sum dt { font-weight: var(--ft-fw-bold); }
.ft-mini__sum dd { margin: 0; font-size: var(--ft-fs-h3); font-weight: var(--ft-fw-display); font-variant-numeric: tabular-nums; white-space: nowrap; transition: opacity var(--ft-dur-fast) var(--ft-ease); }
.ft-drawer .ft-mini__note { margin: 0; color: var(--ft-muted); font-size: var(--ft-fs-xs); line-height: var(--ft-lh-snug); }
.ft-drawer.is-busy .ft-mini__total,
.ft-drawer.is-busy .ft-mini__sum dd { opacity: 0.45; }

/* Licznik ilości wygrywa z regułami Astry dla przycisków i pól liczbowych także po kliknięciu */
.ft-qty button.ft-qty__btn,
.ft-qty button.ft-qty__btn:focus { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ft-ink); box-shadow: none; }
.ft-qty button.ft-qty__btn:hover { background: var(--ft-accent-soft); color: var(--ft-accent); }
.ft-qty button.ft-qty__btn:focus-visible { outline: 2px solid var(--ft-accent); outline-offset: -2px; }
.ft-qty button.ft-qty__btn[disabled] { opacity: 0.4; pointer-events: none; }
.ft-qty button.ft-qty__btn svg { width: var(--ft-space-4); height: var(--ft-space-4); }
.ft-qty input.ft-qty__input,
.ft-qty input.ft-qty__input:focus {
    height: auto;
    min-height: var(--ft-tap);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}

/* ==========================================================================
   7. RUCH. Wejście w kadr. Sekcja tylko dodaje klasę, obserwator jest w ft-core-js.
   ========================================================================== */
.ft-reveal {
    opacity: 0;
    transform: translateY(var(--ft-space-4));
    transition: opacity var(--ft-dur) var(--ft-ease-out), transform var(--ft-dur) var(--ft-ease-out);
}
.ft-reveal.is-visible { opacity: 1; transform: none; }
.ft-reveal[data-delay="1"] { transition-delay: calc(var(--ft-dur-fast) / 2); }
.ft-reveal[data-delay="2"] { transition-delay: var(--ft-dur-fast); }
.ft-reveal[data-delay="3"] { transition-delay: calc(var(--ft-dur-fast) * 1.5); }

/* Bez JS treść ma być widoczna od razu */
@media (scripting: none) {
    .ft-reveal { opacity: 1; transform: none; }
    .ft-cable:not(.is-visible) .ft-cable__fill { clip-path: inset(0 calc(100% - var(--ft-cable-progress) * 100%) 0 0 round var(--ft-radius-pill)); }
}

/* ==========================================================================
   8. POMOCNICZE
   ========================================================================== */
.ft-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.ft-center { text-align: center; }
.ft-center .ft-lead { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
    .ft-reveal { opacity: 1; transform: none; transition: none; }
    .ft-bump { animation: none; }
    button.ft-fab,
    dialog.ft-drawer,
    dialog.ft-drawer::backdrop { transition: none; }
    .ft-btn:hover,
    .ft-card--hover:hover,
    .ft-card--product:hover,
    .ft-card--product:hover .ft-card__media img { transform: none; }
    .ft-cable__fill { transition: none; }
    .ft-cable:not(.is-visible) .ft-cable__fill { clip-path: inset(0 calc(100% - var(--ft-cable-progress) * 100%) 0 0 round var(--ft-radius-pill)); }
}

/* ==========================================================================
   HISTORIA ZMIAN
   1.7.0  pływający koszyk .ft-fab, szuflada .ft-drawer, lista .ft-mini, licznik ilości odporny na Astrę
   1.6.2  serce w podglądzie bez przycisku ma rozmiar i miejsce przycisku
   1.6.1  serce zaznaczone w kolorze promocji, animacja .ft-bump
   1.6.0  komponenty sklepu: .ft-pc, .ft-post, .ft-pc-grid, .ft-post-grid, .ft-chips, .ft-page-head, .ft-fav
   1.5.0  makieta strony głównej: .ft-heading z kreską, .ft-eyebrow--dash, .ft-checks
   1.4.0  styl z makiety: Manrope 800, wyszukiwarka, .ft-heading, .ft-card--accent, .ft-icon-tile
   1.2.2  wyrównanie kontenera także na stronach sklepu
   1.2.1  pola wygrywają z Astrą, kontener treści wyrównany
   1.2.0  komponent okruszków .ft-breadcrumbs
   1.1.0  krój nagłówków Barlow Semi Condensed, kontrakt v1.2
   1.0.0  warstwa startowa Woltario na kontrakcie v1.1
   ========================================================================== */