/* ============================================================================
   KLASA "PRODUKT" (/produkt/<slug>/) — style dla src/produkt/produkt.njk.

   public/styles.css pokrywa siatke (.row/.col-*), przyciski (.c-btn*), popupy
   (.c-popup*) i formularz (.c-form-cf7*) - te klasy TU sie NIE powtarzaja.

   UWAGA (poprawka 2026-09-10): pierwotny komentarz mowil tu takze o
   public/css/strony.css - to bylo bledne zalozenie, bo karta produktu TEGO
   ARKUSZA NIE LADUJE (layout.njk wstawia /css/produkt.css + /produkt-opcje.css
   zamiast niego). Klasy, ktore zyly tylko w strony.css, renderowaly sie tu
   goleu: .c-btn--secondary (glowne CTA "Dodaj do koszyka" - przeniesione do
   public/styles.css, bo to komponent globalny) oraz .c-breadcrumb (okruszki bez
   odstepow wokol "|" - blok nizej).

   Wartosci (kolory, odstepy, rozmiary fontow) dla klas unikalnych dla strony
   produktu (galeria, podsumowanie, opis, tabela parametrow, opinie) sa wziete
   z produkcyjnego CSS (zrodla/css/a2ecf5e77c6e948e4a9efad2c7d5bebe.css, klasy
   w-content-single-product__*, w-single-product-title__*, w-custom-stock,
   w-single-product-reviews*) - fabryka go nie laduje (za duzy, ma tez martwe
   selektory WooCommerce/wcpa niepotrzebne tu), ale liczby (font-size, kolory,
   odstepy) sa z niego przepisane 1:1 dla wizualnej zgodnosci z produkcja.
   Zmienne --blue/--navy/--ink/--line sa juz zdefiniowane w public/styles.css.
============================================================================ */

.w-content-single-product__content { padding-top: 20px; padding-bottom: 60px; }

/* ---------------------------------------------------------- okruszki --- */
/* Kopia blokowa z public/css/strony.css (tam linie .c-breadcrumb*) - dokladnie
   tym samym wzorcem, ktorym wlasne kopie tego bloku maja juz public/css/blog.css
   i public/css/prawne.css: kazdy arkusz "klasy strony" nosi swoja kopie okruszkow,
   bo strony.css nie jest ladowany wszedzie. Bez tego separator "|" nie mial
   padding: 0 4px i breadcrumb renderowal sie jako "Home|Dystrybutory wody|...".
   Warianty .c-breadcrumb__big-wrap.white / .white-all sa POMINIETE swiadomie -
   karta produktu renderuje samo <nav class="c-breadcrumb"> bez tego wrappera
   (src/produkt/produkt.njk), wiec bylyby martwym CSS. */
.c-breadcrumb {
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  text-transform: none;
  text-decoration: none;
  color: var(--navy);
}
/* Kolor #505050 ze strony.css jest tu SWIADOMIE pominiety. Na karcie produktu
   okruszki leza na jasnym tle (na innych stronach - na ciemnym hero, gdzie sa
   biale), wiec szary link obok navy-owego tekstu dawal kontrast ~2,3:1 miedzy
   linkiem a tekstem i axe zglaszal "link-in-text-block". Link dziedziczy wiec
   kolor tekstu, tak jak przed dodaniem tego bloku - zmienia sie tylko odstep
   przy separatorze, o ktory chodzilo w poprawce. */
.c-breadcrumb > a { transition: all 0.2s ease-out; text-decoration: none; }
.c-breadcrumb > a:hover { color: var(--navy); }
.c-breadcrumb__separate { display: inline-block; vertical-align: middle; padding: 0 4px; margin-bottom: 4px; }

/* ------------------------------------------------------------- galeria --- */
/* align-self: flex-start - bez tego kolumna galerii (flex item w .row) ma
   domyslne align-items:stretch i rozciaga sie do wysokosci kolumny podsumowania
   (ktora bywa znacznie wyzsza - cena/opis/przyciski), zostawiajac pusty pas
   pod kwadratowa galeria. Chcemy zeby galeria "przyklejala sie" do gory. */
.w-content-single-product__col-gallery { padding-right: 40px; align-self: flex-start; position: sticky; top: 20px; }
@media (max-width: 991.98px) { .w-content-single-product__col-gallery { padding-right: 15px; margin-bottom: 30px; position: static; } }

.produkt-galeria__stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: #f5f8fc; border-radius: 12px; overflow: hidden;
}
.produkt-galeria__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.produkt-galeria__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 24px; opacity: 0; transition: opacity .25s ease;
}
.produkt-galeria__radio:checked + .produkt-galeria__img { opacity: 1; z-index: 1; }
.produkt-galeria__thumbs {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.produkt-galeria__thumb {
  display: block; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  border: 2px solid var(--line); cursor: pointer; flex-shrink: 0; background: #f5f8fc;
}
.produkt-galeria__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.produkt-galeria__radio:focus-visible ~ .produkt-galeria__thumbs .produkt-galeria__thumb,
.produkt-galeria__thumb:hover { border-color: var(--blue); }

/* --------------------------------------------------------- podsumowanie --- */
.w-content-single-product__col-summary { position: relative; padding-left: 33px; }
.w-content-single-product__col-summary::after {
  position: absolute; top: 0; left: -30px; height: 90%; border-left: 1px solid var(--line); content: "";
}
@media (max-width: 991.98px) {
  .w-content-single-product__col-summary { padding-left: 15px; }
  .w-content-single-product__col-summary::after { display: none; }
}

.w-single-product-title__tag {
  margin: 11px 0 8px; font-size: 40px; line-height: 1.25; font-weight: 600; color: var(--navy);
}
@media (max-width: 575.98px) { .w-single-product-title__tag { font-size: 26px; } }
.w-content-single-product__sku { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 300; color: var(--ink); }

/* B3 (parytet z produkcja, 2026-09-03): zakladki/ikony typu wody ("Woda zimna" /
   "Woda goraca" / "Woda gazowana" itp.) pod H1 - te same klasy co na kartach
   siatki produktow (kategoria.njk/produkty.njk), ktore ladujawstyle z
   public/css/strony.css. Strona produktu laduje TYLKO produkt.css, wiec bazowe
   regulki .c-product-icons (bez modyfikatora --inline, jak na produkcji dla
   pojedynczego produktu) sa tu dopisane 1:1 z strony.css, zeby wyglad byl
   identyczny bez duplikowania calego pliku. */
.c-product-icons { position: relative; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-start; column-gap: 10px; row-gap: 10px; margin: 8px 0 18px; }
.c-product-icons__text, .c-product-icons__separate { font-size: 16px; font-weight: 300; line-height: 1.2; text-align: center; color: #0056d3; }
.c-product-icons__separate { display: block; border-right: 1px solid #0056d3; }

.w-content-single-product__price-wrap { display: flex; align-items: center; margin: 6px 0 14px; }
.w-content-single-product__price-wrap .price-normal .woocommerce-Price-amount {
  color: var(--navy); font-size: 30px; font-weight: 700;
}

.w-custom-stock {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 14px 7px;
  font-size: 15px; color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.w-custom-stock.in-stock svg circle { fill: #90cc23; }
.w-custom-stock.out-of-stock svg circle { fill: #dc330f; }

.w-content-single-product__short-desc ul,
.w-content-single-product__additional-desc ul {
  margin: 0 0 20px; padding: 0 0 0 20px; color: var(--navy);
}
.w-content-single-product__short-desc ul li,
.w-content-single-product__additional-desc ul li {
  font-size: 15px; line-height: 1.6; margin-bottom: 6px;
}
.w-content-single-product__short-desc ul li::marker,
.w-content-single-product__additional-desc ul li::marker { color: var(--blue); }
.w-content-single-product__additional-desc { margin: 4px 0 24px; padding: 16px 18px; background: #f5f8fc; border-radius: 10px; }

.w-content-single-product__wrap-btn-company { margin: 0 0 12px; }
.w-content-single-product__wrap-btn-company .c-btn { width: 100%; }
.w-content-single-product__buy-actions { margin-bottom: 18px; }
.w-content-single-product__buy-actions .c-btn { width: 100%; padding-top: 14px; padding-bottom: 14px; font-size: 16px; }

/* -------------------------------------------- selektor wariantu "Kolor" --- */
/* Odtwarza pole WCPA color-group z produkcji (kolko-swatch + etykieta) -
   patrz komentarz w produkt.njk nad .w-content-single-product__variant.
   Rozmiar kolka (27px) i obramowanie wziete 1:1 z produkcyjnego CSS
   (.wcpa_color_bg). Produkcja chowa tekstowa etykiete (tylko tooltip) - tu
   zostaje widoczna, dla czytelnosci bez JS-owego tooltipu. */
.w-content-single-product__variant { margin: 0 0 18px; }
.w-content-single-product__variant-label {
  margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--navy);
}
.w-content-single-product__variant-required { margin-left: 2px; color: #f25a87; }
.w-content-single-product__variant-options { display: flex; flex-wrap: wrap; gap: 10px; }
.w-content-single-product__variant-swatch {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px;
  border: 1px solid var(--line); border-radius: 30px; cursor: pointer;
  font-size: 14px; color: var(--ink); transition: border-color .15s ease;
}
.w-content-single-product__variant-swatch:hover { border-color: var(--blue); }
.w-content-single-product__variant-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.w-content-single-product__variant-swatch-dot {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid #cfddef; flex-shrink: 0;
}
.w-content-single-product__variant-swatch input:checked ~ .w-content-single-product__variant-swatch-dot {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
.w-content-single-product__variant-swatch input:checked ~ .w-content-single-product__variant-swatch-text {
  color: var(--navy); font-weight: 600;
}
.w-content-single-product__variant-swatch input:focus-visible ~ .w-content-single-product__variant-swatch-dot {
  outline: 2px solid var(--blue); outline-offset: 2px;
}
/* Produkty z jednym, wymuszonym kolorem (39/47) - pole widoczne 1:1 jak w
   produkcji (WCPA je tez renderuje), ale bez realnego wyboru: input jest
   disabled (patrz produkt.njk), wiec kursor i hover nie sugeruja interakcji. */
.w-content-single-product__variant-swatch[data-variant-fixed] {
  cursor: default; border-style: dashed;
}
.w-content-single-product__variant-swatch[data-variant-fixed]:hover { border-color: var(--line); }

.w-content-single-product__summary-footer { padding-top: 6px; border-top: 1px solid var(--line); }
.w-content-single-product__item-icon-text { font-size: 14px; color: var(--ink); }
.w-content-single-product__item-icon-text .c-link { color: var(--blue); font-weight: 600; text-decoration: none; }
.w-content-single-product__item-icon-text .c-link:hover { text-decoration: underline; }

/* --------------------------------------------------------------- opis --- */
.w-content-single-product__description-main {
  padding: 29px 0 40px; margin-top: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--navy);
}
.w-content-single-product__description-main .c-text { max-width: 850px; }
.w-content-single-product__description-main h2 { font-size: 28px; font-weight: 700; margin: 34px 0 15px; color: var(--navy); }
.w-content-single-product__description-main h2:first-child { margin-top: 0; }
.w-content-single-product__description-main p { line-height: 1.65; margin: 0 0 16px; }
.w-content-single-product__description-main ul,
.w-content-single-product__description-main ol { margin: 10px 0 20px; padding: 0 0 0 22px; }
.w-content-single-product__description-main ul li,
.w-content-single-product__description-main ol li { font-size: 16px; line-height: 1.6; margin-bottom: 10px; }
.w-content-single-product__description-main ul li::marker,
.w-content-single-product__description-main ol li::marker { color: var(--blue); }
.w-content-single-product__description-main img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.w-content-single-product__description-main iframe { max-width: 100%; }
@media (max-width: 575.98px) {
  .w-content-single-product__description-main h2 { font-size: 22px; margin: 26px 0 10px; }
}

/* --------------------------------------------------- tabela parametrow --- */
.w-content-single-product__params { padding: 30px 0; border-bottom: 1px solid var(--line); }
/* H2 sekcji parametrow rowna sie pozostalym H2 na stronie (28px), zeby zaden
   H3 nie byl od H2 wiekszy. */
.w-content-single-product__params-title { font-size: 28px; font-weight: 700; color: var(--navy); margin: 0 0 16px; }
@media (max-width: 767.98px) { .w-content-single-product__params-title { font-size: 24px; } }
.w-content-single-product__params-table-wrap { overflow-x: auto; }
.w-content-single-product__params-table { width: 100%; max-width: 700px; border-collapse: collapse; }
.w-content-single-product__params-table tr { border-bottom: 1px solid var(--line); }
.w-content-single-product__params-table tr:last-child { border-bottom: none; }
.w-content-single-product__params-table th,
.w-content-single-product__params-table td { text-align: left; padding: 11px 14px; font-size: 15px; line-height: 1.5; }
.w-content-single-product__params-table th { font-weight: 600; color: var(--navy); width: 42%; background: #f5f8fc; }
.w-content-single-product__params-table td { color: var(--ink); font-weight: 300; }

/* --------------------------------------------------------- film produktu ---
   .youtube-video-container ma juz wlasna geometrie (max-width 1200px,
   aspect-ratio 16:9, zaokraglone rogi) w public/styles.css - tu tylko
   dopasowujemy odstep pionowy do rytmu reszty karty (jak sekcja parametrow
   wyzej) i zdejmujemy jej domyslny "margin: 40px auto", zeby nie dublowal
   sie z padding-em tego wrappera. */
.w-content-single-product__video { padding: 10px 0 30px; border-bottom: 1px solid var(--line); }
.w-content-single-product__video .youtube-video-container { margin: 0 auto; }

/* -------------------------------------------------------------- opinie --- */
.w-single-product-reviews { padding: 40px 0; }
.w-single-product-reviews__title { margin-bottom: 12px; font-size: 30px; font-weight: 600; color: var(--navy); }
.w-single-product-reviews__counts { display: block; margin-bottom: 20px; font-size: 16px; font-weight: 300; color: var(--ink); }
.w-single-product-reviews__list { display: flex; flex-direction: column; gap: 14px; max-width: 700px; }
.w-single-product-reviews .c-opinion--review {
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px;
}
.w-single-product-reviews .c-opinion__name { font-weight: 700; margin: 0 0 6px; color: var(--navy); }
.w-single-product-reviews .c-opinion__stars { margin-bottom: 8px; }
.w-single-product-reviews .c-opinion__description { margin: 0; color: var(--ink); line-height: 1.6; }
.woocommerce-noreviews { color: var(--ink); font-size: 15px; }

/* ---------------------------------- "Produkty z tej kategorii"/"powiazane" --- */
/* Poprawka 2026-09-11: obie sekcje byly STATYCZNA SIATKA (CSS grid), bo
   bindCarousel() w app.js wiazal tylko PIERWSZA karuzele na stronie
   (document.querySelector) - z zakazem dopisywania kolejnych wywolan.
   Ten zakaz zostal zniesiony: bindCarousel() teraz obsluguje wiele instancji
   (querySelectorAll + strzalki wiazane lokalnie w obrebie najblizszego
   ".container" - patrz komentarz w public/app.js), wiec obie sekcje ponizej
   reuzywaja markupu i klas karuzeli ze strony glownej (.swiper
   .js-products-swiper .swiper-wrapper .swiper-slide, .b-products__navigation,
   .b-products__arrow--prev/--next) - te klasy SA JUZ w pelni zdefiniowane w
   public/styles.css (gap/szerokosc slajdu .js-products-swiper .swiper-slide,
   wyglad kolek .b-products__arrow), wiec nie trzeba ich tu powtarzac. Tu
   dopisane jest tylko to, czego styles.css nie pokrywa: pozycjonowanie
   strzalek wzgledem TEGO kontenera (".b-products-list .container" zamiast
   ".b-products .container" z homepage) i przycinanie krawedzi karuzeli
   (overflow: hidden na .b-products-list, analogicznie do .b-opinions/.b-products
   w public/styles.css). Wartosci (padding sekcji, font-size/waga/kolor tytulu,
   margin naglowka) przepisane 1:1 z produkcyjnego CSS (zrodla/css/
   a2ecf5e77c6e948e4a9efad2c7d5bebe.css, selektor ".w-content-single-product
   .b-products-list__title.c-title"). Karty produktow uzywaja tych samych klas
   co produkcja (.w-content-product / .woocommerce-loop-product__title / .price
   / .add_to_cart_button / .special-rent-price) - zdefiniowane tu od nowa, bo
   produkt.njk NIE laduje public/css/strony.css (gdzie te klasy juz istnieja
   dla /produkty/ i kategorii produktowych). */
.b-products-list { padding: 40px 0; border-top: 1px solid var(--line); overflow: hidden; }
@media (max-width: 767.98px) { .b-products-list { padding: 25px 0; } }
/* position: relative - punkt odniesienia dla .b-products__navigation
   (position: absolute, reuzyty ze strony glownej, gdzie tym punktem jest
   ".b-products .container" - patrz public/styles.css). */
.b-products-list .container { position: relative; }
.b-products-list__header-wrap { display: flex; justify-content: center; margin-bottom: 33px; }
@media (max-width: 767.98px) { .b-products-list__header-wrap { margin-bottom: 25px; } }
/* Skala naglowkow karty produktu: H1 40px > H2 28px > H3 26px > tytuly kart 16px.
   Wczesniej ten H3 miał 46px - byl wiekszy od H1 i ponad dwa razy wiekszy od H2,
   czyli wielkosc przeczyla waznosci. */
.b-products-list__title { margin: 0; text-align: center; font-size: 26px; font-weight: 600; color: var(--navy); }
@media (max-width: 767.98px) { .b-products-list__title { font-size: 20px; } }

.b-products-list .w-content-product {
  position: relative; height: 100%; display: flex; flex-direction: column;
  border-bottom: 1px solid var(--line); padding: 0 0 20px;
}
/* Cena zakupu na kafelku wynajmu: ODSLONIETA 2026-09-12 (decyzja Nikodema).
   BYLO: .price mial display:none, ale szablon i tak drukowal napis "lub kup" -
   klient czytal obietnice wyboru, pod ktora nie bylo ani kwoty, ani przycisku.
   Blad odziedziczony po starej stronie. Teraz obie sciezki sa widoczne:
   najem z cena miesieczna i zakup z cena jednorazowa. */
.b-products-list .w-content-product.special-rent-price .add_to_cart_button { display: none; }
.b-products-list .woocommerce-LoopProduct-link { display: block; color: inherit; text-decoration: none; }
.b-products-list .w-content-product__wrap-img {
  aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #f5f8fc; margin-bottom: 14px;
}
.b-products-list .w-content-product__wrap-img img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.b-products-list .woocommerce-loop-product__title { margin: 0 0 12px; font-size: 16px; font-weight: 400; color: var(--navy); text-align: left; }
.b-products-list .price { display: block; margin-bottom: 14px; }
.b-products-list .price .amount { font-size: 19px; font-weight: 700; color: var(--navy); }
.b-products-list .add_to_cart_button {
  display: block; margin-top: auto; text-align: center; padding: 10px; border-radius: 30px;
  border: 1px solid var(--blue); color: var(--blue); font-weight: 600; text-decoration: none; font-size: 14px;
}
.b-products-list .add_to_cart_button:hover { background: var(--blue); color: #fff; }
.b-products-list .w-content-product__rent-price { margin-top: auto; padding-top: 10px; font-size: 14px; color: var(--ink); }
.b-products-list .w-content-product__rent-price strong { color: var(--navy); font-size: 16px; }

/* ------------------------------------------- "Opinie klientow" (b-opinions) --- */
/* .b-opinions/.c-opinion*/.swiper*/.b-opinions__arrow* SA JUZ w pelni
   zdefiniowane w public/styles.css (globalny plik, ladowany przez layout.njk
   na kazdej stronie - uzywa ich tez strona glowna, patrz src/sekcje/
   b-opinions.njk). Poprawka 2026-09-11: ta sekcja byla STATYCZNA SIATKA
   (.b-opinions__static-grid) z tego samego powodu co "Produkty z tej
   kategorii"/"powiazane" wyzej (bindCarousel() wiazal tylko pierwsza karuzele
   na stronie) - teraz produkt.njk renderuje dokladnie ten sam markup karuzeli
   co strona glowna (.swiper .js-opinions-swiper), wiec tu NIE TRZEBA zadnego
   CSS - uklad kart w karuzeli jest juz w pelni pokryty przez public/styles.css. */

/* ================================================ POPUP CHECKOUTU ("kup teraz") ===
   #product-checkout-form (src/produkt/produkt.njk) - popup bazowy (.c-popup*,
   .c-form-cf7*, .wpcf7-not-valid*, .hp-field) jest juz w public/styles.css
   (globalny, patrz komentarz tam przy "POPUP PAKIETOW"); tu SA TYLKO klasy
   unikalne dla tresci checkoutu (podsumowanie ceny, stepper ilosci, zgoda,
   stan fallbacku po 503) - kolory/odstepy spojne z reszta strony produktu
   (te same zmienne --blue/--navy/--ink/--line co wyzej w tym pliku). */
.c-checkout__summary {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px;
  padding: 16px 18px; background: #f5f8fc; border-radius: 10px;
}
.c-checkout__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.c-checkout__row-label { font-size: 14px; color: var(--ink); }
.c-checkout__row-value { font-size: 15px; font-weight: 600; color: var(--navy); }
.c-checkout__row--total { padding-top: 10px; margin-top: 2px; border-top: 1px solid var(--line); }
.c-checkout__row--total .c-checkout__row-label { font-weight: 600; color: var(--navy); }
.c-checkout__row--total .c-checkout__row-value { font-size: 19px; }

.c-checkout__stepper { display: flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 30px; overflow: hidden; background: #fff; }
.c-checkout__stepper-btn {
  appearance: none; border: none; background: transparent; width: 34px; height: 34px;
  font-size: 18px; line-height: 1; color: var(--blue); cursor: pointer; flex-shrink: 0;
}
.c-checkout__stepper-btn:hover:not(:disabled) { background: #eaf3fd; }
.c-checkout__stepper-btn:disabled { color: var(--line); cursor: not-allowed; }
.c-checkout__stepper-input {
  width: 42px; height: 34px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-size: 15px; font-weight: 600; color: var(--navy);
  -moz-appearance: textfield;
}
.c-checkout__stepper-input::-webkit-outer-spin-button,
.c-checkout__stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.c-checkout__form-row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.c-checkout__form-row-split .c-form-cf7__wrap-input { margin: 0; }
@media (max-width: 480px) { .c-checkout__form-row-split { grid-template-columns: 1fr; } }

.c-checkout__consent { margin: 10px 0 18px; }
.c-checkout__consent-label { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.c-checkout__consent-label input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--blue); }
.c-checkout__consent-label a { color: var(--blue); text-decoration: underline; }
.c-checkout__consent-label[aria-invalid="true"],
.c-checkout__consent input[aria-invalid="true"] ~ .wpcf7-not-valid-tip { color: #dc3232; }

.c-checkout__fallback { text-align: center; padding: 10px 0 6px; }
.c-checkout__fallback-text { margin: 0 0 18px; color: var(--ink); line-height: 1.6; }