/* =====================================================================================
 * Sklep Unique Interior — motyw potomny „unique” na Hummingbirdzie (PrestaShop 9.2, Bootstrap 5.3).
 *
 * Ten plik to WARSTWA PLATFORMY, nie projekt motywu: (1) kroje marki, (2) tokeny marki (`--u-*`)
 * i (3) ich przełożenie na zmienne Bootstrapa (`--bs-*`), z których Hummingbird liczy KAŻDY kolor,
 * oraz (4) elementy marki z templates/ (odznaka, Pakiet Unique Plus, zamknięcie stopki). Pełny motyw
 * Unique (projekt od właściciela) buduje się na tych tokenach — selektorów Classic tu nie ma, bo
 * Hummingbird ma inną strukturę HTML.
 *
 * Hummingbird trzyma swoje style w warstwach kaskady (@layer bs-base, ps-components…). Ten plik jest
 * POZA warstwami, więc wygrywa z nimi bez `!important` i bez podbijania specyficzności — reguła
 * stąd zawsze bije regułę Hummingbirda. Nie owijać tego pliku w @layer (przegrałby wszystko).
 *
 * Kierunek „ciemna sala” (skill design-taste-frontend, seed 259519811): jedno ciemne pole, w nim
 * oświetlone rzeczy — jak kabina nocą z listwą LED z plakatu klienta. Czerń-espresso skóry, krem
 * pikowania, miedź światła — miedź TYLKO na akcji i cenie. Płasko: bez gradientów i poświat.
 *
 * Kroje (własne pliki, bez Google Fonts — RODO): Cormorant Garamond 300 do nagłówków, Onest do
 * tekstu, Great Vibes wyłącznie na hasłach. Wszystkie z cyrylicą (sklep jest też po rosyjsku).
 * ===================================================================================== */

@font-face { font-family: "Cormorant UI"; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant UI"; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-300-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Cormorant UI"; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/cormorant-garamond-cyrillic-300-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Onest UI"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/onest-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Onest UI"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/onest-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Onest UI"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/onest-cyrillic-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

:root {
  /* Pole i powierzchnie: krok tonu zamiast linii i cieni. */
  --u-bg: #efe3d0;        /* ciepły beż (decyzja klienta 2026-11-04: jasne, ciepłe, beżowe) */
  --u-surface: #e6d5bc;   /* panel o krok ciemniej */
  --u-surface-2: #dac5a6; /* pole formularza, wiersz po najechaniu */
  --u-ink: #2a1d13;       /* espresso — tekst, 12,9:1 na tle */
  --u-muted: #5f4b39;     /* drugi plan, 6,5:1 na tle */
  --u-accent: #865427;    /* ciemna miedź — akcja i cena; jasna miedź #c9955c na kremie miała 2,2:1 */
  --u-accent-hover: #6e4420;
  --u-accent-ink: #ffffff; /* 6,3:1 na miedzi */
  --u-sale: #9e3d26;      /* przecena — ciepła, 5,3:1 na tle */
  --u-field-line: #86705a;/* obrys pól formularza, 3,7:1 (formularze mogą mieć linie) */
  --u-display: "Cormorant UI", "Cormorant Garamond", Georgia, serif;
  --u-text: "Onest UI", "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- tokeny marki → Bootstrap 5.3 (Hummingbird) ----------------------------------------
 * Hummingbird ma jasny tryb `:root,[data-bs-theme=light]`; nadpisujemy go wprost, bez przełączania
 * na `data-bs-theme=dark` (to wymagałoby nadpisania pięciu układów stron, a dałoby szare odcienie
 * Bootstrapa zamiast naszych). Obok każdej zmiennej `-rgb`, bo Bootstrap składa z niej przezroczyste
 * odcienie (`rgba(var(--bs-…-rgb), .5)`). */
:root, [data-bs-theme=light] {
  color-scheme: dark;
  --bs-body-bg: var(--u-bg);                 --bs-body-bg-rgb: 239, 227, 208;
  --bs-body-color: var(--u-ink);             --bs-body-color-rgb: 42, 29, 19;
  --bs-emphasis-color: var(--u-ink);         --bs-emphasis-color-rgb: 42, 29, 19;
  --bs-heading-color: var(--u-ink);
  --bs-secondary-color: var(--u-muted);      --bs-secondary-color-rgb: 95, 75, 57;
  --bs-tertiary-color: var(--u-muted);       --bs-tertiary-color-rgb: 95, 75, 57;
  --bs-secondary-bg: var(--u-surface-2);     --bs-secondary-bg-rgb: 218, 197, 166;
  --bs-tertiary-bg: var(--u-surface);        --bs-tertiary-bg-rgb: 230, 213, 188;
  --bs-link-color: var(--u-ink);             --bs-link-color-rgb: 42, 29, 19;
  --bs-link-hover-color: var(--u-accent-hover); --bs-link-hover-color-rgb: 110, 68, 32;
  --bs-border-color: var(--u-field-line);
  --bs-border-color-translucent: rgba(42, 29, 19, .12);
  --bs-primary: var(--u-accent);             --bs-primary-rgb: 134, 84, 39;
  --bs-primary-text-emphasis: var(--u-accent-hover);
  --bs-primary-bg-subtle: #e9d6bb;
  --bs-primary-border-subtle: #c9a47c;
  --bs-secondary: var(--u-muted);            --bs-secondary-rgb: 95, 75, 57;
  --bs-danger: var(--u-sale);                --bs-danger-rgb: 158, 61, 38;
  --bs-light: var(--u-surface-2);            --bs-light-rgb: 218, 197, 166;
  --bs-dark: var(--u-ink);                   --bs-dark-rgb: 42, 29, 19;
  --bs-body-font-family: var(--u-text);
  --bs-font-sans-serif: var(--u-text);
  --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0;
  --bs-box-shadow-sm: none; --bs-box-shadow: none;
  --bs-focus-ring-color: rgba(134, 84, 39, .35);
  --bs-form-invalid-color: var(--u-sale); --bs-form-invalid-border-color: var(--u-sale);
}

::selection { background: var(--u-accent); color: var(--u-accent-ink); }
:focus-visible { outline: 2px solid var(--u-accent); outline-offset: 2px; }

/* Nagłówki: jasny szeryf, zdania zamiast wersalików. */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--u-display); font-weight: 300; text-transform: none;
  letter-spacing: -0.01em; line-height: 1.05; color: var(--u-ink);
}

/* Guziki: jeden kształt, miedź tylko na głównej akcji. Bootstrap 5.3 liczy guzik ze zmiennych. */
.btn { --bs-btn-font-weight: 600; --bs-btn-box-shadow: none; --bs-btn-border-radius: 0; }
/* Hummingbird wpisuje promienie guzików i plakietek wprost (nie z --bs-border-radius). */
.badge { --bs-badge-border-radius: 0; }
.btn-primary {
  --bs-btn-color: var(--u-accent-ink); --bs-btn-bg: var(--u-accent); --bs-btn-border-color: var(--u-accent);
  --bs-btn-hover-color: var(--u-accent-ink); --bs-btn-hover-bg: var(--u-accent-hover); --bs-btn-hover-border-color: var(--u-accent-hover);
  --bs-btn-active-color: var(--u-accent-ink); --bs-btn-active-bg: var(--u-accent-hover); --bs-btn-active-border-color: var(--u-accent-hover);
  --bs-btn-disabled-color: var(--u-accent-ink); --bs-btn-disabled-bg: var(--u-accent); --bs-btn-disabled-border-color: var(--u-accent);
  --bs-btn-focus-shadow-rgb: 134, 84, 39;
}
.btn-outline-primary, .btn-outline-secondary, .btn-secondary {
  --bs-btn-color: var(--u-ink); --bs-btn-bg: transparent; --bs-btn-border-color: rgba(42, 29, 19, .4);
  --bs-btn-hover-color: var(--u-ink); --bs-btn-hover-bg: var(--u-surface-2); --bs-btn-hover-border-color: var(--u-ink);
  --bs-btn-active-color: var(--u-ink); --bs-btn-active-bg: var(--u-surface-2); --bs-btn-active-border-color: var(--u-ink);
}

/* Cena i przecena: jedyne miejsca w miedzi poza akcją. */
.product__price, .product-miniature__price, .product-line__item-price { color: var(--u-accent); font-variant-numeric: tabular-nums; }

/* Plakietki na zdjęciu produktu: Hummingbird daje przecenie BIAŁE tło (--bs-white), które na
 * ciemnym polu świeci jak dziura. Przecena w kolorze przeceny, reszta w miedzi z ciemnym napisem. */
.product-flags .badge:not(.discount) { color: var(--u-accent-ink); }
.product-flags .badge.discount { background-color: var(--u-sale); border-color: var(--u-sale); color: var(--u-accent-ink); }
/* Rabat w koszyku ma klasę-narzędzie `.bg-primary`, a ta ma `!important` WEWNĄTRZ warstwy kaskady —
 * a `!important` z warstwy bije `!important` spoza warstw (odwrotnie niż zwykłe reguły). Nie walczymy
 * więc z regułą, tylko podmieniamy zmienną, z której ona liczy kolor. */
.product-line__item-discount { --bs-primary-rgb: 224, 122, 95; color: var(--u-accent-ink); }

/* =====================================================================================
 * Elementy marki (index.tpl, _partials/copyright.tpl): odznaka, hasła, Pakiet Unique Plus,
 * zamknięcie stopki. Odręczny krój (Great Vibes, z cyrylicą) WYŁĄCZNIE na hasłach z plakatu klienta
 * („Twój styl w trasie”, „Więcej niż wnętrze”, „Jedź z klasą!”) — nigdy w nagłówkach ani tekście.
 * ===================================================================================== */
@font-face { font-family: "Great Vibes UI"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/great-vibes-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Great Vibes UI"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/great-vibes-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Great Vibes UI"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/great-vibes-cyrillic-400-normal.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

.u-script { font-family: "Great Vibes UI", "Great Vibes", cursive; font-weight: 400; color: var(--u-accent); letter-spacing: 0; line-height: 1.1; }

/* Hero: odznaka jako jedyny „oświetlony” przedmiot pierwszego ekranu, obok nazwa i zdanie. */
.u-hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center; padding: clamp(2rem, 6vw, 6rem) 0 clamp(3rem, 7vw, 7rem);
}
.u-hero__badge { width: 100%; max-width: 360px; height: auto; justify-self: center; }
.u-hero__title {
  font-family: var(--u-display); font-weight: 300; text-transform: none; color: var(--u-ink);
  font-size: clamp(3rem, 1.6rem + 6vw, 7rem); line-height: .95; letter-spacing: -0.02em; margin: 0 0 1.25rem;
}
.u-hero__lead { font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); line-height: 1.5; max-width: 34ch; margin: 0 0 .75rem; color: var(--u-ink); }
.u-hero__tagline { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); margin: 0 0 2rem; }
.u-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.75rem; }
.u-hero__actions .btn { padding: .9rem 1.5rem; font-size: 1rem; }
.u-hero__facts { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; color: var(--u-muted); font-size: .9375rem; }

/* Pakiet: lista dwunastu elementów w jednym rozmiarze, obok zdjęcie i cena — pole o krok jaśniejsze. */
.u-package {
  background: var(--u-surface); padding: clamp(2rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 5rem);
  margin-bottom: clamp(3rem, 7vw, 7rem);
}
.u-package__head { grid-column: 1 / -1; }
.u-package__title {
  font-family: var(--u-display); font-weight: 300; text-transform: none; color: var(--u-ink);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.02em; margin: 0 0 .75rem;
}
.u-package__sub { color: var(--u-muted); font-size: 1.0625rem; margin: 0; max-width: 52ch; }
.u-package__list {
  list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem;
  font-family: var(--u-display); font-weight: 300; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem); line-height: 1.55; color: var(--u-ink);
}
.u-package__list li { break-inside: avoid; }
.u-package__photo { margin: 0; align-self: start; }
.u-package__photo img { display: block; width: 100%; max-width: 444px; height: auto; filter: brightness(.92); }
.u-package__photo figcaption { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); margin-top: .5rem; }
.u-package__price { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.5rem; }
.u-package__price-label { margin: 0; color: var(--u-muted); font-size: 1rem; }
.u-package__price-value {
  margin: 0; font-family: var(--u-display); font-weight: 300; color: var(--u-accent);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem); line-height: 1; letter-spacing: -0.01em;
  /* Cormorant ma domyślnie cyfry starodrukowe (jedynka jak „I”) — w cenie cyfry wersalikowe. */
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1;
}
.u-package__price .btn { margin-left: auto; padding: .9rem 1.5rem; }

/* Zamknięcie stopki: hasło i nazwa na całą szerokość. */
.u-close { padding: 3.5rem 0 2rem; text-align: center; }
.u-close__tagline { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); margin: 0 0 .5rem; }
.u-close__name {
  font-family: var(--u-display); font-weight: 300; text-transform: uppercase; color: var(--u-ink);
  font-size: clamp(2.5rem, 1rem + 7.5vw, 8.5rem); line-height: 1; letter-spacing: .08em; margin: 0;
  white-space: nowrap;
}
.u-close__est { color: var(--u-muted); font-size: .875rem; margin: 1rem 0 0; }

/* Logo w nagłówku: okrągła odznaka — Hummingbird ścina logo do 3rem, a odznaka jest okrągła
 * i przy tej wysokości napisy na niej stają się nieczytelne. */
.navbar-brand .logo { max-height: 4.5rem; max-width: none; width: auto; }

@media (max-width: 767px) {
  .u-hero { grid-template-columns: minmax(0, 1fr); text-align: left; padding-top: 1.5rem; }
  .u-hero__badge { max-width: 220px; justify-self: start; }
  .u-package { grid-template-columns: minmax(0, 1fr); padding: 1.75rem 1rem; }
  .u-package__list { columns: 1; }
  .u-package__price .btn { margin-left: 0; width: 100%; }
  .u-close__name { letter-spacing: .02em; font-size: 8.6vw; }
}

/* --- Stopka: ciemne espresso pod jasną stroną (decyzja 2026-11-04 przy przejściu na jasne tło).
 *     Hummingbird barwi `.footer__main` przez `--bs-dark` i `--bs-gray-300`/`--bs-white`; tu kolory
 *     wprost, żeby zmiana tokenów strony nie zgasiła tekstu stopki (tak wyszło na zrzucie: białe
 *     linki na kremie). Miedź w stopce jasna — ciemna miedź strony ginęłaby na espresso. --- */
#footer { background: #2a1d13; color: #d9cfc1; --bs-body-color: #d9cfc1; --bs-heading-color: #efe3d0; --bs-link-color: #d9cfc1; --bs-link-hover-color: #e3b884; }
#footer .footer-container, #footer .u-close, #footer [class*="newsletter"], #footer .bg-light, #footer .bg-body-tertiary { background: transparent !important; color: inherit; }
#footer h2, #footer h3, #footer h4, #footer .h4, #footer .footer-block__title, #footer .footer-block__title a { color: #efe3d0; }
#footer a, #footer .footer-block a, #footer .ps-contactinfo, #footer .ps-contactinfo a, #footer p, #footer label { color: #d9cfc1; }
#footer a:hover { color: #e3b884; }
#footer .form-control { background: #2b221b; border-color: #6b5a49; color: #efe3d0; }
#footer .form-control::placeholder { color: #b6a898; }
#footer .btn-primary { --bs-btn-bg: #c9955c; --bs-btn-border-color: #c9955c; --bs-btn-color: #2a1d13; --bs-btn-hover-bg: #e3b884; --bs-btn-hover-border-color: #e3b884; --bs-btn-hover-color: #2a1d13; }
#footer .u-close { margin: 0; padding-left: 1rem; padding-right: 1rem; }
#footer .u-close__tagline { color: #e3b884; }
#footer .u-close__name { color: #efe3d0; }
#footer .u-close__est { color: #b6a898; }
/* Newsletter (`.ps-emailsubscription.bg-body-tertiary`) zostaje JASNYM pasem nad ciemną stopką —
 * `.bg-body-tertiary` Hummingbirda ma `!important` w warstwie CSS, które bije nasze `!important`
 * (patrz „Lekcje”), więc zamiast walczyć o tło przywracamy mu kolory strony. */
#footer .ps-emailsubscription, #footer .ps-emailsubscription p, #footer .ps-emailsubscription .h3, #footer .ps-emailsubscription label { color: var(--u-ink); }
#footer .ps-emailsubscription p:not(.h3) { color: var(--u-muted); }
#footer .ps-emailsubscription .form-control { background: #f8f0e3; border-color: var(--u-field-line); color: var(--u-ink); }
#footer .ps-emailsubscription .form-control::placeholder { color: var(--u-muted); }
#footer .ps-emailsubscription .btn-primary { --bs-btn-bg: var(--u-accent); --bs-btn-border-color: var(--u-accent); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--u-accent-hover); --bs-btn-hover-border-color: var(--u-accent-hover); --bs-btn-hover-color: #fff; }

/* --- Konfigurator appki w sklepie (_partials/unique-configurator.tpl, cms/page.tpl). Ramka bez
 *     obramowania i bez własnego paska przewijania — wysokość podaje appka (postMessage); do tego
 *     czasu min-height, żeby strona nie skakała. --- */
.u-configurator { display: block; width: 100%; min-height: 80vh; border: 0; background: var(--u-bg); }
.page-content--cms .u-configurator { margin: 0 calc(-1 * var(--bs-gutter-x, .75rem) / 2); width: calc(100% + var(--bs-gutter-x, .75rem)); }
.u-configurator__hint { color: var(--u-muted); font-size: 1.0625rem; max-width: 60ch; margin: 0 0 1.5rem; }
.u-design-btn { display: block; width: 100%; margin-top: .75rem; padding: .85rem 1rem; font-weight: 600; text-align: center; }