/**
 * VT-Szablon Template CSS — globalne tokeny, typografia, utilities
 *
 * Version:    0.1.0
 * Last build: 2026-06-10
 * Sources:    snippet #10 (tokens + typography baseline),
 *             snippet #11 (buttons + utilities),
 *             snippet #12 (typography utilities),
 *             snippet #30 (Sprint 2 CLS fonts swap),
 *             brandbook.css v1.3 (extra a11y rules)
 *
 * Ładowane przez vt-szablon → assets.php → wp_enqueue_style('vt-szablon-template') na każdej stronie.
 * Cache busting: VT_SZABLON_VERSION . '.' . filemtime() — patrz includes/assets.php.
 *
 * KOMPONENTY (z brandbook v1.3):
 *  - Tokens (kolory marki, status, typografia, layout, ruch)
 *  - Body typography baseline (Titillium Web na body, League Spartan na nagłówkach)
 *  - Heading styles (Divi-compatible — granat dla H1/H2/H3, em → red akcent)
 *  - Linki (hover red transition)
 *  - Eyebrow / Med-pill utility (brand pills)
 *  - Btn (.btn, .btn-red, .btn-ghost, .btn-ghost.on-navy, .btn-arrow + Divi mapping)
 *  - Section utilities (.vt-section, .vt-section-head, .vt-wrap)
 *  - Lead utility (.vt-lead)
 *  - Heading utilities (.vt-h1, .vt-h2, .vt-h3, .vt-kicker)
 *  - Pricing pill (.vt-pricing-pill)
 *  - Info card (.vt-info-card + .vt-on-navy)
 *  - Stat (.vt-stat-value / .vt-stat-label)
 *  - Disclaimer YMYL (.vt-disclaimer)
 *  - Sprint 2 CLS fix (font-display:swap, img aspect-ratio)
 *  - :focus-visible global (a11y)
 *  - prefers-reduced-motion (a11y)
 *  - ::selection (brand red)
 *
 * UWAGA: Wszystkie selektory używają prefiksu --vt-* dla tokenów (kolizja z innymi pluginami zero).
 * Klasy utility używają prefiksu .vt-* (brak konfliktu z Divi / WooCommerce).
 */

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800;900&family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

/* ==========================================================================
   :root tokens (snippet #10 + #11 dodatki)
   ========================================================================== */
:root {
  /* === Kolory marki === */
  --vt-red: #D92C39;
  --vt-red-light: #E13B47;
  --vt-red-deep: #AE2029;
  --vt-red-wash: #FAEAEB;
  --vt-navy: #16243F;
  --vt-mist: #A8D8DB;
  --vt-mist-soft: #E2F2F3;
  --vt-ink: #1A2538;
  --vt-slate: #59667B;
  --vt-slate-soft: #8A93A3;
  --vt-on-dark: #EDF0F5;
  --vt-paper: #F6F5F1;
  --vt-paper-2: #EFEEE8;
  --vt-surface: #FFFFFF;
  --vt-line: #E6E4DC;
  --vt-line-strong: #D6D3C8;

  /* === Status (UI/guardrails) === */
  --vt-green: #2E7D57;
  --vt-amber: #A9760F;
  --vt-stop: #C0303A;

  /* === Typografia === */
  --vt-display: 'League Spartan', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --vt-sans: 'Titillium Web', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* === Layout === */
  --vt-maxw: 1140px;

  /* === Promienie === */
  --vt-btn-radius: 100px;
  --vt-r-card: 18px;

  /* === Cienie === */
  --vt-shadow-sm: 0 2px 6px rgba(22,36,63,.06), 0 1px 2px rgba(22,36,63,.04);
  --vt-shadow-md: 0 8px 20px rgba(22,36,63,.08), 0 3px 8px rgba(22,36,63,.05);
  --vt-glow-red: 0 12px 28px rgba(217,44,57,.32);

  /* === Ruch === */
  --vt-t-micro: 120ms ease-out;
  --vt-t-ui: 220ms cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Sprint 2 CLS fix — font-display swap + img aspect-ratio (snippet #30)
   ========================================================================== */
@font-face { font-display: swap !important; }
img, svg { aspect-ratio: attr(width) / attr(height); }
img:not([width]):not([height]) { aspect-ratio: 16 / 9; max-width: 100%; height: auto; }
.et_pb_section[class*="hero"] { min-height: 50vh; }
.et_pb_image_wrap { display: block; min-height: 1px; }

/* ==========================================================================
   Body typography baseline (snippet #10)
   ========================================================================== */
body,
body.et_pb_pagebuilder_layout,
.et_pb_section,
.et_pb_row,
.et_pb_column {
  font-family: var(--vt-sans);
  color: var(--vt-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--vt-paper);
}

::selection {
  background: var(--vt-red);
  color: #fff;
}

/* ==========================================================================
   Headings — League Spartan, granat dla H1/H2/H3 (snippet #10)
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4, .et_pb_text h5, .et_pb_text h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6,
.et_pb_heading h1, .et_pb_heading h2, .et_pb_heading h3, .et_pb_heading h4,
[class*="et_pb_heading_"] h1,
[class*="et_pb_heading_"] h2,
[class*="et_pb_heading_"] h3 {
  font-family: var(--vt-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vt-navy);
}

h1, .et_pb_text h1, .et_pb_module h1, .et_pb_heading h1, [class*="et_pb_heading_"] h1 {
  font-weight: 800;
  line-height: 1.04;
}

h2, .et_pb_text h2, .et_pb_module h2, .et_pb_heading h2, [class*="et_pb_heading_"] h2 {
  line-height: 1.1;
}

/* Akcent czerwony dla <em> w nagłówkach (np. "Wynik <em>dokładny</em>") */
h1 em, h2 em, h3 em,
.et_pb_text h1 em, .et_pb_text h2 em, .et_pb_text h3 em {
  color: var(--vt-red);
  font-style: normal;
}

/* ==========================================================================
   Linki (snippet #10)
   ========================================================================== */
a, .et_pb_text a {
  color: var(--vt-ink);
  transition: color var(--vt-t-micro);
}
a:hover, .et_pb_text a:hover {
  color: var(--vt-red);
}

/* ==========================================================================
   :focus-visible — global a11y (brandbook v1.3 + WCAG 2.4.7)
   Nie nakładamy na Divi/WC inputy gdy mają własne .focus styles — tylko fallback.
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--vt-mist);
  outline-offset: 2px;
  border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--vt-red);
  outline-offset: 3px;
}

/* ==========================================================================
   Eyebrow utility (snippet #10 + #11 warianty)
   ========================================================================== */
.vt-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vt-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vt-red);
}
.vt-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: currentColor;
}
.vt-eyebrow.vt-center {
  justify-content: center;
}
.vt-eyebrow.vt-on-navy {
  color: var(--vt-mist);
}

/* ==========================================================================
   Med-pill utility — "Produkt medyczny" wskaźnik (snippet #10)
   ========================================================================== */
.vt-med-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--vt-mist-soft);
  color: var(--vt-navy);
  border-radius: 100px;
  font-family: var(--vt-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.vt-med-pill::before {
  content: "•";
  color: var(--vt-red);
  font-size: 16px;
  line-height: 1;
}

/* ==========================================================================
   Buttons (snippet #11) — baseline
   ========================================================================== */
.btn,
.et_pb_button.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px !important;
  font-family: var(--vt-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  border-radius: var(--vt-btn-radius) !important;
  border: 1.5px solid transparent !important;
  text-decoration: none !important;
  transition: transform var(--vt-t-ui), box-shadow var(--vt-t-ui), background var(--vt-t-micro), border-color var(--vt-t-micro), color var(--vt-t-micro) !important;
  white-space: nowrap;
  letter-spacing: normal !important;
  text-transform: none !important;
}
.btn:hover,
.et_pb_button.btn:hover {
  transform: translateY(-2px);
}
.btn:active,
.et_pb_button.btn:active {
  transform: translateY(0);
}
.btn:focus-visible,
.et_pb_button.btn:focus-visible {
  outline: 2px solid var(--vt-mist) !important;
  outline-offset: 3px;
}

/* Divi by default adds ::after arrow — wyłączamy dla custom .btn classes */
.et_pb_button.btn::after,
.et_pb_button.btn-red::after,
.et_pb_button.btn-ghost::after {
  display: none !important;
}

/* Btn Red — gradient red, glow shadow */
.btn-red,
.et_pb_button.btn-red {
  background: linear-gradient(180deg, var(--vt-red-light) 0%, var(--vt-red) 60%, var(--vt-red-deep) 100%) !important;
  color: var(--vt-surface) !important;
  box-shadow: var(--vt-glow-red) !important;
  border-color: transparent !important;
}
.btn-red:hover,
.et_pb_button.btn-red:hover {
  color: var(--vt-surface) !important;
  box-shadow: 0 18px 36px rgba(217,44,57,.42) !important;
  background: linear-gradient(180deg, var(--vt-red-light) 0%, var(--vt-red) 60%, var(--vt-red-deep) 100%) !important;
}

/* Btn Ghost — border + transparent */
.btn-ghost,
.et_pb_button.btn-ghost {
  background: transparent !important;
  color: var(--vt-ink) !important;
  border-color: var(--vt-line-strong) !important;
  box-shadow: none !important;
}
.btn-ghost:hover,
.et_pb_button.btn-ghost:hover {
  border-color: var(--vt-ink) !important;
  color: var(--vt-ink) !important;
  background: transparent !important;
}
.btn-ghost.on-navy,
.et_pb_button.btn-ghost.on-navy {
  color: var(--vt-on-dark) !important;
  border-color: rgba(255,255,255,.35) !important;
}
.btn-ghost.on-navy:hover,
.et_pb_button.btn-ghost.on-navy:hover {
  border-color: var(--vt-on-dark) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--vt-on-dark) !important;
}

/* Btn Arrow utility */
.btn-arrow {
  display: inline-block;
  transition: transform var(--vt-t-ui);
}
.btn:hover .btn-arrow,
.et_pb_button.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   Section utilities (snippet #11)
   ========================================================================== */
.vt-section {
  padding: clamp(64px, 9vw, 118px) 0 !important;
}
.vt-section.vt-tight {
  padding: clamp(48px, 6vw, 80px) 0 !important;
}
.vt-section-head {
  max-width: 60ch;
  margin-bottom: clamp(28px, 4vw, 56px);
}
.vt-section-head.vt-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.vt-wrap {
  max-width: var(--vt-maxw);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* ==========================================================================
   Lead utility (snippet #11)
   ========================================================================== */
.vt-lead {
  font-family: var(--vt-sans);
  font-size: clamp(18px, 2.1vw, 21px);
  line-height: 1.55;
  color: var(--vt-slate);
  max-width: 60ch;
}
.vt-lead strong {
  color: var(--vt-ink);
  font-weight: 700;
}

/* ==========================================================================
   Heading utilities — responsywne clamp() (snippet #12)
   ========================================================================== */
.vt-h1 {
  font-family: var(--vt-display);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--vt-navy);
  margin: 0 0 .4em;
}
.vt-h1 em {
  color: var(--vt-red);
  font-style: normal;
}

.vt-h2 {
  font-family: var(--vt-sans);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  color: var(--vt-navy);
  margin: 0 0 .4em;
}
.vt-h2 em {
  color: var(--vt-red);
  font-style: normal;
}

.vt-h3 {
  font-family: var(--vt-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  color: var(--vt-navy);
  margin: 0 0 .35em;
}

/* Kicker — mała etykieta uppercase nad nagłówkiem */
.vt-kicker {
  font-family: var(--vt-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vt-slate-soft);
  display: block;
  margin: 0 0 8px;
}

/* ==========================================================================
   Pricing pill (snippet #12)
   ========================================================================== */
.vt-pricing-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 16px;
  background: var(--vt-red-wash);
  color: var(--vt-red-deep);
  border-radius: 100px;
  font-family: var(--vt-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.vt-pricing-pill .vt-currency {
  font-size: 12px;
  font-weight: 600;
  opacity: .8;
}
.vt-pricing-pill .vt-amount {
  font-size: 18px;
  font-weight: 800;
}

/* ==========================================================================
   Info card (snippet #12)
   ========================================================================== */
.vt-info-card {
  padding: 24px 28px;
  background: var(--vt-mist-soft);
  border: 1px solid var(--vt-mist);
  border-radius: 18px;
  color: var(--vt-ink);
  font-family: var(--vt-sans);
  font-size: 15px;
  line-height: 1.55;
}
.vt-info-card strong {
  color: var(--vt-navy);
  font-weight: 700;
}
.vt-info-card .vt-info-title {
  font-family: var(--vt-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--vt-navy);
  margin: 0 0 8px;
  display: block;
}

.vt-info-card.vt-on-navy {
  background: rgba(168,216,219,.08);
  border-color: rgba(168,216,219,.18);
  color: var(--vt-on-dark);
}
.vt-info-card.vt-on-navy .vt-info-title,
.vt-info-card.vt-on-navy strong {
  color: var(--vt-mist);
}

/* ==========================================================================
   Stat (snippet #12)
   ========================================================================== */
.vt-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vt-stat-value {
  font-family: var(--vt-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
  color: var(--vt-navy);
  letter-spacing: -0.02em;
}
.vt-stat-value em {
  color: var(--vt-red);
  font-style: normal;
}
.vt-stat-label {
  font-family: var(--vt-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vt-slate);
}

/* ==========================================================================
   Disclaimer (YMYL) — small print pod treścią medyczną (snippet #12)
   ========================================================================== */
.vt-disclaimer {
  display: block;
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--vt-paper-2);
  border-left: 3px solid var(--vt-slate-soft);
  font-family: var(--vt-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--vt-slate);
  border-radius: 0 12px 12px 0;
}
.vt-disclaimer strong {
  color: var(--vt-ink);
  font-weight: 700;
}

/* ==========================================================================
   prefers-reduced-motion — a11y (WCAG 2.3.3)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Sprint v7 — Divi archive brand override (blog + shop)
   --------------------------------------------------------------------------
   Problem: /blog/ używa Divi blog archive (page_for_posts=99894),
   /sklep/ używa Divi Theme Builder template "Sklep" (et_template 100206).
   Oba ignorują content statycznej strony i renderują Open Sans + #333.
   Rozwiązanie: nadpisanie kolorów/fontów/komponentów brandbook v1.3
   na body.blog + body.archive.post-type-archive-product.
   --------------------------------------------------------------------------
   Selektory: scoped do tych dwóch body class, NIE rozlewa się na HP/single
   ========================================================================== */

/* ---- 1. Body baseline (tło paper, font Titillium Web, ink) ---- */
body.blog,
body.archive.post-type-archive-product,
body.woocommerce-shop {
  background-color: var(--vt-paper) !important;
  color: var(--vt-ink) !important;
  font-family: var(--vt-sans) !important;
}
body.blog #main-content,
body.archive.post-type-archive-product #main-content,
body.woocommerce-shop #main-content {
  background-color: var(--vt-paper) !important;
}
body.blog #page-container,
body.archive.post-type-archive-product #page-container,
body.woocommerce-shop #page-container {
  background-color: var(--vt-paper) !important;
}

/* ---- 2. Nagłówki na archive (League Spartan + navy) ---- */
body.blog h1, body.blog h2, body.blog h3, body.blog h4,
body.blog .entry-title, body.blog .entry-title a,
body.archive.post-type-archive-product h1,
body.archive.post-type-archive-product h2,
body.archive.post-type-archive-product h3,
body.archive.post-type-archive-product h4,
body.woocommerce-shop h1,
body.woocommerce-shop h2,
body.woocommerce-shop h3,
body.woocommerce-shop .woocommerce-loop-product__title,
body.woocommerce-shop .dipl_single_woo_product_title,
body.woocommerce-shop .dipl_single_woo_product_title a {
  font-family: var(--vt-display) !important;
  color: var(--vt-navy) !important;
  font-weight: 700 !important;
}

/* ---- 3. Paragraphy + body text ---- */
body.blog p, body.blog li,
body.archive.post-type-archive-product p,
body.archive.post-type-archive-product li,
body.woocommerce-shop p,
body.woocommerce-shop li {
  font-family: var(--vt-sans) !important;
  color: var(--vt-ink) !important;
}

/* ---- 4. Linki ---- */
body.blog a, body.archive.post-type-archive-product a, body.woocommerce-shop a {
  color: var(--vt-red) !important;
  transition: color .15s ease;
}
body.blog a:hover, body.archive.post-type-archive-product a:hover, body.woocommerce-shop a:hover {
  color: var(--vt-red-deep) !important;
}
/* Heading links zostają na navy z red hover */
body.blog .entry-title a,
body.woocommerce-shop .dipl_single_woo_product_title a {
  color: var(--vt-navy) !important;
}
body.blog .entry-title a:hover,
body.woocommerce-shop .dipl_single_woo_product_title a:hover {
  color: var(--vt-red) !important;
}

/* ---- 5. Blog post cards (Divi .et_pb_post) ---- */
body.blog .et_pb_post {
  background: var(--vt-surface) !important;
  border: 1px solid var(--vt-line) !important;
  border-radius: var(--vt-r-card, 18px) !important;
  padding: 24px !important;
  margin-bottom: 28px !important;
  box-shadow: 0 2px 6px rgba(22,36,63,.06), 0 1px 2px rgba(22,36,63,.04) !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
body.blog .et_pb_post:hover {
  box-shadow: 0 8px 20px rgba(22,36,63,.10), 0 3px 8px rgba(22,36,63,.06) !important;
  transform: translateY(-2px);
}
body.blog .et_pb_post .entry-featured-image-url,
body.blog .et_pb_post .entry-featured-image-url img,
body.blog .et_pb_post img.wp-post-image {
  border-radius: 12px !important;
  overflow: hidden;
}
body.blog .et_pb_post .entry-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}
body.blog .et_pb_post .post-meta {
  font-family: var(--vt-sans) !important;
  font-size: 12px !important;
  color: var(--vt-slate) !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 12px !important;
}
body.blog .et_pb_post .post-meta a {
  color: var(--vt-slate) !important;
}
body.blog .et_pb_post .post-meta a:hover {
  color: var(--vt-red) !important;
}
body.blog .et_pb_post .post-content,
body.blog .et_pb_post .post-content p {
  color: var(--vt-ink) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* ---- 6. "Czytaj więcej" / more-link button ---- */
body.blog .et_pb_post .more-link,
body.blog a.more-link,
body.blog .entry .more-link {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--vt-red) !important;
  color: #fff !important;
  font-family: var(--vt-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 22px !important;
  border-radius: 100px !important;
  border: none !important;
  text-decoration: none !important;
  transition: background .15s ease, transform .15s ease !important;
}
body.blog .et_pb_post .more-link:hover,
body.blog a.more-link:hover,
body.blog .entry .more-link:hover {
  background: var(--vt-red-deep) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---- 7. Sidebar (.et_pb_widget) ---- */
body.blog #sidebar,
body.blog .et_pb_widget_area,
body.blog .sidebar-area {
  background: transparent !important;
}
body.blog .et_pb_widget,
body.blog .widget {
  background: var(--vt-surface) !important;
  border: 1px solid var(--vt-line) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}
body.blog .et_pb_widget h4.widgettitle,
body.blog .widget h4.widgettitle,
body.blog .et_pb_widget .widgettitle,
body.blog .widget .widgettitle {
  font-family: var(--vt-display) !important;
  color: var(--vt-navy) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  border-bottom: 2px solid var(--vt-red) !important;
}
body.blog .et_pb_widget ul li,
body.blog .widget ul li {
  border-bottom: 1px dotted var(--vt-line) !important;
  padding: 6px 0 !important;
}
body.blog .et_pb_widget input[type="search"],
body.blog .widget input[type="search"] {
  border: 1px solid var(--vt-line-strong) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-family: var(--vt-sans) !important;
}

/* ---- 8. Shop / WooCommerce product loop (Divi Plus dipl_single_woo_product) ---- */
body.archive.post-type-archive-product .dipl_single_woo_product,
body.woocommerce-shop .dipl_single_woo_product {
  background: var(--vt-surface) !important;
  border: 1px solid var(--vt-line) !important;
  border-radius: var(--vt-r-card, 18px) !important;
  padding: 18px !important;
  box-shadow: 0 2px 6px rgba(22,36,63,.06), 0 1px 2px rgba(22,36,63,.04) !important;
  transition: box-shadow .2s ease, transform .2s ease !important;
}
body.archive.post-type-archive-product .dipl_single_woo_product:hover,
body.woocommerce-shop .dipl_single_woo_product:hover {
  box-shadow: 0 8px 20px rgba(22,36,63,.10), 0 3px 8px rgba(22,36,63,.06) !important;
  transform: translateY(-2px);
}
body.archive.post-type-archive-product .dipl_single_woo_product_thumbnail,
body.woocommerce-shop .dipl_single_woo_product_thumbnail {
  border-radius: 12px !important;
  overflow: hidden;
}
body.archive.post-type-archive-product .dipl_single_woo_product_title,
body.woocommerce-shop .dipl_single_woo_product_title {
  font-size: 18px !important;
  line-height: 1.3 !important;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
  font-weight: 700 !important;
}
body.archive.post-type-archive-product .dipl_single_woo_product_price,
body.archive.post-type-archive-product .dipl_single_woo_product_price .price,
body.archive.post-type-archive-product .dipl_single_woo_product_price .price .amount,
body.archive.post-type-archive-product .dipl_single_woo_product_price .price bdi,
body.woocommerce-shop .dipl_single_woo_product_price,
body.woocommerce-shop .price,
body.woocommerce-shop .price .amount,
body.woocommerce-shop .price bdi {
  color: var(--vt-red) !important;
  font-family: var(--vt-sans) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}
body.archive.post-type-archive-product .dipl_single_woo_product_price del,
body.woocommerce-shop .price del,
body.woocommerce-shop .price del .amount {
  color: var(--vt-slate-soft) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
}

/* ---- 9. Add to cart button (shop loop) ---- */
body.archive.post-type-archive-product .button.product_type_simple,
body.archive.post-type-archive-product a.button,
body.archive.post-type-archive-product .add_to_cart_button,
body.woocommerce-shop .button.product_type_simple,
body.woocommerce-shop a.button,
body.woocommerce-shop .add_to_cart_button,
body.woocommerce-shop .added_to_cart {
  background: var(--vt-red) !important;
  color: #fff !important;
  font-family: var(--vt-sans) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 22px !important;
  border-radius: 100px !important;
  border: none !important;
  transition: background .15s ease, transform .15s ease !important;
}
body.archive.post-type-archive-product .button:hover,
body.archive.post-type-archive-product a.button:hover,
body.archive.post-type-archive-product .add_to_cart_button:hover,
body.woocommerce-shop .button:hover,
body.woocommerce-shop a.button:hover,
body.woocommerce-shop .add_to_cart_button:hover {
  background: var(--vt-red-deep) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* ---- 10. WC notices / cart bar (shop archive) ---- */
body.woocommerce-shop .woocommerce-info,
body.woocommerce-shop .woocommerce-message,
body.archive.post-type-archive-product .woocommerce-info,
body.archive.post-type-archive-product .woocommerce-message {
  background: var(--vt-paper-2) !important;
  border-left: 3px solid var(--vt-red) !important;
  color: var(--vt-ink) !important;
  font-family: var(--vt-sans) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 14px 18px !important;
}

/* ---- 11. Pagination ---- */
body.blog .wp-pagenavi a,
body.blog .pagination a,
body.archive.post-type-archive-product .dipl_woo_products_pagination_wrapper a,
body.woocommerce-shop .woocommerce-pagination a,
body.woocommerce-shop .page-numbers {
  background: var(--vt-surface) !important;
  border: 1px solid var(--vt-line-strong) !important;
  color: var(--vt-navy) !important;
  font-family: var(--vt-sans) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  margin: 0 4px !important;
  transition: all .15s ease !important;
}
body.blog .wp-pagenavi a:hover,
body.blog .pagination a:hover,
body.archive.post-type-archive-product .dipl_woo_products_pagination_wrapper a:hover,
body.woocommerce-shop .woocommerce-pagination a:hover,
body.woocommerce-shop .page-numbers.current {
  background: var(--vt-red) !important;
  border-color: var(--vt-red) !important;
  color: #fff !important;
}

/* ---- 12. Breadcrumb / Yoast crumbs (jeśli na archive) ---- */
body.blog .yoast-breadcrumbs,
body.archive.post-type-archive-product .yoast-breadcrumbs,
body.woocommerce-shop .yoast-breadcrumbs,
body.woocommerce-shop .woocommerce-breadcrumb {
  font-family: var(--vt-sans) !important;
  font-size: 13px !important;
  color: var(--vt-slate) !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 18px !important;
}
body.blog .yoast-breadcrumbs a,
body.archive.post-type-archive-product .yoast-breadcrumbs a,
body.woocommerce-shop .yoast-breadcrumbs a,
body.woocommerce-shop .woocommerce-breadcrumb a {
  color: var(--vt-slate) !important;
}
body.blog .yoast-breadcrumbs a:hover,
body.woocommerce-shop .woocommerce-breadcrumb a:hover {
  color: var(--vt-red) !important;
}
/* === Sprint v7 end === */