/*
 * 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(1800px, 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) {
  width: var(--tk-page-width);
  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);
}