/* =========================================================================
   theme.css — reset, zmienne, komponenty globalne.
   Wartości :root podmień na tokeny z projektu (Figma / prototyp) — nazwy zostają.
   Opis komponentów → DESIGN.md.
   ========================================================================= */

/* === Zmienne === */
:root {
    /* kolory */
    --c-dark: #000000;
    --c-dark-hover: #272727;
    --c-light: #FFFFFF;
    --c-light-hover: #E8EEF5;
    --c-bg: #FFFFFF;
    --c-bg-alt: #F1F6FB;          /* jasnoniebieskie tła kafli, stopka */
    --c-bg-soft: #F7FAFD;         /* boksy informacyjne */
    --c-bg-hover: #E8EEF5;
    --c-bg-pink: #F3E9F4;         /* aktywne filtry, zaznaczenia */
    --c-txt: #000000;
    --c-txt-2: #272727;
    --c-txt-muted: #54595F;
    --c-txt-soft: #6B6470;
    --c-icon: #3A3A3A;
    --c-accent: #94248C;          /* ceny, CTA, etykiety */
    --c-accent-dark: #741C6E;
    --c-accent-hover: #7E1F77;
    --c-blue: #0071BC;            /* linki, ikony */
    --c-blue-mid: #2F8FD3;
    --c-blue-light: #74B9E8;
    --c-line: #E1E0E7;
    --c-line-soft: #EEF2F7;
    --c-line-blue: #E3ECF5;
    --c-line-light: rgba(255, 255, 255, .5);
    --c-error: #C0262D;
    --c-success: #1F7A4D;
    --c-success-bg: #EEF6EF;
    --c-focus: #0071BC;

    /* gradienty */
    --grad-brand: linear-gradient(110deg, #74B9E8 0%, #0071BC 48%, #94248C 100%);
    --grad-text: linear-gradient(110deg, #2F8FD3 0%, #0071BC 40%, #94248C 100%);
    --grad-tile: linear-gradient(155deg, #0071BC 0%, #5B3FA6 55%, #94248C 100%);
    --grad-band: linear-gradient(105deg, #74B9E8 0%, #0071BC 52%, #94248C 100%);
    --grad-promo: linear-gradient(90deg, #E3F1FC 0%, #EEF6FD 50%, #F3E9F4 100%);

    /* typografia */
    --font-main: Jost, sans-serif;
    --font-head: costa, 'Alegreya Sans', Joan, serif;
    --fs-body: 16px;
    --lh-body: 1.5;

    /* ruch */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --t: .3s;

    /* wysokość headera (scroll-padding kotwic) */
    --header-h: 112px;

    /* kontenery */
    --container-w: 1440px;
    --container-pad: clamp(16px, 4vw, 60px);
    --container-wide-w: 1600px;
    --container-wide-pad: clamp(20px, 4vw, 64px);
    --container-xwide-w: 1760px;
    --container-xwide-pad: clamp(20px, 3vw, 48px);

    /* odstępy sekcji */
    --section-y: clamp(96px, 10vw, 168px);
    --section-y-sm: clamp(40px, 6vw, 80px);

    /* nagłówki — minimum min(px, vw): na 390px = projekt, poniżej maleje */
    --title-hero: clamp(min(40px, 10.2vw), 5vw, 80px);
    --title-xxl: clamp(min(40px, 10.2vw), 4.6vw, 68px);
    --title-xl: clamp(min(36px, 9.2vw), 4.4vw, 64px);
    --title-lg: clamp(min(36px, 9.2vw), 4vw, 60px);
    --title-md: clamp(min(30px, 7.7vw), 3vw, 44px);
    --title-sm: clamp(28px, 2.8vw, 40px);
    --title-xs: clamp(22px, 2vw, 28px);
    --title-xxs: 20px;
    --title-weight: 600;
    --title-weight-bold: 700;

    /* przyciski */
    --btn-font-size: 16px;
    --btn-font-weight: 500;
    --btn-ls: 0;
    --btn-radius: 999px;
    --btn-pad-y: 0;
    --btn-pad-x: 22px;
    --btn-h: 48px;
    --btn-icon: 46px;
}

/* === Reset === */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 20px);
}
body {
    margin: 0;
    overflow-x: clip;
    background: var(--c-bg);
    color: var(--c-txt);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin: 0;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--title-weight);
    line-height: 1.2;
}
img, svg, video, canvas, iframe {
    vertical-align: middle;
}
img, video {
    max-width: 100%;
    height: auto;
}
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t) var(--ease);
}
a:hover {
    color: var(--c-accent);
}
a, button {
    -webkit-tap-highlight-color: transparent;
}
[hidden] {
    display: none !important;
}
/* blokada przewijania pod oknem (menu mobilne, wyszukiwarka) */
html.is-locked {
    overflow: hidden;
}
strong, b {
    font-weight: 600;
}
button, input, select, textarea {
    font: inherit;
    color: inherit;
}
button {
    cursor: pointer;
}
address {
    font-style: normal;
}
:where(ul[class], ol[class]) {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* === Dostępność === */
:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 3px;
}
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === Animacje wspólne (okna, menu, liczniki) === */
@keyframes sa-fade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sa-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sa-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sa-slide-in {
    from { transform: translateX(100%); }
    to   { transform: none; }
}
@keyframes sa-pop {
    50%  { transform: scale(1.3); }
}

/* === Kontener === */
.container {
    max-width: 100%;
    width: var(--container-w);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
}
.container--wide {
    width: var(--container-wide-w);
    padding-left: var(--container-wide-pad);
    padding-right: var(--container-wide-pad);
}
.container--xwide {
    width: var(--container-xwide-w);
    padding-left: var(--container-xwide-pad);
    padding-right: var(--container-xwide-pad);
}

/* === Nagłówki === */
.title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: var(--title-weight);
    line-height: 1.08;
    text-wrap: balance;
    overflow-wrap: break-word;
}
.title--hero { font-size: var(--title-hero); line-height: 1;    letter-spacing: -.015em; }
.title--xxl  { font-size: var(--title-xxl);  line-height: 1; }
.title--xl   { font-size: var(--title-xl);   line-height: 1.02; }
.title--lg   { font-size: var(--title-lg);   line-height: 1;    letter-spacing: -.01em; }
.title--md   { font-size: var(--title-md);   line-height: 1.08; }
.title--sm   { font-size: var(--title-sm);   line-height: 1.08; }
.title--xs   { font-size: var(--title-xs);   line-height: 1.1; }
.title--xxs  { font-size: var(--title-xxs);  line-height: 1.2; }
.title--bold { font-weight: var(--title-weight-bold); }
/* wyróżnione słowo w nagłówku: <span class="title__accent"> */
.title__accent {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* === Etykieta nad nagłówkiem === */
.eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--c-accent);
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* === Nagłówek sekcji (template-parts/section-head.php) === */
.sechead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px 24px;
    margin-bottom: clamp(32px, 3.4vw, 52px);
}
.sechead__txt {
    min-width: 0;
}
.sechead__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.sechead__arrows {
    display: flex;
    gap: 8px;
}
@media (max-width: 999px) {
    .sechead__arrows {
        display: none;
    }
}

/* strzałka slidera */
.arrowbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-icon);
    height: var(--btn-icon);
    border: 1.5px solid var(--c-line);
    border-radius: 50%;
    background: var(--c-light);
    color: var(--c-blue);
    transition: background .2s, border-color .2s, opacity .2s, transform .12s;
}
.arrowbtn:hover {
    border-color: var(--c-blue);
    background: var(--c-bg-alt);
}
.arrowbtn:active {
    transform: scale(.94);
}
.arrowbtn:disabled {
    opacity: .35;
    cursor: default;
}

/* link tekstowy ze strzałką i podkreśleniem rosnącym na hover */
.linkarrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    background: linear-gradient(90deg, var(--c-accent), var(--c-accent)) 0 100% / 0 1.5px no-repeat;
    color: var(--c-blue);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    transition: background-size .5s var(--ease), color .3s var(--ease);
}
.linkarrow:hover {
    background-size: 100% 1.5px;
    color: var(--c-accent);
}

/* flaga PL (biało-czerwona) przy „Szyte w Polsce” */
.flagpl {
    display: inline-flex;
    flex-direction: column;
    flex: none;
    width: 20px;
    height: 14px;
    overflow: hidden;
    background: linear-gradient(#fff 50%, #DC143C 50%);
    box-shadow: 0 0 0 1px var(--c-line);
}

/* === Przyciski === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: var(--btn-h);
    border: 0;
    border-radius: var(--btn-radius);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: transparent;
    font-family: inherit;
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    letter-spacing: var(--btn-ls);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-position .6s var(--ease), background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .15s var(--ease);
}
.btn svg {
    flex-shrink: 0;
}
.btn:active {
    transform: scale(.98);
}
.btn--sm    { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn--lg    { min-height: 52px; padding: 0 26px; }
.btn--xl    { min-height: 58px; padding: 0 26px; }
/* główne CTA: fiolet z przesuwanym gradientem */
.btn--primary       { background: linear-gradient(110deg, var(--c-accent) 0%, var(--c-accent) 50%, var(--c-accent-dark) 100%) 0 0 / 220% 100%; color: var(--c-light); }
.btn--primary:hover { background-position: 100% 0; color: var(--c-light); }
/* białe CTA na zdjęciu (przesuwany gradient do jasnoniebieskiego) */
.btn--white         { background: linear-gradient(110deg, #fff 0%, #fff 44%, #E8EEF5 56%, #E8EEF5 100%) 0 0 / 250% 100%; color: var(--c-dark); }
.btn--white:hover   { background-position: 100% 0; color: var(--c-dark); }
/* jasne CTA na białym / zdjęciu */
.btn--soft          { background: linear-gradient(110deg, #F1F6FB 0%, #F1F6FB 44%, #E8EEF5 56%, #E8EEF5 100%) 0 0 / 250% 100%; color: var(--c-dark); }
.btn--soft:hover    { background-position: 100% 0; color: var(--c-dark); }
.btn--block { display: flex; width: 100%; white-space: normal; }
.btn--icon {
    width: var(--btn-icon);
    height: var(--btn-icon);
    padding: 0;
}
.btn--icon:hover svg {
    transform: none;
}
.btn--dark          { background: var(--c-dark); color: var(--c-light); }
.btn--dark:hover    { background: var(--c-accent); color: var(--c-light); }
.btn--light         { background: var(--c-light); color: var(--c-dark); }
.btn--light:hover   { background: var(--c-light-hover); color: var(--c-dark); }
.btn--outline       { background: var(--c-light); color: var(--c-dark); box-shadow: inset 0 0 0 1.5px var(--c-line); }
.btn--outline:hover { background: var(--c-bg-alt); color: var(--c-accent); box-shadow: inset 0 0 0 1.5px var(--c-line-blue); }
.btn--outline-light       { box-shadow: inset 0 0 0 1.5px var(--c-line-light); color: var(--c-light); }
.btn--outline-light:hover { background: var(--c-light); color: var(--c-dark); }
.btn--ghost         { color: inherit; }
.btn--ghost:hover   { background: var(--c-bg-alt); }

/* === Okruszki (listing, strona produktu, podstrony) === */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font: 400 14px/1.3 var(--font-main);
    color: var(--c-txt-soft);
}
.crumbs__link {
    color: var(--c-txt-soft);
    transition: color .2s;
}
.crumbs__link:hover {
    color: var(--c-accent);
}
.crumbs__current {
    color: var(--c-txt);
}

/* === Link „przejdź do treści” === */
.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--c-dark);
    color: var(--c-light);
    font-weight: 500;
}
.skip-link:focus {
    top: 16px;
    color: var(--c-light);
}

/* === Treść z edytora (WYSIWYG, the_content) === */
.content > * + * {
    margin-top: 1.1em;
}
.content > :is(h2, h3, h4) {
    margin-top: 1.8em;
}
.content h2 { font-size: var(--title-sm); line-height: 1.2; }
.content h3 { font-size: var(--title-xs); line-height: 1.25; }
.content h4 { font-size: var(--title-xxs); line-height: 1.3; }
.content a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.content a:hover {
    color: var(--c-txt-muted);
}
.content ul,
.content ol {
    padding-left: 1.3em;
}
.content li + li {
    margin-top: .4em;
}
.content blockquote {
    padding-left: 24px;
    border-left: 2px solid var(--c-line);
    font-size: 1.15em;
}
.content table {
    width: 100%;
    border-collapse: collapse;
}
.content th,
.content td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-line);
    text-align: left;
}
.content iframe {
    max-width: 100%;
}
.alignleft  { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption,
.wp-block-image figcaption {
    max-width: 100%;
    font-size: 14px;
    color: var(--c-txt-muted);
}

/* === Formularze (globalnie, CF7 i wyszukiwarka) === */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]), select, textarea) {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--btn-radius);
    background: var(--c-bg);
    line-height: 1.4;
}
textarea {
    min-height: 140px;
    resize: vertical;
}
.wpcf7 label {
    display: block;
}
.wpcf7-form-control-wrap {
    display: block;
    margin-top: 8px;
}
.wpcf7-list-item {
    display: block;
    margin: 0;
}
.wpcf7-list-item label {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.wpcf7-not-valid-tip {
    margin-top: 6px;
    font-size: 14px;
}

/* === Wyszukiwarka (searchform.php) === */
.searchform {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 5px 5px 18px;
    border: 1.5px solid var(--c-line);
    border-radius: 999px;
    background: var(--c-bg);
    transition: border-color .2s;
}
.searchform:focus-within {
    border-color: var(--c-blue);
}
.searchform__icon {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--c-txt-muted);
}
.searchform__input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font: 400 17px/1 var(--font-main);
    color: var(--c-txt);
    outline: none;
}
.searchform__btn {
    flex-shrink: 0;
    min-height: 44px;
}

/* === Paginacja === */
.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
}
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--btn-radius);
}
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
    background: var(--c-dark);
    border-color: var(--c-dark);
    color: var(--c-light);
}

/* === Grupa nagłówka: <header> obejmuje tylko eyebrow + h1/h2 — bez własnego pudełka, układ robi rodzic === */
.headgroup {
    display: contents;
}