/* ============================================================
   MOTYW „MałaMi" v3 — układ premium fashion, paleta MałaMi
   Wstrzykiwany per tenant przez nginx (sub_filter). Wspólny kod B2C
   pozostaje nietknięty — to warstwa indywidualizacji konkretnego sklepu.

   Wzorzec dużego sklepu modowego:
   • hero na pełną szerokość ekranu, kolor + zdjęcie 50/50, zero zaokrągleń
   • pasek prostokątnych kafelków kategorii pod hero
   • karty produktów: jednolite szare tło kadru, prostokątne badge, zwarta cena
   • jasna, czytelna stopka (nie czerń)
   • typografia wyłącznie bezszeryfowa, gruba, czarna; nagłówki do lewej
   Paleta: malina #e5397a + czerń #111114 + jasny szary #f4f4f6.
   ============================================================ */

:root {
  --mm-pink: #e5397a;
  --mm-pink-dark: #c2245f;
  --mm-pink-soft: #fde7f0;
  --mm-ink: #111114;
  --mm-bg: #f4f4f6;
  --mm-line: #e6e6ea;
  --mm-gray: #6b6b75;
}

/* ---------- 0. FUNDAMENT ---------- */
body, .bg-surface { background: #fff !important; color: var(--mm-ink); }
h1, h2, h3, h4, p, span, a, div { font-family: inherit !important; }  /* koniec serifów */
.max-w-\[1400px\] { max-width: min(95vw, 1720px) !important; }

/* ---------- 1. PASEK GÓRNY + HEADER ---------- */
.gradient-brand { background: var(--mm-ink) !important; }
.gradient-brand svg, .gradient-brand .text-sky-200 { color: var(--mm-pink) !important; }

header { background: #fff !important; border-bottom: 1px solid var(--mm-line); }
header img[alt] { height: 2.9rem !important; }
header input[type="text"], header input:not([type]) {
  border-radius: 2px !important; border: 1px solid var(--mm-line) !important; background: var(--mm-bg) !important;
}
header button[class*="bg-brand"] { background: var(--mm-pink) !important; border-radius: 2px !important; }
header button[class*="bg-brand"]:hover { background: var(--mm-pink-dark) !important; }
header button:has(svg[class*="lucide-shopping"]) {
  background: transparent !important; box-shadow: none !important;
  color: var(--mm-ink) !important; letter-spacing: 0 !important;
}
header button:has(svg[class*="lucide-shopping"]):hover { background: transparent !important; color: var(--mm-pink) !important; }
header span[class*="-top-2"] { background: var(--mm-pink) !important; border-radius: 9999px !important; }
button[class*="bg-brand"][class*="rounded-full"] { background: var(--mm-ink) !important; border-radius: 2px !important; }
button[class*="bg-brand"][class*="rounded-full"]:hover { background: #2b2b32 !important; }
nav a:hover { color: var(--mm-pink) !important; }

/* ---------- 2. HERO: pełna szerokość, 50/50, bez ramek ---------- */
section.pt-12.pb-10 { padding: 0 !important; }
section.pt-12.pb-10 > div { max-width: 100% !important; padding: 0 !important; }
[class*="rounded-2xl"][class*="shadow-lg"] {
  border-radius: 0 !important; box-shadow: none !important; border: 0 !important;
  min-height: 540px !important;
}
[class*="rounded-2xl"][class*="shadow-lg"] > div[style*="background"] { background: var(--mm-pink-soft) !important; }
[class*="rounded-2xl"][class*="shadow-lg"] h1,
[class*="rounded-2xl"][class*="shadow-lg"] h2 {
  color: var(--mm-ink) !important;
  font-size: clamp(2.6rem, 4vw, 4rem) !important;
  font-weight: 800 !important; line-height: 1.02 !important; letter-spacing: -0.02em !important;
}
[class*="rounded-2xl"][class*="shadow-lg"] p { color: #3a3a44 !important; font-size: 1.02rem !important; }
[class*="rounded-2xl"][class*="shadow-lg"] [class*="uppercase"] { color: var(--mm-pink-dark) !important; letter-spacing: 0.18em !important; }
[class*="rounded-2xl"][class*="shadow-lg"] a[style] {
  background: var(--mm-ink) !important; color: #fff !important;
  border-radius: 2px !important; padding: 1rem 2.2rem !important;
  font-size: 0.85rem !important; letter-spacing: 0.03em; text-transform: none;
}
[class*="rounded-2xl"][class*="shadow-lg"] a[style]:hover { background: var(--mm-pink) !important; }
.hidden.md\:flex.items-center.justify-center.relative > .absolute.inset-0.bg-white { background: transparent !important; }
.hidden.md\:flex.items-center.justify-center.relative > .relative.p-6 { padding: 0 !important; }
img[class*="max-h-\[200px\]"] {
  max-height: 100% !important; height: 100% !important; width: 100% !important;
  object-fit: cover !important; border-radius: 0 !important;
}

/* ---------- 3. KATEGORIE: pasek prostokątnych kafelków ---------- */
section:has(a[href*="/categor"]) > div > h2 { display: none !important; }
section:has(a[href*="/categor"]) [class*="grid"] { gap: 0.6rem !important; }
a[href*="/categor"] {
  border-radius: 0 !important; border: 0 !important; box-shadow: none !important;
  aspect-ratio: auto !important; min-height: 62px !important;
  background: var(--mm-pink-soft) !important;
  align-items: center !important; justify-content: center !important;
}
a[href*="/categor"] img { opacity: 0.16 !important; }
a[href*="/categor"]:hover img { opacity: 0.24 !important; transform: none !important; }
a[href*="/categor"] > div[class*="absolute"][class*="gradient"] { background: none !important; }
a[href*="/categor"] span, a[href*="/categor"] h3 {
  color: var(--mm-ink) !important; font-weight: 800 !important; font-size: 0.8rem !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important; text-shadow: none !important;
}
a[href*="/categor"]:hover { background: var(--mm-pink) !important; }
a[href*="/categor"]:hover span, a[href*="/categor"]:hover h3 { color: #fff !important; }

/* ---------- 4. KARTY PRODUKTÓW w stylw dużych sklepach modowych ---------- */
[class*="group"][class*="rounded"], article[class*="rounded"] {
  border-radius: 0 !important; border: 0 !important; box-shadow: none !important; background: #fff !important;
}
a[href*="/products/"] > div[class*="min-h"] {
  background: var(--mm-bg) !important; border-radius: 0 !important;
  padding: 0.5rem !important; margin-bottom: 0.8rem !important; min-height: 260px !important;
}
a[href*="/products/"] { padding: 0 !important; }
a[href*="/products/"] h3 {
  font-size: 0.88rem !important; font-weight: 600 !important; color: var(--mm-ink) !important;
  line-height: 1.35 !important; margin-bottom: 0.3rem !important;
}
a[href*="/products/"] [class*="text-4xl"] { font-size: 1.15rem !important; font-weight: 800 !important; }
[class*="text-red-6"], [class*="text-red-5"] { color: var(--mm-pink-dark) !important; }
[class*="bg-red-5"], [class*="bg-red-6"] { background: var(--mm-pink) !important; border-radius: 0 !important; font-size: 0.68rem !important; }
[class*="bg-green-5"], [class*="bg-emerald-5"] { background: var(--mm-ink) !important; border-radius: 0 !important; font-size: 0.68rem !important; }
button[class*="bg-brand"], a[class*="bg-brand"] { background: var(--mm-ink) !important; border-radius: 2px !important; }
button[class*="bg-brand"]:hover, .hover\:bg-brand-dark:hover { background: var(--mm-pink) !important; }

/* ---------- 5. NAGŁÓWKI SEKCJI: do lewej, grube, bez myślników ---------- */
section h2[class*="tracking"][class*="text-center"] {
  text-align: left !important; font-size: 0 !important;
  letter-spacing: -0.01em !important; text-transform: none !important;
}
section h2[class*="tracking"][class*="text-center"]::after {
  font-size: 1.7rem; font-weight: 800; color: var(--mm-ink); letter-spacing: -0.01em;
}
section.py-12.bg-white h2[class*="tracking"]::after { content: 'Okazje i polecane'; }
section.py-12.bg-surface h2[class*="tracking"]::after { content: 'Co mówią nasi klienci'; }
section.py-14 h2[class*="tracking"]::after { content: 'Poradnik MałaMi'; }

/* ---------- 6. KOLORY MARKI ---------- */
.bg-brand { background-color: var(--mm-ink) !important; }
.text-brand { color: var(--mm-pink) !important; }
.border-brand { border-color: var(--mm-pink) !important; }
[class*="bg-brand-soft"] { background: var(--mm-pink-soft) !important; }
[class*="bg-brand-soft"], [class*="bg-brand-soft"] a, [class*="bg-brand-soft"] span { color: var(--mm-ink) !important; }
[class*="hover:bg-brand-soft"]:hover { background: var(--mm-pink-soft) !important; color: var(--mm-ink) !important; }
[class*="hover:text-brand"]:hover { color: var(--mm-ink) !important; }
nav > a[class*="hover:text-brand"]:hover { color: var(--mm-pink) !important; }

/* ---------- 7. KARTA PRODUKTU ---------- */
button[class*="border"][class*="rounded"][class*="px-"] { border-radius: 2px !important; }
button[class*="border-brand"], button[class*="ring-"] {
  background: var(--mm-ink) !important; border-color: var(--mm-ink) !important; color: #fff !important;
}
main button:has(svg[class*="lucide-shopping"]) {
  background: var(--mm-ink) !important; border-radius: 2px !important; box-shadow: none !important;
}
main button:has(svg[class*="lucide-shopping"]):hover { background: var(--mm-pink) !important; }
svg[class*="fill-yellow"], [class*="text-yellow-4"] { color: #d9a406 !important; }

/* ---------- 8. NEWSLETTER ---------- */
section:has(input[type="email"]) { background: var(--mm-pink-soft) !important; }
section:has(input[type="email"]) button { background: var(--mm-ink) !important; border-radius: 2px !important; }

/* ---------- 9. STOPKA: jasna i czytelna ---------- */
footer { background: var(--mm-bg) !important; border-top: 1px solid var(--mm-line); }
footer, footer * { border-color: var(--mm-line) !important; }
footer h3, footer h4, footer [class*="uppercase"], footer [class*="font-bold"], footer [class*="font-semibold"] { color: var(--mm-ink) !important; }
footer p, footer li, footer span, footer address { color: var(--mm-gray) !important; }
footer a { color: #33333c !important; }
footer a:hover { color: var(--mm-pink) !important; }
footer img { background: transparent !important; padding: 0 !important; }
footer svg { color: var(--mm-pink) !important; }

/* ---------- 10. BLOG ---------- */
a[href*="/blog/"][class*="min-h"] h2 { color: #fff !important; font-size: clamp(1.5rem, 2.2vw, 2rem) !important; font-weight: 800 !important; }
a[href*="/blog/"][class*="min-h"] p, a[href*="/blog/"][class*="min-h"] span { color: rgba(255,255,255,.9) !important; }
[class*="grid"] a[href*="/blog/"] h2, [class*="grid"] a[href*="/blog/"] h3 { color: var(--mm-ink) !important; font-size: 1rem !important; }
div[class*="min-h-\[60vh\]"] > div > header > h1 { font-size: 0 !important; }
div[class*="min-h-\[60vh\]"] > div > header > h1::after {
  content: 'Poradnik MałaMi'; font-size: 2.2rem; font-weight: 800; color: var(--mm-ink);
}
div[class*="min-h-\[60vh\]"] > div > header > p:last-child { font-size: 0 !important; }
div[class*="min-h-\[60vh\]"] > div > header > p:last-child::after {
  content: 'Rozmiary, tkaniny, stylizacje — wiedza od polskiego producenta odzieży dla dziewczynek.';
  font-size: 0.9rem; color: var(--mm-gray);
}

/* ---------- 11. DROBIAZGI ---------- */
body > button[class*="fixed"], [class*="rounded-full"][class*="fixed"][class*="bottom"] { background: var(--mm-ink) !important; }

/* ---------- 12. DOCIĄGNIĘCIE UKŁADU (po pomiarach DOM) ---------- */
/* tło hero: gradient jest inline NA kontenerze .rounded-2xl — nadpisujemy wprost */
div[class*="rounded-2xl"][class*="shadow-lg"][style*="linear-gradient"] {
  background: var(--mm-pink-soft) !important;
}
/* siatka hero: zero paddingu po prawej, żeby zdjęcie dotykało krawędzi */
div[class*="rounded-2xl"][class*="shadow-lg"] > div[class*="grid"][class*="md:grid-cols-2"] {
  padding: 0 !important;
  gap: 0 !important;
  min-height: 540px !important;
  align-items: stretch !important;
}
/* lewa kolumna dostaje własny oddech */
div[class*="rounded-2xl"][class*="shadow-lg"] > div[class*="grid"] > div:first-child {
  padding: 4rem clamp(2rem, 5vw, 5.5rem) !important;
  display: flex !important; flex-direction: column !important; justify-content: center !important;
}
/* prawa kolumna: zdjęcie na całą wysokość i szerokość połowy */
div[class*="rounded-2xl"][class*="shadow-lg"] > div[class*="grid"] > div:last-child { padding: 0 !important; }

/* kafelki kategorii: PEŁNY kolor, bez prześwitujących zdjęć (jak paski w dużych sklepach modowych) */
a[href*="/categor"] { background: var(--mm-pink-soft) !important; }
a[href*="/categor"] img { display: none !important; }
a[href*="/categor"] > div[class*="absolute"] { position: static !important; background: none !important; padding: 0 !important; }
a[href*="/categor"] { padding: 1.15rem 1rem !important; }

/* strzałki karuzeli hero: czytelne na jasnym tle */
div[class*="rounded-2xl"][class*="shadow-lg"] button[class*="rounded-full"] {
  background: rgba(255,255,255,.9) !important; color: var(--mm-ink) !important;
}
/* kropki paginacji */
div[class*="rounded-2xl"][class*="shadow-lg"] [class*="h-1"][class*="rounded-full"]:not(button) { background: var(--mm-ink) !important; }

/* ---------- 13. DETALE KART I KARUZELI (runda 2) ---------- */
/* strzałki hero: półprzezroczysta biel na zdjęciu, nie czarne kółka */
div[class*="rounded-2xl"] button[class*="absolute"][class*="rounded-full"] {
  background: rgba(255,255,255,.82) !important; color: var(--mm-ink) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.12) !important; width: 2.6rem !important; height: 2.6rem !important;
}
div[class*="rounded-2xl"] button[class*="absolute"][class*="rounded-full"]:hover { background: #fff !important; }

/* badge na kartach: prostokątne, w palecie (nie zieleń/czerwień systemowa) */
[class*="bg-emerald"], [class*="bg-green"], [class*="bg-success"] {
  background: var(--mm-ink) !important; border-radius: 0 !important;
  font-size: 0.66rem !important; letter-spacing: 0.08em !important; font-weight: 700 !important;
}
[class*="bg-danger"], [class*="bg-red-"], [class*="bg-rose"] {
  background: var(--mm-pink) !important; border-radius: 0 !important;
  font-size: 0.66rem !important; letter-spacing: 0.08em !important; font-weight: 700 !important;
}
/* wyjątek: pasek zgód/cookies i przyciski akcji zostają jak są */
[class*="bg-danger"] button, button[class*="bg-danger"] { border-radius: 2px !important; }

/* cena: czarna; różowa dopiero gdy w karcie jest cena przekreślona (promocja) */
a[href*="/products/"] [class*="text-danger"] { color: var(--mm-ink) !important; }
a[href*="/products/"]:has([class*="line-through"]) [class*="text-danger"],
div:has(> a[href*="/products/"]) [class*="line-through"] ~ * [class*="text-danger"] { color: var(--mm-pink-dark) !important; }
[class*="line-through"] { color: var(--mm-gray) !important; font-weight: 500 !important; }
a[href*="/products/"] h3 { text-transform: none !important; }

/* karty i kafle na stronie głównej: bez zaokrągleń i cieni */
main [class*="rounded-2xl"], main [class*="rounded-xl"] { border-radius: 0 !important; }
main [class*="shadow-sm"], main [class*="shadow-md"] { box-shadow: none !important; }
main [class*="border-border"] { border-color: var(--mm-line) !important; }

/* kafelki kategorii: wyraźniejszy róż, niższe, ciaśniej (pasek kategorii) */
main a[href*="/categor"] {
  background: #fbdbe8 !important; min-height: 56px !important; padding: 0.95rem 1rem !important;
}
main a[href*="/categor"]:hover { background: var(--mm-pink) !important; }
section:has(a[href*="/categor"]) [class*="grid"] { gap: 0.5rem !important; }

/* ---------- 14. ZAWĘŻENIE REGUŁ KATEGORII + DETALE PODSTRON ---------- */
/* pasek różowych kafelków TYLKO na stronie głównej — sidebar, breadcrumb i menu zostają białe */
main aside a[href*="/categor"],
nav a[href*="/categor"],
[class*="breadcrumb"] a[href*="/categor"],
ol a[href*="/categor"], ol li a[href*="/categor"] {
  background: transparent !important; min-height: 0 !important; padding: 0.55rem 0.9rem !important;
  color: var(--mm-ink) !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 0.9rem !important; font-weight: 500 !important; justify-content: flex-start !important;
}
main aside a[href*="/categor"]:hover, nav a[href*="/categor"]:hover, ol a[href*="/categor"]:hover {
  background: var(--mm-bg) !important; color: var(--mm-pink-dark) !important;
}
main aside a[href*="/categor"] span, main aside a[href*="/categor"] h3 {
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 0.9rem !important;
}
main aside a[href*="/categor"]:hover span { color: var(--mm-pink-dark) !important; }
main aside [class*="bg-brand-soft"], main aside [class*="bg-pink"], [class*="breadcrumb"] [class*="bg-brand-soft"] {
  background: transparent !important;
}
main aside { background: #fff !important; }
main aside > div { border: 1px solid var(--mm-line) !important; border-radius: 0 !important; }
main aside h3, main aside [class*="uppercase"] {
  color: var(--mm-ink) !important; font-weight: 800 !important; letter-spacing: 0.06em !important;
}
main aside label { background: transparent !important; }

/* karta produktu: tytuł normalną wielkością liter, kadr bez zaokrągleń */
main h1 { text-transform: none !important; font-weight: 800 !important; letter-spacing: -0.02em !important; font-size: 1.9rem !important; }
main [class*="rounded-lg"], main img[class*="rounded"] { border-radius: 0 !important; }
main [class*="rounded-full"][class*="w-"][class*="h-"] { border-radius: 9999px !important; }

/* kadr zdjęcia na kartach: bardzo jasny, żeby białe tła zdjęć nie odstawały */
a[href*="/products/"] > div[class*="min-h"] { background: #fafafa !important; }
/* przycisk „Do koszyka" na hoverze: prostokątny pasek u dołu kadru */
main button:has(svg[class*="lucide-shopping"]) { border-radius: 2px !important; }

/* mniejsza pustka między paskiem kategorii a sekcją okazji */
section:has(a[href*="/categor"]) { padding-top: 1.6rem !important; padding-bottom: 0.4rem !important; }

/* ---------- 15. NEWSLETTER, TAGI BLOGA, KADRY (runda 3) ---------- */
/* newsletter: różowa sekcja + biała karta w środku (koniec niebieskiego pudełka) */
section:has(input[type="email"]) { background: var(--mm-pink-soft) !important; }
section:has(input[type="email"]) > div,
section:has(input[type="email"]) [class*="bg-blue"], section:has(input[type="email"]) [class*="from-blue"],
section:has(input[type="email"]) [class*="bg-sky"], section:has(input[type="email"]) [class*="bg-gradient"] {
  background: #fff !important; border-radius: 0 !important; border: 1px solid var(--mm-line) !important;
}
section:has(input[type="email"]) input { border-radius: 2px !important; border: 1px solid var(--mm-line) !important; }

/* tagi na kartach bloga: czytelne na zdjęciu */
a[href*="/blog"] [class*="uppercase"], article [class*="uppercase"][class*="text-xs"] {
  background: var(--mm-ink) !important; color: #fff !important; border-radius: 0 !important;
  padding: 0.28rem 0.6rem !important; letter-spacing: 0.1em !important;
}

/* kadr zdjęcia produktu: wyższy, produkty lepiej widoczne */
a[href*="/products/"] > div[class*="min-h"] { min-height: 330px !important; }

/* ---------- 16. PRZYWRÓCENIE PASKA KATEGORII (reguły z 14 były za szerokie) ---------- */
section:has(a[href*="/categor"]) a[href*="/categor"] {
  background: #fbdbe8 !important; min-height: 56px !important; padding: 0.95rem 1rem !important;
  justify-content: center !important;
}
section:has(a[href*="/categor"]) a[href*="/categor"] span,
section:has(a[href*="/categor"]) a[href*="/categor"] h3 {
  text-transform: uppercase !important; letter-spacing: 0.08em !important;
  font-weight: 800 !important; font-size: 0.8rem !important; color: var(--mm-ink) !important;
}
section:has(a[href*="/categor"]) a[href*="/categor"]:hover { background: var(--mm-pink) !important; }
section:has(a[href*="/categor"]) a[href*="/categor"]:hover span,
section:has(a[href*="/categor"]) a[href*="/categor"]:hover h3 { color: #fff !important; }
/* sidebar i okruszki to NIE pasek kafelków */
aside a[href*="/categor"], ol a[href*="/categor"] { background: transparent !important; min-height: 0 !important; }

/* przycisk „Do koszyka" na hoverze karty: prostokątny */
main button[class*="rounded-full"]:has(svg[class*="lucide-shopping"]) { border-radius: 2px !important; }

/* przyciski wewnątrz kart produktów (m.in. „Do koszyka" na hoverze) — prostokątne */
div:has(> a[href*="/products/"]) button, li:has(a[href*="/products/"]) button { border-radius: 2px !important; }
div:has(> a[href*="/products/"]) button[class*="rounded-full"]:has(svg[class*="heart"]) { border-radius: 9999px !important; }

/* ---------- 17. TELEFON ---------- */
@media (max-width: 767px) {
  [class*="rounded-2xl"][class*="shadow-lg"] { min-height: 0 !important; }
  div[class*="rounded-2xl"][class*="shadow-lg"] > div[class*="grid"] { min-height: 0 !important; }
  div[class*="rounded-2xl"][class*="shadow-lg"] > div[class*="grid"] > div:first-child {
    padding: 2.6rem 1.4rem 3rem !important;
  }
  [class*="rounded-2xl"][class*="shadow-lg"] h1,
  [class*="rounded-2xl"][class*="shadow-lg"] h2 { font-size: 2.1rem !important; }
  section:has(a[href*="/categor"]) a[href*="/categor"] { min-height: 48px !important; padding: 0.7rem 0.6rem !important; }
  section:has(a[href*="/categor"]) a[href*="/categor"] span { font-size: 0.68rem !important; }
  a[href*="/products/"] > div[class*="min-h"] { min-height: 220px !important; }
  section h2[class*="tracking"][class*="text-center"]::after { font-size: 1.35rem; }
}

/* ---------- 18. WYBÓR WARIANTU: kolor z próbnikiem + kwadratowe rozmiary ---------- */
/* etykieta osi */
main p:has(+ div a[href*="/products/"]) {
  font-size: 0.72rem !important; text-transform: uppercase !important; letter-spacing: 0.1em !important;
  color: var(--mm-gray) !important; font-weight: 700 !important; margin-bottom: 0.55rem !important;
}
main p:has(+ div a[href*="/products/"]) span { color: var(--mm-ink) !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }

/* wszystkie opcje wariantu: solidne kafle zamiast drobnych pigułek */
main div[class*="flex-wrap"]:has(> a[href*="/products/"]) { gap: 0.45rem !important; }
main div[class*="flex-wrap"] > a[href*="/products/"] {
  min-width: 3.1rem !important; min-height: 2.9rem !important; padding: 0 0.85rem !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 0 !important; border: 1px solid var(--mm-line) !important;
  font-size: 0.82rem !important; font-weight: 600 !important; color: var(--mm-ink) !important;
  background: #fff !important; transition: all .15s ease !important;
}
main div[class*="flex-wrap"] > a[href*="/products/"]:hover { border-color: var(--mm-ink) !important; }
main div[class*="flex-wrap"] > a[href*="/products/"][class*="border-brand"]:not([class*="hover:border-brand"]) {
  background: var(--mm-ink) !important; color: #fff !important; border-color: var(--mm-ink) !important;
}

/* pierwsza oś = Kolor: kropka próbnika przed nazwą */
main div[class*="flex-wrap"] > a[href*="/products/"]::before {
  content: ''; width: 0.95rem; height: 0.95rem; border-radius: 9999px;
  margin-right: 0.5rem; border: 1px solid rgba(0,0,0,.18); background: #ddd;
}
main div[class*="flex-wrap"] > a[href*="-ecru-"]::before { background: #f2ece2 !important; }
main div[class*="flex-wrap"] > a[href*="-puder-"]::before { background: #f6ccd8 !important; }
main div[class*="flex-wrap"] > a[href*="-czern-"]::before { background: #111114 !important; }
main div[class*="flex-wrap"] > a[href*="-granat-"]::before { background: #1e2a4a !important; }
main div[class*="flex-wrap"] > a[href*="-butelka-"]::before { background: #14452f !important; }
main div[class*="flex-wrap"] > a[href*="-bez-"]::before { background: #d8c4a8 !important; }
main div[class*="flex-wrap"] > a[href*="-bordo-"]::before { background: #6b1f35 !important; }
main div[class*="flex-wrap"] > a[href*="-czerwien-"]::before { background: #c8102e !important; }
main div[class*="flex-wrap"] > a[href*="-szary-"]::before { background: #4a4a55 !important; }
main div[class*="flex-wrap"] > a[href*="-lila-"]::before { background: #b9a2d0 !important; }
main div[class*="flex-wrap"] > a[href*="-blekit-"]::before { background: #a8c7e8 !important; }
main div[class*="flex-wrap"] > a[href*="-musztarda-"]::before { background: #d8a51d !important; }
/* druga i kolejne osie (Rozmiar) — bez kropki, kwadratowe kafle */
main div:has(> div[class*="flex-wrap"] > a[href*="/products/"]) ~ div a[href*="/products/"]::before { display: none !important; }
main div:has(> div[class*="flex-wrap"] > a[href*="/products/"]) ~ div div[class*="flex-wrap"] > a[href*="/products/"] {
  min-width: 3.6rem !important; padding: 0 0.4rem !important;
}

/* wybrany wariant musi być widoczny — reguła z wyższą specyficznością niż kafel bazowy */
main div[class*="flex-wrap"] > a[href*="/products/"][class*="border-brand"]:not([class*="hover:border-brand"]),
main div[class*="flex-wrap"] > a[href*="/products/"][class*="bg-brand"]:not([class*="hover:border-brand"]) {
  background: var(--mm-ink) !important; color: #fff !important;
  border-color: var(--mm-ink) !important; font-weight: 700 !important;
}
main div[class*="flex-wrap"] > a[href*="/products/"][class*="border-brand"]:not([class*="hover:border-brand"])::before { border-color: rgba(255,255,255,.55) !important; }


/* ---------- 20. BEZPIECZNIK: karta produktu zawsze biała ---------- */
main a[href*="/products/"][class*="flex-col"], main a[href*="/products/"][class*="rounded-xl"][class*="group"] {
  background: #fff !important; color: var(--mm-ink) !important;
}
main a[href*="/products/"][class*="flex-col"] h3, main a[href*="/products/"][class*="group"] h3 { color: var(--mm-ink) !important; }

/* ============================================================
   21. MIĘKKIE WYKOŃCZENIE — koniec „kwadratów z Painta"
   Zaokrąglone przyciski z delikatnym cieniem, lżejsze plakietki,
   okrągłe ikony, naprawione koło rabatu w newsletterze.
   ============================================================ */
:root { --mm-r: 10px; --mm-r-sm: 8px; --mm-cien: 0 2px 10px rgba(17,17,20,.16); }

/* --- przyciski --- */
main button, main a[class*="bg-brand"], header button, footer button,
button[class*="bg-brand"], a[class*="bg-brand"],
section:has(input[type="email"]) button,
main button:has(svg[class*="lucide-shopping"]),
main button[class*="rounded-full"]:has(svg[class*="lucide-shopping"]),
div:has(> a[href*="/products/"]) button {
  border-radius: var(--mm-r) !important;
}
main button[class*="bg-brand"], main a[class*="bg-brand"]:not([class*="px-3"]),
section:has(input[type="email"]) button, main button:has(svg[class*="lucide-shopping"]) {
  box-shadow: var(--mm-cien) !important; transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}
main button[class*="bg-brand"]:hover, section:has(input[type="email"]) button:hover,
main button:has(svg[class*="lucide-shopping"]):hover {
  transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(17,17,20,.22) !important;
}
/* CTA w hero i „Dodaj do koszyka" — pełna szerokość, miękkie rogi */
[class*="rounded-2xl"][class*="shadow-lg"] a[style] { border-radius: var(--mm-r) !important; }
main input, header input, section:has(input[type="email"]) input { border-radius: var(--mm-r-sm) !important; }
/* przycisk lupy w wyszukiwarce */
header button[class*="bg-brand"], header button[class*="rounded-f"] { border-radius: var(--mm-r-sm) !important; }

/* --- ikony: zawsze okrągłe, nigdy czarne kwadraty --- */
footer a:has(svg), footer a[class*="rounded-full"] {
  border-radius: 9999px !important; background: var(--mm-pink-soft) !important;
  color: var(--mm-ink) !important; width: 2.4rem !important; height: 2.4rem !important;
}
footer a:has(svg) svg { color: var(--mm-ink) !important; }
footer a:has(svg):hover { background: var(--mm-pink) !important; }
footer a:has(svg):hover svg { color: #fff !important; }
button[class*="fixed"], body > button, [class*="rounded-full"][class*="fixed"] { border-radius: 9999px !important; }
main button[class*="rounded-full"]:has(svg[class*="heart"]),
div:has(> a[href*="/products/"]) button:has(svg[class*="heart"]) { border-radius: 9999px !important; box-shadow: none !important; }

/* --- plakietki na kartach: lekkie pigułki zamiast czarnych prostokątów --- */
[class*="bg-emerald"], [class*="bg-green"], [class*="bg-success"] {
  background: rgba(255,255,255,.92) !important; color: var(--mm-ink) !important;
  border: 1px solid rgba(17,17,20,.1) !important; backdrop-filter: blur(6px) !important;
  border-radius: 9999px !important; font-size: 0.62rem !important; letter-spacing: 0.1em !important;
  font-weight: 700 !important; padding: 0.3rem 0.7rem !important; box-shadow: 0 1px 4px rgba(0,0,0,.08) !important;
}
[class*="bg-danger"], [class*="bg-red-"], [class*="bg-rose"] {
  background: var(--mm-pink) !important; color: #fff !important; border-radius: 9999px !important;
  font-size: 0.62rem !important; letter-spacing: 0.1em !important; font-weight: 700 !important;
  padding: 0.3rem 0.7rem !important; box-shadow: 0 1px 6px rgba(229,57,122,.35) !important;
}

/* --- newsletter: koło „-10% na start" mieściło tekst na siłę --- */
section:has(input[type="email"]) [class*="rounded-full"][class*="bg-danger"],
section:has(input[type="email"]) div[class*="-top-2"][class*="rounded-full"] {
  width: auto !important; height: auto !important; min-width: 0 !important;
  padding: 0.42rem 0.8rem !important; border-radius: 9999px !important;
  font-size: 0.66rem !important; line-height: 1.15 !important; letter-spacing: 0.04em !important;
  white-space: nowrap !important; top: -0.9rem !important; right: -2.2rem !important;
  border: 2px solid #fff !important; box-shadow: 0 3px 12px rgba(229,57,122,.4) !important;
}

/* --- kafle kategorii i warianty: delikatne rogi zamiast ostrych --- */
section:has(a[href*="/categor"]) a[href*="/categor"] { border-radius: var(--mm-r-sm) !important; }
main div[class*="flex-wrap"] > a[href*="/products/"] { border-radius: var(--mm-r-sm) !important; }
main [class*="rounded-xl"], main [class*="rounded-2xl"] { border-radius: var(--mm-r) !important; }
a[href*="/products/"] > div[class*="min-h"] { border-radius: var(--mm-r-sm) !important; }
/* hero zostaje pełnoekranowe, bez rogów */
[class*="rounded-2xl"][class*="shadow-lg"] { border-radius: 0 !important; }

/* --- ikony w stopce i pasku zaufania: różowe kółka, nie czarne kwadraty --- */
footer [class*="bg-brand"]:not(a):not(button), section [class*="rounded"][class*="bg-brand-soft"] {
  background: var(--mm-pink-soft) !important; border-radius: 9999px !important;
}

/* ---------- 22. DOMKNIĘCIE DETALI (telefon) ---------- */
/* przycisk dostępności: był czarnym kwadratem 80x80 — kółko i mniejszy */
button[class*="fixed"][class*="rounded-full"][class*="bg-brand"],
button[class*="fixed"][class*="bottom-5"][class*="rounded-full"] {
  border-radius: 9999px !important; width: 3.4rem !important; height: 3.4rem !important;
  box-shadow: 0 4px 14px rgba(17,17,20,.28) !important;
}
button[class*="fixed"][class*="rounded-full"] svg { width: 1.4rem !important; height: 1.4rem !important; }

/* stopka: „Marka Selldi" to nazwa silnika, w sklepie klienta ma być marka klienta */
footer a[href*="manufacturer="] { font-size: 0 !important; }
footer a[href*="manufacturer="]::after { content: 'Marka MałaMi'; font-size: 0.9rem; }

@media (max-width: 767px) {
  /* newsletter: e-mail i przycisk jeden pod drugim, plakietka nad kopertą */
  section:has(input[type="email"]) div[class*="flex"][class*="gap-2"] {
    flex-direction: column !important; align-items: stretch !important; gap: 0.6rem !important;
  }
  section:has(input[type="email"]) button { width: 100% !important; justify-content: center !important; }
  section:has(input[type="email"]) [class*="-top-2"][class*="rounded-full"] {
    position: static !important; display: inline-flex !important; margin: 0 0 0.6rem 0 !important;
  }
  section:has(input[type="email"]) > div { padding: 1.4rem 1.1rem !important; }
  /* nagłówek newslettera nie ucieka za krawędź */
  section:has(input[type="email"]) h2, section:has(input[type="email"]) h3 { font-size: 1.5rem !important; line-height: 1.15 !important; }
}

/* ============================================================
   23. EFEKTY „DROGIEGO SKLEPU" — mikrointerakcje
   Ruch jest subtelny i krótki (120–260 ms). Wszystko wyłącza się
   przy prefers-reduced-motion (dostępność).
   ============================================================ */

/* --- zaznaczenie tekstu i pasek przewijania w kolorach marki --- */
::selection { background: var(--mm-pink); color: #fff; }
html { scroll-behavior: smooth; }
* { scrollbar-color: var(--mm-pink) var(--mm-bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mm-bg); }
::-webkit-scrollbar-thumb { background: #d9d9e0; border-radius: 9999px; border: 2px solid var(--mm-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--mm-pink); }

/* --- czytelny focus dla klawiatury (WCAG) --- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--mm-pink) !important; outline-offset: 3px !important; border-radius: var(--mm-r-sm);
}

/* --- MENU: animowane podkreślenie linków --- */
nav a, footer a[href]:not(:has(svg)) { position: relative; }
nav > a::after, nav a:not([class*="bg-"]):not([class*="rounded"])::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -0.35rem; height: 2px;
  background: var(--mm-pink); transition: right .26s cubic-bezier(.22,.61,.36,1);
}
nav a:hover::after { right: 0; }
footer a[href]:not(:has(svg)) { transition: color .18s ease, padding-left .18s ease; }
footer a[href]:not(:has(svg)):hover { color: var(--mm-pink-dark) !important; padding-left: 3px; }

/* rozwijane „Wszystkie kategorie" — miękkie wejście i cień jak w dużych sklepach */
header [class*="absolute"][class*="z-"], header [class*="shadow"][class*="absolute"] {
  border-radius: var(--mm-r) !important;
  box-shadow: 0 18px 48px -12px rgba(17,17,20,.28), 0 2px 8px rgba(17,17,20,.06) !important;
  border: 1px solid var(--mm-line) !important;
  animation: mmDrop .2s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes mmDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
header [class*="absolute"] a { transition: background .16s ease, padding-left .16s ease, color .16s ease; }
header [class*="absolute"] a:hover { padding-left: 1.15rem !important; }

/* --- PRZYCISKI: połysk przesuwający się przy najechaniu --- */
main button[class*="bg-brand"], section:has(input[type="email"]) button,
main button:has(svg[class*="lucide-shopping"]), [class*="rounded-2xl"][class*="shadow-lg"] a[style] {
  position: relative; overflow: hidden;
}
main button[class*="bg-brand"]::after, section:has(input[type="email"]) button::after,
main button:has(svg[class*="lucide-shopping"])::after, [class*="rounded-2xl"][class*="shadow-lg"] a[style]::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); transition: left .55s cubic-bezier(.22,.61,.36,1); pointer-events: none;
}
main button[class*="bg-brand"]:hover::after, section:has(input[type="email"]) button:hover::after,
main button:has(svg[class*="lucide-shopping"]):hover::after,
[class*="rounded-2xl"][class*="shadow-lg"] a[style]:hover::after { left: 130%; }
main button:active, main a[class*="bg-brand"]:active { transform: scale(.985) !important; }

/* --- KARTY PRODUKTÓW: uniesienie + spokojny zoom zdjęcia --- */
main a[href*="/products/"][class*="flex-col"], main a[href*="/products/"][class*="group"] {
  transition: transform .24s cubic-bezier(.22,.61,.36,1), box-shadow .24s ease, border-color .24s ease !important;
}
main a[href*="/products/"][class*="flex-col"]:hover, main a[href*="/products/"][class*="group"]:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 34px -18px rgba(17,17,20,.35) !important;
  border-color: rgba(229,57,122,.35) !important;
}
a[href*="/products/"] > div[class*="min-h"] { overflow: hidden !important; }
a[href*="/products/"] > div[class*="min-h"] img { transition: transform .5s cubic-bezier(.22,.61,.36,1) !important; }
a[href*="/products/"]:hover > div[class*="min-h"] img { transform: scale(1.045) !important; }
/* serduszko wypływa przy najechaniu na kartę */
div:has(> a[href*="/products/"]) button:has(svg[class*="heart"]) {
  opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease;
}
div:has(> a[href*="/products/"]):hover button:has(svg[class*="heart"]) { opacity: 1; transform: none; }
@media (hover: none) { div:has(> a[href*="/products/"]) button:has(svg[class*="heart"]) { opacity: 1; transform: none; } }

/* --- KAFELKI KATEGORII: podniesienie i strzałka --- */
section:has(a[href*="/categor"]) a[href*="/categor"] {
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease, letter-spacing .2s ease !important;
}
section:has(a[href*="/categor"]) a[href*="/categor"]:hover {
  transform: translateY(-2px) !important; box-shadow: 0 10px 22px -14px rgba(229,57,122,.8) !important;
  letter-spacing: 0.1em !important;
}

/* --- WARIANTY: miękkie podniesienie kafla --- */
main div[class*="flex-wrap"] > a[href*="/products/"] { transition: all .16s ease !important; }
main div[class*="flex-wrap"] > a[href*="/products/"]:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 14px -8px rgba(17,17,20,.5) !important; }

/* --- NAGŁÓWEK: subtelna linia i cień, logo lekko reaguje --- */
header { box-shadow: 0 1px 0 var(--mm-line), 0 6px 20px -18px rgba(17,17,20,.5) !important; }
header img[alt] { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
header a:hover img[alt] { transform: scale(1.03); }
header [class*="-top-2"][class*="rounded-full"] { animation: mmPuls 2.4s ease-in-out infinite; }
@keyframes mmPuls { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* --- WEJŚCIE SEKCJI: delikatne pojawienie się --- */
main section { animation: mmIn .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes mmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- POLA FORMULARZY: miękki focus w kolorze marki --- */
input, select, textarea { transition: border-color .18s ease, box-shadow .18s ease !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--mm-pink) !important; box-shadow: 0 0 0 3px rgba(229,57,122,.14) !important;
}

/* --- szanujemy ustawienia dostępności --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- 24. MEGA-MENU: spokojna lista, akcent tylko na aktywnej ---------- */
header [class*="absolute"] { background: #fff !important; }
header [class*="absolute"] [class*="bg-brand-soft"], header [class*="absolute"] [class*="bg-pink"] { background: #fff !important; }
header [class*="absolute"] a[href*="/categor"] {
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: 0.92rem !important; font-weight: 500 !important; color: var(--mm-ink) !important;
  border-radius: var(--mm-r-sm) !important; padding: 0.6rem 0.85rem !important;
}
header [class*="absolute"] a[href*="/categor"] span { text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; font-size: 0.92rem !important; }
header [class*="absolute"] a[href*="/categor"]:hover,
header [class*="absolute"] a[href*="/categor"][class*="bg-"] {
  background: var(--mm-pink-soft) !important; color: var(--mm-pink-dark) !important;
}
header [class*="absolute"] a[href*="/categor"]:hover span { color: var(--mm-pink-dark) !important; }
header [class*="absolute"] svg { color: #b9b9c2 !important; width: 1rem !important; height: 1rem !important; }
header [class*="absolute"] a[href*="/categor"]:hover svg { color: var(--mm-pink) !important; }
/* nagłówki kolumn w menu */
header [class*="absolute"] [class*="uppercase"], header [class*="absolute"] h3, header [class*="absolute"] h4 {
  color: var(--mm-gray) !important; font-size: 0.68rem !important; letter-spacing: 0.14em !important; font-weight: 700 !important;
}
/* miniatury polecanych w menu */
header [class*="absolute"] img { border-radius: var(--mm-r-sm) !important; transition: transform .3s ease; }
header [class*="absolute"] a:hover img { transform: scale(1.04); }
/* BŁĄD NAPRAWIONY 5.08: ta reguła miała trafiać w przycisk „wszystkie produkty
   w kategorii", ale ten link NIE MA żadnej klasy `bg-` — więc jedynym elementem,
   który łapała, była PODŚWIETLONA pozycja listy kategorii (dostaje `bg-surface`
   na hover). Stąd czarny prostokąt w menu. Reguła usunięta; wygląd aktywnej
   pozycji i przycisku definiuje sekcja 26. */

/* ---------- 25. BEZPIECZEŃSTWO/UX: podpowiedź konta testowego ----------
   Wspólny frontend B2C pokazuje na stronie logowania klienta „konto testowe"
   z hasłem — to element dema Selldi, nie sklepu klienta. Konta są przy
   zakładaniu sklepu blokowane losowym hasłem (nie da się na nie zalogować),
   ale podpowiedź nie ma prawa być widoczna w sklepie marki. Docelowa naprawa
   należy do wspólnego kodu (warunek na host/flagę), tu zdejmujemy ją z widoku. */
main [class*="from-pink-50"], main [class*="to-pink-50"],
main form [class*="border-pink-2"], main [class*="bg-pink-50"]:has(button[class*="font-mono"]),
main div:has(> div > span + button[class*="font-mono"]) { display: none !important; }


/* ============================================================
   26. ODŚWIEŻENIE v4 — RÓŻ ZAMIAST CZERNI, MIĘKKIE KSZTAŁTY
   ------------------------------------------------------------
   Zmiana kierunku po przeglądzie z klientem (5.08.2026). Wersja v3
   celowo szła w „premium fashion": czerń, kanty, zero zaokrągleń.
   W praktyce czarne przyciski nie zachęcały do kliknięcia, a kanciasty
   przycisk szukania wyglądał staro. Ta sekcja odwraca te decyzje:
   akcja = róż marki, kształty miękkie, mikroefekt przy kliknięciu.
   Leży NA KOŃCU pliku świadomie — wygrywa z wcześniejszymi regułami
   o tej samej specyficzności bez ich usuwania (łatwy rollback: wytnij sekcję).
   ============================================================ */

:root { --mm-r-btn: 999px; --mm-r-kafel: 14px; }

/* ---------- 26.1 PRZYCISKI AKCJI: róż + zaokrąglenie + przebłysk ---------- */
/* Dotyczy „Do koszyka", „Kup teraz", szukania i wszystkiego z bg-brand. */
button[class*="bg-brand"], a[class*="bg-brand"], div[class*="bg-brand"],
header button[class*="bg-brand"], main button[class*="bg-brand"] {
  background: var(--mm-pink) !important;
  border-radius: var(--mm-r-btn) !important;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 10px rgba(229,57,122,.22) !important;
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease !important;
}
/* hover: subtelny gradient + mocniejszy cień (nie zmiana barwy na czerń) */
button[class*="bg-brand"]:hover, a[class*="bg-brand"]:hover, div[class*="bg-brand"]:hover,
.hover\:bg-brand-dark:hover, [class*="group"]:hover div[class*="bg-brand"] {
  background: linear-gradient(100deg, var(--mm-pink) 0%, #f2568f 45%, var(--mm-pink-dark) 100%) !important;
  box-shadow: 0 6px 20px rgba(229,57,122,.34) !important;
}
/* przebłysk przesuwający się po przycisku przy najechaniu */
button[class*="bg-brand"]::after, a[class*="bg-brand"]::after, div[class*="bg-brand"]::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
button[class*="bg-brand"]:hover::after, a[class*="bg-brand"]:hover::after,
div[class*="bg-brand"]:hover::after, [class*="group"]:hover div[class*="bg-brand"]::after {
  opacity: 1; animation: mmPrzeblysk .75s ease-out;
}
@keyframes mmPrzeblysk { from { left: -60%; } to { left: 120%; } }
/* wciśnięcie — namacalna reakcja na klik */
button[class*="bg-brand"]:active, a[class*="bg-brand"]:active, div[class*="bg-brand"]:active {
  transform: scale(.965) !important; box-shadow: 0 1px 6px rgba(229,57,122,.3) !important;
}
@media (prefers-reduced-motion: reduce) {
  button[class*="bg-brand"]::after, a[class*="bg-brand"]::after, div[class*="bg-brand"]::after { display: none; }
  button[class*="bg-brand"]:active { transform: none !important; }
}

/* ---------- 26.2 POLE I PRZYCISK SZUKANIA ---------- */
header input[type="text"], header input:not([type]) {
  border-radius: var(--mm-r-btn) !important;
  border: 1.5px solid rgba(229,57,122,.28) !important;
  background: #fff !important; height: 2.9rem !important; padding-left: 1.25rem !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
header input[type="text"]:focus, header input:not([type]):focus {
  border-color: var(--mm-pink) !important;
  box-shadow: 0 0 0 4px rgba(229,57,122,.12) !important; outline: none !important;
}
/* przycisk „szukaj" w polu + „Wszystkie kategorie" */
header button[class*="bg-brand"], header button[class*="rounded-f"] {
  border-radius: var(--mm-r-btn) !important; font-weight: 700 !important;
  letter-spacing: .01em !important; padding-inline: 1.15rem !important;
}

/* ---------- 26.3 MEGA-MENU: aktywna pozycja różowa, nie czarna ---------- */
header [class*="absolute"] a[href*="/categor"] {
  border-radius: 10px !important; margin: 0 .35rem !important;
  position: relative; transition: background .16s ease, color .16s ease !important;
}
header [class*="absolute"] a[href*="/categor"]:hover,
header [class*="absolute"] a[href*="/categor"][class*="bg-surface"],
header [class*="absolute"] a[href*="/categor"][class*="font-semibold"] {
  background: var(--mm-pink-soft) !important; color: var(--mm-pink-dark) !important;
}
header [class*="absolute"] a[href*="/categor"]:hover span,
header [class*="absolute"] a[href*="/categor"][class*="bg-surface"] span,
header [class*="absolute"] a[href*="/categor"][class*="font-semibold"] span {
  color: var(--mm-pink-dark) !important; font-weight: 600 !important;
}
/* pionowy akcent przy aktywnej pozycji — czytelne „tu jesteś" bez plamy czerni */
header [class*="absolute"] a[href*="/categor"][class*="bg-surface"]::before,
header [class*="absolute"] a[href*="/categor"][class*="font-semibold"]::before {
  content: ''; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 3px; border-radius: 3px; background: var(--mm-pink);
}
header [class*="absolute"] a[href*="/categor"][class*="bg-surface"] svg,
header [class*="absolute"] a[href*="/categor"][class*="font-semibold"] svg { color: var(--mm-pink) !important; }
/* link „Wszystkie produkty w …" jako różowa pigułka (ten NIE ma klasy bg-) */
header [class*="absolute"] a[href*="/categories/"][class*="font-medium"]:not([class*="flex"]) {
  display: inline-flex !important; align-items: center;
  background: var(--mm-pink-soft) !important; color: var(--mm-pink-dark) !important;
  border-radius: var(--mm-r-btn) !important; padding: .55rem 1.1rem !important;
  font-weight: 600 !important; transition: background .16s ease, transform .12s ease !important;
}
header [class*="absolute"] a[href*="/categories/"][class*="font-medium"]:not([class*="flex"]):hover {
  background: var(--mm-pink) !important; color: #fff !important; transform: translateX(2px);
}

/* ---------- 26.4 MINIATURY „POLECANE" W MENU: większe, bez ucinania ---------- */
/* Były 96×96 z object-cover — towar ucięty tak, że nic nie było widać.
   Teraz kadr pionowy (moda) i wyrównanie do góry, żeby zostawały twarze i góra sylwetki. */
header [class*="absolute"] a[class*="w-24"] { width: 8.5rem !important; }
header [class*="absolute"] a[class*="w-24"] > div[class*="w-24"] {
  width: 8.5rem !important; height: 11rem !important;
  border-radius: 12px !important; background: var(--mm-bg) !important;
}
header [class*="absolute"] a[class*="w-24"] img {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: 50% 18% !important;
}
header [class*="absolute"] a[class*="w-24"] span {
  font-size: .74rem !important; line-height: 1.3 !important; margin-top: .45rem !important;
  display: block; color: #3a3a44 !important;
}
header [class*="absolute"] a[class*="w-24"]:hover span { color: var(--mm-pink-dark) !important; }

/* ---------- 26.5 KARTA PRODUKTU: cena z oddechem, nie na krawędzi ---------- */
a[href*="/products/"] h3 { padding-inline: .85rem !important; }
a[href*="/products/"] [class*="text-4xl"],
a[href*="/products/"] [class*="font-black"], a[href*="/products/"] [class*="font-extrabold"] {
  font-size: 1.42rem !important; font-weight: 800 !important;
  letter-spacing: -.015em !important; color: var(--mm-ink) !important;
}
/* wiersz z ceną: margines od krawędzi kafla + odstęp nad przyciskiem */
a[href*="/products/"] > div:not([class*="min-h"]) { padding-inline: .85rem !important; }
a[href*="/products/"] > div:last-child { padding-bottom: .95rem !important; }

/* ---------- 26.6 OPINIE: bez paska przewijania (ruch dokłada theme.js) ---------- */
section [class*="overflow-x-auto"][class*="snap-x"] {
  scrollbar-width: none !important; -ms-overflow-style: none !important;
}
section [class*="overflow-x-auto"][class*="snap-x"]::-webkit-scrollbar { display: none !important; height: 0 !important; }
/* pasek postępu pod karuzelą opinii — zbędny, gdy jedzie sama */
section:has([class*="snap-x"]) > div > div[class*="h-1"],
section:has([class*="snap-x"]) [class*="rounded-full"][class*="h-1"]:not(button) { display: none !important; }

/* ---------- 26.7 PORADNIK: nagłówek w kolorze, zdjęcia nie ucinają głów ---------- */
div[class*="min-h-\[60vh\]"] > div > header > h1::after {
  background: linear-gradient(95deg, var(--mm-ink) 0%, var(--mm-pink-dark) 55%, var(--mm-pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* kadrowanie zdjęć w kafelkach bloga — twarz zostaje w kadrze */
a[href*="/blog/"] img, article a[href*="/blog"] img { object-position: 50% 22% !important; }
a[href*="/blog/"][class*="min-h"] { min-height: 340px !important; }
/* tytuły wpisów na jasnych kafelkach: akcent marki zamiast płaskiej czerni */
[class*="grid"] a[href*="/blog/"]:hover h2, [class*="grid"] a[href*="/blog/"]:hover h3 {
  color: var(--mm-pink-dark) !important;
}

/* ---------- 26.8 STOPKA: logo bez białego prostokąta ---------- */
/* logo.jpg nie ma przezroczystości, więc na szarym tle stopki rysował się
   biały kafelek. multiply „wygasza" biel do koloru tła, znak zostaje czarny. */
footer img[src*="logo"] {
  mix-blend-mode: multiply !important;
  background: transparent !important; padding: 0 !important;
  height: 2.4rem !important; width: auto !important;
}

/* ---------- 26.9 DOCIĄGNIĘCIE SPECYFICZNOŚCI ----------
   Kilka reguł z v3 miało wyższą specyficzność niż 26.1 (dwa selektory
   atrybutu biją jeden), więc przyciski zostawały czarne mimo nowej sekcji.
   Poniżej te same selektory + jeden stopień wyżej, żeby róż wygrał. */
header button[class*="bg-brand"][class*="rounded-full"],
button[class*="bg-brand"][class*="rounded-full"],
a[class*="bg-brand"][class*="rounded-full"] {
  background: var(--mm-pink) !important; border-radius: var(--mm-r-btn) !important;
}
header button[class*="bg-brand"][class*="rounded-full"]:hover,
button[class*="bg-brand"][class*="rounded-full"]:hover,
a[class*="bg-brand"][class*="rounded-full"]:hover {
  background: linear-gradient(100deg, var(--mm-pink) 0%, #f2568f 45%, var(--mm-pink-dark) 100%) !important;
}

/* główne CTA w hero („Zobacz kolekcję") — najważniejszy przycisk na stronie,
   czerń go wyciszała; teraz róż marki z tym samym przebłyskiem co reszta */
[class*="rounded-2xl"][class*="shadow-lg"] a[style] {
  background: var(--mm-pink) !important; border-radius: var(--mm-r-btn) !important;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 16px rgba(229,57,122,.28) !important;
  transition: box-shadow .18s ease, transform .12s ease !important;
}
[class*="rounded-2xl"][class*="shadow-lg"] a[style]:hover {
  background: linear-gradient(100deg, var(--mm-pink) 0%, #f2568f 45%, var(--mm-pink-dark) 100%) !important;
  box-shadow: 0 8px 26px rgba(229,57,122,.38) !important;
}
[class*="rounded-2xl"][class*="shadow-lg"] a[style]::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
[class*="rounded-2xl"][class*="shadow-lg"] a[style]:hover::after { opacity: 1; animation: mmPrzeblysk .75s ease-out; }
[class*="rounded-2xl"][class*="shadow-lg"] a[style]:active { transform: scale(.97) !important; }

/* baner cookies: przycisk zgody w kolorze marki (spójność z resztą akcji) */
div:has(> button:has-text) button[class*="bg-primary"],
[class*="fixed"][class*="bottom"] button[class*="bg-primary"],
[class*="fixed"] button[class*="bg-ink"] {
  background: var(--mm-pink) !important; border-radius: var(--mm-r-btn) !important;
}

/* ---------- 26.10 MENU: nieaktywne pozycje przezroczyste ----------
   Reguła kafelków kategorii z sekcji 3 (`a[href*="/categor"]`) łapie też
   pozycje mega-menu i malowała CAŁĄ listę na różowo — aktywna pozycja
   przestawała się wyróżniać. Tu przywracamy biel dla nieaktywnych. */
header [class*="absolute"] a[href*="/categor"] {
  background: transparent !important; min-height: 0 !important;
  justify-content: flex-start !important;
}
header [class*="absolute"] a[href*="/categor"]:hover,
header [class*="absolute"] a[href*="/categor"][class*="bg-surface"],
header [class*="absolute"] a[href*="/categor"][class*="font-semibold"] {
  background: var(--mm-pink-soft) !important;
}
/* etykiety pozycji: normalna wielkość liter (kafelki kategorii mają wersaliki) */
header [class*="absolute"] a[href*="/categor"] span {
  text-transform: none !important; letter-spacing: 0 !important; font-size: .92rem !important;
}

/* ---------- 26.11 KOREKTA: cena kontra plakietka ----------
   Reguła 26.5 powiększała wszystko z klasą `font-black` wewnątrz kafla
   produktu — a tę klasę ma nie tylko cena, ale i plakietka „Nowość"
   (span.bg-success.font-black.uppercase). Efekt: plakietka urosła do 22 px
   i zasłaniała towar. Rozróżniamy je jednoznacznie: cena ma `text-lg`
   i nie jest wersalikami, plakietka jest wersalikami i ma tło `bg-`. */
a[href*="/products/"] [class*="font-black"][class*="uppercase"],
a[href*="/products/"] [class*="font-extrabold"][class*="uppercase"] {
  font-size: 0.62rem !important; letter-spacing: 0.1em !important;
  padding: 0.3rem 0.7rem !important;
}
a[href*="/products/"] span[class*="font-black"][class*="text-lg"],
a[href*="/products/"] [class*="text-4xl"]:not([class*="uppercase"]) {
  font-size: 1.42rem !important; font-weight: 800 !important;
  letter-spacing: -.015em !important;
}

/* ---------- 26.12 PORADNIK: czytelność i kolor ----------
   Trzy usterki z v3, wszystkie widoczne w sekcji „Poradnik MałaMi":
   (a) duży kafel ma CIEMNE tło (bg-slate-900) i komponent daje na nim biały
       tytuł — reguła „wszystkie tytuły bloga w gridzie na czarno" go gasiła,
   (b) plakietka kategorii miała jasnoróżowe tło ORAZ biały tekst (z innej
       reguły) — napis znikał,
   (c) nagłówek sekcji był płaską czernią. */

/* (a) tytuł i lead na ciemnym kafelku wracają na biel + delikatny cień,
       żeby czytało się nad zdjęciem niezależnie od jego jasności */
a[href*="/blog/"][class*="bg-slate"] h2, a[href*="/blog/"][class*="bg-slate"] h3,
a[href*="/blog/"][class*="min-h"] h2, a[href*="/blog/"][class*="min-h"] h3 {
  color: #fff !important; text-shadow: 0 2px 14px rgba(0,0,0,.55) !important;
}
a[href*="/blog/"][class*="bg-slate"] p, a[href*="/blog/"][class*="min-h"] p {
  color: rgba(255,255,255,.92) !important; text-shadow: 0 1px 10px rgba(0,0,0,.5) !important;
}
/* przyciemnienie od dołu — tekst zawsze czytelny, zdjęcie nadal widoczne */
a[href*="/blog/"][class*="bg-slate"]::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 62%;
  background: linear-gradient(to top, rgba(10,10,14,.82), rgba(10,10,14,.35) 45%, transparent);
  pointer-events: none; z-index: 0;
}
/* UWAGA: `img` MUSI zostać wyłączony. Zdjęcie w tym kafelku jest pozycjonowane
   absolutnie (inset-0 object-cover) i wypełnia całą płytkę; nadanie mu
   `position: relative` zamieniało je w zwykły element flexa — obrazek zjeżdżał
   na pół szerokości, a tekst wciskał się w wąski słupek obok. */
a[href*="/blog/"][class*="bg-slate"] > *:not(img) { position: relative; z-index: 1; }

/* (b) plakietka kategorii: róż marki na jasnym tle, zawsze czytelna */
a[href*="/blog"] [class*="uppercase"], article [class*="uppercase"][class*="text-xs"] {
  background: var(--mm-pink-soft) !important; color: var(--mm-pink-dark) !important;
  border-radius: 999px !important; padding: 0.3rem 0.7rem !important;
  font-size: 0.62rem !important; letter-spacing: 0.12em !important;
}
/* na ciemnym kafelku odwrotnie: pełny róż + biel */
a[href*="/blog/"][class*="bg-slate"] [class*="uppercase"] {
  background: var(--mm-pink) !important; color: #fff !important;
}

/* (c) nagłówek sekcji „Poradnik MałaMi" w gradiencie marki */
section.py-14 h2[class*="tracking"]::after,
section h2[class*="tracking"][class*="text-center"]::after {
  background: linear-gradient(95deg, var(--mm-ink) 0%, var(--mm-pink-dark) 60%, var(--mm-pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* tytuły wpisów na jasnych kafelkach — ciemne dla czytelności, róż na hover */
[class*="grid"] a[href*="/blog/"]:not([class*="bg-slate"]):not([class*="min-h"]) h2,
[class*="grid"] a[href*="/blog/"]:not([class*="bg-slate"]):not([class*="min-h"]) h3 {
  color: var(--mm-ink) !important;
}

/* ---------- 26.13 PANEL FILTRÓW: nazwa po ludzku ----------
   Wspólny frontend nazywa tę sekcję „Tagi" (tak nazywa się mechanizm w bazie).
   W sklepie z ubrankami klient szuka rozmiaru i koloru, nie „tagów".
   Nagłówek to h3 bezpośrednio przed listą linków z ?tag= — stąd `:has(+ ul)`. */
aside h3:has(+ ul a[href*="tag="]) { font-size: 0 !important; }
aside h3:has(+ ul a[href*="tag="])::after {
  content: 'ROZMIAR I KOLOR';
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; color: var(--mm-ink);
}
/* zaznaczony filtr wyraźnie w kolorze marki */
aside ul a[href*="tag="][class*="text-brand"], aside ul a[href*="tag="][class*="font-semibold"] {
  color: var(--mm-pink-dark) !important; font-weight: 700 !important;
}

/* ---------- 26.14 RUNDA POPRAWEK PO PRZEGLĄDZIE ---------- */

/* (a) PRZYCISK „SZUKAJ" UCIEKAŁ POZA RAMKĘ — PRAWDZIWA PRZYCZYNA.
   Sekcja 26.1 nadaje wszystkim różowym przyciskom `position: relative`,
   żeby zakotwiczyć w nich przebłysk (::after). Przycisk szukania jest jednak
   pozycjonowany ABSOLUTNIE wewnątrz pola — nadpisanie na `relative` wypchnęło
   go z pozycji absolutnej i zamieniło w zwykły element flexa: zajął 91 px,
   o tyle ścisnął pole i wylądował POZA ramką. Element pozycjonowany absolutnie
   też jest kontekstem dla ::after, więc przebłysk działa dalej. */
header button[class*="absolute"][class*="bg-brand"],
button[class*="absolute"][class*="bg-brand"], a[class*="absolute"][class*="bg-brand"] {
  position: absolute !important;
}
/* TA SAMA PRZYCZYNA dotknęła przycisków w rogu ekranu: „przewiń do góry"
   (fixed bottom-24 right-6) i widget dostępności (fixed bottom-5 left-5).
   Odebranie im `fixed` wypchnęło je z rogu do zwykłego przepływu strony —
   lądowały jedno pod drugim w okolicy stopki, po lewej. Przywracamy `fixed`. */
button[class*="fixed"][class*="bg-brand"], a[class*="fixed"][class*="bg-brand"],
div[class*="fixed"][class*="bg-brand"] { position: fixed !important; }

/* (a2) domknięcie proporcji pola wyszukiwania.
   Pole leży w kontenerze `div.relative.flex`, a przycisk jest przyklejony
   absolutnie do PRAWEJ KRAWĘDZI KONTENERA. Pole nie rozciągało się na całą
   jego szerokość (kończyło się 87 px wcześniej), więc przycisk wychodził
   poza obramowanie. Rozciągamy pole na pełną szerokość kontenera —
   wtedy przycisk siada w środku ramki, tak jak został zaprojektowany. */
header div[class*="relative"][class*="flex"] > input {
  flex: 1 1 100% !important; width: 100% !important;
}
/* zapas z prawej, żeby tekst nie wjeżdżał pod przycisk */
header input[type="text"], header input:not([type]) { padding-right: 7.5rem !important; }
/* przycisk dopasowany do wysokości pola, z zapasem 4 px u góry i dołu */
header div[class*="relative"][class*="flex"] > button[class*="absolute"] {
  height: calc(100% - 8px) !important; top: 4px !important; right: 5px !important;
}

/* (b) PRZYCISK „DO KOSZYKA" — jednakowa, wygodna wysokość wszędzie.
   Kafel wyróżniony miał niższy przycisk niż kafle w siatce. */
a[href*="/products/"] div[class*="bg-brand"], a[href*="/products/"] a[class*="bg-brand"],
div:has(> a[href*="/products/"]) div[class*="bg-brand"] {
  min-height: 2.65rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0.8rem !important; letter-spacing: 0.01em !important;
}

/* (c) KAFELKI KATEGORII: ten sam efekt co przy „Do koszyka" —
   gradient marki + przesuwający się przebłysk zamiast płaskiego różu. */
section:has(a[href*="/categor"]) a[href*="/categor"] {
  position: relative; overflow: hidden;
  transition: background .2s ease, box-shadow .2s ease, transform .12s ease !important;
}
section:has(a[href*="/categor"]) a[href*="/categor"]:hover {
  background: linear-gradient(100deg, var(--mm-pink) 0%, #f2568f 45%, var(--mm-pink-dark) 100%) !important;
  box-shadow: 0 6px 20px rgba(229,57,122,.30) !important;
}
section:has(a[href*="/categor"]) a[href*="/categor"]::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none; z-index: 2;
}
section:has(a[href*="/categor"]) a[href*="/categor"]:hover::after {
  opacity: 1; animation: mmPrzeblysk .75s ease-out;
}
section:has(a[href*="/categor"]) a[href*="/categor"]:active { transform: scale(.985) !important; }
@media (prefers-reduced-motion: reduce) {
  section:has(a[href*="/categor"]) a[href*="/categor"]::after { display: none; }
}

/* ---------- 26.15 OSTATNIE CZERNIE NA KARCIE PRODUKTU ----------
   Kierunek z 5.08: akcja i zaznaczenie = róż marki, nie czerń.
   Zostały jeszcze dwa miejsca: aktywna zakładka opisu i wybrany wariant
   (kolor/rozmiar). Czarny prostokąt wśród różowych elementów wyglądał
   jak niedokończony element interfejsu. */

/* aktywna zakładka („Opis produktu" / „Parametry" / „Zestawy" …) */
main button[class*="bg-primary"], main button[class*="bg-ink"],
main [role="tablist"] button[aria-selected="true"],
main button[class*="border-b-2"][class*="text-white"] {
  background: var(--mm-pink) !important; color: #fff !important;
  border-radius: 999px 999px 0 0 !important;
}

/* wybrany wariant (kolor i rozmiar) — róż zamiast czerni */
main div[class*="flex-wrap"] > a[href*="/products/"][class*="border-brand"]:not([class*="hover:border-brand"]),
main div[class*="flex-wrap"] > a[href*="/products/"][class*="bg-brand"]:not([class*="hover:border-brand"]),
main div[class*="flex-wrap"] > button[class*="border-brand"]:not([class*="hover:"]) {
  background: var(--mm-pink) !important; color: #fff !important;
  border-color: var(--mm-pink) !important; font-weight: 700 !important;
  box-shadow: 0 2px 10px rgba(229,57,122,.25) !important;
}
main div[class*="flex-wrap"] > a[href*="/products/"]:hover:not([class*="border-brand"]) {
  border-color: var(--mm-pink) !important; color: var(--mm-pink-dark) !important;
}

/* dopięcie: zakładka aktywna (klasy `border-brand text-brand`, bez tła w kodzie)
   dostawała czerń z reguły sekcji 7. Ta sama specyficzność + pozycja na końcu
   pliku = wygrywa róż. Zakładka to podkreślenie, nie pigułka, więc bez zaokrągleń. */
main button[class*="border-b-2"][class*="border-brand"] {
  background: var(--mm-pink) !important; border-color: var(--mm-pink) !important;
  color: #fff !important; border-radius: 10px 10px 0 0 !important;
}
main button[class*="border-b-2"]:not([class*="border-brand"]):hover {
  color: var(--mm-pink-dark) !important;
}

/* ---------- 26.16 WYJĄTEK DLA `bg-brand-soft` ----------
   Reguły przycisków (26.1) celują w `[class*="bg-brand"]`, a ten wzorzec
   łapie także `bg-brand-soft` — jasne tło pomocnicze, nie przycisk.
   Efekt: plakietka „Oszczędzasz" w zestawach zamieniała się w jednolitą
   różową plamę z różowym tekstem, czyli nieczytelną. Przywracamy jej
   właściwy wygląd: jasnoróżowe tło, ciemnoróżowy tekst, bez przebłysku. */
/* selektory kwalifikowane elementem — reguła przycisków z 26.1 ma postać
   `div[class*="bg-brand"]`, więc czysty `[class*=...]` był od niej słabszy */
div[class*="bg-brand-soft"], span[class*="bg-brand-soft"],
a[class*="bg-brand-soft"], button[class*="bg-brand-soft"] {
  background: var(--mm-pink-soft) !important;
  color: var(--mm-pink-dark) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
div[class*="bg-brand-soft"]:hover, span[class*="bg-brand-soft"]:hover,
a[class*="bg-brand-soft"]:hover, button[class*="bg-brand-soft"]:hover {
  background: var(--mm-pink-soft) !important;
}
div[class*="bg-brand-soft"]::after, span[class*="bg-brand-soft"]::after,
a[class*="bg-brand-soft"]::after { display: none !important; }
div[class*="bg-brand-soft"] *, span[class*="bg-brand-soft"] * { color: var(--mm-pink-dark) !important; }

/* ---------- 26.17 LISTA SORTOWANIA ----------
   Pozycje rozwijanej listy sortowania to linki na `/categories/...?sortBy=`,
   więc łapała je reguła KAFELKÓW kategorii z sekcji 3 (`a[href*="/categor"]`)
   i malowała całą listę na różowo — nie było widać, która opcja jest wybrana.
   Ten sam mechanizm psuł wcześniej mega-menu. */
/* UWAGA na specyficzność: lista rozwijana ma klasę `absolute` i leży w <header>
   strony kategorii, więc pasuje do reguł MEGA-MENU (`header [class*="absolute"]
   a[href*="/categor"]`, dwa selektory atrybutu). Dlatego tutaj też muszą być
   przynajmniej dwa, inaczej mega-menu wygrywa i lista jest cała różowa. */
details ul[class*="absolute"] a[href*="/categor"],
header details ul a[href*="/categor"] {
  background: transparent !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  justify-content: flex-start !important;
}
details ul[class*="absolute"] a[href*="/categor"] {
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: .78rem !important; font-weight: 500 !important; color: var(--mm-ink) !important;
}
details ul[class*="absolute"] a[href*="/categor"]:hover { background: var(--mm-bg) !important; }
/* wybrana opcja — jedyna różowa w liście */
details ul[class*="absolute"] a[href*="/categor"][class*="bg-brand-soft"] {
  background: var(--mm-pink-soft) !important; color: var(--mm-pink-dark) !important; font-weight: 700 !important;
}
/* sam przycisk rozwijający */
details > summary { border-radius: 999px !important; }
details > summary:hover { border-color: var(--mm-pink) !important; color: var(--mm-pink-dark) !important; }

/* ---------- 26.18 LISTA SORTOWANIA — DOMKNIĘCIE ----------
   Reguł malujących `a[href*="/categor"]` jest w tym motywie kilka (kafelki
   kategorii, pasek pod hero, mega-menu) i licytowanie się z nimi po jednej
   nie ma sensu. Tutaj selektor zbudowany tak, żeby wygrał z każdą z nich:
   trzy selektory atrybutu i pełna ścieżka od <body>. Klasa `px-4` należy do
   pozycji listy sortowania i nie występuje na kafelkach kategorii. */
body details ul[class*="absolute"] li a[href*="/categor"][class*="px-4"] {
  background: #fff !important;
  color: var(--mm-ink) !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  font-size: 0.78rem !important;
  justify-content: flex-start !important;
}
body details ul[class*="absolute"] li a[href*="/categor"][class*="px-4"]:hover {
  background: var(--mm-bg) !important; color: var(--mm-pink-dark) !important;
}
/* jedyna różowa pozycja = aktualnie wybrane sortowanie */
body details ul[class*="absolute"] li a[href*="/categor"][class*="bg-brand-soft"] {
  background: var(--mm-pink-soft) !important; color: var(--mm-pink-dark) !important; font-weight: 700 !important;
}
body details ul[class*="absolute"] li a[href*="/categor"] span,
body details ul[class*="absolute"] li a[href*="/categor"] h3 {
  text-transform: none !important; letter-spacing: 0 !important; font-size: 0.78rem !important;
}

/* ---------- 26.19 UKRYCIE ETYKIET TAGÓW POD NAZWĄ PRODUKTU ----------
   Życzenie Roberta (6.08): pigułki „Rozmiar 116 / Ecru / Granat…" pod tytułem
   na karcie produktu mają zniknąć. Rozmiar i kolor klient i tak wybiera niżej
   w selektorze wariantów, więc te etykiety tylko powtarzały informację.

   WAŻNE: ukrywamy TYLKO ich wyświetlanie tutaj. Same tagi zostają w bazie,
   bo napędzają filtry „Rozmiar i kolor" na stronie kategorii — usunięcie ich
   wyłączyłoby filtrowanie. Panel boczny filtrów jest nietknięty (inny kontener). */
main a[href*="?tag="][class*="rounded-full"][class*="bg-slate"] { display: none !important; }
/* pusty kontener po ukryciu pigułek nie ma zostawiać dziury pod tytułem */
main div[class*="flex-wrap"]:not(:has(> a[href*="/products/"])):has(> a[href*="?tag="]) {
  display: none !important;
}

/* ============================================================
   27. FORMULARZ ZAMÓWIENIA — miękko, nowocześnie, w palecie marki
   ------------------------------------------------------------
   Uwagi Roberta (6.08): „zbyt kanciasty i tandetny". Winne w dużej mierze
   wcześniejsze decyzje tego motywu (v3 spłaszczał promienie do 0-2 px)
   oraz reguła zamieniająca WSZYSTKO z klasą `bg-red-*` na pełny róż marki —
   przez co spokojny komunikat informacyjny krzyczał jak alarm.
   ============================================================ */

/* ---------- 27.1 KOMUNIKAT „płatność niedostępna" ----------
   To informacja, nie błąd krytyczny. Zamiast płachty pełnego różu:
   jasne tło, ciemny czytelny tekst i pionowy akcent z lewej. */
main div[class*="bg-red-50"], main div[class*="bg-red-5"][class*="border"] {
  background: #fff5f8 !important;
  border: 1px solid rgba(229,57,122,.22) !important;
  border-left: 4px solid var(--mm-pink) !important;
  border-radius: 14px !important;
  color: #7d1235 !important;
  box-shadow: 0 2px 10px rgba(229,57,122,.07) !important;
}
main div[class*="bg-red-50"] * { color: #7d1235 !important; }

/* ---------- 27.2 KARTY SEKCJI: białe, zaokrąglone, z oddechem ---------- */
/* UWAGA: bez `main form > div` — ten selektor lapal takze WIERSZE pol
   formularza (grid z etykietami) i rysowal im ramki kart, przez co przez
   formularz biegly poziome kreski. Celujemy wylacznie w prawdziwe karty. */
main div[class*="bg-white"][class*="border"][class*="rounded"],
main div[class*="rounded-lg"][class*="p-5"] {
  border-radius: 18px !important;
  border: 1px solid var(--mm-line) !important;
  box-shadow: 0 2px 14px rgba(17,17,20,.05) !important;
}
/* karta „Dane kupującego" miała różowe tło — na białym czyta się spokojniej */
main div[class*="bg-brand-soft"][class*="p-"], main section[class*="bg-brand-soft"] {
  background: #fff !important;
}

/* ---------- 27.3 POLA FORMULARZA ---------- */
main .form-input, main input[type="text"], main input[type="email"],
main input[type="tel"], main select, main textarea {
  border-radius: 12px !important;
  border: 1.5px solid var(--mm-line) !important;
  background: #fff !important;
  padding: 0.72rem 0.95rem !important;
  font-size: 0.92rem !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
main .form-input:focus, main input:focus, main select:focus, main textarea:focus {
  border-color: var(--mm-pink) !important;
  box-shadow: 0 0 0 4px rgba(229,57,122,.11) !important;
  outline: none !important;
}
main .form-input::placeholder, main input::placeholder { color: #a9a9b4 !important; }
/* etykiety: spokojniejsze, gwiazdka w kolorze marki zamiast alarmowej czerwieni */
main label { font-size: 0.78rem !important; font-weight: 600 !important; color: #4a4a57 !important; }
main label span[class*="text-red"], main label [class*="text-danger"] { color: var(--mm-pink) !important; }

/* ---------- 27.4 PRZEŁĄCZNIK „Osoba prywatna / Firma" ----------
   Był róż + CZERŃ. Teraz: aktywny róż, nieaktywny biały z obwódką. */
main button[class*="rounded-full"][class*="text-xs"][class*="font-bold"]:not([class*="bg-brand"]) {
  background: #fff !important; color: #5a5a66 !important;
  border: 1.5px solid var(--mm-line) !important;
}
main button[class*="rounded-full"][class*="text-xs"][class*="font-bold"]:not([class*="bg-brand"]):hover {
  border-color: var(--mm-pink) !important; color: var(--mm-pink-dark) !important;
}

/* ---------- 27.5 POLA WYBORU: kolor marki zamiast systemowego błękitu ---------- */
main input[type="radio"], main input[type="checkbox"] {
  accent-color: var(--mm-pink) !important;
  width: 1.05rem !important; height: 1.05rem !important;
}
/* Wybrany wariant dostawy — wyraźny, ale nie krzykliwy.
   WAŻNE: tylko opcje w formie KAFELKA (mają własną ramkę). Bez tego warunku
   podświetlenie łapało też zwykłe wiersze radiowe („Taki sam jak dane
   zamawiającego") i rysowało przez formularz różowy pasek na całą szerokość. */
main label[class*="border"]:has(input[type="radio"]:checked),
main div[class*="border"]:has(> input[type="radio"]:checked) {
  border-color: var(--mm-pink) !important;
  background: #fff7fa !important;
}

/* ---------- 27.6 PRZYCISK PŁATNOŚCI ----------
   Gdy nieaktywny, ma WYGLĄDAĆ na nieaktywny — blady róż mylił, bo wyglądał
   jak zwykły przycisk marki, tylko gorzej wydrukowany. */
main button[disabled][class*="bg-brand"], main button[disabled][class*="rounded-full"],
main button[disabled], main button[aria-disabled="true"][class*="bg-brand"] {
  background: #e9e9ee !important; color: #8a8a96 !important;
  box-shadow: none !important; cursor: not-allowed !important;
}
main button[disabled]::after { display: none !important; }

/* ---------- 27.7 PODSUMOWANIE ZAMÓWIENIA ---------- */
main aside div[class*="bg-white"], main div[class*="sticky"][class*="bg-white"] {
  border-radius: 18px !important;
}

/* ---------- 27.8 KARTA ZAMÓWIENIA NIE JEST NEWSLETTEREM ----------
   Reguła `section:has(input[type="email"])` została napisana pod blok
   newslettera na stronie głównej i malowała go na różowo. Na stronie
   zamówienia trafiała jednak w kartę „Dane kupującego" — bo tam też jest
   pole e-mail. Karta formularza ma być biała, jak pozostałe sekcje. */
main section[class*="bg-white"]:has(input[type="email"]),
main section[class*="rounded"]:has(input[type="tel"]),
main section:has(input[type="email"]):has(input[type="tel"]) {
  background: #fff !important;
  border-radius: 18px !important;
  border: 1px solid var(--mm-line) !important;
  box-shadow: 0 2px 14px rgba(17,17,20,.05) !important;
}

/* ---------- 27.9 KONIEC „RAMKI W RAMCE" ----------
   Wiersze pól (grid etykieta+pole) dostawały własne obramowanie z reguły
   napisanej pod blok NEWSLETTERA (`section:has(input[type="email"]) > div`).
   Efekt: ramka wokół wiersza, a w środku pola z własnymi ramkami — ciężko
   i niechlujnie. Wiersz ma być samym układem, bez dekoracji. */
main section:has(input[type="email"]) > div,
main section:has(input[type="tel"]) > div,
main section:has(input[type="email"]) div[class*="grid"],
main section:has(input[type="email"]) div[class*="space-y"] {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* odstęp między wierszami zamiast kresek — oddech robi układ, nie linie */
main section:has(input[type="email"]) div[class*="grid"][class*="gap-"] {
  gap: 1rem 1.1rem !important;
  margin-bottom: 1.1rem !important;
}
/* pola: lżejsza kreska, bez „pudełkowego" wrażenia */
main .form-input, main input[type="text"], main input[type="email"],
main input[type="tel"], main select, main textarea {
  border-width: 1px !important;
  border-color: #e3e3ea !important;
  box-shadow: 0 1px 2px rgba(17,17,20,.03) !important;
}
main .form-input:hover, main input[type="text"]:hover, main input[type="email"]:hover,
main input[type="tel"]:hover { border-color: #d3d3dd !important; }

/* ---------- 27.10 PLAKIETKA „-10% NA START" W NEWSLETTERZE ----------
   Element jest w kodzie okrągłą odznaką 48x48 przyklejoną absolutnie do rogu
   ikonki (`absolute -top-2 -right-2 w-12 h-12`), ale mieści dłuższy tekst,
   więc rozpychał się do 104 px i nachodził na napis „BĄDŹ PIERWSZA".
   Zamiast walczyć z pozycjonowaniem — wyjmujemy ją z warstwy absolutnej
   i pokazujemy jako zwykłą pigułkę nad nagłówkiem. */
section:has(input[type="email"]) div[class*="absolute"][class*="-top-2"][class*="rounded-full"] {
  position: static !important;
  display: inline-flex !important; align-items: center !important;
  width: auto !important; height: auto !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 999px !important;
  background: var(--mm-pink) !important; color: #fff !important;
  font-size: 0.68rem !important; font-weight: 800 !important;
  letter-spacing: 0.06em !important; white-space: nowrap !important;
  margin-bottom: 0.6rem !important;
}