/* ============================================================
   NailTek — arkusz stylów witryny
   Układ odwzorowuje pierwotny projekt www.nailtek.pl: „okienko ze
   zmieniającą się zawartością" o stałym, kwadratowym rozmiarze,
   otoczone z góry i z lewej kolorowymi kwadratami nawigacyjnymi.
   Kolorystyka: jasna i pastelowa, z elementami srebrzystymi.
   Barwy pochodzą z opakowań produktów.
   ============================================================ */

/* ---------- 1. Zmienne ---------- */
:root {
    /* pełne barwy opakowań — paski, kropki, obwódki */
    --k1: #28BA65;  --k2: #EE893D;  --k3: #DB167E;
    --k4: #865199;  --k5: #039D8E;  --k6: #0366B8;

    /* tony pośrednie — tła kafli i paneli. Rozjaśnione tak, żeby wszystkie
       miały zbliżoną jasność (L ≈ 0,50) i tworzyły spójną, jasną ścianę. */
    --k1m: #73D29B; --k2m: #F4B281; --k3m: #F1A2CB;
    --k4m: #C9B1D1; --k5m: #6FC7BE; --k6m: #9FC5E4;

    /* wersje bardzo ciemne — napisy na tonach pośrednich (kontrast ≥ 4,2:1) */
    --k1x: #0E5C2C; --k2x: #7E3D08; --k3x: #8A0B4E;
    --k4x: #4A2A5C; --k5x: #01564C; --k6x: #013A63;

    /* wersje jasne — plakietki, ramki, tła wyróżnień */
    --k1p: #DCF2E6; --k2p: #FCE8D6; --k3p: #FBDCEC;
    --k4p: #EEE4F2; --k5p: #D9F0ED; --k6p: #DCEBF8;

    /* wersje głębokie — przyciski (biały napis) */
    --k1d: #17803F; --k2d: #A85610; --k3d: #B01064;
    --k4d: #6B4080; --k5d: #027A6E; --k6d: #01548F;

    /* srebro — menu, logotyp, elementy neutralne */
    --ag:      #E7EAED;
    --ag-m:    #D8DEE3;
    --ag-x:    #3F474C;
    --ag-mid:  #9AA3AA;
    --ag-deep: #4A5359;
    --ag-line: #CDD3D8;
    --ag-hi:   #F4F6F7;
    --ag-logo: #6E7880;

    --typ-1: var(--k1); --typ-1-tint: var(--k1p);
    --typ-2: var(--k2); --typ-2-tint: var(--k2p);
    --typ-3: var(--k3); --typ-3-tint: var(--k3p);
    --typ-4: var(--k4); --typ-4-tint: var(--k4p);

    /* napisy w tonacji srebrnej — zamiast czerni */
    --ink:      #5A646B;
    --ink-soft: #7C868D;
    --line:     #E1E5E8;
    --line-2:   #EDF0F2;
    --paper:    #FFFFFF;
    --paper-2:  #F7F9FA;

    --gap:  14px;
    --wrap: 1400px;
    --pad:  16px;
    --title-h: 46px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--paper-2);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; border: 0; }
svg { display: block; }
a { color: var(--ink); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(21px, 2vw, 27px); letter-spacing: -.01em; }
h2 { font-size: clamp(18px, 1.7vw, 21px); }
h3 { font-size: 16px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .3em; }
em { font-style: italic; }
:focus-visible { outline: 3px solid var(--k6); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a.sr-only:focus {
    position: fixed; top: 10px; left: 10px; z-index: 200;
    width: auto; height: auto; margin: 0; padding: 12px 20px; clip: auto; overflow: visible;
    background: var(--ag-deep); color: #fff; font-weight: 700;
}

/* ---------- 3. Dodatkowe menu na samej górze ---------- */
.topbar {
    position: sticky; top: 0; z-index: 60;
    background: linear-gradient(180deg, var(--ag-hi), var(--ag));
    border-bottom: 1px solid var(--ag-line);
    color: var(--ag-deep); font-size: 13px;
}
/* margin: 0 auto — nie „0", bo skrót skasowałby wyśrodkowanie z .wrap
   i menu przestałoby się pokrywać z lewą krawędzią treści */
.topbar__inner { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; list-style: none; margin: 0 auto; padding-top: 0; padding-bottom: 0; }
.topbar a { color: var(--ag-deep); padding: 11px 10px; font-weight: 600; display: block; }
.topbar a:hover, .topbar a:focus-visible { color: var(--ink); background: rgba(255, 255, 255, .75); text-decoration: none; }
.topbar a[aria-current="page"] { color: var(--ink); background: var(--paper); box-shadow: inset 0 -3px 0 var(--ag-mid); }
.topbar__inner > li:first-child a { padding-left: 0; }
.topbar__ext { color: var(--ink-soft) !important; }

/* ---------- 4. Rama strony ---------- */
/* Siatka 5 kolumn. Okienko zajmuje 3 kolumny (3u + 2 odstępy), a kolumna kafli
   to 2 kolumny × 3 rzędy kwadratów, czyli również 3u + 2 odstępy wysokości.
   Obie wartości są z definicji równe, więc okienko jest kwadratem. */
/* skrót „padding" musi powtórzyć boczne wcięcie z .wrap — inaczej rama strony
   przylegałaby do krawędzi okna, a oba menu byłyby względem niej przesunięte */
.page { padding: var(--gap) var(--pad); }
.frame { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); align-items: start; }
.frame__logo   { grid-column: 1 / 3; grid-row: 1; align-self: stretch; }
.frame__t1     { grid-column: 3;     grid-row: 1; }
.frame__t2     { grid-column: 4;     grid-row: 1; }
.frame__hero   { grid-column: 5;     grid-row: 1; }
.frame__side   { grid-column: 1 / 3; grid-row: 2; }
.frame__window { grid-column: 3 / 6; grid-row: 2; }

/* prostokąt z logotypem — zawsze prowadzi na stronę główną */
.logo-block {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 5% 6%; text-align: center;
    background: var(--paper); border: 1px solid var(--line);
    transition: border-color .15s ease;
}
.logo-block:hover, .logo-block:focus-visible { text-decoration: none; border-color: var(--ag-mid); }
.logo-svg { width: 88%; max-width: 460px; height: auto; color: var(--ag-logo); }
.logo-block span {
    display: block; margin-top: 9px;
    font-size: clamp(9px, .78vw, 12px); font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft);
}

/* banner marki w prawym górnym rogu ramy */
.hero-block { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper); border: 1px solid var(--line); display: block; color: var(--ink); transition: transform .16s ease, border-color .16s ease; }
.hero-block:hover, .hero-block:focus-visible { text-decoration: none; transform: translateY(-2px); border-color: var(--ag-mid); }
.hero-block img { width: 100%; height: 100%; object-fit: cover; }
.hero-block p {
    position: absolute; inset: auto 0 0 0; margin: 0; padding: 9%;
    background: linear-gradient(to top, rgba(255, 255, 255, .97) 55%, rgba(255, 255, 255, .82) 78%, rgba(255, 255, 255, 0));
    color: var(--ink); font-weight: 700; line-height: 1.22; letter-spacing: -.01em;
    font-size: clamp(13px, 1.2vw, 17px);
}

/* ---------- 5. Pastelowe kwadraty nawigacyjne ---------- */
.side { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }

.tile {
    position: relative; overflow: hidden; aspect-ratio: 1 / 1;
    display: flex; align-items: flex-end; padding: 9%;
    background-color: var(--tp);
    /* delikatny połysk, żeby kolor nie był płaską plamą */
    background-image: linear-gradient(158deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 62%);
    box-shadow: inset 0 8px 0 var(--tc);
    color: var(--td);
    font-weight: 700; line-height: 1.2;
    font-size: clamp(14px, 1.35vw, 21px);
    transition: transform .16s ease, box-shadow .16s ease;
}
.tile::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .38); opacity: 0; transition: opacity .16s ease; }
.tile:hover, .tile:focus-visible { text-decoration: none; transform: translateY(-2px); }
.tile:hover::after { opacity: 1; }
.tile > span { position: relative; z-index: 1; }
.tile__sub, .tile__ext { display: block; margin-top: 4px; font-size: .7em; font-weight: 600; opacity: .82; letter-spacing: .01em; }
.tile[aria-current="page"] { box-shadow: inset 0 8px 0 var(--tc), inset 0 0 0 3px var(--tc); }

/* Kolumna kafli powtarza kolejność kolorów ze strony „Jaki masz typ paznokci?":
   zieleń, pomarańcz, róż, fiolet — a potem niebieski i turkus. */
.tile--marka      { --tp: var(--k6m); --tc: var(--k6); --td: var(--k6x); }
.tile--typy       { --tp: var(--k1m); --tc: var(--k1); --td: var(--k1x); }
.tile--strengthen { --tp: var(--k1m); --tc: var(--k1); --td: var(--k1x); }
.tile--ridge      { --tp: var(--k2m); --tc: var(--k2); --td: var(--k2x); }
.tile--special    { --tp: var(--k3m); --tc: var(--k3); --td: var(--k3x); }
.tile--pilniki    { --tp: var(--k4m); --tc: var(--k4); --td: var(--k4x); }
.tile--sklep      { --tp: var(--k6m); --tc: var(--k6); --td: var(--k6x); }
.tile--kontakt    { --tp: var(--k5m); --tc: var(--k5); --td: var(--k5x); }

/* ---------- 6. Szerokie bannery pod ramą ---------- */
.banners { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); list-style: none; margin: var(--gap) 0 0; padding: 0; }
.banners li { margin: 0; min-width: 0; }
.banner {
    display: grid; grid-template-columns: 34% 1fr; aspect-ratio: 3 / 1;
    overflow: hidden; background: var(--paper);
    border: 1px solid var(--line); border-top: 4px solid var(--c, var(--ag-mid));
    color: var(--ag-deep);
    transition: transform .16s ease, border-color .16s ease;
}
.banner:hover { text-decoration: none; transform: translateY(-2px); }
/* align-self: stretch zamiast height: 100% — procentowa wysokość nie rozwiązuje
   się względem wysokości wynikającej z aspect-ratio, przez co obrazek zachowywał
   własne proporcje i wystawał poza kadr bannera */
.banner img { width: 100%; height: auto; align-self: stretch; min-height: 0; object-fit: contain; padding: 5%; }
.banner--wide { grid-template-columns: 46% 1fr; }
.banner__txt { display: flex; flex-direction: column; justify-content: center; padding: 4% 6%; min-width: 0; }
.banner b { display: block; font-size: clamp(13px, 1.15vw, 17px); line-height: 1.2; color: var(--ag-deep); }
.banner small { display: block; margin-top: 5px; font-size: clamp(10.5px, .88vw, 12.5px); line-height: 1.35; color: var(--ink-soft); }

/* ---------- 7. Okienko ze zmieniającą się zawartością ---------- */
.window {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--paper); border: 1px solid var(--line); min-width: 0;
}
.window__title {
    flex: 0 0 auto; min-height: var(--title-h);
    display: flex; align-items: center; gap: 10px;
    padding: 8px 18px;
    background: var(--c-mid); color: var(--c-x);
    box-shadow: inset 0 5px 0 var(--c);
}
.window__title h1 { color: inherit; margin: 0; font-size: clamp(15px, 1.35vw, 20px); }
.window__title .crumbs { margin-left: auto; text-align: right; }
.window__sub { margin: 3px 0 0; font-size: 12.5px; line-height: 1.35; color: inherit; opacity: .8; }
.window__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: clamp(16px, 1.7vw, 24px); }
.window__body > :last-child { margin-bottom: 0; }
.window__body--flush { padding: 0; overflow: hidden; }
.window__body--pad2 { padding: var(--gap); }

.crumbs { font-size: 12px; color: inherit; opacity: .78; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.crumbs a { color: inherit; }

.lead { font-size: clamp(15px, 1.2vw, 17px); line-height: 1.55; color: var(--ink-soft); }
.prose { max-width: 68ch; }
.prose h2 { margin-top: 1.4em; }
.note { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- 8. Siatki wypełniające okienko ---------- */
.fill { display: grid; gap: var(--gap); height: 100%; }
.fill--2x2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.fill--1x2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; }
.fill li { margin: 0; min-width: 0; min-height: 0; }
ul.fill { list-style: none; margin: 0; padding: 0; }

/* ---------- 9. Karta produktu ---------- */
.p-card {
    position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0;
    background: var(--paper); border: 1px solid var(--line); color: var(--ink);
    transition: border-color .16s ease, transform .16s ease;
}
.p-card:hover, .p-card:focus-within { transform: translateY(-2px); border-color: var(--c, var(--ag-mid)); }
.p-card__bar { flex: 0 0 auto; height: 6px; background: var(--c, var(--ag-mid)); }
/* object-fit zamiast max-height:100% — procentowa wysokość obrazka nie działa
   wewnątrz elastycznego kontenera o wyliczanej wysokości */
.p-card__img { flex: 1 1 auto; min-height: 0; padding: 8%; }
.p-card__img img { width: 100%; height: 100%; object-fit: contain; }
.p-card__body { flex: 0 0 auto; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 3px; }
.p-card__name { font-size: clamp(14px, 1.15vw, 16px); font-weight: 700; margin: 0; line-height: 1.22; }
.p-card__name a { color: inherit; }
.p-card__name a::after { content: ""; position: absolute; inset: 0; }
.p-card__desc { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.35; }
.p-card__tag { margin: 4px 0 0; }

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; font-size: 11px; font-weight: 700; letter-spacing: .02em;
    background: var(--c-tint, var(--ag)); color: var(--c-deep, var(--ag-deep));
}
.pill--neutral { background: var(--ag); color: var(--ag-deep); }
.pill__dot { width: 7px; height: 7px; background: var(--c, currentColor); }

/* ---------- 10. Kwadrat typu paznokci / kategorii / sklepu ---------- */
.t-square, .c-square {
    position: relative; overflow: hidden; height: 100%;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 8%; background: var(--c-mid); color: var(--c-x);
    background-image: linear-gradient(158deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 62%);
    box-shadow: inset 0 8px 0 var(--c);
    transition: transform .16s ease;
}
.t-square::after, .c-square::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .38); opacity: 0; transition: opacity .16s ease; }
.t-square:hover, .t-square:focus-visible, .c-square:hover, .c-square:focus-visible { text-decoration: none; transform: translateY(-2px); }
.t-square:hover::after, .c-square:hover::after { opacity: 1; }
.t-square > *, .c-square > * { position: relative; z-index: 1; }
.t-square__num {
    flex: 0 0 auto; align-self: flex-start;
    width: 2.1em; height: 2.1em; display: grid; place-items: center;
    background: var(--c); color: #fff; font-size: clamp(16px, 1.5vw, 22px); font-weight: 700;
}
.t-square__name { display: block; font-size: clamp(14px, 1.3vw, 19px); font-weight: 700; line-height: 1.18; color: inherit; }
.t-square__desc { display: block; font-size: clamp(11.5px, .95vw, 13.5px); line-height: 1.35; margin: 6px 0 0; opacity: .9; }
.t-square__list { margin: 8px 0 0; padding-left: 1.05em; font-size: clamp(11px, .9vw, 13px); line-height: 1.4; opacity: .85; }
.t-square__list li { margin-bottom: 1px; }
.c-square h3 { color: inherit; font-size: clamp(15px, 1.35vw, 19px); margin: 0 0 6px; }
.c-square p { font-size: clamp(12px, 1vw, 14px); margin: 0; opacity: .9; }
.c-square__go { margin-top: auto; padding-top: 10px; font-size: 12.5px; font-weight: 700; }
.c-square__top { display: flex; flex-direction: column; }

/* ---------- 11. Pokaz slajdów na stronie głównej ---------- */
.slides { position: relative; height: 100%; overflow: hidden; }
/* Slajd to kolumna: grafika wpisana w wolną przestrzeń u góry, podpis pod nią.
   Wcześniej obrazek wypełniał kadr (`cover`) i był przycinany, a napis
   dodatkowo przykrywał jego dolną część. */
.slide {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; color: var(--ink);
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide:hover { text-decoration: none; }
.slide__img { flex: 1 1 0; min-height: 0; display: block; padding: clamp(14px, 2vw, 28px); padding-bottom: 0; }
.slide__img img { width: 100%; height: 100%; object-fit: contain; }
.slide__cap { flex: 0 0 auto; padding: clamp(14px, 1.8vw, 26px) clamp(16px, 2.2vw, 30px); }
.slide__cap b { display: block; font-size: clamp(17px, 1.9vw, 26px); line-height: 1.2; color: var(--ink); }
.slide__cap span { display: block; margin-top: 6px; font-size: clamp(12.5px, 1.1vw, 15px); color: var(--ink-soft); }
.slides__dots { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 7px; }
.slides__dots button { width: 13px; height: 13px; padding: 0; border: 2px solid var(--ag-mid); background: var(--paper); cursor: pointer; }
.slides__dots button[aria-current="true"] { background: var(--ag-deep); border-color: var(--ag-deep); }

/* ---------- 12. Karta produktu (widok szczegółowy) ---------- */
.product { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
/* białe tło pod packshotem — zdjęcia są przezroczystymi PNG-ami, więc produkt
   nie ma wokół siebie widocznego prostokąta */
.gallery__main {
    position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; padding: 6%;
    background: var(--paper); border: 1px solid var(--line-2); cursor: zoom-in;
    transition: border-color .16s ease;
}
.gallery__main:hover, .gallery__main:focus-visible { border-color: var(--c, var(--ag-mid)); }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.gallery__hint {
    position: absolute; right: 10px; bottom: 10px;
    padding: 5px 10px; font-size: 11.5px; font-weight: 700;
    background: var(--c-mid, var(--ag)); color: var(--c-x, var(--ag-x));
    opacity: 0; transition: opacity .16s ease; pointer-events: none;
}
.gallery__main:hover .gallery__hint, .gallery__main:focus-visible .gallery__hint { opacity: 1; }

/* Podgląd zdjęcia — leży wewnątrz okienka, więc mieści się w jego kwadracie.
   Kliknięcie w dowolnym miejscu, także w samo zdjęcie, zamyka podgląd. */
.lightbox {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    padding: clamp(18px, 3vw, 44px);
    background: var(--paper); cursor: zoom-out;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; cursor: zoom-out; }
.lightbox__close {
    position: absolute; top: 16px; right: 16px; z-index: 1;
    width: 44px; height: 44px; line-height: 1; font-size: 26px; font-weight: 700;
    background: var(--ag); color: var(--ag-x); border: 1px solid var(--ag-line); cursor: pointer;
}
.lightbox__close:hover { background: var(--ag-m); }
.gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; list-style: none; padding: 0; }
.gallery__thumbs li { margin: 0; }
.gallery__thumbs button { aspect-ratio: 1 / 1; width: 100%; padding: 7%; cursor: pointer; background: var(--paper); border: 1px solid var(--line); }
.gallery__thumbs button[aria-current="true"] { border-color: var(--c, var(--ag-mid)); box-shadow: inset 0 0 0 1px var(--c, var(--ag-mid)); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }

.product__line { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-deep, var(--ag-deep)); margin-bottom: 5px; }
.product__lead { font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.5; }
.product__head { border-bottom: 1px solid var(--line-2); padding-bottom: 14px; margin-bottom: 14px; }

.block { margin-bottom: 16px; }
.block h3 { font-size: 14.5px; margin-bottom: .3em; }
.block p { font-size: 14.5px; }
.block p:last-child { margin-bottom: 0; }
.callout { padding: 14px 16px; background: var(--c-tint, var(--ag)); border-left: 5px solid var(--c, var(--ag-mid)); }
.callout h3 { margin-bottom: .3em; color: var(--c-deep, var(--ink)); }
.callout p { font-size: 14.5px; }
.callout p:last-child { margin-bottom: 0; }

.specs { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.specs th, .specs td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.specs th { width: 44%; font-weight: 600; color: var(--ink-soft); }
.specs tr:nth-child(odd) { background: var(--paper-2); }

/* ---------- 13. Przyciski ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px; font-weight: 700; font-size: 14px; line-height: 1;
    background: var(--c-deep, var(--ag-deep)); color: #fff;
    border: 2px solid var(--c-deep, var(--ag-deep)); cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--c, var(--ink)); border-color: var(--c, var(--ink)); color: #fff; text-decoration: none; }
.btn--ghost { background: transparent; color: var(--ag-deep); border-color: var(--ag-line); }
.btn--ghost:hover { background: var(--ag); border-color: var(--ag-mid); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- 14. Oś nagród ---------- */
.awards { list-style: none; margin: 0; padding: 0; }
.awards li { margin: 0 0 14px; padding-left: 16px; border-left: 4px solid var(--ag-line); }
.awards li:hover { border-left-color: var(--ag-mid); }
.awards b { display: block; font-size: 14.5px; }
.awards p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* ---------- 15. Dodatkowe menu na samym dole ---------- */
.bottombar { background: linear-gradient(180deg, var(--ag), var(--ag-hi)); border-top: 1px solid var(--ag-line); color: var(--ag-deep); font-size: 13px; }
.bottombar__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; padding: 28px 0 20px; }
.bottombar h3 { color: var(--ink); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .9em; }
.bottombar ul { list-style: none; margin: 0; padding: 0; }
.bottombar li { margin-bottom: .4em; }
.bottombar a { color: var(--ag-deep); }
.bottombar a:hover { color: var(--ink); }
.bottombar__claim { color: #5C656B; font-size: 12.5px; margin: 10px 0 0; }
.bottombar__logo { display: block; }
.bottombar__logo .logo-svg { width: 132px; }
.bottombar__bar {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
    padding: 13px 0 20px; font-size: 12px; color: #5C656B;
    border-top: 1px solid var(--ag-line);
}

/* ---------- 16. Responsywność — kwadraty zostają kwadratami ---------- */
@media (max-width: 1180px) {
    .frame { grid-template-columns: repeat(3, 1fr); }
    .frame__logo   { grid-column: 1 / 3; grid-row: 1; }
    .frame__t1     { grid-column: 3;     grid-row: 1; }
    .frame__t2     { grid-column: 1;     grid-row: 2; }
    /* poniżej tej szerokości treść idzie przed ścianą kafli — inaczej trzeba by
       przewinąć całą nawigację, zanim pojawi się zawartość okienka */
    .frame__hero   { grid-column: 2 / 4; grid-row: 2; aspect-ratio: auto; }
    .frame__window { grid-column: 1 / 4; grid-row: 3; }
    .frame__side   { grid-column: 1 / 4; grid-row: 4; }
    .side { grid-template-columns: repeat(3, 1fr); }
    /* poniżej tej szerokości okienko rośnie z treścią zamiast przewijać się w środku */
    .window { aspect-ratio: auto; overflow: visible; }
    .window__body, .window__body--flush { overflow: visible; }
    .fill { height: auto; }
    .fill--2x2, .fill--1x2 { grid-template-rows: auto; }
    .fill--2x2 > li, .fill--1x2 > li { aspect-ratio: 1 / 1; }
    .slides { aspect-ratio: 1 / 1; height: auto; }
    .product { grid-template-columns: 1fr; }
    /* okienko przestaje być kwadratem, więc podgląd zdjęcia wychodzi na cały ekran */
    .lightbox { position: fixed; z-index: 200; padding: 16px; }
}
@media (max-width: 820px) {
    .bottombar__cols { grid-template-columns: repeat(2, 1fr); }
    .side { grid-template-columns: repeat(2, 1fr); }
    .banners { grid-template-columns: 1fr; }
    .banner, .banner--wide { aspect-ratio: 4 / 1; }
}
@media (max-width: 680px) {
    :root { --gap: 10px; --pad: 12px; }
    .frame { grid-template-columns: repeat(2, 1fr); }
    .frame__logo   { grid-column: 1 / 3; grid-row: 1; min-height: 22vw; }
    .frame__t1     { grid-column: 1;     grid-row: 2; }
    .frame__t2     { grid-column: 2;     grid-row: 2; }
    .frame__hero   { grid-column: 1 / 3; grid-row: 3; aspect-ratio: 2 / 1; }
    .frame__window { grid-column: 1 / 3; grid-row: 4; }
    .frame__side   { grid-column: 1 / 3; grid-row: 5; }
    .banner, .banner--wide { aspect-ratio: 3 / 1; }
    .fill--2x2, .fill--1x2 { grid-template-columns: 1fr; }
    .window__title { flex-wrap: wrap; }
    .window__title .crumbs { margin-left: 0; width: 100%; }
    .topbar a { padding: 8px 9px; font-size: 12.5px; }
}
@media (max-width: 420px) {
    .bottombar__cols { grid-template-columns: 1fr; }
}

/* ---------- 17. Druk ---------- */
@media print {
    .topbar, .bottombar, .banners, .frame__side, .frame__t1, .frame__t2, .frame__hero, .slides__dots, .cookiebar { display: none !important; }
    .frame { display: block; }
    .window { aspect-ratio: auto; border: 0; overflow: visible; }
    .window__body { overflow: visible; }
    body { background: #fff; font-size: 11pt; }
}

/* ---------- 18. Baner zgody na cookies + odnośniki prawne ---------- */
.cookiebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: center;
    padding: 14px clamp(12px, 3vw, 28px);
    background: var(--paper); color: var(--ink);
    border-top: 1px solid var(--ag-line);
    box-shadow: 0 -8px 24px rgba(63, 71, 76, .16);
}
.cookiebar[hidden] { display: none; }
.cookiebar p { margin: 0; font-size: 14px; line-height: 1.5; max-width: 72ch; }
.cookiebar a { text-decoration: underline; }
.cookiebar__btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 680px) {
    .cookiebar { flex-direction: column; align-items: flex-start; }
}

/* przycisk w stopce udający zwykły odnośnik ("Ustawienia cookies") */
.linklike {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer;
}
.linklike:hover, .linklike:focus-visible { text-decoration: underline; }