/* ============================================================
   DobreNarty — HEADER STYLES
   Figma spec: 1440×179px, 3 rows
   Prefix: dn-  | Container: max-width 1200px
   Generated: 2026-03-04
   ============================================================ */

/* ─────────────────────────────────────────────
   SITE HEADER WRAPPER
───────────────────────────────────────────── */
.dn-site-header {
  width: 100%;
  background: #fdfdfd;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ─────────────────────────────────────────────
   ROW 1: TOP BAR
───────────────────────────────────────────── */
.dn-top-bar {
  width: 100%;
  background: #014b94;
  height: 30px;
  display: flex;
  align-items: center;
}

.dn-top-bar__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 30px;
}

.dn-top-bar__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: #fdfdfd;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  white-space: nowrap;
}

.dn-top-bar__item a {
  color: #fdfdfd;
  text-decoration: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
}

.dn-top-bar__item a:hover {
  text-decoration: underline;
}

.dn-top-bar__icon {
  flex-shrink: 0;
  color: #fdfdfd;
  width: 20px;
  height: 20px;
}

/* ─────────────────────────────────────────────
   ROW 2: NAV BAR
───────────────────────────────────────────── */
.dn-nav-bar {
  width: 100%;
  background: #fdfdfd;
}

.dn-nav-bar__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Logo */
.dn-nav-bar__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.dn-nav-bar__logo img {
  display: block;
  width: 278px;
  height: 27px;
  object-fit: contain;
}

/* Right section */
.dn-nav-bar__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  flex: 1;
  justify-content: flex-end;
}

/* ── Search ── */
.dn-search {
  width: 345px;
  height: 40px;
  flex-shrink: 0;
}

.dn-search form {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 40px;
  border: 1px solid #dddddd;
  border-radius: 25px;
  padding: 0 20px;
  background: #fdfdfd;
  gap: 8px;
  box-sizing: border-box;
}

.dn-search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: #1e1e1c;
  padding: 0;
  min-width: 0;
}

.dn-search__input::placeholder {
  color: #aaaaaa;
}

.dn-search__btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #aaaaaa;
  flex-shrink: 0;
}

.dn-search__btn:hover {
  color: #014b94;
}

/* ── Controls area ── */
.dn-nav-bar__controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

/* ── Currency selector ── */
.dn-currency {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.dn-currency__btn,
.dn-flag-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #1e1e1c;
}

.dn-currency__btn:hover,
.dn-flag-btn:hover {
  color: #014b94;
}

.dn-currency__chevron {
  color: #1e1e1c;
  flex-shrink: 0;
}

/* Polish flag (23×16, white top / red bottom) */
.dn-flag {
  display: inline-block;
  width: 23px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(to bottom, #ffffff 50%, #dc143c 50%);
  border: 1px solid #eeeeee;
  flex-shrink: 0;
  overflow: hidden;
}

/* ── Cart button ── */
.dn-cart-btn {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 20px;
  border: 1px solid #dddddd;
  border-radius: 25px;
  background: #fdfdfd;
  text-decoration: none;
  color: #1e1e1c;
  white-space: nowrap;
  transition: border-color 0.2s;
}

.dn-cart-btn:hover {
  border-color: #014b94;
  color: #014b94;
}

.dn-cart-btn svg {
  width: 20px;
  height: 20px;
}

.dn-cart-btn__total {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: inherit;
}

/* ── Icon buttons (wishlist, account) ── */
.dn-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #1e1e1c;
  text-decoration: none;
  transition: color 0.2s;
}

.dn-icon-btn svg {
  width: 20px;
  height: 20px;
}

.dn-icon-btn:hover {
  color: #014b94;
}

/* ── Hamburger (mobile only, hidden on desktop) ── */
.dn-hamburger {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #1e1e1c;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.dn-hamburger:hover {
  color: #014b94;
}

/* ─────────────────────────────────────────────
   SEPARATOR LINE
───────────────────────────────────────────── */
.dn-header-separator {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 1px;
  background: #eeeeee;
}

/* ─────────────────────────────────────────────
   ROW 3: MENU BAR
───────────────────────────────────────────── */
.dn-menu-bar {
  width: 100%;
  background: #fdfdfd;
}

.dn-menu-bar__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 7px 20px 13px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
}

/* Primary menu list */
.dn-menu-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 37px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.dn-menu-list li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dn-menu-list li a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #1e1e1c;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.dn-menu-list li a:hover,
.dn-menu-list li.current-menu-item > a,
.dn-menu-list li.current-page-ancestor > a {
  color: #014b94;
}

/* Vertical separator in menu bar */
.dn-menu-bar__sep {
  width: 1px;
  height: 28px;
  background: #eeeeee;
  flex-shrink: 0;
}

/* ── B2B / B2C toggle ── */
/* B2B / B2C toggle — bigger, prominent */
.dn-b2b-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.dn-b2b-toggle__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #aaaaaa;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.dn-b2b-toggle__label--active {
  color: #1e1e1c;
  font-weight: 600;
}

.dn-b2b-toggle__label:hover {
  color: #1e1e1c;
}

/* Toggle switch track — big */
.dn-b2b-toggle__switch {
  position: relative;
  display: inline-flex;
  width: 48px;
  height: 26px;
  background: #014b94;
  border-radius: 13px;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  align-items: center;
  transition: background 0.25s;
}

.dn-b2b-toggle__switch:hover {
  background: #013a75;
}

/* Toggle knob — big */
.dn-b2b-toggle__knob {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #fdfdfd;
  border-radius: 50%;
  top: 3px;
  right: 3px;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* B2C mode: knob on right (default) */
/* B2B mode: knob slides to left */
.dn-b2b-toggle__switch:not(.is-b2c) .dn-b2b-toggle__knob {
  transform: translateX(-22px);
}

/* ─────────────────────────────────────────────
   MOBILE MENU
───────────────────────────────────────────── */
.dn-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.dn-mobile-menu[aria-hidden="false"] {
  display: block;
}

.dn-mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.dn-mobile-menu__panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 85vw;
  height: 100%;
  background: #fdfdfd;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.15);
}

.dn-mobile-menu__close {
  background: none;
  border: none;
  cursor: pointer;
  color: #1e1e1c;
  align-self: flex-end;
  padding: 0;
  display: inline-flex;
}

.dn-mobile-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dn-mobile-menu__list li a {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #1e1e1c;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid #eeeeee;
  transition: color 0.2s;
}

.dn-mobile-menu__list li a:hover {
  color: #014b94;
}

.dn-mobile-menu__contact {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e1e1c;
  margin-top: auto;
}

.dn-mobile-menu__phone {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #1e1e1c;
  text-decoration: none;
}

.dn-mobile-menu__phone:hover {
  color: #014b94;
}

/* Prevent body scroll when menu open */
body.dn-menu-open {
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — BELOW 1024px (tablet)
───────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Top bar: scrolling ticker */
  .dn-top-bar {
    overflow: hidden;
  }

  .dn-top-bar__inner {
    width: max-content;
    gap: 40px;
    animation: dn-ticker 20s linear infinite;
  }

  /* Hide menu bar and separator */
  .dn-menu-bar,
  .dn-header-separator {
    display: none;
  }

  /* Show hamburger */
  .dn-hamburger {
    display: inline-flex;
  }

  /* Nav bar: grid layout — logo+icons row, search below */
  .dn-nav-bar__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 12px 16px;
    align-items: center;
    padding: 16px;
  }

  .dn-nav-bar__logo {
    grid-column: 1;
    grid-row: 1;
  }

  .dn-nav-bar__right {
    display: contents;
  }

  .dn-nav-bar__controls {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    display: flex;
    gap: 15px;
  }

  .dn-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .dn-search form {
    width: 100%;
  }

  /* Hide currency on mobile */
  .dn-currency {
    display: none;
  }

  /* Tablet icon sizes */
  .dn-icon-btn,
  .dn-icon-btn svg {
    width: 20px;
    height: 20px;
  }

  .dn-cart-btn svg {
    width: 20px;
    height: 20px;
  }

  .dn-hamburger {
    width: 24px;
    height: 24px;
  }

  .dn-hamburger svg {
    width: 24px;
    height: 24px;
  }
}

/* ─────────────────────────────────────────────
   RESPONSIVE — BELOW 768px (mobile)
───────────────────────────────────────────── */
@media (max-width: 768px) {
  .dn-nav-bar__inner {
    padding: 12px 16px;
    gap: 10px 12px;
  }

  /* Compact logo */
  .dn-nav-bar__logo img {
    width: 140px;
    height: auto;
  }

  .dn-nav-bar__controls {
    gap: 10px;
  }

  /* Smaller cart btn on mobile */
  .dn-cart-btn {
    height: 35px;
    padding: 0 14px;
    gap: 4px;
  }

  .dn-cart-btn__total {
    font-size: 12px;
  }

  .dn-cart-btn svg {
    width: 18px;
    height: 18px;
  }

  .dn-icon-btn,
  .dn-icon-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* ─────────────────────────────────────────────
   TOP BAR TICKER ANIMATION
───────────────────────────────────────────── */
@keyframes dn-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────────
   ACCESSIBILITY
───────────────────────────────────────────── */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -999px;
  left: -999px;
}

.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  padding: 8px 16px;
  background: #014b94;
  color: #fdfdfd;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  text-decoration: none;
}

/* ============================================================
   END HEADER STYLES
   ============================================================ */

/* ============================================================
   DobreNarty — custom.css
   Pixel-perfect homepage styles based on Figma specs
   Prefix: dn-  (homepage sections only)
   Font: Poppins (loaded in header.php via Google Fonts)
   Container: max-width 1200px (Figma content 120px→1320px on 1440px)
   ============================================================ */

/* ─────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────── */
:root {
  --dn-bg:           #fdfdfd;
  --dn-dark:         #1e1e1c;
  --dn-blue:         #014b94;
  --dn-orange:       #e74011;
  --dn-red:          #dc0032;
  --dn-red-sale:     #d50909;
  --dn-teal:         #09d5cb;
  --dn-green:        #1ad509;
  --dn-light-blue:   #e5f2ff;
  --dn-light-blue2:  #e6f2ff;
  --dn-gray-text:    #aaaaaa;
  --dn-gray-text2:   #999999;
  --dn-gray-bg:      #f8f8f8;
  --dn-white:        #ffffff;
  --dn-surface:      #f8f8f8;
  --dn-border:       #eeeeee;
  --dn-border-light: #dddddd;
  --dn-discount:     #12c238;
  --dn-radius-card:  10px;
  --dn-radius-btn:   25px;
  --dn-radius-input: 25px;
  --dn-btn-height:   50px;
  --dn-font:         'Poppins', sans-serif;
}

/* ─────────────────────────────────────────────
   SHARED UTILITIES
───────────────────────────────────────────── */
.dn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.dn-section-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  text-align: center;
  margin-bottom: 40px;
}

/* Buttons — ZERO border-radius on hero/CTA/action buttons (Figma: radius=0) */
.dn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 36px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.dn-btn:hover {
  opacity: 0.88;
}

.dn-btn--orange {
  background: var(--dn-orange);
  color: var(--dn-bg);
  min-width: 264px;
  height: 50px;
}

.dn-btn--blue {
  background: var(--dn-blue);
  color: var(--dn-bg);
  height: 50px;
}

.dn-btn--white-orange {
  background: var(--dn-white);
  color: var(--dn-orange);
  height: 50px;
  min-width: 242px;
}

/* ─────────────────────────────────────────────
   1. HERO
   y=179, h=685
───────────────────────────────────────────── */
.dn-hero {
  position: relative;
  height: 685px;
  overflow: hidden;
}

/* ── Hero Slider (horizontal slide) ── */
.dn-hero__slides {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
}

.dn-hero__slide {
  position: relative;
  min-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.dn-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.dn-hero__bgimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Figma: czarny overlay 70% opacity */
.dn-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
}

.dn-hero__slide .dn-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Hero content align LEFT */
.dn-hero__content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 688px;
  align-items: flex-start;
}

.dn-hero__text {
  display: flex;
  flex-direction: column;
  gap: 19px;
}

/* Poppins 600 64px/70.4px UPPERCASE #fdfdfd */
.dn-hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 64px;
  line-height: 70.4px;
  color: var(--dn-bg);
  text-transform: uppercase;
  text-align: left;
  max-width: 688px;
  margin: 0;
}

/* Poppins 300 16px/24px max-width 483px */
.dn-hero__subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-bg);
  max-width: 483px;
  text-align: left;
  margin: 0;
}

/* Pagination dots */
.dn-hero__dots {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 3;
}

.dn-hero__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--dn-bg);
  background: transparent;
  display: block;
  cursor: pointer;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.dn-hero__dot--active {
  border-color: var(--dn-orange);
  background: transparent;
  position: relative;
}

.dn-hero__dot--active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dn-orange);
}

/* Hero arrows */
.dn-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(253, 253, 253, 0.4);
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.dn-hero__arrow:hover {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(253, 253, 253, 0.7);
}

.dn-hero__arrow--prev { left: 30px; }
.dn-hero__arrow--next { right: 30px; }

/* ─────────────────────────────────────────────
   2. CATEGORIES
   y=864, h=328
───────────────────────────────────────────── */
.dn-categories {
  padding: 60px 0 48px;
  background: var(--dn-bg);
}

/* Figma: 5 kategorii w rzędzie, gap między itemami = (1320-5*232)/4 = (1320-1160)/4 = 40px */
.dn-categories__grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
}

/* Figma: Tekst 232px szeroki, Ellipse 70x70 centered */
.dn-categories__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-decoration: none;
  width: 232px;
  flex-shrink: 0;
}

/* Figma: kółko 70x70, bg=#e6f2ff */
.dn-categories__circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--dn-light-blue2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
}

/* Figma: ikona ~40px wewnątrz kółka */
.dn-categories__circle img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.dn-categories__item:hover .dn-categories__circle {
  background: #c8e0f8;
}

/* Figma: Poppins 500 16px/24px center */
.dn-categories__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: center;
  width: 232px;
}

/* ─────────────────────────────────────────────
   3. PRODUCTS
   y=1192, h=1169
───────────────────────────────────────────── */
.dn-products {
  padding: 60px 0 80px;
  background: var(--dn-bg);
}

/* Figma: 4 kolumny × 278px + 3 przerwy × 30px = 1202px */
.dn-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 278px);
  gap: 30px;
  justify-content: center;
  margin-bottom: 60px;
}

/* Figma: karta 278x460 */
.dn-products__card {
  position: relative;
  width: 278px;
  height: 460px;
  background: var(--dn-white);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Wishlist heart — absolute top-right of card */
.dn-products__heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  z-index: 2;
  text-decoration: none;
  transition: background 0.2s;
}

.dn-products__heart:hover {
  background: var(--dn-white);
}

.dn-products__heart img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Figma: Image area 278×278 */
.dn-products__imgwrap {
  display: block;
  width: 278px;
  height: 278px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--dn-white);
}

.dn-products__imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.dn-products__imgwrap:hover img {
  transform: scale(1.04);
}

/* Figma: Info area 278×182 */
.dn-products__info {
  width: 278px;
  height: 182px;
  background: var(--dn-white);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
}

/* Badges row */
.dn-products__badges {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  flex-shrink: 0;
}

/* Figma: badge h=20px, padding 10px horizontal */
.dn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  color: var(--dn-bg);
  white-space: nowrap;
  border-radius: 0;
}

/* Figma: "NOWE" bg=#014b94, "%" bg=#d50909, "EKO" bg=#09d5cb, "#1ad509" */
.dn-badge--blue  { background: var(--dn-blue); }
.dn-badge--teal  { background: var(--dn-teal); }
.dn-badge--red   { background: var(--dn-red-sale); }
.dn-badge--green { background: var(--dn-green); }

/* Figma: Poppins 500 16px/24px #1e1e1c */
.dn-products__name {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}

.dn-products__name:hover {
  color: var(--dn-blue);
}

/* Pricing row */
.dn-products__pricing {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-shrink: 0;
}

/* Figma: Poppins 500 16px/24px #014b94 */
.dn-products__price-current {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-blue);
}

/* Figma: Poppins 300 12px/18px #1e1e1c text-decoration line-through */
.dn-products__price-old {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--dn-dark);
  text-decoration: line-through;
}

/* Figma: Frame 14 — 256×35, border 1px solid #014b94, bg transparent, text #014b94 */
.dn-products__addcart {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 256px;
  height: 35px;
  border: 1px solid var(--dn-blue);
  background: transparent;
  border-radius: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-blue);
  text-decoration: none;
  padding: 0 10px;
  margin-top: auto;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}

.dn-products__addcart:hover {
  background: var(--dn-blue);
  color: var(--dn-white);
}

/* CTA below grid */
.dn-products__cta {
  display: flex;
  justify-content: center;
}

/* Figma: Frame 14 (245x50) bg=#014b94 */
.dn-products__cta .dn-btn--blue {
  min-width: 245px;
}

/* ─────────────────────────────────────────────
   4. PROMO BANNER
   y=2361, h=400
───────────────────────────────────────────── */
.dn-promo-banner {
  position: relative;
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.dn-promo-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Figma: białe przejaśnienie (gradient overlay) */
.dn-promo-banner__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.45);
}

.dn-promo-banner .dn-container {
  position: relative;
  z-index: 1;
}

.dn-promo-banner__content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 406px;
  align-items: flex-start;
}

/* Figma: Poppins 600 48px/72px UPPERCASE kolor #1e1e1c (DARK, nie white!) */
.dn-promo-banner__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 72px;
  color: var(--dn-dark);
  text-transform: uppercase;
  text-align: left;
  max-width: 406px;
  margin: 0;
}

/* Figma: Frame 40 (220x50) bg=#014b94 */
.dn-promo-banner .dn-btn--blue {
  min-width: 220px;
}

/* ─────────────────────────────────────────────
   5. BRANDS
   y=2761, h=180 (section z paddingiem)
───────────────────────────────────────────── */
.dn-brands {
  padding: 70px 0;
  background: var(--dn-bg);
  overflow: hidden;
}

/* Figma: Mask group 1379x40, gradient po bokach (fade do białego) */
.dn-brands__track-wrap {
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* Figma: Frame 6 (1379x40), gap=98px, 6 logo */
.dn-brands__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 98px;
  height: 40px;
  padding: 0 31px;
}

.dn-brands__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Figma: placeholdery — szare prostokąty z tekstem marek */
.dn-brands__item img {
  height: 34px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: opacity 0.2s, filter 0.2s;
}

.dn-brands__item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Placeholder brand box gdy brak logo */
.dn-brands__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  min-width: 80px;
  background: #e0e0e0;
  padding: 0 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #888;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────
   6. 20 LAT STATS
   y=2941, h=603 (do y=3544)
───────────────────────────────────────────── */
.dn-stats {
  padding: 70px 0 80px;
  background: var(--dn-bg);
}

/* Figma: lewa kolumna (tekst+stat, max 483px), prawa (obraz 587x533) */
.dn-stats__layout {
  display: flex;
  align-items: flex-start;
  gap: 130px;
}

/* Figma: lewa kolumna max 483px */
.dn-stats__left {
  flex: 0 0 483px;
  max-width: 483px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Figma: Poppins 600 48px/72px */
.dn-stats__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 72px;
  color: var(--dn-dark);
  margin: 0;
}

/* Figma: Poppins 300 16px/24px max 483px */
.dn-stats__desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  max-width: 483px;
  margin: 0;
}

/* Figma: 3 statystyki w rzędzie, każda 149px */
.dn-stats__numbers {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.dn-stats__stat {
  width: 149px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

/* Figma: Poppins 600 26px/39px #e74011 */
.dn-stats__value {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-orange);
  text-align: center;
  display: block;
}

/* Figma: Poppins 300 14px/21px #999999 */
.dn-stats__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-gray-text2);
  text-align: center;
  display: block;
}

/* Figma: Frame 20 (178x50) bg=#014b94 */
.dn-stats__left .dn-btn--blue {
  min-width: 178px;
  align-self: flex-start;
}

/* Figma: prawa kolumna — obraz 587×533 */
.dn-stats__right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* Figma: Rectangle 11 (587x533) bg=IMAGE radius=10 */
.dn-stats__image {
  width: 587px;
  height: 533px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ─────────────────────────────────────────────
   7. TESTIMONIALS
   y=3544, h=490
───────────────────────────────────────────── */
/* Figma: bg=#e5f2ff, h=490px */
.dn-testimonials {
  background: var(--dn-light-blue);
  min-height: 490px;
  padding: 60px 0;
  position: relative;
  display: flex;
  align-items: center;
}

.dn-testimonials .dn-container {
  width: 100%;
  position: relative;
}

.dn-testimonials .dn-section-title {
  margin-bottom: 40px;
}

/* Slider */
.dn-testimonials__slider {
  position: relative;
  min-height: 260px;
}

.dn-testimonials__slide {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.dn-testimonials__slide--active {
  display: flex;
  opacity: 1;
}

/* Figma: Ellipse 1 — 100x100, bg=IMAGE, centered */
.dn-testimonials__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.dn-testimonials__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.dn-testimonials__initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #e74011;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 40px;
  text-transform: uppercase;
}

/* Figma: Frame 21 (100x20) — 5 gwiazdek */
.dn-testimonials__stars {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
}

/* Figma: Poppins 300 16px/24px centered, max-width 791px */
.dn-testimonials__quote {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: center;
  max-width: 791px;
  margin: 0;
}

/* Figma: Poppins 500 16px/24px centered */
.dn-testimonials__name {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: center;
  margin: 0;
}

/* Figma: Frame 22/23 — białe kółka, strzałki prev/next */
.dn-testimonials__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--dn-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
  z-index: 2;
  transition: box-shadow 0.2s, transform 0.2s;
}

.dn-testimonials__arrow:active {
  transform: translateY(-50%) scale(0.92);
}

.dn-testimonials__arrow:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}

.dn-testimonials__arrow--prev {
  left: -17px;
}

.dn-testimonials__arrow--next {
  right: -17px;
}

/* Dots nav */
.dn-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}

.dn-testimonials__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}

.dn-testimonials__dot--active {
  background: var(--dn-primary);
  transform: scale(1.3);
}

.dn-testimonials__dot:hover {
  background: var(--dn-primary);
}

/* ─────────────────────────────────────────────
   8. VALUE USP
   y=3964, h=487
───────────────────────────────────────────── */
.dn-value {
  padding: 60px 0 80px;
  background: var(--dn-bg);
}

/* Figma: 4 karty 278x278, gap 30px */
.dn-value__grid {
  display: grid;
  grid-template-columns: repeat(4, 278px);
  gap: 30px;
  justify-content: center;
}

/* Figma: Rectangle bg=#f8f8f8, radius=5 */
.dn-value__card {
  width: 278px;
  height: 278px;
  background: var(--dn-gray-bg);
  border-radius: 5px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Figma: ikona 80x80 na górze karty */
.dn-value__card img {
  width: 80px;
  height: 80px;
  display: block;
  flex-shrink: 0;
}

/* Figma: Poppins 500 18px/27px */
.dn-value__text {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: var(--dn-dark);
  margin: 0;
}

/* ─────────────────────────────────────────────
   9. CTA B2B
   y=4451, h=460
───────────────────────────────────────────── */
/* Figma: bg = obraz z overlay niebieskim #0A4B94 70% */
.dn-cta-b2b {
  position: relative;
  min-height: 460px;
  background: var(--dn-blue);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 70px 0 60px;
}

/* Overlay niebieskie 70% opacity */
.dn-cta-b2b__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.dn-cta-b2b__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 75, 148, 0.70);
}

.dn-cta-b2b .dn-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Figma: Poppins 600 26px/39px centered #fdfdfd */
.dn-cta-b2b__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-bg);
  text-align: center;
  max-width: 585px;
  margin: 0;
}

/* Figma: 3 kolumny z ikonami 40x40 i tekstem */
.dn-cta-b2b__cols {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  width: 100%;
}

.dn-cta-b2b__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  max-width: 380px;
  flex: 1;
}

/* Figma: ikony 40x40, białe */
.dn-cta-b2b__col img {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* Figma: Poppins 300 16px/24px #fdfdfd centered */
.dn-cta-b2b__col p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-bg);
  text-align: center;
  margin: 0;
}

.dn-cta-b2b__col p strong {
  font-weight: 500;
}

/* Figma: Frame 25 (242x50) bg=#fdfdfd, tekst #e74011 z ikoną calendar-search */
.dn-cta-b2b .dn-btn--white-orange img {
  filter: none;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}

/* ─────────────────────────────────────────────
   10. FAQ
   y=4981, h=490
───────────────────────────────────────────── */
.dn-faq {
  padding: 60px 0 80px;
  background: var(--dn-bg);
}

/* Figma: 2 kolumny po 585px, gap 30px */
.dn-faq__cols {
  display: grid;
  grid-template-columns: 585px 585px;
  gap: 30px;
  justify-content: center;
}

.dn-faq__col {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Figma: item h=60px, border 1px solid #dddddd, padding 10px */
.dn-faq__item {
  border: 1px solid #dddddd;
  margin-bottom: -1px;
}

/* Figma: pytanie — layout HORIZONTAL, padding 10px, między tekstem a ikoną */
.dn-faq__question {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

/* Figma: Poppins 500 16px/24px #1e1e1c */
.dn-faq__question span:first-child {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  flex: 1;
}

/* Figma: Group 11 (16x16) — ikona +/- */
.dn-faq__icon {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 1;
  color: var(--dn-dark);
  font-weight: 400;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dn-faq__answer {
  padding: 0 10px 16px 10px;
}

.dn-faq__answer[hidden] {
  display: none;
}

/* Figma: Poppins 300 16px/24px #1e1e1c */
.dn-faq__answer p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  max-width: 565px;
  margin: 0;
}

/* ─────────────────────────────────────────────
   11. BLOG
   y=5471, h=496
───────────────────────────────────────────── */
.dn-blog {
  padding: 60px 0 40px;
  background: var(--dn-bg);
}

/* Figma: 3 karty 380x334, gap 30px */
.dn-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 380px);
  gap: 30px;
  justify-content: center;
  margin-bottom: 40px;
}

/* Figma: Rectangle 19 (380x334) bg=#fdfdfd radius=5 */
.dn-blog__card {
  width: 380px;
  height: 334px;
  background: var(--dn-bg);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Figma: Rectangle 18 (380x240) bg=IMAGE radius=5 (tylko góra) */
.dn-blog__imgwrap {
  display: block;
  width: 380px;
  height: 240px;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  flex-shrink: 0;
}

.dn-blog__imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.dn-blog__imgwrap:hover img {
  transform: scale(1.04);
}

/* Figma: data z ikoną kalendarza — Poppins 300 12px/18px #aaaaaa */
.dn-blog__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 4px 10px;
}

.dn-blog__meta img {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
  opacity: 0.5;
}

.dn-blog__meta time {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--dn-gray-text);
}

/* Figma: Poppins 500 16px/24px #1e1e1c */
.dn-blog__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-decoration: none;
  padding: 4px 10px 10px 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dn-blog__title:hover {
  color: var(--dn-blue);
}

/* CTA "Przejdź do bloga" pod kartami — centered */
.dn-blog__cta {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}

/* Figma: Frame 33 (204x50) bg=#014b94 */
.dn-blog__cta .dn-btn--blue {
  min-width: 204px;
}

/* ─────────────────────────────────────────────
   12. CONTACT
   y=6087, h=501
───────────────────────────────────────────── */
/* Figma: bg=#014b94 z overlay (obraz pod spodem) */
.dn-contact {
  position: relative;
  min-height: 501px;
  background: var(--dn-blue);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 70px 0 75px;
}

.dn-contact__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: 0;
}

.dn-contact .dn-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Figma: 2 kolumny — lewa info, prawa formularz */
.dn-contact__layout {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* Figma: lewa = x=121, szer 380px, treść kontaktowa */
.dn-contact__left {
  flex: 0 0 380px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 20px;
}

/* Figma: Poppins 600 26px/39px #fdfdfd */
.dn-contact__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-bg);
  margin: 0;
}

/* Figma: Poppins 300 16px/24px #fdfdfd */
.dn-contact__desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-bg);
  margin: 0;
}

.dn-contact__items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dn-contact__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dn-contact__item img {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.dn-contact__item span {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-bg);
}

/* Figma: prawa = x=735, szer 586px, formularz */
.dn-contact__right {
  flex: 1;
  max-width: 586px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Figma: "Formularz kontaktowy" Poppins 500 16px/24px centered */
.dn-contact__form-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-bg);
  text-align: center;
  margin: 0;
}

/* Custom form */
.dn-contact__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dn-contact__row {
  display: flex;
  gap: 20px;
}

/* Figma: Frame 1/35 (283x50) — border rgba(255,255,255,0.3), bg transparent */
.dn-contact__input {
  flex: 1;
  height: 50px;
  background: transparent;
  border: 1px solid #fdfdfd;
  border-radius: 25px;
  padding: 0 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-bg);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.dn-contact__input::placeholder {
  color: var(--dn-bg);
  opacity: 0.7;
}

.dn-contact__input:focus {
  border-color: rgba(255, 255, 255, 0.6);
}

/* Figma: Frame 36 (586x100) — border rgba(255,255,255,0.3), bg transparent */
.dn-contact__textarea {
  width: 100%;
  height: 100px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  padding: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-bg);
  outline: none;
  resize: vertical;
  appearance: none;
}

.dn-contact__textarea::placeholder {
  color: var(--dn-bg);
  opacity: 0.7;
}

.dn-contact__textarea:focus {
  border-color: rgba(255, 255, 255, 0.6);
}

/* Figma: Rectangle 20 (15x15) bg=empty, radius=2, stroke=#fdfdfd */
.dn-contact__gdpr {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dn-contact__gdpr input[type="checkbox"] {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 2px;
  background: transparent;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--dn-orange);
}

/* Figma: Poppins 300 12px/18px #fdfdfd */
.dn-contact__gdpr label {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--dn-bg);
  cursor: pointer;
}

/* Figma: Frame 37 (257x50) bg=#e74011 z ikoną send */
.dn-contact__submit {
  min-width: 257px;
  height: 50px;
  align-self: flex-end;
  border-radius: 25px;
}

.dn-contact__submit img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

/* CF7 overrides inside contact section */
.dn-contact .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dn-contact .wpcf7-form p {
  margin: 0;
}

.dn-contact .wpcf7-form input[type="text"],
.dn-contact .wpcf7-form input[type="email"] {
  width: 100%;
  height: 50px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 25px;
  padding: 0 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: var(--dn-bg);
  outline: none;
}

.dn-contact .wpcf7-form input::placeholder,
.dn-contact .wpcf7-form textarea::placeholder {
  color: rgba(253,253,253,0.7);
}

.dn-contact .wpcf7-form textarea {
  width: 100%;
  height: 100px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 15px;
  padding: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: var(--dn-bg);
  outline: none;
  resize: vertical;
}

.dn-contact .wpcf7-form input[type="submit"] {
  background: var(--dn-orange);
  color: var(--dn-bg);
  border: none;
  border-radius: 25px;
  height: 50px;
  padding: 0 36px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  align-self: flex-end;
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */

/* ── Tablet: ≤1200px ── */
@media (max-width: 1200px) {
  .dn-products__grid {
    grid-template-columns: repeat(2, 278px);
  }

  .dn-value__grid {
    grid-template-columns: repeat(2, 278px);
  }

  .dn-blog__grid {
    grid-template-columns: repeat(2, 380px);
  }

  .dn-faq__cols {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .dn-faq__answer p {
    max-width: 100%;
  }

  .dn-stats__layout {
    flex-direction: column;
    gap: 40px;
  }

  .dn-stats__left {
    flex: none;
    max-width: 100%;
  }

  .dn-stats__right {
    justify-content: center;
  }

  .dn-stats__image {
    width: 100%;
    max-width: 587px;
    height: auto;
    aspect-ratio: 587/533;
  }

  .dn-categories__grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }

  .dn-cta-b2b__cols {
    flex-direction: column;
    align-items: center;
  }
}

/* ── Tablet: ≤900px ── */
@media (max-width: 900px) {
  .dn-hero__title {
    font-size: 42px;
    line-height: 50px;
  }

  .dn-promo-banner__title {
    font-size: 34px;
    line-height: 50px;
  }

  .dn-stats__heading {
    font-size: 36px;
    line-height: 50px;
  }

  .dn-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dn-blog__card {
    width: 100%;
    height: auto;
  }

  .dn-blog__imgwrap {
    width: 100%;
  }

  .dn-contact__layout {
    flex-direction: column;
    gap: 40px;
  }

  .dn-contact__left {
    flex: none;
    max-width: 100%;
    padding-right: 0;
  }

  .dn-contact__right {
    max-width: 100%;
  }
}

/* ── Mobile: ≤768px ── */
@media (max-width: 768px) {
  .dn-hero {
    height: 500px; /* Figma mobile: 393x500 */
  }

  .dn-hero__arrow { display: none; }

  .dn-hero__title {
    font-size: 32px;
    line-height: 35.2px; /* Figma mobile: 32px/35.2px */
  }

  .dn-hero__subtitle {
    font-size: 14px;
    line-height: 22px;
  }

  .dn-btn--orange {
    min-width: 0;
    width: auto;
  }

  /* Categories: 3 per row (Figma mobile: 3 circles x=39/161/283, 70px each, 52px gap) */
  .dn-categories__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    justify-items: center;
  }

  .dn-categories__item {
    width: auto;
  }

  .dn-categories__label {
    font-size: 14px;
    line-height: 21px; /* Figma mobile: 14px/21px */
  }

  /* Products: 2 per row */
  .dn-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dn-products__card {
    width: 100%;
    height: auto;
  }

  .dn-products__imgwrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .dn-products__info {
    width: 100%;
    height: auto;
  }

  .dn-products__addcart {
    width: 100%;
  }

  /* Value: 2 per row */
  .dn-value__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dn-value__card {
    width: 100%;
    height: auto; /* Figma mobile: 361x169, not fixed 278px from desktop */
  }

  /* Blog: 1 per row */
  .dn-blog__grid {
    grid-template-columns: 1fr;
  }

  .dn-blog__card {
    width: 100%;
    height: auto;
  }

  .dn-blog__imgwrap {
    width: 100%;
    height: 240px;
  }

  .dn-blog__grid {
    gap: 10px;
  }

  /* FAQ: 1 column */
  .dn-faq__cols {
    grid-template-columns: 1fr;
  }

  .dn-section-title {
    font-size: 22px;
    line-height: 33px;
  }

  .dn-faq__question span:first-child {
    font-size: 14px;
  }

  .dn-faq__answer p {
    font-size: 14px;
    line-height: 21px;
  }

  .dn-faq__question {
    min-height: 70px;
  }

  .dn-promo-banner {
    height: auto;
    padding: 60px 0;
  }

  .dn-promo-banner__title {
    font-size: 28px;
    line-height: 33.6px; /* Figma mobile: 28px/33.6px */
  }

  .dn-brands__track {
    gap: 40px;
    overflow-x: auto;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .dn-brands__track-wrap {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .dn-stats__heading {
    font-size: 32px;
    line-height: 48px; /* Figma mobile: 32px/48px */
  }

  .dn-stats__numbers {
    flex-wrap: wrap;
    justify-content: center;
  }

  .dn-stats__stat {
    width: 33%;
    min-width: 100px;
  }

  .dn-cta-b2b__title {
    font-size: 22px;
    line-height: 33px; /* Figma mobile: 22px/33px */
  }

  .dn-cta-b2b__col p {
    font-size: 14px;
    line-height: 21px; /* Figma mobile: 14px/21px */
  }

  .dn-contact__row {
    flex-direction: column;
    gap: 14px;
  }

  .dn-contact__gdpr label {
    font-size: 12px;
  }

  /* Kontakt mobile overrides per Figma 393px */
  .dn-contact__heading {
    font-size: 22px;
    line-height: 33px;
  }

  .dn-contact__desc {
    font-size: 14px;
    line-height: 21px;
  }

  .dn-contact__form-title {
    font-size: 14px;
    line-height: 21px;
  }

  .dn-contact__input {
    height: 45px;
  }

  .dn-contact__textarea {
    height: 150px;
  }

  .dn-contact__submit {
    align-self: stretch;
    justify-content: center;
    font-size: 14px;
    line-height: 21px;
    height: 45px;
  }

  .dn-contact__gdpr input[type="checkbox"] {
    border: 1px solid #fdfdfd;
  }

  .dn-contact .wpcf7-form input[type="text"],
  .dn-contact .wpcf7-form input[type="email"] {
    height: 45px;
    border-radius: 25px;
  }

  .dn-contact .wpcf7-form textarea {
    height: 150px;
    border-radius: 15px;
  }

  .dn-contact .wpcf7-form input[type="submit"] {
    border-radius: 25px;
  }
}

/* ── Mobile: ≤480px ── */
@media (max-width: 480px) {
  /* Figma mobile (393px): 2 columns, 177px each, ~7px gap */
  .dn-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
  }

  /* Figma mobile product card text: 14px/21px (smaller than desktop 16px/24px) */
  .dn-products__name {
    font-size: 14px;
    line-height: 21px;
  }

  .dn-products__price-current {
    font-size: 14px;
    line-height: 21px;
  }

  /* Figma mobile: 32px/35.2px — same as 768px, do NOT shrink further */
  .dn-hero__title {
    font-size: 32px;
    line-height: 35.2px;
  }

  .dn-section-title {
    font-size: 22px;
    line-height: 33px;
  }

  /* Figma mobile (393px): 3 circles in row */
  .dn-categories__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dn-stats__numbers {
    flex-direction: column;
    align-items: center;
  }

  .dn-stats__stat {
    width: 100%;
  }

  .dn-value__grid {
    grid-template-columns: 1fr;
  }

  .dn-value__card {
    width: 100%;
    height: auto;
  }
}

/* ============================================================
   PAGE: KONTAKT
   page-kontakt.php
   ============================================================ */

/* ── Kontakt Hero ── */
.dn-kontakt-hero {
  padding: 20px 0 0;
  background: var(--dn-bg);
}

/* Breadcrumb: Poppins 300 14px/21px #aaaaaa, left-aligned (shared, other pages reuse) */
.dn-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-gray-text);
  margin-bottom: 21px; /* gap between breadcrumb (y=199) and title (y=240): 240-199-20(padding)=21 */
}

.dn-breadcrumb a {
  color: var(--dn-gray-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dn-breadcrumb a:hover {
  color: var(--dn-dark);
}

.dn-breadcrumb span[aria-hidden="true"] {
  color: var(--dn-gray-text);
  font-size: 12px;
}

/* Title: Poppins 600 48px/72px UPPERCASE centered — Figma: 227x72 centered at x=607 on 1440 */
.dn-kontakt-hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 72px;
  color: var(--dn-dark);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 5px; /* gap to subtitle: y=317 - (y=240 + h=72) = 5px */
}

/* Subtitle: Poppins 300 16px/24px centered — Figma: 1027px wide centered (x=207 on 1440px) */
.dn-kontakt-hero__subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: center;
  max-width: 1027px;
  margin: 0 auto;
  padding-bottom: 70px;
}

/* ── Kontakt Responsive — Mobile ≤768px ── */
@media (max-width: 768px) {
  .dn-kontakt-hero {
    padding: 16px 0 0;
  }

  /* Breadcrumb: 14px → 12px on mobile */
  .dn-breadcrumb {
    font-size: 12px;
    line-height: 18px;
  }

  /* Title: 48px/72px → 32px/35.2px */
  .dn-kontakt-hero__title {
    font-size: 32px;
    line-height: 35.2px;
    margin-bottom: 10px;
  }

  /* Subtitle: 16px/24px → 14px/21px, width 361px */
  .dn-kontakt-hero__subtitle {
    font-size: 14px;
    line-height: 21px;
    max-width: 361px;
    padding-bottom: 60px;
  }
}

/* ── Kontakt Responsive — Small Mobile ≤480px ── */
@media (max-width: 480px) {
  .dn-kontakt-hero__title {
    font-size: 32px;
    line-height: 35.2px;
  }

  .dn-kontakt-hero__subtitle {
    max-width: 100%;
  }
}

/* ============================================================
   PAGE: KORZYŚCI
   page-korzysci.php
   Figma Desktop: 1440x2686 — sections y=179–1871
   Figma Mobile:  393x3856
   ============================================================ */

/* ── Korzyści Hero ──
   Same pattern as .dn-kontakt-hero — identical Figma layout.
   Breadcrumb reuses .dn-breadcrumb (already defined above).
   Title/subtitle share same Figma values as kontakt page.
   Using separate BEM classes to avoid coupling.
────────────────────────────────────────────────────────────── */
.dn-korzysci-hero {
  /* Desktop: hero area y=179–411, section padding mirrors kontakt */
  padding: 20px 0 0;
  background: var(--dn-bg);
}

/* Title: Poppins 600 48px/72px UPPERCASE centered
   Figma: pos=(601,240) size=(238,72) color=#1e1e1c align=CENTER case=UPPER
   Same values as .dn-kontakt-hero__title */
.dn-korzysci-hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 72px;
  color: var(--dn-dark);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 5px; /* gap to subtitle: y=317 - (y=240 + h=72) = 5px */
}

/* Subtitle: Poppins 300 16px/24px centered
   Figma: pos=(207,317) size=(1027,24) color=#1e1e1c align=CENTER */
.dn-korzysci-hero__subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: center;
  max-width: 1027px;
  margin: 0 auto;
  padding-bottom: 70px; /* gap: subtitle y=317 bottom=341, section starts y=411 → 70px */
  letter-spacing: -0.16px;
}

/* ── Benefits Zigzag Section ──
   Figma: 4 blocks (y=411, 771, 1131, 1491) each ~310px image height
   Total content between y=411 and y=1801 = 1390px / 4 blocks
   Gap between blocks (310px image to next 310px image): 360px → 50px vertical gap
   Section wraps all 4 blocks with shared top/bottom padding.
────────────────────────────────────────────────────────────── */
.dn-benefits {
  padding: 0 0 80px;
  background: var(--dn-bg);
}

/* Each benefit row: flex, image 585px + gap + content 585px
   Figma: image x=120 w=585, content x=838 (838-120=718, content start after image+gap)
   Gap between image and content: 838 - (120+585) = 133px — but on 1440px with 120px margins:
   Total content width = 1440 - 120*2 = 1200px. Image = 585px. Gap = 1200 - 585 - 585 = 30px.
   (Figma absolute gap: 838 - 705 = 133px is from page edge. Between columns: 735-705=30px)
*/
.dn-benefits__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 133px; /* Figma: 585px image + 133px gap + 482px content = 1200px container */
  margin-bottom: 50px; /* Figma: 771-721=50px between blocks */
}

.dn-benefits__item:last-child {
  margin-bottom: 0;
}

/* Reversed: image RIGHT, content LEFT
   flex-row-reverse swaps the visual order */
.dn-benefits__item--reverse {
  flex-direction: row-reverse;
}

/* Image container: 585x310, radius=5
   Figma: RECTANGLE 585x310 bg=IMAGE radius=5.0 */
.dn-benefits__image {
  flex: 0 0 585px;
  width: 585px;
  height: 310px;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}

.dn-benefits__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 5px;
  transition: transform 0.3s ease;
}

.dn-benefits__image:hover img {
  transform: scale(1.03);
}

/* Content column: flex, stacks icon + title + desc vertically */
.dn-benefits__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0; /* prevent flex overflow */
}

/* Icon: 40x40, above title
   Figma: all icons are 40x40 frames (coins, package-search, handshake, calendar-clock)
   Positioned above the title text with gap matching Figma:
   coins icon y=473, title y=513 → gap = 513-473-40 = 0px → icon directly above title */
.dn-benefits__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px; /* small visual separation from title; Figma gap ≈ 0, add 10px for readability */
  flex-shrink: 0;
}

.dn-benefits__icon svg {
  width: 40px;
  height: 40px;
  display: block;
  color: var(--dn-orange); /* for future currentColor usage */
}

/* Title: Poppins 600 26px/39px #1e1e1c align=LEFT
   Figma: all 4 titles — font=Poppins 600 26.0px/39.0px color=#1e1e1c align=LEFT */
.dn-benefits__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  text-align: left;
  margin: 0 0 10px; /* gap to desc: Figma title y=513 h=39, desc y=562 → 562-552=10px */
}

/* Description: Poppins 300 16px/24px #1e1e1c align=LEFT
   Figma: all 4 descs — font=Poppins 300 16.0px/24.0px color=#1e1e1c align=LEFT size=482x96 */
.dn-benefits__desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: left;
  max-width: 100%; /* flex layout with 133px gap already constrains content column to ~482px */
  letter-spacing: -0.16px;
  margin: 0;
}

/* ── Korzyści Responsive — Tablet ≤1200px ── */
@media (max-width: 1200px) {
  .dn-benefits__item {
    gap: 60px; /* graceful degradation from 133px */
  }

  .dn-benefits__image {
    flex: 0 0 460px;
    width: 460px;
    height: auto;
    aspect-ratio: 585 / 310;
  }

  .dn-benefits__desc {
    max-width: 100%;
  }
}

/* ── Korzyści Responsive — Tablet ≤900px ── */
@media (max-width: 900px) {
  .dn-benefits__item {
    gap: 30px;
  }

  .dn-benefits__image {
    flex: 0 0 340px;
    width: 340px;
    height: auto;
    aspect-ratio: 585 / 310;
  }

  .dn-benefits__title {
    font-size: 22px;
    line-height: 33px;
  }

  .dn-benefits__desc {
    font-size: 14px;
    line-height: 21px;
  }
}

/* ── Korzyści Responsive — Mobile ≤768px ──
   Figma mobile (393px): all 4 sections stack vertically.
   Image: 361x193 (full width), above content.
   Titles: Poppins 600 22px/33px
   Descs:  Poppins 300 14px/21px
   No zigzag on mobile — image always on top, content below.
────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hero */
  .dn-korzysci-hero {
    padding: 16px 0 0;
  }

  /* Breadcrumb inherits mobile styles from .dn-breadcrumb media query above */

  /* Title: 48px → 32px/35.2px (Figma mobile: pos=(16,228) size=(361,35) font=32px/35.2px) */
  .dn-korzysci-hero__title {
    font-size: 32px;
    line-height: 35.2px;
    margin-bottom: 10px;
  }

  /* Subtitle: 16px/24px → 14px/21px (Figma mobile: font=Poppins 300 14px/21px) */
  .dn-korzysci-hero__subtitle {
    font-size: 14px;
    line-height: 21px;
    max-width: 361px;
    padding-bottom: 30px;
  }

  /* Benefits: stack vertically — image on top, content below.
     Both normal and reversed behave the same on mobile. */
  .dn-benefits__item,
  .dn-benefits__item--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 50px;
  }

  /* Image: full width, 361x193 aspect ratio (Figma mobile: RECTANGLE 361x193 radius=5) */
  .dn-benefits__image {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 361 / 193;
    border-radius: 5px;
  }

  .dn-benefits__image img {
    border-radius: 5px;
  }

  /* Content: full width, left-aligned */
  .dn-benefits__content {
    width: 100%;
  }

  /* Title: Poppins 600 22px/33px (Figma mobile: size=(325,33) font=22px/33px) */
  .dn-benefits__title {
    font-size: 22px;
    line-height: 33px;
    margin-bottom: 8px;
  }

  /* Desc: Poppins 300 14px/21px (Figma mobile: size=(361,105) font=14px/21px) */
  .dn-benefits__desc {
    font-size: 14px;
    line-height: 21px;
    max-width: 100%;
  }

  /* Icon stays 40x40 on mobile (Figma mobile shows same 40x40 icons) */
  .dn-benefits__icon {
    margin-bottom: 8px;
  }
}

/* ── Korzyści Responsive — Small Mobile ≤480px ── */
@media (max-width: 480px) {
  .dn-korzysci-hero__title {
    font-size: 32px;
    line-height: 35.2px;
  }

  .dn-korzysci-hero__subtitle {
    max-width: 100%;
  }

  .dn-benefits__item,
  .dn-benefits__item--reverse {
    margin-bottom: 40px;
  }

  .dn-benefits__title {
    font-size: 22px;
    line-height: 33px;
  }
}


/* ============================================================
   PAGE: REFERENCJE
   page-referencje.php
   ============================================================ */

/* ── Hero Section ── */
/*
 * Figma: breadcrumb y=199 (20px below menu end at y=179).
 * Same padding pattern as kontakt: 20px top, no bottom (layout handles spacing).
 */
.dn-referencje-hero {
  padding: 20px 0 80px;
  background: var(--dn-bg);
}

/*
 * Two-column flex layout.
 * align-items: flex-start because image (390px) and text block may differ in height.
 * Figma: image @ x=120,y=240; text @ x=838,y=310.
 * Gap: Figma 133px on 1440px, adjusted to 93px for 1160px effective container
 *   (585 img + 93 gap + 482 text = 1160px)
 * margin-top creates space between breadcrumb bottom and layout top:
 *   breadcrumb y=199, h=21px → bottom at y=220. image y=240 → gap = 240-220 = 20px.
 */
.dn-referencje-hero__layout {
  display: flex;
  align-items: flex-start;
  gap: 93px;
  margin-top: 20px;
}

/* ── Left column: image + stat overlays ── */
.dn-referencje-hero__imagewrap {
  position: relative;
  flex: 0 0 585px;
  width: 585px;
}

.dn-referencje-hero__image {
  display: block;
  width: 585px;
  height: 390px;
  object-fit: cover;
  border-radius: 5px;
}

/* ── Stat overlay cards (shared) ── */
.dn-referencje-hero__stat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background-color: #fdfdfd;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 20px 15px;
}

/* Ceneo — Frame 53: 226x97, Figma absolute x=76,y=275.
   Image starts at x=120 on the page, so card sits 44px to the left of image edge.
   y=275, image top=y=240 → card is 35px DOWN from image top edge. */
.dn-referencje-hero__stat--ceneo {
  width: 226px;
  height: 97px;
  top: 35px;    /* y=275 - image_top(240) = 35px from imagewrap top */
  left: -44px;  /* x=76 vs image x=120: 76-120 = -44px (bleeds left of image) */
}

/* Opineo — Frame 52: 235x97, Figma absolute x=516,y=517.
   x=516 on canvas, image left=120 → left offset within imagewrap = 516-120 = 396px.
   Card right edge = 396+235 = 631px, image width=585px → overflows right by 46px.
   y=517, image top=240 → top offset = 517-240 = 277px down from imagewrap top.
   Image height=390 → card bottom = 277+97 = 374px (within image, 390-374=16px from bottom). */
.dn-referencje-hero__stat--opineo {
  width: 235px;
  height: 97px;
  top: 277px;    /* y=517 - image_top(240) = 277px from imagewrap top */
  left: 396px;   /* x=516 - container_left(120) = 396px from imagewrap left */
}

.dn-referencje-hero__stat-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dn-referencje-hero__stat-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: center;
  margin: 0;
}

/* ── Right column: title + subtitle ── */
/*
 * Figma: title y=310, image top y=240 → title is 70px below image top.
 * padding-top aligns the title baseline with Figma position.
 */
.dn-referencje-hero__text {
  flex: 1;
  width: auto;
  min-width: 0;
  max-width: 482px;
  padding-top: 70px;
}

/* Figma: Poppins 600 48px/72px UPPERCASE #1e1e1c LEFT align */
.dn-referencje-hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 72px;
  color: var(--dn-dark);
  text-align: left;
  text-transform: uppercase;
  margin: 0 0 24px;
}

/* Figma: Poppins 300 16px/24px #1e1e1c LEFT align, width 482px, height ~96px */
.dn-referencje-hero__subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: left;
  margin: 0;
  max-width: 482px;
}

/* ── Stats Section ── */
/* Figma Desktop y=1240: 3 columns × 380px wide, simple row layout */
.dn-referencje-stats {
  padding: 50px 0 70px;
}

.dn-referencje-stats__grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.dn-referencje-stats__item {
  flex: 0 0 380px;
  width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Figma: Poppins 700 96px/144px centered */
.dn-referencje-stats__value {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 96px;
  line-height: 144px;
  color: #014b94;
  display: block;
}

/* Figma: Poppins 300 18px/27px #999999 centered below */
.dn-referencje-stats__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  color: #999999;
  display: block;
  max-width: 380px;
}

/* ── Referencje Responsive — Tablet ≤1024px ── */
@media (max-width: 1024px) {
  .dn-referencje-hero__layout {
    gap: 48px;
  }

  .dn-referencje-hero__imagewrap {
    flex: 0 0 460px;
    width: 460px;
  }

  .dn-referencje-hero__image {
    width: 460px;
    height: 307px; /* aspect-ratio 585/390 ≈ 460×307 */
  }

  /*
   * Scale Opineo stat left offset proportionally:
   * Desktop: image=585px, left=396px (67.7% from left).
   * Tablet: image=460px, scale 67.7% → 311px.
   * Also scale top: image height=307px, top=277px → near bottom of image.
   */
  .dn-referencje-hero__stat--opineo {
    left: 311px;
    top: 218px; /* scale: 277/390 × 307 ≈ 218px */
  }

  /* Scale Ceneo left to stay within container (no deep bleed) */
  .dn-referencje-hero__stat--ceneo {
    left: -24px;
  }

  .dn-referencje-hero__text {
    flex: 1 1 auto;
    width: auto;
  }

  .dn-referencje-hero__title {
    font-size: 36px;
    line-height: 54px;
  }

  .dn-referencje-stats__item {
    flex: 1 1 0;
    width: auto;
  }

  .dn-referencje-stats__value {
    font-size: 72px;
    line-height: 108px;
  }
}

/* ── Referencje Responsive — Mobile ≤768px ── */
@media (max-width: 768px) {
  .dn-referencje-hero {
    padding: 24px 0 60px;
  }

  .dn-referencje-hero__layout {
    flex-direction: column;
    gap: 32px;
    margin-top: 24px;
  }

  /* Mobile: image becomes 361x361 square */
  .dn-referencje-hero__imagewrap {
    flex: none;
    width: 100%;
    max-width: 361px;
    margin: 0 auto;
  }

  .dn-referencje-hero__image {
    width: 100%;
    max-width: 361px;
    height: 361px;
  }

  /* Mobile stat overlays repositioned — smaller cards.
     Figma mobile: Frame 53 (177x80) @ x=16,y=477 — bottom-left of image.
                   Frame 52 (186x80) @ x=191,y=196 — top-right of image. */
  .dn-referencje-hero__stat--ceneo {
    width: 177px;
    height: 80px;
    top: auto;
    left: 0;      /* reset desktop left=-44px */
    bottom: 0;
  }

  .dn-referencje-hero__stat--opineo {
    width: 186px;
    height: 80px;
    top: 0;
    left: auto;   /* reset desktop left=396px */
    right: 0;
    bottom: auto;
  }

  .dn-referencje-hero__stat-text {
    font-size: 12px;
    line-height: 18px;
  }

  .dn-referencje-hero__text {
    flex: none;
    width: 100%;
    max-width: 361px;
    margin: 0 auto;
    padding-top: 20px; /* Figma: 20px gap from image bottom to title */
  }

  /* Mobile: Poppins 600 32px/35.2px LEFT align */
  .dn-referencje-hero__title {
    font-size: 32px;
    line-height: 35.2px;
    margin-bottom: 16px;
  }

  /* Mobile: Poppins 300 14px/21px LEFT align */
  .dn-referencje-hero__subtitle {
    font-size: 14px;
    line-height: 21px;
    max-width: 100%;
  }

  /* Stats: stacked vertically, one per row */
  .dn-referencje-stats {
    padding: 60px 0;
  }

  .dn-referencje-stats__grid {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .dn-referencje-stats__item {
    flex: none;
    width: 100%;
  }

  /* Mobile: Poppins 700 64px/96px centered */
  .dn-referencje-stats__value {
    font-size: 64px;
    line-height: 96px;
  }

  /* Mobile: Poppins 300 16px/24px #999999 centered */
  .dn-referencje-stats__label {
    font-size: 16px;
    line-height: 24px;
    max-width: 100%;
  }

  .dn-testimonials__quote {
    font-size: 14px;
    line-height: 21px;
  }
  .dn-testimonials__name {
    font-size: 14px;
    line-height: 21px;
  }
  .dn-testimonials__arrow {
    width: 36px;
    height: 36px;
  }
  .dn-testimonials__arrow--prev {
    left: 5px;
  }
  .dn-testimonials__arrow--next {
    right: 5px;
  }
  .dn-testimonials {
    min-height: auto;
    padding: 40px 0;
  }
  .dn-testimonials__slider {
    min-height: 220px;
  }
}

/* ── Referencje Responsive — Small Mobile ≤480px ── */
@media (max-width: 480px) {
  .dn-referencje-hero__title {
    font-size: 32px;
    line-height: 35.2px;
  }

  .dn-referencje-stats__value {
    font-size: 64px;
    line-height: 96px;
  }

  .dn-referencje-hero__stat--ceneo {
    width: 150px;
    height: 72px;
  }

  .dn-referencje-hero__stat--opineo {
    width: 158px;
    height: 72px;
  }
}


/* ============================================================
   PAGE: KONSULTACJE
   page-konsultacje.php
   ============================================================ */

/* ── Breadcrumb (shared .dn-breadcrumb already defined) ── */
/* No override needed — .dn-breadcrumb is a global utility.  */

/* ============================================================
   HERO — two-column product layout
   Desktop: image LEFT 585x643, details RIGHT
   Figma: image @ (120,250), details @ x=808
   ============================================================ */
.dn-konsultacje-hero {
  padding-top: 30px;
  padding-bottom: 60px;
  background-color: var(--dn-bg);
}

.dn-konsultacje-hero__price sup {
  font-size: 0.6em;
  vertical-align: super;
}

/* Two-column grid: left 585px image, right fills remainder */
.dn-konsultacje-hero__layout {
  display: grid;
  grid-template-columns: 585px 1fr;
  gap: 0 60px;
  align-items: start;
  margin-top: 24px;
}

/* LEFT: image wrapper — matches Figma 585x643 radius=5 */
.dn-konsultacje-hero__imgwrap {
  width: 585px;
  flex-shrink: 0;
}

.dn-konsultacje-hero__img {
  display: block;
  width: 100%;
  height: 643px;
  object-fit: cover;
  border-radius: 5px;
}

/* RIGHT: details column — starts at x=808 in Figma (1440px frame)
   Figma detail column width: 1320-(808-120)=512px usable */
.dn-konsultacje-hero__details {
  padding-top: 0;
  max-width: 512px;
}

/* Title: Poppins 600 26px/39px #1e1e1c LEFT
   Figma: pos=(808,250) size=512x39 */
.dn-konsultacje-hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  text-align: left;
  margin: 0 0 12px 0;
}

/* Price: Poppins 500 20px/30px #014b94 */
.dn-konsultacje-hero__price {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: var(--dn-blue);
  margin: 0 0 4px 0;
}

/* Lowest price note: Poppins 300 12px/18px #1e1e1c */
.dn-konsultacje-hero__lowest-price {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--dn-dark);
  margin: 0 0 24px 0;
}

/* Scope label: Poppins 500 16px/24px #1e1e1c */
.dn-konsultacje-hero__scope-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin: 0 0 8px 0;
}

/* Description: Poppins 300 16px/24px #1e1e1c */
.dn-konsultacje-hero__desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  max-width: 512px;
  margin: 0 0 28px 0;
}

.dn-konsultacje-hero__desc p {
  margin: 0 0 8px 0;
}

/* ============================================================
   PROCESS STEPS — within right details column
   Figma: steps @ y=656–893, each step 167px wide × 3
   ============================================================ */
.dn-konsultacje-steps {
  margin-top: 0;
}

/* Heading: Poppins 500 16px/24px #1e1e1c
   Figma: "Proces zamawiania konsultacji:" pos=(808,656) size=254x24 */
.dn-konsultacje-steps__heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin: 0 0 10px 0;
}

/* 3 steps in a row, each 167px wide
   Figma: steps at x=808, 980, 1152 → gap = 172-167=5px (let flex distribute) */
.dn-konsultacje-steps__row {
  display: flex;
  gap: 5px;
}

.dn-konsultacje-steps__item {
  flex: 0 0 167px;
  width: 167px;
  display: flex;
  flex-direction: column;
}

/* Step number: Poppins 600 48px/72px #e74011
   Figma: "01","02","03" pos=(808/980/1152, 713) size=167x72 */
.dn-konsultacje-steps__num {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 72px;
  color: var(--dn-orange);
  display: block;
  text-transform: uppercase;
}

/* Step title: Poppins 500 16px/24px #1e1e1c
   Figma: pos=(808/980/1152, 785) size=167x24 */
.dn-konsultacje-steps__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin: 0 0 4px 0;
}

/* Step desc: Poppins 300 14px/21px #aaaaaa
   Figma: pos=(808/980/1152, 809) size=167x84 */
.dn-konsultacje-steps__desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-gray-text);
  margin: 0;
}

/* ============================================================
   LOWER SECTION: Form LEFT + Product Image RIGHT (2-col grid)
   Figma: form @ x=120, product image @ x=808, both @ y=973
   ============================================================ */
.dn-konsultacje-lower {
  background-color: var(--dn-bg);
  padding-top: 0;
  padding-bottom: 80px;
}

.dn-konsultacje-lower__layout {
  display: grid;
  grid-template-columns: 585px 1fr;
  gap: 0 60px;
  align-items: start;
}

.dn-konsultacje-lower__left {
  /* Form column — same width as hero left column */
}

.dn-konsultacje-lower__right {
  /* Product image column — aligned to right */
  padding-top: 0;
}

.dn-konsultacje-product-img__img {
  display: block;
  width: 100%;
  max-width: 512px;
  height: auto;
  aspect-ratio: 512 / 507;
  object-fit: cover;
  border-radius: 5px;
}

/* ============================================================
   CONSULTATION FORM (within lower left column)
   Figma Desktop:
     Title  @ (120,973)   Poppins 600 26px/39px #1e1e1c
     Desc   @ (120,1022)  Poppins 300 16px/24px, width 585px
     Date   @ (120,1124)  283x50
     Time   @ (422,1124)  283x50
     Msg    @ (120,1194)  586x150
     RODO   @ (120,1364)
     CTA    @ (237,1430)  352x50 bg=#e74011 centered
   ============================================================ */

/* Title: Poppins 600 26px/39px #1e1e1c LEFT
   Figma: pos=(120,973) size=296x39 */
.dn-konsultacje-form__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  text-align: left;
  margin: 0 0 12px 0;
}

/* Description: Poppins 300 16px/24px, max 585px */
.dn-konsultacje-form__desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  max-width: 585px;
  margin: 0 0 24px 0;
}

/* Row: date + time pickers side by side
   Figma: Date (283x50) @ x=120, Time (283x50) @ x=422 → gap=422-120-283=19px */
.dn-konsultacje-form__row {
  display: flex;
  gap: 19px;
  margin-bottom: 20px;
}

/* Each field wrapper — styled as Figma Frame with icon */
.dn-konsultacje-form__field {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  max-width: 283px;
  height: 50px;
  padding: 0 20px;
  border: none;
  border-bottom: 1px solid #dddddd;
  border-radius: 0;
  background-color: transparent;
  box-sizing: border-box;
  cursor: pointer;
}

.dn-konsultacje-form__field-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Input inside field — transparent, no border, fills space */
.dn-konsultacje-form__input {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  padding: 0;
  cursor: pointer;
}

.dn-konsultacje-form__input::placeholder {
  color: var(--dn-dark);
  font-weight: 300;
}

/* Hidden native picker — positioned off-screen, triggered by JS */
.dn-konsultacje-form__picker {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  border: none;
  padding: 0;
}

.dn-konsultacje-form__field--date,
.dn-konsultacje-form__field--time {
  position: relative;
  cursor: pointer;
}

/* Notice messages */
.dn-konsultacje-form__notice {
  padding: 14px 20px;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 24px;
}
.dn-konsultacje-form__notice--success {
  background-color: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.dn-konsultacje-form__notice--error {
  background-color: #fce4ec;
  color: #c62828;
  border: 1px solid #ef9a9a;
}

/* Textarea wrapper: Frame 36 (586x150)
   Figma: pad=(20,20,20,20), gap=10 */
.dn-konsultacje-form__textarea-wrap {
  width: 100%;
  max-width: 586px;
  margin-bottom: 20px;
}

.dn-konsultacje-form__textarea {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
  width: 100%;
  max-width: 586px;
  height: 150px;
  padding: 20px;
  border: 1px solid #eeeeee;
  border-radius: 0;
  background-color: var(--dn-bg);
  resize: none;
  outline: none;
  box-sizing: border-box;
  display: block;
}

.dn-konsultacje-form__textarea::placeholder {
  color: var(--dn-dark);
  font-weight: 300;
}

/* RODO: checkbox (15x15) + text Poppins 300 12px/18px #1e1e1c
   Figma: Rectangle 20 (15x15) @ (120,1364) radius=2 stroke=#1e1e1c */
.dn-konsultacje-form__rodo {
  margin-bottom: 26px;
  max-width: 586px;
}

.dn-konsultacje-form__rodo-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.dn-konsultacje-form__checkbox {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin: 2px 0 0 0;
  border: 1px solid var(--dn-dark);
  border-radius: 2px;
  accent-color: var(--dn-dark);
  cursor: pointer;
}

/* RODO text: Poppins 300 12px/18px #1e1e1c, size=563x36 */
.dn-konsultacje-form__rodo-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--dn-dark);
}

/* CTA wrap: centered, Figma: Frame 37 @ x=237 → centered relative to 586px form width
   585/2 - 352/2 = ~117px left margin relative to form, but Figma centers within container */
.dn-konsultacje-form__cta-wrap {
  display: flex;
  justify-content: center;
  max-width: 586px;
}

/* CTA button: Frame 37 (352x50) bg=#e74011, radius=25px
   Icon: cart 31x25 white, text Poppins 500 16px/24px #fdfdfd
   Figma: layout-HORIZONTAL gap=10 pad=(36,10,36,10) */
.dn-konsultacje-form__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 352px;
  height: 50px;
  padding: 10px 36px;
  background-color: var(--dn-orange);
  color: var(--dn-bg);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.dn-konsultacje-form__cta:hover,
.dn-konsultacje-form__cta:focus {
  background-color: #c93309;
  outline: none;
}

.dn-konsultacje-form__cta-icon {
  flex-shrink: 0;
}

/* ============================================================
   BLOG PREVIEW SECTION
   Reuses .dn-blog__grid and .dn-blog__card from front-page
   Only adds section wrapper padding
   Figma: y=1560, title centered, 3 cards, CTA centered
   ============================================================ */
.dn-konsultacje-blog {
  background-color: var(--dn-bg);
  padding-top: 40px;
  padding-bottom: 80px;
}

/* Section title: already styled via .dn-section-title global utility
   Figma: "Poznaj naszego bloga" Poppins 600 26px/39px centered */

/* ============================================================
   KONSULTACJE — RESPONSIVE: ≤1024px (tablet)
   ============================================================ */
@media (max-width: 1024px) {

  /* Hero: switch to single column, image on top */
  .dn-konsultacje-hero__layout {
    grid-template-columns: 1fr;
    gap: 30px 0;
  }

  .dn-konsultacje-hero__imgwrap {
    width: 100%;
  }

  .dn-konsultacje-hero__img {
    width: 100%;
    height: auto;
    aspect-ratio: 585 / 643;
  }

  .dn-konsultacje-hero__details {
    max-width: 100%;
  }

  /* Steps: allow wrapping on tablet */
  .dn-konsultacje-steps__row {
    flex-wrap: wrap;
    gap: 20px;
  }

  .dn-konsultacje-steps__item {
    flex: 0 0 calc(50% - 10px);
    width: calc(50% - 10px);
  }

  /* Lower layout: single column on tablet */
  .dn-konsultacje-lower__layout {
    grid-template-columns: 1fr;
    gap: 30px 0;
  }

  .dn-konsultacje-product-img__img {
    width: 100%;
    max-width: 100%;
  }

  /* Form: textarea fills container */
  .dn-konsultacje-form__textarea-wrap,
  .dn-konsultacje-form__textarea {
    width: 100%;
  }

  .dn-konsultacje-form__cta-wrap {
    max-width: 100%;
  }
}

/* ============================================================
   KONSULTACJE — RESPONSIVE: ≤768px (mobile portrait)
   Mobile Figma: 393x4359
   ============================================================ */
@media (max-width: 768px) {

  /* Hero section */
  .dn-konsultacje-hero {
    padding-top: 10px;
  }

  /* Image: Mobile 361x361 square, radius=5
     Figma: RECTANGLE "Rectangle 41" (361x361) @ (16,210) */
  .dn-konsultacje-hero__img {
    aspect-ratio: 1 / 1;
    height: auto;
  }

  /* Title: Poppins 600 22px/33px
     Figma: pos=(16,591) size=361x33 */
  .dn-konsultacje-hero__title {
    font-size: 22px;
    line-height: 33px;
    margin-top: 20px;
  }

  /* Price: Poppins 500 18px/27px #014b94
     Figma: pos=(16,634) size=80x27 */
  .dn-konsultacje-hero__price {
    font-size: 18px;
    line-height: 27px;
  }

  /* Steps: 2×2 grid on mobile
     Figma: 01/02 in row 1 (x=16/201), 03/04 in row 2 — step numbers 32px/48px */
  .dn-konsultacje-steps__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .dn-konsultacje-steps__item {
    flex: none;
    width: auto;
  }

  /* Step number: 32px/48px on mobile
     Figma: Poppins 600 32px/48px #e74011 */
  .dn-konsultacje-steps__num {
    font-size: 32px;
    line-height: 48px;
  }

  /* Product image: full width on mobile
     Figma: RECTANGLE "Rectangle 42" (361x358) @ (16,1409) */
  .dn-konsultacje-product-img__img {
    aspect-ratio: 361 / 358;
    max-width: 100%;
  }

  /* Form title: 22px/33px on mobile
     Figma: pos=(16,1797) Poppins 600 22px/33px */
  .dn-konsultacje-form__title {
    font-size: 22px;
    line-height: 33px;
  }

  /* Inputs: 361x45 full width
     Figma: Frame 1 (361x45) @ (16,1960) */
  .dn-konsultacje-form__row {
    flex-direction: column;
    gap: 10px;
  }

  .dn-konsultacje-form__field {
    width: 100%;
    height: 45px;
  }

  /* Textarea: 360x150 full width
     Figma: Frame 36 (360x150) @ (17,2070) */
  .dn-konsultacje-form__textarea-wrap {
    width: 100%;
  }

  .dn-konsultacje-form__textarea {
    width: 100%;
    height: 150px;
  }

  /* CTA: 361x45 full-width
     Figma: Frame 37 (361x45) @ (16,2319) bg=#e74011 */
  .dn-konsultacje-form__cta {
    width: 100%;
    height: 45px;
    font-size: 14px;
    line-height: 21px;
  }

  /* Blog section title: 22px/33px
     Figma: pos=(74,2424) Poppins 600 22px/33px centered */
  .dn-konsultacje-blog .dn-section-title {
    font-size: 22px;
    line-height: 33px;
  }

  .dn-konsultacje-hero__scope-label {
    font-size: 14px;
    line-height: 21px;
  }
  .dn-konsultacje-hero__desc {
    font-size: 14px;
    line-height: 21px;
  }
  .dn-konsultacje-steps__title {
    font-size: 14px;
    line-height: 21px;
  }
  .dn-konsultacje-form__desc {
    font-size: 14px;
    line-height: 21px;
  }

  /* Blog CTA: 361x45 full-width
     Figma: Frame 48 (361x45) @ (16,3524) bg=#014b94 */
  .dn-konsultacje-blog .dn-btn--blue {
    width: 100%;
    justify-content: center;
    height: 45px;
    font-size: 14px;
    line-height: 21px;
  }
}

/* ============================================================
   KONSULTACJE — RESPONSIVE: ≤480px (small mobile)
   ============================================================ */
@media (max-width: 480px) {

  .dn-konsultacje-hero__title,
  .dn-konsultacje-form__title {
    font-size: 22px;
    line-height: 33px;
  }

  .dn-konsultacje-steps__num {
    font-size: 28px;
    line-height: 42px;
  }

  .dn-konsultacje-form__cta {
    font-size: 13px;
    padding: 10px 20px;
  }
}


/* ============================================================
   PAGE: O NAS
   page-o-nas.php
   ============================================================ */

/* ── Variables (local refs) ─────────────────────────────────────────────────
   --dn-bg:     #fdfdfd
   --dn-dark:   #1e1e1c
   --dn-blue:   #014b94
   --dn-orange: #e74011
   --dn-grey:   #aaaaaa
   --dn-border: #eeeeee
   Uses global .dn-container (max-width 1200px, px 120px desktop)
   ──────────────────────────────────────────────────────────────────────── */

/* ============================================================
   1. HERO
   Desktop: bg=#f8f8f8, y=179–835
   ============================================================ */

.dn-onas-hero {
  background-color: #f8f8f8;
  padding-top: 20px;
  padding-bottom: 0;
}

/* Title: (483,240) size=474x72 Poppins 600 48px/72px UPPERCASE centered */
.dn-onas-hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 72px;
  color: #1e1e1c;
  text-align: center;
  text-transform: uppercase;
  margin: 0 0 5px;
}

/* Subtitle: (207,317) size=1027x48 Poppins 300 16px/24px centered, max-width 1027px */
.dn-onas-hero__subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #1e1e1c;
  text-align: center;
  max-width: 1027px;
  margin: 0 auto 30px;
}

/* Hero image: Rectangle 51 (1199x300) @ (120,395) radius=5 */
.dn-onas-hero__image-wrap {
  margin-bottom: 0;
}

.dn-onas-hero__image {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 5px;
}

/* Brand logos bar: Mask group (1379x40) @ (31,795)
   Full-width (outside .dn-container), horizontal row, 40px tall */
.dn-onas-hero__brands {
  background-color: #fdfdfd;
  padding: 0 20px;
  margin-top: 40px;
}

.dn-onas-hero__brands-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  height: 40px;
}

/* Each logo: grayscale (Figma: all logos bg=#1e1e1c) */
.dn-onas-hero__brand-logo {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.dn-onas-hero__brand-logo img {
  display: block;
  max-height: 40px;
  width: auto;
  filter: brightness(0);
  transition: filter 0.2s ease;
}

.dn-onas-hero__brand-logo:hover img {
  filter: none;
}

/* ============================================================
   2. OFFER CARDS
   Desktop: y=935–1395
   ============================================================ */

.dn-onas-offer {
  padding: 60px 0 70px;
}

/* Header row: title LEFT + link RIGHT */
.dn-onas-offer__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}

/* Section title: Poppins 600 26px/39px LEFT */
.dn-onas-offer__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: #1e1e1c;
  margin: 0;
}

/* "Przejdź do sklepu": Poppins 500 16px/24px #014b94 RIGHT */
.dn-onas-offer__link {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #014b94;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 20px;
}

.dn-onas-offer__link:hover {
  text-decoration: underline;
}

/* Slider wrapper */
.dn-onas-offer__slider-wrap {
  position: relative;
}

/* Cards track: show 3, scroll to see more */
.dn-onas-offer__track {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dn-onas-offer__track::-webkit-scrollbar {
  display: none;
}

/* Card: Rectangle 52/54/56 (483x401) bg=#fdfdfd radius=10 stroke=#eeeeee */
.dn-onas-offer__card {
  background-color: #fdfdfd;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 calc((100% - 60px) / 3);
  min-height: 401px;
  display: flex;
  flex-direction: column;
}

/* Card image: 473x270 radius=10 (top corners) */
.dn-onas-offer__card-image {
  display: block;
  width: 100%;
  height: 270px;
  object-fit: cover;
  border-radius: 10px 10px 5px 5px;
}

/* Card body */
.dn-onas-offer__card-body {
  padding: 10px 10px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Card title: Poppins 500 16px/24px */
.dn-onas-offer__card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #1e1e1c;
  margin: 0;
}

/* Card desc: Poppins 300 16px/24px */
.dn-onas-offer__card-desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #1e1e1c;
  margin: 0;
}

/* Arrows: (35x35 bg=#014b94 circles), positioned outside track */
.dn-onas-offer__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  background-color: #014b94;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: background-color 0.2s ease;
}

.dn-onas-offer__arrow:hover {
  background-color: #013a73;
}

/* Left arrow: Frame 42 @ x=65 → offset -55px from container edge */
.dn-onas-offer__arrow--prev {
  left: -55px;
}

/* Right arrow: Frame 23 @ x=1340 */
.dn-onas-offer__arrow--next {
  right: -55px;
}

/* ============================================================
   3. TIMELINE "Nasza historia"
   Desktop: y=1465–3777
   ============================================================ */

.dn-onas-timeline {
  padding: 60px 0 80px;
  background-color: #fdfdfd;
}

/* Title: Poppins 600 26px/39px centered */
.dn-onas-timeline__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: #1e1e1c;
  text-align: center;
  margin: 0 0 60px;
}

/* Track: relative container for the absolute center line */
.dn-onas-timeline__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* Vertical center line: Line 16 (0x2290) stroke=#aaaaaa @ x=720 (center) */
.dn-onas-timeline__line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #aaaaaa;
  transform: translateX(-50%);
  z-index: 0;
}

/* Each entry: 2-column grid */
.dn-onas-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}

/* Dot marker: positioned on the center line
   Outer: Ellipse (21x21) bg=#fdfdfd stroke=#aaaaaa
   Inner: Ellipse (9x9) bg=#e74011 */
.dn-onas-timeline__dot {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translate(-50%, 0);
  z-index: 2;
  width: 21px;
  height: 21px;
}

.dn-onas-timeline__dot-outer {
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background-color: #fdfdfd;
  border: 1px solid #aaaaaa;
  position: absolute;
  top: 0;
  left: 0;
}

.dn-onas-timeline__dot-inner {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #e74011;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Image: 483x310 radius=5 */
.dn-onas-timeline__image {
  display: block;
  width: 100%;
  max-width: 483px;
  height: 310px;
  object-fit: cover;
  border-radius: 5px;
}

/* Year: Poppins 600 26px/39px #e74011 */
.dn-onas-timeline__year {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: #e74011;
  margin-bottom: 8px;
}

/* Desc: Poppins 300 16px/24px #1e1e1c width=482px */
.dn-onas-timeline__desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: #1e1e1c;
  margin: 0;
  max-width: 482px;
}

/* Text RIGHT: image LEFT (col 1), text RIGHT (col 2) */
.dn-onas-timeline__item--text-right .dn-onas-timeline__image-col {
  grid-column: 1;
  padding-right: 60px;
  display: flex;
  justify-content: flex-end;
}

.dn-onas-timeline__item--text-right .dn-onas-timeline__text-col {
  grid-column: 2;
  padding-left: 60px;
}

/* Text LEFT: text LEFT (col 1), image RIGHT (col 2) — swap with order */
.dn-onas-timeline__item--text-left .dn-onas-timeline__image-col {
  grid-column: 2;
  order: 2;
  padding-left: 60px;
}

.dn-onas-timeline__item--text-left .dn-onas-timeline__text-col {
  grid-column: 1;
  order: 1;
  padding-right: 60px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ============================================================
   4. FOUNDER QUOTE
   Desktop: y=3884–4281
   ============================================================ */

.dn-onas-quote {
  padding: 80px 0 60px;
  background-color: #fdfdfd;
  text-align: center;
}

/* Quote: Poppins 300 48px/52.8px centered, max-width 996px */
.dn-onas-quote__text {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 52.8px;
  color: #1e1e1c;
  text-align: center;
  max-width: 996px;
  margin: 0 auto 40px;
  font-style: normal;
  quotes: none;
}

/* Author block: avatar + name + role, stacked centered */
.dn-onas-quote__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Avatar: Ellipse 13 (100x100) — circle */
.dn-onas-quote__avatar {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px; /* 10px gap to name per Figma */
}

/* Name: Poppins 500 16px/24px centered */
.dn-onas-quote__name {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #1e1e1c;
  display: block;
}

/* Role: Poppins 300 14px/21px centered */
.dn-onas-quote__role {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: #1e1e1c;
  display: block;
}

/* ============================================================
   5. BLOG PREVIEW
   Desktop: y=4841–5267
   ============================================================ */

.dn-onas-blog {
  padding: 60px 0 80px;
  background-color: #fdfdfd;
}

/* Section title: Poppins 600 26px/39px centered */
.dn-onas-blog__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: #1e1e1c;
  text-align: center;
  margin: 0 0 62px;
}

/* Grid: 3 × 380px, gap 30px, centered */
.dn-onas-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  justify-content: center;
  margin-bottom: 30px;
}

/* Card: Rectangle 19 (380x334) bg=#fdfdfd radius=5 */
.dn-onas-blog__card {
  background-color: #fdfdfd;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  min-height: 334px;
  display: flex;
  flex-direction: column;
}

.dn-onas-blog__card-image-link {
  display: block;
}

/* Card image: Rectangle 18 (380x240) radius=5 */
.dn-onas-blog__card-image {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 5px;
}

.dn-onas-blog__card-body {
  padding: 10px 10px 15px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

/* Meta row: calendar icon + date */
.dn-onas-blog__card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dn-onas-blog__card-calendar {
  flex-shrink: 0;
}

/* Date: Poppins 300 12px/18px #aaaaaa */
.dn-onas-blog__card-date {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: #aaaaaa;
}

/* Card title: Poppins 500 16px/24px #1e1e1c */
.dn-onas-blog__card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #1e1e1c;
  margin: 0;
}

.dn-onas-blog__card-title a {
  color: inherit;
  text-decoration: none;
}

.dn-onas-blog__card-title a:hover {
  color: #014b94;
}

/* CTA button: Frame 33 (204x50) bg=#014b94 centered
   Poppins 500 16px/24px #fdfdfd, padding 36px 10px */
.dn-onas-blog__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.dn-onas-blog__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 204px;
  height: 50px;
  background-color: #014b94;
  color: #fdfdfd;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  padding: 10px 36px;
  border-radius: 25px;
  transition: background-color 0.2s ease;
}

.dn-onas-blog__cta:hover {
  background-color: #013a73;
  color: #fdfdfd;
}

/* ============================================================
   O NAS RESPONSIVE — Tablet ≤1024px
   ============================================================ */

@media (max-width: 1024px) {
  .dn-onas-hero__title {
    font-size: 40px;
    line-height: 56px;
  }

  .dn-onas-hero__image {
    height: 240px;
  }

  .dn-onas-hero__brands {
    padding: 0;
    overflow: hidden;
  }

  .dn-onas-hero__brands-inner {
    flex-wrap: wrap;
    height: auto;
    justify-content: center;
    gap: 20px;
  }

  .dn-onas-offer__card {
    flex: 0 0 calc((100% - 30px) / 2);
  }

  .dn-onas-offer__arrow--prev {
    left: -20px;
  }

  .dn-onas-offer__arrow--next {
    right: -20px;
  }

  .dn-onas-timeline__item--text-right .dn-onas-timeline__image-col,
  .dn-onas-timeline__item--text-left .dn-onas-timeline__image-col {
    padding-left: 30px;
    padding-right: 30px;
  }

  .dn-onas-timeline__item--text-right .dn-onas-timeline__text-col,
  .dn-onas-timeline__item--text-left .dn-onas-timeline__text-col {
    padding-left: 30px;
    padding-right: 30px;
  }

  .dn-onas-timeline__image {
    height: 240px;
  }

  .dn-onas-quote__text {
    font-size: 36px;
    line-height: 42px;
  }

  .dn-onas-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dn-onas-blog__card {
    width: 100%;
  }
}

/* ============================================================
   O NAS RESPONSIVE — Mobile ≤768px
   ============================================================ */

@media (max-width: 768px) {
  /* Hero: title 32px/35.2px (Mobile Figma: pos=(16,228) 32px) */
  .dn-onas-hero__title {
    font-size: 32px;
    line-height: 35.2px;
  }

  /* Subtitle: 14px/21px (Mobile Figma: 14px) */
  .dn-onas-hero__subtitle {
    font-size: 14px;
    line-height: 21px;
  }

  /* Hero image: 358x358 square (Mobile Figma: Rectangle 51 358x358 @ (16,419)) */
  .dn-onas-hero__image {
    height: 358px;
    border-radius: 5px;
    max-width: 358px;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }

  /* Brand logos: 3 per row */
  .dn-onas-hero__brand-logo {
    flex: 0 0 calc(33% - 10px);
  }

  /* Offer cards: 1 column mobile, scroll horizontally */
  .dn-onas-offer__card {
    flex: 0 0 85%;
    min-height: 389px;
  }

  /* Card image: 351x270 mobile (Mobile Figma: Rectangle 53 351x270) */
  .dn-onas-offer__card-image {
    height: 270px;
  }

  /* Arrows: static, side by side below cards (Mobile Figma: Group 54 80x35 @ (157,1364)) */
  .dn-onas-offer__slider-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .dn-onas-offer__track {
    order: 1;
    width: 100%;
  }

  .dn-onas-offer__arrow {
    position: static;
    transform: none;
  }

  .dn-onas-offer__arrow--prev,
  .dn-onas-offer__arrow--next {
    order: 2;
    margin-top: 20px;
  }

  .dn-onas-offer__slider-wrap {
    flex-wrap: wrap;
  }

  .dn-onas-offer__nav {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    order: 2;
    width: 100%;
  }

  /* Timeline: single column, line at left x=36
     Mobile Figma: Line 16 (0x3097) @ (36,1524) */
  .dn-onas-timeline__track {
    gap: 60px;
    padding-left: 51px;
  }

  .dn-onas-timeline__line {
    left: 36px;
    transform: none;
  }

  /* All items: column layout (image above text) */
  .dn-onas-timeline__item,
  .dn-onas-timeline__item--text-right,
  .dn-onas-timeline__item--text-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    grid-template-columns: unset;
  }

  .dn-onas-timeline__item--text-right .dn-onas-timeline__image-col,
  .dn-onas-timeline__item--text-left .dn-onas-timeline__image-col {
    grid-column: unset;
    order: 1;
    padding: 0;
    justify-content: flex-start;
  }

  .dn-onas-timeline__item--text-right .dn-onas-timeline__text-col,
  .dn-onas-timeline__item--text-left .dn-onas-timeline__text-col {
    grid-column: unset;
    order: 2;
    padding: 0;
    align-items: flex-start;
  }

  /* Dot: left side aligned to line
     Mobile Figma: dots (21x21) @ x=26, track padding-left=51px → offset=-34px */
  .dn-onas-timeline__dot {
    left: -34px;
    top: 10px;
  }

  /* Timeline image: 310x198 (Mobile Figma: Rectangle 58 310x198) */
  .dn-onas-timeline__image {
    width: 100%;
    max-width: 310px;
    height: 198px;
  }

  /* Year: 22px/33px (Mobile Figma: 22px/33px) */
  .dn-onas-timeline__year {
    font-size: 22px;
    line-height: 33px;
  }

  /* Desc: 14px/21px (Mobile Figma: 14px/21px) */
  .dn-onas-timeline__desc {
    font-size: 14px;
    line-height: 21px;
    max-width: 310px;
  }

  /* Quote: 32px/35.2px (Mobile Figma: pos=(16,4681) 32px/35.2px) */
  .dn-onas-quote__text {
    font-size: 32px;
    line-height: 35.2px;
  }

  /* Avatar: 80x80 (Mobile Figma: Ellipse 13 80x80) */
  .dn-onas-quote__avatar {
    width: 80px;
    height: 80px;
  }

  .dn-onas-quote__name {
    font-size: 14px;
    line-height: 21px;
  }
  .dn-onas-quote__role {
    font-size: 12px;
    line-height: 18px;
  }

  /* Blog: 1 column (Mobile Figma: Blog-mobile 361x334 stacked) */
  .dn-onas-blog__grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .dn-onas-blog__card {
    width: 100%;
    min-height: 334px;
  }

  /* Blog CTA: full-width 361x45 (Mobile Figma: Frame 48 361x45) */
  .dn-onas-blog__cta-wrap {
    display: block;
  }

  .dn-onas-blog__cta {
    display: flex;
    width: 100%;
    height: 45px;
    min-width: unset;
    font-size: 14px;
    line-height: 21px;
  }

  .dn-onas-offer__title {
    font-size: 22px;
    line-height: 33px;
  }

  .dn-onas-offer__card-title {
    font-size: 14px;
    line-height: 21px;
  }

  .dn-onas-offer__card-desc {
    font-size: 14px;
    line-height: 21px;
  }

  .dn-onas-timeline__title {
    font-size: 22px;
    line-height: 33px;
  }

  .dn-onas-blog__title {
    font-size: 22px;
    line-height: 33px;
  }
}

/* ── O nas Responsive — Small Mobile ≤480px ── */
@media (max-width: 480px) {
  .dn-onas-hero__title {
    font-size: 32px;
    line-height: 35.2px;
  }

  .dn-onas-timeline__track {
    padding-left: 48px;
  }

  .dn-onas-quote__text {
    font-size: 32px;
    line-height: 35.2px;
  }

  .dn-onas-timeline__dot {
    left: -22px;
  }
}

/* ============================================================
   PAGE: BLOG ARCHIVE (home.php)
   File: /tmp/blog-css.css  —  DO NOT merge into custom.css
   Prefix: dn-blog-archive__*
   Reuses: .dn-blog__card, .dn-blog__grid, .dn-blog__meta,
           .dn-blog__imgwrap, .dn-blog__title (already in custom.css)
   Sections:
     1. Breadcrumb        — .dn-breadcrumb (shared, already defined)
     2. Featured post     — .dn-blog-archive__featured-*
     3. Sidebar           — .dn-blog-archive__sidebar-*
     4. Remaining grid    — .dn-blog-archive__grid
     5. Pagination        — .dn-blog-archive__pagination*
   Breakpoints: 1024px | 768px | 480px
   ============================================================ */


/* ─────────────────────────────────────────────
   1. SECTION WRAPPER + SHARED SECTION TITLE
   Figma: title Poppins 600 26px/39px #1e1e1c, left-aligned
   (different from .dn-section-title which is centered)
─────────────────────────────────────────────── */

.dn-blog-archive__featured-section,
.dn-blog-archive__grid-section {
  padding: 40px 0 60px;
}

/* Section headings — left-aligned (not centered like homepage) */
.dn-blog-archive__section-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  margin: 0 0 20px;
}


/* ─────────────────────────────────────────────
   2. FEATURED POST LAYOUT
   Figma Desktop: two-column grid
     LEFT:  featured image 790px wide
     RIGHT: sidebar 380px wide
   Gap between columns: ~30px (1200 - 790 - 380 = 30px)
─────────────────────────────────────────────── */

.dn-blog-archive__featured-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 30px;
  align-items: start;
}

/* Featured image link — Figma: 790x432 radius=5 */
.dn-blog-archive__featured-imgwrap {
  display: block;
  border-radius: 5px;
  overflow: hidden;
  line-height: 0; /* collapse inline gap */
}

.dn-blog-archive__featured-imgwrap img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 790 / 432;
  object-fit: cover;
  border-radius: 5px;
  transition: opacity 0.2s ease;
}

.dn-blog-archive__featured-imgwrap:hover img {
  opacity: 0.92;
}

/* Date meta row — inherits .dn-blog__meta styles, add top margin */
.dn-blog-archive__featured-meta {
  margin-top: 10px;
  margin-bottom: 4px;
}

/* Featured post title — Figma: Poppins 500 20px/30px #1e1e1c */
.dn-blog-archive__featured-title {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: var(--dn-dark);
  text-decoration: none;
  margin-top: 4px;
  transition: color 0.15s ease;
}

.dn-blog-archive__featured-title:hover {
  color: var(--dn-blue);
}


/* ─────────────────────────────────────────────
   3. SIDEBAR "Popularne wpisy"
   Figma: 380x582 bg=#f8f8f8 radius=5
          title Poppins 600 16px/24px #1e1e1c
          links Poppins 300 16px/24px #1e1e1c width=340
          separators 341px stroke=#eeeeee
─────────────────────────────────────────────── */

.dn-blog-archive__sidebar {
  background: var(--dn-gray-bg);   /* #f8f8f8 */
  border-radius: 5px;
  padding: 20px;
  min-height: 582px;               /* Figma height on desktop */
  box-sizing: border-box;
}

/* Sidebar heading — Poppins 600 16px/24px */
.dn-blog-archive__sidebar-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin: 0 0 16px;
}

/* Separator lines between sidebar items */
.dn-blog-archive__sidebar-sep {
  border: none;
  border-top: 1px solid #eeeeee;
  margin: 0;
  width: 100%;
}

/* Sidebar post links — Poppins 300 16px/24px #1e1e1c */
.dn-blog-archive__sidebar-link {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-decoration: none;
  padding: 20px 0;
  transition: color 0.15s ease;
}

.dn-blog-archive__sidebar-link:hover {
  color: var(--dn-blue);
}


/* ─────────────────────────────────────────────
   4. REMAINING POSTS GRID
   Figma: 3 columns, cards 380x334, gap ~30px
   Reuses .dn-blog__grid layout (3 cols from homepage)
   Additional modifier for archive-specific overrides
─────────────────────────────────────────────── */

.dn-blog-archive__grid {
  /* The homepage .dn-blog__grid already sets 3 cols at 380px each.
     This class adds top breathing room on the archive page. */
  margin-top: 0;
}


/* ─────────────────────────────────────────────
   5. PAGINATION
   Figma: centered
          format:  < 1 2 3 4 ... 10 >
          active:  Poppins 500 16px/24px #014b94
          inactive: Poppins 300 16px/24px #aaaaaa
          arrows:  Poppins 500 16px/24px #014b94
          gap between numbers: 11px, between sections: 20px
─────────────────────────────────────────────── */

.dn-blog-archive__pagination-wrapper {
  padding: 20px 0 60px;
}

.dn-blog-archive__pagination {
  display: flex;
  justify-content: center;
}

/* WP wraps pagination in .nav-links */
.dn-blog-archive__pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  justify-content: center;
}

/* All pagination items — base */
.dn-blog-archive__pagination .page-numbers {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-gray-text);   /* #aaaaaa inactive */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 0 2px;
  transition: color 0.15s ease;
}

.dn-blog-archive__pagination .page-numbers:hover {
  color: var(--dn-blue);
}

/* Active / current page */
.dn-blog-archive__pagination .page-numbers.current {
  font-weight: 500;
  color: var(--dn-blue);
}

/* Ellipsis dots */
.dn-blog-archive__pagination .page-numbers.dots {
  color: var(--dn-gray-text);
  cursor: default;
  pointer-events: none;
}

/* Prev / Next arrows — larger gap from number cluster */
.dn-blog-archive__pagination .prev.page-numbers,
.dn-blog-archive__pagination .next.page-numbers {
  font-weight: 500;
  font-size: 18px;  /* slightly larger for arrow glyphs */
  color: var(--dn-blue);
  padding: 0 6px;
}

/* Extra spacing: gap between arrow and number cluster (20px Figma) */
.dn-blog-archive__pagination .prev.page-numbers {
  margin-right: 9px;  /* 11px (flex gap) + 9px = 20px */
}

.dn-blog-archive__pagination .next.page-numbers {
  margin-left: 9px;   /* same */
}


/* ================================================================
   RESPONSIVE — 1024px (tablet landscape / small laptop)
   Featured: switch to single column stacked layout
================================================================ */

@media (max-width: 1024px) {

  .dn-blog-archive__featured-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .dn-blog-archive__featured-imgwrap img {
    aspect-ratio: 16 / 9;
  }

  .dn-blog-archive__sidebar {
    min-height: auto;
  }

  /* 2-column grid for remaining posts at tablet */
  .dn-blog-archive__grid.dn-blog__grid {
    grid-template-columns: repeat( 2, 1fr );
  }

}


/* ================================================================
   RESPONSIVE — 768px (tablet portrait)
================================================================ */

@media (max-width: 768px) {

  .dn-blog-archive__section-title {
    font-size: 22px;
    line-height: 33px;
  }

  .dn-blog-archive__featured-section,
  .dn-blog-archive__grid-section {
    padding: 30px 0 40px;
  }

  /* Featured card on mobile mirrors homepage card dimensions:
     Figma mobile: 361x334 card, image 361x240 */
  .dn-blog-archive__featured-imgwrap img {
    aspect-ratio: 361 / 240;
  }

  .dn-blog-archive__featured-title {
    font-size: 16px;
    line-height: 24px;
  }

  /* Sidebar — Figma mobile: 361x488, title 14px/21px, links 14px/21px */
  .dn-blog-archive__sidebar {
    padding: 20px;
    min-height: 488px;
  }

  .dn-blog-archive__sidebar-title {
    font-size: 14px;
    line-height: 21px;
  }

  .dn-blog-archive__sidebar-link {
    font-size: 14px;
    line-height: 21px;
    padding: 12px 0;
  }

  /* 1-column grid on mobile */
  .dn-blog-archive__grid.dn-blog__grid {
    grid-template-columns: 1fr;
  }

  .dn-blog-archive__pagination-wrapper {
    padding: 16px 0 48px;
  }

}


/* ================================================================
   RESPONSIVE — 480px (small phones)
================================================================ */

@media (max-width: 480px) {

  .dn-blog-archive__section-title {
    font-size: 22px;
    line-height: 33px;
  }

  .dn-blog-archive__featured-section,
  .dn-blog-archive__grid-section {
    padding: 24px 0 32px;
  }

  .dn-blog-archive__sidebar {
    min-height: auto;
  }

  .dn-blog-archive__pagination .nav-links {
    gap: 8px;
  }

  .dn-blog-archive__pagination .page-numbers {
    font-size: 14px;
  }

  .dn-blog-archive__pagination .prev.page-numbers,
  .dn-blog-archive__pagination .next.page-numbers {
    font-size: 16px;
    padding: 0 4px;
    margin-right: 4px;
    margin-left: 4px;
  }

}

/* ============================================================
   PAGE: BLOG SINGLE POST
   File:    /tmp/blog-wpis-css.css
   Prefix:  .dn-single__*  (article layout)
            .dn-blog-sidebar__*  (sidebar — shared with blog archive / home.php)
   Figma:   Desktop 1440x2296, Mobile 393px
   Desktop first, responsive at 1024px / 768px / 480px
   Variables from custom.css:
     --dn-bg:        #fdfdfd
     --dn-dark:      #1e1e1c
     --dn-blue:      #014b94
     --dn-orange:    #e74011
     --dn-gray-text: #aaaaaa
     --dn-gray-bg:   #f8f8f8
   ============================================================ */


/* ─────────────────────────────────────────────
   SECTION: LAYOUT
   Two-column: article 790px left + sidebar 380px right
   Figma: article x=120, sidebar x=940, gap≈30px on 1200px container
───────────────────────────────────────────── */

/* Wrapper section — top padding pushes content below breadcrumb */
.dn-single {
  padding: 0 0 80px;
  background: var(--dn-bg);
}

/* Single-hero holds breadcrumb, consistent with other pages */
.dn-single-hero {
  padding: 20px 0 0;
  background: var(--dn-bg);
}

/* Two-column flex grid */
.dn-single__layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* LEFT column: article — Figma w=790px, adjusted for 1160px container */
.dn-single__article {
  flex: 1;
  min-width: 0;
  max-width: 790px;
}

/* RIGHT column: sidebar — Figma w=380px */
.dn-single__sidebar {
  flex: 0 0 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}


/* ─────────────────────────────────────────────
   SECTION: ARTICLE
   Featured image, meta, title, content, back link
───────────────────────────────────────────── */

/* Featured image: 790x432 radius=5 — Figma y=240 */
.dn-single__featured-img {
  width: 100%;
  margin-bottom: 10px;
  /* Figma: gap image bottom (y=672) to date (y=682) = 10px */
}

.dn-single__featured-img-el {
  display: block;
  width: 100%;
  height: 432px;
  object-fit: cover;
  border-radius: 5px;
}

/* Date meta: calendar icon + Poppins 300 12px/18px #aaaaaa — Figma y=682 */
.dn-single__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--dn-gray-text);
  margin-bottom: 8px;
  /* Figma: date y=682, title y=703, gap≈21px; image is 18px high, ~3px gap below */
}

.dn-single__meta time {
  color: var(--dn-gray-text);
}

/* Post title: Poppins 600 26px/39px #1e1e1c — Figma y=703 width=790 */
.dn-single__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  margin: 0 0 20px;
  /* Figma: title bottom y=820, content y=840 → 20px gap */
}


/* ─────────────────────────────────────────────
   SECTION: POST CONTENT
   Poppins 300 16px/24px #1e1e1c width=790
   Handles paragraphs, headings, images from the_content()
───────────────────────────────────────────── */

.dn-single__content {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  max-width: 100%;
  margin-bottom: 40px;
}

/* Paragraphs */
.dn-single__content p {
  margin: 0 0 20px;
}

.dn-single__content p:last-child {
  margin-bottom: 0;
}

/* Headings within content */
/* Mid-article subheading: Poppins 500 18px/27px — Figma y=1453 width=508 */
.dn-single__content h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: var(--dn-dark);
  margin: 38px 0 16px;
}

.dn-single__content h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin: 28px 0 12px;
}

.dn-single__content h4,
.dn-single__content h5,
.dn-single__content h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: var(--dn-dark);
  margin: 20px 0 10px;
}

/* In-content images: radius=5 — Figma: mid-article image 790x251 y=1177 */
.dn-single__content img {
  border-radius: 5px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px 0;
}

/* Lists */
.dn-single__content ul,
.dn-single__content ol {
  padding-left: 24px;
  margin: 0 0 20px;
}

.dn-single__content li {
  margin-bottom: 6px;
}

/* Links */
.dn-single__content a {
  color: var(--dn-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.dn-single__content a:hover {
  opacity: 0.75;
}

/* Blockquotes */
.dn-single__content blockquote {
  border-left: 3px solid var(--dn-blue);
  padding-left: 20px;
  margin: 24px 0;
  font-style: italic;
  color: #555;
}

/* Strong */
.dn-single__content strong,
.dn-single__content b {
  font-weight: 600;
}


/* ─────────────────────────────────────────────
   SECTION: BACK LINK
   "← Powrót do bloga" Poppins 500 16px/24px #014b94 — Figma y=1858
───────────────────────────────────────────── */

.dn-single__back {
  display: block;
  text-align: right;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-blue);
  text-decoration: none;
  transition: opacity 0.2s;
  margin-top: 20px;
}

.dn-single__back:hover {
  opacity: 0.75;
}


/* ─────────────────────────────────────────────
   SECTION: SIDEBAR — POPULARNE WPISY
   Shared class .dn-blog-sidebar__* (also used on blog archive and home.php)
   Figma: 380x582 bg=#f8f8f8 radius=5, x=940 y=240
───────────────────────────────────────────── */

.dn-blog-sidebar__popular {
  background: var(--dn-gray-bg);   /* #f8f8f8 */
  border-radius: 5px;
  padding: 20px;
  /* Figma box 380x582: inner starts at x=960 (padding 20px from 940) */
}

/* Title: "Popularne wpisy" Poppins 600 16px/24px #1e1e1c — Figma y=260 */
.dn-blog-sidebar__popular-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin: 0 0 25px;
  /* Figma: title y=260, first item y=309, gap=49px; 24px + 25px bottom ≈ works */
}

/* List: reset default ul styles */
.dn-blog-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Post link items: Poppins 300 16px/24px #1e1e1c — Figma every 88px from y=309 */
.dn-blog-sidebar__item {
  padding: 10px 0;
}

/* Separator line: 341px stroke=#eeeeee — Figma between items */
.dn-blog-sidebar__separator {
  display: block;
  height: 1px;
  background: #eeeeee;
  margin: 0;
  /* Figma: 341px wide = 380 - 20 - 20 padding, natural width from parent padding */
}

/* Post links */
.dn-blog-sidebar__link {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-decoration: none;
  display: block;
  transition: color 0.2s;
}

.dn-blog-sidebar__link:hover {
  color: var(--dn-blue);
}


/* ─────────────────────────────────────────────
   SECTION: SIDEBAR — CTA CARD
   Figma: 380x413 radius=5, bg image + dark overlay
   x=940 y=852
───────────────────────────────────────────── */

.dn-blog-sidebar__cta {
  position: relative;
  width: 380px;
  min-height: 413px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Background image layer */
.dn-blog-sidebar__cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Dark overlay over background image */
.dn-blog-sidebar__cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1;
}

/* Content wrapper above overlay */
.dn-blog-sidebar__cta-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 30px;
  gap: 20px;
  width: 100%;
}

/* CTA heading: Poppins 600 20px/30px #fdfdfd centered width=320 — Figma y=882 */
.dn-blog-sidebar__cta-heading {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--dn-bg);  /* #fdfdfd */
  max-width: 320px;
  margin: 0;
}

/* CTA description: Poppins 300 16px/24px #fdfdfd centered width=320 — Figma y=982 */
.dn-blog-sidebar__cta-desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-bg);
  max-width: 320px;
  margin: 0;
}

/* CTA Button: 242x50 bg=#e74011, calendar-search icon + Poppins 500 16px/24px #fdfdfd — Figma y=1079 */
.dn-blog-sidebar__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 242px;
  height: 50px;
  background: var(--dn-orange);  /* #e74011 */
  color: var(--dn-bg);           /* #fdfdfd */
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  border-radius: 25px;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.dn-blog-sidebar__cta-btn:hover {
  opacity: 0.88;
}


/* ─────────────────────────────────────────────
   RESPONSIVE — 1024px (narrower desktop, sidebar stacks)
───────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* Reduce fixed widths to flex proportions */
  .dn-single__article {
    flex: 1 1 auto;
    min-width: 0;
  }

  .dn-single__sidebar {
    flex: 0 0 320px;
    min-width: 0;
  }

  .dn-single__featured-img-el {
    height: 360px;
  }

  .dn-blog-sidebar__cta {
    width: 100%;
  }
}


/* ─────────────────────────────────────────────
   RESPONSIVE — 768px (stack to single column)
───────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Stack columns vertically */
  .dn-single__layout {
    flex-direction: column;
    gap: 40px;
  }

  .dn-single__article,
  .dn-single__sidebar {
    flex: 1 1 100%;
    width: 100%;
  }

  /* Featured image — Figma mobile: 361x198 radius=5 */
  .dn-single__featured-img-el {
    height: 198px;
  }

  /* Title — Figma mobile: Poppins 500 22px/33px (NOT 600) width=361 */
  .dn-single__title {
    font-weight: 500;
    font-size: 22px;
    line-height: 33px;
    margin-bottom: 24px;
  }

  /* Content — Figma mobile: Poppins 300 14px/21px width=361 */
  .dn-single__content {
    font-size: 14px;
    line-height: 21px;
  }

  .dn-single__content h2 {
    font-size: 16px;
    line-height: 24px;
  }

  .dn-single__content h3 {
    font-size: 15px;
    line-height: 22px;
  }

  /* Mid-article image — Figma mobile: 361x251 radius=5 */
  .dn-single__content img {
    border-radius: 5px;
  }

  /* Back link: Figma mobile 16px/24px (same as desktop) */
  .dn-single__back {
    font-size: 16px;
    line-height: 24px;
  }

  /* Sidebar popular — Figma mobile: 361x488 bg=#f8f8f8 radius=5 */
  .dn-blog-sidebar__popular {
    border-radius: 5px;
    padding: 20px;
  }

  /* Sidebar popular title — Figma mobile: Poppins 600 14px/21px */
  .dn-blog-sidebar__popular-title {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 18px;
  }

  /* Sidebar links — Figma mobile: Poppins 300 14px/21px width=321 */
  .dn-blog-sidebar__link {
    font-size: 14px;
    line-height: 21px;
  }

  /* Separator — Figma mobile: 322px */
  .dn-blog-sidebar__separator {
    /* inherits full width from parent with padding 16px each side: 361-32=329px ≈ 322px */
  }

  /* Sidebar CTA card — Figma mobile: 361x413 radius=5 */
  .dn-blog-sidebar__cta {
    width: 100%;
    min-height: 413px;
  }

  /* CTA heading — Figma mobile: Poppins 600 18px/27px centered width=301 */
  .dn-blog-sidebar__cta-heading {
    font-size: 18px;
    line-height: 27px;
    max-width: 301px;
  }

  /* CTA description — Figma mobile: Poppins 300 14px/21px centered width=301 */
  .dn-blog-sidebar__cta-desc {
    font-size: 14px;
    line-height: 21px;
    max-width: 301px;
  }

  /* CTA button — Figma mobile: 320x45 bg=#e74011, Poppins 500 14px/21px */
  .dn-blog-sidebar__cta-btn {
    width: 320px;
    height: 45px;
    font-size: 14px;
    line-height: 21px;
  }

  .dn-single {
    padding-bottom: 48px;
  }
}


/* ─────────────────────────────────────────────
   RESPONSIVE — 480px (small phones)
───────────────────────────────────────────── */

@media (max-width: 480px) {
  .dn-single-hero {
    padding: 12px 0 0;
  }

  /* Article image — tighter height on very small screens */
  .dn-single__featured-img-el {
    height: 180px;
  }

  /* Title slightly smaller */
  .dn-single__title {
    font-size: 20px;
    line-height: 30px;
  }

  /* Content */
  .dn-single__content {
    font-size: 14px;
    line-height: 21px;
  }

  /* CTA button full-width on smallest screens */
  .dn-blog-sidebar__cta-btn {
    width: 100%;
    max-width: 320px;
    padding: 0 16px;
  }

  .dn-blog-sidebar__cta-inner {
    padding: 24px 20px;
  }

  .dn-single {
    padding-bottom: 40px;
  }
}

/* ===== PAGE: SKLEP B2C (SHOP) ===== */

/* ----------------------------------------
   GLOBAL SHOP PAGE
---------------------------------------- */
.dn-shop-page {
  background-color: var(--dn-bg);
  font-family: 'Poppins', sans-serif;
  min-height: 100vh;
}

.dn-shop-page .dn-container {
  max-width: 1200px;
  padding: 0 20px;
  margin: 0 auto;
}

/* ----------------------------------------
   BREADCRUMB
---------------------------------------- */
.dn-shop-page .woocommerce-breadcrumb,
.dn-shop-page .breadcrumb {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-gray-text);
  padding: 24px 0 16px;
  margin: 0;
}

.dn-shop-page .woocommerce-breadcrumb a,
.dn-shop-page .breadcrumb a {
  color: var(--dn-gray-text);
  text-decoration: none;
}

.dn-shop-page .woocommerce-breadcrumb a:hover,
.dn-shop-page .breadcrumb a:hover {
  color: var(--dn-dark);
}

/* ----------------------------------------
   LAYOUT: SIDEBAR + MAIN
---------------------------------------- */
.dn-shop-layout {
  display: grid;
  grid-template-columns: 278px 1fr;
  gap: 30px;
  align-items: start;
  padding: 32px 0 64px;
}

/* ----------------------------------------
   SIDEBAR
---------------------------------------- */
.dn-shop-sidebar {
  position: sticky;
  top: 24px;
}

.dn-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dn-sidebar-block {
  padding: 20px 0;
  border-bottom: 1px solid #dddddd;
}

.dn-sidebar-block:first-child {
  padding-top: 0;
}

.dn-sidebar-block:last-child {
  border-bottom: none;
}

.dn-sidebar-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin: 0 0 14px 0;
  padding: 0;
}

/* Category list */
.dn-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dn-cat-list li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dn-cat-list a {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s ease;
}

.dn-cat-list a:hover,
.dn-cat-list .current-cat > a {
  color: var(--dn-blue);
}

.dn-cat-list .count {
  color: var(--dn-gray-text);
  font-size: 13px;
}

/* WooCommerce Layered Nav (checkbox filters) */
.dn-shop-sidebar .widget_layered_nav ul,
.dn-shop-sidebar .woocommerce-widget-layered-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dn-shop-sidebar .widget_layered_nav ul li,
.dn-shop-sidebar .woocommerce-widget-layered-nav-list__item {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dn-shop-sidebar .widget_layered_nav ul li a,
.dn-shop-sidebar .woocommerce-widget-layered-nav-list__item a {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-left: 25px;
  transition: color 0.2s ease;
}

.dn-shop-sidebar .widget_layered_nav ul li a::before,
.dn-shop-sidebar .woocommerce-widget-layered-nav-list__item a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  border-radius: 2px;
  border: 1px solid var(--dn-dark);
  background-color: #ffffff;
  box-sizing: border-box;
  flex-shrink: 0;
}

.dn-shop-sidebar .widget_layered_nav ul li.chosen a::before,
.dn-shop-sidebar .woocommerce-widget-layered-nav-list__item--chosen a::before {
  border-color: var(--dn-blue);
}

.dn-shop-sidebar .widget_layered_nav ul li.chosen a::after,
.dn-shop-sidebar .woocommerce-widget-layered-nav-list__item--chosen a::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  background-color: #014b94;
  border-radius: 1px;
}

.dn-shop-sidebar .widget_layered_nav ul li a:hover,
.dn-shop-sidebar .woocommerce-widget-layered-nav-list__item a:hover {
  color: var(--dn-blue);
}

.dn-shop-sidebar .widget_layered_nav .count,
.dn-shop-sidebar .woocommerce-widget-layered-nav-list__item .count {
  color: var(--dn-gray-text);
  font-size: 13px;
  margin-left: auto;
}

/* WooCommerce Price Filter */
.dn-shop-sidebar .widget_price_filter .price_slider_wrapper,
.dn-shop-sidebar .woocommerce-widget-price-filter {
  padding-top: 8px;
}

.dn-shop-sidebar .widget_price_filter .ui-slider,
.dn-shop-sidebar .price_slider {
  width: 100%;
  height: 6px;
  background-color: #eeeeee;
  border-radius: 5px;
  position: relative;
  margin: 20px 0 16px;
  border: none;
}

.dn-shop-sidebar .widget_price_filter .ui-slider-range,
.dn-shop-sidebar .price_slider .ui-slider-range {
  background-color: var(--dn-blue);
  height: 100%;
  border-radius: 5px;
  position: absolute;
  top: 0;
}

.dn-shop-sidebar .widget_price_filter .ui-slider-handle,
.dn-shop-sidebar .price_slider .ui-slider-handle {
  width: 12px;
  height: 12px;
  background-color: var(--dn-gray-text);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  border: none;
  outline: none;
  margin-left: -6px;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}

.dn-shop-sidebar .widget_price_filter .ui-slider-handle:hover,
.dn-shop-sidebar .price_slider .ui-slider-handle:hover,
.dn-shop-sidebar .widget_price_filter .ui-slider-handle:focus,
.dn-shop-sidebar .price_slider .ui-slider-handle:focus {
  background-color: var(--dn-blue);
}

.dn-shop-sidebar .widget_price_filter .price_label,
.dn-shop-sidebar .price_label {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dn-shop-sidebar .widget_price_filter .price_label span {
  color: var(--dn-blue);
  font-weight: 500;
}

.dn-shop-sidebar .widget_price_filter button,
.dn-shop-sidebar .price_slider_amount button {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #ffffff;
  background-color: var(--dn-blue);
  border: none;
  border-radius: 20px;
  padding: 6px 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dn-shop-sidebar .widget_price_filter button:hover,
.dn-shop-sidebar .price_slider_amount button:hover {
  background-color: #013a72;
}

/* Active filter chips bar (above products) */
.dn-active-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dn-active-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.dn-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #eeeeee;
  border-radius: 25px;
  padding: 4px 12px;
  height: 28px;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--dn-dark);
  text-decoration: none;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  white-space: nowrap;
}

.dn-filter-chip:hover {
  background-color: #e0e0e0;
  color: var(--dn-dark);
}

.dn-filter-chip svg {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.dn-filter-chip:hover svg {
  opacity: 1;
}

.dn-active-filters__clear {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  margin-left: 4px;
}

.dn-active-filters__clear:hover {
  color: var(--dn-blue);
}

/* Sidebar chosen item highlight */
.dn-shop-sidebar .woocommerce-widget-layered-nav-list__item--chosen a {
  color: var(--dn-blue);
  font-weight: 500;
}

/* ----------------------------------------
   MAIN CONTENT AREA
---------------------------------------- */
.dn-shop-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ----------------------------------------
   TOP BAR (results count + sort)
---------------------------------------- */
.dn-shop-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dn-results-count {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-gray-text);
}

.dn-sort-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dn-sort-wrap label,
.dn-sort-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  white-space: nowrap;
}

.dn-sort-wrap select,
.dn-sort-wrap .woocommerce-ordering select,
.woocommerce .dn-shop-main .woocommerce-ordering select {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  background-color: #f8f8f8;
  border: 1px solid #eeeeee;
  border-radius: 25px;
  padding: 12px 20px;
  width: 288px;
  height: 50px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e1e1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.dn-sort-wrap select:focus,
.woocommerce .dn-shop-main .woocommerce-ordering select:focus {
  border-color: var(--dn-blue);
}

.dn-sort-wrap .woocommerce-ordering {
  margin: 0;
  float: none;
}

/* Mobile filter button (hidden on desktop) */
.dn-mobile-filter-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 45px;
  background-color: #014b94;
  border: none;
  border-radius: 25px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #fdfdfd;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dn-mobile-filter-btn:hover {
  background-color: var(--dn-blue);
}

.dn-mobile-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e74011;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  margin-left: 2px;
}

.dn-sidebar-close {
  display: none;
}

/* Sidebar apply button (mobile only) */
.dn-sidebar-apply {
  display: none;
}

/* ----------------------------------------
   PRODUCTS GRID
---------------------------------------- */
.dn-products-grid,
.woocommerce .dn-shop-main ul.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dn-products-grid::before,
.dn-products-grid::after,
.woocommerce .dn-shop-main ul.products::before,
.woocommerce .dn-shop-main ul.products::after {
  display: none;
}

/* ----------------------------------------
   PRODUCT CARD
---------------------------------------- */
.dn-product-card,
.woocommerce .dn-shop-main ul.products li.product {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.dn-card-inner {
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.dn-card-inner:hover {
  box-shadow: 0 8px 32px rgba(1, 75, 148, 0.10);
  transform: translateY(-2px);
}

/* Card image wrap */
.dn-card-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  overflow: hidden;
  flex-shrink: 0;
}

.dn-card-img-link {
  display: block;
  width: 100%;
  height: 100%;
}

.dn-card-img,
.dn-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.dn-card-inner:hover .dn-card-img,
.dn-card-inner:hover .dn-card-image-wrap img {
  transform: scale(1.04);
}

/* Badges */
.dn-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  z-index: 2;
}

.dn-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 10px;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  color: #ffffff;
  white-space: nowrap;
}

.dn-badge--new,
.dn-badge--nowosci {
  background-color: #014b94;
}

.dn-badge--new-light {
  background-color: #85b8ec;
  color: #ffffff;
}

.dn-badge--bestseller {
  background-color: #09d5cb;
  color: #ffffff;
}

.dn-badge--sale,
.dn-badge--promocja {
  background-color: #d50909;
  color: #ffffff;
}

.dn-badge--nowosci-green {
  background-color: #1ad509;
  color: #ffffff;
}

.dn-badge--used,
.dn-badge--uzywane {
  background-color: transparent;
  border: 1px solid var(--dn-dark);
  color: var(--dn-dark);
}

/* WooCommerce sale badge override */
.woocommerce .dn-shop-main ul.products li.product .onsale {
  background-color: #d50909;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 15px;
  min-height: 20px;
  min-width: auto;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  top: 10px;
  left: 10px;
  right: auto;
  margin: 0;
}

/* Wishlist button */
.dn-card-wishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.dn-wishlist-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--dn-blue);
  background-color: rgba(255, 255, 255, 0.90);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  padding: 0;
}

.dn-wishlist-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--dn-blue);
  fill: none;
  transition: fill 0.2s ease;
}

.dn-wishlist-btn:hover,
.dn-wishlist-btn.active {
  background-color: var(--dn-blue);
  border-color: var(--dn-blue);
}

.dn-wishlist-btn:hover svg,
.dn-wishlist-btn.active svg {
  stroke: #ffffff;
  fill: #ffffff;
}

/* Card info section */
.dn-card-info {
  padding: 10px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.dn-card-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dn-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dn-card-title a:hover {
  color: var(--dn-blue);
}

.dn-card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.dn-card-price .price,
.woocommerce .dn-shop-main ul.products li.product .price {
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.dn-card-price .price ins,
.dn-card-price .current-price,
.woocommerce .dn-shop-main ul.products li.product .price ins {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-blue);
  text-decoration: none;
}

.dn-card-price .price > .amount,
.dn-card-price .amount {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-blue);
}

.dn-card-price .price del,
.dn-card-price .old-price,
.woocommerce .dn-shop-main ul.products li.product .price del {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--dn-gray-text);
  text-decoration: line-through;
}

.dn-card-price .price del .amount {
  font-weight: 300;
  font-size: 12px;
  color: var(--dn-gray-text);
}

/* Card actions */
.dn-card-actions {
  margin-top: auto;
  padding-top: 8px;
}

/* Cart button */
.dn-btn-cart,
.woocommerce .dn-shop-main ul.products li.product .add_to_cart_button,
.woocommerce .dn-shop-main ul.products li.product .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 256px;
  height: 35px;
  border: 1px solid #a8cdf1;
  border-radius: 20px;
  background-color: transparent;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--dn-blue);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  box-sizing: border-box;
  padding: 0 16px;
  white-space: nowrap;
}

.dn-btn-cart:hover,
.woocommerce .dn-shop-main ul.products li.product .add_to_cart_button:hover,
.woocommerce .dn-shop-main ul.products li.product .button:hover {
  background-color: var(--dn-blue);
  color: #ffffff;
  border-color: var(--dn-blue);
}

/* "Select options" variant button */
.dn-btn-cart--select,
.woocommerce .dn-shop-main ul.products li.product .product_type_variable {
  border-color: #85b8ec;
  color: #014b94;
}

.dn-btn-cart--select:hover,
.woocommerce .dn-shop-main ul.products li.product .product_type_variable:hover {
  background-color: #85b8ec;
  color: #ffffff;
  border-color: #85b8ec;
}

/* Out of stock */
.dn-btn-cart--oos {
  border-color: #dddddd;
  color: var(--dn-gray-text);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
}

/* WooCommerce added-to-cart checkmark state */
.woocommerce .dn-shop-main ul.products li.product .add_to_cart_button.added {
  background-color: var(--dn-blue);
  color: #ffffff;
  border-color: var(--dn-blue);
}

.woocommerce .dn-shop-main ul.products li.product .added_to_cart {
  display: none;
}

/* ----------------------------------------
   PAGINATION
---------------------------------------- */
.woocommerce-pagination,
.dn-shop-page .woocommerce-pagination {
  display: flex;
  justify-content: center;
  padding: 32px 0 16px;
  margin: 0;
}

.woocommerce-pagination ul,
.dn-shop-page .woocommerce-pagination ul {
  display: flex;
  align-items: center;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-pagination ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: 50%;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
  color: var(--dn-gray-text);
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
  box-sizing: border-box;
}

.woocommerce-pagination ul li a:hover {
  color: var(--dn-blue);
  background-color: rgba(1, 75, 148, 0.06);
}

.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li .current {
  color: var(--dn-blue);
  background-color: transparent;
  font-weight: 500;
}

.woocommerce-pagination ul li .prev,
.woocommerce-pagination ul li .next {
  font-size: 16px;
  color: var(--dn-blue);
  border-radius: 50%;
}

.woocommerce-pagination ul li .prev:hover,
.woocommerce-pagination ul li .next:hover {
  background-color: rgba(1, 75, 148, 0.06);
  color: var(--dn-blue);
}

/* ----------------------------------------
   WOOCOMMERCE OVERRIDES (global)
---------------------------------------- */
.woocommerce .dn-shop-main ul.products li.product {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  clear: none;
}

.woocommerce .dn-shop-main .woocommerce-result-count {
  float: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: var(--dn-gray-text);
  margin: 0;
}

.woocommerce .dn-shop-main .woocommerce-ordering {
  float: none;
  margin: 0;
}

/* Remove WooCommerce default star ratings on shop page */
.woocommerce .dn-shop-main ul.products li.product .star-rating {
  display: none;
}

/* Remove WooCommerce default layout helpers */
.woocommerce .dn-shop-main ul.products::after,
.woocommerce .dn-shop-main ul.products::before {
  display: none;
  content: none;
}

/* ----------------------------------------
   EMPTY SHOP / NO RESULTS
---------------------------------------- */
.dn-shop-main .woocommerce-info,
.dn-shop-main .woocommerce-no-products-found {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  color: var(--dn-gray-text);
  text-align: center;
  padding: 48px 0;
  border: 1px solid #dddddd;
  border-radius: 10px;
  background-color: #ffffff;
}

/* ----------------------------------------
   RESPONSIVE: TABLET (max 1024px)
---------------------------------------- */
@media (max-width: 1024px) {
  .dn-shop-page .dn-container {
    padding: 0 40px;
  }

  .dn-shop-layout {
    grid-template-columns: 240px 1fr;
    gap: 24px;
    padding: 24px 0 48px;
  }

  .dn-products-grid,
  .woocommerce .dn-shop-main ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .dn-sort-wrap select,
  .woocommerce .dn-shop-main .woocommerce-ordering select {
    width: 220px;
  }
}

/* ----------------------------------------
   RESPONSIVE: MOBILE (max 768px)
---------------------------------------- */
@media (max-width: 768px) {
  .dn-shop-page .dn-container {
    padding: 0 16px;
  }

  /* Hide sidebar, show mobile filter button */
  .dn-shop-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 0 40px;
  }

  .dn-shop-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }

  .dn-shop-sidebar.is-open {
    display: block;
  }

  .dn-sidebar-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: var(--dn-bg);
    padding: 24px 20px;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .dn-sidebar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--dn-border, #eeeeee);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--dn-dark);
    z-index: 10;
  }

  .dn-sidebar-close:hover {
    background-color: #f0f0f0;
  }

  .dn-mobile-filter-btn {
    display: flex;
    margin-bottom: 16px;
  }

  .dn-sidebar-apply {
    display: block;
    padding: 20px 0 10px;
    border-top: 1px solid #dddddd;
    margin-top: 16px;
  }

  .dn-sidebar-apply-btn {
    width: 100%;
    height: 45px;
    border-radius: 25px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .dn-active-filters {
    gap: 8px;
    margin-top: -8px;
  }

  .dn-filter-chip {
    height: 24px;
    padding: 2px 10px;
    font-size: 11px;
  }

  .dn-active-filters__clear {
    font-size: 12px;
  }

  .dn-shop-top-bar {
    flex-wrap: wrap;
    gap: 12px;
  }

  .dn-sort-wrap {
    width: 100%;
  }

  .dn-sort-wrap label,
  .dn-sort-label {
    font-size: 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .dn-sort-wrap select,
  .woocommerce .dn-shop-main .woocommerce-ordering select {
    width: 100%;
    height: 45px;
    border-radius: 25px;
    font-size: 14px;
  }

  /* 2-column grid on mobile */
  .dn-products-grid,
  .woocommerce .dn-shop-main ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* Smaller cards on mobile */
  .dn-card-inner {
    border-radius: 5px;
  }

  .dn-badge {
    font-size: 8px;
    line-height: 12px;
    height: 16px;
    padding: 0 6px;
  }

  .dn-card-title {
    font-size: 14px;
    line-height: 21px;
  }

  .dn-card-price .price ins,
  .dn-card-price .current-price,
  .woocommerce .dn-shop-main ul.products li.product .price ins,
  .dn-card-price .amount {
    font-size: 14px;
    line-height: 21px;
    color: #014b94;
  }

  .dn-card-price .price > .amount {
    color: #014b94;
  }

  .dn-card-info {
    padding: 5px 10px 10px;
    gap: 6px;
  }

  .dn-btn-cart,
  .woocommerce .dn-shop-main ul.products li.product .add_to_cart_button,
  .woocommerce .dn-shop-main ul.products li.product .button {
    height: 35px;
    font-size: 13px;
    max-width: 100%;
    border-radius: 20px;
  }

  .dn-wishlist-btn {
    width: 30px;
    height: 30px;
  }

  .dn-wishlist-btn svg {
    width: 15px;
    height: 15px;
  }

  .woocommerce-pagination ul li a,
  .woocommerce-pagination ul li span {
    min-width: 32px;
    height: 32px;
    font-size: 13px;
  }
}

/* ----------------------------------------
   RESPONSIVE: SMALL MOBILE (max 480px)
---------------------------------------- */
@media (max-width: 480px) {
  .dn-shop-page .dn-container {
    padding: 0 12px;
  }

  .dn-shop-layout {
    gap: 12px;
    padding: 12px 0 32px;
  }

  .dn-products-grid,
  .woocommerce .dn-shop-main ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .dn-card-info {
    padding: 8px 7px 10px;
    gap: 5px;
  }

  .dn-card-title {
    font-size: 13px;
    line-height: 19px;
  }

  .dn-card-price .price ins,
  .woocommerce .dn-shop-main ul.products li.product .price ins,
  .dn-card-price .amount,
  .dn-card-price .price > .amount {
    font-size: 13px;
    line-height: 20px;
  }

  .dn-card-price .price del,
  .dn-card-price .old-price,
  .woocommerce .dn-shop-main ul.products li.product .price del {
    font-size: 11px;
  }

  .dn-btn-cart,
  .woocommerce .dn-shop-main ul.products li.product .add_to_cart_button,
  .woocommerce .dn-shop-main ul.products li.product .button {
    font-size: 12px;
    height: 32px;
    padding: 0 10px;
  }

  .dn-sort-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .dn-sort-wrap select,
  .woocommerce .dn-shop-main .woocommerce-ordering select {
    height: 40px;
    font-size: 13px;
  }

  .woocommerce-pagination ul {
    gap: 4px;
  }

  .woocommerce-pagination ul li a,
  .woocommerce-pagination ul li span {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }
}

/* ===== PAGE: PRODUKT B2C (SINGLE PRODUCT) ===== */

/* =============================================
   SINGLE PRODUCT PAGE WRAPPER
   ============================================= */
.dn-single-product {
  background-color: var(--dn-bg);
  font-family: 'Poppins', sans-serif;
  color: var(--dn-dark);
  padding-top: 40px;
  padding-bottom: 80px;
}

/* =============================================
   BREADCRUMB
   ============================================= */
.dn-single-product .woocommerce-breadcrumb,
.dn-single-product .dn-breadcrumb {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-gray-text);
  margin-bottom: 32px;
}

.dn-single-product .woocommerce-breadcrumb a,
.dn-single-product .dn-breadcrumb a {
  color: var(--dn-gray-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dn-single-product .woocommerce-breadcrumb a:hover,
.dn-single-product .dn-breadcrumb a:hover {
  color: var(--dn-dark);
}

/* =============================================
   PRODUCT MAIN — TWO COLUMNS
   ============================================= */
.dn-product-main {
  display: grid;
  grid-template-columns: 585px 1fr;
  gap: 133px;
  align-items: start;
  margin-bottom: 72px;
}

/* =============================================
   GALLERY
   ============================================= */
.dn-product-gallery,
.dn-product-main .woocommerce-product-gallery {
  width: 585px;
  max-width: 100%;
}

/* Main image */
.dn-product-gallery .woocommerce-product-gallery__wrapper,
.dn-product-gallery .woocommerce-product-gallery__image,
.woocommerce-product-gallery .woocommerce-product-gallery__image:first-child,
.dn-product-gallery figure {
  width: 585px;
  max-width: 100%;
  height: 621px;
  background-color: #ffffff;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dn-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery .woocommerce-product-gallery__image:first-child img,
.dn-product-gallery figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* WooCommerce gallery overrides */
.woocommerce-product-gallery {
  position: relative;
  width: 585px;
  max-width: 100%;
}

.woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  display: block;
}

.woocommerce-product-gallery figure.woocommerce-product-gallery__image {
  margin: 0;
}

/* Thumbnails strip */
.flex-control-thumbs,
.dn-product-gallery .flex-control-thumbs {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 10px;
  padding: 0;
  list-style: none;
}

.flex-control-thumbs li {
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
}

.flex-control-thumbs li img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 5px;
  border: 2px solid transparent;
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease;
  display: block;
}

.flex-control-thumbs li img.flex-active,
.flex-control-thumbs li.flex-active img {
  border-color: var(--dn-orange);
  opacity: 1;
}

.flex-control-thumbs li img:hover {
  opacity: 0.85;
}

/* =============================================
   PRODUCT INFO (RIGHT COLUMN)
   ============================================= */
.dn-product-info,
.dn-product-main .summary {
  width: 482px;
  max-width: 100%;
  font-family: 'Poppins', sans-serif;
}

/* Category label */
.dn-product-info .dn-product-category,
.dn-product-info .posted_in,
.dn-product-info .posted_in a {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-gray-text);
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
}

/* Product title */
.dn-product-info .product_title,
.summary .product_title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  margin: 0 0 12px 0;
}

/* SKU */
.dn-product-info .sku_wrapper,
.summary .sku_wrapper {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  color: var(--dn-dark);
  display: block;
  margin-bottom: 20px;
}

.dn-product-info .sku_wrapper .sku,
.summary .sku_wrapper .sku {
  font-weight: 300;
  font-size: 18px;
  line-height: 27px;
  color: var(--dn-dark);
}

/* =============================================
   PRICE BLOCK
   ============================================= */
.dn-product-info .price,
.summary .price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}

/* Net price row */
.dn-product-info .dn-price-net,
.dn-price-net {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dn-price-net .dn-price-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
}

.dn-price-net .dn-price-value,
.dn-product-info .price .woocommerce-Price-amount,
.summary .price .woocommerce-Price-amount {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: var(--dn-light-blue);
}

/* Gross price row */
.dn-price-gross {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.dn-price-gross .dn-price-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
}

.dn-price-gross .dn-price-value {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-light-blue);
}

/* Lowest price / omnibus */
.dn-price-lowest,
.woocommerce-variation-price .dn-price-lowest,
.wc-price-lowest {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 18px;
  color: var(--dn-dark);
  display: block;
  margin-top: 2px;
}

/* Crossed-out old price (WC sale) */
.dn-product-info .price del,
.summary .price del {
  font-weight: 300;
  font-size: 14px;
  color: var(--dn-gray-text);
  text-decoration: line-through;
}

.dn-product-info .price ins,
.summary .price ins {
  text-decoration: none;
}

/* =============================================
   ADD TO CART BUTTON
   ============================================= */
.dn-product-info .single_add_to_cart_button,
.summary .single_add_to_cart_button,
.dn-product-info button.single_add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 482px;
  max-width: 100%;
  height: 50px;
  background-color: var(--dn-light-blue);
  border: none;
  border-radius: 25px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--dn-bg);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.15s ease;
  margin-top: 20px;
  margin-bottom: 24px;
  padding: 0 24px;
  box-sizing: border-box;
}

.dn-product-info .single_add_to_cart_button:hover,
.summary .single_add_to_cart_button:hover {
  background-color: #6aa3d8;
  transform: translateY(-1px);
}

.dn-product-info .single_add_to_cart_button:active,
.summary .single_add_to_cart_button:active {
  transform: translateY(0);
}

.dn-product-info .single_add_to_cart_button .dn-cart-icon,
.single_add_to_cart_button .dn-cart-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--dn-bg);
  fill: none;
}

/* WC quantity selector */
.dn-product-info .quantity,
.summary .quantity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.dn-product-info .quantity input,
.summary .quantity input[type="number"] {
  width: 60px;
  height: 40px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--dn-dark);
  background: #ffffff;
  padding: 0;
  -moz-appearance: textfield;
}

.dn-product-info .quantity input::-webkit-outer-spin-button,
.dn-product-info .quantity input::-webkit-inner-spin-button,
.summary .quantity input::-webkit-outer-spin-button,
.summary .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =============================================
   PRODUCT META (category, tags, sku)
   ============================================= */
.dn-product-info .product_meta,
.summary .product_meta {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: var(--dn-gray-text);
  margin-top: 8px;
}

.dn-product-info .product_meta span,
.summary .product_meta span {
  display: block;
  line-height: 1.6;
}

.dn-product-info .product_meta a,
.summary .product_meta a {
  color: var(--dn-gray-text);
  text-decoration: none;
}

/* =============================================
   ATTRIBUTES TABLE
   ============================================= */
.dn-product-attrs {
  margin-top: 24px;
  margin-bottom: 24px;
}

.dn-attrs-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.dn-attrs-table tr {
  border: none;
}

.dn-attrs-table tr + tr {
  margin-top: 10px;
}

.dn-attrs-table td,
.dn-attrs-table th {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  padding: 5px 0;
  vertical-align: middle;
  border: none;
  background: none;
}

.dn-attrs-table td:first-child,
.dn-attrs-table th:first-child {
  font-weight: 500;
  color: var(--dn-dark);
  padding-right: 16px;
  white-space: nowrap;
  width: 130px;
}

.dn-attrs-table td:last-child,
.dn-attrs-table th:last-child {
  font-weight: 400;
  color: var(--dn-dark);
}

/* WC variations table */
.woocommerce-product-attributes {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-product-attributes td,
.woocommerce-product-attributes th {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  padding: 5px 0;
  border: none;
  background: none;
}

.woocommerce-product-attributes th {
  padding-right: 16px;
  white-space: nowrap;
}

/* =============================================
   DELIVERY INFO BOX
   ============================================= */
.dn-delivery-box {
  background-color: var(--dn-surface);
  border-radius: 5px;
  padding: 18px 20px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dn-delivery-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-orange);
}

.dn-delivery-row .dn-delivery-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--dn-dark);
  fill: none;
}

.dn-delivery-row span {
  color: var(--dn-orange);
}

.dn-delivery-row .dn-delivery-label {
  color: var(--dn-dark);
  font-weight: 400;
}

.dn-delivery-row .dn-delivery-value {
  color: var(--dn-orange);
}

/* =============================================
   TABS SECTION
   ============================================= */
.dn-product-tabs-section {
  margin-bottom: 72px;
}

/* Tab navigation */
.dn-product-tabs-section .woocommerce-tabs,
.woocommerce-tabs {
  font-family: 'Poppins', sans-serif;
}

.dn-product-tabs-section .wc-tabs,
.woocommerce-tabs .wc-tabs {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 2px solid #e0e0e0;
  height: 34px;
  box-sizing: content-box;
}

.dn-product-tabs-section .wc-tabs li,
.woocommerce-tabs .wc-tabs li {
  display: flex;
  align-items: flex-end;
  height: 100%;
}

.dn-product-tabs-section .wc-tabs li a,
.woocommerce-tabs .wc-tabs li a {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--dn-dark);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.dn-product-tabs-section .wc-tabs li:first-child a,
.woocommerce-tabs .wc-tabs li:first-child a {
  padding-left: 0;
}

.dn-product-tabs-section .wc-tabs li.active a,
.woocommerce-tabs .wc-tabs li.active a {
  color: var(--dn-blue);
  border-bottom-color: var(--dn-blue);
}

.dn-product-tabs-section .wc-tabs li a:hover,
.woocommerce-tabs .wc-tabs li a:hover {
  color: var(--dn-blue);
}

/* Tab panels */
.dn-product-tabs-section .wc-tab,
.woocommerce-tabs .wc-tab {
  display: none;
  padding: 32px 0 0 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
}

.dn-product-tabs-section .wc-tab.active,
.woocommerce-tabs .wc-tab.active {
  display: block;
}

.dn-product-tabs-section .wc-tab h2,
.woocommerce-tabs .wc-tab h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--dn-dark);
  margin-bottom: 16px;
}

.dn-product-tabs-section .wc-tab p,
.woocommerce-tabs .wc-tab p {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin-bottom: 16px;
}

/* In-content image */
.dn-product-tabs-section .wc-tab img,
.woocommerce-tabs .wc-tab img {
  width: 585px;
  max-width: 100%;
  height: auto;
  max-height: 251px;
  object-fit: cover;
  border-radius: 5px;
  display: block;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* Shipping table inside tabs */
.dn-product-tabs-section .wc-tab table,
.woocommerce-tabs .wc-tab table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-top: 16px;
}

.dn-product-tabs-section .wc-tab table th,
.woocommerce-tabs .wc-tab table th {
  font-weight: 500;
  text-align: left;
  padding: 8px 12px;
  background-color: var(--dn-surface);
  border-bottom: 1px solid #e0e0e0;
}

.dn-product-tabs-section .wc-tab table td,
.woocommerce-tabs .wc-tab table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f0f0f0;
}

/* =============================================
   RELATED PRODUCTS SECTION
   ============================================= */
.dn-related-section {
  margin-bottom: 80px;
}

.dn-related-section .dn-section-title,
.dn-related-section h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  margin-bottom: 32px;
}

/* Related grid — 4 columns reusing .dn-product-card */
.dn-related-section .dn-products-grid,
.dn-related-section ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Ensure .dn-product-card fits inside the related grid */
.dn-related-section .dn-product-card,
.dn-related-section ul.products li.product {
  width: 100%;
  max-width: 278px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
}

/* WC-generated related products list */
.related.products h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  margin-bottom: 32px;
}

.related.products ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =============================================
   WC NOTICES
   ============================================= */
.dn-single-product .woocommerce-message,
.dn-single-product .woocommerce-error,
.dn-single-product .woocommerce-info {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  border-radius: 5px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.dn-single-product .woocommerce-message {
  background-color: #e8f5e9;
  color: #2e7d32;
  border-left: 4px solid #2e7d32;
}

.dn-single-product .woocommerce-error {
  background-color: #fdecea;
  color: var(--dn-orange);
  border-left: 4px solid var(--dn-orange);
}

.dn-single-product .woocommerce-info {
  background-color: #e3f2fd;
  color: var(--dn-blue);
  border-left: 4px solid var(--dn-blue);
}

/* =============================================
   RESPONSIVE — 1024px
   ============================================= */
@media (max-width: 1024px) {
  .dn-container {
    padding: 0 40px;
  }

  .dn-product-main {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .dn-product-gallery,
  .dn-product-main .woocommerce-product-gallery,
  .woocommerce-product-gallery {
    width: 100%;
  }

  .dn-product-gallery .woocommerce-product-gallery__wrapper,
  .dn-product-gallery .woocommerce-product-gallery__image,
  .woocommerce-product-gallery .woocommerce-product-gallery__image:first-child,
  .dn-product-gallery figure {
    width: 100%;
    height: auto;
    aspect-ratio: 585 / 621;
  }

  .dn-product-info,
  .dn-product-main .summary {
    width: 100%;
  }

  .dn-product-info .single_add_to_cart_button,
  .summary .single_add_to_cart_button {
    width: 100%;
  }

  .dn-related-section .dn-products-grid,
  .dn-related-section ul.products,
  .related.products ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =============================================
   RESPONSIVE — 768px
   ============================================= */
@media (max-width: 768px) {
  .dn-container {
    padding: 0 16px;
  }

  .dn-single-product {
    padding-top: 24px;
    padding-bottom: 48px;
  }

  /* Stack gallery and info */
  .dn-product-main {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
  }

  .dn-product-gallery,
  .dn-product-main .woocommerce-product-gallery,
  .woocommerce-product-gallery {
    width: 100%;
  }

  /* Main image full width */
  .dn-product-gallery .woocommerce-product-gallery__wrapper,
  .dn-product-gallery .woocommerce-product-gallery__image,
  .woocommerce-product-gallery .woocommerce-product-gallery__image:first-child,
  .dn-product-gallery figure {
    width: 100%;
    height: auto;
    max-height: 465px;
    aspect-ratio: 361 / 465;
  }

  .dn-product-info,
  .dn-product-main .summary {
    width: 100%;
  }

  /* Title */
  .dn-product-info .product_title,
  .summary .product_title {
    font-size: 22px;
    line-height: 33px;
  }

  /* SKU */
  .dn-product-info .sku_wrapper,
  .summary .sku_wrapper,
  .dn-product-info .sku_wrapper .sku,
  .summary .sku_wrapper .sku {
    font-size: 18px;
    line-height: 27px;
  }

  /* CTA button */
  .dn-product-info .single_add_to_cart_button,
  .summary .single_add_to_cart_button {
    width: 100%;
    max-width: 361px;
    height: 45px;
    font-size: 15px;
  }

  /* Attributes */
  .dn-attrs-table td,
  .dn-attrs-table th,
  .woocommerce-product-attributes td,
  .woocommerce-product-attributes th {
    font-size: 14px;
    line-height: 21px;
  }

  /* Delivery box */
  .dn-delivery-row {
    font-size: 14px;
    line-height: 21px;
  }

  /* Tabs */
  .dn-product-tabs-section .wc-tabs li a,
  .woocommerce-tabs .wc-tabs li a {
    padding: 0 16px;
    font-size: 14px;
  }

  .dn-product-tabs-section .wc-tabs li:first-child a,
  .woocommerce-tabs .wc-tabs li:first-child a {
    padding-left: 0;
  }

  .dn-product-tabs-section .wc-tab,
  .woocommerce-tabs .wc-tab {
    font-size: 15px;
  }

  .dn-product-tabs-section .wc-tab img,
  .woocommerce-tabs .wc-tab img {
    width: 100%;
    max-height: none;
    height: auto;
  }

  /* Related — 2 columns */
  .dn-related-section .dn-products-grid,
  .dn-related-section ul.products,
  .related.products ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .dn-related-section .dn-product-card,
  .dn-related-section ul.products li.product {
    max-width: none;
    min-height: 344px;
  }

  /* Related title */
  .dn-related-section .dn-section-title,
  .dn-related-section h2,
  .related.products h2 {
    font-size: 22px;
    line-height: 33px;
    margin-bottom: 24px;
  }
}

/* =============================================
   RESPONSIVE — 480px
   ============================================= */
@media (max-width: 480px) {
  .dn-container {
    padding: 0 16px;
  }

  .dn-product-info .product_title,
  .summary .product_title {
    font-size: 20px;
    line-height: 30px;
  }

  /* Thumbnails — smaller on small phones */
  .flex-control-thumbs li,
  .flex-control-thumbs li img {
    width: 72px;
    height: 72px;
  }

  /* Tabs — scrollable if needed */
  .dn-product-tabs-section .wc-tabs,
  .woocommerce-tabs .wc-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .dn-product-tabs-section .wc-tabs::-webkit-scrollbar,
  .woocommerce-tabs .wc-tabs::-webkit-scrollbar {
    display: none;
  }

  .dn-product-tabs-section .wc-tabs li a,
  .woocommerce-tabs .wc-tabs li a {
    font-size: 13px;
    padding: 0 12px;
    white-space: nowrap;
  }

  /* Related — still 2 columns, tighter gap */
  .dn-related-section .dn-products-grid,
  .dn-related-section ul.products,
  .related.products ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .dn-related-section .dn-product-card,
  .dn-related-section ul.products li.product {
    max-width: 100%;
    min-height: 300px;
  }
}

/* ===== PAGE: KOSZYK (CART) ===== */

/* --- Page Wrapper --- */
.dn-cart-page {
  font-family: 'Poppins', sans-serif;
  background-color: var(--dn-bg);
  color: var(--dn-dark);
  padding-bottom: 80px;
}

/* --- Page Title --- */
.dn-cart-page .dn-page-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  margin-bottom: 32px;
  padding-top: 48px;
}

/* --- Cart Form --- */
.dn-cart-form {
  width: 100%;
}

/* --- Two-Column Layout --- */
.dn-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

/* =========================
   LEFT COLUMN — Cart Items
   ========================= */

.dn-cart-items {
  background: var(--dn-bg);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  overflow: hidden;
}

/* --- Table Header --- */
.dn-cart-head {
  display: grid;
  grid-template-columns: 1fr 120px 120px 120px 40px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--dn-border);
}

.dn-cart-head-product,
.dn-cart-head-price,
.dn-cart-head-qty,
.dn-cart-head-total,
.dn-cart-head-remove {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
}

.dn-cart-head-price,
.dn-cart-head-qty,
.dn-cart-head-total {
  text-align: center;
}

.dn-cart-head-remove {
  text-align: center;
}

/* --- Cart Row --- */
.dn-cart-row {
  display: grid;
  grid-template-columns: 1fr 120px 120px 120px 40px;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--dn-border);
  transition: background 0.15s ease;
}

.dn-cart-row:last-of-type {
  border-bottom: none;
}

.dn-cart-row:hover {
  background: rgba(0, 0, 0, 0.015);
}

/* --- Product Cell --- */
.dn-cart-product {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dn-cart-product-img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.dn-cart-product-img a {
  display: block;
  width: 60px;
  height: 60px;
}

.dn-cart-product-img a img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  object-fit: cover;
}

.dn-cart-product-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-decoration: none;
}

.dn-cart-product-name:hover {
  color: var(--dn-blue);
  text-decoration: underline;
}

/* --- Price Cell --- */
.dn-cart-price {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: center;
}

/* --- Quantity Cell --- */
.dn-cart-qty {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dn-cart-qty input[type="number"],
.dn-cart-qty .qty {
  width: 60px;
  height: 40px;
  text-align: center;
  border: 1px solid var(--dn-border-light);
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--dn-dark);
  background: var(--dn-bg);
  outline: none;
  transition: border-color 0.15s ease;
  -moz-appearance: textfield;
  appearance: textfield;
}

.dn-cart-qty input[type="number"]::-webkit-outer-spin-button,
.dn-cart-qty input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.dn-cart-qty input[type="number"]:focus,
.dn-cart-qty .qty:focus {
  border-color: var(--dn-dark);
}

/* --- Subtotal Cell --- */
.dn-cart-subtotal {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: center;
}

/* --- Remove Cell --- */
.dn-cart-remove {
  display: flex;
  justify-content: center;
  align-items: center;
}

.dn-remove-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--dn-dark);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.dn-remove-item:hover {
  opacity: 0.5;
}

/* X / cross icon — drawn with pseudo-elements */
.dn-remove-item::before,
.dn-remove-item::after {
  content: '';
  position: absolute;
  width: 11px;
  height: 1.5px;
  background: var(--dn-dark);
  border-radius: 1px;
}

.dn-remove-item::before {
  transform: rotate(45deg);
}

.dn-remove-item::after {
  transform: rotate(-45deg);
}

.dn-remove-item {
  position: relative;
}

/* WooCommerce native remove link fallback */
.dn-cart-row .remove,
a.remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 16px;
  color: var(--dn-dark) !important;
  text-decoration: none;
  transition: opacity 0.15s ease;
  font-weight: 400;
  line-height: 1;
}

.dn-cart-row .remove:hover,
a.remove:hover {
  background: transparent;
  color: var(--dn-orange) !important;
}

/* --- Row Separator (730px from Figma, inset) --- */
.dn-cart-row + .dn-cart-row {
  position: relative;
}

/* =========================
   CART ACTIONS (below table)
   ========================= */

.dn-cart-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 24px;
  border-top: 1px solid var(--dn-border);
  flex-wrap: wrap;
}

/* --- Coupon --- */
.dn-coupon {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.dn-coupon-input,
.dn-coupon input[type="text"] {
  width: 495px;
  max-width: 100%;
  height: var(--dn-btn-height);
  border: 1px solid var(--dn-border-light);
  border-radius: var(--dn-radius-input);
  padding: 0 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--dn-dark);
  background: var(--dn-bg);
  outline: none;
  transition: border-color 0.15s ease;
}

.dn-coupon-input::placeholder,
.dn-coupon input[type="text"]::placeholder {
  color: var(--dn-gray-text);
}

.dn-coupon-input:focus,
.dn-coupon input[type="text"]:focus {
  border-color: var(--dn-dark);
}

/* =========================
   BUTTONS
   ========================= */

.dn-btn-apply,
.dn-btn-update,
button[name="apply_coupon"],
button[name="update_cart"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--dn-btn-height);
  padding: 0 28px;
  background: var(--dn-orange);
  color: var(--dn-bg);
  border: none;
  border-radius: var(--dn-radius-btn);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, opacity 0.2s ease;
  outline: none;
}

.dn-btn-apply:hover,
.dn-btn-update:hover,
button[name="apply_coupon"]:hover,
button[name="update_cart"]:hover {
  background: #c93610;
  color: var(--dn-bg);
}

.dn-btn:disabled,
.dn-btn-update:disabled,
button[name="update_cart"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Apply coupon — fixed 215px */
.dn-coupon .dn-btn,
button[name="apply_coupon"] {
  width: 215px;
  flex-shrink: 0;
}

/* Update cart — fixed 208px */
.dn-btn-update,
button[name="update_cart"] {
  width: 208px;
  flex-shrink: 0;
}

/* Outline variant */
.dn-btn-outline {
  background: transparent;
  color: var(--dn-orange);
  border: 1.5px solid var(--dn-orange);
}

.dn-btn-outline:hover {
  background: var(--dn-orange);
  color: var(--dn-bg);
}

/* =========================
   RIGHT COLUMN — Totals
   ========================= */

.dn-cart-totals-wrap,
.cart-collaterals {
  background: var(--dn-bg);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  padding: 28px 28px 32px;
  position: sticky;
  top: 24px;
}

/* WooCommerce cart_totals inside our wrapper */
.dn-cart-totals-wrap .cart_totals,
.cart-collaterals .cart_totals {
  width: 100%;
}

/* Summary heading */
.dn-cart-totals-wrap h2,
.cart_totals h2,
.dn-totals-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  margin-bottom: 24px;
}

/* Totals table */
.dn-cart-totals-wrap .shop_table,
.cart_totals .shop_table {
  width: 100%;
  border-collapse: collapse;
  border: none;
}

.dn-cart-totals-wrap .shop_table tr,
.cart_totals .shop_table tr {
  border: none;
}

.dn-cart-totals-wrap .shop_table th,
.cart_totals .shop_table th {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: left;
  padding: 10px 0;
  border: none;
  background: transparent;
}

.dn-cart-totals-wrap .shop_table td,
.cart_totals .shop_table td {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-align: right;
  padding: 10px 0;
  border: none;
  background: transparent;
}

/* "Kwota" row */
.dn-cart-totals-wrap .shop_table .cart-subtotal th,
.cart_totals .shop_table .cart-subtotal th {
  font-weight: 400;
}

/* Discount row — green */
.dn-cart-totals-wrap .shop_table .discount td,
.dn-cart-totals-wrap .shop_table .cart-discount td,
.cart_totals .shop_table .cart-discount td,
.cart_totals .shop_table .discount td {
  color: var(--dn-discount);
  font-weight: 500;
}

.dn-cart-totals-wrap .shop_table .discount th,
.dn-cart-totals-wrap .shop_table .cart-discount th,
.cart_totals .shop_table .cart-discount th,
.cart_totals .shop_table .discount th {
  color: var(--dn-discount);
  font-weight: 400;
}

/* Separator row — horizontal rule between subtotal and total */
.dn-cart-totals-wrap .shop_table tr.order-total,
.cart_totals .shop_table tr.order-total {
  border-top: 1px solid var(--dn-border);
}

.dn-cart-totals-wrap .shop_table tr.order-total th,
.dn-cart-totals-wrap .shop_table tr.order-total td,
.cart_totals .shop_table tr.order-total th,
.cart_totals .shop_table tr.order-total td {
  padding-top: 16px;
  font-weight: 600;
  font-size: 16px;
}

/* Checkout button */
.dn-cart-totals-wrap .wc-proceed-to-checkout,
.cart_totals .wc-proceed-to-checkout {
  margin-top: 24px;
}

.dn-cart-totals-wrap .wc-proceed-to-checkout .checkout-button,
.cart_totals .wc-proceed-to-checkout .checkout-button,
.dn-btn-checkout,
a.checkout-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 320px;
  max-width: 100%;
  height: var(--dn-btn-height);
  background: var(--dn-orange);
  color: var(--dn-bg) !important;
  border: none;
  border-radius: var(--dn-radius-btn);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease;
}

.dn-cart-totals-wrap .wc-proceed-to-checkout .checkout-button:hover,
.cart_totals .wc-proceed-to-checkout .checkout-button:hover,
a.checkout-button:hover {
  background: #c93610;
  color: var(--dn-bg) !important;
}

/* =========================
   UPSELL — "Może Ci się spodobać"
   ========================= */

.dn-cart-upsells {
  margin-top: 64px;
}

.dn-cart-upsells .dn-upsell-title,
.dn-cart-upsells h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  margin-bottom: 32px;
}

.dn-upsell-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Upsell product card */
.dn-upsell-card {
  width: 100%;
  background: var(--dn-bg);
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  text-decoration: none;
  color: var(--dn-dark);
  display: flex;
  flex-direction: column;
}

.dn-upsell-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.dn-upsell-card-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.dn-upsell-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.dn-upsell-card-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
}

.dn-upsell-card-price {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
}

/* =========================
   WOOCOMMERCE NATIVE OVERRIDES
   ========================= */

/* Reset WC table styles inside our layout */
.dn-cart-items table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  background: transparent;
}

.dn-cart-items table.shop_table thead tr th {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
  padding: 16px 24px;
  border-bottom: 1px solid var(--dn-border);
  background: transparent;
  text-align: left;
}

.dn-cart-items table.shop_table thead tr th.product-subtotal,
.dn-cart-items table.shop_table thead tr th.product-price,
.dn-cart-items table.shop_table thead tr th.product-quantity {
  text-align: center;
}

.dn-cart-items table.shop_table tbody tr.cart_item td {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--dn-dark);
  padding: 20px 24px;
  border-bottom: 1px solid var(--dn-border);
  background: transparent;
  vertical-align: middle;
}

.dn-cart-items table.shop_table tbody tr.cart_item:last-child td {
  border-bottom: none;
}

/* WC product name column */
.dn-cart-items table.shop_table .product-name a {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-decoration: none;
}

.dn-cart-items table.shop_table .product-name a:hover {
  color: var(--dn-blue);
  text-decoration: underline;
}

/* WC product thumbnail */
.dn-cart-items table.shop_table .product-thumbnail img {
  width: 60px;
  height: 60px;
  border-radius: 5px;
  object-fit: cover;
}

/* WC quantity field */
.dn-cart-items .quantity .qty,
.dn-cart-items .woocommerce-cart-form__cart-item .qty {
  width: 60px;
  height: 40px;
  text-align: center;
  border: 1px solid var(--dn-border-light);
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--dn-dark);
  background: var(--dn-bg);
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
  display: block;
  margin: 0 auto;
}

.dn-cart-items .quantity .qty::-webkit-outer-spin-button,
.dn-cart-items .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* WC price/subtotal alignment */
.dn-cart-items table.shop_table .product-price,
.dn-cart-items table.shop_table .product-subtotal {
  text-align: center;
}

/* WC remove link */
.dn-cart-items table.shop_table .product-remove {
  text-align: center;
  width: 40px;
}

/* WC coupon block */
.dn-cart-items table.shop_table .actions {
  padding: 24px 24px;
  border-top: 1px solid var(--dn-border);
}

.dn-cart-items table.shop_table .coupon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  float: left;
}

.dn-cart-items table.shop_table .coupon label {
  display: none;
}

.dn-cart-items table.shop_table .coupon #coupon_code {
  width: 280px;
  height: var(--dn-btn-height);
  border: 1px solid var(--dn-border-light);
  border-radius: var(--dn-radius-input);
  padding: 0 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--dn-dark);
  background: var(--dn-bg);
  outline: none;
}

.dn-cart-items table.shop_table .coupon #coupon_code::placeholder {
  color: var(--dn-gray-text);
}

.dn-cart-items table.shop_table .coupon #coupon_code:focus {
  border-color: var(--dn-dark);
}

.dn-cart-items table.shop_table .coupon button[name="apply_coupon"] {
  width: 215px;
  height: var(--dn-btn-height);
  background: var(--dn-orange);
  color: var(--dn-bg);
  border: none;
  border-radius: var(--dn-radius-btn);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dn-cart-items table.shop_table .coupon button[name="apply_coupon"]:hover {
  background: #c93610;
}

.dn-cart-items table.shop_table button[name="update_cart"] {
  width: 208px;
  height: var(--dn-btn-height);
  background: var(--dn-orange);
  color: var(--dn-bg);
  border: none;
  border-radius: var(--dn-radius-btn);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  float: right;
  transition: background 0.2s ease;
}

.dn-cart-items table.shop_table button[name="update_cart"]:hover {
  background: #c93610;
}

.dn-cart-items table.shop_table button[name="update_cart"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* WooCommerce notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* Empty cart */
.cart-empty {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: var(--dn-gray-text);
  text-align: center;
  padding: 48px 0;
}

.return-to-shop .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--dn-btn-height);
  padding: 0 32px;
  background: var(--dn-orange);
  color: var(--dn-bg);
  border: none;
  border-radius: var(--dn-radius-btn);
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.return-to-shop .button:hover {
  background: #c93610;
}

/* =========================
   TABLET — max-width: 1024px
   ========================= */

@media (max-width: 1024px) {
  .dn-container {
    padding: 0 40px;
  }

  .dn-cart-layout {
    grid-template-columns: 1fr;
  }

  .dn-cart-totals-wrap,
  .cart-collaterals {
    position: static;
  }

  .dn-upsell-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dn-upsell-card {
    width: 100%;
  }

  .dn-cart-items table.shop_table .coupon #coupon_code {
    width: 200px;
  }

  .dn-cart-totals-wrap .wc-proceed-to-checkout .checkout-button,
  .cart_totals .wc-proceed-to-checkout .checkout-button,
  a.checkout-button {
    width: 100%;
  }
}

/* =========================
   MOBILE — max-width: 768px
   ========================= */

@media (max-width: 768px) {
  .dn-container {
    padding: 0 16px;
  }

  .dn-page-title {
    font-size: 22px;
    line-height: 33px;
    padding-top: 32px;
    margin-bottom: 24px;
  }

  /* --- Responsive Table: hide header, use data-labels --- */
  .dn-cart-head {
    display: none;
  }

  .dn-cart-items table.shop_table thead {
    display: none;
  }

  /* Rows become cards */
  .dn-cart-row {
    display: block;
    padding: 20px 16px;
    border-bottom: 1px solid var(--dn-border);
    position: relative;
  }

  .dn-cart-items table.shop_table tbody tr.cart_item {
    display: block;
    padding: 20px 16px;
    border-bottom: 1px solid var(--dn-border);
  }

  .dn-cart-items table.shop_table tbody tr.cart_item td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border: none;
    font-size: 14px;
  }

  /* data-label pseudo-elements for responsive table */
  .dn-cart-items table.shop_table tbody tr.cart_item td::before {
    content: attr(data-label);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--dn-gray-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 80px;
  }

  .dn-cart-items table.shop_table tbody tr.cart_item td.product-thumbnail {
    justify-content: flex-start;
  }

  .dn-cart-items table.shop_table tbody tr.cart_item td.product-thumbnail::before {
    display: none;
  }

  .dn-cart-items table.shop_table tbody tr.cart_item td.product-name {
    flex-direction: column;
    align-items: flex-start;
  }

  .dn-cart-items table.shop_table tbody tr.cart_item td.product-name::before {
    display: none;
  }

  .dn-cart-items table.shop_table tbody tr.cart_item td.product-remove {
    position: absolute;
    top: 20px;
    right: 16px;
    padding: 0;
  }

  .dn-cart-items table.shop_table tbody tr.cart_item td.product-remove::before {
    display: none;
  }

  /* Quantity centered on mobile */
  .dn-cart-items .quantity .qty,
  .dn-cart-qty input[type="number"],
  .dn-cart-qty .qty {
    margin: 0;
  }

  /* Actions block stack */
  .dn-cart-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 20px 16px;
  }

  .dn-coupon {
    flex-direction: column;
    gap: 10px;
  }

  .dn-coupon-input,
  .dn-coupon input[type="text"] {
    width: 100%;
  }

  .dn-coupon .dn-btn,
  button[name="apply_coupon"],
  .dn-btn-update,
  button[name="update_cart"] {
    width: 100%;
  }

  /* WC coupon on mobile */
  .dn-cart-items table.shop_table .actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 16px;
  }

  .dn-cart-items table.shop_table .coupon {
    float: none;
    flex-direction: column;
    width: 100%;
  }

  .dn-cart-items table.shop_table .coupon #coupon_code {
    width: 100%;
  }

  .dn-cart-items table.shop_table .coupon button[name="apply_coupon"],
  .dn-cart-items table.shop_table button[name="update_cart"] {
    width: 100%;
    float: none;
  }

  /* Totals */
  .dn-cart-totals-wrap,
  .cart-collaterals {
    padding: 20px 16px 24px;
  }

  .dn-cart-totals-wrap h2,
  .cart_totals h2,
  .dn-totals-title {
    font-size: 22px;
    line-height: 33px;
    margin-bottom: 20px;
  }

  /* Upsell grid — 2 columns on tablet/mobile */
  .dn-upsell-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .dn-cart-upsells .dn-upsell-title,
  .dn-cart-upsells h2 {
    font-size: 22px;
    line-height: 33px;
    margin-bottom: 20px;
  }

  .dn-cart-upsells {
    margin-top: 40px;
  }
}

/* =========================
   MOBILE — max-width: 480px
   ========================= */

@media (max-width: 480px) {
  .dn-container {
    padding: 0 16px;
  }

  .dn-page-title {
    font-size: 20px;
    line-height: 30px;
  }

  /* Upsell product cards — smaller image */
  .dn-upsell-card-img {
    height: 160px;
  }

  .dn-upsell-grid {
    gap: 12px;
  }

  .dn-upsell-card-body {
    padding: 12px;
  }

  .dn-upsell-card-name {
    font-size: 12px;
    line-height: 18px;
  }

  .dn-upsell-card-price {
    font-size: 14px;
    line-height: 21px;
  }

  /* Totals checkout button full width */
  .dn-cart-totals-wrap .wc-proceed-to-checkout .checkout-button,
  .cart_totals .wc-proceed-to-checkout .checkout-button,
  a.checkout-button,
  .dn-btn-checkout {
    width: 100%;
  }

  .dn-cart-totals-wrap h2,
  .cart_totals h2 {
    font-size: 20px;
    line-height: 30px;
  }
}

/* ===== PAGE: CHECKOUT (ZAMÓWIENIE B2C) ===== */

/* ----------------------------------------
   PAGE WRAPPER
---------------------------------------- */
.dn-checkout-page {
  background-color: var(--dn-bg);
  font-family: var(--dn-font);
  color: var(--dn-dark);
  padding-bottom: 80px;
}

/* ----------------------------------------
   BACK LINK
---------------------------------------- */
.dn-checkout-page .dn-back-link,
.dn-checkout-page a.dn-back-link {
  display: inline-block;
  font-family: var(--dn-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-blue);
  text-decoration: none;
  margin-top: 40px;
  margin-bottom: 16px;
  transition: opacity 0.2s ease;
}

.dn-checkout-page .dn-back-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* ----------------------------------------
   PAGE TITLE
---------------------------------------- */
.dn-page-title {
  font-family: var(--dn-font);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  color: var(--dn-dark);
  margin: 0 0 32px 0;
  padding: 0;
}

/* ----------------------------------------
   CHECKOUT FORM
---------------------------------------- */
.dn-checkout-form {
  width: 100%;
}

/* ----------------------------------------
   CHECKOUT LAYOUT (two columns)
---------------------------------------- */
.dn-checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 688fr) minmax(0, 482fr);
  gap: 30px;
  align-items: start;
}

/* ----------------------------------------
   CHECKOUT BLOCKS (left + right cards)
---------------------------------------- */
.dn-checkout-details,
.dn-checkout-summary {
  background-color: var(--dn-bg);
  border-radius: var(--dn-radius-card);
  border: 1px solid var(--dn-border);
  padding: 32px 40px;
  box-sizing: border-box;
}

/* ----------------------------------------
   SECTION TITLES
---------------------------------------- */
/* Hide WC default billing/shipping headings (we use our own section titles) */
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3,
.woocommerce-additional-fields > h3 {
  display: none !important;
}

.dn-checkout-section-title,
.dn-checkout-details .dn-checkout-section-title,
.dn-checkout-summary .dn-checkout-section-title {
  font-family: var(--dn-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin: 0 0 24px 0;
  padding: 0;
}

.dn-checkout-block {
  margin-bottom: 32px;
}

.dn-checkout-block:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------
   PURCHASE TYPE RADIO (Kupuję jako)
---------------------------------------- */
.dn-purchase-type-group {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.dn-purchase-type-group label,
.dn-purchase-type-group .dn-radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--dn-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  cursor: pointer;
  user-select: none;
}

/* Hide native radio */
.dn-purchase-type-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom radio outer */
.dn-purchase-type-group .dn-radio-custom,
.dn-purchase-type-group label .dn-radio-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--dn-dark);
  background-color: transparent;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s ease;
}

/* Custom radio inner dot */
.dn-purchase-type-group .dn-radio-custom::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dn-blue);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dn-purchase-type-group input[type="radio"]:checked + .dn-radio-custom,
.dn-purchase-type-group input[type="radio"]:checked ~ .dn-radio-custom {
  border-color: var(--dn-blue);
}

.dn-purchase-type-group input[type="radio"]:checked + .dn-radio-custom::after,
.dn-purchase-type-group input[type="radio"]:checked ~ .dn-radio-custom::after {
  opacity: 1;
  transform: scale(1);
}

/* ----------------------------------------
   WC BILLING / SHIPPING FIELDS LABELS
---------------------------------------- */
.woocommerce-billing-fields label,
.woocommerce-shipping-fields label,
.dn-checkout-additional label,
.dn-checkout-shipping-fields label,
.form-row label {
  display: block;
  font-family: var(--dn-font);
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: var(--dn-dark);
  margin-bottom: 6px;
}

.woocommerce-billing-fields label .required,
.woocommerce-shipping-fields label .required,
.form-row label .required {
  color: var(--dn-orange);
  font-weight: 400;
}

/* ----------------------------------------
   WC FORM ROWS GRID (two columns where applicable)
---------------------------------------- */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Full-width fields */
.woocommerce-billing-fields__field-wrapper .form-row.form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row.form-row-wide,
.woocommerce-billing-fields__field-wrapper .form-row.notes,
.woocommerce-shipping-fields__field-wrapper .form-row.notes {
  grid-column: 1 / -1;
}

/* Half-width fields */
.woocommerce-billing-fields__field-wrapper .form-row.form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row.form-row-last,
.woocommerce-shipping-fields__field-wrapper .form-row.form-row-first,
.woocommerce-shipping-fields__field-wrapper .form-row.form-row-last {
  grid-column: auto;
}

/* ----------------------------------------
   FORM ROW WRAPPER
---------------------------------------- */
.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.woocommerce-input-wrapper {
  width: 100%;
}

/* ----------------------------------------
   INPUTS & SELECTS
---------------------------------------- */
.woocommerce-billing-fields input[type="text"],
.woocommerce-billing-fields input[type="email"],
.woocommerce-billing-fields input[type="tel"],
.woocommerce-billing-fields input[type="password"],
.woocommerce-billing-fields input[type="number"],
.woocommerce-billing-fields select,
.woocommerce-shipping-fields input[type="text"],
.woocommerce-shipping-fields input[type="email"],
.woocommerce-shipping-fields input[type="tel"],
.woocommerce-shipping-fields input[type="password"],
.woocommerce-shipping-fields input[type="number"],
.woocommerce-shipping-fields select,
.dn-checkout-additional input[type="text"],
.dn-checkout-additional input[type="email"],
.dn-checkout-additional input[type="tel"],
.dn-checkout-shipping-fields input[type="text"],
.dn-checkout-shipping-fields input[type="email"],
.dn-checkout-shipping-fields input[type="tel"],
.dn-checkout-shipping-fields input[type="number"],
.dn-checkout-shipping-fields select,
.woocommerce-input-wrapper input[type="text"],
.woocommerce-input-wrapper input[type="email"],
.woocommerce-input-wrapper input[type="tel"],
.woocommerce-input-wrapper input[type="password"],
.woocommerce-input-wrapper input[type="number"],
.woocommerce-input-wrapper select {
  width: 100%;
  height: 50px;
  border-radius: var(--dn-radius-input);
  border: 1px solid var(--dn-dark);
  padding: 0 20px;
  font-family: var(--dn-font);
  font-weight: 300;
  font-size: 16px;
  line-height: 50px;
  color: var(--dn-dark);
  background-color: transparent;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.woocommerce-billing-fields input:focus,
.woocommerce-billing-fields select:focus,
.woocommerce-shipping-fields input:focus,
.woocommerce-shipping-fields select:focus,
.dn-checkout-additional input:focus,
.dn-checkout-shipping-fields input:focus,
.dn-checkout-shipping-fields select:focus,
.woocommerce-input-wrapper input:focus,
.woocommerce-input-wrapper select:focus {
  border-color: var(--dn-blue);
  box-shadow: 0 0 0 3px rgba(1, 75, 148, 0.08);
}

/* Placeholder */
.woocommerce-billing-fields input::placeholder,
.woocommerce-shipping-fields input::placeholder,
.dn-checkout-additional input::placeholder,
.dn-checkout-shipping-fields input::placeholder,
.woocommerce-input-wrapper input::placeholder {
  color: var(--dn-gray-text);
  font-weight: 300;
}

/* Select arrow */
.woocommerce-input-wrapper select,
.dn-checkout-shipping-fields select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231e1e1c' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  padding-right: 44px;
  cursor: pointer;
}

/* ----------------------------------------
   TEXTAREA (Uwagi)
---------------------------------------- */
.woocommerce-billing-fields textarea,
.woocommerce-shipping-fields textarea,
.dn-checkout-additional textarea,
.dn-checkout-shipping-fields textarea,
.woocommerce-input-wrapper textarea {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  border: 1px solid var(--dn-dark);
  padding: 14px 20px;
  font-family: var(--dn-font);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  background-color: transparent;
  box-sizing: border-box;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-billing-fields textarea:focus,
.woocommerce-shipping-fields textarea:focus,
.dn-checkout-additional textarea:focus,
.dn-checkout-shipping-fields textarea:focus,
.woocommerce-input-wrapper textarea:focus {
  border-color: var(--dn-blue);
  box-shadow: 0 0 0 3px rgba(1, 75, 148, 0.08);
}

.woocommerce-billing-fields textarea::placeholder,
.woocommerce-shipping-fields textarea::placeholder,
.dn-checkout-additional textarea::placeholder,
.dn-checkout-shipping-fields textarea::placeholder,
.woocommerce-input-wrapper textarea::placeholder {
  color: var(--dn-gray-text);
  font-weight: 300;
}

/* ----------------------------------------
   COUPON AREA
---------------------------------------- */
.dn-coupon-area,
.checkout_coupon,
.woocommerce-form-coupon-toggle {
  margin-bottom: 24px;
}

/* Coupon toggle: clean info box (no blue bg) */
.woocommerce-form-coupon-toggle .woocommerce-info {
  background-color: transparent;
  border: none;
  color: var(--dn-dark);
  padding: 0;
  margin-bottom: 0;
}

.woocommerce-form-coupon-toggle .woocommerce-info::before {
  display: none;
}

/* Coupon form hidden by default */
.checkout_coupon {
  display: none;
  background-color: var(--dn-white);
  border: 1px solid var(--dn-border-light);
  border-radius: var(--dn-radius-card);
  padding: 20px 24px;
}

.dn-coupon-toggle,
.woocommerce-form-coupon-toggle a,
.dn-coupon-area .dn-coupon-prompt {
  font-family: var(--dn-font);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  text-decoration: underline;
  cursor: pointer;
}

.woocommerce-form-coupon-toggle a:hover,
.dn-coupon-toggle:hover {
  color: var(--dn-blue);
}

.dn-coupon-area .dn-coupon-input-row,
.checkout_coupon .form-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.checkout_coupon input[type="text"],
.dn-coupon-area input[type="text"] {
  flex: 1;
  height: 50px;
  border-radius: var(--dn-radius-input);
  border: 1px solid var(--dn-dark);
  padding: 0 20px;
  font-family: var(--dn-font);
  font-weight: 300;
  font-size: 16px;
  color: var(--dn-dark);
  background-color: transparent;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

.checkout_coupon input[type="text"]:focus,
.dn-coupon-area input[type="text"]:focus {
  border-color: var(--dn-blue);
}

.checkout_coupon button[type="submit"],
.dn-coupon-area .dn-coupon-btn {
  height: 50px;
  padding: 0 28px;
  border-radius: var(--dn-radius-btn);
  border: none;
  background-color: var(--dn-dark);
  color: var(--dn-bg);
  font-family: var(--dn-font);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.checkout_coupon button[type="submit"]:hover,
.dn-coupon-area .dn-coupon-btn:hover {
  background-color: var(--dn-blue);
}

/* ----------------------------------------
   SHIPPING SECTION
---------------------------------------- */
.dn-checkout-shipping-fields {
  margin-top: 24px;
}

/* Shipping options (radio) — cart + checkout */
#shipping_method,
.woocommerce-shipping-methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#shipping_method li,
.woocommerce-shipping-methods li {
  position: relative;
  margin-bottom: 10px;
}

#shipping_method li:last-child,
.woocommerce-shipping-methods li:last-child {
  margin-bottom: 0;
}

#shipping_method input[type="radio"],
.woocommerce-shipping-methods input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  top: 2px;
  left: 0;
  cursor: pointer;
  z-index: 1;
}

#shipping_method label,
.woocommerce-shipping-methods label {
  display: inline-block;
  padding-left: 26px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #1e1e1c;
  cursor: pointer;
  position: relative;
}

#shipping_method label::before,
.woocommerce-shipping-methods label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d9d9d9;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

#shipping_method label::after,
.woocommerce-shipping-methods label::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e74011;
  opacity: 0;
  transition: opacity 0.2s;
}

#shipping_method input[type="radio"]:checked + label::before,
.woocommerce-shipping-methods input[type="radio"]:checked + label::before {
  border-color: #e74011;
}

#shipping_method input[type="radio"]:checked + label::after,
.woocommerce-shipping-methods input[type="radio"]:checked + label::after {
  opacity: 1;
}

#shipping_method label .woocommerce-Price-amount,
.woocommerce-shipping-methods label .woocommerce-Price-amount {
  font-weight: 500;
}

/* Hide shipping destination text + shipping calculator */
.woocommerce-shipping-destination {
  display: none !important;
}

/* Cart totals: shipping cell must align left */
.dn-cart-totals-wrap .shop_table .shipping td,
.cart_totals .shop_table .shipping td {
  text-align: left !important;
}

/* ----------------------------------------
   DELIVERY INSTRUCTIONS SECTION
---------------------------------------- */
.dn-delivery-instructions {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--dn-border-light);
}

.dn-delivery-instructions .dn-checkout-section-title {
  margin-bottom: 16px;
}

.dn-awizacja-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.dn-awizacja-group .dn-radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.dn-awizacja-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.dn-awizacja-group .dn-radio-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--dn-dark);
  background-color: transparent;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s ease;
}

.dn-awizacja-group .dn-radio-custom::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dn-blue);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dn-awizacja-group input[type="radio"]:checked ~ .dn-radio-custom,
.dn-awizacja-group input[type="radio"]:checked + .dn-radio-custom {
  border-color: var(--dn-blue);
}

.dn-awizacja-group input[type="radio"]:checked ~ .dn-radio-custom::after,
.dn-awizacja-group input[type="radio"]:checked + .dn-radio-custom::after {
  opacity: 1;
  transform: scale(1);
}

.dn-awizacja-group .dn-radio-label-text {
  font-family: var(--dn-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--dn-dark);
}

/* Time range od/do */
.dn-time-range {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.dn-time-range label {
  font-family: var(--dn-font);
  font-weight: 300;
  font-size: 14px;
  color: var(--dn-dark);
  white-space: nowrap;
}

.dn-time-range input[type="time"],
.dn-time-range input[type="text"] {
  height: 50px;
  min-width: 120px;
  border-radius: var(--dn-radius-input);
  border: 1px solid var(--dn-border);
  padding: 0 20px;
  font-family: var(--dn-font);
  font-weight: 300;
  font-size: 15px;
  color: var(--dn-dark);
  background-color: var(--dn-bg);
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

.dn-time-range input:focus {
  border-color: var(--dn-blue);
}

.dn-time-separator {
  font-family: var(--dn-font);
  font-weight: 300;
  font-size: 14px;
  color: var(--dn-gray-text);
}

/* ----------------------------------------
   ORDER SUMMARY (right column)
---------------------------------------- */
.dn-order-summary {
  width: 100%;
}

/* ----------------------------------------
   ORDER TABLE
---------------------------------------- */
.dn-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}

.dn-order-table thead th {
  font-family: var(--dn-font);
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: var(--dn-gray-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0 12px 0;
  border-bottom: 1px solid var(--dn-border-light);
  text-align: left;
}

.dn-order-table thead th:last-child {
  text-align: right;
}

.dn-order-table tbody tr {
  border-bottom: 1px solid var(--dn-border-light);
}

.dn-order-table tbody td {
  font-family: var(--dn-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
  padding: 14px 0;
  vertical-align: top;
}

.dn-order-table tbody td:last-child {
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
}

/* Product name */
.dn-order-table .product-name {
  font-weight: 400;
}

.dn-order-table .product-quantity {
  font-weight: 300;
  color: var(--dn-gray-text);
  font-size: 13px;
  display: block;
}

/* ----------------------------------------
   TOTALS ROWS
---------------------------------------- */
.dn-order-table tfoot tr {
  border-bottom: 1px solid var(--dn-border-light);
}

.dn-order-table tfoot tr:last-child {
  border-bottom: none;
}

.dn-order-table tfoot td,
.dn-order-table tfoot th {
  padding: 12px 0;
  font-family: var(--dn-font);
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
}

.dn-order-table tfoot th {
  font-weight: 400;
  text-align: left;
}

.dn-order-table tfoot td {
  text-align: right;
  font-weight: 500;
}

/* Discount row */
.dn-order-table .cart-discount td {
  color: #2a9d5c;
}

/* Total row */
.dn-order-total-row th,
.dn-order-total-row td,
.dn-order-table tfoot .order-total th,
.dn-order-table tfoot .order-total td {
  font-weight: 600;
  font-size: 16px;
  padding-top: 16px;
  border-top: 2px solid var(--dn-dark);
  border-bottom: none;
}

/* WC order review table overrides */
table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
}

table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
  padding: 12px 0;
  font-family: var(--dn-font);
  font-size: 14px;
  color: var(--dn-dark);
  border-bottom: 1px solid var(--dn-border-light);
}

table.woocommerce-checkout-review-order-table thead th {
  font-weight: 600;
  font-size: 13px;
  color: var(--dn-gray-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

table.woocommerce-checkout-review-order-table tfoot .order-total th,
table.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-weight: 700;
  font-size: 16px;
  border-top: 2px solid var(--dn-dark);
  border-bottom: none;
}

table.woocommerce-checkout-review-order-table .cart-subtotal td,
table.woocommerce-checkout-review-order-table .cart-subtotal th,
table.woocommerce-checkout-review-order-table .shipping td,
table.woocommerce-checkout-review-order-table .shipping th {
  font-weight: 400;
}

/* ----------------------------------------
   PAYMENT SECTION
---------------------------------------- */
.dn-payment-section {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--dn-border-light);
}

.dn-payment-section .dn-checkout-section-title {
  margin-bottom: 16px;
}

/* WC payment methods list */
.dn-payment-methods,
.wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dn-payment-methods li,
.wc_payment_methods .payment_method {
  border: 1px solid var(--dn-border-light);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.dn-payment-methods li:has(input:checked),
.wc_payment_methods .payment_method:has(input:checked) {
  border-color: var(--dn-blue);
}

/* Payment method label */
.wc_payment_methods .payment_method label,
.dn-payment-methods .payment-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  font-family: var(--dn-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  color: var(--dn-dark);
}

/* Hide native radio in payment */
.wc_payment_methods input[type="radio"],
.dn-payment-methods input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom radio for payment */
.wc_payment_methods .payment_method label::before,
.dn-payment-methods .payment-label::before {
  content: '';
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--dn-dark);
  background-color: transparent;
  position: relative;
  transition: border-color 0.2s ease;
}

.wc_payment_methods .payment_method label::after,
.dn-payment-methods .payment-label::after {
  content: '';
  position: absolute;
  left: 22px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dn-blue);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.wc_payment_methods input[type="radio"]:checked ~ label::before,
.wc_payment_methods .payment_method:has(input:checked) label::before {
  border-color: var(--dn-blue);
}

.wc_payment_methods input[type="radio"]:checked ~ label::after,
.wc_payment_methods .payment_method:has(input:checked) label::after {
  opacity: 1;
  transform: scale(1);
}

/* Payment method description */
.wc_payment_methods .payment_box,
.dn-payment-methods .payment-description {
  padding: 0 18px 14px 46px;
  font-family: var(--dn-font);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--dn-gray-text);
}

/* Payment method icons */
.wc_payment_methods .payment_method img {
  height: 22px;
  width: auto;
  object-fit: contain;
  margin-left: auto;
}

/* ----------------------------------------
   CHECKOUT CHECKBOX (terms etc.)
---------------------------------------- */
.woocommerce-terms-and-conditions-wrapper,
.dn-checkout-terms {
  margin-bottom: 20px;
}

.woocommerce-terms-and-conditions-wrapper label,
.dn-checkout-terms label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--dn-font);
  font-weight: 300;
  font-size: 13px;
  line-height: 20px;
  color: var(--dn-dark);
  cursor: pointer;
}

/* Hide native checkbox */
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.dn-checkout-terms input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom checkbox 15x15 radius=2 */
.woocommerce-terms-and-conditions-wrapper .dn-checkbox-custom,
.dn-checkout-terms .dn-checkbox-custom,
.dn-checkout-page .dn-checkbox-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 2px;
  border: 1px solid var(--dn-dark);
  background-color: transparent;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.woocommerce-terms-and-conditions-wrapper .dn-checkbox-custom::after,
.dn-checkout-terms .dn-checkbox-custom::after,
.dn-checkout-page .dn-checkbox-custom::after {
  content: '';
  display: block;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--dn-bg);
  border-bottom: 2px solid var(--dn-bg);
  transform: rotate(-45deg) scale(0);
  margin-top: -2px;
  transition: transform 0.15s ease;
}

.woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked + .dn-checkbox-custom,
.dn-checkout-terms input[type="checkbox"]:checked + .dn-checkbox-custom {
  background-color: var(--dn-blue);
  border-color: var(--dn-blue);
}

.woocommerce-terms-and-conditions-wrapper input[type="checkbox"]:checked + .dn-checkbox-custom::after,
.dn-checkout-terms input[type="checkbox"]:checked + .dn-checkbox-custom::after {
  transform: rotate(-45deg) scale(1);
}

.woocommerce-terms-and-conditions-wrapper a,
.dn-checkout-terms a {
  color: var(--dn-blue);
  text-decoration: underline;
}

/* ----------------------------------------
   PLACE ORDER BUTTON
---------------------------------------- */
.dn-btn-primary,
.dn-btn-checkout,
#place_order,
.woocommerce #payment #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: var(--dn-radius-btn);
  border: none;
  background-color: var(--dn-orange);
  color: var(--dn-bg);
  font-family: var(--dn-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0 32px;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
  letter-spacing: 0.01em;
}

.dn-btn-primary:hover,
.dn-btn-checkout:hover,
#place_order:hover,
.woocommerce #payment #place_order:hover {
  background-color: #cc3610;
  box-shadow: 0 4px 16px rgba(231, 64, 17, 0.30);
  color: var(--dn-bg);
  text-decoration: none;
}

.dn-btn-primary:active,
.dn-btn-checkout:active,
#place_order:active {
  transform: scale(0.98);
}

.dn-btn-primary:disabled,
.dn-btn-checkout:disabled,
#place_order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Processing state */
.dn-btn-checkout.processing,
#place_order.processing {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}

/* ----------------------------------------
   WC NOTICES
---------------------------------------- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: var(--dn-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 20px;
  list-style: none;
}

/* Error */
.woocommerce-error {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.woocommerce-error::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #dc2626;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.woocommerce-error li {
  margin: 0;
  list-style: none;
}

/* Message (success) */
.woocommerce-message {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.woocommerce-message::before {
  content: '';
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #22c55e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9'%3E%3Cpath d='M1 4l3.5 3.5L11 1' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Info */
.woocommerce-info {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.woocommerce-info::before {
  content: 'i';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--dn-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  flex-shrink: 0;
  margin-top: 1px;
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
  font-weight: 600;
  text-decoration: underline;
  color: inherit;
}

/* ----------------------------------------
   WC VALIDATION STATES
---------------------------------------- */
.form-row.woocommerce-invalid input,
.form-row.woocommerce-invalid select,
.form-row.woocommerce-invalid textarea {
  border-color: #dc2626;
}

.form-row.woocommerce-validated input,
.form-row.woocommerce-validated select {
  border-color: #22c55e;
}

.woocommerce-invalid-required-field label::after,
.form-row.woocommerce-invalid .field-required-message {
  color: #dc2626;
  font-size: 12px;
  font-weight: 400;
}

/* ----------------------------------------
   LOADING OVERLAY
---------------------------------------- */
.blockUI.blockOverlay {
  border-radius: var(--dn-radius-card);
}

/* ----------------------------------------
   TABLET — max-width: 1024px
---------------------------------------- */
@media (max-width: 1024px) {
  .dn-container {
    padding: 0 40px;
  }

  .dn-checkout-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .dn-checkout-summary {
    order: -1;
  }

  .dn-checkout-details,
  .dn-checkout-summary {
    padding: 28px 32px;
  }

  .dn-page-title {
    font-size: 22px;
    line-height: 33px;
  }
}

/* ----------------------------------------
   MOBILE — max-width: 768px
---------------------------------------- */
@media (max-width: 768px) {
  .dn-container {
    padding: 0 16px;
  }

  .dn-checkout-page {
    padding-bottom: 48px;
  }

  .dn-checkout-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .dn-checkout-summary {
    order: -1;
  }

  .dn-checkout-details,
  .dn-checkout-summary {
    padding: 24px 20px;
  }

  .dn-page-title {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 20px;
  }

  /* Single column form fields on mobile */
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .woocommerce-billing-fields__field-wrapper .form-row.form-row-first,
  .woocommerce-billing-fields__field-wrapper .form-row.form-row-last,
  .woocommerce-shipping-fields__field-wrapper .form-row.form-row-first,
  .woocommerce-shipping-fields__field-wrapper .form-row.form-row-last {
    grid-column: 1 / -1;
  }

  /* Full-width button */
  .dn-btn-primary,
  .dn-btn-checkout,
  #place_order,
  .woocommerce #payment #place_order {
    width: 100%;
  }

  /* Payment method label padding */
  .wc_payment_methods .payment_method label,
  .dn-payment-methods .payment-label {
    padding: 12px 16px;
  }

  .wc_payment_methods .payment_box,
  .dn-payment-methods .payment-description {
    padding: 0 16px 12px 40px;
  }

  /* Coupon flex column */
  .checkout_coupon .form-row,
  .dn-coupon-area .dn-coupon-input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .checkout_coupon button[type="submit"],
  .dn-coupon-area .dn-coupon-btn {
    width: 100%;
  }

  /* Purchase type radios stack */
  .dn-purchase-type-group {
    flex-direction: column;
    gap: 12px;
  }

  /* Time range stack */
  .dn-time-range {
    flex-wrap: wrap;
  }

  .dn-time-range input[type="time"],
  .dn-time-range input[type="text"] {
    min-width: 100px;
    flex: 1;
  }

  /* Back link margin */
  .dn-checkout-page .dn-back-link {
    margin-top: 24px;
  }
}

/* ----------------------------------------
   SMALL MOBILE — max-width: 480px
---------------------------------------- */
@media (max-width: 480px) {
  .dn-container {
    padding: 0 16px;
  }

  .dn-checkout-details,
  .dn-checkout-summary {
    padding: 20px 16px;
    border-radius: 8px;
  }

  .dn-page-title {
    font-size: 18px;
    line-height: 27px;
  }

  .dn-checkout-section-title,
  .dn-checkout-details .dn-checkout-section-title,
  .dn-checkout-summary .dn-checkout-section-title {
    font-size: 15px;
  }

  /* Inputs consistent size */
  .woocommerce-billing-fields input[type="text"],
  .woocommerce-billing-fields input[type="email"],
  .woocommerce-billing-fields input[type="tel"],
  .woocommerce-billing-fields select,
  .woocommerce-shipping-fields input[type="text"],
  .woocommerce-shipping-fields input[type="email"],
  .woocommerce-shipping-fields input[type="tel"],
  .woocommerce-shipping-fields select,
  .dn-checkout-shipping-fields input,
  .dn-checkout-shipping-fields select,
  .woocommerce-input-wrapper input,
  .woocommerce-input-wrapper select {
    font-size: 15px;
  }

  .dn-btn-primary,
  .dn-btn-checkout,
  #place_order {
    font-size: 15px;
  }

  /* Tighten order table on very small screens */
  .dn-order-table thead th {
    font-size: 11px;
  }

  .dn-order-table tbody td {
    font-size: 13px;
  }

  .dn-order-table tfoot th,
  .dn-order-table tfoot td {
    font-size: 13px;
  }

  .dn-order-total-row th,
  .dn-order-total-row td,
  .dn-order-table tfoot .order-total th,
  .dn-order-table tfoot .order-total td {
    font-size: 15px;
  }

  /* WC notices full width */
  .woocommerce-error,
  .woocommerce-message,
  .woocommerce-info {
    padding: 12px 16px;
    font-size: 13px;
    border-radius: 8px;
  }
}

/* ===== PAGE: SKLEP HURTOWY (B2B SHOP) ===== */

/* B2B shop reuses .dn-shop-* classes from B2C. Only overrides here. */
.dn-b2b-shop .dn-page-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  margin-bottom: 24px;
  padding-top: 20px;
}

/* B2B sidebar — extra filter groups styling */
.dn-b2b-shop .dn-sidebar-block {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--dn-border);
}

.dn-b2b-shop .dn-sidebar-block:last-child {
  border-bottom: none;
}


/* ===== PRODUCT TABS: SHIPPING (KOSZTY DOSTAWY) ===== */

.dn-shipping-tab {
  padding: 20px 0;
}

.dn-shipping-table {
  width: 100%;
  border: 1px solid var(--dn-border);
  border-radius: var(--dn-radius-card, 10px);
  overflow: hidden;
  margin-bottom: 24px;
}

.dn-shipping-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: var(--dn-blue);
  color: #fdfdfd;
  padding: 13px 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.dn-shipping-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 20px 24px;
  border-bottom: 1px solid var(--dn-border);
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
}

.dn-shipping-row:last-child {
  border-bottom: none;
}

.dn-shipping-row__method {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dn-shipping-logo {
  max-height: 75px;
  width: auto;
  object-fit: contain;
}

.dn-shipping-free {
  color: var(--dn-discount, #12c238);
  font-weight: 500;
}

.dn-shipping-tracking {
  background-color: #f5f5f5;
  border-radius: var(--dn-radius-card, 10px);
  padding: 16px 24px;
}

.dn-shipping-tracking p {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
  margin: 4px 0;
}

.dn-shipping-tracking a {
  color: var(--dn-blue);
  text-decoration: underline;
}


/* ===== PRODUCT TABS: RETURNS (ZWROTY) ===== */

.dn-returns-tab {
  padding: 20px 0;
}

.dn-returns-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 39px;
  color: var(--dn-dark);
  margin-bottom: 32px;
  text-align: center;
}

.dn-returns-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.dn-returns-step {
  text-align: center;
}

.dn-returns-step__number {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 64px;
  line-height: 1;
  color: var(--dn-light-blue, #85b8ec);
  opacity: 0.3;
  margin-bottom: 16px;
}

.dn-returns-step__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin-bottom: 12px;
}

.dn-returns-step__desc {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
}

.dn-returns-cta {
  text-align: center;
  margin-bottom: 32px;
}

.dn-returns-cta .dn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 36px;
  border-radius: 25px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #fdfdfd;
  background-color: var(--dn-blue);
  text-decoration: none;
  margin-bottom: 12px;
}

.dn-returns-cta .dn-btn:hover {
  opacity: 0.9;
}

.dn-returns-cta__note {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  line-height: 18px;
  color: var(--dn-gray-text);
}

.dn-returns-separator {
  border: none;
  border-top: 1px solid var(--dn-border);
  margin: 32px 0;
}

.dn-returns-intro {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
  margin-bottom: 16px;
}

.dn-returns-traditional {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.dn-returns-trad-step {
  text-align: center;
}

.dn-returns-trad-step svg {
  color: var(--dn-blue);
  margin-bottom: 16px;
}

.dn-returns-trad-step p {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: var(--dn-dark);
}


/* ===== B2B CHECKOUT FIELDS ===== */

.dn-buyer-type {
  margin-bottom: 24px;
}

.dn-buyer-type__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin-bottom: 12px;
}

.dn-buyer-type__options {
  display: flex;
  gap: 24px;
}

.dn-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  cursor: pointer;
}

.dn-radio-label input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--dn-dark);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.dn-radio-label input[type="radio"]:checked {
  border-color: var(--dn-blue);
}

.dn-radio-label input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dn-blue);
}

.dn-nip-wrap {
  margin-bottom: 20px;
}

.dn-dispatch-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--dn-border);
}

.dn-dispatch-section__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: var(--dn-dark);
  margin-bottom: 16px;
}

.dn-dispatch-radios {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}

.dn-time-range {
  margin-bottom: 20px;
}

.dn-time-range__label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  margin-bottom: 8px;
}

.dn-time-range__inputs {
  display: flex;
  gap: 16px;
  align-items: center;
}

.dn-time-range__inputs label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--dn-dark);
}

.dn-time-range__inputs input[type="time"] {
  height: 50px;
  padding: 0 20px;
  border: 1px solid var(--dn-border);
  border-radius: 25px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: var(--dn-dark);
  min-width: 130px;
}


/* ===== PRODUKT B2B (PAKIET) OVERRIDES ===== */

.dn-b2b-product .dn-product-main {
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.dn-b2b-pricing {
  margin: 16px 0;
}

.dn-b2b-pricing__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.dn-b2b-pricing__label {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
}

.dn-b2b-pricing__label--brutto {
  font-size: 14px;
  line-height: 21px;
}

.dn-b2b-pricing__value {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--dn-dark);
}

.dn-b2b-pricing__value--brutto {
  font-weight: 300;
  font-size: 14px;
  line-height: 21px;
}

.dn-b2b-attrs {
  margin: 16px 0;
}

.dn-b2b-attrs__item {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--dn-dark);
  padding: 4px 0;
}

.dn-b2b-attrs__item strong {
  font-weight: 400;
}


/* ===== ADD TO CART NOTICE ===== */

.woocommerce-message .dn-cart-notice,
.dn-cart-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--dn-blue);
  color: #fdfdfd;
  padding: 14px 24px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.dn-cart-notice__text {
  font-weight: 400;
}

.dn-btn--sm {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0 20px;
  background-color: var(--dn-orange);
  color: #fdfdfd;
  border-radius: 25px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
}

.dn-btn--sm:hover {
  opacity: 0.9;
}


/* B2B/B2C toggle duplicate removed — styles in main block above */


/* ===== P3 RESPONSIVE — 1024px ===== */

@media (max-width: 1024px) {
  /* Returns steps 2 cols */
  .dn-returns-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .dn-returns-traditional {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Shipping table — stack on tablet */
  .dn-shipping-header {
    font-size: 14px;
    padding: 10px 16px;
  }

  .dn-shipping-row {
    padding: 16px;
    font-size: 14px;
  }

  .dn-shipping-logo {
    max-height: 50px;
  }

  /* B2B product */
  .dn-b2b-product .dn-product-main {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}


/* ===== P3 RESPONSIVE — 768px ===== */

@media (max-width: 768px) {
  /* Returns steps — single column */
  .dn-returns-steps {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .dn-returns-title {
    font-size: 22px;
    line-height: 33px;
  }

  .dn-returns-step__number {
    font-size: 48px;
  }

  .dn-returns-traditional {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  /* Shipping table — vertical layout */
  .dn-shipping-header {
    display: none;
  }

  .dn-shipping-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .dn-shipping-row__method {
    font-weight: 500;
  }

  .dn-shipping-row__col::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--dn-gray-text);
    margin-right: 8px;
    font-size: 12px;
  }

  /* B2B product — stack */
  .dn-b2b-product .dn-product-main {
    grid-template-columns: 1fr;
  }

  /* Checkout B2B */
  .dn-buyer-type__options {
    flex-direction: column;
    gap: 12px;
  }

  .dn-dispatch-radios {
    flex-direction: column;
    gap: 12px;
  }

  .dn-time-range__inputs {
    flex-direction: column;
    gap: 12px;
  }

  .dn-time-range__inputs input[type="time"] {
    width: 100%;
  }

  /* Cart notice */
  .dn-cart-notice {
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    font-size: 14px;
  }
}


/* ===== P3 RESPONSIVE — 480px ===== */

@media (max-width: 480px) {
  .dn-returns-steps {
    grid-template-columns: 1fr;
  }

  .dn-returns-traditional {
    grid-template-columns: 1fr;
  }

  .dn-returns-step__number {
    font-size: 36px;
  }

  .dn-shipping-row {
    padding: 12px 16px;
  }

  .dn-shipping-tracking {
    padding: 12px 16px;
  }
}

/* ============================================================
   CONSOLIDATED FIXES — 2026-03-05
   ============================================================ */

/* Referencje hero: title wrap + text column flex within 1160px container
   585 (image) + 93 (gap) + 482 (text) = 1160px */
.dn-referencje-hero__title {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* (merged into original at line ~3013) */

/* Hide WC default before_shop_loop output */
.dn-shop-page .dn-shop-main > .woocommerce-result-count,
.dn-shop-page .dn-shop-main > .woocommerce-ordering {
  display: none;
}

/* WC shop page title */
.woocommerce-page .woocommerce-products-header__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 32px;
  color: var(--dn-dark);
}

/* Konsultacje: collapse product image when missing */
.dn-konsultacje-product-img__img[alt]:not([src*='.jpg']):not([src*='.png']):not([src*='.webp']) {
  display: none;
}

/* ============================================================
   FOOTER — MOBILE RESPONSIVE FIXES (Figma audit 2026-03-05)
   ============================================================ */

@media (max-width: 768px) {
  .dn-footer-copyright {
    text-align: center;
  }

  .dn-footer-social-row {
    justify-content: center;
  }

  .dn-footer-legal {
    gap: 25px;
  }
}

/* ============================================================
   WOOCOMMERCE — CART & CHECKOUT POLISH (v1.3.0, 2026-03-06)
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   A) CART PAGE — Right column / cart totals
   ────────────────────────────────────────────────────────── */

/* Hide shipping calculator form and trigger button */
.dn-cart-totals-wrap .shipping-calculator-form,
.dn-cart-totals-wrap .shipping-calculator-button,
.cart_totals .shipping-calculator-form,
.cart_totals .shipping-calculator-button {
  display: none !important;
}

/* Hide "Metody wysyłki zostaną zaktualizowane…" destination text */
.woocommerce-shipping-destination {
  display: none !important;
}

/* VAT info "zawiera X zł VAT" — subtle grey note */
.dn-cart-totals-wrap small.includes_tax,
.cart_totals small.includes_tax,
.woocommerce-checkout-review-order small.includes_tax {
  display: block;
  font-size: 12px;
  color: #aaaaaa;
  margin-top: 4px;
  font-weight: 400;
}

/* (shipping radio styles consolidated at line ~9728) */

/* ──────────────────────────────────────────────────────────
   B) CART PAGE — Notice / message bar
   ────────────────────────────────────────────────────────── */

/* Success message — green */
.woocommerce-message {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  border: none !important;
  border-left: 3px solid #27ae60 !important;
  background: #f0faf4 !important;
  padding: 14px 20px !important;
  color: #1e1e1c !important;
  box-shadow: none !important;
}

.woocommerce-message::before {
  color: #27ae60 !important;
}

/* Info message — blue */
.woocommerce-info {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  border: none !important;
  border-left: 3px solid #014b94 !important;
  background: #f0f5fa !important;
  padding: 14px 20px !important;
  color: #1e1e1c !important;
  box-shadow: none !important;
}

.woocommerce-info::before {
  color: #014b94 !important;
}

/* Hide "Zobacz koszyk" link when already on cart page */
.dn-cart-page .dn-cart-notice .dn-btn--sm {
  display: none;
}

/* ──────────────────────────────────────────────────────────
   C) CHECKOUT PAGE — General improvements
   ────────────────────────────────────────────────────────── */

/* --- C0. Checkout simplification — hide clutter --- */

/* Hide login toggle — users login before checkout */
.dn-checkout-page .woocommerce-form-login-toggle,
.dn-checkout-page .woocommerce-form-login {
  display: none !important;
}

/* Hide "Dane rozliczeniowe" WC default h3 */
.woocommerce-billing-fields > h3,
.woocommerce-shipping-fields > h3#ship-to-different-address {
  display: none !important;
}

/* Hide WC "Wysłać na inny adres?" — shipping handled by address section */
.dn-checkout-page .woocommerce-shipping-fields > h3 {
  display: none !important;
}

/* Checkout coupon — keep but simplify */
.dn-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
  color: #014b94;
  font-weight: 500;
}

/* --- C2. Login form inputs & button --- */
.dn-checkout-page .woocommerce-form-login .input-text,
.woocommerce-checkout .woocommerce-form-login .input-text {
  height: 50px;
  border-radius: 25px;
  border: 1px solid #d9d9d9;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 300;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}

.dn-checkout-page .woocommerce-form-login .input-text:focus,
.woocommerce-checkout .woocommerce-form-login .input-text:focus {
  border-color: #014b94;
  box-shadow: 0 0 0 2px rgba(1, 75, 148, 0.1);
  outline: none;
}

.dn-checkout-page .woocommerce-form-login label,
.woocommerce-checkout .woocommerce-form-login label {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1e1e1c;
}

.dn-checkout-page .woocommerce-form-login .woocommerce-button,
.woocommerce-checkout .woocommerce-form-login .woocommerce-button {
  height: 50px;
  background: #014b94;
  color: #fff;
  border-radius: 25px;
  border: none;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 0 32px;
  cursor: pointer;
  transition: background 0.2s;
}

.dn-checkout-page .woocommerce-form-login .woocommerce-button:hover,
.woocommerce-checkout .woocommerce-form-login .woocommerce-button:hover {
  background: #013d7a;
}

/* --- C3. Coupon toggle notice --- */
.dn-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  border-top: none !important;
  border-left: 3px solid #014b94;
  background: #f0f5fa;
  border-radius: 10px;
  padding: 14px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #1e1e1c;
}

.dn-checkout-page .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a.showcoupon {
  color: #014b94;
  font-weight: 500;
}

/* --- C4. Billing form inputs --- */

/* Hide "Dane rozliczeniowe" heading */
.dn-checkout-form .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-billing-fields > h3 {
  display: none !important;
}

/* form-row spacing */
.dn-checkout-form .woocommerce-billing-fields__field-wrapper .form-row,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
.dn-checkout-form .form-row,
.woocommerce-checkout #billing_fields .form-row {
  margin-bottom: 16px;
}

/* Labels */
.dn-checkout-form .woocommerce-billing-fields__field-wrapper label,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper label,
.dn-checkout-form .woocommerce-billing-fields label,
.woocommerce-checkout #customer_details label {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1e1e1c;
  margin-bottom: 6px;
  display: block;
}

/* Text / email / tel inputs */
.dn-checkout-form .woocommerce-billing-fields__field-wrapper input[type="text"],
.dn-checkout-form .woocommerce-billing-fields__field-wrapper input[type="email"],
.dn-checkout-form .woocommerce-billing-fields__field-wrapper input[type="tel"],
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="text"],
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="email"],
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input[type="tel"],
.woocommerce-checkout #billing_first_name,
.woocommerce-checkout #billing_last_name,
.woocommerce-checkout #billing_company,
.woocommerce-checkout #billing_address_1,
.woocommerce-checkout #billing_address_2,
.woocommerce-checkout #billing_city,
.woocommerce-checkout #billing_postcode,
.woocommerce-checkout #billing_phone,
.woocommerce-checkout #billing_email {
  height: 50px;
  border-radius: 25px;
  border: 1px solid #d9d9d9;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 300;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Select elements */
.dn-checkout-form .woocommerce-billing-fields__field-wrapper select,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper select,
.woocommerce-checkout #billing_country,
.woocommerce-checkout #billing_state {
  height: 50px;
  border-radius: 25px;
  border: 1px solid #d9d9d9;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 300;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Textareas */
.dn-checkout-form textarea,
.woocommerce-checkout textarea,
.woocommerce-checkout #order_comments {
  border-radius: 15px;
  border: 1px solid #d9d9d9;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 300;
  padding: 16px 24px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* Focus state for all checkout inputs */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper input:focus,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper select:focus,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper textarea:focus,
.woocommerce-checkout #billing_first_name:focus,
.woocommerce-checkout #billing_last_name:focus,
.woocommerce-checkout #billing_company:focus,
.woocommerce-checkout #billing_address_1:focus,
.woocommerce-checkout #billing_address_2:focus,
.woocommerce-checkout #billing_city:focus,
.woocommerce-checkout #billing_postcode:focus,
.woocommerce-checkout #billing_phone:focus,
.woocommerce-checkout #billing_email:focus,
.woocommerce-checkout #billing_country:focus,
.woocommerce-checkout #billing_state:focus,
.woocommerce-checkout #order_comments:focus {
  border-color: #014b94;
  box-shadow: 0 0 0 2px rgba(1, 75, 148, 0.1);
  outline: none;
}

/* --- C6. Payment section --- */
.dn-checkout-page .woocommerce-checkout-payment,
.woocommerce-checkout #payment {
  background: #f8f8f8;
  border-radius: 10px;
  padding: 24px;
  border: 1px solid #eeeeee;
}

/* Payment method list */
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  border-bottom: 1px solid #eeeeee;
}

.woocommerce-checkout #payment ul.payment_methods li.payment_method {
  margin-bottom: 12px;
  position: relative;
}

/* Hide native payment radio */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  margin: 0;
  top: 2px;
  left: 0;
  z-index: 1;
}

/* Payment method label */
.woocommerce-checkout #payment ul.payment_methods li label {
  display: flex;
  align-items: center;
  padding-left: 28px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #1e1e1c;
  cursor: pointer;
  position: relative;
  font-weight: 500;
}

/* Payment radio circle */
.woocommerce-checkout #payment ul.payment_methods li label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #d9d9d9;
  background: #fff;
  transition: border-color 0.2s;
}

/* Payment radio dot */
.woocommerce-checkout #payment ul.payment_methods li label::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e74011;
  opacity: 0;
  transition: opacity 0.2s;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label::before {
  border-color: #e74011;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]:checked + label::after {
  opacity: 1;
}

/* Payment description box */
.woocommerce-checkout #payment .payment_box {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  margin-top: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #666;
}

/* Place order button */
.woocommerce-checkout #place_order {
  display: block;
  width: 100%;
  height: 50px;
  background: #e74011;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 16px;
}

.woocommerce-checkout #place_order:hover {
  background: #c93609;
}

/* --- C7. Order review table --- */
.dn-checkout-page .woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table {
  border: none;
  border-collapse: collapse;
  width: 100%;
}

.woocommerce-checkout-review-order-table th {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1e1e1c;
  padding: 12px 0;
  border-bottom: 1px solid #eeeeee;
  text-align: left;
}

.woocommerce-checkout-review-order-table td {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 12px 0;
  color: #1e1e1c;
}

.woocommerce-checkout-review-order-table .product-quantity {
  color: #aaaaaa;
  font-size: 13px;
}

/* tfoot: border-top on first row */
.woocommerce-checkout-review-order-table tfoot tr:first-child td,
.woocommerce-checkout-review-order-table tfoot tr:first-child th {
  border-top: 1px solid #eeeeee;
}

/* Order total row */
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-weight: 600;
  font-size: 18px;
  border-top: 2px solid #1e1e1c;
  padding-top: 16px;
}

/* --- C8. Terms checkbox --- */
.dn-checkout-page .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  margin-top: 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #555;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #e74011;
  cursor: pointer;
  margin-right: 8px;
  vertical-align: middle;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  vertical-align: middle;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a {
  color: #014b94;
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────
   END WOOCOMMERCE CART & CHECKOUT POLISH
   ────────────────────────────────────────────────────────── */