/* Baner promocyjny (widżet Creative Elements "abc-promo-banner") - wygląd W5 z banera Black Week 2026.
   Kolory, kadr zdjęcia i wielkość napisu przez zmienne, żeby zakładka Styl nadpisywała je w jednym miejscu.
   Napis skaluje się od --abc-pb-size (wysokość pierwszej linii), reszta w em.
   :not(#abc) podnosi priorytet ponad reguły motywu dla linków i nagłówków (bez zależności od id).
   Progi jak w CE: tablet ≤1024, telefon ≤767. */

/* Fonty napisu (SIL Open Font License), lokalnie - bez Google Fonts. Pobierają się tylko tam, gdzie jest baner. */
@font-face { font-family: "Abc Playfair Display"; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/playfair-display-900-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Abc Playfair Display"; font-style: normal; font-weight: 900; font-display: swap; src: url(../fonts/playfair-display-900-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Abc Yellowtail"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/yellowtail-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Abc Yellowtail"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/yellowtail-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* W terminie banera element pod nim (np. zwykły baner strony głównej) jest ukryty; w edytorze widać oba */
body:not(.elementor-editor-active) .abc-pb-replace + .elementor-element { display: none; }

/* isolation: zdjęcie z z-index: -1 zostaje nad tłem banera, a treść (bez position) nad zdjęciem -
   dzięki temu ::after przycisku rozciąga się na cały baner */
.abc-pb {
  --abc-pb-bg: #F7F1E6; --abc-pb-accent: #1E4B40; --abc-pb-black: #111111; --abc-pb-week-bg: #E9DCC2; --abc-pb-discount: #F6EEDC;
  --abc-pb-size: 84px; --abc-pb-x: 85%; --abc-pb-y: 50%; --abc-pb-photo-h: 180px;
  position: relative; isolation: isolate; display: flex; align-items: center; min-height: 400px; overflow: hidden;
  border-radius: 20px; background-color: var(--abc-pb-bg);
}
.abc-pb-photo { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 58%; margin: 0; }
.abc-pb-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--abc-pb-x) var(--abc-pb-y); }
/* Lewa część zdjęcia przechodzi w kolor panelu */
.abc-pb-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--abc-pb-bg) 0%, color-mix(in srgb, var(--abc-pb-bg) 60%, transparent) 22%, transparent 50%); }
.abc-pb-content { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 50%; box-sizing: border-box; padding: 24px 0 24px 86px; }
.abc-pb-notice { align-self: flex-start; padding: 4px 8px; background: #FFE58F; color: #111111; font-size: 12px; font-weight: 700; line-height: 1.2; }

/* Napis: "Black" szeryf 900, "Week" pismo odręczne na kremowym pędzlu, rabat kremowy na zielonym pędzlu */
.abc-pb-title:not(#abc) { display: flex; flex-direction: column; align-items: flex-start; margin: 0; font-size: var(--abc-pb-size); font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; }
.abc-pb-black { display: block; font-family: "Abc Playfair Display", Georgia, serif; font-weight: 900; font-size: 1em; line-height: .9; letter-spacing: -.024em; color: var(--abc-pb-black); }
.abc-pb-week { position: relative; display: block; margin: -.167em 0 0 .311em; padding: 0 .2em; font-size: 1.07em; }
.abc-pb-week::before, .abc-pb-discount::before { content: ""; position: absolute; z-index: 0; filter: var(--abc-pb-brush); }
.abc-pb-week::before { left: -6%; right: -10%; top: 32%; bottom: 4%; background: var(--abc-pb-week-bg); transform: rotate(-2deg); }
.abc-pb-week > span { position: relative; z-index: 1; display: block; font-family: "Abc Yellowtail", cursive; font-weight: 400; line-height: 1; color: var(--abc-pb-accent); transform: rotate(-6deg); }
.abc-pb-discount { position: relative; display: block; margin: .167em 0 0 -.125em; padding: .125em .5em; font-size: .762em; }
.abc-pb-discount::before { inset: 0; background: var(--abc-pb-accent); transform: rotate(-1.5deg); }
.abc-pb-discount > span { position: relative; z-index: 1; display: block; font-family: "Abc Playfair Display", Georgia, serif; font-weight: 900; line-height: 1; font-variant-numeric: lining-nums; color: var(--abc-pb-discount); }

.abc-pb-desc { max-width: 560px; margin: 14px 0 0; color: #3B4A45; font-size: 17px; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.abc-pb-desc-short { display: none; }

/* Przycisk jak na stronie głównej (zaokrąglenie 15 px, ramka 2 px); ::after - klik w dowolne miejsce banera */
.abc-pb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; box-sizing: border-box; border: 2px solid var(--abc-pb-accent); border-radius: 15px; background-color: var(--abc-pb-accent); font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.abc-pb-btn::after { content: ""; position: absolute; inset: 0; }
a.abc-pb-btn:not(#abc), a.abc-pb-btn:not(#abc):hover, a.abc-pb-btn:not(#abc):focus { color: #FFFFFF; text-decoration: none; }
.abc-pb:hover .abc-pb-btn { border-color: color-mix(in srgb, var(--abc-pb-accent) 80%, #000000); background-color: color-mix(in srgb, var(--abc-pb-accent) 80%, #000000); }
a.abc-pb-btn:not(#abc):focus:not(:focus-visible) { outline: 0; }
a.abc-pb-btn:not(#abc):focus-visible { outline: 3px solid var(--abc-pb-accent); outline-offset: 3px; }
.abc-pb-btn svg { flex: 0 0 auto; }

/* Komputer i tablet: opis wyśrodkowany pod rabatem. Siatka: kolumna 1 = rabat i opis, kolumna 2 = reszta szerokości
   "Black" i "Week" (fr nie poszerza kolumny 1); napis to podsiatka, więc jego linie leżą w tych samych kolumnach.
   Rabat przesunięty w lewo przez left (nie margines), żeby nie zmieniał szerokości kolumny - opis przesuwa się o tyle samo. */
@media (min-width: 768px) {
  .abc-pb-head { display: grid; grid-template-columns: max-content 1fr; justify-items: start; }
  .abc-pb-title:not(#abc) { display: grid; grid-column: 1 / -1; grid-row: 1 / 4; grid-template-columns: subgrid; grid-template-rows: subgrid; }
  .abc-pb-black, .abc-pb-week { grid-column: 1 / -1; }
  .abc-pb-discount { grid-column: 1; margin-left: 0; left: -.125em; }
  .abc-pb-desc { position: relative; left: calc(var(--abc-pb-size) * -.0952); grid-column: 1; grid-row: 4; justify-self: center; text-align: center; }
}

@media (max-width: 1024px) {
  .abc-pb { --abc-pb-size: 64px; min-height: 360px; }
  .abc-pb-content { max-width: 52%; padding-left: 44px; }
  .abc-pb-desc { max-width: 300px; font-size: 15px; }
  .abc-pb-desc-long { display: none; }
  .abc-pb-desc-short { display: inline; }
}

/* Telefon: zdjęcie u góry przechodzi w krem w dół, napis, opis i przycisk wyśrodkowane pod nim */
@media (max-width: 767px) {
  .abc-pb { --abc-pb-size: 52px; --abc-pb-x: 50%; --abc-pb-y: 62%; display: block; min-height: 0; }
  .abc-pb-photo { position: relative; display: block; width: auto; height: var(--abc-pb-photo-h); }
  .abc-pb-photo::after { background: linear-gradient(0deg, var(--abc-pb-bg) 0%, color-mix(in srgb, var(--abc-pb-bg) 60%, transparent) 22%, transparent 50%); }
  .abc-pb-content { align-items: center; max-width: none; margin-top: -20px; padding: 0 20px 22px; text-align: center; }
  .abc-pb-title:not(#abc) { align-items: center; }
  .abc-pb-week, .abc-pb-discount { margin-left: 0; }
  .abc-pb-btn { width: 100%; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .abc-pb-btn { transition: none; }
}