/*
 * Teklano design system — the single source for things every page shares.
 * Loaded last so page stylesheets (and the classic parent theme) cannot drift:
 *
 *   page width   min(1800px, 100% − 16–40px gutters)
 *   radius       panels 24px · cards 16px · fields 12px · buttons pill
 *   buttons      primary (ink) · secondary (outline) · on-dark (mint)
 *   links        ink, mint-deep on hover
 *
 * :is() takes the specificity of its most specific selector, which lets one
 * rule outrank the page-specific ones it replaces without !important.
 */

:root {
  --tk-radius: 24px;
  --tk-radius-card: 16px;
  --tk-radius-field: 12px;
  --tk-page-width: min(1440px, calc(100% - clamp(32px, 4vw, 80px)));
  --tk-focus: 0 0 0 3px color-mix(in srgb, var(--tk-mint-deep) 35%, transparent);
}

/* ---------- Page ground and width ---------- */
html body,
html body #wrapper {
  background: var(--tk-paper);
  color: var(--tk-ink);
}

html body :is(#wrapper > .container, .tk-header-shell, .tk-footer-shell):not(.tk-header-shell--none) {
  max-width: none;
  margin-inline: auto;
}

@media (max-width: 900px) {
  html body :is(#wrapper > .container, .tk-header-shell) {
    width: calc(100% - 32px);
  }
}

/* ---------- Links ---------- */
html body #wrapper :is(a:not([class]), .btn-link) {
  color: var(--tk-ink);
}

html body #wrapper :is(a:not([class]), .btn-link):is(:hover, :focus-visible) {
  color: var(--tk-mint-text, #1f6f60);
}

html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tk-mint-deep);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
html body :is(
  .tk-button--ink,
  .tk-btn,
  #wrapper .btn-primary,
  #blockcart-modal .btn-primary,
  body#product .add-to-cart,
  body#cart .cart-detailed-actions .btn,
  body#cart .tk-cart-empty a,
  body#checkout #payment-confirmation button,
  body#checkout button.continue,
  .tk-brief__submit,
  .tk-not-found__search button,
  .tk-account .form-control-submit,
  .tk-auth .form-control-submit
):not(.tk-account-activation__form .btn-primary) {
  display: inline-flex;
  min-height: 52px;
  padding: 0 24px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--tk-ink);
  border-radius: var(--tk-radius-pill);
  background: var(--tk-ink);
  color: var(--tk-paper);
  font: 800 13px/1.2 Manrope, Arial, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

html body :is(
  .tk-button--ink,
  .tk-btn,
  #wrapper .btn-primary,
  #blockcart-modal .btn-primary,
  body#product .add-to-cart,
  body#cart .cart-detailed-actions .btn,
  body#cart .tk-cart-empty a,
  body#checkout #payment-confirmation button,
  body#checkout button.continue,
  .tk-brief__submit,
  .tk-not-found__search button,
  .tk-account .form-control-submit,
  .tk-auth .form-control-submit
):not(.tk-account-activation__form .btn-primary):is(:hover, :focus-visible):not(:disabled, .disabled) {
  border-color: var(--tk-mint-deep);
  background: var(--tk-mint-deep);
  color: var(--tk-ink);
}

html body :is(
  #wrapper .btn-primary,
  body#product .add-to-cart,
  body#checkout #payment-confirmation button,
  body#checkout button.continue
):is(:disabled, .disabled) {
  border-color: transparent;
  background: var(--tk-off);
  color: var(--tk-muted);
  opacity: 1;
  cursor: not-allowed;
}

/* Secondary: outline, fills with ink on hover. */
html body :is(
  .tk-btn-ghost,
  #wrapper .btn-secondary,
  #blockcart-modal .btn-secondary,
  #wrapper .cancel-address,
  body #header .tk-site-header .tk-checkout-back
) {
  display: inline-flex;
  min-height: 52px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-pill);
  background: transparent;
  color: var(--tk-ink);
  font: 800 13px/1.2 Manrope, Arial, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  box-shadow: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

html body :is(
  .tk-btn-ghost,
  #wrapper .btn-secondary,
  #blockcart-modal .btn-secondary,
  #wrapper .cancel-address,
  body #header .tk-site-header .tk-checkout-back
):is(:hover, :focus-visible) {
  border-color: var(--tk-ink);
  background: var(--tk-ink);
  color: var(--tk-paper);
}

body #header .tk-site-header .tk-checkout-back {
  min-height: 44px;
  font-size: 12px;
}

/* On dark panels: mint, turns paper on hover. */
html body :is(
  .tk-button--mint,
  .tk-search-empty__cta,
  .tkb-newsletter-form button,
  .tkb-cta-button,
  body#order-confirmation .tk-account-activation__form .btn-primary
) {
  border: 0;
  border-radius: var(--tk-radius-pill);
  background: var(--tk-mint);
  color: var(--tk-ink);
  font-weight: 800;
  text-transform: none;
  transition: background-color .2s ease, color .2s ease;
}

html body :is(
  .tk-button--mint,
  .tk-search-empty__cta,
  .tkb-newsletter-form button,
  .tkb-cta-button,
  body#order-confirmation .tk-account-activation__form .btn-primary
):is(:hover, :focus-visible) {
  background: var(--tk-paper);
  color: var(--tk-ink);
}

/* Round icon buttons (card arrows) share one hover. */
html body :is(.tk-product-miniature .tk-miniature-link, .tkb-card-arrow, .tkb-product-card-cta) {
  background: var(--tk-ink);
  color: var(--tk-paper);
}

html body :is(.tk-product-miniature:hover .tk-miniature-link, .tk-product-miniature .tk-miniature-link:focus-visible, .tkb-card:hover .tkb-card-arrow, .tkb-product-card:hover .tkb-product-card-cta) {
  background: var(--tk-mint-deep);
  color: var(--tk-ink);
}

/* ---------- Radii ---------- */
html body :is(
  body#product .tk-pdp-buy,
  body#cart .cart-summary,
  body#checkout section.checkout-step,
  body#checkout #js-checkout-summary,
  body#checkout .tk-checkout-progress,
  body#order-confirmation .tk-confirmation-hero,
  body#order-confirmation .tk-account-activation,
  body#order-confirmation .tk-confirmation-details,
  #blockcart-modal .modal-content,
  .tk-brief,
  .tk-search-empty__idea,
  .tkb-newsletter,
  .tkb-post-content .tkb-block-cta,
  .tkb-post-cover
) {
  border-radius: var(--tk-radius);
}

html body :is(
  .tk-product-miniature .thumbnail-container,
  .tkb-card,
  .tkb-product-card,
  .tkb-post-nav a,
  .tkb-toc,
  .tk-account-tile
) {
  border-radius: var(--tk-radius-card);
}

html body #wrapper :is(.form-control, .tk-brief .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="search"], select, textarea):not(.tk-not-found__search input, .tkb-newsletter-form input, .td-query, #quantity_wanted) {
  border-radius: var(--tk-radius-field);
}

/* ---------- Headings: sentence case everywhere ---------- */
html body #wrapper :is(h1, h2, h3, .h1, .h2, .h3, .page-header h1) {
  text-transform: none;
}

/* Full-width primary actions keep their block layout. */
html body :is(body#product .add-to-cart, body#cart .cart-detailed-actions .btn, body#blockcart-modal .cart-content-btn .btn, #blockcart-modal .cart-content-btn .btn) {
  display: flex;
  width: 100%;
}

/* Homepage sections live inside the page container already; the old shell
   width inset them a second time (and capped them at 680px on tablets). */
html body .tk-shell {
  width: 100%;
  max-width: none;
}

/* Footer: all link columns on one row on desktop. */
@media (min-width: 1100px) {
  html body .tk-footer-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 32px clamp(20px, 2.4vw, 40px);
  }
}

/* Form actions start where the fields start (checkout keeps "Dalej" on the right). */
html body :is(.tk-auth, .tk-account) .form-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
}

/* Homepage hero follows the same left edge and panel radius as the rest. */
html body .tk-hero-copy {
  padding-left: 0;
}

html body .tk-hero-art {
  border-radius: var(--tk-radius);
}

/* ------------------------------------------------------------------------
 * Modal koszyka (ps_shoppingcart) — poprawki spójności
 * ---------------------------------------------------------------------- */

/* Modal musi być nad banerem zgód (z-index 10020). Użytkownik sam go przed
   chwilą otworzył, więc to on ma być na wierzchu, nie baner. */
html body #blockcart-modal {
  z-index: 10050;
}

html body.modal-open .modal-backdrop {
  z-index: 10040;
}

/* Ikona tylko w jednym z dwóch przycisków rozjeżdżała parę optycznie —
   tekst nie był wyśrodkowany względem sąsiada. Usunięcie jednej linii
   przywraca ikonę, jeśli wolisz mieć ją w obu. */
html body #blockcart-modal .cart-content-btn .btn .material-icons {
  display: none;
}

@media (max-width: 600px) {
  /* Arkusz na pełnym ekranie nie ma zaokrąglonych rogów. Reguła promieni
     z tego pliku wygrywała nad @media w teklano-store.css, bo media queries
     nie podbijają specyficzności. */
  html body #blockcart-modal .modal-content {
    border-radius: 0;
  }

  /* Bootstrapowy .row ma margin-inline -15px, a kolumna z podsumowaniem
     (.col-md-7) nie ma paddingu, który by to kompensował. Efekt: wiersze
     "Suma produktów" i "Razem" zaczynały się 15px na lewo od nazwy produktu,
     a przyciski dotykały krawędzi ekranu. Zerujemy oba i wszystko równa się
     do paddingu .modal-body. */
  html body #blockcart-modal .modal-body .row {
    margin-inline: 0;
  }

  html body #blockcart-modal .modal-body .row > [class*="col-"] {
    padding-inline: 0;
  }

  html body #blockcart-modal .product-name {
    padding-inline: 0;
  }
}

/* ------------------------------------------------------------------
   Stopka — dane firmy
   .tk-footer-meta jest flexem, więc <address> z danymi firmy lądował
   w tej samej linii co copyright i rozpychał stopkę. Łamiemy go do
   własnego wiersza i zdejmujemy kursywę, którą <address> ma domyślnie.
   ------------------------------------------------------------------ */
html body .tk-footer-meta {
  flex-wrap: wrap;
  row-gap: 8px;
}

html body .tk-footer-legal {
  flex: 1 0 100%;
  margin: 0;
  font-style: normal;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tk-muted, #6b7280);
}

html body .tk-footer-legal__line {
  display: block;
}

/* ------------------------------------------------------------------
   Produkt w koszyku
   Gdy moduł jest już w koszyku, chowamy przycisk "Dodaj do koszyka"
   i pokazujemy komunikat z linkiem do koszyka. Klasę tk-has-in-cart
   ustawia szablon (render) albo skrypt po zdarzeniu updateCart.
   ------------------------------------------------------------------ */
html body .tk-in-cart {
  display: none;
}

html body .tk-has-in-cart .tk-in-cart {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--tk-mint-deep, #2b8b78);
  border-radius: 12px;
  background: color-mix(in srgb, var(--tk-mint-deep, #2b8b78) 8%, transparent);
}

html body .tk-has-in-cart .product-quantity {
  display: none;
}

html body .tk-in-cart svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--tk-mint-deep, #2b8b78);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .tk-in-cart strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--tk-ink, #10151b);
}

html body .tk-in-cart a {
  font-size: 13px;
  font-weight: 600;
  color: var(--tk-mint-deep, #2b8b78);
  text-decoration: underline;
  text-underline-offset: 3px;
}