/* ============================================================
 * Strona testowa „Home test” /home-test/ — projekt K składany z sekcji A–J.
 * Treść to jeden blok HTML w Gutenbergu (korzeń .dm-ht-strona).
 * Plik robi cztery rzeczy:
 *  1. przywraca makiecie style, których nie ma motyw (slajder, blog, typografia),
 *  2. wypuszcza stronę na pełną szerokość okna (motyw trzyma treść w kolumnie 1200 px),
 *  3. skaluje stałe szerokości z makiety (1320/1240 px) do szerokości ekranu,
 *  4. składa kolumny: ≤1240 px, ≤1024 px i ≤720 px.
 * ============================================================ */

/* ————— podstawa ————— */
.dm-ht-strona { width: 100%; background: #f5f7f8; font-family: "Satoshi", Arial, Helvetica, sans-serif; font-weight: 500; color: #767676; }
.dm-ht-strona a { color: #000000; text-decoration: none; }
.dm-ht-strona a:hover { color: #242424; text-decoration: underline; }
.dm-ht-strona a:focus-visible, .dm-ht-strona button:focus-visible, .dm-ht-strona input:focus-visible { outline: 2px solid #242424; outline-offset: 2px; }
.dm-ht-strona button { font: inherit; cursor: pointer; }
.dm-ht-strona h1, .dm-ht-strona h2, .dm-ht-strona h3, .dm-ht-strona h4, .dm-ht-strona p, .dm-ht-strona ul, .dm-ht-strona ol, .dm-ht-strona figure { margin: 0; }
.dm-ht-strona h1, .dm-ht-strona h2, .dm-ht-strona h3 { text-transform: none; letter-spacing: normal; }
.dm-ht-strona img { max-width: 100%; }
.dm-ht-strona input, .dm-ht-strona textarea { box-shadow: none; }

/* ————— pełna szerokość ————— */
/* Motyw zamyka treść w kolumnie 1200 px (page-szeroka / wd-page-1200). Strona główna ma iść
   na całą szerokość okna, więc wychodzimy z kolumny. Szerokość okna bez paska przewijania
   podaje home-test.js w zmiennej --dm-ht-okno; 100vw to zapas, gdyby skrypt się nie wczytał. */
.dm-ht-strona { width: var(--dm-ht-okno, 100vw); margin-left: calc(50% - var(--dm-ht-okno, 100vw) / 2); }
.dm-ht-strona > section, .dm-ht-strona > div { padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box; }
.dm-ht-strona [style*="width: 1320px"], .dm-ht-strona [style*="width: 1240px"] { width: 100% !important; max-width: 1560px; }
/* motyw dokłada pływający uchwyt bocznego panelu — na tej stronie nie ma czego otwierać, a zachodzi na treść */
body.page .wd-sidebar-opener { display: none !important; }

/* ————— slajder w banerze ————— */
.dm-ht-strona .dm-slajd { position: absolute; inset: 0; z-index: 1; opacity: 0; visibility: hidden; transition: opacity 0s linear 1s, visibility 0s linear 1s; }
.dm-ht-strona .dm-slajd.dm-slajd-aktywny { z-index: 2; opacity: 1; visibility: visible; transition: opacity 1s ease-in-out, visibility 0s; }
.dm-ht-strona .dm-kreska { display: block; width: 7px; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.7); transition: width 0.4s ease, background-color 0.4s ease; }
.dm-ht-strona .dm-kreska.dm-kreska-aktywna { width: 20px; background: #ffffff; }
.dm-ht-strona .dm-kreska-przycisk::after { content: ""; position: absolute; inset: -10px -1px; }

/* ————— blog: najechanie na tytuł zmienia zapowiedź, bez skryptu ————— */
.dm-ht-strona .dm-bl-poz { background: #ffffff; border: 1px solid #e5e7eb; transition: background-color 0.2s ease, border-color 0.2s ease; }
.dm-ht-strona .dm-bl-poz:hover, .dm-ht-strona .dm-bl-poz:focus-visible { background: #f5f7f8; border-color: #242424; text-decoration: none; }
.dm-ht-strona .dm-bl-panel > .dm-bl-art { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.35s ease; }
.dm-ht-strona .dm-bl-panel > .dm-bl-art-1 { opacity: 1; visibility: visible; }
.dm-ht-strona .dm-bl-2:hover ~ .dm-bl-panel > .dm-bl-art-1,
.dm-ht-strona .dm-bl-2:focus-visible ~ .dm-bl-panel > .dm-bl-art-1,
.dm-ht-strona .dm-bl-3:hover ~ .dm-bl-panel > .dm-bl-art-1,
.dm-ht-strona .dm-bl-3:focus-visible ~ .dm-bl-panel > .dm-bl-art-1 { opacity: 0; visibility: hidden; }
.dm-ht-strona .dm-bl-2:hover ~ .dm-bl-panel > .dm-bl-art-2,
.dm-ht-strona .dm-bl-2:focus-visible ~ .dm-bl-panel > .dm-bl-art-2,
.dm-ht-strona .dm-bl-3:hover ~ .dm-bl-panel > .dm-bl-art-3,
.dm-ht-strona .dm-bl-3:focus-visible ~ .dm-bl-panel > .dm-bl-art-3 { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .dm-ht-strona .dm-slajd, .dm-ht-strona .dm-slajd.dm-slajd-aktywny, .dm-ht-strona .dm-kreska,
  .dm-ht-strona .dm-bl-poz, .dm-ht-strona .dm-bl-panel > .dm-bl-art { transition: none; }
}

/* kafle banera: motyw ma wyższe interlinie niż makieta, więc cena nie może być obcinana */
.dm-ht-strona [style*="height: 220px"] { height: auto !important; min-height: 220px; }
.dm-ht-strona [style*="height: 220px"] img { height: 100% !important; min-height: 220px; object-fit: cover; }

/* ————— ≤1240 px: siatki produktów z 5–6 kolumn na 3 ————— */
@media (max-width: 1240px) {
  .dm-ht-strona > section, .dm-ht-strona > div { padding-left: 24px !important; padding-right: 24px !important; }
  .dm-ht-strona [style*="grid-template-columns: repeat(6"], .dm-ht-strona [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .dm-ht-strona [style*="grid-column: span 2"] { grid-column: span 1 !important; }
}

/* ————— ≤1024 px: układy dwukolumnowe (zdjęcie + tekst) na jedną kolumnę ————— */
@media (max-width: 1024px) {
  .dm-ht-strona [style*="grid-template-columns: minmax(0, 2fr)"],
  .dm-ht-strona [style*="grid-template-columns: 380px"], .dm-ht-strona [style*="grid-template-columns: 320px"],
  .dm-ht-strona [style*="grid-template-columns: 600px"], .dm-ht-strona [style*="grid-template-columns: 540px"],
  .dm-ht-strona [style*="grid-template-columns: 272px"],
  .dm-ht-strona [style*="minmax(0, 1fr) 470px"], .dm-ht-strona [style*="minmax(0, 1fr) 700px"],
  .dm-ht-strona [style*="minmax(0, 1fr) minmax(0, 660px)"], .dm-ht-strona [style*="minmax(0, 1fr) 360px 230px"],
  .dm-ht-strona [style*="minmax(0, 3fr)"], .dm-ht-strona [style*="grid-template-columns: minmax(0, 1fr) auto"] { grid-template-columns: minmax(0, 1fr) !important; }
  .dm-ht-strona [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dm-ht-strona [style*="grid-row: 1 / span 3"] { grid-row: auto !important; grid-column: 1 !important; }
  .dm-ht-strona .dm-bl-panel > .dm-bl-art { grid-template-columns: minmax(0, 1fr) !important; }
  .dm-ht-strona [style*="width: 400px"], .dm-ht-strona [style*="width: 320px"], .dm-ht-strona [style*="width: 660px"] { width: auto !important; max-width: 100%; }
  .dm-ht-strona [style*="align-items: stretch"][style*="gap: 20px"] { flex-wrap: wrap !important; }
  .dm-ht-strona [style*="width: 194px"] { width: calc(33.333% - 14px) !important; }
  .dm-ht-strona [style*="height: 460px"] { height: 420px !important; }
  .dm-ht-strona [style*="-webkit-line-clamp: 2"] { -webkit-line-clamp: 4 !important; }
  .dm-ht-strona [style*="justify-content: space-between"] { flex-wrap: wrap !important; }
}

/* ————— ≤720 px: telefon ————— */
@media (max-width: 720px) {
  .dm-ht-strona [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .dm-ht-strona [style*="grid-template-rows: repeat(2"] { grid-template-rows: auto !important; }
  .dm-ht-strona ul[style*="grid-template-columns"] > li[style*="border-left"] { border-left: 0 !important; border-top: 1px solid #f0f1f3; }
  .dm-ht-strona > section, .dm-ht-strona > div { padding-left: 16px !important; padding-right: 16px !important; }
  .dm-ht-strona [style*="padding: 88px 0"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  .dm-ht-strona [style*="font-size: 36px"] { font-size: 26px !important; }
  .dm-ht-strona [style*="font-size: 34px"], .dm-ht-strona [style*="font-size: 32px"] { font-size: 24px !important; }
  .dm-ht-strona [style*="font-size: 26px"] { font-size: 22px !important; }
  .dm-ht-strona [style*="width: 210px"], .dm-ht-strona [style*="width: 236px"], .dm-ht-strona [style*="width: 60px"][style*="height: 60px"] { width: auto !important; }
  .dm-ht-strona [style*="width: 194px"] { width: 100% !important; }
  .dm-ht-strona [style*="height: 220px"] { min-height: 180px; }
  .dm-ht-strona a[href^="mailto"] { overflow-wrap: anywhere; }
  .dm-ht-strona a[style*="border-radius: 35px"], .dm-ht-strona button[style*="border-radius: 35px"] { white-space: normal !important; max-width: 100%; text-align: center; padding-left: 18px !important; padding-right: 18px !important; }

  /* slajder: zdjęcie u góry, karta z opisem pod nim */
  .dm-ht-strona [aria-roledescription] { height: 560px !important; }
  .dm-ht-strona .dm-slajd img { height: 200px !important; }
  .dm-ht-strona .dm-slajd > span { position: static !important; width: auto !important; margin: 0 !important; padding: 18px 16px !important; border-radius: 0 0 16px 16px !important; box-shadow: none !important; }
  .dm-ht-strona .dm-slajd > span > span[style*="font-size: 34px"] { font-size: 22px !important; }
  .dm-ht-strona [role="group"][aria-label="Wybór slajdu"] { bottom: 8px !important; }
}

/* lista stu miast: reszta pokazuje się po kliknięciu przycisku */
.dm-ht-strona .dm-ht-reszta-miast { display: none !important; }
.dm-ht-strona .dm-ht-miasta-otwarte .dm-ht-reszta-miast { display: contents !important; }

/* ---------------------------------------------------------------------------
   Odstępy poprawione 18.09.2026 (uwagi Tomasza). Regułami, a nie w treści
   strony, żeby jedna zmiana objęła wersję polską, angielską i hiszpańską.
   Inline style z makiety wygrywa z arkuszem, stąd !important.
   --------------------------------------------------------------------------- */

/* 1. Pas czterech kolumn pod banerem dotykał dolnej krawędzi jasnego bloku. */
.dm-ht-strona > div[style*="padding: 20px 0 0"] { padding-bottom: 24px !important; }

/* 2. Nad ciemną kartą „Prowadzisz zakład kamieniarski?" stało 176 px pustego
      pola (88 px z sekcji nad nią + 88 px z sekcji B2B). Zostaje 40 px.
      Selektor ^= trafia tylko w sekcję B2B — jedyną bez własnego tła. */
.dm-ht-strona > #kolekcja-pogrzeb { padding-bottom: 0 !important; }
.dm-ht-strona > section[style^="padding: 88px 0"] { padding-top: 40px !important; }

/* 3. Biała szpara nad stopką: 64 px dopełnienia treści + 64 px marginesu stopki. */
main.dm-tresc:has(.dm-ht-strona) { padding-block: 0; }
body:has(.dm-ht-strona) .dm-stopka { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Zdjęcia produktów są w sklepie kwadratowe (1:1). W makiecie wchodziły
   w prostokąty o stałej wysokości i były przycinane — najmocniej na tablecie
   i telefonie. Tu wracają do kwadratu, a na wąskich ekranach idą po dwa w rzędzie.
   Blok stoi na końcu pliku, bo musi wygrać z regułami z sekcji ≤1024 i ≤720.
   --------------------------------------------------------------------------- */

/* rzędy „Witraże", „Szklane serca", „Krzyże asymetryczne" — na każdej szerokości */
.dm-ht-strona img[style*="height: 232px"] { height: auto !important; aspect-ratio: 1 / 1; }

/* rzędy „Nowości", „Szklane tablice", „Tabliczki", „Zdjęcia na pomnik" (flex):
   kafelek 194 px kurczył się tu do 55 px, bo szerokość z arkusza brały i odnośnik,
   i zdjęcie w środku. */
@media (max-width: 1024px) {
  .dm-ht-strona img[style*="width: 194px"] { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; }
}

/* ≤900 px (telefon i tablet w pionie): po dwa produkty w rzędzie.
   Wyżej zostają trzy — przy dwóch kolumnach kafelki robiłyby się większe
   niż na szerszym ekranie. Spis stu miast ma column-gap, więc go to nie dotyczy. */
@media (max-width: 900px) {
  .dm-ht-strona a[style*="width: 194px"] { width: calc(50% - 10px) !important; }
  .dm-ht-strona [style*="repeat(5, minmax(0, 1fr)); gap: 20px"],
  .dm-ht-strona [style*="repeat(4, minmax(0, 1fr)); gap: 20px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Telefon: nagłówek rzędu i pigułka „Wszystkie…" nie mieszczą się obok siebie. */
@media (max-width: 720px) {
  .dm-ht-strona [style*="align-items: baseline"][style*="gap: 16px"] { flex-direction: column; align-items: flex-start !important; }
}

/* ---------------------------------------------------------------------------
   Kafelki produktów jak w starym sklepie: treść wyśrodkowana, a po najechaniu
   zdjęcie ciemnieje i pojawia się guzik sklepu.

   Cały kafelek jest odnośnikiem do produktu, a 150 ze 152 produktów jest
   wariacyjnych — guzik prowadzi więc tam, gdzie prowadzi kafelek, i nie musi
   być osobnym elementem. Napis bierzemy ze zmiennej, którą motyw wypisuje
   w bieżącym języku.

   Guzik trzeba wyśrodkować w kwadracie ZDJĘCIA, nie w całym kafelku (pod
   zdjęciem jest jeszcze nazwa i cena). Kwadrat ma bok równy szerokości
   kafelka, więc jego środek to 50cqw — stąd kafelek jest kontenerem zapytań.
   --------------------------------------------------------------------------- */
.dm-ht-strona a[href*="/produkt/"]:has(img),
.dm-ht-strona a[href*="/product/"]:has(img),
.dm-ht-strona a[href*="/producto/"]:has(img) {
	position: relative;
	container-type: inline-size;
	text-align: center;
}

/* przyciemnienie zdjęcia */
.dm-ht-strona a[href*="/produkt/"]:has(img)::before,
.dm-ht-strona a[href*="/product/"]:has(img)::before,
.dm-ht-strona a[href*="/producto/"]:has(img)::before {
	content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1 / 1;
	border-radius: 10px; background: rgba(20, 20, 15, 0.42);
	opacity: 0; transition: opacity 0.25s ease; pointer-events: none; z-index: 3;
}

/* guzik „Wybierz opcje” */
.dm-ht-strona a[href*="/produkt/"]:has(img)::after,
.dm-ht-strona a[href*="/product/"]:has(img)::after,
.dm-ht-strona a[href*="/producto/"]:has(img)::after {
	content: var(--dm-kafel-guzik, "Wybierz opcje");
	position: absolute; top: 40%; left: 50%;
	transform: translate(-50%, -50%) translateY(6px);
	padding: 11px 22px; border-radius: 35px;
	background: #ffffff; color: #242424;
	font-size: 14px; font-weight: 500; line-height: 1.2; white-space: nowrap;
	opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none; z-index: 3;
}
@supports (top: 50cqw) {
	.dm-ht-strona a[href*="/produkt/"]:has(img)::after,
	.dm-ht-strona a[href*="/product/"]:has(img)::after,
	.dm-ht-strona a[href*="/producto/"]:has(img)::after { top: 50cqw; }
}

.dm-ht-strona a[href*="/produkt/"]:has(img):hover::before,
.dm-ht-strona a[href*="/product/"]:has(img):hover::before,
.dm-ht-strona a[href*="/producto/"]:has(img):hover::before,
.dm-ht-strona a[href*="/produkt/"]:has(img):focus-visible::before,
.dm-ht-strona a[href*="/product/"]:has(img):focus-visible::before,
.dm-ht-strona a[href*="/producto/"]:has(img):focus-visible::before { opacity: 1; }

.dm-ht-strona a[href*="/produkt/"]:has(img):hover::after,
.dm-ht-strona a[href*="/product/"]:has(img):hover::after,
.dm-ht-strona a[href*="/producto/"]:has(img):hover::after,
.dm-ht-strona a[href*="/produkt/"]:has(img):focus-visible::after,
.dm-ht-strona a[href*="/product/"]:has(img):focus-visible::after,
.dm-ht-strona a[href*="/producto/"]:has(img):focus-visible::after {
	opacity: 1; transform: translate(-50%, -50%);
}

/* odznaka „Nowość” musi zostać nad przyciemnieniem */
.dm-ht-strona a[href*="/produkt/"] span[style*="position: absolute"],
.dm-ht-strona a[href*="/product/"] span[style*="position: absolute"],
.dm-ht-strona a[href*="/producto/"] span[style*="position: absolute"] { z-index: 4; }

/* na dotyku nie ma najechania — guzik i maska tylko myszą */
@media (hover: none) {
	.dm-ht-strona a[href*="/produkt/"]:has(img)::before,
	.dm-ht-strona a[href*="/produkt/"]:has(img)::after,
	.dm-ht-strona a[href*="/product/"]:has(img)::before,
	.dm-ht-strona a[href*="/product/"]:has(img)::after,
	.dm-ht-strona a[href*="/producto/"]:has(img)::before,
	.dm-ht-strona a[href*="/producto/"]:has(img)::after { display: none; }
}

/* Kafelek produktu jest w całości odnośnikiem, więc ogólna reguła
   `.dm-ht-strona a:hover` podkreślała mu tytuł i cenę. Sygnałem najechania
   jest tu przyciemnione zdjęcie i guzik — podkreślenie jest zbędne. */
.dm-ht-strona a[href*="/produkt/"]:has(img):hover,
.dm-ht-strona a[href*="/product/"]:has(img):hover,
.dm-ht-strona a[href*="/producto/"]:has(img):hover { text-decoration: none; }

/* ---------------------------------------------------------------------------
   Podmiana zdjęcia po najechaniu (21.09.2026, prośba Tomasza)

   Zdjęcie główne produktu to zwykle ujęcie na białym tle. Po najechaniu kafel
   pokazuje PIERWSZE ZDJĘCIE Z GALERII — tam Tomasz wstawia produkt na pomniku.
   Drugi obrazek leży przykryty na pierwszym (dokłada go treść strony, klasa
   `dm-ht-zamiana`), a najechanie zmienia mu tylko przezroczystość. Bez JS.

   Warstwy w kafelku: zamiana 1 → przyciemnienie 2 → guzik 3 → odznaka 4.
   --------------------------------------------------------------------------- */
.dm-ht-strona .dm-ht-zamiana {
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
	z-index: 1;
}
.dm-ht-strona a:hover > .dm-ht-zamiana,
.dm-ht-strona a:hover > span > .dm-ht-zamiana,
.dm-ht-strona a:focus-visible > .dm-ht-zamiana,
.dm-ht-strona a:focus-visible > span > .dm-ht-zamiana { opacity: 1; }

/* Na dotyku nie ma najechania — drugi obrazek tylko niepotrzebnie by się ładował. */
@media (hover: none) {
	.dm-ht-strona .dm-ht-zamiana { display: none; }
}

/* ---------------------------------------------------------------------------
   Rząd „Nowości w sklepie": kafelek informacyjny wypełnia sekcję (21.09.2026)

   Rząd to flex ze stałymi szerokościami 194 px z makiety: sześć kafelków
   i pięć przerw to 1264 px, a sekcja przy szerokim oknie ma 1447–1504 px —
   po prawej zostawało 183–240 px pustki, a tekst w kafelku łamał się na
   cztery linijki. Produkty zostają 194 px (tak samo jak w trzech rzędach
   niżej), całą resztę zabiera kafelek informacyjny.

   `flex: 1 0 194px` — rośnie, ale nigdy nie kurczy się poniżej 194 px.
   Reguła tylko powyżej 1024 px: niżej rząd i tak się zawija, a kafelek
   dostaje szerokość procentową z sekcji „≤1024" i „≤720".
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .dm-ht-strona [style*="align-items: stretch"][style*="gap: 20px"] > div[style*="width: 194px"] {
    flex: 1 0 194px !important;
    width: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Kafle informacyjne w przerywanej ramce („7 wzorów", „4 wzory") — 21.09.2026

   Kafel krzyzy zwezony z dwoch kolumn do jednej (czwarty produkt w rzedzie)
   ma opis, ktory przy oknie 1241–1330 px nie miesci sie juz w sztywnych 232 px
   i przelewa sie przez przerywana ramke. Wysokosc idzie wiec na `auto`,
   a 232 px zostaje jako minimum — przy szerokim oknie nic sie nie zmienia.

   Selektor celuje w SPAN z ramka i wysokoscia 232 px (dwa takie na stronie:
   krzyze i szklane serca). Pozostale cztery przerywane ramki na stronie
   — „Małe zdjęcia artystyczne", „23 wzory", newsletter — nie maja tej
   wysokosci i regula ich nie dotyka.
   --------------------------------------------------------------------------- */
.dm-ht-strona [style*="height: 232px"][style*="border: 2px dashed"] {
  height: auto !important;
  min-height: 232px;
}