/* Widoki WooCommerce (koszyk, kasa, konto, archiwa) w wyglądzie WYŁUSKANE.
   Woo generuje swój markup, więc zamiast go przepisywać – ubieramy go w nasze tokeny:
   te same fonty, kolory, promienie, odstępy i stany przycisków co w projekcie. */

.woocommerce,
.woocommerce-page .e-con-inner,
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content {
  font-family: var(--font-sans);
  color: var(--color-text);
}

/* Nagłówki */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3 {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

/* Przyciski */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding-inline: var(--space-l);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--color-action);
  color: var(--color-on-action);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--color-action-hover);
  color: var(--color-on-action);
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-2);
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active { background: var(--color-action-active); transform: translateY(0); }
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
}

/* Tabele: koszyk, zamówienie, konto */
.woocommerce table.shop_table {
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-m);
  border-collapse: separate;
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  font-size: var(--text-small);
}
.woocommerce table.shop_table th {
  padding: var(--space-m) var(--space-s);
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-heading);
  border-bottom: var(--border-width) solid var(--color-line);
}
.woocommerce table.shop_table td { padding: var(--space-m) var(--space-s); border-top: var(--border-width) solid var(--color-line); }
.woocommerce table.shop_table tbody tr:hover { background: var(--color-paper); }
/* Koszyk: tabela produktów na białym tle (ecru zostaje w podsumowaniu po prawej, w kasie i w koncie) */
.woocommerce-cart-form table.shop_table,
.woocommerce-cart-form table.shop_table tbody tr:hover { background: var(--color-white); }
.woocommerce table.shop_table img { width: var(--space-3xl); border-radius: var(--radius-s); }
.woocommerce .cart_item a,
.woocommerce .woocommerce-cart-form a:not(.button) { color: var(--color-heading); text-decoration: none; }
.woocommerce .cart_item a:hover { color: var(--color-action); }
.woocommerce .variation,
.woocommerce dl.variation { margin: var(--space-3xs) 0 0; font-size: var(--text-micro); color: var(--color-text); }
.woocommerce dl.variation dt { font-weight: var(--weight-medium); }

/* Ceny */
.woocommerce .amount,
.woocommerce .price { font-family: var(--font-sans); color: var(--color-heading); }
.woocommerce del .amount { color: var(--color-text); opacity: var(--muted-opacity); }
.woocommerce ins { background: none; text-decoration: none; }

/* Podsumowania: koszyk i kasa */
.woocommerce .cart_totals,
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
  padding: var(--space-l);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-m);
  background: var(--color-paper);
  box-shadow: var(--shadow-1);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
  margin-top: 0;
  font-size: var(--step-2);
}

/* Formularze */
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  font-size: var(--text-small);
  color: var(--color-heading);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.select2-container .select2-selection--single {
  min-height: var(--control-height);
  padding: var(--space-2xs) var(--space-s);
  border: var(--border-width) solid var(--color-line-strong);
  border-radius: var(--radius-s);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-heading);
}
.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Komunikaty */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--color-action);
  border-radius: var(--radius-s);
  background: var(--color-sage-100);
  font-size: var(--text-small);
  color: var(--color-heading);
}
.woocommerce-error { background: var(--color-lavender-100); border-top-color: var(--color-lavender-700); }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--color-action); }

/* Konto klientki */
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: var(--border-width) solid var(--color-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-s) var(--space-2xs);
  color: var(--color-heading);
  font-size: var(--text-small);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: var(--color-action); padding-left: var(--space-xs); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { font-weight: var(--weight-medium); color: var(--color-action); }

/* Siatka produktów (archiwa) */
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product a h2,
.elementor-widget-woocommerce-archive-products ul.products li.product a { color: var(--color-heading); text-decoration: none; }
/* Przycisk pod produktem („Wybierz opcje”, „Dodaj do koszyka”): styl Woo dla siatki nadpisywał nasz – jasny tekst na kolorze marki, wyśrodkowany */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-height);
  padding: 0 var(--space-s);
  line-height: var(--leading-heading);
  background: var(--color-action);
  color: var(--color-on-action);
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.added_to_cart:hover { background: var(--color-action-hover); color: var(--color-on-action); }
.woocommerce ul.products li.product a.button:active,
.woocommerce ul.products li.product a.added_to_cart:active { background: var(--color-action-active); color: var(--color-on-action); }
.woocommerce ul.products li.product a:hover h2,
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--color-action); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-serif);
  font-size: var(--step-1);
  color: var(--color-heading);
}
.woocommerce ul.products li.product img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-m); box-shadow: var(--shadow-1); transition: transform var(--dur-slow) var(--ease-out); } /* kwadratowy kadr jak dotąd (zdjęcie jest większe niż kwadrat, przycinamy środek) */
.woocommerce ul.products li.product:hover img { transform: scale(var(--zoom-hover)); }
.woocommerce ul.products li.product .price { font-size: var(--text-small); }

@media (prefers-reduced-motion: reduce) {
  .woocommerce a.button, .woocommerce button.button, .woocommerce ul.products li.product img { transition-duration: 0s; }
  .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce ul.products li.product:hover img { transform: none; }
}

/* ---------- Moje konto: widget Elementora Pro w kolorach marki ----------
   Jego domyślne kolory to niebieski #5bc0de i szary; część z nich jest zapisana na sztywno, więc przyciski nadpisujemy wprost. */
.elementor-widget-woocommerce-my-account {
  --general-text-color: var(--color-text);
  --links-normal-color: var(--color-accent-text);
  --links-hover-color: var(--color-action);
  --tabs-normal-color: var(--color-text);
  --tabs-hover-color: var(--color-action);
  --tabs-active-color: var(--color-action);
  --tabs-divider-color: var(--color-line);
  --tables-buttons-border-color: var(--color-action);
  --tables-button-normal-text-color: var(--color-action);
  --tables-button-hover-text-color: var(--color-on-action);
  --tables-links-normal-color: var(--color-accent-text);
  --tables-links-hover-color: var(--color-action);
  --tables-items-color: var(--color-text);
  --tables-title-color: var(--color-heading);
  --tables-divider-border-color: var(--color-line);
  --typography-section-titles-color: var(--color-heading);
  --sections-background-color: var(--color-paper);
  --sections-border-color: var(--color-line);
  --sections-border-radius: var(--radius-m);
  --forms-fields-normal-color: var(--color-text);
  --forms-fields-focus-color: var(--color-heading);
  --forms-fields-normal-background-color: var(--color-white);
  --forms-fields-focus-background-color: var(--color-white);
  --forms-fields-border-radius: var(--radius-s);
  --forms-labels-color: var(--color-text);
  --forms-buttons-border-radius: var(--radius-s);
  --checkboxes-color: var(--color-action);
  --login-messages-color: var(--color-text);
  --variations-color: var(--color-text);
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-login__submit,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-register__submit,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-Button,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-EditAccountForm .button,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-address-fields .button {
  min-height: var(--control-height);
  padding: 0 var(--space-m);
  border: 0;
  border-radius: var(--radius-s);
  background: var(--color-action) !important;
  color: var(--color-on-action) !important;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-login__submit:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-register__submit:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-Button:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-EditAccountForm .button:hover,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-address-fields .button:hover {
  background: var(--color-action-hover) !important;
  color: var(--color-on-action) !important;
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-2);
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-login__submit:active,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-register__submit:active,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-Button:active,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-EditAccountForm .button:active,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-address-fields .button:active {
  background: var(--color-action-active) !important;
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-login__submit:disabled,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-form-register__submit:disabled,
.elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-Button:disabled {
  background: var(--color-disabled-bg) !important;
  color: var(--color-disabled-text) !important;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.wyl-konto__powitanie { margin: 0 0 var(--space-s); font-size: var(--step-2); }
@media (prefers-reduced-motion: reduce) {
  .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce [class*="__submit"],
  .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-Button { transition-duration: 0s; }
  .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce [class*="__submit"]:hover,
  .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-Button:hover { transform: none; }
}

/* Furgonetka: wybór punktu odbioru (Paczkomat, automat paczkowy) w kasie.
   Wtyczka ma tylko jedną regułę (#selected-point { background: #eee }) i zwykły link, więc wygląd jest nasz:
   obrysowany blok „Punkt odbioru” pod wybraną metodą dostawy, przycisk z pinezką i osobne pole z wybranym punktem. */
body #select-point-container {
  display: grid;
  gap: var(--space-2xs);
  margin: var(--space-xs) 0 var(--space-3xs);
  padding: var(--space-xs);
  background: var(--color-surface);
  border: var(--border-width) dashed var(--color-accent-decor);
  border-radius: var(--radius-s);
  text-align: left;
}
body #select-point-container::before {
  content: "Punkt odbioru";
  order: -2;
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
body #select-point-container #select-point {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--control-height);
  padding: var(--space-3xs) var(--space-s);
  border: var(--border-width) solid var(--color-action);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--color-action);
  font-family: var(--font-sans);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-caps);
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
body #select-point-container #select-point::before {
  content: "";
  flex: none;
  width: var(--icon-s);
  height: var(--icon-s);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.4-6.5-11a6.5 6.5 0 0 1 13 0c0 5.6-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.4-6.5-11a6.5 6.5 0 0 1 13 0c0 5.6-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.3'/%3E%3C/svg%3E") center / contain no-repeat;
}
body #select-point-container #select-point:hover {
  background: var(--color-action);
  color: var(--color-on-action);
}
body #select-point-container #select-point:active {
  background: var(--color-action-active);
  border-color: var(--color-action-active);
  color: var(--color-on-action);
}
body #select-point-container #select-point:focus-visible {
  outline: var(--border-width) solid var(--color-focus);
  outline-offset: var(--space-3xs);
}
/* Wybrany punkt: osobne pole nad przyciskiem „Zmień punkt”; pusty = nie pokazujemy */
body #select-point-container #selected-point {
  order: -1;
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-sage-100);
  border-radius: var(--radius-s);
  color: var(--color-heading);
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
}
body #select-point-container #selected-point:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  body #select-point-container #select-point { transition-duration: 0s; }
}

/* Podsumowanie zamówienia (kasa): tabela na siatce zamiast układu tabelarycznego. Przy sześciu metodach dostawy wiersz „Przesyłka” w wąskiej drugiej kolumnie
   zawijał nazwy i ściskał blok punktu odbioru (na telefonie tabela ma ok. 200 px). Wiersze: etykieta po lewej, kwota po prawej; „Przesyłka”: etykieta nad listą metod na pełną szerokość. */
.woocommerce-checkout-review-order-table {
  display: block;
  width: 100%;
}
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot {
  display: block;
}
.woocommerce-checkout-review-order-table tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-s);
  align-items: baseline;
}
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
  grid-template-columns: minmax(0, 1fr);
}
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th,
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
  width: 100%;
  max-width: none; /* widget kasy Elementor Pro ustawia td.woocommerce-shipping-totals na max-width: 70px */
  box-sizing: border-box;
}
.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals td {
  text-align: left;
  padding-top: var(--space-2xs);
  padding-right: 0;
}