/* Strona produktu w wygladzie „premium minimal” (jak /oferty: cenu-api, home-api).

   To jest SKORKA na istniejacy markup, nie nowy uklad. Struktura strony produktu
   (hero, kafelki pojemnosci, panel ceny, wiersz oferty) jest zmierzona co do piksela
   pod jedno: zeby pierwsza oferta stala jak najwyzej — patrz CLAUDE.md, sekcje
   „Hero strony produktu” i „Wiersz oferty”. Ten arkusz zmienia kolory, krój, ramki
   i zaokraglenia; WYSOKOSCI moga tylko malec. Kazda zmiana tutaj = pomiar pozycji
   `.fr-offer` przy 360/390/768/1280/1440 px przed i po (test: diag_product_design_e2e.py).

   Mechanizm: Tailwind 4 czyta kolory, kroje i grubosci ze zmiennych (`--color-slate-500`,
   `--font-outfit`, `--font-weight-normal`...), wiec przemapowanie ich na body.fx-page
   zmienia cala strone bez ruszania setek klas.

   Kolor: AKCJE zostaja w czerwieni marki (`--color-accent`, `--color-offer-button` NIE sa
   przemapowane): „Idz do sklepu”, alert cenowy, wybrana pojemnosc. Czarna wersja
   (pierwsza iteracja) wygladala sterylnie i „grobowo” — ocena wlasciciela 23.10.2026.
   Czern zostaje dla tekstu, ceny i stanu „wybrane” w zakladkach i koncentracjach. */

/* ---------- paleta ----------
   Cieple szarosci zamiast slate sa w fx-base.css (wspolne z naglowkiem i stopka wszystkich
   stron fx). Tu tylko to, czego uzywa wylacznie strona produktu: tla kart i zielen
   („Dostawa gratis”, dostepnosc) w odcieniu --fx-save zamiast jaskrawej zieleni Tailwinda. */
html:not(.dark-mode) body.fx-page {
  --color-border: var(--fx-line);
  --color-card-bg: #fff;
  --color-product-bg: #fff;
  --color-green-50: #e7f1ea;
  --color-green-100: #d3e6da;
  --color-green-400: #2f8a5e;
  --color-green-500: #1d6b46;
  --color-green-600: #1d6b46;
  --color-green-700: #165536;
  --color-green-800: #11452c;
  --color-emerald-500: #1d6b46;
  --color-emerald-600: #1d6b46;
  --color-emerald-700: #165536;
}

/* ---------- kontener: szerzej od 1280 px (wiecej kafelkow w rzedzie = nizszy hero) ---------- */
@media (min-width: 1280px) {
  body.fx-page > main { max-width: 1440px; padding-left: var(--fx-gutter); padding-right: var(--fx-gutter); }
}

/* ---------- powierzchnie: bez cieni, cienka linia ---------- */
.fx-page main .fr-surface { background: var(--fx-bg); border: 1px solid var(--fx-line); border-radius: var(--fx-card-r); box-shadow: none; }
.fx-page main .fr-card:hover { border-color: var(--fx-line-strong); box-shadow: none; }

/* ---------- okruchy ---------- */
.fx-page .fr-crumbs { color: var(--fx-muted); font-size: 13px; }
.fx-page .fr-crumbs a:hover { color: var(--fx-fg); }

/* ---------- hero: zdjecie na scenie, tytul ciezszy i ciasniejszy ---------- */
.fx-page .product-img-bg.fr-surface { background: var(--fx-stage); border: 0; }
.fx-page .product-img-bg img { mix-blend-mode: multiply; }
.fx-page .fr-hero__title h1 { font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; color: var(--fx-fg); }
.fx-page .fr-title-brand { font-weight: 400; }
.fx-page .fr-hero__title p { color: var(--fx-muted); }
.fx-page .fr-hero__badge > button { background: rgba(255, 255, 255, .86); border: 1px solid var(--fx-line); color: var(--fx-ink-2); -webkit-backdrop-filter: none; backdrop-filter: none; letter-spacing: .06em; }
.dark-mode .fx-page .fr-hero__badge > button { background: rgba(16, 19, 24, .78); border-color: var(--fx-line-strong); color: var(--fx-fg); }

/* ---------- koncentracje ---------- */
.fx-page .fr-chiprow:not(.fr-chiprow--sizes) > a,
.fx-page .fr-chiprow:not(.fr-chiprow--sizes) > div { border-color: var(--fx-line); background: var(--fx-bg); color: var(--fx-ink-2); }
.fx-page .fr-chiprow:not(.fr-chiprow--sizes) > a:hover { border-color: var(--fx-fg); color: var(--fx-fg); }
.fx-page .fr-chiprow:not(.fr-chiprow--sizes) > .fr-chip--active { background: var(--color-slate-900); border-color: var(--color-slate-900); color: #fff; }
.dark-mode .fx-page .fr-chiprow:not(.fr-chiprow--sizes) > .fr-chip--active { background: var(--color-accent); border-color: var(--color-accent); }

/* ---------- pojemnosci: kafelki w trzech liniach (rozmiar, zl/ml, cena) ----------
   Probowana byla niska pigulka w dwoch liniach: na telefonie kafelek robil sie ~2x szerszy
   i w kadrze miescilo sie mniej pojemnosci, a na desktopie wynik zalezal od produktu
   (szesc pojemnosci przy 1280 px = dwa rzedy, oferta +13 px). Zostaje dawny uklad
   i szerokosci, zmienia sie tylko ramka i zaokraglenie (`--fx-tile-r`, to samo co koncentracje). */
.fx-page .fr-chiprow--sizes > a,
.fx-page .fr-chiprow--sizes > div > button { border-width: 1px; border-color: var(--fx-line); background: var(--fx-bg); box-shadow: none; padding-top: 9px; padding-bottom: 9px; }
.fx-page .fr-chiprow--sizes > a:hover,
.fx-page .fr-chiprow--sizes > div > button:hover { border-color: var(--color-accent); }
.fx-page .fr-chiprow--sizes > a.fr-chip--active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.fx-page .fr-chiprow--sizes > a.fr-chip--active > .absolute { display: none; }
.fx-page .fr-chiprow--sizes > a span:first-child { letter-spacing: .02em; }
.fx-page .fr-chiprow--sizes > a span:last-child { font-weight: 600; }

/* ---------- panel ceny ---------- */
.fx-page #price-preview-panel button.border-green-600 { border-width: 1px; border-color: var(--fx-line-strong); color: var(--fx-fg); }
.fx-page #price-preview-panel button.border-green-600:hover { border-color: var(--fx-fg); background: transparent; }

/* ---------- zakladki ---------- */
.fx-page .fr-tabs__list { border-bottom-color: var(--fx-line); }
.fx-page .fr-tabs__list > li > a,
.fx-page .fr-tabs__list > li > button { font-weight: 600; }

/* ---------- naglowek listy ofert ---------- */
.fx-page #offers h2 { font-weight: 700; letter-spacing: -0.02em; }
.fx-page #offers h2 .fa-tag { display: none; }
.fx-page #offers select { border-color: var(--fx-line); }
.fx-page #offers select:hover { border-color: var(--fx-fg); }
.fx-page #offers > div:first-child .rounded-lg.border { border-color: var(--fx-line); }

/* ---------- lista ofert: wiersze rozdzielone linia zamiast osobnych kart ----------
   Karty mialy po 8 px przerwy (`space-y-2`) i wlasna ramke z cieniem — wiersze z linia
   sa NIZSZE o te przerwy, wiec przy tej samej pozycji pierwszej oferty w pierwszym
   ekranie miesci sie wiecej ofert. */
.fx-page #offers > ul { border-top: 1px solid var(--fx-line); }
.fx-page #offers > ul > li { margin-top: 0 !important; border: 0; border-bottom: 1px solid var(--fx-line); border-radius: 0; background: transparent; box-shadow: none; }
.fx-page #offers > ul > li:hover { background: var(--fx-soft); }
.fx-page #offers > ul > li.ring-1 { box-shadow: inset 3px 0 0 var(--fx-save); }
.fx-page .fr-offer__store { font-weight: 600; letter-spacing: -0.01em; }
.fx-page .fr-offer__store:hover, .fx-page .group:hover .fr-offer__store { color: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fx-page .fr-offer__price { color: var(--fx-fg); font-weight: 600; letter-spacing: -0.02em; }
.fx-page .fr-offer__perml { letter-spacing: .04em; color: var(--fx-muted); }
.fx-page .fr-offer__cta { background: var(--color-offer-button); color: #fff; }
.fx-page .group:hover .fr-offer__cta { background: var(--color-offer-button-hover); }
.fx-page .fr-offer__cta i { opacity: .6; }
.fx-page .fr-offer__logo { border-radius: 6px; }
@media (min-width: 768px) {
  /* Wiersz ma juz linie podzialu na dole — druga linia nad paskiem linkow tylko szatkowala liste. */
  .fx-page .fr-offer__links, .fx-page .fr-offer__note,
  .dark-mode .fx-page .fr-offer__links, .dark-mode .fx-page .fr-offer__note { background: transparent; border-top-color: transparent; }
}

/* ---------- reszta zakladek i sekcji ---------- */
.fx-page main h2 { letter-spacing: -0.02em; }

/* ---------- zaokraglenia jak na /oferty ----------
   Przyciski, zakladki, select, pola i przyciski-ikony = pigulki, jak na liscie. Koncentracje
   i kafelki pojemnosci = 10 px (decyzja wlasciciela 23.10.2026). Panel ceny = 16 px.
   Wczesniej byly pigulki, 4 px i prostokatne „Idz do sklepu” naraz (regula dla zawartosci
   zakladek po cichu nadpisywala przycisk). Lista w :is() niesie identyfikatory, wiec ta
   regula wygrywa z kazda inna tutaj i z utility Tailwinda (`rounded-lg`, `rounded-full`). */
body.fx-page { --fx-ctl-r: 999px; --fx-card-r: 16px; --fx-tile-r: 10px; }
body.fx-page :is(
  .fr-tabs__list > li > a, .fr-tabs__list > li > button,
  #price-preview-panel button, .fr-hero__badge > button,
  #offers select, #offers > div:first-child .rounded-lg.border, #offers button.w-full,
  .fr-offer__cta, main a.rounded-lg:not(.fr-chiprow a), main button.rounded-lg:not(.fr-chiprow button), main a.rounded-full, main button.rounded-full:not(.w-5):not(.w-6):not(.w-7),
  #main-header input[type="search"], #main-header form button[type="submit"], #main-header nav > a, #main-header nav > div > button, #main-header nav > button
) { border-radius: var(--fx-ctl-r); }
body.fx-page :is(#price-preview-panel, #variantsListContainer) { border-radius: var(--fx-card-r); }
/* Koncentracje i pojemnosci: jeden promien, mniejszy niz pigulka — kafelek pojemnosci ma trzy
   linie i jako pigulka robil sie owalem. Regula pigulek wyzej je wyklucza (`:not(.fr-chiprow a)`). */
body.fx-page main :is(.fr-chiprow > a, .fr-chiprow > div:not(.relative), .fr-chiprow--sizes > div > button) { border-radius: var(--fx-tile-r); }

/* ---------- tryb ciemny: powierzchnie i linie z tokenow fx ---------- */
.dark-mode .fx-page main .fr-surface { background: transparent; }
.dark-mode .fx-page .product-img-bg.fr-surface { background: var(--fx-stage); }

/* ---------- „Jak pachnie?”: zwarta karta, ktora miesci sie w jednym zrzucie ekranu ----------
   Dotad na telefonie sekcja miala 2820 px (nuty jako kwadraty 80 px, po dwa w rzedzie),
   wiec nikt nie mogl jej objac jednym screenshotem. Teraz: naglowek karty z nazwa produktu
   i „fragrank.pl” (zrzut sam mowi, co i skad), nuty jako okragle miniatury (6 w rzedzie na telefonie),
   cienkie paski akordow, zwarte trwalosc/projekcja/pora roku. Tresc ta sama na telefonie
   i desktopie (zasada parytetu) — zmienia sie tylko gestosc. Zakres: [data-fx="scents"],
   bo partial akordow siedzi tez w zakladce opisu. */
.fx-page [data-fx="scents"] .fx-sc-hint { background: var(--fx-bg); border: 1px solid var(--fx-line); border-radius: var(--fx-card-r); padding: 14px 16px; margin-bottom: 16px; }
.fx-page [data-fx="scents"] .fx-sc-hint .w-8 { background: var(--fx-soft); border-radius: 999px; }
.fx-page [data-fx="scents"] .fx-sc-card { position: relative; border-radius: 20px; margin-bottom: 40px; }

.fx-sc-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--fx-line); }
.fx-sc-cardname { margin: 0; min-width: 0; font-size: 17px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; color: var(--fx-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-sc-cardname > span { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-muted); }
.fx-sc-mark { flex: none; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 17px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--color-accent, #9b062c); }

.fx-page [data-fx="scents"] .fx-sc-card > .p-6 { padding: 28px; }
.fx-page [data-fx="scents"] .fx-sc-grid { gap: 28px 40px; }
.fx-page [data-fx="scents"] .fx-sc-grid h3 { letter-spacing: .2em; }
.fx-page [data-fx="scents"] .fx-sc-grid .mb-8,
.fx-page [data-fx="scents"] .fx-sc-grid .mb-10 { margin-bottom: 16px; }

/* akordy: cienkie pigulki; bialy napis dostaje cien, bo czesc kolorow z Fragrantiki jest
   bardzo jasna (tuberoza, pudrowy) i napis na nich ginal */
.fx-page [data-fx="scents"] .accord-bars-track { gap: 5px; }
.fx-page [data-fx="scents"] .accord-bar-row { height: 28px; border-radius: 999px; background-color: var(--fx-soft); }
.fx-page [data-fx="scents"] .accord-bar-label { font-size: 11px; letter-spacing: .1em; text-shadow: 0 0 3px rgba(0, 0, 0, .45), 0 1px 1px rgba(0, 0, 0, .3); }

/* piramida: poziomy jeden pod drugim, nuty jako okragle miniatury */
/* Tailwind 4 robi `space-y-*` DOLNYM marginesem (margin-block-end) — trzeba go zerowac,
   a nie dokladac gornego, inaczej odstep jest suma obu. */
.fx-page [data-fx="scents"] :is(.fx-sc-pyramid, .fx-sc-stats) > * { margin-block-end: 0; }
.fx-page [data-fx="scents"] .fx-sc-pyramid > * + * { margin-top: 22px; }
.fx-page [data-fx="scents"] .fx-sc-pyramid .mb-6 { margin-bottom: 10px; }
.fx-page [data-fx="scents"] .fx-sc-level-title { letter-spacing: .16em; }
.fx-page [data-fx="scents"] .fx-sc-notes { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 10px; align-items: start; }
.fx-page [data-fx="scents"] .fx-sc-note { width: auto; min-width: 0; }
.fx-page [data-fx="scents"] .fx-sc-note-img { width: 64px; height: 64px; margin-bottom: 6px; border-radius: 999px; background: var(--fx-stage); border: 1px solid var(--fx-line); }
.fx-page [data-fx="scents"] .fx-sc-note-img img { mix-blend-mode: multiply; }
.fx-page [data-fx="scents"] .fx-sc-note:hover .fx-sc-note-img { border-color: var(--fx-fg); }
.fx-page [data-fx="scents"] .fx-sc-note-label { font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--fx-ink-2); max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.fx-page [data-fx="scents"] .fx-sc-note.ring-2 { border-radius: 14px; }
.fx-page [data-fx="scents"] .fx-sc-chip { border-radius: 999px; background: var(--fx-soft); font-weight: 500; }
.fx-page [data-fx="scents"] .fx-sc-notes:has(.fx-sc-chip):not(:has(.fx-sc-note)) { display: flex; flex-wrap: wrap; gap: 6px; }

/* trwalosc, projekcja, pora roku: zwarty pas pod karta */
.fx-page [data-fx="scents"] .fx-sc-stats { margin-top: 8px; padding-top: 22px; }
.fx-page [data-fx="scents"] .fx-sc-stats > * + * { margin-top: 22px; }
.fx-page [data-fx="scents"] .fx-sc-meters { gap: 22px 40px; padding-bottom: 22px; }
.fx-page [data-fx="scents"] .fx-sc-meters .rounded-lg,
.fx-page [data-fx="scents"] .fx-sc-season .rounded-lg { border-radius: 999px; }
.fx-page [data-fx="scents"] .fx-sc-season { gap: 14px; }
.fx-page [data-fx="scents"] .fx-sc-season .w-14 { width: 44px; height: 44px; box-shadow: none; }

@media (max-width: 767px) {
  .fx-sc-cardhead { padding: 12px 16px; }
  .fx-sc-cardname { font-size: 15px; }
  .fx-sc-mark { font-size: 15px; }
  .fx-page [data-fx="scents"] .fx-sc-card { border-radius: 16px; margin-bottom: 28px; }
  .fx-page [data-fx="scents"] .fx-sc-card > .p-6 { padding: 16px; }
  .fx-page [data-fx="scents"] .fx-sc-grid { gap: 22px; }
  /* Dwie kolumny akordow i szesc nut w rzedzie: naglowek karty, akordy i piramida
     mieszcza sie wtedy w jednym ekranie telefonu, czyli w jednym zrzucie. */
  .fx-page [data-fx="scents"] .accord-bars-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 6px; }
  .fx-page [data-fx="scents"] .accord-bar-row { height: 26px; }
  .fx-page [data-fx="scents"] .accord-bar-row > .absolute.inset-0 { padding-left: 10px; padding-right: 8px; }
  .fx-page [data-fx="scents"] .accord-bar-label { font-size: 10px; letter-spacing: .06em; }
  /* os czasu piramidy (kreska i kropki) zjadala 40 px szerokosci — na telefonie poziom
     niesie sam kolorowy tytul */
  .fx-page [data-fx="scents"] .fx-sc-pyramid { padding-left: 0; }
  .fx-page [data-fx="scents"] .fx-sc-pyramid::before,
  .fx-page [data-fx="scents"] .fx-sc-pyramid > .relative > .absolute:first-child { display: none; }
  .fx-page [data-fx="scents"] .fx-sc-pyramid > * + * { margin-top: 16px; }
  .fx-page [data-fx="scents"] .fx-sc-pyramid .mb-6 { margin-bottom: 8px; }
  .fx-page [data-fx="scents"] .fx-sc-notes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 2px; }
  .fx-page [data-fx="scents"] .fx-sc-note-img { width: 46px; height: 46px; margin-bottom: 3px; }
  /* szesc kolumn po ~54 px: „Brzoskwinia”, „Mandarynka” nie mieszcza sie w jednej linii,
     wiec dziela sie z lacznikiem (html lang="pl"), zamiast sie ucinac */
  .fx-page [data-fx="scents"] .fx-sc-note-label { font-size: 10px; line-height: 1.15; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .fx-page [data-fx="scents"] .fx-sc-stats { padding-top: 16px; }
  .fx-page [data-fx="scents"] .fx-sc-meters { gap: 18px; padding-bottom: 16px; }
}

/* ---------- komunikat „Ten produkt jest aktualnie niedostepny” (nad lista ofert) ----------
   Byl na klasach amber Tailwinda; w ciemnym motywie `amber-200` to w dark-mode.css CIEMNE tlo
   plakietki (skala celowo niemonotoniczna), wiec tytul `dark:text-amber-200` znikal na tle.
   Teraz neutralna karta na tokenach --fx-* (same przelaczaja sie w trybie ciemnym), akcja
   „Powiadom mnie” w czerwieni marki jak pozostale akcje strony, „Podobne zapachy” z ramka. */
.fx-page .fr-unavail { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; padding: 18px 20px; border: 1px solid var(--fx-line); border-radius: var(--fx-tile-r, 10px); background: var(--fx-soft); color: var(--fx-fg); }
.fx-page .fr-unavail-ico { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border: 1px solid var(--fx-line); border-radius: 50%; background: var(--fx-bg); color: var(--fx-fg); font-size: 14px; }
.fx-page .fr-unavail-body { min-width: 0; padding-top: 1px; }
.fx-page .fr-unavail-title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--fx-fg); }
.fx-page .fr-unavail-text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--fx-ink-2); }
.fx-page .fr-unavail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fx-page .fr-unavail-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 1px solid var(--fx-line-strong); border-radius: var(--fx-ctl-r, 999px); background: var(--fx-bg); color: var(--fx-fg); font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
.fx-page .fr-unavail-btn:hover { border-color: var(--fx-fg); }
.fx-page .fr-unavail-btn i { font-size: 12px; }
.fx-page .fr-unavail-btn.is-primary { border-color: transparent; background: var(--color-accent, #9b062c); color: #fff; }
.fx-page .fr-unavail-btn.is-primary:hover { background: var(--color-accent-hover, #7f0525); }
.dark-mode .fx-page .fr-unavail-btn.is-primary, html.dark-mode body.fx-page .fr-unavail-btn.is-primary { background: var(--fr-accent-solid, #b5223b); }
@media (max-width: 640px) {
  .fx-page .fr-unavail { gap: 12px; padding: 16px; }
  .fx-page .fr-unavail-ico { width: 30px; height: 30px; font-size: 13px; }
}